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

package/dist/esm/mds-dropdown.entry.js

@@ -1,7 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
 import { K as KeyboardManager } from './keyboard-manager-BudfaWhu.js';
 import { c as cssDurationToMilliseconds } from './unit-D8eZRaSQ.js';
-import { B as Backdrop, F as FloatingController } from './floating-controller-CP3-OFb9.js';
+import { B as Backdrop, F as FloatingController } from './floating-controller-D5eXU5Mk.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 import './floating-ui.dom-8RYXTPXs.js';
 import './aria-CSCy6TMW.js';
 
@@ -10,7 +11,7 @@ var arrowSvg = `<svg width="30" height="16" viewBox="0 0 30 16" xmlns="http://ww
 </svg>
 `;
 
-const mdsDropdownCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-dropdown-arrow-background:var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0)));--mds-dropdown-backdrop-duration:.2s;--mds-dropdown-backdrop-z-index:3000;--mds-dropdown-background:rgb(var(--tone-neutral,0 0 0));--mds-dropdown-mouseover-delay:.5s;--mds-dropdown-drop-shadow-color-rgb:0 0 0;--mds-dropdown-duration:.5s;--mds-dropdown-z-index:4000;--mds-dropdown-transform-from:scale(.9) translateY(-3%);--mds-dropdown-transform-to:scale(.9) translateY(-3%)}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-dropdown-backdrop-duration{syntax:"<time>";inherits:false;initial-value:.2s}@property --mds-dropdown-backdrop-z-index{syntax:"<integer>";inherits:false;initial-value:3000}@property --mds-dropdown-mouseover-delay{syntax:"<time>";inherits:false;initial-value:.5s}@property --mds-dropdown-drop-shadow-color-rgb{syntax:"<number>+";inherits:false;initial-value:0 0 0}@property --mds-dropdown-duration{syntax:"<time>";inherits:false;initial-value:.5s}@property --mds-dropdown-z-index{syntax:"<integer>";inherits:false;initial-value:4000}@property --mds-dropdown-transform-from{syntax:"<transform-list>";inherits:false;initial-value:scale(.9)translateY(-3%)}@property --mds-dropdown-transform-to{syntax:"<transform-list>";inherits:false;initial-value:scale(.9)translateY(-3%)}:host{--mds-dropdown-arrow-background:var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0)));--mds-dropdown-backdrop-duration:.2s;--mds-dropdown-backdrop-z-index:var(--magma-backdrop-z-index,3000);--mds-dropdown-background:rgb(var(--tone-neutral,0 0 0));--mds-dropdown-drop-shadow-color-rgb:var(--tone-neutral-01,255 255 255);--mds-dropdown-drop-shadow:drop-shadow(0 10px 8px rgb(var(--mds-dropdown-drop-shadow-color-rgb,0 0 0)/.05)) drop-shadow(0 4px 3px rgb(var(--mds-dropdown-drop-shadow-color-rgb,0 0 0)/.15)) drop-shadow(0 0 1px rgb(var(--mds-dropdown-drop-shadow-color-rgb,0 0 0)/.15));--mds-dropdown-duration:.5s;--mds-dropdown-ease:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));--mds-dropdown-mouseover-delay:.5s;--mds-dropdown-transform-from:scale(.9) translateY(-3%);--mds-dropdown-transform-to:scale(1) translate(0,0);--mds-dropdown-z-index:var(--magma-dropdown-z-index,4000);background-color:var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--radius-md,12px);box-sizing:border-box;corner-shape:var(--magma-corner-shape,round);display:none;filter:var(--mds-dropdown-drop-shadow);gap:calc(var(--spacing,.0025rem)*400);opacity:0;padding:calc(var(--spacing,.0025rem)*600);pointer-events:none;position:fixed;-webkit-transform:var(--mds-dropdown-transform-from,scale(.9) translateY(-3%));transform:var(--mds-dropdown-transform-from,scale(.9) translateY(-3%));transition-behavior:allow-discrete;-webkit-transition-duration:var(--mds-dropdown-duration,.5s);transition-duration:var(--mds-dropdown-duration,.5s);transition-property:opacity,transform,transform-origin,display;-webkit-transition-timing-function:var(--mds-dropdown-ease);transition-timing-function:var(--mds-dropdown-ease);z-index:var(--mds-dropdown-z-index,4000)}:host([visible]:not([visible=false])){display:grid;opacity:1;pointer-events:auto;-webkit-transform:var(--mds-dropdown-transform-to,scale(.9) translateY(-3%));transform:var(--mds-dropdown-transform-to,scale(.9) translateY(-3%))}@starting-style{:host([visible]:not([visible=false])){opacity:0;transform:scale(0)}}:host([smooth]:not([smooth=false])){transition-property:bottom,left,opacity,right,top,transform,transform-origin}.arrow{display:flex;fill:var(--mds-dropdown-arrow-background,var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0))));pointer-events:none;position:fixed;top:calc(var(--spacing,.0025rem)*-400)}::slotted(*){position:relative;z-index:10}:host-context(:root.pref-animation-reduce){--mds-dropdown-backdrop-duration:0s;--mds-dropdown-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-dropdown-drop-shadow:drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))}:host-context(:root.pref-contrast-more){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}:host-context(:root.pref-contrast-more.pref-theme-dark){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.075)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.45)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.45))}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-dropdown-backdrop-duration:0s;--mds-dropdown-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-dropdown-drop-shadow:drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))}:host-context(:root.pref-contrast-more.pref-theme-system){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}:host-context(:root.pref-contrast-system.pref-theme-dark){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}}@media (prefers-contrast:more) and (prefers-color-scheme:dark){:host-context(:root.pref-contrast-system.pref-theme-system){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}}`;
+const mdsDropdownCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-dropdown-arrow-background:var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0)));--mds-dropdown-backdrop-duration:.2s;--mds-dropdown-backdrop-z-index:3000;--mds-dropdown-background:rgb(var(--tone-neutral,0 0 0));--mds-dropdown-mouseover-delay:.5s;--mds-dropdown-drop-shadow-color-rgb:0 0 0;--mds-dropdown-duration:.5s;--mds-dropdown-z-index:4000;--mds-dropdown-transform-from:scale(.9) translateY(-3%);--mds-dropdown-transform-to:scale(.9) translateY(-3%)}}}:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-dropdown-backdrop-duration{syntax:"<time>";inherits:false;initial-value:.2s}@property --mds-dropdown-backdrop-z-index{syntax:"<integer>";inherits:false;initial-value:3000}@property --mds-dropdown-mouseover-delay{syntax:"<time>";inherits:false;initial-value:.5s}@property --mds-dropdown-drop-shadow-color-rgb{syntax:"<number>+";inherits:false;initial-value:0 0 0}@property --mds-dropdown-duration{syntax:"<time>";inherits:false;initial-value:.5s}@property --mds-dropdown-z-index{syntax:"<integer>";inherits:false;initial-value:4000}@property --mds-dropdown-transform-from{syntax:"<transform-list>";inherits:false;initial-value:scale(.9)translateY(-3%)}@property --mds-dropdown-transform-to{syntax:"<transform-list>";inherits:false;initial-value:scale(.9)translateY(-3%)}:host{--mds-dropdown-arrow-background:var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0)));--private-dropdown-backdrop-duration:.2s;--mds-dropdown-backdrop-duration:var(--private-dropdown-backdrop-duration);--mds-dropdown-backdrop-z-index:var(--magma-backdrop-z-index,3000);--mds-dropdown-background:rgb(var(--tone-neutral,0 0 0));--mds-dropdown-drop-shadow-color-rgb:var(--tone-neutral-01,255 255 255);--mds-dropdown-drop-shadow:drop-shadow(0 10px 8px rgb(var(--mds-dropdown-drop-shadow-color-rgb,0 0 0)/.05)) drop-shadow(0 4px 3px rgb(var(--mds-dropdown-drop-shadow-color-rgb,0 0 0)/.15)) drop-shadow(0 0 1px rgb(var(--mds-dropdown-drop-shadow-color-rgb,0 0 0)/.15));--mds-dropdown-duration:.5s;--private-dropdown-duration:var(--mds-dropdown-duration,.5s);--mds-dropdown-ease:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));--mds-dropdown-mouseover-delay:.5s;--mds-dropdown-transform-from:scale(.9) translateY(-3%);--mds-dropdown-transform-to:scale(1) translate(0,0);--mds-dropdown-z-index:var(--magma-dropdown-z-index,4000);background-color:var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--radius-md,12px);box-sizing:border-box;corner-shape:var(--magma-corner-shape,round);display:none;filter:var(--mds-dropdown-drop-shadow);gap:calc(var(--spacing,.0025rem)*400);opacity:0;padding:calc(var(--spacing,.0025rem)*600);pointer-events:none;position:fixed;-webkit-transform:var(--mds-dropdown-transform-from,scale(.9) translateY(-3%));transform:var(--mds-dropdown-transform-from,scale(.9) translateY(-3%));transition-behavior:allow-discrete;-webkit-transition-duration:var(--private-dropdown-duration);transition-duration:var(--private-dropdown-duration);transition-property:opacity,transform,transform-origin,display;-webkit-transition-timing-function:var(--mds-dropdown-ease);transition-timing-function:var(--mds-dropdown-ease);z-index:var(--mds-dropdown-z-index,4000)}:host([visible]:not([visible=false])){display:grid;opacity:1;pointer-events:auto;-webkit-transform:var(--mds-dropdown-transform-to,scale(.9) translateY(-3%));transform:var(--mds-dropdown-transform-to,scale(.9) translateY(-3%))}@starting-style{:host([visible]:not([visible=false])){opacity:0;transform:scale(0)}}:host(:not([disable-smooth])),:host([disable-smooth=false]){transition-property:bottom,left,opacity,right,top,transform,transform-origin}.arrow{display:flex;fill:var(--mds-dropdown-arrow-background,var(--mds-dropdown-background,rgb(var(--tone-neutral,0 0 0))));pointer-events:none;position:fixed;top:calc(var(--spacing,.0025rem)*-400)}::slotted(*){position:relative;z-index:10}:host([pref-animation=reduce]){--private-dropdown-duration:0s;--mds-dropdown-backdrop-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-dropdown-drop-shadow:drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))}:host([pref-contrast=more]){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}:host([pref-contrast=more][pref-theme=dark]){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.075)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.45)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.45))}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-dropdown-duration:0s;--mds-dropdown-backdrop-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-dropdown-drop-shadow:drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 2px rgb(var(--tone-neutral-01,255 255 255)/.3))}:host([pref-contrast=more][pref-theme=system]){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}:host([pref-contrast=system][pref-theme=dark]){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}}@media (prefers-contrast:more) and (prefers-color-scheme:dark){:host([pref-contrast=system][pref-theme=system]){--mds-dropdown-drop-shadow:drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.05)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3)) drop-shadow(0 0 4px rgb(var(--tone-neutral-01,255 255 255)/.3))}}`;
 
 const MdsDropdown = class {
     constructor(hostRef) {
@@ -21,17 +22,17 @@ const MdsDropdown = class {
         this.km = new KeyboardManager();
         this.backdropController = new Backdrop();
         /**
-         * If set, the component will have an arrow pointing to the caller.
+         * If set, the component will not have an arrow pointing to the caller.
          */
-        this.arrow = true;
+        this.hideArrow = false;
         /**
          * Sets the distance between arrow and dropdown margins.
          */
         this.arrowPadding = 24;
         /**
-         * 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 = false;
+        this.disableAutoPlacement = false;
         /**
          * Specifies if the component has a backdrop background
          */
@@ -53,17 +54,17 @@ const MdsDropdown = class {
          */
         this.placement = 'bottom';
         /**
-         * If set, the component will be kept inside the viewport.
+         * If set, the component will not be kept inside the viewport.
          */
-        this.shift = true;
+        this.disableShift = false;
         /**
          * Sets a safe area distance between the dropdown and the viewport.
          */
         this.shiftPadding = 24;
         /**
-         * If set, the component will follow the caller smoothly, visible when the page scrolls.
+         * If set, the component will not follow the caller smoothly when the page scrolls.
          */
-        this.smooth = true;
+        this.disableSmooth = false;
         /**
          * Sets the CSS position strategy of the component.
          */
@@ -109,13 +110,13 @@ const MdsDropdown = class {
             this.host.addEventListener('mouseleave', this.handleCloseDropdown.bind(this));
         };
     }
-    arrowChanged() {
+    hideArrowChanged() {
         this.floatingController.updatePosition();
     }
     arrowPaddingChanged() {
         this.floatingController.updatePosition();
     }
-    autoPlacementChanged() {
+    disableAutoPlacementChanged() {
         this.floatingController.updatePosition();
     }
     backdropChanged(newValue) {
@@ -140,7 +141,7 @@ const MdsDropdown = class {
     placementChanged() {
         this.floatingController.updatePosition();
     }
-    shiftChanged() {
+    disableShiftChanged() {
         this.floatingController.updatePosition();
     }
     shiftPaddingChanged() {
@@ -210,26 +211,45 @@ const MdsDropdown = class {
         this.updateCSSCustomProps();
         this.targetChanged();
     }
+    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);
         this.floatingController.dismiss();
         this.backdropController.detachBackdrop();
         this.km.detachEscapeBehavior();
     }
     render() {
-        return (h(Host, { key: '38c9f3049e6a174dba9a05327d725bdcc0968692', style: {
+        return (h(Host, { key: '2e3c41bd53bb87f70425d3fd6df36ec2ab12dd4c', style: {
                 zIndex: `${this.zIndex}`,
-            } }, h("div", { key: '344784493362d917977d14c4f9c356c42c14ad4c', class: "arrow", innerHTML: arrowSvg }), h("slot", { key: 'b8a87aa98e63085aed670018e97134f3452dfedc' })));
+            }, "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '17df9d0926a2c68cd8064a44d043e96838ea4c5c', class: "arrow", innerHTML: arrowSvg }), h("slot", { key: '716255642006bdb212b9ff740e957791b3af127f' })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "arrow": [{
-                "arrowChanged": 0
+        "hideArrow": [{
+                "hideArrowChanged": 0
             }],
         "arrowPadding": [{
                 "arrowPaddingChanged": 0
             }],
-        "autoPlacement": [{
-                "autoPlacementChanged": 0
+        "disableAutoPlacement": [{
+                "disableAutoPlacementChanged": 0
             }],
         "backdrop": [{
                 "backdropChanged": 0
@@ -243,8 +263,8 @@ const MdsDropdown = class {
         "placement": [{
                 "placementChanged": 0
             }],
-        "shift": [{
-                "shiftChanged": 0
+        "disableShift": [{
+                "disableShiftChanged": 0
             }],
         "shiftPadding": [{
                 "shiftPaddingChanged": 0

package/dist/esm/mds-emoji.entry.js

@@ -6181,7 +6181,7 @@ var simiSvg = `<svg width="440" height="440" viewBox="0 0 440 440" fill="none" x
 </svg>
 `;
 
-const mdsEmojiCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-emoji-expression-follow-mouse-traits-duration:.2s;--mds-emoji-expression-follow-mouse-head-duration:.3s;--mds-emoji-expression-max-rotation:16deg;--mds-emoji-perspective:400px;--mds-emoji-offset-eyes:1px;--mds-emoji-offset-gadget:1px;--mds-emoji-offset-hands:2px;--mds-emoji-offset-head:0;--mds-emoji-offset-mouth:1px;--mds-emoji-offset-eyebrows:10px;--mds-emoji-offset-ears:0;--mds-emoji-mia-head:rgb(var(--variant-ai-08,118 44 246));--mds-emoji-mia-eyes:rgb(var(--variant-ai-03,233 220 254));--mds-emoji-mia-mouth:rgb(var(--variant-ai-06,172 126 249));--mds-emoji-mia-hands:rgb(var(--variant-ai-06,172 126 249));--mds-emoji-simi-eye:#40281b;--mds-emoji-simi-eye-light:#fff;--mds-emoji-simi-eyebrow:#feefd8;--mds-emoji-simi-gadget:#2b1c15;--mds-emoji-simi-mouth:#2b1c15;--mds-emoji-simi-nose-light:#7e695f;--mds-emoji-simi-nose:#2b1c15;--mds-emoji-simi-outline:#2b1c15;--mds-emoji-simi-skin-dark:#c3481b;--mds-emoji-simi-skin-light:#feefd8;--mds-emoji-simi-skin:#f36320;--mds-emoji-simi-mouth-teeth:#fff;--mds-emoji-simi-mouth-throat:#c3481b}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-emoji-expression-follow-mouse-traits-duration{syntax:"<time>";inherits:false;initial-value:.2s}@property --mds-emoji-expression-follow-mouse-head-duration{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-emoji-expression-max-rotation{syntax:"<angle>";inherits:false;initial-value:16deg}@property --mds-emoji-perspective{syntax:"<length>";inherits:false;initial-value:400px}@property --mds-emoji-offset-eyes{syntax:"<length>";inherits:false;initial-value:1px}@property --mds-emoji-offset-gadget{syntax:"<length>";inherits:false;initial-value:1px}@property --mds-emoji-offset-hands{syntax:"<length>";inherits:false;initial-value:2px}@property --mds-emoji-offset-head{syntax:"<length>";inherits:false;initial-value:0}@property --mds-emoji-offset-mouth{syntax:"<length>";inherits:false;initial-value:1px}@property --mds-emoji-offset-eyebrows{syntax:"<length>";inherits:false;initial-value:10px}@property --mds-emoji-offset-ears{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-emoji-expression-follow-mouse-traits-duration:.2s;--mds-emoji-expression-follow-mouse-head-duration:.3s;--mds-emoji-expression-max-rotation:16deg;--mds-emoji-perspective:400px;align-items:stretch;aspect-ratio:1;height:calc(var(--spacing,.0025rem)*1200);-ms-flex-pack:stretch;display:flex;justify-content:stretch;-webkit-perspective:var(--mds-emoji-perspective,400px);perspective:var(--mds-emoji-perspective,400px);perspective-origin:50%;width:calc(var(--spacing,.0025rem)*1200)}svg{height:100%;overflow:visible;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:transform .2s ease-out;width:100%}:host([name=mia]){--mds-emoji-mia-eyes-color:rgb(var(--variant-ai-03,233 220 254));--mds-emoji-mia-hands-color:rgb(var(--variant-ai-04,218 199 253));--mds-emoji-mia-head-color:rgb(var(--variant-ai-08,118 44 246));--mds-emoji-mia-head-stroke-color:rgb(var(--variant-ai-06,172 126 249));--mds-emoji-mia-head-stroke-width:0px;--mds-emoji-mia-mouth-color:rgb(var(--variant-ai-04,218 199 253));--mds-emoji-offset-eyes:1px;--mds-emoji-offset-gadget:1px;--mds-emoji-offset-hands:2px;--mds-emoji-offset-head:0;--mds-emoji-offset-mouth:1px;container-type:size}@property --mds-emoji-simi-eye{syntax:"<color>";inherits:false;initial-value:#40281b}@property --mds-emoji-simi-eye-light{syntax:"<color>";inherits:false;initial-value:#fff}@property --mds-emoji-simi-eyebrow{syntax:"<color>";inherits:false;initial-value:#feefd8}@property --mds-emoji-simi-gadget{syntax:"<color>";inherits:false;initial-value:#2b1c15}@property --mds-emoji-simi-mouth{syntax:"<color>";inherits:false;initial-value:#2b1c15}@property --mds-emoji-simi-nose-light{syntax:"<color>";inherits:false;initial-value:#7e695f}@property --mds-emoji-simi-nose{syntax:"<color>";inherits:false;initial-value:#2b1c15}@property --mds-emoji-simi-outline{syntax:"<color>";inherits:false;initial-value:#2b1c15}@property --mds-emoji-simi-skin-dark{syntax:"<color>";inherits:false;initial-value:#c3481b}@property --mds-emoji-simi-skin-light{syntax:"<color>";inherits:false;initial-value:#feefd8}@property --mds-emoji-simi-skin{syntax:"<color>";inherits:false;initial-value:#f36320}@property --mds-emoji-simi-mouth-teeth{syntax:"<color>";inherits:false;initial-value:#fff}@property --mds-emoji-simi-mouth-throat{syntax:"<color>";inherits:false;initial-value:#c3481b}:host([name=simi]){--mds-emoji-offset-ears:0;--mds-emoji-offset-eyebrows:10px;--mds-emoji-offset-eyes:7px;--mds-emoji-offset-gadget:14px;--mds-emoji-offset-hand:18px;--mds-emoji-offset-head:5px;--mds-emoji-offset-mouth:16px;--mds-emoji-simi-eye-light:#fff;--mds-emoji-simi-eye:#40281b;--mds-emoji-simi-eyebrow:#feefd8;--mds-emoji-simi-gadget:#2b1c15;--mds-emoji-simi-mouth-teeth:#fff;--mds-emoji-simi-mouth-throat:#c3481b;--mds-emoji-simi-mouth:#2b1c15;--mds-emoji-simi-nose-light:#7e695f;--mds-emoji-simi-nose:#2b1c15;--mds-emoji-simi-outline:#2b1c15;--mds-emoji-simi-skin-dark:#c3481b;--mds-emoji-simi-skin-light:#feefd8;--mds-emoji-simi-skin:#f36320}`;
+const mdsEmojiCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-emoji-expression-follow-mouse-traits-duration:.2s;--mds-emoji-expression-follow-mouse-head-duration:.3s;--mds-emoji-expression-max-rotation:16deg;--mds-emoji-perspective:400px;--mds-emoji-offset-eyes:1px;--mds-emoji-offset-gadget:1px;--mds-emoji-offset-hands:2px;--mds-emoji-offset-head:0;--mds-emoji-offset-mouth:1px;--mds-emoji-offset-eyebrows:10px;--mds-emoji-offset-ears:0;--mds-emoji-mia-head:rgb(var(--variant-ai-08,118 44 246));--mds-emoji-mia-eyes:rgb(var(--variant-ai-03,233 220 254));--mds-emoji-mia-mouth:rgb(var(--variant-ai-06,172 126 249));--mds-emoji-mia-hands:rgb(var(--variant-ai-06,172 126 249));--mds-emoji-simi-eye:#40281b;--mds-emoji-simi-eye-light:#fff;--mds-emoji-simi-eyebrow:#feefd8;--mds-emoji-simi-gadget:#2b1c15;--mds-emoji-simi-mouth:#2b1c15;--mds-emoji-simi-nose-light:#7e695f;--mds-emoji-simi-nose:#2b1c15;--mds-emoji-simi-outline:#2b1c15;--mds-emoji-simi-skin-dark:#c3481b;--mds-emoji-simi-skin-light:#feefd8;--mds-emoji-simi-skin:#f36320;--mds-emoji-simi-mouth-teeth:#fff;--mds-emoji-simi-mouth-throat:#c3481b}}}:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-emoji-expression-follow-mouse-traits-duration{syntax:"<time>";inherits:false;initial-value:.2s}@property --mds-emoji-expression-follow-mouse-head-duration{syntax:"<time>";inherits:false;initial-value:.3s}@property --mds-emoji-expression-max-rotation{syntax:"<angle>";inherits:false;initial-value:16deg}@property --mds-emoji-perspective{syntax:"<length>";inherits:false;initial-value:400px}@property --mds-emoji-offset-eyes{syntax:"<length>";inherits:false;initial-value:1px}@property --mds-emoji-offset-gadget{syntax:"<length>";inherits:false;initial-value:1px}@property --mds-emoji-offset-hands{syntax:"<length>";inherits:false;initial-value:2px}@property --mds-emoji-offset-head{syntax:"<length>";inherits:false;initial-value:0}@property --mds-emoji-offset-mouth{syntax:"<length>";inherits:false;initial-value:1px}@property --mds-emoji-offset-eyebrows{syntax:"<length>";inherits:false;initial-value:10px}@property --mds-emoji-offset-ears{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-emoji-expression-follow-mouse-traits-duration:.2s;--mds-emoji-expression-follow-mouse-head-duration:.3s;--mds-emoji-expression-max-rotation:16deg;--mds-emoji-perspective:400px;align-items:stretch;aspect-ratio:1;height:calc(var(--spacing,.0025rem)*1200);-ms-flex-pack:stretch;display:flex;justify-content:stretch;-webkit-perspective:var(--mds-emoji-perspective,400px);perspective:var(--mds-emoji-perspective,400px);perspective-origin:50%;width:calc(var(--spacing,.0025rem)*1200)}svg{height:100%;overflow:visible;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:transform .2s ease-out;width:100%}:host([name=mia]){--mds-emoji-mia-eyes-color:rgb(var(--variant-ai-03,233 220 254));--mds-emoji-mia-hands-color:rgb(var(--variant-ai-04,218 199 253));--mds-emoji-mia-head-color:rgb(var(--variant-ai-08,118 44 246));--mds-emoji-mia-head-stroke-color:rgb(var(--variant-ai-06,172 126 249));--mds-emoji-mia-head-stroke-width:0px;--mds-emoji-mia-mouth-color:rgb(var(--variant-ai-04,218 199 253));--mds-emoji-offset-eyes:1px;--mds-emoji-offset-gadget:1px;--mds-emoji-offset-hands:2px;--mds-emoji-offset-head:0;--mds-emoji-offset-mouth:1px;container-type:size}@property --mds-emoji-simi-eye{syntax:"<color>";inherits:false;initial-value:#40281b}@property --mds-emoji-simi-eye-light{syntax:"<color>";inherits:false;initial-value:#fff}@property --mds-emoji-simi-eyebrow{syntax:"<color>";inherits:false;initial-value:#feefd8}@property --mds-emoji-simi-gadget{syntax:"<color>";inherits:false;initial-value:#2b1c15}@property --mds-emoji-simi-mouth{syntax:"<color>";inherits:false;initial-value:#2b1c15}@property --mds-emoji-simi-nose-light{syntax:"<color>";inherits:false;initial-value:#7e695f}@property --mds-emoji-simi-nose{syntax:"<color>";inherits:false;initial-value:#2b1c15}@property --mds-emoji-simi-outline{syntax:"<color>";inherits:false;initial-value:#2b1c15}@property --mds-emoji-simi-skin-dark{syntax:"<color>";inherits:false;initial-value:#c3481b}@property --mds-emoji-simi-skin-light{syntax:"<color>";inherits:false;initial-value:#feefd8}@property --mds-emoji-simi-skin{syntax:"<color>";inherits:false;initial-value:#f36320}@property --mds-emoji-simi-mouth-teeth{syntax:"<color>";inherits:false;initial-value:#fff}@property --mds-emoji-simi-mouth-throat{syntax:"<color>";inherits:false;initial-value:#c3481b}:host([name=simi]){--mds-emoji-offset-ears:0;--mds-emoji-offset-eyebrows:10px;--mds-emoji-offset-eyes:7px;--mds-emoji-offset-gadget:14px;--mds-emoji-offset-hand:18px;--mds-emoji-offset-head:5px;--mds-emoji-offset-mouth:16px;--mds-emoji-simi-eye-light:#fff;--mds-emoji-simi-eye:#40281b;--mds-emoji-simi-eyebrow:#feefd8;--mds-emoji-simi-gadget:#2b1c15;--mds-emoji-simi-mouth-teeth:#fff;--mds-emoji-simi-mouth-throat:#c3481b;--mds-emoji-simi-mouth:#2b1c15;--mds-emoji-simi-nose-light:#7e695f;--mds-emoji-simi-nose:#2b1c15;--mds-emoji-simi-outline:#2b1c15;--mds-emoji-simi-skin-dark:#c3481b;--mds-emoji-simi-skin-light:#feefd8;--mds-emoji-simi-skin:#f36320}`;
 
 const MdsEmoji = class {
     constructor(hostRef) {

package/dist/esm/mds-entity.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-CAd5312P.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
-const mdsEntityCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-entity-background:rgb(var(--tone-neutral,0 0 0));--mds-entity-color:rgb(var(--tone-neutral-02,244 244 244));--mds-entity-detail-color:rgb(var(--tone-neutral-03,233 233 233));--mds-entity-icon-background:rgb(var(--label-blue-09,7 40 196));--mds-entity-icon-radius:var(--radius-md,12px);--mds-entity-icon-color:rgb(var(--label-blue-04,196 206 253))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-avatar,mds-spinner):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-entity-background:rgb(var(--tone-neutral,0 0 0));--mds-entity-color:rgb(var(--tone-neutral-02,244 244 244));--mds-entity-detail-color:rgb(var(--tone-neutral-03,233 233 233));--mds-entity-icon-background:rgb(var(--label-blue-09,7 40 196));--mds-entity-icon-radius:var(--radius-md,12px);--mds-entity-icon-color:rgb(var(--label-blue-04,196 206 253));align-items:stretch;background-color:var(--mds-entity-background,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--radius-lg,16px);-webkit-box-shadow:var(--shadow-outline-weak,0 0 0 1px #0000000d,0 1px 2px 0 #0000000d);box-shadow:var(--shadow-outline-weak,0 0 0 1px #0000000d,0 1px 2px 0 #0000000d);color:var(--mds-entity-color,rgb(var(--tone-neutral-02,244 244 244)));display:flex;gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*200)}.delete,.preview,.spinner{border-radius:var(--radius-md,12px);flex-shrink:0;width:calc(var(--spacing,.0025rem)*1100)}.preview{--mds-avatar-radius:var(--mds-entity-icon-radius,var(--radius-md,12px))}.preview:not([variant]){--mds-avatar-color:var(--mds-entity-icon-color,rgb(var(--label-blue-04,196 206 253)));--mds-avatar-background-color:var(--mds-entity-icon-background,rgb(var(--label-blue-09,7 40 196)))}.preview,.spinner{align-items:center;aspect-ratio:var(--aspect-square,1/1);display:inline-flex;justify-content:center}.spinner{background-color:#0000;display:none;fill:var(--mds-entity-icon-color,rgb(var(--label-blue-04,196 206 253)))}:host([await]:not([await=false])) .spinner{display:inline-flex}mds-spinner{height:calc(var(--spacing,.0025rem)*900);width:calc(var(--spacing,.0025rem)*900)}.infos{display:flex;flex-direction:column;flex-grow:1;gap:calc(var(--spacing,.0025rem)*0);justify-content:center;min-width:0;white-space:nowrap}.details{align-items:baseline;color:var(--mds-entity-detail-color,rgb(var(--tone-neutral-03,233 233 233)));display:flex;gap:calc(var(--spacing,.0025rem)*100)}.actions{align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*200)}::slotted([slot=action]){aspect-ratio:var(--aspect-square,1/1);height:auto;width:calc(var(--spacing,.0025rem)*1100)}::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title{display:flex;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host-context(:root.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));--mds-entity-icon-background:rgb(var(--label-blue-08,42 77 247));--mds-entity-icon-color:rgb(var(--label-blue-03,218 224 254));--mds-entity-shadow:var(--shadow-outline-50)}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-entity-shadow:var(--shadow-outline)}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--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));--mds-entity-icon-background:rgb(var(--label-blue-08,42 77 247));--mds-entity-icon-color:rgb(var(--label-blue-03,218 224 254));--mds-entity-shadow:var(--shadow-outline-50)}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-entity-shadow:var(--shadow-outline)}}`;
+const mdsEntityCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-entity-background:rgb(var(--tone-neutral,0 0 0));--mds-entity-color:rgb(var(--tone-neutral-02,244 244 244));--mds-entity-detail-color:rgb(var(--tone-neutral-03,233 233 233));--mds-entity-icon-background:rgb(var(--label-blue-09,7 40 196));--mds-entity-icon-radius:var(--radius-md,12px);--mds-entity-icon-color:rgb(var(--label-blue-04,196 206 253))}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-avatar,mds-spinner):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-entity-background:rgb(var(--tone-neutral,0 0 0));--mds-entity-color:rgb(var(--tone-neutral-02,244 244 244));--mds-entity-detail-color:rgb(var(--tone-neutral-03,233 233 233));--mds-entity-icon-background:rgb(var(--label-blue-09,7 40 196));--mds-entity-icon-radius:var(--radius-md,12px);--mds-entity-icon-color:rgb(var(--label-blue-04,196 206 253));align-items:stretch;background-color:var(--mds-entity-background,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--radius-lg,16px);-webkit-box-shadow:var(--shadow-outline-weak,0 0 0 1px #0000000d,0 1px 2px 0 #0000000d);box-shadow:var(--shadow-outline-weak,0 0 0 1px #0000000d,0 1px 2px 0 #0000000d);color:var(--mds-entity-color,rgb(var(--tone-neutral-02,244 244 244)));display:flex;gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*200)}.delete,.preview,.spinner{border-radius:var(--radius-md,12px);flex-shrink:0;width:calc(var(--spacing,.0025rem)*1100)}.preview{--mds-avatar-radius:var(--mds-entity-icon-radius,var(--radius-md,12px))}.preview:not([variant]){--mds-avatar-color:var(--mds-entity-icon-color,rgb(var(--label-blue-04,196 206 253)));--mds-avatar-background-color:var(--mds-entity-icon-background,rgb(var(--label-blue-09,7 40 196)))}.preview,.spinner{align-items:center;aspect-ratio:var(--aspect-square,1/1);display:inline-flex;justify-content:center}.spinner{background-color:#0000;display:none;fill:var(--mds-entity-icon-color,rgb(var(--label-blue-04,196 206 253)))}:host([await]:not([await=false])) .spinner{display:inline-flex}mds-spinner{height:calc(var(--spacing,.0025rem)*900);width:calc(var(--spacing,.0025rem)*900)}.infos{display:flex;flex-direction:column;flex-grow:1;gap:calc(var(--spacing,.0025rem)*0);justify-content:center;min-width:0;white-space:nowrap}.details{align-items:baseline;color:var(--mds-entity-detail-color,rgb(var(--tone-neutral-03,233 233 233)));display:flex;gap:calc(var(--spacing,.0025rem)*100)}.actions{align-items:center;display:flex;gap:calc(var(--spacing,.0025rem)*200)}::slotted([slot=action]){aspect-ratio:var(--aspect-square,1/1);height:auto;width:calc(var(--spacing,.0025rem)*1100)}::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title{display:flex;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}: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));--mds-entity-icon-background:rgb(var(--label-blue-08,42 77 247));--mds-entity-icon-color:rgb(var(--label-blue-03,218 224 254));--mds-entity-shadow:var(--shadow-outline-50)}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-entity-shadow:var(--shadow-outline)}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--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));--mds-entity-icon-background:rgb(var(--label-blue-08,42 77 247));--mds-entity-icon-color:rgb(var(--label-blue-03,218 224 254));--mds-entity-shadow:var(--shadow-outline-50)}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-entity-shadow:var(--shadow-outline)}}`;
 
 const MdsEntity = class {
     constructor(hostRef) {
@@ -22,12 +23,29 @@ const MdsEntity = class {
         }
         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: '22a28d6ba3510d1289e8624a0c40aef3e3c40e1a' }, h("div", { key: '8d37bb90a921442974a84ddd0bce5f0a066c64ec', class: "spinner", part: "spinner" }, h("mds-spinner", { key: '2b4fbf62c4d6031e3ee356b33ccc9c611d9d76a3', running: true })), this.checkAvatar() && (h("mds-avatar", { key: '9ac6dc6620e5ab1c70c4934e4fab94da981b29c3', class: "preview", icon: this.icon, initials: this.initials, src: this.src, tone: this.tone, variant: this.variant, part: "avatar" })), h("div", { key: 'a4145830835e6a826c5f003b424e73014a796c41', class: "infos" }, h("slot", { key: '62218ed33ed9f652c8f268a8d5cbfa73c90f5962' }), this.details && (h("div", { key: 'e7cd7dd749613b038962e8cab76d81d20d4bfb4b', class: "details" }, h("slot", { key: '3b9ad2f9cf5578595886f757904956987fc916f3', name: "detail" })))), this.actions && (h("div", { key: '6f1f4ac54c51fb426ab336a8c4d4c51734d0cced', class: "actions" }, h("slot", { key: 'db576c92ab69bb2b9c786be5e13a190a0d3c3f24', 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" })))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/mds-file-preview.entry.js

@@ -3,6 +3,7 @@ import { m as miBaselineCancel } from './cancel-BJ8rpzfj.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 import { f as fileDescriptionLocaleIt, a as fileDescriptionLocaleEs, b as fileDescriptionLocaleEn, c as fileDescriptionLocaleEl, g as getExtensionInfos, d as getSuffix, e as getFormatsVariant } from './locale.it-Dj8sWDfj.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 import './file-extensions-BxIk5ZFV.js';
 import './panorama-b1ORvfSX.js';
 
@@ -218,7 +219,7 @@ var localeIt = {
 	remove: remove
 };
 
-const mdsFilePreviewCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-file-preview-background-color:rgb(var(--tone-neutral,0 0 0));--mds-file-preview-border-radius:var(--radius-lg,16px);--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)))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-badge,mds-button,mds-icon,mds-img,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-file-preview-background-color:rgb(var(--tone-neutral,0 0 0));--mds-file-preview-border-radius:var(--radius-2xl,24px);--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)));background-color:var(--mds-file-preview-background-color,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--mds-file-preview-border-radius,var(--radius-lg,16px));-webkit-box-shadow:var(--shadow-box-md,#0000000f 0 0 0 1px,#00000008 0 1px 1px -.5px,#0000000a 0 2px 2px -1px,#0000000a 0 3px 3px -1.5px,#00000008 0 5px 5px -2.5px,#00000008 0 10px 10px -5px,#00000008 0 24px 24px -8px);box-shadow:var(--shadow-box-md,#0000000f 0 0 0 1px,#00000008 0 1px 1px -.5px,#0000000a 0 2px 2px -1px,#0000000a 0 3px 3px -1.5px,#00000008 0 5px 5px -2.5px,#00000008 0 10px 10px -5px,#00000008 0 24px 24px -8px);corner-shape:var(--magma-corner-shape,round);align-items:stretch;fill:var(--mds-file-preview-color,rgb(var(--tone-neutral-03,233 233 233)));-ms-flex-pack:stretch;display:flex;justify-content:stretch;overflow:hidden;position:relative}.card{display:grid;gap:calc(var(--spacing,.0025rem)*200);grid-template-columns:repeat(1,minmax(1px,100%));padding:calc(var(--spacing,.0025rem)*400)}.card,.preview{corner-shape:inherit;width:100%}.preview{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)) - var(--spacing,.0025rem)*200);box-sizing:border-box;color:var(--mds-file-preview-color,rgb(var(--tone-neutral-03,233 233 233)));fill:var(--mds-file-preview-icon-color,var(--mds-file-preview-color,rgb(var(--tone-neutral-03,233 233 233))))}.preview--image{filter:brightness(.975);padding:0!important}.preview--icon,.preview--status{align-items:center;display:flex;flex-direction:column;justify-content:center}.preview--status{gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*400)}.icon{height:calc(var(--spacing,.0025rem)*1200);width:calc(var(--spacing,.0025rem)*1200)}.message{text-align:center}.action-delete{background-color:var(--mds-file-preview-background-color,rgb(var(--tone-neutral,0 0 0)));position:absolute;right:0;top:0;z-index:10}.infos{align-items:baseline;display:flex;gap:calc(var(--spacing,.0025rem)*200)}.suffix{flex-shrink:0}.infos--has-file-size{justify-content:space-between}.file-name{--mds-text-line-clamp:2}:host([format=archive]),:host([format=executable]){--mds-file-preview-color:rgb(var(--label-amaranth-04,251 192 203));--mds-file-preview-icon-background:rgb(var(--label-amaranth-10,114 7 25));--mds-file-preview-icon-color:rgb(var(--label-amaranth-04,251 192 203))}:host([format=attachment]){--mds-file-preview-color:rgb(var(--tone-neutral-04,218 218 218));--mds-file-preview-icon-background:rgb(var(--tone-neutral-10,60 60 60));--mds-file-preview-icon-color:rgb(var(--tone-neutral-04,218 218 218))}:host([format=audio]),:host([format=video]){--mds-file-preview-color:rgb(var(--label-violet-04,216 200 252));--mds-file-preview-icon-background:rgb(var(--label-violet-10,57 9 165));--mds-file-preview-icon-color:rgb(var(--label-violet-04,216 200 252))}:host([format=code]),:host([format=data]),:host([format=markup]){--mds-file-preview-color:rgb(var(--label-yellow-04,248 202 60));--mds-file-preview-icon-background:rgb(var(--label-yellow-10,75 57 3));--mds-file-preview-icon-color:rgb(var(--label-yellow-04,248 202 60))}:host([format=certificate]),:host([format=document]){--mds-file-preview-color:rgb(var(--label-orange-04,252 196 158));--mds-file-preview-icon-background:rgb(var(--label-orange-10,99 42 3));--mds-file-preview-icon-color:rgb(var(--label-orange-04,252 196 158))}:host([format=email]),:host([format=text]){--mds-file-preview-color:rgb(var(--label-blue-04,196 206 253));--mds-file-preview-icon-background:rgb(var(--label-blue-10,6 34 166));--mds-file-preview-icon-color:rgb(var(--label-blue-04,196 206 253))}:host([format=image]){--mds-file-preview-color:rgb(var(--label-green-04,113 230 156));--mds-file-preview-icon-background:rgb(var(--label-green-10,12 68 33));--mds-file-preview-icon-color:rgb(var(--label-green-04,113 230 156))}:host([format=slide]){--mds-file-preview-color:rgb(var(--label-orchid-04,248 192 220));--mds-file-preview-icon-background:rgb(var(--label-orchid-10,111 12 61));--mds-file-preview-icon-color:rgb(var(--label-orchid-04,248 192 220))}:host([format=spreadsheet]){--mds-file-preview-color:rgb(var(--label-lime-04,148 229 25));--mds-file-preview-icon-background:rgb(var(--label-lime-10,43 66 7));--mds-file-preview-icon-color:rgb(var(--label-lime-04,148 229 25))}:host([format=vector]){--mds-file-preview-color:rgb(var(--label-aqua-04,81 225 250));--mds-file-preview-icon-background:rgb(var(--label-aqua-10,2 65 76));--mds-file-preview-icon-color:rgb(var(--label-aqua-04,81 225 250))}:host([variant=primary][message]){--mds-file-preview-icon-background:rgb(var(--variant-primary-09,0 58 168));--mds-file-preview-icon-color:rgb(var(--variant-primary-04,184 208 255))}:host([variant=info][message]){--mds-file-preview-icon-background:rgb(var(--status-info-09,0 73 116));--mds-file-preview-icon-color:rgb(var(--status-info-04,159 216 241));--mds-file-preview-color:rgb(var(--status-info-03,198 231 247))}:host([variant=success][message]){--mds-file-preview-icon-background:rgb(var(--status-success-09,0 82 9));--mds-file-preview-icon-color:rgb(var(--status-success-04,158 222 181));--mds-file-preview-color:rgb(var(--status-success-03,196 235 209))}:host([variant=warning][message]){--mds-file-preview-icon-background:rgb(var(--status-warning-09,90 67 0));--mds-file-preview-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-file-preview-color:rgb(var(--status-warning-03,255 223 129))}:host([variant=error][message]){--mds-file-preview-icon-background:rgb(var(--status-error-09,135 0 14));--mds-file-preview-icon-color:rgb(var(--status-error-04,254 193 189));--mds-file-preview-color:rgb(var(--status-error-03,255 217 214))}:host([variant=amaranth][message]){--mds-file-preview-icon-background:rgb(var(--label-amaranth-09,135 8 30));--mds-file-preview-icon-color:rgb(var(--label-amaranth-04,251 192 203));--mds-file-preview-color:rgb(var(--label-amaranth-03,253 217 223))}:host([variant=aqua][message]){--mds-file-preview-icon-background:rgb(var(--label-aqua-09,3 77 90));--mds-file-preview-icon-color:rgb(var(--label-aqua-04,81 225 250));--mds-file-preview-color:rgb(var(--label-aqua-03,158 238 252))}:host([variant=blue][message]){--mds-file-preview-icon-background:rgb(var(--label-blue-09,7 40 196));--mds-file-preview-icon-color:rgb(var(--label-blue-04,196 206 253));--mds-file-preview-color:rgb(var(--label-blue-03,218 224 254))}:host([variant=green][message]){--mds-file-preview-icon-background:rgb(var(--label-green-09,14 81 39));--mds-file-preview-icon-color:rgb(var(--label-green-04,113 230 156));--mds-file-preview-color:rgb(var(--label-green-03,173 241 198))}:host([variant=lime][message]){--mds-file-preview-icon-background:rgb(var(--label-lime-09,51 79 8));--mds-file-preview-icon-color:rgb(var(--label-lime-04,148 229 25));--mds-file-preview-color:rgb(var(--label-lime-03,193 241 122))}:host([variant=orange][message]){--mds-file-preview-icon-background:rgb(var(--label-orange-09,116 49 3));--mds-file-preview-icon-color:rgb(var(--label-orange-04,252 196 158));--mds-file-preview-color:rgb(var(--label-orange-03,253 219 196))}:host([variant=orchid][message]){--mds-file-preview-icon-background:rgb(var(--label-orchid-09,131 14 71));--mds-file-preview-icon-color:rgb(var(--label-orchid-04,248 192 220));--mds-file-preview-color:rgb(var(--label-orchid-03,251 216 234))}:host([variant=sky][message]){--mds-file-preview-icon-background:rgb(var(--label-sky-09,6 76 107));--mds-file-preview-icon-color:rgb(var(--label-sky-04,148 217 249));--mds-file-preview-color:rgb(var(--label-sky-03,191 232 251))}:host([variant=violet][message]){--mds-file-preview-icon-background:rgb(var(--label-violet-09,67 11 195));--mds-file-preview-icon-color:rgb(var(--label-violet-04,216 200 252));--mds-file-preview-color:rgb(var(--label-violet-03,231 221 253))}:host([variant=yellow][message]){--mds-file-preview-icon-background:rgb(var(--label-yellow-09,89 68 3));--mds-file-preview-icon-color:rgb(var(--label-yellow-04,248 202 60));--mds-file-preview-color:rgb(var(--label-yellow-03,251 224 142))}:host-context(:root.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));--mds-file-preview-color:rgb(var(--variant-primary-01,242 246 255))}:host-context(:root.pref-contrast-more):host([variant=info][message]){--mds-file-preview-icon-background:rgb(var(--status-info-10,0 61 103));--mds-file-preview-icon-color:rgb(var(--status-info-02,222 242 250));--mds-file-preview-color:rgb(var(--status-info-01,237 248 253))}:host-context(:root.pref-contrast-more):host([variant=success][message]){--mds-file-preview-icon-background:rgb(var(--status-success-10,0 69 0));--mds-file-preview-icon-color:rgb(var(--status-success-02,222 244 228));--mds-file-preview-color:rgb(var(--status-success-01,237 249 241))}:host-context(:root.pref-contrast-more):host([variant=warning][message]){--mds-file-preview-icon-background:rgb(var(--status-warning-10,77 57 0));--mds-file-preview-icon-color:rgb(var(--status-warning-02,255 237 185));--mds-file-preview-color:rgb(var(--status-warning-01,255 246 217))}:host-context(:root.pref-contrast-more):host([variant=error][message]){--mds-file-preview-icon-background:rgb(var(--status-error-10,115 0 0));--mds-file-preview-icon-color:rgb(var(--status-error-02,255 234 231));--mds-file-preview-color:rgb(var(--status-error-01,255 243 242))}:host-context(:root.pref-contrast-more):host([variant=amaranth][message]){--mds-file-preview-icon-background:rgb(var(--label-amaranth-10,114 7 25));--mds-file-preview-icon-color:rgb(var(--label-amaranth-02,254 233 237));--mds-file-preview-color:rgb(var(--label-amaranth-01,254 243 245))}:host-context(:root.pref-contrast-more):host([variant=aqua][message]){--mds-file-preview-icon-background:rgb(var(--label-aqua-10,2 65 76));--mds-file-preview-icon-color:rgb(var(--label-aqua-02,203 246 254));--mds-file-preview-color:rgb(var(--label-aqua-01,229 251 254))}:host-context(:root.pref-contrast-more):host([variant=blue][message]){--mds-file-preview-icon-background:rgb(var(--label-blue-10,6 34 166));--mds-file-preview-icon-color:rgb(var(--label-blue-02,234 238 254));--mds-file-preview-color:rgb(var(--label-blue-01,244 245 255))}:host-context(:root.pref-contrast-more):host([variant=green][message]){--mds-file-preview-icon-background:rgb(var(--label-green-10,12 68 33));--mds-file-preview-icon-color:rgb(var(--label-green-02,211 247 224));--mds-file-preview-color:rgb(var(--label-green-01,231 251 239))}:host-context(:root.pref-contrast-more):host([variant=lime][message]){--mds-file-preview-icon-background:rgb(var(--label-lime-10,43 66 7));--mds-file-preview-icon-color:rgb(var(--label-lime-02,223 247 185));--mds-file-preview-color:rgb(var(--label-lime-01,238 251 217))}:host-context(:root.pref-contrast-more):host([variant=orange][message]){--mds-file-preview-icon-background:rgb(var(--label-orange-10,99 42 3));--mds-file-preview-icon-color:rgb(var(--label-orange-02,254 235 222));--mds-file-preview-color:rgb(var(--label-orange-01,255 244 237))}:host-context(:root.pref-contrast-more):host([variant=orchid][message]){--mds-file-preview-icon-background:rgb(var(--label-orchid-10,111 12 61));--mds-file-preview-icon-color:rgb(var(--label-orchid-02,253 233 243));--mds-file-preview-color:rgb(var(--label-orchid-01,254 243 249))}:host-context(:root.pref-contrast-more):host([variant=sky][message]){--mds-file-preview-icon-background:rgb(var(--label-sky-10,5 63 90));--mds-file-preview-icon-color:rgb(var(--label-sky-02,219 242 253));--mds-file-preview-color:rgb(var(--label-sky-01,236 248 254))}:host-context(:root.pref-contrast-more):host([variant=violet][message]){--mds-file-preview-icon-background:rgb(var(--label-violet-10,57 9 165));--mds-file-preview-icon-color:rgb(var(--label-violet-02,241 235 254));--mds-file-preview-color:rgb(var(--label-violet-01,248 244 254))}:host-context(:root.pref-contrast-more):host([variant=yellow][message]){--mds-file-preview-icon-background:rgb(var(--label-yellow-10,75 57 3));--mds-file-preview-icon-color:rgb(var(--label-yellow-02,253 238 190));--mds-file-preview-color:rgb(var(--label-yellow-01,254 246 221))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-animation-reduce) .preview{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host-context(:root.pref-contrast-more){--mds-file-preview-color:rgb(var(--tone-neutral-01,255 255 255));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):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));--mds-file-preview-color:rgb(var(--variant-primary-01,242 246 255))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=info][message]){--mds-file-preview-icon-background:rgb(var(--status-info-10,0 61 103));--mds-file-preview-icon-color:rgb(var(--status-info-02,222 242 250));--mds-file-preview-color:rgb(var(--status-info-01,237 248 253))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=success][message]){--mds-file-preview-icon-background:rgb(var(--status-success-10,0 69 0));--mds-file-preview-icon-color:rgb(var(--status-success-02,222 244 228));--mds-file-preview-color:rgb(var(--status-success-01,237 249 241))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=warning][message]){--mds-file-preview-icon-background:rgb(var(--status-warning-10,77 57 0));--mds-file-preview-icon-color:rgb(var(--status-warning-02,255 237 185));--mds-file-preview-color:rgb(var(--status-warning-01,255 246 217))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=error][message]){--mds-file-preview-icon-background:rgb(var(--status-error-10,115 0 0));--mds-file-preview-icon-color:rgb(var(--status-error-02,255 234 231));--mds-file-preview-color:rgb(var(--status-error-01,255 243 242))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=amaranth][message]){--mds-file-preview-icon-background:rgb(var(--label-amaranth-10,114 7 25));--mds-file-preview-icon-color:rgb(var(--label-amaranth-02,254 233 237));--mds-file-preview-color:rgb(var(--label-amaranth-01,254 243 245))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=aqua][message]){--mds-file-preview-icon-background:rgb(var(--label-aqua-10,2 65 76));--mds-file-preview-icon-color:rgb(var(--label-aqua-02,203 246 254));--mds-file-preview-color:rgb(var(--label-aqua-01,229 251 254))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=blue][message]){--mds-file-preview-icon-background:rgb(var(--label-blue-10,6 34 166));--mds-file-preview-icon-color:rgb(var(--label-blue-02,234 238 254));--mds-file-preview-color:rgb(var(--label-blue-01,244 245 255))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=green][message]){--mds-file-preview-icon-background:rgb(var(--label-green-10,12 68 33));--mds-file-preview-icon-color:rgb(var(--label-green-02,211 247 224));--mds-file-preview-color:rgb(var(--label-green-01,231 251 239))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=lime][message]){--mds-file-preview-icon-background:rgb(var(--label-lime-10,43 66 7));--mds-file-preview-icon-color:rgb(var(--label-lime-02,223 247 185));--mds-file-preview-color:rgb(var(--label-lime-01,238 251 217))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=orange][message]){--mds-file-preview-icon-background:rgb(var(--label-orange-10,99 42 3));--mds-file-preview-icon-color:rgb(var(--label-orange-02,254 235 222));--mds-file-preview-color:rgb(var(--label-orange-01,255 244 237))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=orchid][message]){--mds-file-preview-icon-background:rgb(var(--label-orchid-10,111 12 61));--mds-file-preview-icon-color:rgb(var(--label-orchid-02,253 233 243));--mds-file-preview-color:rgb(var(--label-orchid-01,254 243 249))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=sky][message]){--mds-file-preview-icon-background:rgb(var(--label-sky-10,5 63 90));--mds-file-preview-icon-color:rgb(var(--label-sky-02,219 242 253));--mds-file-preview-color:rgb(var(--label-sky-01,236 248 254))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=violet][message]){--mds-file-preview-icon-background:rgb(var(--label-violet-10,57 9 165));--mds-file-preview-icon-color:rgb(var(--label-violet-02,241 235 254));--mds-file-preview-color:rgb(var(--label-violet-01,248 244 254))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=yellow][message]){--mds-file-preview-icon-background:rgb(var(--label-yellow-10,75 57 3));--mds-file-preview-icon-color:rgb(var(--label-yellow-02,253 238 190));--mds-file-preview-color:rgb(var(--label-yellow-01,254 246 221))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-file-preview-color:rgb(var(--tone-neutral-01,255 255 255));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .preview{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}}`;
+const mdsFilePreviewCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-file-preview-background-color:rgb(var(--tone-neutral,0 0 0));--mds-file-preview-border-radius:var(--radius-lg,16px);--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)))}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-badge,mds-button,mds-icon,mds-img,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-file-preview-background-color:rgb(var(--tone-neutral,0 0 0));--mds-file-preview-border-radius:var(--radius-2xl,24px);--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);background-color:var(--mds-file-preview-background-color,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--mds-file-preview-border-radius,var(--radius-lg,16px));-webkit-box-shadow:var(--shadow-box-md,#0000000f 0 0 0 1px,#00000008 0 1px 1px -.5px,#0000000a 0 2px 2px -1px,#0000000a 0 3px 3px -1.5px,#00000008 0 5px 5px -2.5px,#00000008 0 10px 10px -5px,#00000008 0 24px 24px -8px);box-shadow:var(--shadow-box-md,#0000000f 0 0 0 1px,#00000008 0 1px 1px -.5px,#0000000a 0 2px 2px -1px,#0000000a 0 3px 3px -1.5px,#00000008 0 5px 5px -2.5px,#00000008 0 10px 10px -5px,#00000008 0 24px 24px -8px);corner-shape:var(--magma-corner-shape,round);align-items:stretch;fill:var(--mds-file-preview-color,rgb(var(--tone-neutral-03,233 233 233)));-ms-flex-pack:stretch;display:flex;justify-content:stretch;overflow:hidden;position:relative;-webkit-transition-duration:var(--private-file-preview-transition-duration);transition-duration:var(--private-file-preview-transition-duration)}.card{display:grid;gap:calc(var(--spacing,.0025rem)*200);grid-template-columns:repeat(1,minmax(1px,100%));padding:calc(var(--spacing,.0025rem)*400)}.card,.preview{corner-shape:inherit;width:100%}.preview{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)) - var(--spacing,.0025rem)*200);box-sizing:border-box;color:var(--mds-file-preview-color,rgb(var(--tone-neutral-03,233 233 233)));fill:var(--mds-file-preview-icon-color,var(--mds-file-preview-color,rgb(var(--tone-neutral-03,233 233 233))));-webkit-transition-duration:inherit;transition-duration:inherit}.preview--image{filter:brightness(.975);padding:0!important}.preview--icon,.preview--status{align-items:center;display:flex;flex-direction:column;justify-content:center}.preview--status{gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*400)}.icon{height:calc(var(--spacing,.0025rem)*1200);width:calc(var(--spacing,.0025rem)*1200)}.message{text-align:center}.action-delete{background-color:var(--mds-file-preview-background-color,rgb(var(--tone-neutral,0 0 0)));position:absolute;right:0;top:0;z-index:10}.infos{align-items:baseline;display:flex;gap:calc(var(--spacing,.0025rem)*200)}.suffix{flex-shrink:0}.infos--has-file-size{justify-content:space-between}.file-name{--mds-text-line-clamp:2}:host([format=archive]),:host([format=executable]){--mds-file-preview-color:rgb(var(--label-amaranth-04,251 192 203));--mds-file-preview-icon-background:rgb(var(--label-amaranth-10,114 7 25));--mds-file-preview-icon-color:rgb(var(--label-amaranth-04,251 192 203))}:host([format=attachment]){--mds-file-preview-color:rgb(var(--tone-neutral-04,218 218 218));--mds-file-preview-icon-background:rgb(var(--tone-neutral-10,60 60 60));--mds-file-preview-icon-color:rgb(var(--tone-neutral-04,218 218 218))}:host([format=audio]),:host([format=video]){--mds-file-preview-color:rgb(var(--label-violet-04,216 200 252));--mds-file-preview-icon-background:rgb(var(--label-violet-10,57 9 165));--mds-file-preview-icon-color:rgb(var(--label-violet-04,216 200 252))}:host([format=code]),:host([format=data]),:host([format=markup]){--mds-file-preview-color:rgb(var(--label-yellow-04,248 202 60));--mds-file-preview-icon-background:rgb(var(--label-yellow-10,75 57 3));--mds-file-preview-icon-color:rgb(var(--label-yellow-04,248 202 60))}:host([format=certificate]),:host([format=document]){--mds-file-preview-color:rgb(var(--label-orange-04,252 196 158));--mds-file-preview-icon-background:rgb(var(--label-orange-10,99 42 3));--mds-file-preview-icon-color:rgb(var(--label-orange-04,252 196 158))}:host([format=email]),:host([format=text]){--mds-file-preview-color:rgb(var(--label-blue-04,196 206 253));--mds-file-preview-icon-background:rgb(var(--label-blue-10,6 34 166));--mds-file-preview-icon-color:rgb(var(--label-blue-04,196 206 253))}:host([format=image]){--mds-file-preview-color:rgb(var(--label-green-04,113 230 156));--mds-file-preview-icon-background:rgb(var(--label-green-10,12 68 33));--mds-file-preview-icon-color:rgb(var(--label-green-04,113 230 156))}:host([format=slide]){--mds-file-preview-color:rgb(var(--label-orchid-04,248 192 220));--mds-file-preview-icon-background:rgb(var(--label-orchid-10,111 12 61));--mds-file-preview-icon-color:rgb(var(--label-orchid-04,248 192 220))}:host([format=spreadsheet]){--mds-file-preview-color:rgb(var(--label-lime-04,148 229 25));--mds-file-preview-icon-background:rgb(var(--label-lime-10,43 66 7));--mds-file-preview-icon-color:rgb(var(--label-lime-04,148 229 25))}:host([format=vector]){--mds-file-preview-color:rgb(var(--label-aqua-04,81 225 250));--mds-file-preview-icon-background:rgb(var(--label-aqua-10,2 65 76));--mds-file-preview-icon-color:rgb(var(--label-aqua-04,81 225 250))}:host([variant=primary][message]){--mds-file-preview-icon-background:rgb(var(--variant-primary-09,0 58 168));--mds-file-preview-icon-color:rgb(var(--variant-primary-04,184 208 255))}:host([variant=info][message]){--mds-file-preview-icon-background:rgb(var(--status-info-09,0 73 116));--mds-file-preview-icon-color:rgb(var(--status-info-04,159 216 241));--mds-file-preview-color:rgb(var(--status-info-03,198 231 247))}:host([variant=success][message]){--mds-file-preview-icon-background:rgb(var(--status-success-09,0 82 9));--mds-file-preview-icon-color:rgb(var(--status-success-04,158 222 181));--mds-file-preview-color:rgb(var(--status-success-03,196 235 209))}:host([variant=warning][message]){--mds-file-preview-icon-background:rgb(var(--status-warning-09,90 67 0));--mds-file-preview-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-file-preview-color:rgb(var(--status-warning-03,255 223 129))}:host([variant=error][message]){--mds-file-preview-icon-background:rgb(var(--status-error-09,135 0 14));--mds-file-preview-icon-color:rgb(var(--status-error-04,254 193 189));--mds-file-preview-color:rgb(var(--status-error-03,255 217 214))}:host([variant=amaranth][message]){--mds-file-preview-icon-background:rgb(var(--label-amaranth-09,135 8 30));--mds-file-preview-icon-color:rgb(var(--label-amaranth-04,251 192 203));--mds-file-preview-color:rgb(var(--label-amaranth-03,253 217 223))}:host([variant=aqua][message]){--mds-file-preview-icon-background:rgb(var(--label-aqua-09,3 77 90));--mds-file-preview-icon-color:rgb(var(--label-aqua-04,81 225 250));--mds-file-preview-color:rgb(var(--label-aqua-03,158 238 252))}:host([variant=blue][message]){--mds-file-preview-icon-background:rgb(var(--label-blue-09,7 40 196));--mds-file-preview-icon-color:rgb(var(--label-blue-04,196 206 253));--mds-file-preview-color:rgb(var(--label-blue-03,218 224 254))}:host([variant=green][message]){--mds-file-preview-icon-background:rgb(var(--label-green-09,14 81 39));--mds-file-preview-icon-color:rgb(var(--label-green-04,113 230 156));--mds-file-preview-color:rgb(var(--label-green-03,173 241 198))}:host([variant=lime][message]){--mds-file-preview-icon-background:rgb(var(--label-lime-09,51 79 8));--mds-file-preview-icon-color:rgb(var(--label-lime-04,148 229 25));--mds-file-preview-color:rgb(var(--label-lime-03,193 241 122))}:host([variant=orange][message]){--mds-file-preview-icon-background:rgb(var(--label-orange-09,116 49 3));--mds-file-preview-icon-color:rgb(var(--label-orange-04,252 196 158));--mds-file-preview-color:rgb(var(--label-orange-03,253 219 196))}:host([variant=orchid][message]){--mds-file-preview-icon-background:rgb(var(--label-orchid-09,131 14 71));--mds-file-preview-icon-color:rgb(var(--label-orchid-04,248 192 220));--mds-file-preview-color:rgb(var(--label-orchid-03,251 216 234))}:host([variant=sky][message]){--mds-file-preview-icon-background:rgb(var(--label-sky-09,6 76 107));--mds-file-preview-icon-color:rgb(var(--label-sky-04,148 217 249));--mds-file-preview-color:rgb(var(--label-sky-03,191 232 251))}:host([variant=violet][message]){--mds-file-preview-icon-background:rgb(var(--label-violet-09,67 11 195));--mds-file-preview-icon-color:rgb(var(--label-violet-04,216 200 252));--mds-file-preview-color:rgb(var(--label-violet-03,231 221 253))}:host([variant=yellow][message]){--mds-file-preview-icon-background:rgb(var(--label-yellow-09,89 68 3));--mds-file-preview-icon-color:rgb(var(--label-yellow-04,248 202 60));--mds-file-preview-color:rgb(var(--label-yellow-03,251 224 142))}: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));--mds-file-preview-color:rgb(var(--variant-primary-01,242 246 255))}:host([pref-contrast=more]):host([variant=info][message]){--mds-file-preview-icon-background:rgb(var(--status-info-10,0 61 103));--mds-file-preview-icon-color:rgb(var(--status-info-02,222 242 250));--mds-file-preview-color:rgb(var(--status-info-01,237 248 253))}:host([pref-contrast=more]):host([variant=success][message]){--mds-file-preview-icon-background:rgb(var(--status-success-10,0 69 0));--mds-file-preview-icon-color:rgb(var(--status-success-02,222 244 228));--mds-file-preview-color:rgb(var(--status-success-01,237 249 241))}:host([pref-contrast=more]):host([variant=warning][message]){--mds-file-preview-icon-background:rgb(var(--status-warning-10,77 57 0));--mds-file-preview-icon-color:rgb(var(--status-warning-02,255 237 185));--mds-file-preview-color:rgb(var(--status-warning-01,255 246 217))}:host([pref-contrast=more]):host([variant=error][message]){--mds-file-preview-icon-background:rgb(var(--status-error-10,115 0 0));--mds-file-preview-icon-color:rgb(var(--status-error-02,255 234 231));--mds-file-preview-color:rgb(var(--status-error-01,255 243 242))}:host([pref-contrast=more]):host([variant=amaranth][message]){--mds-file-preview-icon-background:rgb(var(--label-amaranth-10,114 7 25));--mds-file-preview-icon-color:rgb(var(--label-amaranth-02,254 233 237));--mds-file-preview-color:rgb(var(--label-amaranth-01,254 243 245))}:host([pref-contrast=more]):host([variant=aqua][message]){--mds-file-preview-icon-background:rgb(var(--label-aqua-10,2 65 76));--mds-file-preview-icon-color:rgb(var(--label-aqua-02,203 246 254));--mds-file-preview-color:rgb(var(--label-aqua-01,229 251 254))}:host([pref-contrast=more]):host([variant=blue][message]){--mds-file-preview-icon-background:rgb(var(--label-blue-10,6 34 166));--mds-file-preview-icon-color:rgb(var(--label-blue-02,234 238 254));--mds-file-preview-color:rgb(var(--label-blue-01,244 245 255))}:host([pref-contrast=more]):host([variant=green][message]){--mds-file-preview-icon-background:rgb(var(--label-green-10,12 68 33));--mds-file-preview-icon-color:rgb(var(--label-green-02,211 247 224));--mds-file-preview-color:rgb(var(--label-green-01,231 251 239))}:host([pref-contrast=more]):host([variant=lime][message]){--mds-file-preview-icon-background:rgb(var(--label-lime-10,43 66 7));--mds-file-preview-icon-color:rgb(var(--label-lime-02,223 247 185));--mds-file-preview-color:rgb(var(--label-lime-01,238 251 217))}:host([pref-contrast=more]):host([variant=orange][message]){--mds-file-preview-icon-background:rgb(var(--label-orange-10,99 42 3));--mds-file-preview-icon-color:rgb(var(--label-orange-02,254 235 222));--mds-file-preview-color:rgb(var(--label-orange-01,255 244 237))}:host([pref-contrast=more]):host([variant=orchid][message]){--mds-file-preview-icon-background:rgb(var(--label-orchid-10,111 12 61));--mds-file-preview-icon-color:rgb(var(--label-orchid-02,253 233 243));--mds-file-preview-color:rgb(var(--label-orchid-01,254 243 249))}:host([pref-contrast=more]):host([variant=sky][message]){--mds-file-preview-icon-background:rgb(var(--label-sky-10,5 63 90));--mds-file-preview-icon-color:rgb(var(--label-sky-02,219 242 253));--mds-file-preview-color:rgb(var(--label-sky-01,236 248 254))}:host([pref-contrast=more]):host([variant=violet][message]){--mds-file-preview-icon-background:rgb(var(--label-violet-10,57 9 165));--mds-file-preview-icon-color:rgb(var(--label-violet-02,241 235 254));--mds-file-preview-color:rgb(var(--label-violet-01,248 244 254))}:host([pref-contrast=more]):host([variant=yellow][message]){--mds-file-preview-icon-background:rgb(var(--label-yellow-10,75 57 3));--mds-file-preview-icon-color:rgb(var(--label-yellow-02,253 238 190));--mds-file-preview-color:rgb(var(--label-yellow-01,254 246 221))}:host([pref-animation=reduce]){--private-file-preview-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host([pref-contrast=more]){--mds-file-preview-color:rgb(var(--tone-neutral-01,255 255 255));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}@media (prefers-contrast:more){:is(: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));--mds-file-preview-color:rgb(var(--variant-primary-01,242 246 255))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=info][message]){--mds-file-preview-icon-background:rgb(var(--status-info-10,0 61 103));--mds-file-preview-icon-color:rgb(var(--status-info-02,222 242 250));--mds-file-preview-color:rgb(var(--status-info-01,237 248 253))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=success][message]){--mds-file-preview-icon-background:rgb(var(--status-success-10,0 69 0));--mds-file-preview-icon-color:rgb(var(--status-success-02,222 244 228));--mds-file-preview-color:rgb(var(--status-success-01,237 249 241))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=warning][message]){--mds-file-preview-icon-background:rgb(var(--status-warning-10,77 57 0));--mds-file-preview-icon-color:rgb(var(--status-warning-02,255 237 185));--mds-file-preview-color:rgb(var(--status-warning-01,255 246 217))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=error][message]){--mds-file-preview-icon-background:rgb(var(--status-error-10,115 0 0));--mds-file-preview-icon-color:rgb(var(--status-error-02,255 234 231));--mds-file-preview-color:rgb(var(--status-error-01,255 243 242))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=amaranth][message]){--mds-file-preview-icon-background:rgb(var(--label-amaranth-10,114 7 25));--mds-file-preview-icon-color:rgb(var(--label-amaranth-02,254 233 237));--mds-file-preview-color:rgb(var(--label-amaranth-01,254 243 245))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=aqua][message]){--mds-file-preview-icon-background:rgb(var(--label-aqua-10,2 65 76));--mds-file-preview-icon-color:rgb(var(--label-aqua-02,203 246 254));--mds-file-preview-color:rgb(var(--label-aqua-01,229 251 254))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=blue][message]){--mds-file-preview-icon-background:rgb(var(--label-blue-10,6 34 166));--mds-file-preview-icon-color:rgb(var(--label-blue-02,234 238 254));--mds-file-preview-color:rgb(var(--label-blue-01,244 245 255))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=green][message]){--mds-file-preview-icon-background:rgb(var(--label-green-10,12 68 33));--mds-file-preview-icon-color:rgb(var(--label-green-02,211 247 224));--mds-file-preview-color:rgb(var(--label-green-01,231 251 239))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=lime][message]){--mds-file-preview-icon-background:rgb(var(--label-lime-10,43 66 7));--mds-file-preview-icon-color:rgb(var(--label-lime-02,223 247 185));--mds-file-preview-color:rgb(var(--label-lime-01,238 251 217))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=orange][message]){--mds-file-preview-icon-background:rgb(var(--label-orange-10,99 42 3));--mds-file-preview-icon-color:rgb(var(--label-orange-02,254 235 222));--mds-file-preview-color:rgb(var(--label-orange-01,255 244 237))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=orchid][message]){--mds-file-preview-icon-background:rgb(var(--label-orchid-10,111 12 61));--mds-file-preview-icon-color:rgb(var(--label-orchid-02,253 233 243));--mds-file-preview-color:rgb(var(--label-orchid-01,254 243 249))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=sky][message]){--mds-file-preview-icon-background:rgb(var(--label-sky-10,5 63 90));--mds-file-preview-icon-color:rgb(var(--label-sky-02,219 242 253));--mds-file-preview-color:rgb(var(--label-sky-01,236 248 254))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=violet][message]){--mds-file-preview-icon-background:rgb(var(--label-violet-10,57 9 165));--mds-file-preview-icon-color:rgb(var(--label-violet-02,241 235 254));--mds-file-preview-color:rgb(var(--label-violet-01,248 244 254))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=yellow][message]){--mds-file-preview-icon-background:rgb(var(--label-yellow-10,75 57 3));--mds-file-preview-icon-color:rgb(var(--label-yellow-02,253 238 190));--mds-file-preview-color:rgb(var(--label-yellow-01,254 246 221))}:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-file-preview-color:rgb(var(--tone-neutral-01,255 255 255));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-file-preview-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}}`;
 
 const MdsFilePreview = class {
     constructor(hostRef) {
@@ -257,6 +258,27 @@ const MdsFilePreview = class {
     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;
@@ -280,12 +302,12 @@ const MdsFilePreview = class {
     }
     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())))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-file.entry.js

@@ -2,6 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { a as getAugmentedNamespace, c as commonjsGlobal } from './_commonjsHelpers-E-ZsRS8r.js';
 import { f as fileDescriptionLocaleIt, a as fileDescriptionLocaleEs, b as fileDescriptionLocaleEn, c as fileDescriptionLocaleEl, g as getExtensionInfos, d as getSuffix, h as getName, e as getFormatsVariant } from './locale.it-Dj8sWDfj.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 import './file-extensions-BxIk5ZFV.js';
 import './panorama-b1ORvfSX.js';
 
@@ -7541,7 +7542,7 @@ var localeIt = {
 	alreadyDownloaded: alreadyDownloaded
 };
 
-const mdsFileCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--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))}}}@layer reset,vendor,theme,base,components,utilities;@keyframes focus-bounce{0%,75%,to{outline-offset:var(--magma-outline-focus-offset,6px)}50%{outline-offset:var(--magma-outline-blur-offset,2px)}}:host(:not(:is([hydrated],.hydrated))),:is(mds-badge,mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--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));--private-icon-download-offset:10%;animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-xl,20px);-webkit-box-shadow:var(--shadow-outline-weak,0 0 0 1px #0000000d,0 1px 2px 0 #0000000d);box-shadow:var(--shadow-outline-weak,0 0 0 1px #0000000d,0 1px 2px 0 #0000000d);color:rgb(var(--tone-neutral-04,218 218 218));outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));transition-duration:.2s;transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-timing-function:ease-in-out;corner-shape:var(--magma-corner-shape,round);align-items:stretch;cursor:pointer;display:inline-flex;overflow:hidden;-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:box-shadow,outline,outline-offset;-webkit-transition-timing-function:var(--ease-out);transition-timing-function:var(--ease-out);width:100%}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host(:hover){-webkit-box-shadow:var(--shadow-box-md,#0000000f 0 0 0 1px,#00000008 0 1px 1px -.5px,#0000000a 0 2px 2px -1px,#0000000a 0 3px 3px -1.5px,#00000008 0 5px 5px -2.5px,#00000008 0 10px 10px -5px,#00000008 0 24px 24px -8px);box-shadow:var(--shadow-box-md,#0000000f 0 0 0 1px,#00000008 0 1px 1px -.5px,#0000000a 0 2px 2px -1px,#0000000a 0 3px 3px -1.5px,#00000008 0 5px 5px -2.5px,#00000008 0 10px 10px -5px,#00000008 0 24px 24px -8px)}:host(:hover) .download-icon{opacity:1;transform:translateY(0)}:host(:hover) .icon-preview,:host(:hover) .image-preview{opacity:0;-webkit-transform:translateY(var(--private-icon-download-offset));transform:translateY(var(--private-icon-download-offset))}.download-icon{inset:0;opacity:0;position:absolute;-webkit-transform:translateY(calc(var(--private-icon-download-offset)*-1));transform:translateY(calc(var(--private-icon-download-offset)*-1));-webkit-transition-duration:inherit;transition-duration:inherit;transition-property:opacity,transform;-webkit-transition-timing-function:inherit;transition-timing-function:inherit}.download-icon,.preview{align-items:center;display:flex;justify-content:center}.preview{background-color:var(--mds-file-preview-icon-bacground,rgb(var(--tone-neutral-10,60 60 60)));color:var(--mds-file-preview-color,rgb(var(--tone-neutral-03,233 233 233)));fill:var(--mds-file-preview-icon-color,var(--mds-file-preview-color,rgb(var(--tone-neutral-03,233 233 233))));flex-shrink:0;position:relative;-webkit-transition-duration:inherit;transition-duration:inherit;transition-property:color,background-color,fill;-webkit-transition-timing-function:var(--ease-in-out);transition-timing-function:var(--ease-in-out);width:calc(var(--spacing,.0025rem)*1400)}.image-preview{background-position:50%;background-repeat:no-repeat;background-size:contain;inset:calc(var(--spacing,.0025rem)*300);position:absolute}.icon-preview,.image-preview{-webkit-transition-duration:inherit;transition-duration:inherit;transition-property:opacity,transform;-webkit-transition-timing-function:inherit;transition-timing-function:inherit}.info{flex-direction:column;flex-grow:1;gap:calc(var(--spacing,.0025rem)*100);height:calc(var(--spacing,.0025rem)*1400);justify-content:center;padding:0 calc(var(--spacing,.0025rem)*300)}.filename,.info{display:flex;min-width:0}.name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.extension{flex-shrink:0}.detail{align-items:baseline;display:flex;gap:calc(var(--spacing,.0025rem)*200);min-width:0}.suffix{flex-shrink:0;pointer-events:none}.description{color:rgb(var(--tone-neutral-05,197 197 197));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.indicator{align-items:center;display:flex;justify-content:center;padding-right:calc(var(--spacing,.0025rem)*400)}.downloaded{display:flex;fill:rgb(var(--status-success-06,0 171 97))}.downloaded svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}:host([format=archive]),:host([format=executable]){--mds-file-preview-icon-color:rgb(var(--label-amaranth-04,251 192 203));--mds-file-preview-color:rgb(var(--label-amaranth-04,251 192 203));--mds-file-preview-icon-bacground:rgb(var(--label-amaranth-10,114 7 25))}:host([format=attachment]){--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))}:host([format=audio]),:host([format=video]){--mds-file-preview-icon-color:rgb(var(--label-violet-04,216 200 252));--mds-file-preview-color:rgb(var(--label-violet-04,216 200 252));--mds-file-preview-icon-bacground:rgb(var(--label-violet-10,57 9 165))}:host([format=code]),:host([format=data]),:host([format=markup]){--mds-file-preview-icon-color:rgb(var(--label-yellow-04,248 202 60));--mds-file-preview-color:rgb(var(--label-yellow-04,248 202 60));--mds-file-preview-icon-bacground:rgb(var(--label-yellow-10,75 57 3))}:host([format=certificate]),:host([format=document]){--mds-file-preview-icon-color:rgb(var(--label-orange-04,252 196 158));--mds-file-preview-color:rgb(var(--label-orange-04,252 196 158));--mds-file-preview-icon-bacground:rgb(var(--label-orange-10,99 42 3))}:host([format=email]),:host([format=text]){--mds-file-preview-icon-color:rgb(var(--label-blue-04,196 206 253));--mds-file-preview-color:rgb(var(--label-blue-04,196 206 253));--mds-file-preview-icon-bacground:rgb(var(--label-blue-10,6 34 166))}:host([format=image]){--mds-file-preview-icon-color:rgb(var(--label-green-04,113 230 156));--mds-file-preview-color:rgb(var(--label-green-04,113 230 156));--mds-file-preview-icon-bacground:rgb(var(--label-green-10,12 68 33))}:host([format=slide]){--mds-file-preview-icon-color:rgb(var(--label-orchid-04,248 192 220));--mds-file-preview-color:rgb(var(--label-orchid-04,248 192 220));--mds-file-preview-icon-bacground:rgb(var(--label-orchid-10,111 12 61))}:host([format=spreadsheet]){--mds-file-preview-icon-color:rgb(var(--label-lime-04,148 229 25));--mds-file-preview-color:rgb(var(--label-lime-04,148 229 25));--mds-file-preview-icon-bacground:rgb(var(--label-lime-10,43 66 7))}:host([format=vector]){--mds-file-preview-icon-color:rgb(var(--label-aqua-04,81 225 250));--mds-file-preview-color:rgb(var(--label-aqua-04,81 225 250));--mds-file-preview-icon-bacground:rgb(var(--label-aqua-10,2 65 76))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-animation-reduce) .preview{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host(:hover){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}:host-context(:root.pref-contrast-more){background-color:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50);color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-contrast-more):host(:hover){-webkit-box-shadow:var(--shadow-outline-strong-100);box-shadow:var(--shadow-outline-strong-100)}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .preview{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host(:hover){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){background-color:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50);color:rgb(var(--tone-neutral-01,255 255 255))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host(:hover){-webkit-box-shadow:var(--shadow-outline-strong-100);box-shadow:var(--shadow-outline-strong-100)}}`;
+const mdsFileCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--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))}}}@keyframes focus-bounce{0%,75%,to{outline-offset:var(--magma-outline-focus-offset,6px)}50%{outline-offset:var(--magma-outline-blur-offset,2px)}}:host(:not(:is([hydrated],.hydrated))),:is(mds-badge,mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--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,.2s);--private-file-transition-duration:var(--mds-file-transition-duration);--private-icon-download-offset:10%;animation-duration:var(--magma-outline-animation-duration,1s);animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:focus-bounce;animation-play-state:paused;animation-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:rgb(var(--tone-neutral,0 0 0));border-radius:var(--radius-xl,20px);-webkit-box-shadow:var(--shadow-outline-weak,0 0 0 1px #0000000d,0 1px 2px 0 #0000000d);box-shadow:var(--shadow-outline-weak,0 0 0 1px #0000000d,0 1px 2px 0 #0000000d);color:rgb(var(--tone-neutral-04,218 218 218));outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));transition-duration:.2s;transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-timing-function:ease-in-out;corner-shape:var(--magma-corner-shape,round);align-items:stretch;cursor:pointer;display:inline-flex;overflow:hidden;-webkit-transition-duration:var(--private-file-transition-duration);transition-duration:var(--private-file-transition-duration);transition-property:box-shadow,outline,outline-offset;-webkit-transition-timing-function:var(--ease-out);transition-timing-function:var(--ease-out);width:100%}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host(:hover){-webkit-box-shadow:var(--shadow-box-md,#0000000f 0 0 0 1px,#00000008 0 1px 1px -.5px,#0000000a 0 2px 2px -1px,#0000000a 0 3px 3px -1.5px,#00000008 0 5px 5px -2.5px,#00000008 0 10px 10px -5px,#00000008 0 24px 24px -8px);box-shadow:var(--shadow-box-md,#0000000f 0 0 0 1px,#00000008 0 1px 1px -.5px,#0000000a 0 2px 2px -1px,#0000000a 0 3px 3px -1.5px,#00000008 0 5px 5px -2.5px,#00000008 0 10px 10px -5px,#00000008 0 24px 24px -8px)}:host(:hover) .download-icon{opacity:1;transform:translateY(0)}:host(:hover) :is(.icon-preview,.image-preview){opacity:0;-webkit-transform:translateY(var(--private-icon-download-offset));transform:translateY(var(--private-icon-download-offset))}.download-icon{inset:0;opacity:0;position:absolute;-webkit-transform:translateY(calc(var(--private-icon-download-offset)*-1));transform:translateY(calc(var(--private-icon-download-offset)*-1));-webkit-transition-duration:inherit;transition-duration:inherit;transition-property:opacity,transform;-webkit-transition-timing-function:inherit;transition-timing-function:inherit}.download-icon,.preview{align-items:center;display:flex;justify-content:center}.preview{background-color:var(--mds-file-preview-icon-bacground,rgb(var(--tone-neutral-10,60 60 60)));color:var(--mds-file-preview-color,rgb(var(--tone-neutral-03,233 233 233)));fill:var(--mds-file-preview-icon-color,var(--mds-file-preview-color,rgb(var(--tone-neutral-03,233 233 233))));flex-shrink:0;position:relative;-webkit-transition-duration:inherit;transition-duration:inherit;transition-property:color,background-color,fill;-webkit-transition-timing-function:var(--ease-in-out);transition-timing-function:var(--ease-in-out);width:calc(var(--spacing,.0025rem)*1400)}.image-preview{background-position:50%;background-repeat:no-repeat;background-size:contain;inset:calc(var(--spacing,.0025rem)*300);position:absolute}.icon-preview,.image-preview{-webkit-transition-duration:inherit;transition-duration:inherit;transition-property:opacity,transform;-webkit-transition-timing-function:inherit;transition-timing-function:inherit}.info{flex-direction:column;flex-grow:1;gap:calc(var(--spacing,.0025rem)*100);height:calc(var(--spacing,.0025rem)*1400);justify-content:center;padding:0 calc(var(--spacing,.0025rem)*300)}.filename,.info{display:flex;min-width:0}.name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.extension{flex-shrink:0}.detail{align-items:baseline;display:flex;gap:calc(var(--spacing,.0025rem)*200);min-width:0}.suffix{flex-shrink:0;pointer-events:none}.description{color:rgb(var(--tone-neutral-05,197 197 197));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.indicator{align-items:center;display:flex;justify-content:center;padding-right:calc(var(--spacing,.0025rem)*400)}.downloaded{display:flex;fill:rgb(var(--status-success-06,0 171 97))}.downloaded svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}:host([format=archive]),:host([format=executable]){--mds-file-preview-icon-color:rgb(var(--label-amaranth-04,251 192 203));--mds-file-preview-color:rgb(var(--label-amaranth-04,251 192 203));--mds-file-preview-icon-bacground:rgb(var(--label-amaranth-10,114 7 25))}:host([format=attachment]){--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))}:host([format=audio]),:host([format=video]){--mds-file-preview-icon-color:rgb(var(--label-violet-04,216 200 252));--mds-file-preview-color:rgb(var(--label-violet-04,216 200 252));--mds-file-preview-icon-bacground:rgb(var(--label-violet-10,57 9 165))}:host([format=code]),:host([format=data]),:host([format=markup]){--mds-file-preview-icon-color:rgb(var(--label-yellow-04,248 202 60));--mds-file-preview-color:rgb(var(--label-yellow-04,248 202 60));--mds-file-preview-icon-bacground:rgb(var(--label-yellow-10,75 57 3))}:host([format=certificate]),:host([format=document]){--mds-file-preview-icon-color:rgb(var(--label-orange-04,252 196 158));--mds-file-preview-color:rgb(var(--label-orange-04,252 196 158));--mds-file-preview-icon-bacground:rgb(var(--label-orange-10,99 42 3))}:host([format=email]),:host([format=text]){--mds-file-preview-icon-color:rgb(var(--label-blue-04,196 206 253));--mds-file-preview-color:rgb(var(--label-blue-04,196 206 253));--mds-file-preview-icon-bacground:rgb(var(--label-blue-10,6 34 166))}:host([format=image]){--mds-file-preview-icon-color:rgb(var(--label-green-04,113 230 156));--mds-file-preview-color:rgb(var(--label-green-04,113 230 156));--mds-file-preview-icon-bacground:rgb(var(--label-green-10,12 68 33))}:host([format=slide]){--mds-file-preview-icon-color:rgb(var(--label-orchid-04,248 192 220));--mds-file-preview-color:rgb(var(--label-orchid-04,248 192 220));--mds-file-preview-icon-bacground:rgb(var(--label-orchid-10,111 12 61))}:host([format=spreadsheet]){--mds-file-preview-icon-color:rgb(var(--label-lime-04,148 229 25));--mds-file-preview-color:rgb(var(--label-lime-04,148 229 25));--mds-file-preview-icon-bacground:rgb(var(--label-lime-10,43 66 7))}:host([format=vector]){--mds-file-preview-icon-color:rgb(var(--label-aqua-04,81 225 250));--mds-file-preview-color:rgb(var(--label-aqua-04,81 225 250));--mds-file-preview-icon-bacground:rgb(var(--label-aqua-10,2 65 76))}:host([pref-animation=reduce]){--private-file-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host(:hover){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}:host([pref-contrast=more]){background-color:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50);color:rgb(var(--tone-neutral-01,255 255 255))}:host([pref-contrast=more]):host(:hover){-webkit-box-shadow:var(--shadow-outline-strong-100);box-shadow:var(--shadow-outline-strong-100)}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-file-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host(:hover){-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){background-color:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50);color:rgb(var(--tone-neutral-01,255 255 255))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host(:hover){-webkit-box-shadow:var(--shadow-outline-strong-100);box-shadow:var(--shadow-outline-strong-100)}}`;
 
 const MdsFile = class {
     constructor(hostRef) {
@@ -7555,9 +7556,9 @@ const MdsFile = class {
         });
         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);
@@ -7583,6 +7584,27 @@ const MdsFile = class {
     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);
@@ -7596,7 +7618,7 @@ const MdsFile = class {
     }
     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') })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {