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

package/dist/esm/mds-paginator-item.entry.js

@@ -1,13 +1,25 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-CAd5312P.js';
 import { K as KeyboardManager } from './keyboard-manager-BudfaWhu.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
-const mdsPaginatorItemCss = () => `@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 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-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-radius:200px;--mds-paginator-item-size:calc(var(--spacing,.0025rem)*900);--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-paginator-item-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-paginator-item-radius{syntax:"<length>";inherits:false;initial-value:200px}:host{--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);--mds-paginator-item-shadow:none;--mds-paginator-item-size:calc(var(--spacing,.0025rem)*900);animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));padding-inline:calc(var(--spacing,.0025rem)*300);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));align-items:center;background-color:var(--mds-paginator-item-background,transparent);border-radius:var(--mds-paginator-item-radius,200px);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);box-sizing:border-box;color:var(--mds-paginator-item-color,rgb(var(--tone-neutral-02,244 244 244)));cursor:pointer;display:inline-flex;flex-shrink:0;height:var(--mds-paginator-item-size,calc(var(--spacing,.0025rem)*900));justify-content:center;min-width:var(--mds-paginator-item-size,calc(var(--spacing,.0025rem)*900));transition-duration:.2s;-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-property:background-color,box-shadow,color,outline,outline-offset;transition-timing-function:ease-in-out;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));-webkit-user-select:none;user-select:none}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host(:hover){background-color:var(--mds-paginator-item-background-hover,rgb(var(--tone-neutral-08,107 107 107)));-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover,rgb(var(--tone-neutral-02,244 244 244)));fill:var(--mds-paginator-item-color-hover,rgb(var(--tone-neutral-02,244 244 244)))}:host([icon]){padding:calc(var(--spacing,.0025rem)*0)}:host([selected]){background-color:var(--mds-paginator-item-background-selected,rgb(var(--variant-primary-03,211 226 255)));-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected,rgb(var(--tone-neutral,0 0 0)));fill:var(--mds-paginator-item-color-selected,rgb(var(--tone-neutral,0 0 0)));pointer-events:none}:host([disabled]){background-color:var(--mds-paginator-item-background-disabled,rgb(var(--tone-neutral-09,76 76 76)));-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled,rgb(var(--tone-neutral-06,158 158 158)));fill:var(--mds-paginator-item-color-disabled,rgb(var(--tone-neutral-06,158 158 158)));pointer-events:none}.icon{fill:currentColor;padding-inline:calc(var(--spacing,.0025rem)*0)}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);--mds-paginator-item-shadow:none}@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-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:transparent;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);--mds-paginator-item-shadow:none}}`;
+const mdsPaginatorItemCss = () => `@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-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:#0000;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-radius:200px;--mds-paginator-item-size:calc(var(--spacing,.0025rem)*900);--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-paginator-item-background{syntax:"<color>";inherits:false;initial-value:#0000}@property --mds-paginator-item-radius{syntax:"<length>";inherits:false;initial-value:200px}:host{--mds-paginator-item-transition-duration:var(--duration-200,.2s);--private-paginator-item-transition-duration:var(--mds-paginator-item-transition-duration);--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:#0000;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-radius:200px;--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);--mds-paginator-item-shadow:none;--mds-paginator-item-size:calc(var(--spacing,.0025rem)*900);animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));align-items:center;background-color:var(--mds-paginator-item-background,#0000);border-radius:var(--mds-paginator-item-radius,200px);-webkit-box-shadow:var(--mds-paginator-item-shadow);box-shadow:var(--mds-paginator-item-shadow);box-sizing:border-box;color:var(--mds-paginator-item-color,rgb(var(--tone-neutral-02,244 244 244)));cursor:pointer;display:inline-flex;flex-shrink:0;height:var(--mds-paginator-item-size,calc(var(--spacing,.0025rem)*900));justify-content:center;min-width:var(--mds-paginator-item-size,calc(var(--spacing,.0025rem)*900));padding-inline:calc(var(--spacing,.0025rem)*300);transition-duration:.2s;-webkit-transition-duration:var(--private-paginator-item-transition-duration);transition-duration:var(--private-paginator-item-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-property:background-color,box-shadow,color,outline,outline-offset;transition-timing-function:ease-in-out;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));-webkit-user-select:none;user-select:none}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host(:hover){background-color:var(--mds-paginator-item-background-hover,rgb(var(--tone-neutral-08,107 107 107)));-webkit-box-shadow:var(--mds-paginator-item-shadow-hover);box-shadow:var(--mds-paginator-item-shadow-hover);color:var(--mds-paginator-item-color-hover,rgb(var(--tone-neutral-02,244 244 244)));fill:var(--mds-paginator-item-color-hover,rgb(var(--tone-neutral-02,244 244 244)))}:host([icon]){padding:0}:host([selected]){background-color:var(--mds-paginator-item-background-selected,rgb(var(--variant-primary-03,211 226 255)));-webkit-box-shadow:var(--mds-paginator-item-shadow-selected);box-shadow:var(--mds-paginator-item-shadow-selected);color:var(--mds-paginator-item-color-selected,rgb(var(--tone-neutral,0 0 0)));fill:var(--mds-paginator-item-color-selected,rgb(var(--tone-neutral,0 0 0)));pointer-events:none}:host([disabled]){background-color:var(--mds-paginator-item-background-disabled,rgb(var(--tone-neutral-09,76 76 76)));-webkit-box-shadow:var(--mds-paginator-item-shadow-disabled);box-shadow:var(--mds-paginator-item-shadow-disabled);color:var(--mds-paginator-item-color-disabled,rgb(var(--tone-neutral-06,158 158 158)));fill:var(--mds-paginator-item-color-disabled,rgb(var(--tone-neutral-06,158 158 158)));pointer-events:none}.icon{fill:currentColor;padding-inline:0}:host([pref-animation=reduce]){--private-paginator-item-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:#0000;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);--mds-paginator-item-shadow:none}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-paginator-item-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-paginator-item-background-disabled:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-item-background-hover:rgb(var(--tone-neutral-08,107 107 107));--mds-paginator-item-background-selected:rgb(var(--variant-primary-03,211 226 255));--mds-paginator-item-background:#0000;--mds-paginator-item-color-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-paginator-item-color-hover:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-color-selected:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-color:rgb(var(--tone-neutral-02,244 244 244));--mds-paginator-item-shadow-disabled:none;--mds-paginator-item-shadow-hover:none;--mds-paginator-item-shadow-selected:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);--mds-paginator-item-shadow:none}}`;
 
 const MdsPaginatorItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.km = new KeyboardManager();
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
     componentDidLoad() {
         this.km.addElement(this.host);
         this.km.attachClickBehavior();
@@ -20,10 +32,14 @@ const MdsPaginatorItem = class {
         this.km.detachClickBehavior();
     }
     disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.unsubscribePrefAnimation) === 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);
         this.km.detachClickBehavior();
     }
     render() {
-        return (h(Host, { key: 'a3ce23954b5e1d520399f1b21d70d585ee016d47', tabindex: "0" }, this.icon !== undefined ? (h("mds-icon", { class: "icon", name: this.icon })) : (h("mds-text", { class: "text", typography: "caption" }, h("b", null, h("slot", null))))));
+        return (h(Host, { key: '45f9712aabb1119f72bc76986fc0043ea7839b93', tabindex: "0", "pref-animation": this.prefAnimation, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.icon !== undefined ? (h("mds-icon", { class: "icon", name: this.icon })) : (h("mds-text", { class: "text", typography: "caption" }, h("b", null, h("slot", null))))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,8 +1,9 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 import { m as miBaselineArrowBack } from './arrow-back-DnEUG7st.js';
 import { m as miBaselineArrowForward } from './arrow-forward-Bd0uuNDE.js';
 
-const mdsPaginatorCss = () => `@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-paginator-background:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-scroll-behavior:smooth;--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-paginator-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-paginator-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}:host{--mds-paginator-background:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-scroll-behavior:smooth;align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*100)}.pages{margin-inline:calc(var(--spacing,.0025rem)*200);-webkit-overflow-scrolling:touch;-ms-overflow-style:none;border-radius:var(--radius-full,1000px);padding:calc(var(--spacing,.0025rem)*200);scrollbar-width:none;--tw-duration:.2s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));align-items:center;background-color:var(--mds-paginator-background,rgb(var(--tone-neutral-09,76 76 76)));display:flex;flex-shrink:1;gap:2px;overflow:auto;scroll-behavior:var(--mds-paginator-scroll-behavior,smooth);transition-duration:.2s;transition-property:background-color,box-shadow;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}.pages::-webkit-scrollbar{display:none}:host-context(:root.pref-animation-reduce){--mds-paginator-scroll-behavior:auto;transition-duration:0s}:host-context(:root.pref-animation-reduce) .pages{--mds-paginator-scroll-behavior:auto;transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-paginator-background:rgb(var(--tone-neutral-09,76 76 76))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .pages{-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:host-context(:root.pref-contrast-more) .pages{-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:host-context(:root.pref-contrast-more) .item{--mds-paginator-item-background-hover:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:none}:is(:host-context(:root.pref-contrast-more) .item-first,:host-context(:root.pref-contrast-more) .item-last,:host-context(:root.pref-contrast-more) .item-icon){--mds-paginator-item-shadow-disabled:var(--shadow-outline-50) inset;--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:var(--shadow-outline-50) inset}@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]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .pages{--mds-paginator-scroll-behavior:auto;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-paginator-background:rgb(var(--tone-neutral-09,76 76 76))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .pages{-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .pages{-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item{--mds-paginator-item-background-hover:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:none}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item-first,:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item-icon,:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item-last{--mds-paginator-item-shadow-disabled:var(--shadow-outline-50) inset;--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:var(--shadow-outline-50) inset}}`;
+const mdsPaginatorCss = () => `@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-paginator-background:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-scroll-behavior:smooth;--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),mds-paginator-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-paginator-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}:host{--mds-paginator-background:rgb(var(--tone-neutral-09,76 76 76));--mds-paginator-scroll-behavior:smooth;--mds-paginator-transition-duration:var(--duration-200,.2s);--private-paginator-transition-duration:var(--mds-paginator-transition-duration);align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*100)}.pages{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;scrollbar-width:none;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));align-items:center;background-color:var(--mds-paginator-background,rgb(var(--tone-neutral-09,76 76 76)));border-radius:var(--radius-full,1000px);display:flex;flex-shrink:1;gap:2px;margin-inline:calc(var(--spacing,.0025rem)*200);overflow:auto;padding:calc(var(--spacing,.0025rem)*200);scroll-behavior:var(--mds-paginator-scroll-behavior,smooth);-webkit-transition-duration:var(--private-paginator-transition-duration);transition-duration:var(--private-paginator-transition-duration);transition-property:background-color,box-shadow;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1))}.pages::-webkit-scrollbar{display:none}:host([pref-animation=reduce]){--private-paginator-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-paginator-background:rgb(var(--tone-neutral-09,76 76 76))}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .pages{-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:host([pref-contrast=more]) .pages{-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:host([pref-contrast=more]) .item{--mds-paginator-item-background-hover:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:none}:host([pref-contrast=more]) :is(.item-first,.item-icon,.item-last){--mds-paginator-item-shadow-disabled:var(--shadow-outline-50) inset;--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:var(--shadow-outline-50) inset}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host{--mds-paginator-scroll-behavior:auto}:host(:not([pref-animation])),:host([pref-animation=system]){--private-paginator-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-paginator-background:rgb(var(--tone-neutral-09,76 76 76))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))) .pages{-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}}@media (prefers-contrast:more){:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .pages{-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item{--mds-paginator-item-background-hover:rgb(var(--tone-neutral,0 0 0));--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:none}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) :is(.item-first,.item-icon,.item-last){--mds-paginator-item-shadow-disabled:var(--shadow-outline-50) inset;--mds-paginator-item-shadow-hover:var(--shadow-outline-50) inset;--mds-paginator-item-shadow:var(--shadow-outline-50) inset}}`;
 
 const MdsPaginator = class {
     constructor(hostRef) {
@@ -59,6 +60,42 @@ const MdsPaginator = class {
             }
             this.pageChangedEvent.emit({ page: this.currentPage, caller });
         };
+        this.handlePrevClick = (event) => {
+            this.goToPage(this.currentPage - 1, event.target);
+        };
+        this.handleFirstClick = (event) => {
+            this.goToPage(1, event.target);
+        };
+        this.handlePageClick = (page) => (event) => {
+            this.goToPage(page, event.target);
+        };
+        this.handleLastClick = (event) => {
+            this.goToPage(this.pages, event.target);
+        };
+        this.handleNextClick = (event) => {
+            this.goToPage(this.currentPage + 1, event.target);
+        };
+    }
+    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);
     }
     componentDidLoad() {
         setTimeout(() => {
@@ -66,7 +103,7 @@ const MdsPaginator = class {
         }, 10);
     }
     render() {
-        return (h(Host, { key: '4ed1b9e1dba19bfa2d273b9a6e97acdf70bcbd98' }, h("mds-paginator-item", { key: '61c2c9e923a9685a13521dce6e62f200346ac0f5', class: "item-icon", icon: miBaselineArrowBack, disabled: this.currentPage === 1, onClick: (ev) => this.goToPage(this.currentPage - 1, ev.target) }), this.pages > 0 && (h("mds-paginator-item", { key: 'add4aed4b4db4a9f80be51c5725831a5da470e5d', class: "item-first", selected: this.currentPage === 1, onClick: (ev) => this.goToPage(1, ev.target) }, "1")), this.pages > 2 && (h("div", { key: 'd0dc076d524c9069d5698861f8c04027d4c1533a', class: "pages" }, Array.from(Array(this.pages - 2).keys()).map((i) => (h("mds-paginator-item", { key: i, class: "item", selected: this.currentPage === i + 2, onClick: (ev) => this.goToPage(i + 2, ev.target), onFocus: this.focus }, i + 2))))), this.pages > 1 && (h("mds-paginator-item", { key: '1df645052a85be2f27c51204a2e6bb62c3d38100', class: "item-last", selected: this.currentPage === this.pages, onClick: (ev) => this.goToPage(this.pages, ev.target) }, this.pages)), h("mds-paginator-item", { key: '68bbe209171c987c6ca3df09347ad430ad2bd179', class: "item-icon", icon: miBaselineArrowForward, disabled: this.currentPage === this.pages, onClick: (ev) => this.goToPage(this.currentPage + 1, ev.target) })));
+        return (h(Host, { key: 'bc0ed7f7a7267fad452ad2186692f7198797dada', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("mds-paginator-item", { key: '0704650f6f83b9a4ff5bc6f112b9d448feeac6ac', class: "item-icon", icon: miBaselineArrowBack, disabled: this.currentPage === 1, onClick: this.handlePrevClick }), this.pages > 0 && (h("mds-paginator-item", { key: '3247caa7de6b88ed40b8c1206d45b32de40c0ad0', class: "item-first", selected: this.currentPage === 1, onClick: this.handleFirstClick }, "1")), this.pages > 2 && (h("div", { key: 'a06359ddb8fef5e739d3700c2c1dce88bc44b49a', class: "pages" }, Array.from(Array(this.pages - 2).keys()).map((i) => (h("mds-paginator-item", { key: i, class: "item", selected: this.currentPage === i + 2, onClick: this.handlePageClick(i + 2), onFocus: this.focus }, i + 2))))), this.pages > 1 && (h("mds-paginator-item", { key: '5fdc19718a0e64787d10539fb1922aa5a917caf3', class: "item-last", selected: this.currentPage === this.pages, onClick: this.handleLastClick }, this.pages)), h("mds-paginator-item", { key: '24fb27d454ecc1bb01334958caf93e0d2de71b02', class: "item-icon", icon: miBaselineArrowForward, disabled: this.currentPage === this.pages, onClick: this.handleNextClick })));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/mds-policy-ai.entry.js

@@ -100,7 +100,7 @@ var localeIt = {
 	linkLabelTitle: linkLabelTitle
 };
 
-const mdsPolicyAiCss = () => `@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 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;:host(:not(:is([hydrated],.hydrated))),:is(mds-banner,mds-button,mds-chip,mds-dropdown,mds-help,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}:host{display:inline-flex}:host(:not([variant=icon])){container:mds-policy-ai/inline-size;width:100%}mds-button{justify-self:start}.banner{--mds-banner-cockade-background:rgb(var(--variant-ai-05,202 174 251));--mds-banner-icon-color:rgb(var(--variant-ai-10,63 7 161))}.mini-card{background-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-lg,16px);-webkit-box-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);box-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);display:inline-flex;gap:calc(var(--spacing,.0025rem)*300);grid-template-columns:repeat(1,minmax(1px,100%));padding:calc(var(--spacing,.0025rem)*400)}.mini-card-icon{background-color:rgb(var(--variant-ai-05,202 174 251));border-radius:var(--radius-2xl,24px);border-top-left-radius:var(--radius-none,0);border-top-right-radius:var(--radius-none,0);fill:rgb(var(--variant-ai-10,63 7 161));height:calc(var(--spacing,.0025rem)*600);margin-top:calc(var(--spacing,.0025rem)*-400);padding:calc(var(--spacing,.0025rem)*100);padding-top:calc(var(--spacing,.0025rem)*400);width:calc(var(--spacing,.0025rem)*600)}.link-label-short{display:none}.mini-card-content{display:grid;gap:calc(var(--spacing,.0025rem)*300);grid-template-columns:repeat(1,minmax(1px,100%))}.mini-card-button{max-width:min-content;min-width:0;width:100%}@container mds-policy-ai (max-width:260px){.mini-card{display:grid}.mini-card-icon{border-top-left-radius:var(--radius-none,0);border-top-right-radius:var(--radius-none,0);margin-top:calc(var(--spacing,.0025rem)*-400);padding-top:calc(var(--spacing,.0025rem)*200)}.mini-card-button{max-width:none}.link-label-long{display:none}.link-label-short{display:inline}}.chip{cursor:help}.chip-dropdown{max-width:calc(var(--spacing,.0025rem)*7200);padding:calc(var(--spacing,.0025rem)*300) calc(var(--spacing,.0025rem)*400)}.icon-help{background-color:rgb(var(--variant-ai-05,202 174 251));border:1px solid rgb(var(--tone-neutral,0 0 0));border-radius:calc(var(--spacing,.0025rem)*600);cursor:pointer;fill:rgb(var(--variant-ai-10,63 7 161));height:min-content;width:min-content}.icon-tip-content{display:grid;gap:calc(var(--spacing,.0025rem)*200)}.icon-help::part(icon){height:calc(var(--spacing,.0025rem)*600);padding:calc(var(--spacing,.0025rem)*100);width:calc(var(--spacing,.0025rem)*600)}`;
+const mdsPolicyAiCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-banner,mds-button,mds-chip,mds-dropdown,mds-help,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}:host{display:inline-flex}:host(:not([variant=icon])){container:mds-policy-ai/inline-size;width:100%}mds-button{justify-self:start}.banner{--mds-banner-cockade-background:rgb(var(--variant-ai-05,202 174 251));--mds-banner-icon-color:rgb(var(--variant-ai-10,63 7 161))}.mini-card{background-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-lg,16px);-webkit-box-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);box-shadow:var(--shadow-sm-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);display:inline-flex;gap:calc(var(--spacing,.0025rem)*300);grid-template-columns:repeat(1,minmax(1px,100%));padding:calc(var(--spacing,.0025rem)*400)}.mini-card-icon{background-color:rgb(var(--variant-ai-05,202 174 251));border-radius:var(--radius-2xl,24px);border-top-left-radius:var(--radius-none,0);border-top-right-radius:var(--radius-none,0);fill:rgb(var(--variant-ai-10,63 7 161));height:calc(var(--spacing,.0025rem)*600);margin-top:calc(var(--spacing,.0025rem)*-400);padding:calc(var(--spacing,.0025rem)*100);padding-top:calc(var(--spacing,.0025rem)*400);width:calc(var(--spacing,.0025rem)*600)}.link-label-short{display:none}.mini-card-content{display:grid;gap:calc(var(--spacing,.0025rem)*300);grid-template-columns:repeat(1,minmax(1px,100%))}.mini-card-button{max-width:min-content;min-width:0;width:100%}@container mds-policy-ai (max-width:260px){.mini-card{display:grid}.mini-card-icon{border-top-left-radius:var(--radius-none,0);border-top-right-radius:var(--radius-none,0);margin-top:calc(var(--spacing,.0025rem)*-400);padding-top:calc(var(--spacing,.0025rem)*200)}.mini-card-button{max-width:none}.link-label-long{display:none}.link-label-short{display:inline}}.chip{cursor:help}.chip-dropdown{max-width:calc(var(--spacing,.0025rem)*7200);padding:calc(var(--spacing,.0025rem)*300) calc(var(--spacing,.0025rem)*400)}.icon-help{background-color:rgb(var(--variant-ai-05,202 174 251));border:1px solid rgb(var(--tone-neutral,0 0 0));border-radius:calc(var(--spacing,.0025rem)*600);cursor:pointer;fill:rgb(var(--variant-ai-10,63 7 161));height:min-content;width:min-content}.icon-tip-content{display:grid;gap:calc(var(--spacing,.0025rem)*200)}.icon-help::part(icon){height:calc(var(--spacing,.0025rem)*600);padding:calc(var(--spacing,.0025rem)*100);width:calc(var(--spacing,.0025rem)*600)}`;
 
 const MdsPolicyAi = class {
     constructor(hostRef) {
@@ -119,6 +119,9 @@ const MdsPolicyAi = class {
          * Sets the pointing URL of the component
          */
         this.href = 'https://www.maggiolieditore.it/il-regolamento-europeo-sull-intelligenza-artificiale.html';
+        this.handleIconClick = () => {
+            window.open(this.href, '_blank');
+        };
     }
     /**
      * Updates the component's texts to the locale currently set on the host element.
@@ -132,7 +135,7 @@ const MdsPolicyAi = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h(Host, { key: '180b7243e44a357e7db8b7229f5e1a611ad348ef' }, this.variant === 'icon' && (h("mds-help", { key: '0e0a58df39c44b69fe57d0334ff056e334d6a72c', icon: mggAiChatbot, class: "icon-help", onClick: () => window.open(this.href, '_blank'), part: "icon" }, h("div", { key: 'd4be853abef5c66e8f3324164bbdb669e37e5c03', class: "icon-tip-content" }, h("mds-text", { key: 'af0f50fd3b06d0c0ab74c5c12ff8e5961806e700', typography: "tip" }, (_a = this.headline) !== null && _a !== void 0 ? _a : this.t.get('iconTooltip')), h("mds-text", { key: 'bad93f3743723f58ee2435a716e92cb9ada5f5bb', typography: "tip" }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get('iconLinkLabel'))))), this.variant === 'chip' && (h("div", { key: '037832247d7ca9649c9406816e8d7ca7922dfa2d', class: "chip-wrapper", part: "chip" }, h("mds-chip", { key: '2e14a6f7023c18f4e010e23bdd57a6fa4723628c', id: "chip", icon: mggAiChatbot, class: "chip", variant: "ai", label: (_c = this.headline) !== null && _c !== void 0 ? _c : this.t.get('chipLabel') }), h("mds-dropdown", { key: '3b72d13f2102d298886e645f3b70194d5c8bf734', target: "#chip", class: "chip-dropdown", interaction: "mouseover" }, h("mds-text", { key: '24b27e379de7649dfbdf077e1caefa0acf3a5869', typography: "tip" }, (_d = this.description) !== null && _d !== void 0 ? _d : this.t.get('cardDescription')), h("mds-button", { key: 'e47c83b97052c9bfe242db9a483e45297458c083', icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, this.t.get('linkLabel'))))), this.variant === 'card' && (h("div", { key: '06fb1b85d8fd6427330168b65b9b37220dd4db85', class: "mini-card", part: "card" }, h("mds-icon", { key: '71135cc52957dd7c5d57da17ea318fcfda0e47e0', name: mggAiChatbot, class: "mini-card-icon" }), h("div", { key: 'f6f56a483d41281610f2f0e4a985608682064b2f', class: "mini-card-content" }, h("mds-text", { key: '657ad59925488f4d9607b46adaadf42a9518feac', typography: "caption" }, (_e = this.description) !== null && _e !== void 0 ? _e : this.t.get('iconTooltip')), h("mds-button", { key: '497017289206c7c759af010ebcd3577ad3a651fe', class: "mini-card-button", icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: '6f3b46fa197f97225b32b4e5c7a093a1385fa37a', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: '62969daf704920f6009acb5982f7b83c5030ac03', class: "link-label-short" }, this.t.get('linkLabelShort')))))), this.variant === 'banner' && (h("mds-banner", { key: '70ce614c9095b73996ebfe1340ff84e03db63355', class: "banner", variant: "ai", tone: "weak", icon: mggAiChatbot, headline: (_f = this.headline) !== null && _f !== void 0 ? _f : this.t.get('bannerTitle'), part: "banner" }, h("mds-text", { key: '89380acb2e798700055248211aafa26476868cc8', typography: "caption" }, (_g = this.description) !== null && _g !== void 0 ? _g : this.t.get('bannerDescription')), h("mds-button", { key: 'db2abdc66d0571891bbfca5b4cf4d5e961ee30fb', icon: miOutlinePolicy, slot: "action", href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: 'd5ce410ac6dd095f04547760e6d868cd1c624ca7', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: '98268919c96e34a931c55bf2cf39dde5227dabfa', class: "link-label-short" }, this.t.get('linkLabelShort')))))));
+        return (h(Host, { key: 'd0343aba93633c4172c78cba1fe1ba78066d0703' }, this.variant === 'icon' && (h("mds-help", { key: 'ad4a20df4a631c216ad09fd6bc7ebfcf23ec17ae', icon: mggAiChatbot, class: "icon-help", onClick: this.handleIconClick, part: "icon" }, h("div", { key: '5c173707b353453e1f88071caa83ae7bef95ef63', class: "icon-tip-content" }, h("mds-text", { key: '02b915e883391648c0d7701869278c2e088c2349', typography: "tip" }, (_a = this.headline) !== null && _a !== void 0 ? _a : this.t.get('iconTooltip')), h("mds-text", { key: 'ee07386a254fa7ed397374e116f4b2cbb38e9bd8', typography: "tip" }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get('iconLinkLabel'))))), this.variant === 'chip' && (h("div", { key: 'c0f788345c6ea9e09f34bbdf8432bdf6119cb6f6', class: "chip-wrapper", part: "chip" }, h("mds-chip", { key: '7014d5bb99185352ddfa1767230c40487a27fba7', id: "chip", icon: mggAiChatbot, class: "chip", variant: "ai", label: (_c = this.headline) !== null && _c !== void 0 ? _c : this.t.get('chipLabel') }), h("mds-dropdown", { key: '46aee6235eb317f64d984c5d7ffeec6e9ef23b5d', target: "#chip", class: "chip-dropdown", interaction: "mouseover" }, h("mds-text", { key: '940a93b53ee5c78634eaf39ebdc4843de874c339', typography: "tip" }, (_d = this.description) !== null && _d !== void 0 ? _d : this.t.get('cardDescription')), h("mds-button", { key: 'e94a60aef4a8d754882070300ebe40ec52819354', icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, this.t.get('linkLabel'))))), this.variant === 'card' && (h("div", { key: '8f38c98a3f90a2daee5c0fe56dc08be4a5805724', class: "mini-card", part: "card" }, h("mds-icon", { key: 'e95bf26e2073d4ed6bcbe8458fb59d29242d803b', name: mggAiChatbot, class: "mini-card-icon" }), h("div", { key: '27f3d7807627409bcc7c12a2ff0b13a9aedb4a1a', class: "mini-card-content" }, h("mds-text", { key: '974df045532462567e64d46dd308281790c3a0a0', typography: "caption" }, (_e = this.description) !== null && _e !== void 0 ? _e : this.t.get('iconTooltip')), h("mds-button", { key: '79b09fbc1f0dc53de3094e5c2fc3618d3ae79afc', class: "mini-card-button", icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: '06b0094335d78affa64fa2c6f9eab0ed657c8183', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: '5c24c8b36cadec1ec9f0c9a671c268c153e5b609', class: "link-label-short" }, this.t.get('linkLabelShort')))))), this.variant === 'banner' && (h("mds-banner", { key: 'c787b1aa6437af944eb39d50a07a3f101f763b00', class: "banner", variant: "ai", tone: "weak", icon: mggAiChatbot, headline: (_f = this.headline) !== null && _f !== void 0 ? _f : this.t.get('bannerTitle'), part: "banner" }, h("mds-text", { key: '3cd7e4076bdbf770070c6d29e57a441ccc9921c3', typography: "caption" }, (_g = this.description) !== null && _g !== void 0 ? _g : this.t.get('bannerDescription')), h("mds-button", { key: '40388d6d8e3d02c8db0c94c585d2dffa879ae83b', icon: miOutlinePolicy, slot: "action", href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: 'e25299573ed2c28821773871091041604059d005', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: 'cd5f7376104f6ec21f1a1fd8293004f49016bb56', class: "link-label-short" }, this.t.get('linkLabelShort')))))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/mds-pref-animation.entry.js

@@ -2,6 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { m as miOutlineCircle } from './circle-lZldSMeV.js';
 import { m as miBaselineSettings } from './settings-XQgkfNpn.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
 var miBaselineAnimation = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15 2c-2.71 0-5.05 1.54-6.22 3.78a7.062 7.062 0 0 0-3 3A7.014 7.014 0 0 0 2 15c0 3.87 3.13 7 7 7c2.71 0 5.05-1.54 6.22-3.78a7.062 7.062 0 0 0 3-3A7.014 7.014 0 0 0 22 9c0-3.87-3.13-7-7-7zM9 20a5.002 5.002 0 0 1-4-8c0 3.87 3.13 7 7 7c-.84.63-1.88 1-3 1zm3-3a5.002 5.002 0 0 1-4-8c0 3.86 3.13 6.99 7 7c-.84.63-1.88 1-3 1zm4.7-3.3c-.53.19-1.1.3-1.7.3c-2.76 0-5-2.24-5-5c0-.6.11-1.17.3-1.7c.53-.19 1.1-.3 1.7-.3c2.76 0 5 2.24 5 5c0 .6-.11 1.17-.3 1.7zM19 12c0-3.86-3.13-6.99-7-7a5.002 5.002 0 0 1 7 7z"/></svg>`;
 
@@ -49,7 +50,7 @@ var localeIt = {
 	systemSettings: systemSettings
 };
 
-const mdsPrefAnimationCss = () => `@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 reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,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:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--disabled,.item--enabled,.item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}:host-context(:root.pref-contrast-more) .item{--mds-tab-item-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]))) .item{--mds-tab-item-color:rgb(var(--tone-neutral-01,255 255 255))}}`;
+const mdsPrefAnimationCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,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:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--disabled,.item--enabled,.item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}:host([pref-contrast=more]) .item{--mds-tab-item-color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-contrast:more){:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item{--mds-tab-item-color:rgb(var(--tone-neutral-01,255 255 255))}}`;
 
 const MdsPrefAnimation = class {
     constructor(hostRef) {
@@ -93,6 +94,9 @@ const MdsPrefAnimation = class {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.handleModeClick = (mode) => () => {
+            this.setAnimation(mode);
+        };
     }
     /**
      * Updates the component's texts to the locale currently set on the host element.
@@ -100,6 +104,15 @@ const MdsPrefAnimation = class {
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     componentWillRender() {
         var _a, _b;
         this.t.lang(this.element);
@@ -110,13 +123,7 @@ const MdsPrefAnimation = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'e1be2ae76dff92f92d5e69ab734bed63ad01424b' }, h("mds-text", { key: '417cb750be71fae999a965bfc145369261612756', class: "info", typography: "caption" }, h("b", { key: '477428e9968b1758f407229d4efe007ec7262e14' }, this.t.get('label')), ' ', this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '3757e5d83c8dbbfa00684e4b6401410c748610e5', fill: true, size: this.size }, h("mds-tab-item", { key: '8b5f05aea83cee047f799b620c5523b2afdd862a', selected: this.mode === 'reduce', onClick: () => {
-                this.setAnimation('reduce');
-            }, class: "item item--reduce", icon: miOutlineCircle }), h("mds-tab-item", { key: '3b782904bc5c2478aab5b448080b49008b0ad300', selected: this.mode === 'system', onClick: () => {
-                this.setAnimation('system');
-            }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: 'bb84745ea8b40acc0de41d904407a773fedff98a', selected: this.mode === 'no-preference', onClick: () => {
-                this.setAnimation('no-preference');
-            }, class: "item item--no-preference", icon: miBaselineAnimation }))));
+        return (h(Host, { key: '8c4d271a4f27c766d76b37aa3f0755bba0a19d7c', "pref-contrast": this.prefContrast }, h("mds-text", { key: 'd06ce9519d9e4608219f4d10c9818af4b3430812', class: "info", typography: "caption" }, h("b", { key: '95ec18d11359fe4358a8a8d1b63ca695185a8c7e' }, this.t.get('label')), ' ', this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '579e25e9182c02c7d7deceaf46247ea254b676e3', fill: true, size: this.size }, h("mds-tab-item", { key: '076a7a88d63c9752fb1c5fce30a816abe52917d4', selected: this.mode === 'reduce', onClick: this.handleModeClick('reduce'), class: "item item--reduce", icon: miOutlineCircle }), h("mds-tab-item", { key: '8b7fe984365c966837e6d534251bac8be15e669e', selected: this.mode === 'system', onClick: this.handleModeClick('system'), class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: 'd7282679add90930f487e1ef3f35d804d286763f', selected: this.mode === 'no-preference', onClick: this.handleModeClick('no-preference'), class: "item item--no-preference", icon: miBaselineAnimation }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-pref-consumption.entry.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
 var mggConsumptionLow = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path d="M13.314 12.492c-.943-.837-4.99-3.526-8.385-5.563 2.037 3.395 4.726 7.442 5.563 8.384q.045.052.094.101a2 2 0 1 0 2.728-2.922"/>
@@ -63,7 +64,7 @@ var localeIt = {
 	label: label
 };
 
-const mdsPrefConsumptionCss = () => `@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 reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,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:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--high{--mds-tab-item-selected-color:rgb(var(--status-error-06,239 108 105))}.item--medium{--mds-tab-item-selected-color:rgb(var(--status-warning-06,190 142 0))}.item--low{--mds-tab-item-selected-color:rgb(var(--status-success-06,0 171 97))}:host-context(:root.pref-contrast-more) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-contrast-more) .item--high{--mds-tab-item-default-color:rgb(var(--status-error-03,255 217 214))}:host-context(:root.pref-contrast-more) .item--medium{--mds-tab-item-default-color:rgb(var(--status-warning-03,255 223 129))}:host-context(:root.pref-contrast-more) .item--low{--mds-tab-item-default-color:rgb(var(--status-success-03,196 235 209))}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item--high{--mds-tab-item-default-color:rgb(var(--status-error-03,255 217 214))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item--medium{--mds-tab-item-default-color:rgb(var(--status-warning-03,255 223 129))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .item--low{--mds-tab-item-default-color:rgb(var(--status-success-03,196 235 209))}}`;
+const mdsPrefConsumptionCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,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:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--high{--mds-tab-item-selected-color:rgb(var(--status-error-06,239 108 105))}.item--medium{--mds-tab-item-selected-color:rgb(var(--status-warning-06,190 142 0))}.item--low{--mds-tab-item-selected-color:rgb(var(--status-success-06,0 171 97))}:host([pref-contrast=more]) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}:host([pref-contrast=more]) .item--high{--mds-tab-item-default-color:rgb(var(--status-error-03,255 217 214))}:host([pref-contrast=more]) .item--medium{--mds-tab-item-default-color:rgb(var(--status-warning-03,255 223 129))}:host([pref-contrast=more]) .item--low{--mds-tab-item-default-color:rgb(var(--status-success-03,196 235 209))}@media (prefers-contrast:more){:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item--high{--mds-tab-item-default-color:rgb(var(--status-error-03,255 217 214))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item--medium{--mds-tab-item-default-color:rgb(var(--status-warning-03,255 223 129))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item--low{--mds-tab-item-default-color:rgb(var(--status-success-03,196 235 209))}}`;
 
 const MdsPrefContrast = class {
     constructor(hostRef) {
@@ -107,6 +108,9 @@ const MdsPrefContrast = class {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.handleModeClick = (mode) => () => {
+            this.setConsumption(mode);
+        };
     }
     /**
      * Updates the component's texts to the locale currently set on the host element.
@@ -114,6 +118,15 @@ const MdsPrefContrast = class {
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     componentWillRender() {
         var _a, _b;
         this.t.lang(this.element);
@@ -124,13 +137,7 @@ const MdsPrefContrast = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '7b3edd2f572afd06f1d1ee154b934d328cc6c0fc' }, h("mds-text", { key: '196b4cdad855f3b67ddb455fb0aa692f48d12c04', class: "info", typography: "caption" }, h("b", { key: '40b3840da0365693b1e6b08cff11e3cdd1da4819' }, this.t.get('label')), ' ', this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '7db022de1dadbaf0efc5ec5184eba9d6d1b51f2a', fill: true, size: this.size }, h("mds-tab-item", { key: '4c7aa5cfdae5fd2e3cf5376f216500c0ad4f6bd9', selected: this.mode === 'low', onClick: () => {
-                this.setConsumption('low');
-            }, class: "item item--low", icon: mggConsumptionLow }), h("mds-tab-item", { key: '3d8c6709bdba914e4aaf6b8969a32b5d2672ebee', selected: this.mode === 'medium', onClick: () => {
-                this.setConsumption('medium');
-            }, class: "item item--medium", icon: mggConsumptionMedium }), h("mds-tab-item", { key: '53cdc86ee488d3e28a0602db93c5dd7d8bcdfd65', selected: this.mode === 'high', onClick: () => {
-                this.setConsumption('high');
-            }, class: "item item--high", icon: mggConsumptionHigh }))));
+        return (h(Host, { key: '8aacd0158d8dcd42a86c3f8d5a963b509a067d7c', "pref-contrast": this.prefContrast }, h("mds-text", { key: '0114ef44e5ec8ebfc5eb61e59bc01a8dccc5d443', class: "info", typography: "caption" }, h("b", { key: '9062cda609e301b70910c76f0529259aece20356' }, this.t.get('label')), ' ', this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '44c1462c501e7014db8ece5a0bdbb7a743fb8848', fill: true, size: this.size }, h("mds-tab-item", { key: '6ecc4b3963061b230abdba6dd6e1382bc941007e', selected: this.mode === 'low', onClick: this.handleModeClick('low'), class: "item item--low", icon: mggConsumptionLow }), h("mds-tab-item", { key: 'bd85e99d05f2c21f2e3c1910c0eacce5ab241dd5', selected: this.mode === 'medium', onClick: this.handleModeClick('medium'), class: "item item--medium", icon: mggConsumptionMedium }), h("mds-tab-item", { key: '4acf72c60c3b29c9fcc1793faf216a8309a4110d', selected: this.mode === 'high', onClick: this.handleModeClick('high'), class: "item item--high", icon: mggConsumptionHigh }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-pref-contrast.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
 import { m as miBaselineSettings } from './settings-XQgkfNpn.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
 var miBaselineContrast = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 22c5.52 0 10-4.48 10-10S17.52 2 12 2S2 6.48 2 12s4.48 10 10 10zm1-17.93c3.94.49 7 3.85 7 7.93s-3.05 7.44-7 7.93V4.07z"/></svg>`;
 
@@ -52,7 +53,7 @@ var localeIt = {
 	systemSettings: systemSettings
 };
 
-const mdsPrefContrastCss = () => `@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 reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,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:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--default,.item--more,.item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}:host-context(:root.pref-contrast-more) .item{--mds-tab-item-default-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]))) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}}`;
+const mdsPrefContrastCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-tab,mds-tab-item,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:grid;gap:calc(var(--spacing,.0025rem)*100)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--default,.item--more,.item--system{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}:host([pref-contrast=more]) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-contrast:more){:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .item{--mds-tab-item-default-color:rgb(var(--tone-neutral-01,255 255 255))}}`;
 
 const MdsPrefContrast = class {
     constructor(hostRef) {
@@ -116,6 +117,9 @@ const MdsPrefContrast = class {
                 element === null || element === void 0 ? void 0 : element.style.setProperty(this.customPropertyAlias, this.mode);
             }
         };
+        this.handleModeClick = (mode) => () => {
+            this.setContrast(mode);
+        };
     }
     /**
      * Updates the component's texts to the locale currently set on the host element.
@@ -123,6 +127,15 @@ const MdsPrefContrast = class {
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     componentWillRender() {
         var _a, _b;
         this.t.lang(this.element);
@@ -135,13 +148,7 @@ const MdsPrefContrast = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '94956cf5cf0e28c943af188fbdd0874b04edea3b' }, h("mds-text", { key: '0f9efae82fe5037ce9b13fa1a7125c25bf1bb509', class: "info", typography: "caption" }, h("b", { key: 'ba27caca42dd23403991521fd903e8ab7dbfacdf' }, this.t.get('label')), ' ', this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: 'adf51f71a7551553663038f87ce72868fa04ac70', fill: true, size: this.size }, h("mds-tab-item", { key: '5314ee6c1ae2e23635952a6dfa56ed24c3e57050', selected: this.mode === 'more', onClick: () => {
-                this.setContrast('more');
-            }, class: "item item--more", icon: miBaselineContrast }), h("mds-tab-item", { key: '0e88e0bb0276a8ca0b8cb75228118a6574788299', selected: this.mode === 'system', onClick: () => {
-                this.setContrast('system');
-            }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: '223643f6d9a03b429d58bab08e28ac29c6be7671', selected: this.mode === 'no-preference', onClick: () => {
-                this.setContrast('no-preference');
-            }, class: "item item--default", icon: this.mode === 'no-preference' ? miBaselineAutoAwesome : miOutlineAutoAwesome }))));
+        return (h(Host, { key: '0a93ee15ba2f2ebd9be25e94248e14cc28ca91d3', "pref-contrast": this.prefContrast }, h("mds-text", { key: 'f7d472739547a6322dd25582f68b76f6161a1342', class: "info", typography: "caption" }, h("b", { key: '8daab80636ad73f434613628c0a7dae43cfdf22c' }, this.t.get('label')), ' ', this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '30ab0bc43e2859dbdd4b8a2098d351870e4d7226', fill: true, size: this.size }, h("mds-tab-item", { key: '06ea791e95ecc5719e46397066cf9d21ed5d7082', selected: this.mode === 'more', onClick: this.handleModeClick('more'), class: "item item--more", icon: miBaselineContrast }), h("mds-tab-item", { key: 'ef8b0906e9a5efc3facf70cd894af8f59991c32d', selected: this.mode === 'system', onClick: this.handleModeClick('system'), class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: '4f1029e6f821f6e5517e1720bb171aeef19896dc', selected: this.mode === 'no-preference', onClick: this.handleModeClick('no-preference'), class: "item item--default", icon: this.mode === 'no-preference' ? miBaselineAutoAwesome : miOutlineAutoAwesome }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-pref-language-item.entry.js

@@ -220,7 +220,7 @@ var localeEn = {
 	noCode: noCode
 };
 
-const mdsPrefLanguageItemCss = () => `@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;: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}:host{display:block}`;
+const mdsPrefLanguageItemCss = () => `@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}:host{display:block}`;
 
 const MdsPrefLanguageItem = class {
     constructor(hostRef) {
@@ -251,7 +251,7 @@ const MdsPrefLanguageItem = class {
         this.t.lang(this.element);
     }
     render() {
-        return (h(Host, { key: '733f906b459d62d9dda8c353a30a74110e07b03a', onClick: this.handleClick }, this.code !== '' ? (h("mds-button", { icon: this.selected ? miBaselineCheckCircle : miOutlineCircle, variant: "dark", tone: "text" }, localeDefault[this.code])) : (h("mds-button", { icon: miBaselineCheckCircle, variant: "error", tone: "text" }, this.t.get('noCode')))));
+        return (h(Host, { key: '0f594deea977bb5473b0fe656bd5e3d69fdb4da1', onClick: this.handleClick }, this.code !== '' ? (h("mds-button", { icon: this.selected ? miBaselineCheckCircle : miOutlineCircle, variant: "dark", tone: "text" }, localeDefault[this.code])) : (h("mds-button", { icon: miBaselineCheckCircle, variant: "error", tone: "text" }, this.t.get('noCode')))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/mds-pref-language.entry.js

@@ -855,7 +855,7 @@ var localeIt = {
 	defaultLanguage: defaultLanguage
 };
 
-const mdsPrefLanguageCss = () => `@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 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))),:is(mds-dropdown,mds-tab,mds-tab-item,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}mds-pref-language{display:grid;gap:calc(var(--spacing,.0025rem)*400)}.mds-pref-language-dropdown{gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*400)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--custom-language{cursor:pointer}.item--auto,.item--custom-language{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}`;
+const mdsPrefLanguageCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-dropdown,mds-tab,mds-tab-item,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}mds-pref-language{display:grid;gap:calc(var(--spacing,.0025rem)*400)}.mds-pref-language-dropdown{gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*400)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--custom-language{cursor:pointer}.item--auto,.item--custom-language{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}`;
 
 const MdsPrefLanguage = class {
     constructor(hostRef) {
@@ -951,7 +951,7 @@ const MdsPrefLanguage = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '5817657d210b33095d874782e22a9474deb07186' }, h("div", { key: '115825b394ff21c1cbd839592d08371fe4e9088b', class: "menu" }, h("mds-text", { key: 'cb0bcd46bedc0b7746147884ac26ffcfbf31e1af', class: "info", typography: "caption" }, h("b", { key: 'c9184216e4219ff8a2097cf1728903e16d0a1e07' }, this.t.get('label'))), h("mds-tab", { key: 'f71a4aa2177c36761317215d0e1fa81400f6bb8c', fill: true, size: this.size }, h("mds-tab-item", { key: '1991f5acca41b36d299deb007ff46755071c37f9', selected: true, onClick: this.toggleDropdown, id: "mds-pref-language-nav", class: "item item--custom-language", "icon-position": "right", icon: this.showDropdown ? miBaselineKeyboardArrowUp : miBaselineKeyboardArrowDown }, this.t.get((_a = this.set) !== null && _a !== void 0 ? _a : 'auto')))), h("mds-dropdown", { key: 'f7fd96c2eef84b5b2230cfd5f8a74083d00d9846', class: "mds-pref-language-dropdown", target: "#mds-pref-language-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideLanguageSelectDropdown, autoPlacement: true }, h("slot", { key: 'ce4d781b3b08cae00029bb36e8ea6d1f86461b30' })), this.set !== this.defaultLanguage && (h("mds-text", { key: '6ea5f8ca5cdc07692204f1b3635d4393ababfda9', typography: "caption" }, this.t.get('defaultLanguage')))));
+        return (h(Host, { key: '478109efd35a0a896d1783008a16e9275733936d' }, h("div", { key: '355b3d289bf281ed132e3bc900a434b4475c6bea', class: "menu" }, h("mds-text", { key: 'cd8902f3b078732a05c5763479ec947d412bce94', class: "info", typography: "caption" }, h("b", { key: 'e6298e5c502a2aa177e4669cecab22c8056e87eb' }, this.t.get('label'))), h("mds-tab", { key: 'f8456b33ec4d07a474994da5d08a333afd5a641f', fill: true, size: this.size }, h("mds-tab-item", { key: 'fcc54b949621389e4e175dcfe297a0d137b28788', selected: true, onClick: this.toggleDropdown, id: "mds-pref-language-nav", class: "item item--custom-language", "icon-position": "right", icon: this.showDropdown ? miBaselineKeyboardArrowUp : miBaselineKeyboardArrowDown }, this.t.get((_a = this.set) !== null && _a !== void 0 ? _a : 'auto')))), h("mds-dropdown", { key: '5746fdd9a751a9c71c011aaff73bb3aff6b648f3', class: "mds-pref-language-dropdown", target: "#mds-pref-language-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideLanguageSelectDropdown }, h("slot", { key: 'f2a7cc484c3295aa6abd463fb365f8e4a099d130' })), this.set !== this.defaultLanguage && (h("mds-text", { key: '41ebb2d247ce5054ceb807d75539301efb33596c', typography: "caption" }, this.t.get('defaultLanguage')))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/mds-pref-theme-variant-item.entry.js

@@ -13,7 +13,7 @@ var localeEn = {
 	noCode: noCode
 };
 
-const mdsPrefThemeVariantItemCss = () => `@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-pref-theme-variant-item-color-background:rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76)));--mds-pref-theme-variant-item-color-status-error:rgb(var(--status-error-06,239 108 105));--mds-pref-theme-variant-item-color-status-success:rgb(var(--status-success-06,0 171 97));--mds-pref-theme-variant-item-color-status-warning:rgb(var(--status-warning-06,190 142 0));--mds-pref-theme-variant-item-color-variant-primary:rgb(var(--variant-primary-03,211 226 255))}}}@layer reset,vendor,theme,base,components,utilities;:host{--mds-pref-theme-variant-item-color-background:rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76)));--mds-pref-theme-variant-item-color-status-error:rgb(var(--status-error-06,239 108 105));--mds-pref-theme-variant-item-color-status-success:rgb(var(--status-success-06,0 171 97));--mds-pref-theme-variant-item-color-status-warning:rgb(var(--status-warning-06,190 142 0));--mds-pref-theme-variant-item-color-variant-primary:rgb(var(--variant-primary-03,211 226 255));display:flex}.label{align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*200)}.theme-preview{background-color:var(--mds-pref-theme-variant-item-color-background,rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76))));border-radius:var(--radius-md,12px);-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light);box-sizing:border-box;display:inline-flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*100);height:calc(var(--spacing,.0025rem)*600);margin:1px;padding:calc(var(--spacing,.0025rem)*100);width:calc(var(--spacing,.0025rem)*600)}.theme-color{background-color:var(--color-tone-neutral-09,rgb(var(--tone-neutral-09,228 228 228)));border-radius:var(--radius-lg,16px);height:calc(var(--spacing,.0025rem)*150);position:relative;width:calc(var(--spacing,.0025rem)*150)}.theme-color:after{border-radius:inherit;-webkit-box-shadow:var(--shadow-outline-light) inset;box-shadow:var(--shadow-outline-light) inset;content:"";display:flex;inset:0;position:absolute}.theme-color--variant-primary{background-color:var(--mds-pref-theme-variant-item-color-variant-primary,rgb(var(--variant-primary-03,211 226 255)))}.theme-color--status-success{background-color:var(--mds-pref-theme-variant-item-color-status-success,rgb(var(--status-success-06,0 171 97)))}.theme-color--status-warning{background-color:var(--mds-pref-theme-variant-item-color-status-warning,rgb(var(--status-warning-06,190 142 0)))}.theme-color--status-error{background-color:var(--mds-pref-theme-variant-item-color-status-error,rgb(var(--status-error-06,239 108 105)))}`;
+const mdsPrefThemeVariantItemCss = () => `@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-pref-theme-variant-item-color-background:rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76)));--mds-pref-theme-variant-item-color-status-error:rgb(var(--status-error-06,239 108 105));--mds-pref-theme-variant-item-color-status-success:rgb(var(--status-success-06,0 171 97));--mds-pref-theme-variant-item-color-status-warning:rgb(var(--status-warning-06,190 142 0));--mds-pref-theme-variant-item-color-variant-primary:rgb(var(--variant-primary-03,211 226 255))}}}:host{--mds-pref-theme-variant-item-color-background:rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76)));--mds-pref-theme-variant-item-color-status-error:rgb(var(--status-error-06,239 108 105));--mds-pref-theme-variant-item-color-status-success:rgb(var(--status-success-06,0 171 97));--mds-pref-theme-variant-item-color-status-warning:rgb(var(--status-warning-06,190 142 0));--mds-pref-theme-variant-item-color-variant-primary:rgb(var(--variant-primary-03,211 226 255));display:flex}.label{align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*200)}.theme-preview{background-color:var(--mds-pref-theme-variant-item-color-background,rgb(var(--tint-base-lv1,var(--tone-neutral-09,76 76 76))));border-radius:var(--radius-md,12px);-webkit-box-shadow:var(--shadow-outline-light);box-shadow:var(--shadow-outline-light);box-sizing:border-box;display:inline-flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*100);height:calc(var(--spacing,.0025rem)*600);margin:1px;padding:calc(var(--spacing,.0025rem)*100);width:calc(var(--spacing,.0025rem)*600)}.theme-color{background-color:var(--color-tone-neutral-09,rgb(var(--tone-neutral-09,228 228 228)));border-radius:var(--radius-lg,16px);height:calc(var(--spacing,.0025rem)*150);position:relative;width:calc(var(--spacing,.0025rem)*150)}.theme-color:after{border-radius:inherit;-webkit-box-shadow:var(--shadow-outline-light) inset;box-shadow:var(--shadow-outline-light) inset;content:"";display:flex;inset:0;position:absolute}.theme-color--variant-primary{background-color:var(--mds-pref-theme-variant-item-color-variant-primary,rgb(var(--variant-primary-03,211 226 255)))}.theme-color--status-success{background-color:var(--mds-pref-theme-variant-item-color-status-success,rgb(var(--status-success-06,0 171 97)))}.theme-color--status-warning{background-color:var(--mds-pref-theme-variant-item-color-status-warning,rgb(var(--status-warning-06,190 142 0)))}.theme-color--status-error{background-color:var(--mds-pref-theme-variant-item-color-status-error,rgb(var(--status-error-06,239 108 105)))}`;
 
 const MdsPrefThemeVariantItem = class {
     constructor(hostRef) {
@@ -52,7 +52,7 @@ const MdsPrefThemeVariantItem = class {
         }
     }
     render() {
-        return (h(Host, { key: '7c67e626a1111e762cf384dd1e07cca9e8ab3025', onClick: this.handleClick }, h("mds-button", { key: '12b4207889f201e6b4424aa28472fcd4a637fb0b', icon: this.selected ? miBaselineCheckCircle : miOutlineCircle, variant: "dark", tone: "text" }, h("div", { key: '7ab3d3e6667f2ff83d578579210888af336b7170', class: "label" }, h("div", { key: 'fadd43f41276b708742e4cf1a3902d2bb6c7dddf', class: "theme-preview" }, h("div", { key: '0338afc3745f1212f9e924d7b7fb9e55d7f455fb', class: "theme-color theme-color--variant-primary" }), h("div", { key: '23acf3c5f95614ee9b83562f1061a612ee139332', class: "theme-color theme-color--status-success" }), h("div", { key: 'bdefd9b571f74615d63a4e015626a096a92446dd', class: "theme-color theme-color--status-warning" }), h("div", { key: 'fc128b9b30699cf52881ee3f559dc10d9323486a', class: "theme-color theme-color--status-error" })), this.label))));
+        return (h(Host, { key: '42ee77cb67158f239524a93cbb4c54a8edf2da9e', onClick: this.handleClick }, h("mds-button", { key: 'ded6bf478eb7919dcc82342203459ec0259b6e49', icon: this.selected ? miBaselineCheckCircle : miOutlineCircle, variant: "dark", tone: "text" }, h("div", { key: '7582a7a064ebb938b3d7a70c185d03cb16099416', class: "label" }, h("div", { key: 'fe6351b1df4a62583bd2ea696204f3def3971002', class: "theme-preview" }, h("div", { key: '059de0fdc833d65d6fc6b7720cfc9977a6289dfc', class: "theme-color theme-color--variant-primary" }), h("div", { key: '780567139731c2d362a62bb54abf087022c65e0c', class: "theme-color theme-color--status-success" }), h("div", { key: '392532402a1fd99529ebe324c640a28f35b1bb05', class: "theme-color theme-color--status-warning" }), h("div", { key: '59b928ce09c27986d8e08e40e03f43a17efcd03c', class: "theme-color theme-color--status-error" })), this.label))));
     }
     get element() { return getElement(this); }
 };

package/dist/esm/mds-pref-theme-variant.entry.js

@@ -23,7 +23,7 @@ var localeIt = {
 	label: label
 };
 
-const mdsPrefThemeVariantCss = () => `@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 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))),:is(mds-dropdown,mds-tab,mds-tab-item,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}mds-pref-language{display:grid;gap:calc(var(--spacing,.0025rem)*400)}.mds-pref-theme-variant-dropdown{gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*400)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--custom-theme-variant{cursor:pointer}.item--auto,.item--custom-theme-variant{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}`;
+const mdsPrefThemeVariantCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-dropdown,mds-tab,mds-tab-item,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}mds-pref-language{display:grid;gap:calc(var(--spacing,.0025rem)*400)}.mds-pref-theme-variant-dropdown{gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*400)}.item{--mds-tab-item-default-color:rgb(var(--tone-neutral-05,197 197 197));flex-basis:0;flex-grow:1}.item--custom-theme-variant{cursor:pointer}.item--auto,.item--custom-theme-variant{--mds-tab-item-selected-color:rgb(var(--tone-neutral-03,233 233 233))}`;
 
 const MdsPrefThemeVariant = class {
     constructor(hostRef) {
@@ -138,7 +138,7 @@ const MdsPrefThemeVariant = class {
         this.t.lang(this.element);
     }
     render() {
-        return (h(Host, { key: '5232c814c636b1f3cf3351e67460cdfd9b9c1b56' }, h("div", { key: 'a2a255a4c62cc2aa4cbac79886e629bebce294f7', class: "menu" }, h("mds-text", { key: '02a7f081c306907d973009a3a7e73b8059940352', class: "info", typography: "caption" }, h("b", { key: '01967f8b9aea1f6324ef1f15d5ae958b92e005b4' }, this.t.get('label'))), h("mds-tab", { key: 'ef02c8b82bbadcad95541f67be2dcf4ba0ddc2fc', fill: true, size: this.size }, h("mds-tab-item", { key: '663e683eac4d520e61fbc76cf4d048feacb798d2', selected: true, onClick: this.toggleDropdown, id: "mds-pref-theme-variant-nav", class: "item item--custom-theme-variant", "icon-position": "right", icon: this.showDropdown ? miBaselineKeyboardArrowUp : miBaselineKeyboardArrowDown }, this.name))), h("mds-dropdown", { key: 'e86ce5ba509a6b015add47622fe94d6d59aba713', class: "mds-pref-theme-variant-dropdown", target: "#mds-pref-theme-variant-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideThemeVariantDropdownSelect, autoPlacement: true }, h("slot", { key: '9b18d8d7f8d5bdb1b75150ee0559c12f8d385bda' })), this.name !== this.defaultTheme && (h("mds-text", { key: '60cb41f838f81abdbf7e7d78fb56ea6faca48c26', typography: "caption" }, this.t.get('defaultTheme')))));
+        return (h(Host, { key: '97f9130b904fd7998d3da4d20b7a46a4b0530065' }, h("div", { key: '7a8d483f98133601ecc97edc4cee8f31e8b7b864', class: "menu" }, h("mds-text", { key: '1f3782fef56a8ac6ace60b455693cd88e9b1e649', class: "info", typography: "caption" }, h("b", { key: '55dd9af6749679f2378bafa43bd51af2bbfb2634' }, this.t.get('label'))), h("mds-tab", { key: '82a4b30848480d9197d5d2ba3fe5b0cc05663819', fill: true, size: this.size }, h("mds-tab-item", { key: 'df76e914b9a1fdb79f2297100d1c3fe8b26c9f49', selected: true, onClick: this.toggleDropdown, id: "mds-pref-theme-variant-nav", class: "item item--custom-theme-variant", "icon-position": "right", icon: this.showDropdown ? miBaselineKeyboardArrowUp : miBaselineKeyboardArrowDown }, this.name))), h("mds-dropdown", { key: '301fd7431fe6eaf5c33ae4cd2d1d9fc530c41827', class: "mds-pref-theme-variant-dropdown", target: "#mds-pref-theme-variant-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideThemeVariantDropdownSelect }, h("slot", { key: 'ec4fe15341f0b8c52a63421f8dfd90725a1c875f' })), this.name !== this.defaultTheme && (h("mds-text", { key: 'b6acf063e1b0806b0baedfe6f166dde10c85e8ad', typography: "caption" }, this.t.get('defaultTheme')))));
     }
     get element() { return getElement(this); }
 };