npm - @maggioli-design-system/magma - Versions diffs - 2.0.0-beta.1 → 2.0.0-beta.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1223) hide show

package/dist/collection/components/mds-paginator-item/mds-paginator-item.css CHANGED Viewed

@@ -116,6 +116,8 @@ mds-text {
 */
 :host {
+  --mds-paginator-item-transition-duration: var(--duration-200, 200ms);
+  --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));
@@ -132,8 +134,7 @@ mds-text {
   --mds-paginator-item-size: --spacing(900);
   @apply ease-out
-  focus-bounce
-  px-300;
+    focus-bounce;
   align-items: center;
   background-color: var(--mds-paginator-item-background, transparent);
@@ -147,7 +148,8 @@ mds-text {
   height: var(--mds-paginator-item-size, --spacing(900));
   justify-content: center;
   min-width: var(--mds-paginator-item-size, --spacing(900));
-  transition-duration: var(--duration-200, 200ms);
+  padding-inline: --spacing(300);
+  transition-duration: var(--private-paginator-item-transition-duration);
   transition-property: background-color, box-shadow, color, outline, outline-offset;
   user-select: none;
 }
@@ -164,7 +166,7 @@ mds-text {
 }
 :host([icon]) {
-  @apply p-0;
+  padding: 0;
 }
 :host([selected]) {
@@ -184,23 +186,35 @@ mds-text {
 }
 .icon {
-  @apply px-0;
   fill: currentcolor;
+  padding-inline: 0;
 }
-:host-context(:root.pref-animation-reduce) {
-  transition-duration: 0s;
+/* Animation preference. The component mirrors the resolved mode from <html>
+ * onto its host as pref-animation (see subscribePreference in @common/preference);
+ * these plain shadow selectors then zero the private duration(s) the base CSS
+ * reads. `reduce` always stops; `system` and no controller follow the OS via
+ * @media; `no-preference` keeps the base value. Customization composes (the base
+ * sets --private from the public token, this only overrides it when reduced). */
+:host([pref-animation='reduce']) {
+  --private-paginator-item-transition-duration: 0s;
 }
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-paginator-item-transition-duration: 0s;
   }
 }
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) {
+/* Theme preference. The component reflects the resolved theme mode and scheme
+ * from <html> onto its host as pref-theme + pref-theme-scheme (see
+ * subscribePreference in @common/preference); these plain shadow selectors refine
+ * for dark. `dark` is the explicit choice; `system` and no controller follow the
+ * OS via @media; the scheme axis gates it. Cross-browser, no :host-context. */
+: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));
@@ -216,8 +230,8 @@ mds-text {
 }
 @media (prefers-color-scheme: dark) {
-  :host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-theme='system']:not([pref-theme-scheme='light'])),
+  :host(:not([pref-theme])) {
     --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));

package/dist/collection/components/mds-paginator-item/mds-paginator-item.js CHANGED Viewed

@@ -1,14 +1,23 @@
 import { Host, h } from "@stencil/core";
 import { KeyboardManager } from "../../common/keyboard-manager";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
 export class MdsPaginatorItem {
     constructor() {
         this.km = new KeyboardManager();
-        this.disconnectedCallback = () => {
-            this.km.detachClickBehavior();
-        };
+    }
+    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);
@@ -21,8 +30,15 @@ export class MdsPaginatorItem {
         }
         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: '5fb1effadd36aa5f45ca7cd090b890abd3f0df39', 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))))));
     }
     static get is() { return "mds-paginator-item"; }
     static get encapsulation() { return "shadow"; }
@@ -97,5 +113,12 @@ export class MdsPaginatorItem {
             }
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get elementRef() { return "host"; }
 }

package/dist/collection/components/mds-policy-ai/mds-policy-ai.css CHANGED Viewed

@@ -47,15 +47,15 @@ mds-button {
 }
 .mini-card-icon {
-  @apply -mt-400
-    rounded-2xl
-    rounded-t-none
-    p-100
-    pt-400;
   background-color: rgb(var(--variant-ai-05, 202 174 251));
+  border-radius: var(--radius-2xl, 24px);
+  border-top-left-radius: var(--radius-none, 0px);
+  border-top-right-radius: var(--radius-none, 0px);
   fill: rgb(var(--variant-ai-10, 63 7 161));
   height: --spacing(600);
+  margin-top: --spacing(-400);
+  padding: --spacing(100);
+  padding-top: --spacing(400);
   width: --spacing(600);
 }
@@ -82,7 +82,10 @@ mds-button {
   }
   .mini-card-icon {
-    @apply -mt-400 rounded-t-none pt-200;
+    border-top-left-radius: var(--radius-none, 0px);
+    border-top-right-radius: var(--radius-none, 0px);
+    margin-top: --spacing(-400);
+    padding-top: --spacing(200);
   }
   .mini-card-button {

package/dist/collection/components/mds-policy-ai/mds-policy-ai.js CHANGED Viewed

@@ -29,7 +29,13 @@ export class MdsPolicyAi {
          * 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.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
         this.t.update();
@@ -39,7 +45,7 @@ export class MdsPolicyAi {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g;
-        return (h(Host, { key: '52e4084390944e6b5997224013f16c85b79881b6' }, this.variant === 'icon' && (h("mds-help", { key: '13b88d273708b5c87a2e2217020d82a5bb3ecb63', icon: mggAiChatbot, class: "icon-help", onClick: () => window.open(this.href, '_blank'), part: "icon" }, h("div", { key: '435a308d598368d4fb7f94c704e1654228372e4f', class: "icon-tip-content" }, h("mds-text", { key: 'd7d12d83e7a40091faf657f9eef83577e59b91d5', typography: "tip" }, (_a = this.headline) !== null && _a !== void 0 ? _a : this.t.get('iconTooltip')), h("mds-text", { key: 'cc00b62ea4d83d3f4710a49eda0391e9a32d5e53', typography: "tip" }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get('iconLinkLabel'))))), this.variant === 'chip' && (h("div", { key: '16c46a6a4d593ef3e92de6e35467fef86bea776e', class: "chip-wrapper", part: "chip" }, h("mds-chip", { key: '9ff4a524805a36cbb6790f104c7ea08db292cf0d', 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: '03c850f6519a43a51435e8efb922885f9cd63d9f', target: "#chip", class: "chip-dropdown", interaction: "mouseover" }, h("mds-text", { key: '486f6ff03cb46581c070fd9ee6eec7cef0b54cdf', typography: "tip" }, (_d = this.description) !== null && _d !== void 0 ? _d : this.t.get('cardDescription')), h("mds-button", { key: '15696484d187340f64874982bfa85645203ce258', icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, this.t.get('linkLabel'))))), this.variant === 'card' && (h("div", { key: 'b8a3a49f8860f280aafab125e86b19e87f10b64b', class: "mini-card", part: "card" }, h("mds-icon", { key: '50a3a9290642b35e55ab974e51787ac2805846b3', name: mggAiChatbot, class: "mini-card-icon" }), h("div", { key: '29e9d9fdf11586717208ea0d49772cb2a29e5fff', class: "mini-card-content" }, h("mds-text", { key: '7364a5dc1ae7138abc0143af1665090bd0c43b89', typography: "caption" }, (_e = this.description) !== null && _e !== void 0 ? _e : this.t.get('iconTooltip')), h("mds-button", { key: 'febc3610d58da8ea6ce532572a85af62236e11de', class: "mini-card-button", icon: miOutlinePolicy, href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: 'fec3de6d377fc90078c93a606056798dbfdd5cf5', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: '4fb2efb5a11e1953c5e30c39abc641c1e914ffc6', class: "link-label-short" }, this.t.get('linkLabelShort')))))), this.variant === 'banner' && (h("mds-banner", { key: '8fe8399ba4b942b8d5ea0e54ee69857a5a5441d6', 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: '015aec47af1a58fad80cafd49c7b11334e862d8b', typography: "caption" }, (_g = this.description) !== null && _g !== void 0 ? _g : this.t.get('bannerDescription')), h("mds-button", { key: '4bcd115e47e83db1b48f8c8af23506410d280828', icon: miOutlinePolicy, slot: "action", href: this.href, variant: "ai", tone: "weak", size: "sm" }, h("span", { key: '40f2bd1b17300871148d76d278fb9082665bb429', class: "link-label-long" }, this.t.get('linkLabel')), h("span", { key: '27928dd565847e43e9585368add57e8304d05e7c', 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')))))));
     }
     static get is() { return "mds-policy-ai"; }
     static get encapsulation() { return "shadow"; }
@@ -162,7 +168,7 @@ export class MdsPolicyAi {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

package/dist/collection/components/mds-pref/mds-pref.js CHANGED Viewed

@@ -11,7 +11,7 @@ import localeIt from "./meta/locale.it.json";
  *  <mds-text>Accessibility preferences in web browsers allow users to customize their navigation to improve readability, interaction, and usability. Common options include dark mode, text resizing, screen reader support, keyboard navigation, and blocking animated content. These settings help people with visual, hearing, motor, or cognitive disabilities experience the web more effectively and inclusively.</mds-text>
  * @category Patterns
  * @tags pattern, user, tab
- * @slot default - Add `mds-pref-animation`, `mds-pref-consumption`, `mds-pref-contrast`, `mds-pref-language`, or `mds-pref-theme` element/s.
+ * @slot - Add `mds-pref-animation`, `mds-pref-consumption`, `mds-pref-contrast`, `mds-pref-language`, or `mds-pref-theme` element/s.
  * @example <mds-pref>
  *    <mds-pref-animation></mds-pref-animation>
  *    <mds-pref-consumption></mds-pref-consumption>
@@ -66,6 +66,9 @@ export class MdsPref {
             element.removeEventListener('mdsPrefChange', this.handlePrefChangeEvent.bind(this));
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -86,7 +89,7 @@ export class MdsPref {
     }
     componentDidLoad() {
         var _a;
-        if (window) {
+        if (typeof window !== 'undefined') {
             (_a = document.documentElement) === null || _a === void 0 ? void 0 : _a.setAttribute('data-magma-pref', '');
         }
         if (this.controller) {
@@ -95,13 +98,13 @@ export class MdsPref {
     }
     disconnectedCallback() {
         var _a;
-        if (window) {
+        if (typeof window !== 'undefined') {
             (_a = document.documentElement) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-magma-pref');
         }
         this.removePerfEvents();
     }
     render() {
-        return (h(Host, { key: '8c5ead4e84eabbf2382ed64eaec6a6b9efb5ffee' }, h("slot", { key: '136f362db37befead20e9f04a9e3a9e8c0f9a94c' }), this.showReload && (h("div", { key: '96959ca6338ac7d11259e97f74712378941aab38', class: "reload-required" }, h("mds-text", { key: '3d7c32617dc21f76c22e940a7cbc791515863b6a', typography: "caption" }, this.t.get('reloadPageToSeeChanges'))))));
+        return (h(Host, { key: 'fb9caf5c41dde41d29c82cdb48f3d4472dc27719' }, h("slot", { key: 'ce22594b814f4d3e6f26df1aef9b291bcd3f5e21' }), this.showReload && (h("div", { key: 'e155da0815e661dfcd2acbc9b0c96aaa87ca56cb', class: "reload-required" }, h("mds-text", { key: '4ed6190393fc4ff247285e4085d52ace60027c75', typography: "caption" }, this.t.get('reloadPageToSeeChanges'))))));
     }
     static get is() { return "mds-pref"; }
     static get encapsulation() { return "shadow"; }
@@ -185,7 +188,7 @@ export class MdsPref {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

package/dist/collection/components/mds-pref-animation/mds-pref-animation.css CHANGED Viewed

@@ -36,13 +36,18 @@ mds-text {
   --mds-tab-item-selected-color: rgb(var(--tone-neutral-03, 233 233 233));
 }
-:host-context(:root.pref-contrast-more) .item {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+:host([pref-contrast='more']) .item {
   --mds-tab-item-color: rgb(var(--tone-neutral-01, 255 255 255));
 }
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     .item {
       --mds-tab-item-color: rgb(var(--tone-neutral-01, 255 255 255));
     }

package/dist/collection/components/mds-pref-animation/mds-pref-animation.js CHANGED Viewed

@@ -3,6 +3,7 @@ import miOutlineCircle from "@icon/mi/outline/circle.svg";
 import miBaselineAnimation from "@icon/mi/baseline/animation.svg";
 import miBaselineSettings from "@icon/mi/baseline/settings.svg";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
@@ -36,7 +37,7 @@ export class MdsPrefAnimation {
             this.prefChangeEvent.emit({ preference: 'animation' });
             this.mode = mode;
             localStorage.setItem(this.localStorageAlias, this.mode);
-            if (document) {
+            if (typeof document !== 'undefined') {
                 const element = document.querySelector('html');
                 for (const key in this.animation) {
                     if ({}.hasOwnProperty.call(this.animation, key)) {
@@ -47,10 +48,25 @@ export class MdsPrefAnimation {
                 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.
+     */
     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);
@@ -61,13 +77,7 @@ export class MdsPrefAnimation {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'd8d97e6e1a5684af95b6a4602e759a1cbcf7cae7' }, h("mds-text", { key: '14bbea6444bc69042583a78ff48135ae6b87a1bf', class: "info", typography: "caption" }, h("b", { key: '5fc12248f44981ef9f2174a7073822b1640c93ad' }, this.t.get('label')), ' ', this.t.get(this.animation[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '9ecce808da035fca4887ccaeaeaba4d0479ceea9', fill: true, size: this.size }, h("mds-tab-item", { key: 'fbf817158e8aed566bc42b788b3c1e7e1bd70424', selected: this.mode === 'reduce', onClick: () => {
-                this.setAnimation('reduce');
-            }, class: "item item--reduce", icon: miOutlineCircle }), h("mds-tab-item", { key: '1d030f1e4b64ad1005581c77181a284f88906ae3', selected: this.mode === 'system', onClick: () => {
-                this.setAnimation('system');
-            }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: '6a1c4bbc869df8c0f9596ef522848ff6e99f7581', 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 }))));
     }
     static get is() { return "mds-pref-animation"; }
     static get encapsulation() { return "shadow"; }
@@ -139,6 +149,7 @@ export class MdsPrefAnimation {
     }
     static get states() {
         return {
+            "prefContrast": {},
             "language": {}
         };
     }
@@ -182,7 +193,7 @@ export class MdsPrefAnimation {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

package/dist/collection/components/mds-pref-consumption/mds-pref-consumption.css CHANGED Viewed

@@ -36,7 +36,12 @@ mds-text {
   --mds-tab-item-selected-color: rgb(var(--status-success-06, 0 171 97));
 }
-:host-context(:root.pref-contrast-more) {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+:host([pref-contrast='more']) {
   .item {
     --mds-tab-item-default-color: rgb(var(--tone-neutral-01, 255 255 255));
   }
@@ -55,8 +60,8 @@ mds-text {
 }
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     .item {
       --mds-tab-item-default-color: rgb(var(--tone-neutral-01, 255 255 255));
     }

package/dist/collection/components/mds-pref-consumption/mds-pref-consumption.js CHANGED Viewed

@@ -3,6 +3,7 @@ import mggConsumptionLow from "@icon/mgg/consumption-low.svg";
 import mggConsumptionMedium from "@icon/mgg/consumption-medium.svg";
 import mggConsumptionHigh from "@icon/mgg/consumption-high.svg";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
@@ -36,7 +37,7 @@ export class MdsPrefContrast {
             this.prefChangeEvent.emit({ preference: 'consumption' });
             this.mode = mode;
             localStorage.setItem(this.localStorageAlias, this.mode);
-            if (document) {
+            if (typeof document !== 'undefined') {
                 const element = document.querySelector('html');
                 for (const key in this.consumption) {
                     if ({}.hasOwnProperty.call(this.consumption, key)) {
@@ -47,10 +48,25 @@ export class MdsPrefContrast {
                 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.
+     */
     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);
@@ -61,13 +77,7 @@ export class MdsPrefContrast {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'a868cca8f5a2bf2bc9c9836e63f85fa3ff275851' }, h("mds-text", { key: '60c3ce183c6d1ef984ad4acd2a020257c905aae9', class: "info", typography: "caption" }, h("b", { key: '5e2f6d2360c6f3fb483fa1f2b93b3acd53854c35' }, this.t.get('label')), ' ', this.t.get(this.consumption[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: 'a09fc79aad33d6a1e91a49e806a768bb72586462', fill: true, size: this.size }, h("mds-tab-item", { key: '33b0f441536fc9362f18ecd4704f431f256fbee6', selected: this.mode === 'low', onClick: () => {
-                this.setConsumption('low');
-            }, class: "item item--low", icon: mggConsumptionLow }), h("mds-tab-item", { key: '79884e15aa766b134beeb20d82286caac3d08ebf', selected: this.mode === 'medium', onClick: () => {
-                this.setConsumption('medium');
-            }, class: "item item--medium", icon: mggConsumptionMedium }), h("mds-tab-item", { key: '9c6604fe0bd3827d676fbf2bb4305a5e15317ab3', 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 }))));
     }
     static get is() { return "mds-pref-consumption"; }
     static get encapsulation() { return "shadow"; }
@@ -139,6 +149,7 @@ export class MdsPrefContrast {
     }
     static get states() {
         return {
+            "prefContrast": {},
             "language": {}
         };
     }
@@ -182,7 +193,7 @@ export class MdsPrefContrast {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

package/dist/collection/components/mds-pref-contrast/mds-pref-contrast.css CHANGED Viewed

@@ -30,13 +30,18 @@ mds-text {
   --mds-tab-item-selected-color: rgb(var(--tone-neutral-03, 233 233 233));
 }
-:host-context(:root.pref-contrast-more) .item {
+/* Contrast preference. The component reflects the resolved mode from <html> onto
+ * its host as pref-contrast (see subscribePreference in @common/preference); these
+ * plain shadow selectors refine for high contrast. `more` is the explicit choice;
+ * `system` and no controller follow the OS via @media. Cross-browser, no :host-context. */
+:host([pref-contrast='more']) .item {
   --mds-tab-item-default-color: rgb(var(--tone-neutral-01, 255 255 255));
 }
 @media (prefers-contrast: more) {
-  :host-context(:root.pref-contrast-system),
-  :host-context(:root:not([data-magma-pref])) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])) {
     .item {
       --mds-tab-item-default-color: rgb(var(--tone-neutral-01, 255 255 255));
     }

package/dist/collection/components/mds-pref-contrast/mds-pref-contrast.js CHANGED Viewed

@@ -4,6 +4,7 @@ import miOutlineAutoAwesome from "@icon/mi/outline/auto-awesome.svg";
 import miBaselineAutoAwesome from "@icon/mi/baseline/auto-awesome.svg";
 import miBaselineSettings from "@icon/mi/baseline/settings.svg";
 import { Locale } from "../../common/locale";
+import { subscribePreference } from "../../common/preference";
 import localeEl from "./meta/locale.el.json";
 import localeEn from "./meta/locale.en.json";
 import localeEs from "./meta/locale.es.json";
@@ -40,7 +41,7 @@ export class MdsPrefContrast {
             },
         };
         this.rollbackContrast = () => {
-            if (!window) {
+            if (typeof window === 'undefined') {
                 return this.defaultMode;
             }
             for (const key in this.prefersDefaults) {
@@ -57,7 +58,7 @@ export class MdsPrefContrast {
             this.rollbackContrast();
             this.mode = mode;
             localStorage.setItem(this.localStorageAlias, this.mode);
-            if (document) {
+            if (typeof document !== 'undefined') {
                 const element = document.querySelector('html');
                 for (const key in this.contrast) {
                     if ({}.hasOwnProperty.call(this.contrast, key)) {
@@ -68,10 +69,25 @@ export class MdsPrefContrast {
                 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.
+     */
     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);
@@ -84,13 +100,7 @@ export class MdsPrefContrast {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b2b65db3b7a382669e8d71bbb97eff1ba8ded19d' }, h("mds-text", { key: '8a6345d6b3fe5f2bfed8f492edc8559c68841128', class: "info", typography: "caption" }, h("b", { key: 'ea6c8753913b860d5ace1696ead1bd422574fa6a' }, this.t.get('label')), ' ', this.t.get(this.contrast[(_a = this.mode) !== null && _a !== void 0 ? _a : this.defaultMode].label)), h("mds-tab", { key: '1ec637db0edc73c08a4e5a7ee27170383d972d7c', fill: true, size: this.size }, h("mds-tab-item", { key: 'ce53045c2487cae49bea7efe5ed262b04b5ed329', selected: this.mode === 'more', onClick: () => {
-                this.setContrast('more');
-            }, class: "item item--more", icon: miBaselineContrast }), h("mds-tab-item", { key: '3798cbdb8df68f9b9d46d91136cb4f1cf0926139', selected: this.mode === 'system', onClick: () => {
-                this.setContrast('system');
-            }, class: "item item--system", icon: miBaselineSettings }), h("mds-tab-item", { key: 'c626f5db4b9d8a5e4fee01ff441de35f6fc3fb5b', 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 }))));
     }
     static get is() { return "mds-pref-contrast"; }
     static get encapsulation() { return "shadow"; }
@@ -162,6 +172,7 @@ export class MdsPrefContrast {
     }
     static get states() {
         return {
+            "prefContrast": {},
             "language": {}
         };
     }
@@ -205,7 +216,7 @@ export class MdsPrefContrast {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }

package/dist/collection/components/mds-pref-language/mds-pref-language.js CHANGED Viewed

@@ -7,7 +7,7 @@ import localeIt from "./meta/locale.it.json";
 import miBaselineKeyboardArrowDown from "@icon/mi/baseline/keyboard-arrow-down.svg";
 import miBaselineKeyboardArrowUp from "@icon/mi/baseline/keyboard-arrow-up.svg";
 /**
- * @slot default - Add `mds-pref-language-item` element/s.
+ * @slot - Add `mds-pref-language-item` element/s.
  */
 export class MdsPrefLanguage {
     constructor() {
@@ -75,12 +75,15 @@ export class MdsPrefLanguage {
                     : this.sanitizeLanguage(set);
             this.prefChangeEvent.emit({ preference: 'language' });
             localStorage.setItem(this.localStorageAlias, this.set);
-            if (document) {
+            if (typeof document !== 'undefined') {
                 const element = document.querySelector('html');
                 element === null || element === void 0 ? void 0 : element.setAttribute('lang', this.set);
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
@@ -97,7 +100,7 @@ export class MdsPrefLanguage {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'dc71143924209440f083fcec65bcb7bd504dd25a' }, h("div", { key: '292239b82496f972e66d40c3545f744bbb3b3c7f', class: "menu" }, h("mds-text", { key: '40a055e9e7b833b54be9d0a94bf3a3dcdfc0c8b8', class: "info", typography: "caption" }, h("b", { key: 'a18868d48b74d314e96b11a090910094dadc3f32' }, this.t.get('label'))), h("mds-tab", { key: '565d66dfa81b0991ff2c456c20f0880b5608a5b3', fill: true, size: this.size }, h("mds-tab-item", { key: '5b9bccdca9afc5dacd2ded61f34001b7dffe39da', 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: '82f77f40b5b589cf3ee6097ecdd27b2f55f50779', class: "mds-pref-language-dropdown", target: "#mds-pref-language-nav", interaction: "none", visible: this.showDropdown, onMdsDropdownHide: this.hideLanguageSelectDropdown, autoPlacement: true }, h("slot", { key: 'f2ad1acf8456a7d8a284a802342138424f26628a' })), this.set !== this.defaultLanguage && (h("mds-text", { key: 'fc2901f08f355fac291535936079e3d54ed6bcc9', 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')))));
     }
     static get is() { return "mds-pref-language"; }
     static get encapsulation() { return "shadow"; }
@@ -229,7 +232,7 @@ export class MdsPrefLanguage {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }