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-header-bar/mds-header-bar.css CHANGED Viewed

@@ -22,6 +22,8 @@ mds-button {
 :host {
   --mds-header-bar-hamburger-color: rgb(var(--tone-neutral-03, 233 233 233));
+  --mds-header-bar-transition-duration: 500ms;
+  --private-header-bar-transition-duration: var(--mds-header-bar-transition-duration);
   background-color: rgb(var(--tone-neutral, 0 0 0));
   box-shadow: var(--shadow-md-sharp, 0 0 1px 1px rgb(0 0 0 / 0.06), 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06));
@@ -34,7 +36,7 @@ mds-button {
   max-width: 100%;
   padding: --spacing(400) --spacing(600);
   position: fixed;
-  transition-duration: 500ms;
+  transition-duration: var(--private-header-bar-transition-duration);
   transition-property: background-color, border-radius, margin, max-width, transform, width;
   transition-timing-function: var(--ease-out-expo, cubic-bezier(0.19, 1, 0.22, 1));
   width: auto;
@@ -92,39 +94,57 @@ mds-button {
   display: none;
 }
-: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-header-bar-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-header-bar-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-10, 60 60 60));
   box-shadow: var(--shadow-outline), var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
 }
 @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-10, 60 60 60));
     box-shadow: var(--shadow-outline), var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
   }
 }
-: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-header-bar-hamburger-color: rgb(var(--tone-neutral-01, 255 255 255));
   box-shadow: var(--shadow-outline-strong-50), var(--shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.25));
 }
 @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-header-bar-hamburger-color: rgb(var(--tone-neutral-01, 255 255 255));
     box-shadow: var(--shadow-outline-strong-50), var(--shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.25));

package/dist/collection/components/mds-header-bar/mds-header-bar.js CHANGED Viewed

@@ -1,10 +1,11 @@
 import miRoundMenu from "@icon/mi/round/menu.svg";
 import { Host, h, } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
  * @part actions - Selects the element which wraps `nav` and `hamburger` parts
  * @part hamburger - Selects the `hamburger` menu action element
  * @part nav - Selects the `nav` element that contains the horizontal menu
- * @slot default - Put contents, like logo and a small description shown on the left of the component. Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Put contents, like logo and a small description shown on the left of the component. Add `text string`, `HTML elements` or `components` to this slot.
  * @slot nav - Put the actions shown when the component is on desktop mode. Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  */
 export class MdsHeaderBar {
@@ -24,14 +25,39 @@ export class MdsHeaderBar {
             (_a = this.host.closest('mds-header')) === null || _a === void 0 ? void 0 : _a.setOpened(true);
         };
     }
+    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);
+    }
     componentWillLoad() {
         this.hasNav = this.host.querySelector(':scope > [slot="nav"]') !== null;
     }
+    /**
+     * Opens or closes the header bar.
+     * @param isOpened whether the header bar should be opened
+     */
     async setOpened(isOpened = true) {
         this.isOpened = isOpened;
     }
     render() {
-        return (h(Host, { key: 'a178d875406a0d139ec4d4853f2da7495b86374c' }, h("div", { key: '51e3151cae7173f67d7beb22dca28ea89a9cdf03', class: "content", part: "content" }, h("div", { key: '9648cf1eaa609f2fdb6ba28e5b63c4b0223729fa', class: "logo" }, h("slot", { key: 'edf1ea3ba82bd5e9302659ca76627998aebcfea1' })), h("div", { key: '87845ffe8e7181e8ec572c28a55c0a323808f2a6', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav && (h("nav", { key: '6a7911143923bf0de2d23c002bd1765cb2801859', class: "nav", part: "nav" }, h("slot", { key: '58b8cbfe785982b04b9ac1d4dbdfa2a44fe20053', name: "nav" }))), this.menu !== 'none' && (h("mds-button", { key: 'a948a0b38722ee2c6802f9ad62278f2af6249e38', class: "menu", variant: "dark", tone: "text", icon: miRoundMenu, onClick: this.open, part: "hamburger" }))))));
+        return (h(Host, { key: 'b1c85dfc8206bae1df8c6646da41ad85775c0eb7', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '3f73b7a9ffbf542b60c81e313b1164f6208eb4f2', class: "content", part: "content" }, h("div", { key: '47f423bd40c504c2e058152ce8ca9f0a8ca45326', class: "logo" }, h("slot", { key: 'd0a7f9e9d818fd3e02418bd0cd570eb292cf1095' })), h("div", { key: '4fe0b5d41e3c38ab175a71c8f949ab40c98e30fa', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav && (h("nav", { key: '4668b44604cd6619d4b8b894e4bb2086abea0e15', class: "nav", part: "nav" }, h("slot", { key: '0d75f2f06c05c5613b107d3a96a2ecba2bdedcb6', name: "nav" }))), this.menu !== 'none' && (h("mds-button", { key: '225c889c6731cd4db3866ec57f996348f9475ea9', class: "menu", variant: "dark", tone: "text", icon: miRoundMenu, onClick: this.open, part: "hamburger" }))))));
     }
     static get is() { return "mds-header-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -105,6 +131,10 @@ export class MdsHeaderBar {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "isOpened": {}
         };
     }
@@ -134,7 +164,7 @@ export class MdsHeaderBar {
                     "parameters": [{
                             "name": "isOpened",
                             "type": "boolean",
-                            "docs": ""
+                            "docs": "whether the header bar should be opened"
                         }],
                     "references": {
                         "Promise": {
@@ -145,8 +175,11 @@ export class MdsHeaderBar {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
-                    "tags": []
+                    "text": "Opens or closes the header bar.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "isOpened whether the header bar should be opened"
+                        }]
                 }
             }
         };

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

@@ -1,14 +1,14 @@
 import { Host, h } from "@stencil/core";
 import miOutlineHelp from "@icon/mi/outline/help-outline.svg";
 /**
- * @slot default - Add `text string` to this slot, **avoid** `HTML elements` or `components`.
+ * @slot - Add `text string` to this slot, **avoid** `HTML elements` or `components`.
  */
 export class MdsHelp {
     constructor() {
         /**
-         * If set, the component will be placed automatically near it's caller.
+         * If set, the component will not be placed automatically near it's caller.
          */
-        this.autoPlacement = true;
+        this.disableAutoPlacement = false;
         /**
          * Specifies where the component should be placed relative to the caller.
          */
@@ -16,7 +16,7 @@ export class MdsHelp {
     }
     render() {
         var _a;
-        return (h(Host, { key: '7d7673ac454daa8673fcf30d1f7cd62a096efe67' }, h("mds-icon", { key: '19a08bed3129f9bb2a42ffa5308de9d5d6ef2cd8', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp, part: "icon" }), h("mds-tooltip", { key: '1b7aa24dd616edd66c9745d7d0ca550608225ecd', placement: this.placement, autoPlacement: this.autoPlacement, strategy: "absolute", target: ".icon" }, h("slot", { key: '8a9f25d575c2b036f8471b4f44911d27fe2627b0' }))));
+        return (h(Host, { key: 'b56b6de29019db8bf7f8b6ae1f133f8625e15e22' }, h("mds-icon", { key: '927cf78c5d30794947cf5898568ae44847ef4749', class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : miOutlineHelp, part: "icon" }), h("mds-tooltip", { key: '6422a433ec9bab77e9331efeef28e0cbbcb18393', placement: this.placement, disableAutoPlacement: this.disableAutoPlacement, strategy: "absolute", target: ".icon" }, h("slot", { key: '5b238d4131de924165a9d2986cd172e122ceacda' }))));
     }
     static get is() { return "mds-help"; }
     static get encapsulation() { return "shadow"; }
@@ -51,7 +51,7 @@ export class MdsHelp {
                 "reflect": false,
                 "attribute": "icon"
             },
-            "autoPlacement": {
+            "disableAutoPlacement": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -63,13 +63,13 @@ export class MdsHelp {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If set, the component will be placed automatically near it's caller."
+                    "text": "If set, the component will not be placed automatically near it's caller."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "auto-placement",
-                "defaultValue": "true"
+                "attribute": "disable-auto-placement",
+                "defaultValue": "false"
             },
             "placement": {
                 "type": "string",

package/dist/collection/components/mds-horizontal-scroll/mds-horizontal-scroll.css CHANGED Viewed

@@ -24,13 +24,11 @@ mds-button {
  * @prop --mds-horizontal-scroll-scrollbar-track-background: Sets the background-color of the browser scroll bar track (if supported)
  */
-/* ❌ Not supported: scroll-behavior cannot be expressed in @property syntax
 @property --mds-horizontal-scroll-behavior {
   inherits: false;
-  syntax: "auto | smooth";
   initial-value: smooth;
+  syntax: "auto | smooth";
 }
-*/
 @property --mds-horizontal-scroll-dots-gap {
   inherits: false;
@@ -159,6 +157,15 @@ mds-button {
   width: 100%;
 }
+/* Animation preference: scroll-behavior is a keyword, so its reduced-motion state
+ * is handled here, cross-browser, via @media following the OS preference. */
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --mds-horizontal-scroll-behavior: auto;
+  }
+}
 .navigation {
   border-radius: 1000px;
   display: none;
@@ -178,7 +185,7 @@ mds-button {
   padding-bottom: var(--mds-horizontal-scroll-contents-padding, --spacing(600));
   padding-top: var(--mds-horizontal-scroll-contents-padding, --spacing(600));
   position: relative;
-  scroll-behavior: var(--mds-horizontal-scroll-behavior);
+  scroll-behavior: var(--mds-horizontal-scroll-behavior, smooth);
   scroll-padding: var(--mds-horizontal-scroll-contents-scroll-padding, 0 --spacing(600));
   scroll-snap-type: x mandatory;
   width: 100%;
@@ -233,17 +240,6 @@ right: clamp(calc(var(--mds-horizontal-scroll-gap) / 2), var(--position), var(--
   }
 }
-:host-context(:root.pref-animation-reduce) {
-  --mds-horizontal-scroll-behavior: auto;
-}
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-horizontal-scroll-behavior: auto;
-  }
-}
 .navigation--back {
   --position: calc(
     var(--scroll-margin) - var(--mds-horizontal-scroll-gap, --spacing(600)) -

package/dist/collection/components/mds-horizontal-scroll/mds-horizontal-scroll.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { cssSizeToNumber } from "../../common/unit";
 // TODO [fix] buttons now shows up when they should
 // TODO [fix] scrollbar not showing anymore
 /**
- * @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 MdsHorizontalScroll {
     constructor() {
@@ -36,7 +36,7 @@ export class MdsHorizontalScroll {
             this.scrollGap = cssSizeToNumber(elementStyles.getPropertyValue('--mds-horizontal-scroll-gap'));
         };
         this.isInViewport = (element) => {
-            if (!this.contents) {
+            if (this.contents == null) {
                 return false;
             }
             const spacerWidth = this.spacer.offsetWidth + this.scrollGap;
@@ -62,7 +62,7 @@ export class MdsHorizontalScroll {
         //   )
         // }
         this.checkNavigationButtons = () => {
-            if (!this.elements) {
+            if (this.elements == null) {
                 throw Error('No elements slotted to the component');
             }
             this.showBack = true;
@@ -77,7 +77,7 @@ export class MdsHorizontalScroll {
             });
         };
         this.moveBack = () => {
-            if (!this.elements) {
+            if (this.elements == null) {
                 throw Error('No elements slotted to the component');
             }
             let firstIndex = 0;
@@ -110,7 +110,7 @@ export class MdsHorizontalScroll {
             });
         };
         this.moveForward = () => {
-            if (!this.elements) {
+            if (this.elements == null) {
                 throw Error('No elements slotted to the component');
             }
             let isFirstOutside = true;
@@ -127,7 +127,10 @@ export class MdsHorizontalScroll {
             });
         };
         this.translateNavigationDot = () => {
-            if (!this.elements || !this.contents || !this.navigationDot || !this.navigationDots) {
+            if (this.elements == null ||
+                this.contents == null ||
+                this.navigationDot == null ||
+                this.navigationDots == null) {
                 console.error('mds-horizontal-scroll.translateNavigationDot: One of the shadowRoot elements is missing.');
                 return;
             }
@@ -149,7 +152,7 @@ export class MdsHorizontalScroll {
             this.navigationDot.style.transform = `translateX(${translationX}px)`;
         };
         this.updateNavigationDotSize = () => {
-            if (!this.contents || !this.navigationDot || !this.navigationDots) {
+            if (this.contents == null || this.navigationDot == null || this.navigationDots == null) {
                 console.error('mds-horizontal-scroll.updateNavigationDotSize: One of the shadowRoot elements is missing.');
                 return;
             }
@@ -170,7 +173,7 @@ export class MdsHorizontalScroll {
             this.navigationDot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dot');
             this.navigationDots = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.dot-navigation');
             this.updateNavigationDotSize();
-            if (!this.navigationDot)
+            if (this.navigationDot == null)
                 return;
             this.contents.addEventListener('scroll', this.translateNavigationDot);
         };
@@ -194,7 +197,7 @@ export class MdsHorizontalScroll {
             this.contents.addEventListener('scrollend', this.checkNavigationButtons);
         }
         else {
-            if (this.controls)
+            if (this.controls !== undefined)
                 this.controls = undefined;
         }
     }
@@ -203,7 +206,7 @@ export class MdsHorizontalScroll {
         this.contents.removeEventListener('scroll', this.translateNavigationDot);
     }
     render() {
-        return (h(Host, { key: '4520b825ea6fcd3dce1f0207e03c3c434e6ea96a' }, h("div", { key: '203d92b0b3b850b4bad295682e3f769d6dfd03ba', class: "contents", part: "content" }, h("div", { key: '78a013d06726742419fbd61eea9c568cb0f8a649', class: "spacer" }), h("slot", { key: '1ae791267b68c05f2ea1ed218624e4bc600f927e', onSlotchange: this.updateElements }), h("div", { key: 'bbb1876c42feecbf622c8ae740e4ae1a88ffb247', class: "spacer" })), h("div", { key: '04b7204347fe8101dfa8ac2ba3b57ae8c2e4e631', class: "dot-navigation" }, h("div", { key: 'b37d218d314c67b9cc28cd5800987d1803f88e8e', class: "dot" })), this.controls && this.controls !== 'none' && (h("mds-button", { key: '57061c22ce779c72d2655925b79507a29bfdc69f', onClick: this.moveBack, size: "lg", class: clsx('navigation navigation--back', !this.showBack && 'navigation--disabled'), icon: miBaselineArrowBack })), this.controls && this.controls !== 'none' && (h("mds-button", { key: '64a0806aedb65a722378e3b8081e7dc2a5be915d', onClick: this.moveForward, size: "lg", class: clsx('navigation navigation--forward', !this.showForward && 'navigation--disabled'), icon: miBaselineArrowForward }))));
+        return (h(Host, { key: '636ebfd9eac9424b06093ee2990a434519af154c' }, h("div", { key: '0828132e0a00ff2d72ace5806d1cc07a8f7f3335', class: "contents", part: "content" }, h("div", { key: 'e1156c7aeeb7da48b55864ee35a7b54cdebce1e3', class: "spacer" }), h("slot", { key: '91c97d1e9c9477b07476cdf7c5b8f77df2d4dcf0', onSlotchange: this.updateElements }), h("div", { key: '8b02b270ebad91c7fe56315132200c43d96f4a77', class: "spacer" })), h("div", { key: '5ed9c9ced06458f9aa4796a6182a7ae6746ed3fb', class: "dot-navigation" }, h("div", { key: '778f7543ac11b70fad1169b6cbd05732d5fbabc2', class: "dot" })), this.controls && this.controls !== 'none' && (h("mds-button", { key: '63d99a5cbd4cb64a42c68a4ef4d1cae5a768c377', onClick: this.moveBack, size: "lg", class: clsx('navigation navigation--back', !this.showBack && 'navigation--disabled'), icon: miBaselineArrowBack })), this.controls && this.controls !== 'none' && (h("mds-button", { key: '4874cc67646aac477e164df8b1078ad3f631bab4', onClick: this.moveForward, size: "lg", class: clsx('navigation navigation--forward', !this.showForward && 'navigation--disabled'), icon: miBaselineArrowForward }))));
     }
     static get is() { return "mds-horizontal-scroll"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,13 +12,19 @@
   width: 100%;
 }
-: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-07, 134 134 134));
 }
 @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-07, 134 134 134));
   }
 }

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

@@ -1,7 +1,21 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 export class MdsHr {
+    connectedCallback() {
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefTheme) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefThemeScheme) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
     render() {
-        return h(Host, { key: 'e1055c3a5074fb93c5b51ce658a5eced9516b231' });
+        return h(Host, { key: '655c896905ebfdb8f5a170f108f338edde6a4d4f', "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme });
     }
     static get is() { return "mds-hr"; }
     static get encapsulation() { return "shadow"; }
@@ -15,4 +29,10 @@ export class MdsHr {
             "$": ["mds-hr.css"]
         };
     }
+    static get states() {
+        return {
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
 }

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

@@ -15,18 +15,16 @@ export class MdsIcon {
         this.updateIcon();
         IconsSetService.registerListener(() => this.updateIcon());
     }
-    static setSvgPathStatic(path) {
-        IconsSetService.setSvgPath(path);
-    }
     /**
      * Set the path to the directory of svg files
      * @param svgPath path to the directory of svg files
      */
     async setSvgPath(svgPath) {
         IconsSetService.setSvgPath(svgPath);
+        return Promise.resolve();
     }
     async updateIcon() {
-        if (!this.name)
+        if (this.name === '')
             return Promise.resolve();
         if (isIconFormatIsBase64(this.name)) {
             this.svgHTML = this.convertBase64ToSvg();
@@ -39,7 +37,7 @@ export class MdsIcon {
         this.svgHTML = await IconsSetService.fetchSvg(this.name);
     }
     render() {
-        return (h(Host, { key: '09a854becde623daa3329e9160b05b57a35aaf4b' }, this.svgHTML && h("i", { key: 'f5f6e19b5259418ae88b53cc2be957c858bb47c7', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
+        return (h(Host, { key: '8d95b94dbe7f22e136567cb681e44479f5c1be7a' }, this.svgHTML && h("i", { key: 'e9808177023e9521abf570b85302b65e43f9e0d8', "aria-hidden": "true", class: "icon", part: "svg", innerHTML: this.svgHTML })));
     }
     static get is() { return "mds-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/mds-icon/services/icons-set.service.js CHANGED Viewed

@@ -1,5 +1,10 @@
 import { get, set, del } from "idb-keyval";
 import { MdsIconSet } from "../meta/icon-set";
+// Shared, cross-realm key for the configured SVG base path. Stencil emits several bundled
+// copies of this singleton (lazy chunks, the esm/esm-es5 variants, dist/components, and the
+// public `services` entry); `Symbol.for` returns the same symbol in every copy, so storing
+// the path under it on `globalThis` gives them all one source of truth.
+const SVG_PATH_GLOBAL = Symbol.for('@maggioli-design-system/magma:mdsIconSvgPath');
 class IconsSetController {
     constructor() {
         this._svgPathKey = 'mdsIconSvgPath';
@@ -41,6 +46,20 @@ class IconsSetController {
         };
         this.setUpListener();
     }
+    // Backed by `globalThis` (see SVG_PATH_GLOBAL) rather than an instance field, so that every
+    // bundled copy of this singleton reads/writes the same path and stays in sync regardless of
+    // how the consumer imports the service. No sessionStorage involved.
+    get _svgPath() {
+        var _a;
+        if (typeof globalThis === 'undefined')
+            return '';
+        return (_a = globalThis[SVG_PATH_GLOBAL]) !== null && _a !== void 0 ? _a : '';
+    }
+    set _svgPath(value) {
+        if (typeof globalThis === 'undefined')
+            return;
+        globalThis[SVG_PATH_GLOBAL] = value;
+    }
     addIconSet(name, path, resolveIconName) {
         let resolveFunction = resolveIconName;
         const existingSet = this._iconsSets.get(name);
@@ -111,7 +130,20 @@ class IconsSetController {
                 throw Error('Cant find svgPath, ensure you set it');
             }
             if (!this._svgPath) {
-                this.setSvgPath((_a = window.sessionStorage.getItem(IconsSetService._svgPathKey)) !== null && _a !== void 0 ? _a : '');
+                // Optional, backward-compatible fallback. Some browsers/contexts block or throw
+                // on sessionStorage (incognito, sandboxed iframes, storage partitioning): treat
+                // that as "no path from storage" instead of aborting the fetch, and rely on a
+                // programmatic IconsSetService.setSvgPath() call instead.
+                let storedSvgPath = '';
+                try {
+                    storedSvgPath = (_a = window.sessionStorage.getItem(IconsSetService._svgPathKey)) !== null && _a !== void 0 ? _a : '';
+                }
+                catch (_b) {
+                    /* sessionStorage unavailable — ignore */
+                }
+                if (storedSvgPath) {
+                    this.setSvgPath(storedSvgPath);
+                }
             }
             const src = this._svgPath && !name.startsWith('http') ? this._svgPath.concat(name, '.svg') : name;
             const lsCache = await this.isCacheAvailable(src);

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

@@ -65,7 +65,7 @@ export class MdsImg {
             return imageConsumptionData;
         };
         this.autoAltName = () => {
-            if (this.src) {
+            if (this.src !== '') {
                 const index = this.src.lastIndexOf('/') + 1;
                 return this.src.substring(index);
             }
@@ -74,7 +74,13 @@ export class MdsImg {
         this.setAriaAttributes = () => {
             setAttributeIfEmpty(this.host, 'aria-label', this.alt);
         };
+        this.handleConsumptionLoadClick = () => {
+            this.imageConsumptionLoaded = true;
+        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -88,11 +94,11 @@ export class MdsImg {
         var _a;
         this.consumptionMode =
             (_a = localStorage.getItem('mdsPrefConsumption')) !== null && _a !== void 0 ? _a : 'high';
-        if (this.srcsetConsumption) {
+        if (this.srcsetConsumption !== undefined && this.srcsetConsumption !== '') {
             this.srcsetConsumptionData = this.formatConsumptionData(this.srcsetConsumption);
         }
         this.image = this.host.querySelector('img');
-        if (!this.alt) {
+        if (this.alt === '') {
             this.alt = this.autoAltName();
         }
     }
@@ -109,9 +115,7 @@ export class MdsImg {
         }
         if (this.srcsetConsumptionData) {
             if (this.consumptionMode === 'low') {
-                return (h(Host, { "aria-label": this.alt, role: "img", onClick: () => {
-                        this.imageConsumptionLoaded = true;
-                    } }, h("div", { class: "contrast-area-50" }), !this.imageConsumptionLoaded ? (h("div", { "aria-hidden": "true", class: "alt-text-container alt-text-container--default-aspect-ratio" }, h("mds-icon", { class: "icon", name: miBaselinePanorama }), h("mds-text", { class: "alt-text", typography: "h6" }, h("i", null, this.alt)), h("mds-button", { "aria-hidden": "true", role: "none", class: "click-to-load", tabIndex: -1, variant: "light", tone: "outline" }, this.t.get('clickToLoad')))) : (h("img", { alt: this.alt, "aria-hidden": "true", height: this.height, loading: this.loading, onError: this.onError, onLoad: this.onSuccess, part: "media", sizes: this.sizes, src: (_a = this.srcsetConsumptionData[this.consumptionMode]) !== null && _a !== void 0 ? _a : this.src, srcset: this.srcset, width: this.width }))));
+                return (h(Host, { "aria-label": this.alt, role: "img", onClick: this.handleConsumptionLoadClick }, h("div", { class: "contrast-area-50" }), !this.imageConsumptionLoaded ? (h("div", { "aria-hidden": "true", class: "alt-text-container alt-text-container--default-aspect-ratio" }, h("mds-icon", { class: "icon", name: miBaselinePanorama }), h("mds-text", { class: "alt-text", typography: "h6" }, h("i", null, this.alt)), h("mds-button", { "aria-hidden": "true", role: "none", class: "click-to-load", tabIndex: -1, variant: "light", tone: "outline" }, this.t.get('clickToLoad')))) : (h("img", { alt: this.alt, "aria-hidden": "true", height: this.height, loading: this.loading, onError: this.onError, onLoad: this.onSuccess, part: "media", sizes: this.sizes, src: (_a = this.srcsetConsumptionData[this.consumptionMode]) !== null && _a !== void 0 ? _a : this.src, srcset: this.srcset, width: this.width }))));
             }
             return (h(Host, { "aria-label": this.alt, role: "img" }, h("div", { class: "contrast-area-50" }), h("img", { alt: this.alt, "aria-hidden": "true", height: this.height, loading: this.loading, onError: this.onError, onLoad: this.onSuccess, part: "media", sizes: this.sizes, src: (_b = this.srcsetConsumptionData[this.consumptionMode]) !== null && _b !== void 0 ? _b : this.src, srcset: this.srcset, width: this.width })));
         }
@@ -417,7 +421,7 @@ export class MdsImg {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }