@maggioli-design-system/magma 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/esm/mds-push-notification.entry.js

@@ -1,7 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
 import { a as cssSizeToNumber, c as cssDurationToMilliseconds } from './unit-D8eZRaSQ.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
-const mdsPushNotificationCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-push-notification-fadeout-delay:0s;--mds-push-notification-gap:calc(var(--spacing,.0025rem)*200);--mds-push-notification-items-intro-delay:.3s;--mds-push-notification-items-outro-delay:0s;--mds-push-notification-items-duration:.3s;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-push-notification-fadeout-delay{syntax:"<time>";inherits:false;initial-value:0s}@property --mds-push-notification-items-intro-delay{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-push-notification-items-outro-delay{syntax:"<time>";inherits:false;initial-value:0s}@property --mds-push-notification-items-duration{syntax:"<time>";inherits:false;initial-value:.3s}:host{--mds-push-notification-fadeout-delay:0s;--mds-push-notification-gap:calc(var(--spacing,.0025rem)*200);--mds-push-notification-items-intro-delay:.3s;--mds-push-notification-items-outro-delay:0s;--mds-push-notification-items-duration:.3s;--mds-push-notification-items-gap:var(--mds-push-notification-gap,calc(var(--spacing,.0025rem)*200));--mds-push-notification-items-timing-function:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));--mds-push-notification-background:linear-gradient(90deg,#dcdcdc00 0%,#dcdcdcd9);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;gap:calc(var(--spacing,.0025rem)*200);max-width:360px;min-width:calc(var(--spacing,.0025rem)*7200);padding:calc(var(--spacing,.0025rem)*400);padding-left:calc(var(--spacing,.0025rem)*2400);scrollbar-width:none;--tw-ease:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));background:var(--mds-push-notification-background);bottom:0;box-sizing:content-box!important;display:flex;flex-direction:column;overflow-x:hidden;position:fixed;right:0;top:0;transform:translate(100%);-webkit-transition-delay:var(--mds-push-notification-fadeout-delay,0s);transition-delay:var(--mds-push-notification-fadeout-delay,0s);-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:transform;transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));z-index:var(--magma-notification-z-index,3000)}:host::-webkit-scrollbar{display:none}.notifications{display:flex;flex-direction:column-reverse;gap:var(--mds-push-notification-items-gap)}.notifications ::slotted(mds-push-notification-item){--mds-push-notification-duration:var(--mds-push-notification-items-duration,.3s);--mds-push-notification-timing-function:var(--mds-push-notification-items-timing-function);position:absolute;-webkit-transform:translate(calc(100% + calc(var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)) + var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)))));transform:translate(calc(100% + calc(var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)) + var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)))));visibility:hidden}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-push-notification-background:linear-gradient(90deg,#0000 0%,#00000080 20%,#000000d9)}:host([visible]){transform:translate(0);transition-delay:0s}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-push-notification-background:linear-gradient(90deg,#0000 0%,#00000080 20%,#000000d9)}}`;
+const mdsPushNotificationCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-push-notification-fadeout-delay:0s;--mds-push-notification-gap:calc(var(--spacing,.0025rem)*200);--mds-push-notification-items-intro-delay:.3s;--mds-push-notification-items-outro-delay:0s;--mds-push-notification-items-duration:.3s;--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-push-notification-fadeout-delay{syntax:"<time>";inherits:false;initial-value:0s}@property --mds-push-notification-items-intro-delay{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-push-notification-items-outro-delay{syntax:"<time>";inherits:false;initial-value:0s}@property --mds-push-notification-items-duration{syntax:"<time>";inherits:false;initial-value:.3s}:host{--mds-push-notification-fadeout-delay:0s;--mds-push-notification-gap:calc(var(--spacing,.0025rem)*200);--mds-push-notification-items-intro-delay:.3s;--mds-push-notification-items-outro-delay:0s;--mds-push-notification-items-duration:.3s;--mds-push-notification-items-gap:var(--mds-push-notification-gap,calc(var(--spacing,.0025rem)*200));--mds-push-notification-items-timing-function:var(--ease-in-out-quint,cubic-bezier(.86,0,.07,1));--mds-push-notification-background:linear-gradient(90deg,#dcdcdc00 0%,#dcdcdcd9);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;--tw-ease:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));background:var(--mds-push-notification-background);bottom:0;box-sizing:initial!important;display:flex;flex-direction:column;gap:calc(var(--spacing,.0025rem)*200);max-width:360px;min-width:calc(var(--spacing,.0025rem)*7200);overflow-x:hidden;padding:calc(var(--spacing,.0025rem)*400);padding-left:calc(var(--spacing,.0025rem)*2400);position:fixed;right:0;top:0;transform:translate(100%);-webkit-transition-delay:var(--mds-push-notification-fadeout-delay,0s);transition-delay:var(--mds-push-notification-fadeout-delay,0s);-webkit-transition-duration:var(--duration-500,.5s);transition-duration:var(--duration-500,.5s);transition-property:transform;transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));z-index:var(--magma-notification-z-index,3000)}:host::-webkit-scrollbar{display:none}.notifications{display:flex;flex-direction:column-reverse;gap:var(--mds-push-notification-items-gap)}.notifications ::slotted(mds-push-notification-item){--mds-push-notification-duration:var(--mds-push-notification-items-duration,.3s);--mds-push-notification-timing-function:var(--mds-push-notification-items-timing-function);position:absolute;-webkit-transform:translate(calc(100% + calc(var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)) + var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)))));transform:translate(calc(100% + calc(var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)) + var(--mds-push-notification-gap,calc(var(--spacing,.0025rem) * 200)))));visibility:hidden}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-push-notification-background:linear-gradient(90deg,#0000 0%,#00000080 20%,#000000d9)}:host([visible]){transform:translate(0);transition-delay:0s}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-push-notification-background:linear-gradient(90deg,#0000 0%,#00000080 20%,#000000d9)}}`;
 
 const MdsPushNotification = class {
     constructor(hostRef) {
@@ -80,7 +81,7 @@ const MdsPushNotification = class {
             const elements = this.slotNotifications
                 .assignedElements()
                 .map((e) => e)
-                .filter((e) => !e.style.visibility);
+                .filter((e) => e.style.visibility === '');
             if (elements.length === 0)
                 return;
             elements.forEach(async (e) => {
@@ -100,19 +101,29 @@ const MdsPushNotification = class {
             this.cssItemsOutroDuration =
                 (_c = elementStyles.getPropertyValue('--mds-push-notification-items-outro-delay')) !== null && _c !== void 0 ? _c : '0ms';
         };
+        this.clear = () => {
+            this.slotNotifications.assignedElements().forEach((e) => this.outroItem(e));
+            this.hide();
+        };
     }
-    clear() {
-        this.slotNotifications.assignedElements().forEach((e) => this.outroItem(e));
-        this.hide();
-    }
+    /**
+     * Shows the notification container.
+     */
     show() {
         this.visible = true;
         return Promise.resolve();
     }
+    /**
+     * Hides the notification container.
+     */
     hide() {
         this.visible = undefined;
         return Promise.resolve();
     }
+    /**
+     * Removes the given notification item(s) from the stack.
+     * @param notification the notification item or items to remove
+     */
     removeNotification(notification) {
         if (Array.isArray(notification)) {
             notification.forEach(this.outroItem);
@@ -122,6 +133,19 @@ const MdsPushNotification = class {
         }
         return Promise.resolve();
     }
+    connectedCallback() {
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefTheme) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefThemeScheme) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
     componentDidLoad() {
         this.updateCSSCustomProps();
         this.slotNotifications.addEventListener('slotchange', this.handleSlotChange);
@@ -141,7 +165,7 @@ const MdsPushNotification = class {
         this.visible = undefined;
     }
     render() {
-        return (h(Host, { key: '018cec5fec78b7abed252a3acc8a13352f534306' }, h("mds-button", { key: 'c96d02897f1fed58ae9d6252d9e53f8023d2c14a', variant: "dark", onClick: this.clear.bind(this) }, "Cancella notifiche"), h("div", { key: 'aabdf019411f23c91a3352ab9bc1a9c8aa02df9e', class: "notifications", part: "notifications" }, h("slot", { key: '52e483e93b453f8f860eaba64f4a2223a2eceb38', ref: (el) => (this.slotNotifications = el) }))));
+        return (h(Host, { key: '14c13d8af66f6c90da99f9f858d8696a796d01a7', "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("mds-button", { key: '61d7ab9ae3a1d0df6dd091f211b86aa7a8afb0c0', variant: "dark", onClick: this.clear }, "Cancella notifiche"), h("div", { key: '614552ee81de3151c82622a0cf209e8e93afb314', class: "notifications", part: "notifications" }, h("slot", { key: 'bd60fe0bbcc81ff17c30681f27452a5d5aca067e', ref: (el) => (this.slotNotifications = el) }))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-quote.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host } from './index-CAd5312P.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
-const mdsQuoteCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:inline-flex}.open-quote{flex-shrink:0}.quote{display:grid;gap:calc(var(--spacing,.0025rem)*400);-webkit-user-select:all;user-select:all}span{-webkit-user-select:none;user-select:none}:host-context(:root.pref-contrast-more){color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){color:rgb(var(--tone-neutral-01,255 255 255))}}`;
+const mdsQuoteCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-text:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:inline-flex}.open-quote{flex-shrink:0}.quote{display:grid;gap:calc(var(--spacing,.0025rem)*400);-webkit-user-select:all;user-select:all}span{-webkit-user-select:none;user-select:none}:host([pref-contrast=more]){color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){color:rgb(var(--tone-neutral-01,255 255 255))}}`;
 
 const MdsQuote = class {
     constructor(hostRef) {
@@ -14,8 +15,17 @@ const MdsQuote = class {
          */
         this.tag = 'h3';
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     render() {
-        return (h(Host, { key: '26db9230c187400e8df30d1c9300e0a39b4a709f' }, h("mds-text", { key: '4a1227b9e6e66376831c457746e26ec0d47b3144', class: "open-quote", tag: "div", typography: this.typography }, h("span", { key: '9d6f5ae659999f27d8de5b8e92ee13bdff75244b' }, h("i", { key: '89a139df5d605e4695f67a995174a2fbe3ca263b' }, "\u275D\u00A0"))), h("div", { key: '73d10c6274ac92bf79f1acdad40c4e7144738b4f', class: "quote" }, h("mds-text", { key: '8e6d76eec0ed6ca49b1ce01bdf5448b14c84fc1a', tag: this.tag, typography: this.typography }, h("i", { key: 'b7f817a0eda2745607a9c84d77d1059763f3d5e3' }, h("slot", { key: '1617cb4cd4ed8dc8608447c49e8872677bf69367' }), h("span", { key: '2d9982646e27a1f642d3c62bc4007caab348012e' }, "\u00A0\u275E"))), h("slot", { key: '4283ff3a9b4a31cb1e98e88e3ead9aa7e27fedb3', name: "author" }))));
+        return (h(Host, { key: 'd4732bfc13bec29539203b1bbf2f475c2124161a', "pref-contrast": this.prefContrast }, h("mds-text", { key: 'bfe617d81d506022e982b8a97f1b88e99e06bb54', class: "open-quote", tag: "div", typography: this.typography }, h("span", { key: 'd42dd7538c075ef913397f3a58b0e327cf34d005' }, h("i", { key: '4a1a90c5bf4d36c8f5e93153964688e9858faa4a' }, "\u275D\u00A0"))), h("div", { key: '84b991190ae992b3f486821100731276386d1379', class: "quote" }, h("mds-text", { key: '91bbfd150358dd889e391483d2a2ba1fc4f0f0d6', tag: this.tag, typography: this.typography }, h("i", { key: '18150d9cc0da1116079fd76efe2291ef45247089' }, h("slot", { key: '1861ee78891e58fa60c781afdc4eca8e17db0074' }), h("span", { key: '96f6ed87102e3839e258b51b1341df409056d669' }, "\u00A0\u275E"))), h("slot", { key: 'f4d6dbbe5cc07ce987fd5c35dd6f3a88e75168cd', name: "author" }))));
     }
 };
 MdsQuote.style = mdsQuoteCss();

package/dist/esm/mds-radial-menu-item.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-CAd5312P.js';
 
-const mdsRadialMenuItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-radial-menu-item-transition-duration:var(--mds-radial-menu-transition-duration,.5s)}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-tooltip):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-radial-menu-item-transition-duration:var(--mds-radial-menu-transition-duration,.5s);--mds-radial-menu-item-transition-timing-function:var(--mds-radial-menu-transition-timing-function,var(--ease-out-expo,cubic-bezier(.19,1,.22,1)));--mds-radial-menu-item-delay:0;--mds-radial-menu-item-index:0;display:inline-flex;inset:0;pointer-events:none;position:absolute;transform:scale(0);-webkit-transition-delay:var(--mds-radial-menu-item-delay);transition-delay:var(--mds-radial-menu-item-delay);-webkit-transition-duration:var(--mds-radial-menu-item-transition-duration,var(--mds-radial-menu-transition-duration,.5s));transition-duration:var(--mds-radial-menu-item-transition-duration,var(--mds-radial-menu-transition-duration,.5s));transition-property:translate,transform;-webkit-transition-timing-function:var(--mds-radial-menu-item-transition-timing-function);transition-timing-function:var(--mds-radial-menu-item-transition-timing-function);translate:var(--mds-radial-menu-item-translate)}:host(:hover){z-index:1}.button{border-radius:100%}.tooltip{--mds-tooltip-delay:0;min-width:max-content;width:min-content}`;
+const mdsRadialMenuItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-radial-menu-item-transition-duration:var(--mds-radial-menu-transition-duration,.5s)}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-tooltip):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-radial-menu-item-transition-duration:var(--mds-radial-menu-transition-duration,.5s);--mds-radial-menu-item-transition-timing-function:var(--mds-radial-menu-transition-timing-function,var(--ease-out-expo,cubic-bezier(.19,1,.22,1)));--mds-radial-menu-item-delay:0;--mds-radial-menu-item-index:0;display:inline-flex;inset:0;pointer-events:none;position:absolute;transform:scale(0);-webkit-transition-delay:var(--mds-radial-menu-item-delay);transition-delay:var(--mds-radial-menu-item-delay);-webkit-transition-duration:var(--mds-radial-menu-item-transition-duration,var(--mds-radial-menu-transition-duration,.5s));transition-duration:var(--mds-radial-menu-item-transition-duration,var(--mds-radial-menu-transition-duration,.5s));transition-property:translate,transform;-webkit-transition-timing-function:var(--mds-radial-menu-item-transition-timing-function);transition-timing-function:var(--mds-radial-menu-item-transition-timing-function);translate:var(--mds-radial-menu-item-translate)}:host(:hover){z-index:1}.button{border-radius:100%}.tooltip{--mds-tooltip-delay:0;min-width:max-content;width:min-content}`;
 
 const MdsRadialMenuItem = class {
     constructor(hostRef) {
@@ -13,10 +13,13 @@ const MdsRadialMenuItem = class {
          * Specifies the color variant for the button
          */
         this.variant = 'dark';
+        /**
+         * Specifies the size of the menu item.
+         */
         this.size = 'lg';
     }
     render() {
-        return (h(Host, { key: '9611b4afe26d59d69b5e934e6048998a5a6b15a1', slot: "item" }, h("mds-button", { key: '93984131bf9fe5aafcb1e08e3ceb86df18a2ee39', "aria-label": this.tooltip, class: "button", icon: this.icon, variant: this.variant, tone: this.tone, size: this.size }), this.tooltip && (h("mds-tooltip", { key: '849a979a53edeca55985f31b88f4e136558fea48', class: "tooltip", target: ".button", placement: "top", autoPlacement: false }, this.tooltip))));
+        return (h(Host, { key: '6ef1882d37a9f3f1d7bd014a4a257b03e310bffd', slot: "item" }, h("mds-button", { key: '697d5c349ee2083a4b766391ca7d82337b5b420b', "aria-label": this.tooltip, class: "button", icon: this.icon, variant: this.variant, tone: this.tone, size: this.size }), this.tooltip && (h("mds-tooltip", { key: '74f407d34d4d2b009a5b28d2bb2d49455b7e3423', class: "tooltip", target: ".button", placement: "top", disableAutoPlacement: true }, this.tooltip))));
     }
 };
 MdsRadialMenuItem.style = mdsRadialMenuItemCss();

package/dist/esm/mds-radial-menu.entry.js

@@ -1,14 +1,14 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-CAd5312P.js';
 import { m as miBaselineClose } from './close-J-ikDhyq.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
-import { B as Backdrop } from './floating-controller-CP3-OFb9.js';
+import { B as Backdrop } from './floating-controller-D5eXU5Mk.js';
 import './floating-ui.dom-8RYXTPXs.js';
 import './unit-D8eZRaSQ.js';
 import './aria-CSCy6TMW.js';
 
 var miBaselineMoreVert = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2s-2 .9-2 2s.9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2s-.9-2-2-2z"/></svg>`;
 
-const mdsRadialMenuCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-radial-menu-angle-start:0deg;--mds-radial-menu-angle-end:360deg;--mds-radial-menu-context-menu-z-index:var(--magma-context-menu-z-index,8000);--mds-radial-menu-delay:10ms;--mds-radial-menu-direction:-1;--mds-radial-menu-disc-background:rgb(var(--tone-neutral,0 0 0)/.5);--mds-radial-menu-disc-size:calc(var(--mds-radial-menu-radius,5rem)*2);--mds-radial-menu-radius:5rem;--mds-radial-menu-transition-duration:.5s}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-radial-menu-angle-start{syntax:"<angle>";inherits:false;initial-value:0deg}@property --mds-radial-menu-angle-end{syntax:"<angle>";inherits:false;initial-value:1turn}@property --mds-radial-menu-delay{syntax:"<time>";inherits:false;initial-value:10ms}@property --mds-radial-menu-direction{syntax:"<integer>";inherits:false;initial-value:-1}@property --mds-radial-menu-radius{syntax:"<length>";inherits:false;initial-value:5rem}@property --mds-radial-menu-transition-duration{syntax:"<time>";inherits:false;initial-value:.5s}:host{--mds-radial-menu-angle-start:0deg;--mds-radial-menu-angle-end:360deg;--mds-radial-menu-context-menu-z-index:var(--magma-context-menu-z-index,8000);--mds-radial-menu-delay:10ms;--mds-radial-menu-direction:-1;--mds-radial-menu-disc-background:rgb(var(--tone-neutral,0 0 0)/.5);--mds-radial-menu-disc-filter:blur(8px);--mds-radial-menu-disc-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-radial-menu-disc-size:calc(var(--mds-radial-menu-radius,5rem)*2);--mds-radial-menu-radius:5rem;--mds-radial-menu-transition-duration:.5s;--mds-radial-menu-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));--mds-radial-menu-nth-siblings:0;--mds-radial-menu-disc-delay:0s;--mds-radial-menu-disc-scale:0;--mds-radial-menu-radius-current:0;--mds-radial-menu-is-full-circle:1;--mds-radial-menu-is-start-greater-than-end:1;display:inline-flex;position:relative;-webkit-transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-property:top,left;-webkit-transition-timing-function:var(--mds-radial-menu-transition-timing-function);transition-timing-function:var(--mds-radial-menu-transition-timing-function);z-index:var(--magma-dropdown-z-index,5000)}:host([direction=clockwise]){--mds-radial-menu-direction:calc(var(--mds-radial-menu-is-start-greater-than-end)*-1)}:host([direction=counterclockwise]){--mds-radial-menu-direction:calc(var(--mds-radial-menu-is-start-greater-than-end)*1)}.menu-button{border-radius:100%;position:relative;transform:scale(1);-webkit-transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-duration:var(--mds-radial-menu-transition-duration,.5s);-webkit-transition-timing-function:var(--mds-radial-menu-transition-timing-function);transition-timing-function:var(--mds-radial-menu-transition-timing-function);z-index:2}:host(:not([opened])) .menu-button--hidden{transform:scale(0)}.radial-menu{inset:0;pointer-events:none;position:absolute;-webkit-transition-delay:calc((var(--mds-radial-menu-nth-siblings)*2)*var(--mds-radial-menu-delay,10ms));transition-delay:calc((var(--mds-radial-menu-nth-siblings)*2)*var(--mds-radial-menu-delay,10ms));transition-property:z-index;z-index:3}:host(:not([opened])) .radial-menu{transition-delay:0s;z-index:1}:host(:not([opened])){--mds-radial-menu-radius-current:0}:host([opened]){--mds-radial-menu-radius-current:var(--mds-radial-menu-radius,5rem)}:host([opened]) ::slotted(mds-radial-menu-item){pointer-events:auto;transform:scale(1)}::slotted(mds-radial-menu-item){--mds-radial-menu-item-offset-per-child:calc((var(--mds-radial-menu-angle-end,360deg) - var(--mds-radial-menu-angle-start,0deg))/(var(--mds-radial-menu-nth-siblings) + var(--mds-radial-menu-is-full-circle)));--mds-radial-menu-item-angle-offset:calc(var(--mds-radial-menu-direction,-1)*var(--mds-radial-menu-item-index)*var(--mds-radial-menu-item-offset-per-child));--mds-radial-menu-item-delay:calc((var(--mds-radial-menu-item-index) + 1)*var(--mds-radial-menu-delay,10ms));--mds-radial-menu-item-translate:calc(cos((var(--mds-radial-menu-angle-start,0deg) + var(--mds-radial-menu-item-angle-offset))) * var(--mds-radial-menu-radius-current)) calc(sin((var(--mds-radial-menu-angle-start,0deg) + var(--mds-radial-menu-item-angle-offset))) * var(--mds-radial-menu-radius-current) * -1)}.disc{--size:calc(var(--mds-radial-menu-disc-size,calc(var(--mds-radial-menu-radius,5rem) * 2)) + var(--mds-radial-menu-radius,5rem));-webkit-backdrop-filter:var(--mds-radial-menu-disc-filter);backdrop-filter:var(--mds-radial-menu-disc-filter);background-color:var(--mds-radial-menu-disc-background,rgb(var(--tone-neutral,0 0 0)/.5));border-radius:100%;-webkit-box-shadow:var(--mds-radial-menu-disc-shadow);box-shadow:var(--mds-radial-menu-disc-shadow);display:inline-flex;height:var(--size);inset:50%;position:absolute;-webkit-transform:translate(-50%,-50%) scale(var(--mds-radial-menu-disc-scale));transform:translate(-50%,-50%) scale(var(--mds-radial-menu-disc-scale));-webkit-transition-delay:var(--mds-radial-menu-disc-delay);transition-delay:var(--mds-radial-menu-disc-delay);-webkit-transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-property:height,transform,width;-webkit-transition-timing-function:var(--mds-radial-menu-transition-timing-function);transition-timing-function:var(--mds-radial-menu-transition-timing-function);width:var(--size);z-index:0}:host(:not([opened][disc])){--mds-radial-menu-disc-scale:0;--mds-radial-menu-disc-delay:calc((var(--mds-radial-menu-nth-siblings) + 1)*var(--mds-radial-menu-delay,10ms))}:host([opened][disc]){--mds-radial-menu-disc-scale:1;--mds-radial-menu-disc-delay:0s}:host([interaction=rightclick]){position:fixed;z-index:var(--mds-radial-menu-context-menu-z-index,var(--magma-context-menu-z-index,8000))}`;
+const mdsRadialMenuCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-radial-menu-angle-start:0deg;--mds-radial-menu-angle-end:360deg;--mds-radial-menu-context-menu-z-index:var(--magma-context-menu-z-index,8000);--mds-radial-menu-delay:10ms;--mds-radial-menu-direction:-1;--mds-radial-menu-disc-background:rgb(var(--tone-neutral,0 0 0)/.5);--mds-radial-menu-disc-size:calc(var(--mds-radial-menu-radius,5rem)*2);--mds-radial-menu-radius:5rem;--mds-radial-menu-transition-duration:.5s}}}:host(:not(:is([hydrated],.hydrated))),mds-button:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-radial-menu-angle-start{syntax:"<angle>";inherits:false;initial-value:0deg}@property --mds-radial-menu-angle-end{syntax:"<angle>";inherits:false;initial-value:1turn}@property --mds-radial-menu-delay{syntax:"<time>";inherits:false;initial-value:10ms}@property --mds-radial-menu-direction{syntax:"<integer>";inherits:false;initial-value:-1}@property --mds-radial-menu-radius{syntax:"<length>";inherits:false;initial-value:5rem}@property --mds-radial-menu-transition-duration{syntax:"<time>";inherits:false;initial-value:.5s}:host{--mds-radial-menu-angle-start:0deg;--mds-radial-menu-angle-end:360deg;--mds-radial-menu-context-menu-z-index:var(--magma-context-menu-z-index,8000);--mds-radial-menu-delay:10ms;--mds-radial-menu-direction:-1;--mds-radial-menu-disc-background:rgb(var(--tone-neutral,0 0 0)/.5);--mds-radial-menu-disc-filter:blur(8px);--mds-radial-menu-disc-shadow:var(--shadow-lg-sharp,0 0 1px 1px #0000000f,0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d);--mds-radial-menu-disc-size:calc(var(--mds-radial-menu-radius,5rem)*2);--mds-radial-menu-radius:5rem;--mds-radial-menu-transition-duration:.5s;--mds-radial-menu-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));--mds-radial-menu-nth-siblings:0;--mds-radial-menu-disc-delay:0s;--mds-radial-menu-disc-scale:0;--mds-radial-menu-radius-current:0;--mds-radial-menu-is-full-circle:1;--mds-radial-menu-is-start-greater-than-end:1;display:inline-flex;position:relative;-webkit-transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-property:top,left;-webkit-transition-timing-function:var(--mds-radial-menu-transition-timing-function);transition-timing-function:var(--mds-radial-menu-transition-timing-function);z-index:var(--magma-dropdown-z-index,5000)}:host([direction=clockwise]){--mds-radial-menu-direction:calc(var(--mds-radial-menu-is-start-greater-than-end)*-1)}:host([direction=counterclockwise]){--mds-radial-menu-direction:calc(var(--mds-radial-menu-is-start-greater-than-end)*1)}.menu-button{border-radius:100%;position:relative;transform:scale(1);-webkit-transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-duration:var(--mds-radial-menu-transition-duration,.5s);-webkit-transition-timing-function:var(--mds-radial-menu-transition-timing-function);transition-timing-function:var(--mds-radial-menu-transition-timing-function);z-index:2}:host(:not([opened])) .menu-button--hidden{transform:scale(0)}.radial-menu{inset:0;pointer-events:none;position:absolute;-webkit-transition-delay:calc((var(--mds-radial-menu-nth-siblings)*2)*var(--mds-radial-menu-delay,10ms));transition-delay:calc((var(--mds-radial-menu-nth-siblings)*2)*var(--mds-radial-menu-delay,10ms));transition-property:z-index;z-index:3}:host(:not([opened])) .radial-menu{transition-delay:0s;z-index:1}:host(:not([opened])){--mds-radial-menu-radius-current:0}:host([opened]){--mds-radial-menu-radius-current:var(--mds-radial-menu-radius,5rem)}:host([opened]) ::slotted(mds-radial-menu-item){pointer-events:auto;transform:scale(1)}::slotted(mds-radial-menu-item){--mds-radial-menu-item-offset-per-child:calc((var(--mds-radial-menu-angle-end,360deg) - var(--mds-radial-menu-angle-start,0deg))/(var(--mds-radial-menu-nth-siblings) + var(--mds-radial-menu-is-full-circle)));--mds-radial-menu-item-angle-offset:calc(var(--mds-radial-menu-direction,-1)*var(--mds-radial-menu-item-index)*var(--mds-radial-menu-item-offset-per-child));--mds-radial-menu-item-delay:calc((var(--mds-radial-menu-item-index) + 1)*var(--mds-radial-menu-delay,10ms));--mds-radial-menu-item-translate:calc(cos((var(--mds-radial-menu-angle-start,0deg) + var(--mds-radial-menu-item-angle-offset))) * var(--mds-radial-menu-radius-current)) calc(sin((var(--mds-radial-menu-angle-start,0deg) + var(--mds-radial-menu-item-angle-offset))) * var(--mds-radial-menu-radius-current) * -1)}.disc{--size:calc(var(--mds-radial-menu-disc-size,calc(var(--mds-radial-menu-radius,5rem) * 2)) + var(--mds-radial-menu-radius,5rem));-webkit-backdrop-filter:var(--mds-radial-menu-disc-filter);backdrop-filter:var(--mds-radial-menu-disc-filter);background-color:var(--mds-radial-menu-disc-background,rgb(var(--tone-neutral,0 0 0)/.5));border-radius:100%;-webkit-box-shadow:var(--mds-radial-menu-disc-shadow);box-shadow:var(--mds-radial-menu-disc-shadow);display:inline-flex;height:var(--size);inset:50%;position:absolute;-webkit-transform:translate(-50%,-50%) scale(var(--mds-radial-menu-disc-scale));transform:translate(-50%,-50%) scale(var(--mds-radial-menu-disc-scale));-webkit-transition-delay:var(--mds-radial-menu-disc-delay);transition-delay:var(--mds-radial-menu-disc-delay);-webkit-transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-duration:var(--mds-radial-menu-transition-duration,.5s);transition-property:height,transform,width;-webkit-transition-timing-function:var(--mds-radial-menu-transition-timing-function);transition-timing-function:var(--mds-radial-menu-transition-timing-function);width:var(--size);z-index:0}:host(:not([opened][disc])){--mds-radial-menu-disc-scale:0;--mds-radial-menu-disc-delay:calc((var(--mds-radial-menu-nth-siblings) + 1)*var(--mds-radial-menu-delay,10ms))}:host([opened][disc]){--mds-radial-menu-disc-scale:1;--mds-radial-menu-disc-delay:0s}:host([interaction=rightclick]){position:fixed;z-index:var(--mds-radial-menu-context-menu-z-index,var(--magma-context-menu-z-index,8000))}`;
 
 const MdsRadialMenu = class {
     constructor(hostRef) {
@@ -119,7 +119,7 @@ const MdsRadialMenu = class {
         this.onInteractionChange(this.interaction);
     }
     disconnectedCallback() {
-        if (!document)
+        if (typeof document === 'undefined')
             return;
         document.removeEventListener('contextmenu', this.toggleRightClickMenu);
     }
@@ -135,7 +135,7 @@ const MdsRadialMenu = class {
         this.handleBackdrop();
     }
     onInteractionChange(newValue) {
-        if (!document)
+        if (typeof document === 'undefined')
             return;
         if (newValue === 'rightclick') {
             document.addEventListener('contextmenu', this.toggleRightClickMenu);
@@ -166,7 +166,7 @@ const MdsRadialMenu = class {
         this.handleBackdrop();
     }
     render() {
-        return (h(Host, { key: '18679022a9759985a3c518df2d733b94d28473dc' }, h("mds-button", { key: '156f0692417d19bc2f9418469d1b011ea5f0f72f', class: clsx('menu-button', this.interaction !== 'click' && 'menu-button--hidden'), icon: this.opened ? miBaselineClose : this.icon, tone: this.tone, variant: this.variant, size: this.size, onClick: this.toggleMenu }), h("div", { key: '4277fb28c411a3ec3808d46e260e0800fc92eebb', class: "radial-menu", part: "radial-menu" }, h("slot", { key: 'ff21f4e1110c14954128ec0e891507ff178fa548', name: "item", onSlotchange: this.updateItems })), h("div", { key: 'e5dc3a9fbd3f813721bfdefbbf445fb4b4301995', class: "disc" })));
+        return (h(Host, { key: '6f7cf327cfc3a90b1ce80e9e9aab86f6423cbf41' }, h("mds-button", { key: '545b32a7fe48707ceb0eec5adb799a776421a053', class: clsx('menu-button', this.interaction !== 'click' && 'menu-button--hidden'), icon: this.opened ? miBaselineClose : this.icon, tone: this.tone, variant: this.variant, size: this.size, onClick: this.toggleMenu }), h("div", { key: '76acb7ae11c61f5f216c1870f61eb5cd50b1848b', class: "radial-menu", part: "radial-menu" }, h("slot", { key: '1f0a16e3505609ec32450384c40f35ec439c58ed', name: "item", onSlotchange: this.updateItems })), h("div", { key: 'cd886be843d69836088046472a720ceaac4b7676', class: "disc" })));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-separator.entry.js

@@ -1,13 +1,31 @@
 import { r as registerInstance, h, H as Host } from './index-CAd5312P.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
-const mdsSeparatorCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-separator-background:rgb(var(--tone-neutral-08,107 107 107))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-separator-background:rgb(var(--tone-neutral-08,107 107 107));background-color:var(--mds-separator-background,rgb(var(--tone-neutral-08,107 107 107)));border-radius:var(--radius-full,1000px);display:flex;height:1px}:host-context(:root.pref-theme-dark){--mds-separator-background:rgb(var(--tone-neutral-07,134 134 134))}:host-context(:root.pref-contrast-more){--mds-separator-background:rgb(var(--tone-neutral-06,158 158 158))}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-separator-background:rgb(var(--tone-neutral-07,134 134 134))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-separator-background:rgb(var(--tone-neutral-06,158 158 158))}}`;
+const mdsSeparatorCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-separator-background:rgb(var(--tone-neutral-08,107 107 107))}}}:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-separator-background:rgb(var(--tone-neutral-08,107 107 107));background-color:var(--mds-separator-background,rgb(var(--tone-neutral-08,107 107 107)));border-radius:var(--radius-full,1000px);display:flex;height:1px}:host([pref-theme=dark]){--mds-separator-background:rgb(var(--tone-neutral-07,134 134 134))}:host([pref-contrast=more]){--mds-separator-background:rgb(var(--tone-neutral-06,158 158 158))}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-separator-background:rgb(var(--tone-neutral-07,134 134 134))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-separator-background:rgb(var(--tone-neutral-06,158 158 158))}}`;
 
 const MdsSeparator = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefTheme) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefThemeScheme) === null || _c === void 0 ? void 0 : _c.call(this);
+    }
     render() {
-        return h(Host, { key: 'b77bfa637825f2c45736df617eaac64b69427ad0' });
+        return (h(Host, { key: 'ea2d787f29d9a411ff5d52bb7159f61af06706fb', "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }));
     }
 };
 MdsSeparator.style = mdsSeparatorCss();

package/dist/esm/mds-status-bar.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-CAd5312P.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
-const mdsStatusBarCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-status-bar-max-width:500px;--mds-status-bar-backdrop:rgb(var(--tone-neutral-01,255 255 255)/.1)}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-modal,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-status-bar-max-width{syntax:"<length>";inherits:false;initial-value:500px}:host{--mds-status-bar-max-width:500px;--mds-status-bar-backdrop:rgb(var(--tone-neutral-01,255 255 255)/.1);--mds-status-bar-backdrop-filter:blur(10px)}mds-modal{--mds-modal-custom-window-distance:0;--mds-modal-custom-closed-transform:translateY(100%)}.status-bar-area{-webkit-backdrop-filter:var(--mds-status-bar-backdrop-filter);backdrop-filter:var(--mds-status-bar-backdrop-filter);background-color:var(--mds-status-bar-backdrop,rgb(var(--tone-neutral-01,255 255 255)/.1));border-radius:var(--radius-xl,20px) var(--radius-xl,20px) 0 0;margin-left:calc(var(--spacing,.0025rem)*600);margin-right:calc(var(--spacing,.0025rem)*600);padding:calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*600);transition-property:background-color,transform,opacity}.status-bar{align-items:flex-start;background-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-lg,16px);-webkit-box-shadow:var(--shadow-md,0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a);box-shadow:var(--shadow-md,0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a);max-width:var(--mds-status-bar-max-width,500px);padding:calc(var(--spacing,.0025rem)*600)}.actions,.status-bar{display:inline-flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*400)}.actions{flex-grow:1}:host-context(:root.pref-animation-reduce) .status-bar-area{transition-duration:0s}:host-context(:root.pref-consumption-medium){--mds-status-bar-backdrop-filter:none}:host-context(:root.pref-contrast-more){--mds-status-bar-backdrop:rgb(var(--tone-neutral-02,244 244 244)/.3)}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .status-bar{-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light)}@media (max-width:480px){.status-bar-area{border-radius:0;margin-left:0;margin-right:0;padding:calc(var(--spacing,.0025rem)*400);width:100%}.status-bar{width:100%}.actions{gap:calc(var(--spacing,.0025rem)*200)}::slotted(*){flex-grow:1}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .status-bar-area{transition-duration:0s}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-status-bar-backdrop:rgb(var(--tone-neutral-02,244 244 244)/.3)}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .status-bar{-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light)}}`;
+const mdsStatusBarCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-status-bar-max-width:500px;--mds-status-bar-backdrop:rgb(var(--tone-neutral-01,255 255 255)/.1)}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-modal,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-status-bar-max-width{syntax:"<length>";inherits:false;initial-value:500px}:host{--mds-status-bar-max-width:500px;--mds-status-bar-backdrop:rgb(var(--tone-neutral-01,255 255 255)/.1);--mds-status-bar-backdrop-filter:blur(10px)}mds-modal{--mds-modal-custom-window-distance:0;--mds-modal-custom-closed-transform:translateY(100%)}.status-bar-area{-webkit-backdrop-filter:var(--mds-status-bar-backdrop-filter);backdrop-filter:var(--mds-status-bar-backdrop-filter);background-color:var(--mds-status-bar-backdrop,rgb(var(--tone-neutral-01,255 255 255)/.1));border-radius:var(--radius-xl,20px) var(--radius-xl,20px) 0 0;margin-left:calc(var(--spacing,.0025rem)*600);margin-right:calc(var(--spacing,.0025rem)*600);padding:calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*600);transition-property:background-color,transform,opacity}.status-bar{align-items:flex-start;background-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-lg,16px);-webkit-box-shadow:var(--shadow-md,0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a);box-shadow:var(--shadow-md,0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a);max-width:var(--mds-status-bar-max-width,500px);padding:calc(var(--spacing,.0025rem)*600)}.actions,.status-bar{display:inline-flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*400)}.actions{flex-grow:1}:host([pref-consumption=medium]){--mds-status-bar-backdrop-filter:none}:host([pref-contrast=more]){--mds-status-bar-backdrop:rgb(var(--tone-neutral-02,244 244 244)/.3)}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .status-bar{-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light)}@media (max-width:480px){.status-bar-area{border-radius:0;margin-left:0;margin-right:0;padding:calc(var(--spacing,.0025rem)*400);width:100%}.status-bar{width:100%}.actions{gap:calc(var(--spacing,.0025rem)*200)}::slotted(*){flex-grow:1}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-status-bar-backdrop:rgb(var(--tone-neutral-02,244 244 244)/.3)}}@media (prefers-color-scheme:dark){:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))) .status-bar{-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light)}}`;
 
 const MdsStatusBar = class {
     constructor(hostRef) {
@@ -14,21 +15,45 @@ const MdsStatusBar = class {
          */
         this.position = 'bottom-right';
     }
+    connectedCallback() {
+        this.unsubscribeConsumption = subscribePreference('consumption', (value) => {
+            this.consumption = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribeConsumption) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     componentDidLoad() {
         var _a;
         this.modal = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.modal');
-        this.modal.backdrop = undefined;
+        this.modal.hideBackdrop = true;
     }
     handleVisbilityProp(newValue) {
         if (newValue === false) {
             this.visible = undefined;
         }
     }
+    /**
+     * Hides the status bar.
+     */
     async hide() {
         this.visible = undefined;
     }
     render() {
-        return (h(Host, { key: '2e37f49ed168ac4f92de372d2174073b193ed5f3' }, h("mds-modal", { key: '248f8662369de074f704d86b3ff83597b2403592', class: "modal", opened: this.visible, position: this.position, animation: "custom", overflow: this.overflow }, h("div", { key: '3acce82b21bd279dab72e67cf3ecaa6c2c88c228', class: "status-bar-area", part: "status-bar-area", slot: "window" }, h("div", { key: '40b7f67c8e568860cbdf843ca46b98f5fa61a765', class: "status-bar", part: "status-bar" }, this.description && (h("mds-text", { key: 'e669ba5dfe960c3a11812f55720f35ad2d1514a6', typography: "caption", class: "description" }, this.description)), h("div", { key: 'bb0266d41aa9eabd340e1a709a625e94c08682ed', class: "actions", part: "actions" }, h("slot", { key: 'aac6557450ec7509c1126dfc1ccc629474e4d5e8' })))))));
+        return (h(Host, { key: '9513dd86370989a1a6c6d0823d4aa16206f3b5b5', "pref-consumption": this.consumption, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("mds-modal", { key: '1e5731bfc9f747842197386c2f7f1d01d3456205', class: "modal", opened: this.visible, position: this.position, animation: "custom", overflow: this.overflow }, h("div", { key: '0e3270a397ee348b736889134d20b2c913415d05', class: "status-bar-area", part: "status-bar-area", slot: "window" }, h("div", { key: '9401d2abdcc9ee9e0b7ed31575b820c7d93a579e', class: "status-bar", part: "status-bar" }, this.description && (h("mds-text", { key: 'b95add3fd67ba4a8e7a42b9222f7421547a793d7', typography: "caption", class: "description" }, this.description)), h("div", { key: '156f0e9e4f550344eef4cc0774f6c924d5dbd265', class: "actions", part: "actions" }, h("slot", { key: '28e6a570064fbb9fd541e2a8ad66be93bed36aa9' })))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-stepper-bar-item.entry.js

@@ -2,6 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { c as clsx } from './clsx-ChV9xqsO.js';
 import { K as KeyboardManager } from './keyboard-manager-BudfaWhu.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
 const badgeDone$3 = "Ολοκληρώθηκε";
 const badgeCurrent$3 = "Καθημερινή";
@@ -47,7 +48,7 @@ var localeIt = {
 	step: step
 };
 
-const mdsStepperBarItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03,233 233 233));--mds-stepper-bar-item-duaration:.25s;--mds-stepper-bar-item-icon-background-done:rgb(var(--status-success-05,107 206 147));--mds-stepper-bar-item-icon-background-current:rgb(var(--variant-primary-04,184 208 255));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-stepper-bar-item-icon-color-done:rgb(var(--status-success-10,0 69 0));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral,0 0 0));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04,218 218 218));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current,rgb(var(--variant-primary-04,184 208 255)));--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral,0 0 0));--mds-stepper-bar-item-icon-ring-separator-size:.375rem;--mds-stepper-bar-item-icon-ring-size:var(--height-100);--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08,107 107 107));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04,158 222 181));--mds-stepper-bar-item-progress-thickness:var(--height-200);--tw-ease:initial;--tw-duration:initial}}}@layer reset,vendor,theme,base,components,utilities;@property --mds-stepper-bar-item-duaration{syntax:"<time>";inherits:false;initial-value:.25s}@property --mds-stepper-bar-item-icon-ring-separator-size{syntax:"<length>";inherits:false;initial-value:.375rem}@property --mds-stepper-bar-item-min-width{syntax:"<length>";inherits:false;initial-value:180px}:host{--mds-stepper-bar-item-header-gap:var(--mds-stepper-bar-gap,calc(var(--spacing,.0025rem)*50));--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03,233 233 233));--mds-stepper-bar-item-duaration:.25s;--mds-stepper-bar-item-icon-background-done:rgb(var(--status-success-05,107 206 147));--mds-stepper-bar-item-icon-background-current:rgb(var(--variant-primary-04,184 208 255));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-stepper-bar-item-icon-color-done:rgb(var(--status-success-10,0 69 0));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral,0 0 0));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04,218 218 218));--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08,107 107 107));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04,158 222 181));--mds-stepper-bar-item-progress-thickness:var(--height-200);align-items:flex-start;border-radius:var(--radius-xl,20px);display:grid;flex:1 0 0;flex-direction:column;gap:calc(var(--spacing,.0025rem)*400);min-width:var(--mds-stepper-bar-item-min-width,180px);position:relative;scroll-snap-align:center;-webkit-transition-duration:var(--mds-stepper-bar-item-duaration,.25s);transition-duration:var(--mds-stepper-bar-item-duaration,.25s);transition-property:outline,outline-offset,background-color}:host(:last-of-type){flex-basis:calc(var(--spacing,.0025rem)*100)}:host(:last-of-type) .progress{display:none}:host([done]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-done,rgb(var(--status-success-05,107 206 147)));--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-done,rgb(var(--status-success-10,0 69 0)));transition-delay:0s}:host([current]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current,rgb(var(--variant-primary-04,184 208 255)));--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current,rgb(var(--tone-neutral,0 0 0)));-webkit-transition-delay:calc(var(--mds-stepper-bar-item-duaration,.25s)/2);transition-delay:calc(var(--mds-stepper-bar-item-duaration,.25s)/2)}.header{border-radius:var(--radius-md,12px);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));align-items:center;display:flex;gap:var(--mds-stepper-bar-item-header-gap);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:outline,outline-offset;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));width:100%}.icon{border-radius:var(--radius-full,1000px);--tw-duration:.15s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--mds-stepper-bar-item-icon-background,var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107))));display:flex;fill:var(--mds-stepper-bar-item-icon-color,rgb(var(--tone-neutral-04,218 218 218)));flex-shrink:0;padding:calc(var(--spacing,.0025rem)*200);position:relative;transition-duration:.15s;-webkit-transition-duration:var(--mds-stepper-bar-item-duaration,.25s);transition-duration:var(--mds-stepper-bar-item-duaration,.25s);transition-property:background-color,fill;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color,rgb(var(--status-success-04,158 222 181)));--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness,var(--height-200));--mds-progress-radius:0;flex-grow:1}.infos{display:grid;gap:calc(var(--spacing,.0025rem)*100);padding-left:calc(var(--spacing,.0025rem)*100)}.text{--tw-duration:.15s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));color:var(--mds-stepper-bar-item-color,rgb(var(--tone-neutral-03,233 233 233)));pointer-events:none;transition-duration:.15s;-webkit-transition-duration:var(--mds-stepper-bar-item-duaration,.25s);transition-duration:var(--mds-stepper-bar-item-duaration,.25s);transition-property:color;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}.badge,.step{border-radius:var(--radius-full,1000px);pointer-events:none}.step{color:rgb(var(--tone-neutral-04,218 218 218))}:host-context(:root.pref-animation-reduce){transition-delay:0s!important;transition-duration:0s}:is(:host-context(:root.pref-animation-reduce) .header,:host-context(:root.pref-animation-reduce) .icon,:host-context(:root.pref-animation-reduce) .text){transition-delay:0s!important;transition-duration:0s}@property --tw-ease{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .header,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .icon,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .text{transition-delay:0s!important;transition-duration:0s}}`;
+const mdsStepperBarItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03,233 233 233));--mds-stepper-bar-item-duaration:.25s;--mds-stepper-bar-item-icon-background-done:rgb(var(--status-success-05,107 206 147));--mds-stepper-bar-item-icon-background-current:rgb(var(--variant-primary-04,184 208 255));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-stepper-bar-item-icon-color-done:rgb(var(--status-success-10,0 69 0));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral,0 0 0));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04,218 218 218));--mds-stepper-bar-item-icon-ring-color:var(--mds-stepper-bar-item-icon-background-current,rgb(var(--variant-primary-04,184 208 255)));--mds-stepper-bar-item-icon-ring-separator-color:rgb(var(--tone-neutral,0 0 0));--mds-stepper-bar-item-icon-ring-separator-size:.375rem;--mds-stepper-bar-item-icon-ring-size:var(--height-100);--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08,107 107 107));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04,158 222 181));--mds-stepper-bar-item-progress-thickness:var(--height-200);--tw-ease:initial}}}@property --mds-stepper-bar-item-duaration{syntax:"<time>";inherits:false;initial-value:.25s}@property --mds-stepper-bar-item-icon-ring-separator-size{syntax:"<length>";inherits:false;initial-value:.375rem}@property --mds-stepper-bar-item-min-width{syntax:"<length>";inherits:false;initial-value:180px}:host{--mds-stepper-bar-item-header-gap:var(--mds-stepper-bar-gap,calc(var(--spacing,.0025rem)*50));--mds-stepper-bar-item-color:rgb(var(--tone-neutral-03,233 233 233));--mds-stepper-bar-item-duaration:.25s;--private-stepper-bar-item-duaration:var(--mds-stepper-bar-item-duaration,.25s);--mds-stepper-bar-item-transition-duration:var(--duration-200,.2s);--private-stepper-bar-item-transition-duration:var(--mds-stepper-bar-item-transition-duration);--mds-stepper-bar-item-icon-background-done:rgb(var(--status-success-05,107 206 147));--mds-stepper-bar-item-icon-background-current:rgb(var(--variant-primary-04,184 208 255));--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-stepper-bar-item-icon-color-done:rgb(var(--status-success-10,0 69 0));--mds-stepper-bar-item-icon-color-current:rgb(var(--tone-neutral,0 0 0));--mds-stepper-bar-item-icon-color:rgb(var(--tone-neutral-04,218 218 218));--mds-stepper-bar-item-min-width:180px;--mds-stepper-bar-item-progress-background:rgb(var(--tone-neutral-08,107 107 107));--mds-stepper-bar-item-progress-color:rgb(var(--status-success-04,158 222 181));--mds-stepper-bar-item-progress-thickness:var(--height-200);align-items:flex-start;border-radius:var(--radius-xl,20px);display:grid;flex:1 0 0;flex-direction:column;gap:calc(var(--spacing,.0025rem)*400);min-width:var(--mds-stepper-bar-item-min-width,180px);position:relative;scroll-snap-align:center;-webkit-transition-duration:var(--private-stepper-bar-item-duaration);transition-duration:var(--private-stepper-bar-item-duaration);transition-property:outline,outline-offset,background-color}:host(:last-of-type){-ms-flex-preferred-size:calc(var(--spacing,.0025rem)*100);flex-basis:calc(var(--spacing,.0025rem)*100)}:host(:last-of-type) .progress{display:none}:host([done]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-done,rgb(var(--status-success-05,107 206 147)));--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-done,rgb(var(--status-success-10,0 69 0)));transition-delay:0s}:host([current]) .icon{--mds-stepper-bar-item-icon-background:var(--mds-stepper-bar-item-icon-background-current,rgb(var(--variant-primary-04,184 208 255)));--mds-stepper-bar-item-icon-color:var(--mds-stepper-bar-item-icon-color-current,rgb(var(--tone-neutral,0 0 0)));-webkit-transition-delay:calc(var(--private-stepper-bar-item-duaration)/2);transition-delay:calc(var(--private-stepper-bar-item-duaration)/2)}.header{--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));align-items:center;border-radius:var(--radius-md,12px);display:flex;gap:var(--mds-stepper-bar-item-header-gap);-webkit-transition-duration:var(--private-stepper-bar-item-transition-duration);transition-duration:var(--private-stepper-bar-item-transition-duration);transition-property:outline,outline-offset;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));width:100%}.icon{--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--mds-stepper-bar-item-icon-background,var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107))));border-radius:var(--radius-full,1000px);display:flex;fill:var(--mds-stepper-bar-item-icon-color,rgb(var(--tone-neutral-04,218 218 218)));flex-shrink:0;padding:calc(var(--spacing,.0025rem)*200);position:relative;-webkit-transition-duration:var(--private-stepper-bar-item-duaration);transition-duration:var(--private-stepper-bar-item-duaration);transition-property:background-color,fill;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}.progress{--mds-stepper-bar-item-background:var(--mds-stepper-bar-item-progress-background,rgb(var(--tone-neutral-08,107 107 107)));--mds-stepper-bar-item-color:var(--mds-stepper-bar-item-progress-color,rgb(var(--status-success-04,158 222 181)));--mds-stepper-bar-item-thickness:var(--mds-stepper-bar-item-progress-thickness,var(--height-200));--mds-progress-radius:0;flex-grow:1}.infos{display:grid;gap:calc(var(--spacing,.0025rem)*100);padding-left:calc(var(--spacing,.0025rem)*100)}.text{--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));color:var(--mds-stepper-bar-item-color,rgb(var(--tone-neutral-03,233 233 233)));pointer-events:none;-webkit-transition-duration:var(--private-stepper-bar-item-duaration);transition-duration:var(--private-stepper-bar-item-duaration);transition-property:color;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}.badge,.step{border-radius:var(--radius-full,1000px);pointer-events:none}.step{color:rgb(var(--tone-neutral-04,218 218 218))}:host([pref-animation=reduce]){--private-stepper-bar-item-duaration:0s;--private-stepper-bar-item-transition-duration:0s}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-stepper-bar-item-duaration:0s;--private-stepper-bar-item-transition-duration:0s}}`;
 
 const MdsStepperBarItem = class {
     constructor(hostRef) {
@@ -86,6 +87,9 @@ const MdsStepperBarItem = class {
             return (h("mds-badge", { class: "badge", variant: "dark", tone: "weak", typography: "option" }, this.t.get('badgeQueued')));
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -103,7 +107,14 @@ const MdsStepperBarItem = class {
     componentWillRender() {
         this.t.lang(this.host);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
     disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
         this.km.detachClickBehavior();
     }
     selectedHandler(newValue) {
@@ -113,7 +124,7 @@ const MdsStepperBarItem = class {
         this.isCurrent = newValue;
     }
     render() {
-        return (h(Host, { key: '117ff77114f72fb2e58659a53a594b133092edc2' }, h("div", { key: 'bdfcff07ea6e0c849643b1c36d8d0a3004d90a0f', class: "header" }, h("mds-icon", { key: '15a20b0bb4bd3ec80e04890fafe28f657aa50c62', class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { key: '3da9d9cd257d82f7628f5f2845524854fd6a43e2', "aria-hidden": "true", class: "progress", progress: this.isDone ? 1 : 0 })), h("div", { key: '21ceca94f0545a0110558483668f289122fb2dcf', class: "infos" }, this.step && (h("mds-text", { key: 'd7609567247c9cf43acf3a52b8ee0c3e1697fbc5', class: "step", typography: "option" }, this.t.get('step', { index: this.index + 1 }))), this.label && (h("mds-text", { key: '3fc26167d085031d5ff9c7241c80046d28a1843d', class: "text", typography: this.typography }, this.label)), this.badge && h("div", { key: '1ff407f2b05a19f13d3cdf7abc508853e9fb951c', part: "badge" }, this.showBadge()))));
+        return (h(Host, { key: '5a8c6d0b17fd719b63c022620da9c0e52d4d6396', "pref-animation": this.prefAnimation }, h("div", { key: 'bbc8a708a030d5877166a4ce59c6072be1312a21', class: "header" }, h("mds-icon", { key: '3d1b84caad6c99c41427f2e9df11257020ef7f5e', class: "icon", name: clsx(this.isDone && !this.isCurrent ? this.iconChecked : this.icon) }), h("mds-progress", { key: '174bb2a23c49847fd7a9fd7c8520d8536599750e', "aria-hidden": "true", class: "progress", progress: this.isDone ? 1 : 0 })), h("div", { key: '7a7a1499febfb335abbcc5971cf0d210a71d2bbb', class: "infos" }, this.step && (h("mds-text", { key: 'b7e0840dc402e165495aa9362e1a4a5094853c74', class: "step", typography: "option" }, this.t.get('step', { index: this.index + 1 }))), this.label && (h("mds-text", { key: 'f1204fb34565802fad46d6b74a9c6eade81a488c', class: "text", typography: this.typography }, this.label)), this.badge && h("div", { key: '98cba12f069e469a100387be7636f494f1c9796d', part: "badge" }, this.showBadge()))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-stepper-bar.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
 
-const mdsStepperBarCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-stepper-bar-gap:calc(var(--spacing,.0025rem)*500);--mds-stepper-bar-offset-margin:0;--mds-stepper-bar-scroll-behavior:smooth;--mds-stepper-bar-scrollbar-margin:0;--mds-stepper-bar-scrollbar-radius:0;--mds-stepper-bar-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-stepper-bar-scrollbar-thumb-background:rgb(var(--tone-neutral-06,158 158 158));--mds-stepper-bar-scrollbar-track-background:rgb(var(--tone-neutral-08,107 107 107))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-progress,mds-stepper-bar-item):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-stepper-bar-offset-margin{syntax:"<length>";inherits:false;initial-value:0}@property --mds-stepper-bar-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}@property --mds-stepper-bar-scrollbar-margin{syntax:"<length>";inherits:false;initial-value:0}@property --mds-stepper-bar-scrollbar-radius{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-stepper-bar-gap:calc(var(--spacing,.0025rem)*500);--mds-stepper-bar-offset-margin:0;--mds-stepper-bar-scroll-behavior:smooth;--mds-stepper-bar-scrollbar-margin:0;--mds-stepper-bar-scrollbar-radius:0;--mds-stepper-bar-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-stepper-bar-scrollbar-thumb-background:rgb(var(--tone-neutral-06,158 158 158));--mds-stepper-bar-scrollbar-track-background:rgb(var(--tone-neutral-08,107 107 107));display:grid;gap:calc(var(--spacing,.0025rem)*600);position:relative}.items{align-items:start;display:flex;flex-grow:1;gap:var(--mds-stepper-bar-gap,calc(var(--spacing,.0025rem)*500));margin:0 calc(var(--mds-stepper-bar-offset-margin,0)*-1);overflow:auto;padding:0 var(--mds-stepper-bar-offset-margin,0);position:relative;scroll-behavior:var(--mds-stepper-bar-scroll-behavior,smooth);-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;width:100%;z-index:10}:host([linear=true]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=false]) ::slotted(mds-stepper-bar-item){pointer-events:auto}.contents{display:flex;flex-direction:column;width:100%}:host-context(:root.pref-animation-reduce){--mds-stepper-bar-scroll-behavior:auto;transition-duration:0s}:is(:host-context(:root.pref-animation-reduce) .contents,:host-context(:root.pref-animation-reduce) .items){transition-duration:0s}:host(:not([navigation=scrollbar])) .items{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}:host(:not([navigation=scrollbar])) .items::-webkit-scrollbar{display:none}:host([navigation=scrollbar]) .items::-webkit-scrollbar{height:var(--mds-stepper-bar-scrollbar-size,calc(var(--spacing,.0025rem)*200));width:var(--mds-stepper-bar-scrollbar-size,calc(var(--spacing,.0025rem)*200))}:host([navigation=scrollbar]) .items::-webkit-scrollbar-track{background-color:var(--mds-stepper-bar-scrollbar-track-background,rgb(var(--tone-neutral-08,107 107 107)));border-radius:var(--mds-stepper-bar-scrollbar-radius,0);margin-block:var(--mds-stepper-bar-scrollbar-margin,0);margin-inline:var(--mds-stepper-bar-scrollbar-margin,0)}:host([navigation=scrollbar]) .items::-webkit-scrollbar-thumb{background-color:var(--mds-stepper-bar-scrollbar-thumb-background,rgb(var(--tone-neutral-06,158 158 158)));border-radius:var(--mds-stepper-bar-scrollbar-radius,0)}@supports (scrollbar-color:transparent transparent){.items{scrollbar-color:var(--mds-stepper-bar-scrollbar-thumb-background,rgb(var(--tone-neutral-06,158 158 158))) var(--mds-stepper-bar-scrollbar-track-background,rgb(var(--tone-neutral-08,107 107 107)));scrollbar-width:thin}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-stepper-bar-scroll-behavior:auto;transition-duration:0s}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .contents,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .items{transition-duration:0s}}`;
+const mdsStepperBarCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-stepper-bar-gap:calc(var(--spacing,.0025rem)*500);--mds-stepper-bar-offset-margin:0;--mds-stepper-bar-scroll-behavior:smooth;--mds-stepper-bar-scrollbar-margin:0;--mds-stepper-bar-scrollbar-radius:0;--mds-stepper-bar-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-stepper-bar-scrollbar-thumb-background:rgb(var(--tone-neutral-06,158 158 158));--mds-stepper-bar-scrollbar-track-background:rgb(var(--tone-neutral-08,107 107 107))}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-progress,mds-stepper-bar-item):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-stepper-bar-offset-margin{syntax:"<length>";inherits:false;initial-value:0}@property --mds-stepper-bar-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}@property --mds-stepper-bar-scrollbar-margin{syntax:"<length>";inherits:false;initial-value:0}@property --mds-stepper-bar-scrollbar-radius{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-stepper-bar-gap:calc(var(--spacing,.0025rem)*500);--mds-stepper-bar-offset-margin:0;--mds-stepper-bar-scroll-behavior:smooth;--mds-stepper-bar-scrollbar-margin:0;--mds-stepper-bar-scrollbar-radius:0;--mds-stepper-bar-scrollbar-size:calc(var(--spacing,.0025rem)*200);--mds-stepper-bar-scrollbar-thumb-background:rgb(var(--tone-neutral-06,158 158 158));--mds-stepper-bar-scrollbar-track-background:rgb(var(--tone-neutral-08,107 107 107));display:grid;gap:calc(var(--spacing,.0025rem)*600);position:relative}.items{align-items:start;display:flex;flex-grow:1;gap:var(--mds-stepper-bar-gap,calc(var(--spacing,.0025rem)*500));margin:0 calc(var(--mds-stepper-bar-offset-margin,0)*-1);overflow:auto;padding:0 var(--mds-stepper-bar-offset-margin,0);position:relative;scroll-behavior:var(--mds-stepper-bar-scroll-behavior,smooth);-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;width:100%;z-index:10}:host([linear=true]) ::slotted(mds-stepper-bar-item),:host([linear]) ::slotted(mds-stepper-bar-item){pointer-events:none}:host([linear=false]) ::slotted(mds-stepper-bar-item){pointer-events:auto}.contents{display:flex;flex-direction:column;width:100%}:host(:not([navigation=scrollbar])) .items{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none}:host(:not([navigation=scrollbar])) .items::-webkit-scrollbar{display:none}:host([navigation=scrollbar]) .items::-webkit-scrollbar{height:var(--mds-stepper-bar-scrollbar-size,calc(var(--spacing,.0025rem)*200));width:var(--mds-stepper-bar-scrollbar-size,calc(var(--spacing,.0025rem)*200))}:host([navigation=scrollbar]) .items::-webkit-scrollbar-track{background-color:var(--mds-stepper-bar-scrollbar-track-background,rgb(var(--tone-neutral-08,107 107 107)));border-radius:var(--mds-stepper-bar-scrollbar-radius,0);margin-block:var(--mds-stepper-bar-scrollbar-margin,0);margin-inline:var(--mds-stepper-bar-scrollbar-margin,0)}:host([navigation=scrollbar]) .items::-webkit-scrollbar-thumb{background-color:var(--mds-stepper-bar-scrollbar-thumb-background,rgb(var(--tone-neutral-06,158 158 158)));border-radius:var(--mds-stepper-bar-scrollbar-radius,0)}@supports (scrollbar-color:transparent transparent){.items{scrollbar-color:var(--mds-stepper-bar-scrollbar-thumb-background,rgb(var(--tone-neutral-06,158 158 158))) var(--mds-stepper-bar-scrollbar-track-background,rgb(var(--tone-neutral-08,107 107 107)));scrollbar-width:thin}}@media (prefers-reduced-motion:reduce){:host{--mds-stepper-bar-scroll-behavior:auto}}`;
 
 const MdsStepperBar = class {
     constructor(hostRef) {
@@ -28,7 +28,7 @@ const MdsStepperBar = class {
                 item.done = false;
                 if (key < this.currentItem) {
                     item.done = true;
-                    if (item.value) {
+                    if (item.value !== undefined && item.value !== '') {
                         values.push(item.value);
                     }
                 }
@@ -98,7 +98,7 @@ const MdsStepperBar = class {
         });
     }
     render() {
-        return (h(Host, { key: 'a0b7e159765a3130fcc67b2e3a1146b0c43907ff' }, h("div", { key: '25d1984f704bc071cda8010ab382384d28b86273', class: "items", part: "items" }, h("slot", { key: 'f32c13a94bbce2e93f28ef23b2dfcaeec17269d1' })), h("div", { key: '7dc90454240058f41ce07f98bb53e4376346b582', class: "contents", part: "contents" }, h("slot", { key: '25185f4817e18132b066c01d9d98353e1f62b19e', name: "content" }))));
+        return (h(Host, { key: 'bde1cc3ed68aa3d3350af4639fa0a4dbf3cc27ee' }, h("div", { key: 'f556e63f5e575d3c83b6aec4ea405c709d811121', class: "items", part: "items" }, h("slot", { key: '43e7514d9ba620109caa3f585e0a9f5cc92f0ed6' })), h("div", { key: '46e7419b2ef009a3e37b70d5a5bab92df25dd5f9', class: "contents", part: "contents" }, h("slot", { key: 'cddf350976b5910117d1d64bae6b87bd32c37954', name: "content" }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-tab-bar-item.entry.js

@@ -1,12 +1,16 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
 import { r as readSlottedLabel, s as sanitizeLabel } from './slot-ttrRC6OE.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
-const mdsTabBarItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-tab-bar-item-background:rgb(var(--tone-neutral-10,60 60 60));--mds-tab-bar-item-background-selected:transparent;--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-03,211 226 255));--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-tab-bar-item-background-selected{syntax:"<color>";inherits:false;initial-value:#0000}:host{--mds-tab-bar-item-background:rgb(var(--tone-neutral-10,60 60 60));--mds-tab-bar-item-background-selected:transparent;--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-03,211 226 255));gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*200);--tw-duration:.2s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));align-items:center;background-color:var(--mds-tab-bar-item-background,rgb(var(--tone-neutral-10,60 60 60)));color:var(--mds-tab-bar-item-color,rgb(var(--tone-neutral-04,218 218 218)));cursor:pointer;display:flex;fill:var(--mds-tab-bar-item-color,rgb(var(--tone-neutral-04,218 218 218)));flex:1 0 0;flex-direction:column;text-align:center;transition-duration:.2s;transition-property:color,background-color,fill;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}:host([selected]:not([selected=false])){background-color:var(--mds-tab-bar-item-background-selected,transparent);color:var(--mds-tab-bar-item-color-selected,rgb(var(--variant-primary-03,211 226 255)));fill:var(--mds-tab-bar-item-color-selected,rgb(var(--variant-primary-03,211 226 255)))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}:host-context(:root.pref-contrast-more){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}}`;
+const mdsTabBarItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-tab-bar-item-background:rgb(var(--tone-neutral-10,60 60 60));--mds-tab-bar-item-background-selected:#0000;--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-03,211 226 255));--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-tab-bar-item-background-selected{syntax:"<color>";inherits:false;initial-value:#0000}:host{--mds-tab-bar-item-background:rgb(var(--tone-neutral-10,60 60 60));--mds-tab-bar-item-background-selected:#0000;--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-03,211 226 255));--mds-tab-bar-item-transition-duration:var(--duration-200,.2s);--private-tab-bar-item-transition-duration:var(--mds-tab-bar-item-transition-duration);--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));align-items:center;background-color:var(--mds-tab-bar-item-background,rgb(var(--tone-neutral-10,60 60 60)));color:var(--mds-tab-bar-item-color,rgb(var(--tone-neutral-04,218 218 218)));cursor:pointer;display:flex;fill:var(--mds-tab-bar-item-color,rgb(var(--tone-neutral-04,218 218 218)));flex:1 0 0;flex-direction:column;gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*200);text-align:center;-webkit-transition-duration:var(--private-tab-bar-item-transition-duration);transition-duration:var(--private-tab-bar-item-transition-duration);transition-property:color,background-color,fill;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}:host([selected]:not([selected=false])){background-color:var(--mds-tab-bar-item-background-selected,#0000);color:var(--mds-tab-bar-item-color-selected,rgb(var(--variant-primary-03,211 226 255)));fill:var(--mds-tab-bar-item-color-selected,rgb(var(--variant-primary-03,211 226 255)))}:host([pref-animation=reduce]){--private-tab-bar-item-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}:host([pref-contrast=more]){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-tab-bar-item-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-tab-bar-item-color:rgb(var(--tone-neutral-04,218 218 218));--mds-tab-bar-item-color-selected:rgb(var(--variant-primary-02,230 239 255))}}`;
 
 const MdsTabBarItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.selectedEvent = createEvent(this, "mdsTabBarItemSelect");
+        /**
+         * The icon displayed in the tab bar item.
+         */
         this.icon = '';
         /**
          * Specifies the typography of the element
@@ -20,7 +24,7 @@ const MdsTabBarItem = class {
         };
         this.onSlotChangeHandler = () => {
             /* this should be removed in the future once slotted text is no longer used, use the label property instead */
-            if (this.label)
+            if (this.label !== undefined && this.label !== '')
                 return;
             this.label = readSlottedLabel(this.element);
         };
@@ -28,6 +32,27 @@ const MdsTabBarItem = class {
     componentWillLoad() {
         this.isSelected = this.selected;
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     validateSelected(newValue) {
         this.isSelected = newValue;
     }
@@ -35,7 +60,7 @@ const MdsTabBarItem = class {
         this.label = sanitizeLabel(newValue);
     }
     render() {
-        return (h(Host, { key: 'cfdd8682bdab7117d3853abff77c31f871314a20', onClick: this.select }, h("mds-icon", { key: '4dd1b08193a0c6c1238104c1484523b7cc074a8a', name: this.icon }), h("mds-text", { key: 'd8bb748fbc4941fd5b65101997a1a21b1b7a1ed4', typography: this.typography }, this.label || h("slot", { key: '7e4fead88e847406b6e22ac534fcd67862fbe613', onSlotchange: this.onSlotChangeHandler }))));
+        return (h(Host, { key: 'cc00fc45e7c8086a20e3800a9aca2fad80c08b7e', onClick: this.select, "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("mds-icon", { key: '7edf9ade273c6408a477b9ccefd00be8fa323501', name: this.icon }), h("mds-text", { key: '42e04f0959f32573efbe01cc294d0a7a3754423f', typography: this.typography }, this.label || h("slot", { key: 'a654056dce145ce9bc0236cd4381e8b89f743dc5', onSlotchange: this.onSlotChangeHandler }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {