26f46b6 Thanks @alastair-simon! - Add an optional hint prop to all form fields for rendering a caption below the field. The existing #hint slot still works and takes precedence. Hint content now renders with a consistent info-icon style, which also applies to existing #hint slot usage.2875130 Thanks @arnoldstoba! - Add the mt-theme-select component for choosing the application color theme (light, dark, or system) and the useTheme composable that resolves the system preference, applies the resolved theme to data-theme, and persists the choice.5377579 Thanks @arnoldstoba! - Move inter-ui to devDependencies. The Inter font files are copied into dist/assets/fonts/ at build time, so the package stays self-contained — keep using the font.css export. If you imported inter-ui directly without declaring it, add it to your own dependencies.5377579 Thanks @arnoldstoba! - Stop publishing source maps. They were built with sourcemap: "hidden", so no published file referenced them — removes 23.6 MB of unreachable files from the package.5377579 Thanks @arnoldstoba! - Stop publishing the src directory. The exports map only exposes dist, so src was never reachable through supported imports. If you reached into src via raw node_modules paths (e.g. SCSS imports), switch to the documented dist entry points.2875130, 5377579]:f091304 Thanks @fabianhueske! - Add MtStatusDot, a small semantic status dot with variants (neutral, info, attention, critical, positive), sizes (s, m, l), an optional pulse animation for signaling live activity (disabled under reduced motion), and an optional accessible label.MtBadge, and the tab badge and the MtBadge status indicator now use MtStatusDot. Existing badge column variant values keep working unchanged; those badges now use the standard Badge styling.0d8dde1]:
226f16a Thanks @fabianhueske! - Refined several prop types to their literal values so the API reference renders them accurately. The size prop of mt-text-field, mt-number-field, and mt-unit-field is now typed as "small" | "default", and the mt-popover width prop is now typed as "dynamic" | "large" | "medium" | "small" to match the value it actually accepts (previously it listed the non-functional "auto" and omitted the "dynamic" default). These are type-only corrections; the runtime behaviour is unchanged.1cbcdb8 Thanks @keulinho! - Fix number field stepping for values with high fractional precision limits.de7628d Thanks @alastair-simon! - The collapsible open and close animations now use ease-in-out timing for a smoother transition.d292012 Thanks @arnoldstoba! - The modal now focuses the dialog container when it opens instead of the first interactive element. This prevents unintended side effects like an accidentally focused link or a tooltip opening together with the modal, while still moving focus into the dialog for keyboard and screen reader users.1e4749e Thanks @keulinho! - Fix floating-point rounding after stepping a number field.63df47b Thanks @arnoldstoba! - Remove the global html, body height rule from styles.css entirely, restoring the pre-5.2.0 behavior where consumers own their document-level layout.height: 100dvh (introduced in 5.2.0) deadlocked apps rendered in the Administration's auto-sized iframes at the 150px browser fallback, because the admin-sdk reported the pinned viewport height back to sw-iframe-renderer.min-height: 100dvh (5.3.0) fixed the deadlock but made iframe auto-resizing a one-way ratchet: body never shrinks below the iframe's current height, so location.startAutoResizer() never reports a smaller height when content shrinks, and small widgets stay floored at the 150px fallback.html,
body {
height: 100dvh;
}
db041ae Thanks @fabianhueske! - Added a way to enable every future flag at once and introduced two new flags. The Theme Provider future prop now accepts { all: true } to turn on all current and upcoming flags, so flags added in later releases are opted into automatically. Combine it with overrides to fine-tune, for example { all: true, removeCardWidth: false } to enable everything except a single flag.removeSwitchMinHeight: removes the minimum height from a non-bordered mt-switch.bannerFullWidth: makes mt-banner span the full width of its container.false by default, so behavior is unchanged until you opt in.0b11681 Thanks @alastair-simon! - Removed @shopware-ag/meteor-icon-kit from peerDependencies to prevent unwanted major version bumps. Because Changesets treats any non-patch bump of a peer dependency as a breaking change for the dependent package, a minor release of the icon kit forced a major release of the component library. The icon kit remains a regular dependency, so resolution is unchanged.664d2d3 Thanks @alastair-simon! - Added the license field (MIT) to the package metadata, aligning it with the other Meteor packages and the repository's license.d902e2a Thanks @arnoldstoba! - Fixed the component library collapsing to a 150px iframe when embedded in the Shopware Administration: html/body now use min-height: 100dvh instead of a fixed height.body background to its original hardcoded value. The background is now deprecated and will change in an upcoming major version (likely detecting the embedded context automatically so it can go transparent inside the Administration).e5c28e0 Thanks @alastair-simon! - Fixed mt-number-field inconsistently parsing pasted values with mixed decimal and grouping separators. Values such as 333,33 and 1.333,33 could silently become wrong amounts. The parser now treats the rightmost . or , as the decimal separator and removes earlier separators as grouping separators, and onInput uses the same parser so editing and blur behavior agree.b82647f Thanks @arnoldstoba! - Fixed mt-select not selecting the highlighted option with the Enter key. The keyboard listener registry was shadowed by an empty data property, so keyboard selections never reached the result items.b82647f Thanks @arnoldstoba! - Fixed mt-select showing the selected value as a placeholder when reopened. The value now stays in the input field; the result list is only filtered once the user actually edits the text.7c9f669 Thanks @arnoldstoba! - Various visual and positioning fixes across components:mt-floating-ui popovers landing in the wrong spot and drifting on scroll by pinning position to the computed strategy.mt-colorpicker popover positioning being sensitive to stylesheet source order.mt-action-menu z-index stacking order.mt-banner close icon and spacing.mt-checkbox and mt-switch icon, spacing, gap and line-height.mt-select and mt-button field icons, spacing and active state.mt-base-field label font-size and line-height.ca51ea5, 9eb0c3d]:dac8771 Thanks @arnoldstoba! - Added global css adjustments, inter font handling and css preflight reset to the librarydac8771 Thanks @arnoldstoba! - Scoped the text editor diff modal styles to avoid leaking Tailwind Preflight globally.f380305 Thanks @fabianhueske! - Fixed mt-card letting full-bleed content overflow its rounded corners by clipping content with overflow: hidden.e21a76c Thanks @fabianhueske! - Fixed mt-number-field with numberType="float" rounding some values down due to binary floating-point errors (for example 1.035 normalized to 1.03 instead of 1.04). Normalization now rounds on the decimal representation, so half-up rounding is consistent across values.e21a76c Thanks @fabianhueske! - Fixed mt-number-field with numberType="int" mangling decimal input on blur (for example 1.05 became 105 instead of 1). Decimal and exponent input is now parsed as a float and rounded to the nearest integer.89e62b3 Thanks @fabianhueske! - Fixed the mt-password-field showing the parent background behind the visibility-toggle button in dark mode. The field now paints a consistent --color-background-primary-default surface across the input and toggle button.db1cf75 Thanks @arnoldstoba! - Adjusted font bundling to import the actual woff2 font files instead of vite bundling them in base64 due to library mode defaults1ab72fb Thanks @alastair-simon! - Add anchorElement and detached props to mt-floating-ui for external anchor positioning.10bb170 Thanks @mstegmeyer! - Fix datepicker locale loading for date-fns v4 locale module exports.a4a236c Thanks @arnoldstoba! - Added optional headline and description props to the mt-loader componentb358e2a Thanks @shyim! - Fixed mt-url-field mangling IP address input. The native URL parser rewrote numeric hosts as IPv4 addresses (e.g. 192 → 0.0.0.192), and IPv6 literals were normalized or rejected mid-typing. The field now preserves the raw host the user typed and keeps the input in sync while a partial address is still being entered.1d8ee80 Thanks @arnoldstoba! - mt-field-error now resolves interpolation params from error.meta.parameters while continuing to support error.parameters.22a0d25 Thanks @gweiermann! - Prevent mt-number-field from normalizing the displayed decimal value while the user is editing.ed965bd]:5673f08 Thanks @alastair-simon! - Add maxDate prop to mt-datepicker703eccf Thanks @alastair-simon! - Add mt-collapsible component to component-library703eccf Thanks @alastair-simon! - Add mt-collapsible component to component-library5673f08 Thanks @alastair-simon! - upgrade @vuepic/vue-datepicker from v10 to v12 and migrate mt-datepicker to the new vue-datepicker APIsd453e51 Thanks @alastair-simon! - Moved test and Storybook deps to devDependencies6e8cd79 Thanks @alastair-simon! - Fix mt-entity-data-table Storybook interaction tests by waiting on rendered table contentac54a03 Thanks @alastair-simon! - fixed failing interaction tests inside mt-text-editord5fe2db, d5fe2db]:924d5cb Thanks @taltholtmann! - Do not pass disabled to mt-field-label in mt-switch, so the inheritance toggle remains clickable when the field is disabled38dca02]:d6f96a2 Thanks @alastair-simon! - Add story for mt-floating-ui02baae0 Thanks @gweiermann! - use <Teleport /> for <mt-floating-ui /> instead of manual DOM manipulatione237d93 Thanks @alastair-simon! - Add null/undefined handling to MtColorpicker modelValueeb968bd]:cdd8bca Thanks @gweiermann! - Order backdrop of modals to make them stackable196bfdc Thanks @alastair-simon! - fix size small in mt-number-field01879a1, 8bcae42]:869b2fc Thanks @gweiermann! - Deprecate mt-number-fields property allowEmpty and make its default to true instead of false.ed55526 Thanks @alastair-simon! - add mt-radio-group component72586a8 Thanks @alastair-simon! - Add showControls prop to mt-number-field69815ad Thanks @alastair-simon! - fix size small for mt-base-field20ecb82 Thanks @alastair-simon! - Export mt-help-text from component library481e01d]:mt-modal
Add header-right slot to mt-modal
Add headerHide prop to mt-modal
Add closeable prop to mt-modal-rootmt-datepickermt-empty-statemt-empty-statemt-snackbar and useSnackbartertiary variant to mt-button
Deprecated action variant on mt-button. Use secondary instead.large variant of mt-buttondefault-item prop in mt-tabsmt-datepickermt-datepickerEvent to the onLabelClick handlerlinkType to mt-empty-state to control the behaviour of the displayed link.mt-buttonlink prop in favor of the is prop.<mt-button href="https://storybook.js.org">Link</mt-button>
<mt-button is="a" href="https://storybook.js.org">Link</mt-button>
RouterLink component of the
Vue Router package. The router can intercept the page and
do a typical SPA navigation.mt-checkbox for form submitionmt-checkbox as requiredmt-number-fieldmt-data-table-text-renderer to apply correct stylesmt-datepickermin/max changes in mt-number-field to prevent invalid values.mt-datepickermt-text-field<mt-icon name="3d" :style="{ width: '20px', height: '20px' }" />
<!-- Shorter way -->
<mt-icon name="3d" size="20px" />
@change on mt-number-fieldmt-number-fieldmt-linkmt-email-field showing the error message on its init instead after interacting with it.type=button to all buttons to prevent default type=submit behaviourmt-password-field.vue component.<template>
<mt-tooltip content="My content" :max-width="200">
<template #default="props">
<button v-bind="props">Open tooltip</button>
</template>
</mt-tooltip>
</template>
<!-- Before -->
<mt-icon name="regular-3d" />
<!-- After -->
<mt-icon name="3d" />
<!-- Old way, still works, but prefer using the new way -->
<mt-icon name="solid-3d" />
<!-- New, preferred way -->
<mt-icon name="3d" mode="solid" />
mt-button componentmt-popover-deprecated component was configured to have the name MtPopover. This caused issues with some compiler setups. Change the name to MtPopoverDeprecated.// Some JavaScript file: index.js
import "@shopware-ag/meteor-component-library/dist/styles.css";
// Some JavaScript file: index.js
import "@shopware-ag/meteor-component-library/styles.css"; // Note: this path is different from the old one
import "@shopware-ag/meteor-component-library/font.css";
change event for mt-number-fieldupdate:modelValue event to mt-number-fieldAll notable changes to this project will be documented in this file.
sw-checkboxsw-text-field inheritance optionsw-bannersw-select single select behaviourvisibleValues computed property in sw-select to correctly display selected value for single select component.01879a1 Thanks @alastair-simon! - - Upgraded typescript-eslint from 8.24.1 to 8.35.0
color/interaction/secondary/pressedcolor/elevation/backdrop/defaultcolor/elevation/floating/defaultcolor/background/secondary/defaultcolor/background/tertiary/defaultcolor/icon/primary/inversecolor/icon/secondary/defaultcolor/icon/secondary/disabledcolor/icon/secondary/inversecolor/icon/brand/pressedcolor/text/primary/inversecolor/text/secondary/inversecolor/text/brand/pressedcolor/text/critical/pressedcolor/text/brand/inversecolor/static/whitecolor/static/blackcolor/interaction/primary/hover to map to color/brand/600 instead of color/brand/700 in light and dark modecolor/interaction/primary/pressed to map to color/brand/700 instead of color/brand/600 in light and dark modecolor/interaction/primary/disabled to map to color/brand/800 instead of color/brand/300 in dark modecolor/interaction/critical/hover to map to color/red/600 instead of color/red/700 in light and dark modecolor/interaction/critical/pressed to map to color/red/700 instead of color/red/600 in light and dark modecolor/interaction/critical/disabled to map to color/red/800 instead of color/red/200 in dark modecolor/interaction/secondary/default to map to color/zinc/900 instead of color/zinc/850 in dark modecolor/interaction/secondary/hover to map to color/zinc/850 instead of color/zinc/800 in dark modecolor/interaction/secondary/pressed to map to color/zinc/800 instead of color/zinc/900 in dark modecolor/elevation/surface/sunken to map to color/zinc/1000 instead of color/zinc/975 in dark modecolor/elevation/surface/default to map to color/zinc/975 instead of color/zinc/950 in dark modecolor/elevation/surface/raised to map to color/zinc/950 instead of color/zinc/900 in dark modecolor/elevation/surface/floating to map to color/elevation/floating/defaultcolor/background/brand/default to map to color/brand/900 instead of color/brand/800 in dark modecolor/background/critical/default to map to color/red/900 instead of color/red/800 in dark modecolor/background/attention/default to map to color/orange/900 instead of color/orange/800 in dark modecolor/background/positive/default to map to color/green/900 instead of color/green/800 in dark modecolor/background/accent/default to map to color/purple/900 instead of color/purple/800 in dark modecolor/background/primary/default to map to color/zinc/0 in light modecolor/background/primary/default to map to color/zinc/900 in dark modecolor/background/primary/disabled to map to color/background/tertiary/defaultcolor/background/critical/dark to map to color/background/critical/defaultcolor/icon/primary/default to map to color/zinc/900 instead of color/zinc/700 in light modecolor/icon/primary/default to map to color/zinc/50 instead of color/zinc/100 in dark modecolor/icon/primary/disabled to map to color/zinc/300 instead of color/zinc/200 in light modecolor/icon/primary/disabled to map to color/zinc/600 instead of color/zinc/500 in dark modecolor/icon/brand/hover to map to color/brand/600 instead of color/brand/700 in light and dark modecolor/icon/brand/disabled to map to color/brand/700 instead of color/brand/300 in dark modecolor/icon/critical/default to map to color/red/500 instead of color/red/400 in dark modecolor/icon/critical/disabled to map to color/red/800 instead of color/red/300 in dark modecolor/icon/static/default to map to color/static/white in light and dark modecolor/icon/static/dark to map to color/static/black in light and dark modecolor/icon/inverse/default to map to color/icon/primary/inverse instead of color/zinc/50 in light modecolor/icon/inverse/default to map to color/icon/primary/inverse instead of color/zinc/850 in dark modecolor/border/brand/selected to map to color/border/brand/defaultcolor/border/brand/default to map to color/brand/500 in dark and light modecolor/border/brand/disabled to map to color/brand/700 instead of color/brand/300 in dark modecolor/border/critical/disabled to map to color/red/700 instead of color/red/300 in dark modecolor/border/secondary/default to map to color/zinc/850 instead of color/zinc/800 in dark modecolor/border/critical/default to map to color/red/500 instead of color/red/400 in dark modecolor/border/attention/default to map to color/orange/600 instead of color/orange/500 in dark modecolor/border/positive/default to map to color/green/600 instead of color/green/500 in dark modecolor/border/accent/default to map to color/purple/600 instead of color/purple/500 in dark modecolor/text/inverse/default to map to color/text/primary/inverse instead of color/zinc/50 in light modecolor/text/inverse/default to map to color/text/primary/inverse instead of color/zinc/850 in dark modecolor/text/static/default to map to color/static/white in light and dark modecolor/text/static/dark to map to color/static/black in light and dark modecolor/text/brand/hover to map to color/brand/600 instead of color/brand/700 in light modecolor/text/brand/default to map to color/brand/400 instead of color/brand/500 in dark modecolor/text/brand/hover to map to color/brand/500 instead of color/brand/700 in dark modecolor/text/brand/disabled to map to color/brand/700 instead of color/brand/300 in dark modecolor/text/critical/hover to map to color/red/600 instead of color/red/700 in light modecolor/text/critical/hover to map to color/red/500 instead of color/red/700 in dark modecolor/text/critical/disabled to map to color/red/700 instead of color/red/300 in dark modecolor/text/primary/default to map to color/zinc/50 instead of color/zinc/100 in dark modecolor/text/primary/default to map to color/zinc/900 instead of color/zinc/800 in light modecolor/text/primary/disabled to map to color/zinc/600 instead of color/zinc/500 in dark modecolor/text/secondary/disabled to map to color/zinc/600 instead of color/zinc/500 in dark modecolor/text/critical/dark to map to color/text/critical/defaultcolor/elevation/surface/floating to map to color/zinc/0 instead of #FFFFFF in dark modeborder radius/overlay. Please use border radius/xs instead.color/interaction/secondary/dark. Please use color/interaction/secondary/default for interactive elements and color/background/tertiary/default for non-interactive elements instead.color/elevation/surface/selected. There is no direct replacement.color/elevation/surface/hover. There is no direct replacement.color/elevation/surface/frame. There is no direct replacement.color/elevation/surface/overlay. Please use color/elevation/surface/raised instead.color/elevation/surface/backdrop. Please use color/elevation/backdrop/default instead.color/elevation/surface/floating. Please use color/elevation/floating/default instead.color/background/primary/disabled. Please use color/background/tertiary/default instead.color/background/critical/dark. Please use color/background/critical/default instead.color/icon/critical/hover. There is no direct replacement. Icons in links should use the corresponding text color.color/icon/static/default. Please use color/static/white instead.color/icon/static/dark. Please use color/static/black instead.color/icon/inverse/default. Please use color/icon/primary/inverse instead.color/border/brand/selected. Please use color/border/brand/default instead.color/border/critical/dark. Please use color/border/critical/default instead.color/text/inverse/default. Please use color/text/primary/inverse instead.color/text/static/default. Please use color/static/white instead.color/text/static/dark. Please use color/static/black instead.color/text/tertiary/default. Please use color/text/secondary/default instead.color/text/attention/default. There is no direct replacement.color/text/positive/default. There is no direct replacement.color/text/critical/dark. Please use color/text/critical/default instead.5377579 Thanks @arnoldstoba! - Move the Figma sync tooling (@t3-oss/env-core, dotenv, ora, winston, zod) to devDependencies. It is only used by the unpublished icon sync script — installs get ~10 MB smaller. If you imported one of these packages without declaring it, add it to your own dependencies.ca51ea5 Thanks @alastair-simon! - Added multiple icons:
regular-panel-bottomregular-panel-leftregular-panel-rightregular-panel-topregular-shopware-copilotsolid-panel-bottomsolid-panel-leftsolid-panel-rightsolid-panel-topsolid-shopware-copilotregular-cogsolid-coged965bd Thanks @alastair-simon! - Modified icons:
shopware-intelligenceshopware-nexusshopware-paymentsd5fe2db Thanks @alastair-simon! - Added multiple icons:
regular-bitcoinregular-british-poundregular-filter-altregular-indian-rupeeregular-japanese-yenregular-shopware-intelligenceregular-shopware-nexusregular-shopware-paymentsregular-swiss-francregular-us-dollarsolid-bitcoinsolid-british-poundsolid-filter-altsolid-indian-rupeesolid-japanese-yensolid-shopware-intelligencesolid-shopware-nexussolid-shopware-paymentssolid-swiss-francsolid-us-dollard5fe2db Thanks @alastair-simon! - Modified icons:
regular-cog-ssolid-cog-sregular-boltsolid-boltregular-database-altsolid-database-altregular-flamesolid-flameregular-snowflakesolid-snowflakeregular-upscalesolid-upscaleface-confusedface-frown-slightface-meh-blankface-mehface-smile-relaxedface-smile-upside-downface-smileface-smirkingface-unamusedsolid/e-scootersolid/balance-scaleWe've added X to the set of social network icons. Farewell Larry 🐦 Added:
regular/xsolid/xregular/tiktoksolid/tiktokregular/stackoverflowsolid/stackoverflowregular/slacksolid/slackregular/3Dsolid/3Dregular/ARsolid/ARUpdated:
Revelio ✨ Added:
regular/wand-magicsolid/wand-magicregular/wand-magic-sparklessolid/wand-magic-sparklesregular/sparklesolid/sparkleregular/sparklessolid/sparklesAdded:
regular/artificial-intelligencesolid/artificial-intelligenceregular/cloudsolid/cloudregular/line-columnsolid/line-columnregular/line-column-xsUpdated:
regular/filtersolid/filterBreaking change:
delete-coloumn to delete-columninsert-coloumn-after to insert-column-afterinsert-coloumn-before to insert-column-beforeregular/wand-magic (available in 5.1.0)solid/wand-magic (available in 5.1.0)regular/wand-magic-sparkles (available in 5.1.0)solid/wand-magic-sparkles (available in 5.1.0)regular/sparkle (available in 5.1.0)solid/sparkle (available in 5.1.0)regular/sparkles (available in 5.1.0)solid/sparkles (available in 5.1.0)Revelio ✨ Added:
regular/wand-magicsolid/wand-magicregular/wand-magic-sparklessolid/wand-magic-sparklesregular/sparklesolid/sparkleregular/sparklessolid/sparklesAdded:
regular/image-textsolid/image-textChanged:
regular/microphone-slashsolid/microphone-slashregular/video-slashsolid/video-slashregular/phone-slashsolid/phone-slashregular/eye-slashsolid/eye-slashregular/volume-mutesolid/volume-muteregular/bell-slashsolid/bell-slashAdded:
regular/mobile-slashsolid/mobile-slashregular/tablet-slashsolid/tablet-slashregular/desktop-slashsolid/desktop-slashAdded:
regular/globe and solid/globeAdded:
regular/link-horizontal and solid/link-horizontalregular/link-horizontal-slash and solid/link-horizontal-slashAdded:
regular/party-horn and solid/party-hornregular/google and solid/googleFixed: - Fix size and path issues of regular/shopware and solid/shopware
Breaking change:
solid/thumbs-up, regular/thumbs-up, regular/times-hexagon, regular/thumbs-downFix:
Features:
icons folder in the NPM packageFeatures:
<!--
Security:
Features:
source calls now take a block containing gems from that source -> 95f32s5b:source option to gem to specify a source -> 95f32s5bFix:
-->