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

@@ -92,9 +92,8 @@ mds-spinner {
 .spinner,
 .preview {
-  @apply aspect-square;
   align-items: center;
+  aspect-ratio: var(--aspect-square, 1/1);
   display: inline-flex;
   justify-content: center;
 }
@@ -138,8 +137,7 @@ mds-spinner {
 }
 ::slotted([slot='action']) {
-  @apply aspect-square;
+  aspect-ratio: var(--aspect-square, 1/1);
   height: auto;
   width: --spacing(1100);
 }
@@ -157,7 +155,12 @@ mds-spinner {
   min-width: 0px;
 }
-: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-entity-background: rgb(var(--tone-neutral, 0 0 0));
   --mds-entity-color: rgb(var(--tone-neutral-01, 255 255 255));
   --mds-entity-detail-color: rgb(var(--tone-neutral-02, 244 244 244));
@@ -167,8 +170,8 @@ mds-spinner {
 }
 @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-entity-background: rgb(var(--tone-neutral, 0 0 0));
     --mds-entity-color: rgb(var(--tone-neutral-01, 255 255 255));
     --mds-entity-detail-color: rgb(var(--tone-neutral-02, 244 244 244));
@@ -178,13 +181,19 @@ mds-spinner {
   }
 }
-: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-entity-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-entity-shadow: var(--shadow-outline);
   }
 }

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

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
+import { subscribePreference } from "../../common/preference";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot action - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  * @slot detail - Add `HTML elements` or `components` to this slot.
  * @part spinner - The spinner element
@@ -23,12 +24,29 @@ export class MdsEntity {
         }
         return hasAvatar;
     }
+    connectedCallback() {
+        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;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefTheme) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefThemeScheme) === null || _c === void 0 ? void 0 : _c.call(this);
+    }
     componentWillLoad() {
         this.details = this.hostElement.querySelector(':scope > [slot="detail"]') !== null;
         this.actions = this.hostElement.querySelector(':scope > [slot="action"]') !== null;
     }
     render() {
-        return (h(Host, { key: '461f720cf3434142c646976f3b40286461b27501' }, h("div", { key: '6b2833072a153008a14b3784fd55809f0895f434', class: "spinner", part: "spinner" }, h("mds-spinner", { key: '9e4568cc3575fc2316d8087d98370417e0146801', running: true })), this.checkAvatar() && (h("mds-avatar", { key: 'bf8f09dc25c4069ae77261972799dcc2466bf02b', class: "preview", icon: this.icon, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant, part: "avatar" })), h("div", { key: '5d459817324411d01680d5ef868a94913575160e', class: "infos" }, h("slot", { key: 'a2f905640cfbf6c5112c655176a270f73f703bb8' }), this.details && (h("div", { key: 'bd9c202b4d331da22aeb55a0ae5cecd50c489539', class: "details" }, h("slot", { key: '38509d5cc437e5f411a82692d4c0f6ef3c2002e6', name: "detail" })))), this.actions && (h("div", { key: '1b24b3e17154d0a5b0416b24df869333092875a2', class: "actions" }, h("slot", { key: '9d6023257453c9a00343bd632e95cdb6a048ae08', name: "action" })))));
+        return (h(Host, { key: '139dd19eb828b43e18cb6cb2e0c10e083a93a48e', "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: 'eeced8dee5d69bdc62ce1dd2af1925b1fa6f5707', class: "spinner", part: "spinner" }, h("mds-spinner", { key: '7eca6697f98eb18cae55ea52f5a9f8df67330394', running: true })), this.checkAvatar() && (h("mds-avatar", { key: '01b1c08ed63daab0a5ed70ccb52961039859ca56', class: "preview", icon: this.icon, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant, part: "avatar" })), h("div", { key: '34e8db09fe1a50032dfd9965cb5e50a616b92619', class: "infos" }, h("slot", { key: '4913849505196125d2a018a5586662dfa839459d' }), this.details && (h("div", { key: '671529b70f02cbb7e9847575d8c739fd2065d72f', class: "details" }, h("slot", { key: 'f8bcdaf14d2566223c463dd77730f1aab3a7f514', name: "detail" })))), this.actions && (h("div", { key: 'a432cec212f9c8fdd9accb825d02efc70ef31f91', class: "actions" }, h("slot", { key: 'dbcc7f37d362f84eb95d5dfaeae0d61c3c083303', name: "action" })))));
     }
     static get is() { return "mds-entity"; }
     static get encapsulation() { return "shadow"; }
@@ -174,5 +192,12 @@ export class MdsEntity {
             }
         };
     }
+    static get states() {
+        return {
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {}
+        };
+    }
     static get elementRef() { return "hostElement"; }
 }

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);
@@ -45,9 +46,33 @@ export class MdsFile {
         };
         this.getDefaultDescription = () => getExtensionInfos(this.filename, this.suffix).description;
     }
+    /**
+     * 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;
+        });
+    }
+    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);
@@ -61,7 +86,7 @@ export class MdsFile {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'fc07d6520462d6877b2ce80c20a635a3db76562f', tabindex: "0", onClick: this.handleOnClick }, h("div", { key: 'a1a065c686ef011224c7648d0101d3960f23e738', 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: '3a4741e0b175400d4954fd1761da8b2d1bab6cb9', class: "download-icon" }, h("mds-icon", { key: '48dc1b1b5af3b9989ccc75be86e3a7beb24bc440', name: miOutlineFileDownload }))), h("div", { key: 'fc001287ab920f2fae34b5bcfae4c95541fa451a', class: "info" }, h("div", { key: '174807172e1a46f8e64752698f1604fd28549b9c', class: "filename", title: this.filename }, h("mds-text", { key: '9750f49569fee6b3f419c02776921ca47663f590', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && (h("mds-text", { key: '9bab2d991fdf0a6a37cc68555386a2d13c8b631f', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix)))), h("div", { key: 'f06aff476d27046ef4558c9ea65ee00d10fc740d', class: "detail" }, getSuffix(this.filename, this.suffix) && (h("mds-badge", { key: 'f226817fc6681ce5f770475d553e88ad3cd90966', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix))), h("mds-text", { key: '2856f34ab2c0bb46d77b74cb54d1d79131616457', 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: '8016b84257c95b7a9505f10e907c801f3561f993', class: "indicator" }, h("i", { key: '78e44bf63ab425d94508335d006c4bdfda442101', 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"; }
@@ -160,7 +185,7 @@ export class MdsFile {
                 "reflect": false,
                 "attribute": "preview"
             },
-            "showDownloadedIcon": {
+            "hideDownloadedIcon": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -172,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",
@@ -203,6 +228,10 @@ export class MdsFile {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {},
             "wasDownloaded": {}
         };
@@ -247,7 +276,7 @@ export class MdsFile {
                     "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-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";
@@ -40,9 +41,33 @@ export class MdsFilePreview {
             });
         };
     }
+    /**
+     * 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;
+        });
+    }
+    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;
@@ -66,7 +91,12 @@ export class MdsFilePreview {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '11eabf1edcf82c9ec5f0219dcb8e7346de419f8b' }, this.deletable && (h("mds-button", { key: '33c9fccce91b022ce5df51d59b00afd56630c7eb', title: this.t.get('remove'), class: "action-delete", icon: miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent })), h("div", { key: 'a6c55bb3d1b5b5bf638a1ff6b30aa42595ef0ce2', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src && !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 ? '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: '7e47a22e9dc9aa7ff9d4deede3d4b0d4ef041d2d', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), h("footer", { key: '8746dac0d12f389f8e6f3b541c6f7553a0ae1ca5', class: clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && (h("mds-text", { key: '995af9155e0c90696915fdad7312dbd3322dc457', 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: 'f261b9db7f2b63396555f0cedc0e3d10cee4c246', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize)), getSuffix(this.filename, this.suffix) && (h("mds-badge", { key: 'f20723a233b1b1c6f3bc05a18e70d3c37b94acb8', 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 && (h("mds-text", { key: '99892ace53a5709df50e01780f84619e5996b744', 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())))))));
+        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: '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"; }
@@ -336,6 +366,10 @@ export class MdsFilePreview {
     }
     static get states() {
         return {
+            "prefAnimation": {},
+            "prefContrast": {},
+            "prefTheme": {},
+            "prefThemeScheme": {},
             "language": {}
         };
     }
@@ -401,7 +435,7 @@ export class MdsFilePreview {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Updates the component's texts to the locale currently set on the host element.",
                     "tags": []
                 }
             }