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

@maggioli-design-system/magma 2.0.0-beta.2 → 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 (1150) hide show

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

@@ -52,6 +52,8 @@ mds-text {
   --mds-file-preview-icon-color: rgb(var(--tone-neutral-04, 218 218 218));
   --mds-file-preview-color: rgb(var(--tone-neutral-04, 218 218 218));
   --mds-file-preview-icon-bacground: rgb(var(--tone-neutral-10, 60 60 60));
+  --mds-file-transition-duration: var(--duration-200, 200ms);
+  --private-file-transition-duration: var(--mds-file-transition-duration);
   --private-icon-download-offset: 10%;
   @apply focus-bounce;
@@ -65,7 +67,7 @@ mds-text {
   cursor: pointer;
   display: inline-flex;
   overflow: hidden;
-  transition-duration: var(--duration-200, 200ms);
+  transition-duration: var(--private-file-transition-duration);
   transition-property: box-shadow, outline, outline-offset;
   transition-timing-function: var(--ease-out);
   width: 100%;
@@ -257,26 +259,31 @@ mds-text {
   --mds-file-preview-icon-bacground: rgb(var(--label-aqua-10, 2 65 76));
 }
-: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). */
-  .preview {
-    transition-duration: 0s;
-  }
+:host([pref-animation='reduce']) {
+  --private-file-transition-duration: 0s;
 }
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    transition-duration: 0s;
-    .preview {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-file-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'])) {
   box-shadow: var(--shadow-outline);
   &:host(:hover) {
@@ -285,8 +292,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])) {
     box-shadow: var(--shadow-outline);
     &:host(:hover) {
@@ -295,7 +302,12 @@ mds-text {
   }
 }
-: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']) {
   background-color: rgb(var(--tone-neutral, 0 0 0));
   box-shadow: var(--shadow-outline-50);
   color: rgb(var(--tone-neutral-01, 255 255 255));
@@ -306,8 +318,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])) {
     background-color: rgb(var(--tone-neutral, 0 0 0));
     box-shadow: var(--shadow-outline-50);
     color: rgb(var(--tone-neutral-01, 255 255 255));

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

@@ -4,6 +4,7 @@ import { getFormatsVariant, getName, getSuffix, getExtensionInfos } from "../../
 import miBaselineFileDownloadDone from "@icon/mi/baseline/file-download-done.svg";
 import miOutlineFileDownload from "@icon/mi/outline/file-download.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";
@@ -23,9 +24,9 @@ export class MdsFile {
         });
         this.wasDownloaded = false;
         /**
-         * Sets if the download icon must be shown or not
+         * Hides the download icon
          */
-        this.showDownloadedIcon = true;
+        this.hideDownloadedIcon = false;
         this.handleOnClick = () => {
             var _a;
             const { format, description } = getExtensionInfos(this.filename, this.suffix);
@@ -51,6 +52,27 @@ export class MdsFile {
     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;
+        });
+    }
+    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.checkWasDownloaded();
         this.t.lang(this.host);
@@ -64,7 +86,7 @@ export class MdsFile {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'c0e9cad18f3aece026683f60c792f7f9cb72fe6d', tabindex: "0", onClick: this.handleOnClick }, h("div", { key: '0549f258474a3bfbb2ce14e425768dccb38a1304', class: "preview" }, this.preview !== undefined ? (h("div", { class: "image-preview", style: { backgroundImage: `url(${this.preview})` } })) : (h("mds-icon", { class: "icon-preview", name: getFormatsVariant(this.filename, this.suffix).icon })), h("div", { key: '6af5acdd202cf3f2c372dae43f7410c021436f8b', class: "download-icon" }, h("mds-icon", { key: 'eb9ca7ad12fe39531da1e765f8a176c84ccd5cbc', name: miOutlineFileDownload }))), h("div", { key: '59091a86effee53feba1f3886d91a0fbcc963ad8', class: "info" }, h("div", { key: 'efdac36e055c89999a2055e344bdd2ead3d4a63b', class: "filename", title: this.filename }, h("mds-text", { key: 'e702e1aad1d32052947b5a915d4dcd4c6e7ba8bc', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && (h("mds-text", { key: '83d4b4320310a88bcc7ae8bcec8e5c149de637ba', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix)))), h("div", { key: 'ed75683122f0612e5e5d0ae7853be9c53da832f1', class: "detail" }, getSuffix(this.filename, this.suffix) && (h("mds-badge", { key: '46be9c88c56795caf101953fe2faf4202a9800aa', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix))), h("mds-text", { key: '9dd1b4541bddb18f74bcc958697d6ebf22b33f6d', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultDescription()) }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultDescription())))), this.wasDownloaded && this.showDownloadedIcon && (h("div", { key: '72b97352184cc5e7300b9bcc2577db8817465554', class: "indicator" }, h("i", { key: '40968874d424bf044ba5627550550f09eaba43ed', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.t.get('alreadyDownloaded') })))));
+        return (h(Host, { key: '711fefbaa2906d91c9d0383310bf312c52df078b', tabindex: "0", onClick: this.handleOnClick, "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '8d28d65986c17add1ca6368ccf2b5a10e58058d4', class: "preview" }, this.preview !== undefined ? (h("div", { class: "image-preview", style: { backgroundImage: `url(${this.preview})` } })) : (h("mds-icon", { class: "icon-preview", name: getFormatsVariant(this.filename, this.suffix).icon })), h("div", { key: '7fbaeada2247cea64aff5b21714dc5ef540229de', class: "download-icon" }, h("mds-icon", { key: 'b86c2349ced351a6d86f43e6e3a51cd5f9729254', name: miOutlineFileDownload }))), h("div", { key: '9749f541e33c934d8d4beb9a92e1238f8b1146cc', class: "info" }, h("div", { key: 'd16f79e79a544bbab2bd02d9ef130654c5737f78', class: "filename", title: this.filename }, h("mds-text", { key: 'fb91eeb270e446cd871b97c6a8048cd0e7209ca6', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && (h("mds-text", { key: '6d3f3e6d6def65dbf20ba578f2ba7ccd7701ee3e', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix)))), h("div", { key: 'dea8f443f6c3b5fb286689bf6899ac63ca6d7cdc', class: "detail" }, getSuffix(this.filename, this.suffix) && (h("mds-badge", { key: '7d943721238ef3f1fe159ba29aabdd0a15ed5dad', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix))), h("mds-text", { key: '876049351686a33037a3c621dbcd4d7c414478d5', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultDescription()) }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultDescription())))), this.wasDownloaded && !this.hideDownloadedIcon && (h("div", { key: '2bec5d1651a5819b5bce22740fc9163c70f9f388', class: "indicator" }, h("i", { key: 'e3311e52eda56c0eec42fdfd0b6ea84016c2ecd3', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.t.get('alreadyDownloaded') })))));
     }
     static get is() { return "mds-file"; }
     static get encapsulation() { return "shadow"; }
@@ -163,7 +185,7 @@ export class MdsFile {
                 "reflect": false,
                 "attribute": "preview"
             },
-            "showDownloadedIcon": {
+            "hideDownloadedIcon": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -175,13 +197,13 @@ export class MdsFile {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets if the download icon must be shown or not"
+                    "text": "Hides the download icon"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-downloaded-icon",
-                "defaultValue": "true"
+                "attribute": "hide-downloaded-icon",
+                "defaultValue": "false"
             },
             "format": {
                 "type": "string",
@@ -206,6 +228,10 @@ export class MdsFile {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {},
             "wasDownloaded": {}
         };

package/dist/collection/components/mds-file/test/mds-file.stories.js CHANGED Viewed

@@ -13,9 +13,9 @@ export default {
             type: { name: 'string' },
             description: 'Sets a label which is shown when the file is downloaded',
         },
-        'show-downloaded-icon': {
+        'hide-downloaded-icon': {
             type: { name: 'boolean' },
-            description: 'Sets if shows an icon when the file is downloaded',
+            description: 'Hides the icon shown when the file is downloaded',
         },
         filename: {
             type: { name: 'string' },

package/dist/collection/components/mds-file-preview/mds-file-preview.css CHANGED Viewed

@@ -58,6 +58,8 @@ mds-text {
   --mds-file-preview-color: rgb(var(--tone-neutral-03, 233 233 233));
   --mds-file-preview-icon-background: inherit;
   --mds-file-preview-icon-color: var(--mds-file-preview-color, rgb(var(--tone-neutral-03, 233 233 233)));
+  --mds-file-preview-transition-duration: 0s;
+  --private-file-preview-transition-duration: var(--mds-file-preview-transition-duration);
   align-items: stretch;
   background-color: var(--mds-file-preview-background-color, rgb(var(--tone-neutral, 0 0 0)));
@@ -69,6 +71,7 @@ mds-text {
   justify-content: stretch;
   overflow: hidden;
   position: relative;
+  transition-duration: var(--private-file-preview-transition-duration);
 }
 .card {
@@ -82,14 +85,14 @@ mds-text {
 }
 .preview {
-  @apply aspect-square;
+  aspect-ratio: var(--aspect-square, 1/1);
   background-color: var(--mds-file-preview-icon-background, inherit);
   border-radius: calc(var(--mds-file-preview-border-radius, var(--radius-lg, 16px)) - --spacing(200));
   box-sizing: border-box;
   color: var(--mds-file-preview-color, rgb(var(--tone-neutral-03, 233 233 233)));
   corner-shape: inherit;
   fill: var(--mds-file-preview-icon-color, var(--mds-file-preview-color, rgb(var(--tone-neutral-03, 233 233 233))));
+  transition-duration: inherit;
   width: 100%;
 }
@@ -301,9 +304,11 @@ mds-text {
   --mds-file-preview-color: rgb(var(--label-yellow-03, 251 224 142));
 }
-/* contrast + variant */
+/* contrast + variant. The component reflects the resolved contrast mode from
+ * <html> onto its host as pref-contrast (see subscribePreference); `more` is
+ * explicit, `system` and no controller follow the OS via @media. Cross-browser. */
-:host-context(:root.pref-contrast-more) {
+:host([pref-contrast='more']) {
   &:host([variant='primary'][message]) {
     --mds-file-preview-icon-background: rgb(var(--variant-primary-10, 0 49 142));
     --mds-file-preview-icon-color: rgb(var(--variant-primary-02, 230 239 255));
@@ -396,8 +401,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])) {
     &:host([variant='primary'][message]) {
       --mds-file-preview-icon-background: rgb(var(--variant-primary-10, 0 49 142));
       --mds-file-preview-icon-color: rgb(var(--variant-primary-02, 230 239 255));
@@ -490,42 +495,55 @@ mds-text {
   }
 }
-:host-context(:root.pref-animation-reduce),
-:host-context(:root.pref-animation-reduce) .preview {
-  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-file-preview-transition-duration: 0s;
+}
-    .preview {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-file-preview-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'])) {
   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])) {
     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']) {
   --mds-file-preview-color: rgb(var(--tone-neutral-01, 255 255 255));
   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])) {
     --mds-file-preview-color: rgb(var(--tone-neutral-01, 255 255 255));
     box-shadow: var(--shadow-outline-50);

package/dist/collection/components/mds-file-preview/mds-file-preview.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { clsx } from "clsx";
 import { filesize } from "filesize";
 import { getFormatsVariant, getSuffix, getExtensionInfos } from "../../common/file";
 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";
@@ -46,6 +47,27 @@ export class MdsFilePreview {
     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;
+        });
+    }
+    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.t.lang(this.host);
         this.format = getExtensionInfos(this.filename, this.suffix).format;
@@ -69,12 +91,12 @@ export class MdsFilePreview {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '4191a2f8b58aa3fa6f116ecc845c3298643f405c' }, this.deletable && (h("mds-button", { key: 'a3996c3793c86f913286fc416a2f18c251a629e3', title: this.t.get('remove'), class: "action-delete", icon: miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent })), h("div", { key: 'deb2fcc20862f851d28db79b2cef37c43fb4cc63', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src !== undefined &&
+        return (h(Host, { key: '93a1ad63edfbf8d92f1b3e5f18c5e8e6e8fe73f3', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.deletable && (h("mds-button", { key: '320c2c2a4d48a17162225bdf6da4e4ebf6fdd375', title: this.t.get('remove'), class: "action-delete", icon: miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent })), h("div", { key: '9622502d7bc19319e95a0aaa5d41ade244163be8', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src !== undefined &&
             this.src !== '' &&
             (this.message === undefined || this.message === '') &&
             getExtensionInfos(this.filename, this.suffix).preview ? (h("mds-img", { src: this.src, class: "preview preview--image", "aspect-ratio": "1/1" })) : (h("div", { class: clsx('preview', this.message === undefined || this.message === ''
                 ? 'preview--icon'
-                : 'preview--status') }, this.icon !== '' ? (h("mds-icon", { class: "icon", name: this.icon })) : (h("mds-icon", { class: "icon", name: getFormatsVariant(this.filename, this.suffix).icon })), this.message && (h("mds-text", { class: "message", typography: "caption", variant: "info" }, this.message)))), h("mds-text", { key: '9563cde9752cb3ff7778e1971bd8eff1b95edebf', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), h("footer", { key: '824bde798749685fe9d989859f16e5fe96635ea8', class: clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && (h("mds-text", { key: 'e709b610d25e8d235b15fd8c47bc25982951f9fa', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, filesize(Number(this.filesize), { standard: 'jedec' }))), this.filesize && this.filesize !== Number(this.filesize).toString() && (h("mds-text", { key: 'd41bb090c1676b67014d11e478f7bc8975ef6b1f', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize)), getSuffix(this.filename, this.suffix) && (h("mds-badge", { key: 'd0cdb8b71431114d023e9df7e4cc9c55841b452d', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultKeyDescription()) }, getSuffix(this.filename, this.suffix))), (this.filesize === undefined || this.filesize === '') && (h("mds-text", { key: 'e4b78b52eba52f2cc6632539b56888774d005236', class: "description", truncate: "word", typography: "caption", variant: "info", title: (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultKeyDescription()) }, (_c = this.description) !== null && _c !== void 0 ? _c : this.t.get(this.getDefaultKeyDescription())))))));
+                : 'preview--status') }, this.icon !== '' ? (h("mds-icon", { class: "icon", name: this.icon })) : (h("mds-icon", { class: "icon", name: getFormatsVariant(this.filename, this.suffix).icon })), this.message && (h("mds-text", { class: "message", typography: "caption", variant: "info" }, this.message)))), h("mds-text", { key: 'cb9ff19be44c06555a8c10c1f453567c8b35de6c', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), h("footer", { key: 'df360d40c6d7e00fb3a0ba71fdbf578ee43c47c8', class: clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && (h("mds-text", { key: '682dc61628091d96fba5bb5273731613fb21ad19', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, filesize(Number(this.filesize), { standard: 'jedec' }))), this.filesize && this.filesize !== Number(this.filesize).toString() && (h("mds-text", { key: 'd5fbe0975bc9ad733fb68e83c3d2c4f926528655', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize)), getSuffix(this.filename, this.suffix) && (h("mds-badge", { key: 'bf3a948f2d6d8062c1ea105f67d1533c9e5d0f39', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultKeyDescription()) }, getSuffix(this.filename, this.suffix))), (this.filesize === undefined || this.filesize === '') && (h("mds-text", { key: '8c916ed7bcf4d568d45b7ea41a90946b2c85f339', class: "description", truncate: "word", typography: "caption", variant: "info", title: (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultKeyDescription()) }, (_c = this.description) !== null && _c !== void 0 ? _c : this.t.get(this.getDefaultKeyDescription())))))));
     }
     static get is() { return "mds-file-preview"; }
     static get encapsulation() { return "shadow"; }
@@ -344,6 +366,10 @@ export class MdsFilePreview {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {}
         };
     }

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

@@ -93,6 +93,8 @@ mds-text {
   --mds-filter-items-padding: --spacing(200);
   --mds-filter-items-radius: var(--radius-full, 1000px);
   --mds-filter-items-scroll-behavior: smooth;
+  --mds-filter-items-transition-duration: var(--duration-300, 300ms);
+  --private-filter-items-transition-duration: var(--mds-filter-items-transition-duration);
   --mds-filter-label-padding: 0 --spacing(600);
   --mds-filter-wrapper-shadow-color: rgb(var(--tone-neutral-06, 158 158 158));
   --mds-filter-wrapper-shadow: 0 0 0 2px var(--mds-filter-wrapper-shadow-color, rgb(var(--tone-neutral-06, 158 158 158))) inset;
@@ -103,6 +105,17 @@ mds-text {
   grid-auto-rows: min-content;
 }
+/* Animation preference: scroll-behavior is a keyword and cannot be derived from
+ * is handled here, cross-browser, via @media (it follows the OS preference).
+ * The .items transition-duration is reduced separately in
+ * css/mds-filter-pref-animation.css. */
+@media (prefers-reduced-motion: reduce) {
+  :host {
+    --mds-filter-items-scroll-behavior: auto;
+  }
+}
 .items {
   @apply hide-scrollbar;
@@ -115,7 +128,7 @@ mds-text {
   position: relative;
   scroll-behavior: var(--mds-filter-items-scroll-behavior, smooth);
   scroll-snap-type: x mandatory;
-  transition-duration: var(--duration-300, 300ms);
+  transition-duration: var(--private-filter-items-transition-duration);
   transition-property: background-color;
   transition-timing-function: var(--ease-in-out-expo, cubic-bezier(1, 0, 0, 1));
 }
@@ -174,39 +187,38 @@ mds-text {
   transform: scale(1);
 }
-:host-context(:root.pref-animation-reduce) {
-  --mds-filter-items-scroll-behavior: auto;
+/* 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). */
-  transition-duration: 0s;
-  .reset-button,
-  .items {
-    transition-duration: 0s;
-  }
+:host([pref-animation='reduce']) {
+  --private-filter-items-transition-duration: 0s;
 }
-@media (prefers-reduced-motion) {
-  :host-context(:root.pref-animation-system),
-  :host-context(:root:not([data-magma-pref])) {
-    --mds-filter-items-scroll-behavior: auto;
-    transition-duration: 0s;
-    .reset-button,
-    .items {
-      transition-duration: 0s;
-    }
+@media (prefers-reduced-motion: reduce) {
+  :host([pref-animation='system']),
+  :host(:not([pref-animation])) {
+    --private-filter-items-transition-duration: 0s;
   }
 }
-:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .items {
+/* 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'])) .items {
   --mds-filter-items-background-active: rgb(var(--tone-neutral-10, 60 60 60));
   --mds-filter-items-background: rgb(var(--tone-neutral-09, 76 76 76));
 }
 @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])) {
     .items {
       --mds-filter-items-background-active: rgb(var(--tone-neutral-10, 60 60 60));
       --mds-filter-items-background: rgb(var(--tone-neutral-09, 76 76 76));
@@ -214,7 +226,12 @@ mds-text {
   }
 }
-: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-filter-items-background-active: rgb(var(--tone-neutral-09, 76 76 76));
   --mds-filter-items-background: rgb(var(--tone-neutral-10, 60 60 60));
   --mds-filter-wrapper-shadow-opacity: 30%;
@@ -223,8 +240,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])) {
     --mds-filter-items-background-active: rgb(var(--tone-neutral-09, 76 76 76));
     --mds-filter-items-background: rgb(var(--tone-neutral-10, 60 60 60));
     --mds-filter-wrapper-shadow-opacity: 30%;

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

@@ -1,5 +1,6 @@
 import clsx from "clsx";
 import { Host, h, } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 import miBaselineClose from "@icon/mi/baseline/close.svg";
 /**
  * @slot - Add `mds-filter-item` element/s.
@@ -56,6 +57,27 @@ export class MdsFilter {
             return list.toString();
         };
     }
+    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() {
         const items = this.queryItems();
         items.forEach((item, key) => {
@@ -95,7 +117,7 @@ export class MdsFilter {
         this.changedEvent.emit({ children: items, value: this.itemsValues() });
     }
     render() {
-        return (h(Host, { key: '1dd060145cd00afd5bc869aa0ac39a375e31c45a', "aria-label": this.label, role: "menubar" }, this.label && (h("mds-text", { key: 'bc555868ff4c6599bbd5cbb0b075649b5ab0cca1', class: "label", typography: "label" }, this.label)), h("div", { key: '6dad87b041b6553711bc6b7d16e52bc8effabbcc', class: "items-wrapper" }, h("div", { key: 'd0d888532d201e44c12b273ced3c0106f6fc0641', class: clsx('items', this.active && 'active') }, h("slot", { key: 'd2919aba63eb86e5caa88b955a5eeb405daeccb8' }), h("div", { key: '9c70279b42e365d5f896277ed04add845b323dfc', class: clsx('reset', this.active && 'reset--opened') }, h("mds-filter-item", { key: '85e033c578dd050b5bf0a6407fd3a4836244bb17', selected: this.active, disabled: !this.active && this.reset, class: clsx('reset-button', this.active && 'reset-button-opened'), icon: miBaselineClose, onClick: this.resetItems }))))));
+        return (h(Host, { key: 'f0478377115975741341bbe81fe35b376bc6d97a', "aria-label": this.label, role: "menubar", "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.label && (h("mds-text", { key: '8bcfb91192f373ab2a83b1a0a0292dcea1464a30', class: "label", typography: "label" }, this.label)), h("div", { key: 'ea2371d425dbf8f2df02d532d6d67b2f6f140b9b', class: "items-wrapper" }, h("div", { key: '21244c57c33d3117f29a4cbc7d91197ee8e1537c', class: clsx('items', this.active && 'active') }, h("slot", { key: '5c7a609acf560f1845a6e2429bfb2502cd0dd27d' }), h("div", { key: '1540ff802c8faa39e468f8171e48f24942296e7a', class: clsx('reset', this.active && 'reset--opened') }, h("mds-filter-item", { key: '7daef3e52613b52077fb9960bcb90e30ebe063b7', selected: this.active, disabled: !this.active && this.reset, class: clsx('reset-button', this.active && 'reset-button-opened'), icon: miBaselineClose, onClick: this.resetItems }))))));
     }
     static get is() { return "mds-filter"; }
     static get encapsulation() { return "shadow"; }
@@ -191,6 +213,10 @@ export class MdsFilter {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "active": {},
             "itemsSelected": {}
         };