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-url-view/mds-url-view.css CHANGED Viewed

@@ -54,6 +54,8 @@ mds-text {
 */
 :host {
+  --mds-url-view-transition-duration: var(--duration-200, 200ms);
+  --private-url-view-transition-duration: var(--mds-url-view-transition-duration);
   /* stylelint-disable-next-line length-zero-no-unit */
   --mds-modal-custom-window-distance: 0px;
@@ -63,18 +65,16 @@ mds-text {
   --mds-url-view-header-shadow: var(--shadow-sm-sharp, 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1));
   --mds-url-view-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
-  @apply h-screen
-  p-400;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  height: 100vh;
   margin: 0;
+  padding: --spacing(400);
 }
 .window {
-  @apply ease-out
-  w-full;
+  @apply ease-out;
   background-color: var(--mds-url-view-background, rgb(var(--tone-neutral-10, 60 60 60)));
   border-radius: var(--mds-url-view-radius, var(--radius-md, 12px));
@@ -83,14 +83,13 @@ mds-text {
   flex-direction: column;
   flex-grow: 1;
   overflow: hidden;
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-url-view-transition-duration);
   transition-property: background-color, box-shadow;
+  width: 100%;
 }
 .header {
-  @apply ease-out
-  gap-200
-  p-200;
+  @apply ease-out;
   align-items: center;
   background-color: var(--mds-url-view-background, rgb(var(--tone-neutral-10, 60 60 60)));
@@ -98,17 +97,19 @@ mds-text {
   color: var(--mds-url-view-color, rgb(var(--tone-neutral-02, 244 244 244)));
   display: flex;
   flex-shrink: 0;
+  gap: --spacing(200);
   justify-content: space-between;
+  padding: --spacing(200);
   position: relative;
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-url-view-transition-duration);
   transition-property: background-color, box-shadow;
 }
 .title {
-  @apply min-w-0
-  truncate;
+  @apply truncate;
   flex-grow: 1;
+  min-width: 0;
   text-align: center;
 }
@@ -130,42 +131,53 @@ mds-text {
   width: 100%;
 }
-:host-context(:root.pref-animation-reduce),
-:host-context(:root.pref-animation-reduce) .window,
-:host-context(:root.pref-animation-reduce) .header {
-  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). */
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
+:host([pref-animation='reduce']) {
+  --private-url-view-transition-duration: 0s;
+}
-    .window,
-    .header {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-url-view-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-url-view-shadow: var(--shadow-outline);
 }
 @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-url-view-shadow: var(--shadow-outline);
   }
 }
-: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']) {
   --mds-url-view-shadow: var(--shadow-outline-50);
 }
 @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])) {
     --mds-url-view-shadow: var(--shadow-outline-50);
   }
 }

package/dist/collection/components/mds-url-view/mds-url-view.js CHANGED Viewed

@@ -3,6 +3,7 @@ import miBaselineExplore from "@icon/mi/baseline/explore.svg";
 import { Host, h, } from "@stencil/core";
 import { KeyboardManager } from "../../common/keyboard-manager";
 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";
@@ -30,13 +31,27 @@ export class MdsUrlView {
             this.closeEvent.emit();
             (_a = this.host.closest('mds-modal')) === null || _a === void 0 ? void 0 : _a.close();
         };
-        this.disconnectedCallback = () => {
-            this.km.detachClickBehavior();
-        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    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;
+        });
+    }
     componentWillLoad() {
         this.t.lang(this.host);
     }
@@ -46,9 +61,17 @@ export class MdsUrlView {
         this.km.addElement(close);
         this.km.attachClickBehavior();
     }
+    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);
+        this.km.detachClickBehavior();
+    }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'db3646514778edd26539244016b06b39f6c0ab7f', "aria-label": this.t.get('previewURL', { url: this.urlDomain(this.src) }) }, h("div", { key: 'f747eb49ed04e2f0992091ecc927e5315806d2d7', class: "window" }, h("div", { key: '965b87ea11809a8e47f3a90a05520635a81753ab', class: "header" }, h("mds-icon", { key: '29e0996b81341d5d19dad1930b918a45b3e98dc0', class: "window-icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miBaselineExplore }), h("mds-text", { key: '554c30e335f9b982036f9de2adef429d78a6e4ba', class: "title", typography: "caption" }, (_b = this.label) !== null && _b !== void 0 ? _b : this.urlDomain(this.src)), h("mds-button", { key: 'ce209ba666d12b97734211f1f8431b168e72d2c6', title: this.t.get('close'), class: "action-close", variant: "dark", tone: "text", icon: miBaselineClose, onClick: this.closeUrlView })), h("iframe", { key: '29cd963366d5407e922f79c9a5afc83183b93715', class: "iframe", "aria-label": this.t.get('iframeURL', { url: this.urlDomain(this.src) }), src: this.src, loading: this.loading }))));
+        return (h(Host, { key: '806641c36d9b4aa568b09ce3617f4ca860ed8817', "aria-label": this.t.get('previewURL', { url: this.urlDomain(this.src) }), "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '2205b5e3d0810ba101e3ba78e690f94ae156b042', class: "window" }, h("div", { key: 'cced352e1926c26eb05f122d8df152f19a695a78', class: "header" }, h("mds-icon", { key: '8b386b0a164a176f3a65dd8f0ae9b639efcfbe51', class: "window-icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miBaselineExplore }), h("mds-text", { key: '14b2574e7a3e28620a7fb098644e3cd1abb66208', class: "title", typography: "caption" }, (_b = this.label) !== null && _b !== void 0 ? _b : this.urlDomain(this.src)), h("mds-button", { key: 'eceac0ff4d497eaf88c675605b833fd3a7eac9f7', title: this.t.get('close'), class: "action-close", variant: "dark", tone: "text", icon: miBaselineClose, onClick: this.closeUrlView })), h("iframe", { key: 'a18133eb09c2ef5bf7b7ecdaabef6f3e00b91a8b', class: "iframe", "aria-label": this.t.get('iframeURL', { url: this.urlDomain(this.src) }), src: this.src, loading: this.loading }))));
     }
     static get is() { return "mds-url-view"; }
     static get encapsulation() { return "shadow"; }
@@ -152,6 +175,10 @@ export class MdsUrlView {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {}
         };
     }
@@ -188,7 +215,7 @@ export class MdsUrlView {
                     "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-usage/mds-usage.css CHANGED Viewed

@@ -39,15 +39,13 @@ mds-text {
   --mds-usage-border-color: rgb(var(--status-info-06, 0 161 208));
   --mds-usage-header-background: var(--mds-usage-border-color, rgb(var(--status-info-06, 0 161 208)));
   --mds-usage-header-color: rgb(var(--tone-neutral, 0 0 0));
+  --mds-usage-transition-duration: var(--duration-200, 200ms);
+  --private-usage-transition-duration: var(--mds-usage-transition-duration);
-  @apply duration-200
-    ease-out
-    gap-200
-    p-400
-    pt-0
-    rounded-lg;
+  @apply ease-out;
   border-color: var(--mds-usage-border-color, rgb(var(--status-info-06, 0 161 208)));
+  border-radius: var(--radius-lg, 16px);
   border-style: solid;
   border-width: --spacing(50);
@@ -56,9 +54,13 @@ mds-text {
   container-type: inline-size;
   */
   display: grid;
+  gap: --spacing(200);
   grid-auto-rows: min-content;
   grid-template-columns: minmax(0, 100%);
+  padding: --spacing(400);
+  padding-top: 0;
   position: relative;
+  transition-duration: var(--private-usage-transition-duration);
   transition-property: background-color, box-shadow, color;
   width: 100%;
 }
@@ -86,39 +88,55 @@ mds-icon {
   padding-right: --spacing(200);
 }
-:host-context(:root.pref-animation-reduce),
-:host-context(:root.pref-animation-reduce) .badge {
-  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-usage-transition-duration: 0s;
 }
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])),
-  :host-context(:root:not([data-magma-pref])) .badge {
-    transition-duration: 0s;
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-usage-transition-duration: 0s;
   }
 }
-:host-context(:root.pref-contrast-more),
-:host-context(:root.pref-contrast-more):host([variant='do']),
-:host-context(:root.pref-contrast-more):host([variant='dont']),
-:host-context(:root.pref-contrast-more):host([variant='warn']) {
+/* 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']),
+:host([pref-contrast='more']):host([variant='do']),
+:host([pref-contrast='more']):host([variant='dont']),
+:host([pref-contrast='more']):host([variant='warn']) {
   --mds-usage-badge-color: rgb(var(--tone-neutral-01, 255 255 255));
   --mds-usage-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-context(:root:not([data-magma-pref])):host([variant='do']),
-  :host-context(:root:not([data-magma-pref])):host([variant='dont']),
-  :host-context(:root:not([data-magma-pref])):host([variant='warn']) {
+  :host([pref-contrast='system']),
+  :host(:not([pref-contrast])),
+  :host(:not([pref-contrast])):host([variant='do']),
+  :host(:not([pref-contrast])):host([variant='dont']),
+  :host(:not([pref-contrast])):host([variant='warn']) {
     --mds-usage-badge-color: rgb(var(--tone-neutral-01, 255 255 255));
     --mds-usage-color: rgb(var(--tone-neutral-01, 255 255 255));
   }
 }
-: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-usage-header-background: rgb(var(--status-info-05, 112 198 234));
   box-shadow: var(--shadow-outline);
@@ -137,8 +155,8 @@ mds-icon {
 }
 @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-usage-header-background: rgb(var(--status-info-05, 112 198 234));
     box-shadow: var(--shadow-outline);

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

@@ -1,11 +1,12 @@
 import { Host, h } from "@stencil/core";
 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";
 import localeIt from "./meta/locale.it.json";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export class MdsUsage {
     constructor() {
@@ -20,12 +21,36 @@ export class MdsUsage {
          */
         this.variant = 'info';
     }
+    /**
+     * 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.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);
+    }
     render() {
         var _a;
-        return (h(Host, { key: '448aa090854adc543ebd50653234aae486f21037' }, h("div", { key: 'be4057f81c86c7accb98a003733af802da34b454', class: "header", part: "header" }, h("mds-icon", { key: 'c0264f5e80cf4ef8922f62935592138f0d6de0e9', name: "mi/baseline/info", part: "icon" }), h("mds-text", { key: 'a30fa64ebb19c2b0187d664b153ee35dae409293', typography: "label", class: "label", part: "label" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.t.get(this.variant))), h("div", { key: '1d0421d1ec8d2cae52c527db24f4bd30a25bb571', class: "content", role: this.variant === 'do' || this.variant === 'info' ? 'insertion' : 'deletion' }, h("slot", { key: '80c342f0def0b79695703512c70ecf71da61ab3e' }))));
+        return (h(Host, { key: '85c8efc0f31d70d317575637e4c4e4584170ab10', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: 'b13cc0c447b185362dc7d8a2587ccc3f7f260ab9', class: "header", part: "header" }, h("mds-icon", { key: 'f739767d950f5f3d65e0571faf1270f73fa658da', name: "mi/baseline/info", part: "icon" }), h("mds-text", { key: '7df4c76d59a017beadb081603a25aab194f74b52', typography: "label", class: "label", part: "label" }, (_a = this.alias) !== null && _a !== void 0 ? _a : this.t.get(this.variant))), h("div", { key: '1d2fd3a6c1e8a83c59b8c8819d5119e91b4870da', class: "content", role: this.variant === 'do' || this.variant === 'info' ? 'insertion' : 'deletion' }, h("slot", { key: 'a951eb3d2e26814d585f04d1143d588ddd008b18' }))));
     }
     static get is() { return "mds-usage"; }
     static get encapsulation() { return "shadow"; }
@@ -91,6 +116,10 @@ export class MdsUsage {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {}
         };
     }
@@ -109,7 +138,7 @@ export class MdsUsage {
                     "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-video-wall/mds-video-wall.css CHANGED Viewed

@@ -60,11 +60,10 @@
 video,
 .noise {
-  @apply h-full
-    w-full;
+  height: 100%;
   inset: 0;
   position: absolute;
+  width: 100%;
 }
 video {
@@ -72,6 +71,17 @@ video {
   z-index: 1;
 }
+/* Animation preference: an autoplaying video is motion that cannot be reduced
+ * by scaling a duration, so reduced motion hides it. This is handled here,
+ * cross-browser, via @media following the OS preference (a custom property
+ * cannot toggle display). */
+@media (prefers-reduced-motion: reduce) {
+  video {
+    display: none;
+  }
+}
 .noise {
   background-color: var(--mds-video-wall-noise-background-color, rgb(var(--variant-primary-03, 211 226 255) / 0.8));
   background-size: var(--mds-video-wall-noise-background-size, auto);
@@ -95,14 +105,3 @@ video {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMElEQVQYV2NkYGDwZcABGP8zKBuD5Bj/P4coEf0Kod8wSjH+Z5CVgki+RZc0HghJADPEICMR8Ep/AAAAAElFTkSuQmCC');
 }
-:host-context(:root.pref-animation-reduce) video {
-  display: none;
-}
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) video {
-    display: none;
-  }
-}

package/dist/collection/components/mds-video-wall/mds-video-wall.js CHANGED Viewed

@@ -1,7 +1,8 @@
+/* eslint-disable stencil/ban-default-true */
 import { Host, h } from "@stencil/core";
 import clsx from "clsx";
 /**
- * @slot default - Write browser support missing message here.
+ * @slot - Write browser support missing message here.
  * @slot content - Add video content overlay here, add `text string`, `HTML elements` or `components` to this slot.
  */
 export class MdsVideoWall {
@@ -31,7 +32,7 @@ export class MdsVideoWall {
         this.hasContent = this.hostElement.querySelector(':scope > [slot="content"]') !== null;
     }
     render() {
-        return (h(Host, { key: '82f1f142c13168968cc0652b21612a6872ba63fe' }, this.noise !== 'none' && (h("div", { key: 'a6f179747d63769ec0780986754d9bd04579c39d', "aria-hidden": "true", class: clsx('noise', `noise--${this.noise}`) })), h("video", { key: 'b6d9b4d16a414594624c3bbf6b3c6059538c99de', "aria-hidden": "true", autoplay: this.autoplay, loop: this.loop, muted: this.muted, poster: this.poster, preload: this.preload, src: this.src }, h("slot", { key: '3667c4c9bc1bb1cb28dd42ef0e71841fcbc92013' })), this.hasContent && (h("div", { key: 'a7173bd4b5306bbbada4d875fcbc25ba1702839a', class: "content" }, h("slot", { key: '6f5a6425717d2ee622f53055ac3c4633392110b4', name: "content" })))));
+        return (h(Host, { key: '8f07c944028bfe470b32b16318d116b11b8182e7' }, this.noise !== 'none' && (h("div", { key: '98490d2cc82b65ff2e3032856af679d455820224', "aria-hidden": "true", class: clsx('noise', `noise--${this.noise}`) })), h("video", { key: '6a7d2ecc5a053593b111f4a7bb55a0d559f514a0', "aria-hidden": "true", autoplay: this.autoplay, loop: this.loop, muted: this.muted, poster: this.poster, preload: this.preload, src: this.src }, h("slot", { key: '34d12c79883050650e0cc6c4585cdf74b2f0da5f' })), this.hasContent && (h("div", { key: 'ce5d918aa67250207d7e81698eb0b1d40a9f6a36', class: "content" }, h("slot", { key: '68e82013151c87a3b265d3d2cf398e92120e9b5a', name: "content" })))));
     }
     static get is() { return "mds-video-wall"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-zero/mds-zero.css CHANGED Viewed

@@ -10,21 +10,20 @@
 :host {
   --mds-zero-contents-max-width: 400px;
+  --mds-zero-transition-duration: var(--duration-200, 200ms);
+  --private-zero-transition-duration: var(--mds-zero-transition-duration);
-  @apply duration-200
-    ease-out
-    mobile:px-600
-    rounded-xl;
+  @apply ease-out mobile:px-600;
   align-items: center;
   background-color: rgb(var(--tone-neutral-10, 60 60 60));
+  border-radius: var(--radius-xl, 20px);
   display: flex;
   flex-direction: column;
   gap: --spacing(600);
   justify-items: center;
   padding: --spacing(1200);
-  /* transition-duration: var(--transition-duration-200); */
+  transition-duration: var(--private-zero-transition-duration);
   transition-property: box-shadow, background-color;
 }
@@ -38,10 +37,9 @@
 }
 :host .actions {
-  @apply gap-200;
   align-items: center;
   display: flex;
+  gap: --spacing(200);
   justify-items: center;
   width: 100%;
 }
@@ -50,37 +48,55 @@
   margin: auto;
 }
-: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-zero-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-zero-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'])) {
   background-color: rgb(var(--tone-neutral-09, 76 76 76));
   box-shadow: var(--shadow-outline);
 }
 @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])) {
     background-color: rgb(var(--tone-neutral-09, 76 76 76));
     box-shadow: var(--shadow-outline);
   }
 }
-: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']) {
   box-shadow: var(--shadow-outline-50);
 }
 @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])) {
     box-shadow: var(--shadow-outline-50);
   }
 }

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

@@ -1,14 +1,36 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - Add `HTML elements` or `components` to this slot, it is **recommended** to use `mds-img` or `img` element.
+ * @slot - Add `HTML elements` or `components` to this slot, it is **recommended** to use `mds-img` or `img` element.
  * @slot content - Put text elements here,
  * @slot action - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  * @part contents - Selects the wrapper of the elements with attribute `slot="content"`.
  * @part actions - Selects the wrapper of the elements with attribute `slot="action"`.
  */
 export class MdsZero {
+    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);
+    }
     render() {
-        return (h(Host, { key: '4fa8ad6a12089daefb9f6c0c92a0e8e5d4d4514d' }, h("slot", { key: 'b75c4e9d7b1b37a6800fe27c83dbf870bf16bb33' }), h("div", { key: '06800749b5440e93d5d258aa71610ebc17841624', class: "contents", part: "contents" }, h("slot", { key: '802d32def4e717b196e0fa1d4666d316107ef04c', name: "content" })), h("footer", { key: '0da9f38014efaef387026489b81050360af244e7', class: "actions", part: "actions" }, h("slot", { key: '91f9ec1a9a3ace90eb721768d0e54600d057cf1d', name: "action" }))));
+        return (h(Host, { key: '6313fb7bb691178754bf339cb5ed9fe35c89bf40', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("slot", { key: 'ad07044307f4d6af9674c6f3f1b7dd1e53880936' }), h("div", { key: '2e99ce2ac84f02d16d119ab2952cfec09d16d8c6', class: "contents", part: "contents" }, h("slot", { key: 'e27e04c9b63d8312de6ca2ac44db5776ba7da30b', name: "content" })), h("footer", { key: '77d6ffcd4e3a8cc6d1e49662bdd06d91dc020177', class: "actions", part: "actions" }, h("slot", { key: '7c774123d4bd3061b6901c95bf7999bf7759ea99', name: "action" }))));
     }
     static get is() { return "mds-zero"; }
     static get encapsulation() { return "shadow"; }
@@ -22,4 +44,12 @@ export class MdsZero {
             "$": ["mds-zero.css"]
         };
     }
+    static get states() {
+        return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
 }

package/dist/collection/index.js ADDED Viewed

@@ -0,0 +1,15 @@
+/**
+ * Public, non-component entry point for `@maggioli-design-system/magma`.
+ *
+ * Exposed through the `./services` subpath export so consumers can configure the
+ * icon SVG base path programmatically, without relying on `sessionStorage`:
+ *
+ * ```ts
+ * import { IconsSetService } from '@maggioli-design-system/magma/services';
+ * IconsSetService.setSvgPath('/assets/svg/');
+ * ```
+ *
+ * `setSvgPath()` updates the shared icon path (kept on `globalThis`, so every bundled
+ * copy of the service agrees on it) and re-fetches all mounted `<mds-icon>` instances.
+ */
+export { IconsSetService } from './components/mds-icon/services/icons-set.service';