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

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

@@ -5,6 +5,7 @@ var cancel = require('./cancel-_rS5f5_p.js');
 var clsx = require('./clsx-BtxeOLZW.js');
 var locale_it = require('./locale.it-D-rxNDkm.js');
 var locale = require('./locale-oGW3SvGJ.js');
+var preference = require('./preference-BdpIXWLP.js');
 require('./file-extensions-D_heujEX.js');
 require('./panorama-Bl9xY7e1.js');
 
@@ -220,7 +221,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) {
@@ -253,9 +254,33 @@ const MdsFilePreview = class {
             });
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.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 = locale_it.getExtensionInfos(this.filename, this.suffix).format;
@@ -279,7 +304,12 @@ const MdsFilePreview = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '11eabf1edcf82c9ec5f0219dcb8e7346de419f8b' }, this.deletable && (index.h("mds-button", { key: '33c9fccce91b022ce5df51d59b00afd56630c7eb', title: this.t.get('remove'), class: "action-delete", icon: cancel.miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent })), index.h("div", { key: 'a6c55bb3d1b5b5bf638a1ff6b30aa42595ef0ce2', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src && !this.message && locale_it.getExtensionInfos(this.filename, this.suffix).preview ? (index.h("mds-img", { src: this.src, class: "preview preview--image", "aspect-ratio": "1/1" })) : (index.h("div", { class: clsx.clsx('preview', !this.message ? 'preview--icon' : 'preview--status') }, this.icon ? (index.h("mds-icon", { class: "icon", name: this.icon })) : (index.h("mds-icon", { class: "icon", name: locale_it.getFormatsVariant(this.filename, this.suffix).icon })), this.message && (index.h("mds-text", { class: "message", typography: "caption", variant: "info" }, this.message)))), index.h("mds-text", { key: '7e47a22e9dc9aa7ff9d4deede3d4b0d4ef041d2d', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), index.h("footer", { key: '8746dac0d12f389f8e6f3b541c6f7553a0ae1ca5', class: clsx.clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && (index.h("mds-text", { key: '995af9155e0c90696915fdad7312dbd3322dc457', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, filesize(Number(this.filesize), { standard: 'jedec' }))), this.filesize && this.filesize !== Number(this.filesize).toString() && (index.h("mds-text", { key: 'f261b9db7f2b63396555f0cedc0e3d10cee4c246', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize)), locale_it.getSuffix(this.filename, this.suffix) && (index.h("mds-badge", { key: 'f20723a233b1b1c6f3bc05a18e70d3c37b94acb8', variant: locale_it.getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultKeyDescription()) }, locale_it.getSuffix(this.filename, this.suffix))), !this.filesize && (index.h("mds-text", { key: '99892ace53a5709df50e01780f84619e5996b744', class: "description", truncate: "word", typography: "caption", variant: "info", title: (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultKeyDescription()) }, (_c = this.description) !== null && _c !== void 0 ? _c : this.t.get(this.getDefaultKeyDescription())))))));
+        return (index.h(index.Host, { key: '93a1ad63edfbf8d92f1b3e5f18c5e8e6e8fe73f3', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.deletable && (index.h("mds-button", { key: '320c2c2a4d48a17162225bdf6da4e4ebf6fdd375', title: this.t.get('remove'), class: "action-delete", icon: cancel.miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent })), index.h("div", { key: '9622502d7bc19319e95a0aaa5d41ade244163be8', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src !== undefined &&
+            this.src !== '' &&
+            (this.message === undefined || this.message === '') &&
+            locale_it.getExtensionInfos(this.filename, this.suffix).preview ? (index.h("mds-img", { src: this.src, class: "preview preview--image", "aspect-ratio": "1/1" })) : (index.h("div", { class: clsx.clsx('preview', this.message === undefined || this.message === ''
+                ? 'preview--icon'
+                : 'preview--status') }, this.icon !== '' ? (index.h("mds-icon", { class: "icon", name: this.icon })) : (index.h("mds-icon", { class: "icon", name: locale_it.getFormatsVariant(this.filename, this.suffix).icon })), this.message && (index.h("mds-text", { class: "message", typography: "caption", variant: "info" }, this.message)))), index.h("mds-text", { key: 'cb9ff19be44c06555a8c10c1f453567c8b35de6c', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), index.h("footer", { key: 'df360d40c6d7e00fb3a0ba71fdbf578ee43c47c8', class: clsx.clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && (index.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() && (index.h("mds-text", { key: 'd5fbe0975bc9ad733fb68e83c3d2c4f926528655', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize)), locale_it.getSuffix(this.filename, this.suffix) && (index.h("mds-badge", { key: 'bf3a948f2d6d8062c1ea105f67d1533c9e5d0f39', variant: locale_it.getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultKeyDescription()) }, locale_it.getSuffix(this.filename, this.suffix))), (this.filesize === undefined || this.filesize === '') && (index.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 index.getElement(this); }
     static get watchers() { return {

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

@@ -4,6 +4,7 @@ var index = require('./index-CNuKb6Lv.js');
 var _commonjsHelpers = require('./_commonjsHelpers-B83fTs8d.js');
 var locale_it = require('./locale.it-D-rxNDkm.js');
 var locale = require('./locale-oGW3SvGJ.js');
+var preference = require('./preference-BdpIXWLP.js');
 require('./file-extensions-D_heujEX.js');
 require('./panorama-Bl9xY7e1.js');
 
@@ -7543,7 +7544,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) {
@@ -7557,9 +7558,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 } = locale_it.getExtensionInfos(this.filename, this.suffix);
@@ -7579,9 +7580,33 @@ const MdsFile = class {
         };
         this.getDefaultDescription = () => locale_it.getExtensionInfos(this.filename, this.suffix).description;
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.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);
@@ -7595,7 +7620,7 @@ const MdsFile = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: 'fc07d6520462d6877b2ce80c20a635a3db76562f', tabindex: "0", onClick: this.handleOnClick }, index.h("div", { key: 'a1a065c686ef011224c7648d0101d3960f23e738', class: "preview" }, this.preview !== undefined ? (index.h("div", { class: "image-preview", style: { backgroundImage: `url(${this.preview})` } })) : (index.h("mds-icon", { class: "icon-preview", name: locale_it.getFormatsVariant(this.filename, this.suffix).icon })), index.h("div", { key: '3a4741e0b175400d4954fd1761da8b2d1bab6cb9', class: "download-icon" }, index.h("mds-icon", { key: '48dc1b1b5af3b9989ccc75be86e3a7beb24bc440', name: miOutlineFileDownload }))), index.h("div", { key: 'fc001287ab920f2fae34b5bcfae4c95541fa451a', class: "info" }, index.h("div", { key: '174807172e1a46f8e64752698f1604fd28549b9c', class: "filename", title: this.filename }, index.h("mds-text", { key: '9750f49569fee6b3f419c02776921ca47663f590', truncate: "word", typography: "h6", class: "name" }, locale_it.getName(this.filename)), this.suffix === undefined && locale_it.getSuffix(this.filename, this.suffix) && (index.h("mds-text", { key: '9bab2d991fdf0a6a37cc68555386a2d13c8b631f', typography: "h6", class: "extension" }, ".", locale_it.getSuffix(this.filename, this.suffix)))), index.h("div", { key: 'f06aff476d27046ef4558c9ea65ee00d10fc740d', class: "detail" }, locale_it.getSuffix(this.filename, this.suffix) && (index.h("mds-badge", { key: 'f226817fc6681ce5f770475d553e88ad3cd90966', variant: locale_it.getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, locale_it.getSuffix(this.filename, this.suffix))), index.h("mds-text", { key: '2856f34ab2c0bb46d77b74cb54d1d79131616457', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultDescription()) }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultDescription())))), this.wasDownloaded && this.showDownloadedIcon && (index.h("div", { key: '8016b84257c95b7a9505f10e907c801f3561f993', class: "indicator" }, index.h("i", { key: '78e44bf63ab425d94508335d006c4bdfda442101', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.t.get('alreadyDownloaded') })))));
+        return (index.h(index.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 }, index.h("div", { key: '8d28d65986c17add1ca6368ccf2b5a10e58058d4', class: "preview" }, this.preview !== undefined ? (index.h("div", { class: "image-preview", style: { backgroundImage: `url(${this.preview})` } })) : (index.h("mds-icon", { class: "icon-preview", name: locale_it.getFormatsVariant(this.filename, this.suffix).icon })), index.h("div", { key: '7fbaeada2247cea64aff5b21714dc5ef540229de', class: "download-icon" }, index.h("mds-icon", { key: 'b86c2349ced351a6d86f43e6e3a51cd5f9729254', name: miOutlineFileDownload }))), index.h("div", { key: '9749f541e33c934d8d4beb9a92e1238f8b1146cc', class: "info" }, index.h("div", { key: 'd16f79e79a544bbab2bd02d9ef130654c5737f78', class: "filename", title: this.filename }, index.h("mds-text", { key: 'fb91eeb270e446cd871b97c6a8048cd0e7209ca6', truncate: "word", typography: "h6", class: "name" }, locale_it.getName(this.filename)), this.suffix === undefined && locale_it.getSuffix(this.filename, this.suffix) && (index.h("mds-text", { key: '6d3f3e6d6def65dbf20ba578f2ba7ccd7701ee3e', typography: "h6", class: "extension" }, ".", locale_it.getSuffix(this.filename, this.suffix)))), index.h("div", { key: 'dea8f443f6c3b5fb286689bf6899ac63ca6d7cdc', class: "detail" }, locale_it.getSuffix(this.filename, this.suffix) && (index.h("mds-badge", { key: '7d943721238ef3f1fe159ba29aabdd0a15ed5dad', variant: locale_it.getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, locale_it.getSuffix(this.filename, this.suffix))), index.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 && (index.h("div", { key: '2bec5d1651a5819b5bce22740fc9163c70f9f388', class: "indicator" }, index.h("i", { key: 'e3311e52eda56c0eec42fdfd0b6ea84016c2ecd3', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.t.get('alreadyDownloaded') })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/mds-filter-item.cjs.entry.js

@@ -2,8 +2,9 @@
 
 var index = require('./index-CNuKb6Lv.js');
 var keyboardManager = require('./keyboard-manager-BXKT5TGW.js');
+var preference = require('./preference-BdpIXWLP.js');
 
-const mdsFilterItemCss = () => `@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-filter-item-count-background-default:rgb(var(--tone-neutral-08,107 107 107));--mds-filter-item-count-color-default:rgb(var(--tone-neutral-02,244 244 244));--mds-filter-item-count-background-selected:rgb(var(--tone-neutral-05,197 197 197));--mds-filter-item-count-color-selected:rgb(var(--tone-neutral,0 0 0))}}}@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-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-filter-item-count-background-default:rgb(var(--tone-neutral-08,107 107 107));--mds-filter-item-count-color-default:rgb(var(--tone-neutral-02,244 244 244));--mds-filter-item-count-background-selected:rgb(var(--tone-neutral-05,197 197 197));--mds-filter-item-count-color-selected:rgb(var(--tone-neutral,0 0 0));align-items:center;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));border-radius:1000px;color:rgb(var(--tone-neutral-03,233 233 233));cursor:pointer;display:flex;fill:currentColor;gap:calc(var(--spacing,.0025rem)*100);justify-content:center;outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));padding:calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*400);transition-duration:.2s;-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-property:background-color,box-shadow,color,outline,outline-offset;transition-timing-function:ease-in-out;-webkit-transition-timing-function:var(--ease-out);transition-timing-function:var(--ease-out);-webkit-user-select:none;user-select:none;white-space:nowrap}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}mds-text{white-space:nowrap}.count{align-items:center;background-color:var(--mds-filter-item-count-background-default,rgb(var(--tone-neutral-08,107 107 107)));border-radius:calc(var(--spacing,.0025rem)*400);box-sizing:border-box;color:var(--mds-filter-item-count-color-default,rgb(var(--tone-neutral-02,244 244 244)));display:inline-flex;flex-shrink:0;height:calc(var(--spacing,.0025rem)*400);justify-content:center;min-width:calc(var(--spacing,.0025rem)*400);padding-left:calc(var(--spacing,.0025rem)*150);padding-right:calc(var(--spacing,.0025rem)*150);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,color;-webkit-transition-timing-function:var(--ease-out);transition-timing-function:var(--ease-out);-webkit-user-select:none;user-select:none}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host([icon]:not([label])){height:calc(var(--spacing,.0025rem)*900);padding:0;width:calc(var(--spacing,.0025rem)*900)}:host(:hover),:host([selected]:not([selected=false])){background-color:rgb(var(--tone-neutral,0 0 0))}:host(:hover){-webkit-box-shadow:var(--shadow-sm,0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a);box-shadow:var(--shadow-sm,0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a)}:host([selected]:not([selected=false])){color:rgb(var(--tone-neutral-01,255 255 255))}:host([selected]:not([selected=false])) .count{background-color:var(--mds-filter-item-count-background-selected,rgb(var(--tone-neutral-05,197 197 197)));color:var(--mds-filter-item-count-color-selected,rgb(var(--tone-neutral,0 0 0)))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){background-color:rgb(var(--tone-neutral-10,60 60 60))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)):host([selected]:not([selected=false])){background-color:rgb(var(--tone-neutral-08,107 107 107));-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);box-shadow:var(--shadow-outline)}:host-context(:root.pref-contrast-more):host([selected]:not([selected=false])){-webkit-box-shadow:var(--shadow-outline-strong-50);box-shadow:var(--shadow-outline-strong-50)}:host-context(:root.pref-contrast-more):host(:hover){-webkit-box-shadow:var(--shadow-outline-strong-50);box-shadow:var(--shadow-outline-strong-50)}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){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]))){background-color:rgb(var(--tone-neutral-10,60 60 60))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))):host([selected]:not([selected=false])){background-color:rgb(var(--tone-neutral-08,107 107 107));-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);box-shadow:var(--shadow-outline)}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host(:hover),:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([selected]:not([selected=false])){-webkit-box-shadow:var(--shadow-outline-strong-50);box-shadow:var(--shadow-outline-strong-50)}}`;
+const mdsFilterItemCss = () => `@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-filter-item-count-background-default:rgb(var(--tone-neutral-08,107 107 107));--mds-filter-item-count-color-default:rgb(var(--tone-neutral-02,244 244 244));--mds-filter-item-count-background-selected:rgb(var(--tone-neutral-05,197 197 197));--mds-filter-item-count-color-selected:rgb(var(--tone-neutral,0 0 0))}}}@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-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-filter-item-transition-duration:var(--duration-200,.2s);--private-filter-item-transition-duration:var(--mds-filter-item-transition-duration);--mds-filter-item-count-background-default:rgb(var(--tone-neutral-08,107 107 107));--mds-filter-item-count-color-default:rgb(var(--tone-neutral-02,244 244 244));--mds-filter-item-count-background-selected:rgb(var(--tone-neutral-05,197 197 197));--mds-filter-item-count-color-selected:rgb(var(--tone-neutral,0 0 0));align-items:center;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));border-radius:1000px;color:rgb(var(--tone-neutral-03,233 233 233));cursor:pointer;display:flex;fill:currentColor;gap:calc(var(--spacing,.0025rem)*100);justify-content:center;outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));padding:calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*400);transition-duration:.2s;-webkit-transition-duration:var(--private-filter-item-transition-duration);transition-duration:var(--private-filter-item-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-property:background-color,box-shadow,color,outline,outline-offset;transition-timing-function:ease-in-out;-webkit-transition-timing-function:var(--ease-out);transition-timing-function:var(--ease-out);-webkit-user-select:none;user-select:none;white-space:nowrap}:host:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}mds-text{white-space:nowrap}.count{align-items:center;background-color:var(--mds-filter-item-count-background-default,rgb(var(--tone-neutral-08,107 107 107)));border-radius:calc(var(--spacing,.0025rem)*400);box-sizing:border-box;color:var(--mds-filter-item-count-color-default,rgb(var(--tone-neutral-02,244 244 244)));display:inline-flex;flex-shrink:0;height:calc(var(--spacing,.0025rem)*400);justify-content:center;min-width:calc(var(--spacing,.0025rem)*400);padding-left:calc(var(--spacing,.0025rem)*150);padding-right:calc(var(--spacing,.0025rem)*150);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,color;-webkit-transition-timing-function:var(--ease-out);transition-timing-function:var(--ease-out);-webkit-user-select:none;user-select:none}:host(:focus-visible){--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}:host([icon]:not([label])){height:calc(var(--spacing,.0025rem)*900);padding:0;width:calc(var(--spacing,.0025rem)*900)}:host(:hover),:host([selected]:not([selected=false])){background-color:rgb(var(--tone-neutral,0 0 0))}:host(:hover){-webkit-box-shadow:var(--shadow-sm,0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a);box-shadow:var(--shadow-sm,0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a)}:host([selected]:not([selected=false])){color:rgb(var(--tone-neutral-01,255 255 255))}:host([selected]:not([selected=false])) .count{background-color:var(--mds-filter-item-count-background-selected,rgb(var(--tone-neutral-05,197 197 197)));color:var(--mds-filter-item-count-color-selected,rgb(var(--tone-neutral,0 0 0)))}:host([pref-animation=reduce]){--private-filter-item-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){background-color:rgb(var(--tone-neutral-10,60 60 60))}:host([pref-theme=dark]:not([pref-theme-scheme=light])):host([selected]:not([selected=false])){background-color:rgb(var(--tone-neutral-08,107 107 107));-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);box-shadow:var(--shadow-outline)}:host([pref-contrast=more]):host(:hover),:host([pref-contrast=more]):host([selected]:not([selected=false])){-webkit-box-shadow:var(--shadow-outline-strong-50);box-shadow:var(--shadow-outline-strong-50)}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-filter-item-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){background-color:rgb(var(--tone-neutral-10,60 60 60))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))):host([selected]:not([selected=false])){background-color:rgb(var(--tone-neutral-08,107 107 107));-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);box-shadow:var(--shadow-outline)}}@media (prefers-contrast:more){:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host(:hover),:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([selected]:not([selected=false])){-webkit-box-shadow:var(--shadow-outline-strong-50);box-shadow:var(--shadow-outline-strong-50)}}`;
 
 const MdsFilterItem = class {
     constructor(hostRef) {
@@ -14,17 +15,36 @@ const MdsFilterItem = class {
             this.selected = !this.selected;
             this.selectedEvent.emit({ id: this.element.id, selected: this.selected });
         };
-        this.disconnectedCallback = () => {
-            this.km.detachClickBehavior();
-        };
+    }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
     }
     componentDidLoad() {
         this.km.addElement(this.element);
         this.km.attachClickBehavior();
     }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+        this.km.detachClickBehavior();
+    }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'f624e29b6b4b094fa7dc065b13c12b5dbe0b7d4b', tabindex: this.disabled ? '-1' : '0', role: "menuitem", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : this.icon, onClick: this.toggle }, this.icon && index.h("mds-icon", { key: 'd6afedf47e3216cf03608a33d4fbeddd63c44ed1', "aria-hidden": "true", name: this.icon }), this.label && (index.h("mds-text", { key: 'b26f486d9008c2ed419285e695e6c06c59e50a73', "aria-hidden": "true", variant: "info", typography: "caption" }, this.label)), this.count && (index.h("div", { key: '12a9e90f06b125344dc059978311adc3abb60363', class: "count" }, index.h("mds-text", { key: 'c43a05d0da075b1b61d589d4a3b0e93d9806428a', "aria-hidden": "true", variant: "info", typography: "option" }, this.count)))));
+        return (index.h(index.Host, { key: 'ebc068baa301a93988069f6b8c04ffcf716844e6', tabindex: this.disabled ? '-1' : '0', role: "menuitem", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : this.icon, onClick: this.toggle, "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.icon && index.h("mds-icon", { key: '7fec8ef34bb78a5fbc665c47534b015ec02bc68d', "aria-hidden": "true", name: this.icon }), this.label && (index.h("mds-text", { key: '556ad11dc7f67735acea552f78b79da8fd8b0d1e', "aria-hidden": "true", variant: "info", typography: "caption" }, this.label)), this.count && (index.h("div", { key: '5fafb0a462e56e68dc3a8e928e08692b41135129', class: "count" }, index.h("mds-text", { key: '4fdb750c3f12a25bd83d2cf5038d388ec58566e7', "aria-hidden": "true", variant: "info", typography: "option" }, this.count)))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/mds-filter.cjs.entry.js

@@ -2,9 +2,10 @@
 
 var index = require('./index-CNuKb6Lv.js');
 var clsx = require('./clsx-BtxeOLZW.js');
+var preference = require('./preference-BdpIXWLP.js');
 var close = require('./close-BS8N44H4.js');
 
-const mdsFilterCss = () => `@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-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-gap:calc(var(--spacing,.0025rem)*200);--mds-filter-items-padding:calc(var(--spacing,.0025rem)*200);--mds-filter-items-radius:var(--radius-full,1000px);--mds-filter-items-scroll-behavior:smooth;--mds-filter-label-padding:0 calc(var(--spacing,.0025rem)*600);--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-06,158 158 158));--mds-filter-wrapper-shadow-opacity:.1}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-filter-item,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}@property --mds-filter-items-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}@property --mds-filter-wrapper-shadow-opacity{syntax:"<number>";inherits:false;initial-value:.1}:host{--mds-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-gap:calc(var(--spacing,.0025rem)*200);--mds-filter-items-padding:calc(var(--spacing,.0025rem)*200);--mds-filter-items-radius:var(--radius-full,1000px);--mds-filter-items-scroll-behavior:smooth;--mds-filter-label-padding:0 calc(var(--spacing,.0025rem)*600);--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-06,158 158 158));--mds-filter-wrapper-shadow:0 0 0 2px var(--mds-filter-wrapper-shadow-color,rgb(var(--tone-neutral-06,158 158 158))) inset;--mds-filter-wrapper-shadow-opacity:.1;display:grid;gap:calc(var(--spacing,.0025rem)*100);grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content}.items{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;background-color:var(--mds-filter-items-background,rgb(var(--tone-neutral-09,76 76 76)));border-radius:var(--mds-filter-items-radius,var(--radius-full,1000px));display:flex;gap:var(--mds-filter-items-gap,calc(var(--spacing,.0025rem)*200));overflow:auto;padding:var(--mds-filter-items-padding,calc(var(--spacing,.0025rem)*200));position:relative;scroll-behavior:var(--mds-filter-items-scroll-behavior,smooth);-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.items-wrapper{display:grid;overflow:hidden;position:relative}.items-wrapper:after{border-radius:var(--mds-filter-items-radius,var(--radius-full,1000px));-webkit-box-shadow:var(--mds-filter-wrapper-shadow);box-shadow:var(--mds-filter-wrapper-shadow);content:"";inset:0;opacity:var(--mds-filter-wrapper-shadow-opacity,.1);pointer-events:none;position:absolute}.items::-webkit-scrollbar{display:none}.label{padding:var(--mds-filter-label-padding,0 calc(var(--spacing,.0025rem)*600))}.active{background-color:var(--mds-filter-items-background-active,rgb(var(--tone-neutral-09,76 76 76)))}.reset{display:flex;flex-grow:1;justify-content:flex-end;transform-origin:50%}.reset,.reset-button{transform:scale(0);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:transform;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.reset-button-opened,:host([reset]:not([reset=false])) .reset{transform:scale(1)}:host-context(:root.pref-animation-reduce){--mds-filter-items-scroll-behavior:auto;transition-duration:0s}:is(:host-context(:root.pref-animation-reduce) .reset-button,:host-context(:root.pref-animation-reduce) .items){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .items{--mds-filter-items-background-active:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76))}:host-context(:root.pref-contrast-more){--mds-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-wrapper-shadow-opacity:30%;--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-07,134 134 134));--mds-filter-wrapper-shadow:0 0 0 calc(var(--spacing,.0025rem)*50) var(--mds-filter-wrapper-shadow-color,rgb(var(--tone-neutral-06,158 158 158))) inset}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){--mds-filter-items-scroll-behavior:auto;transition-duration:0s}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .items,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .reset-button{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]))) .items{--mds-filter-items-background-active:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-wrapper-shadow-opacity:30%;--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-07,134 134 134));--mds-filter-wrapper-shadow:0 0 0 calc(var(--spacing,.0025rem)*50) var(--mds-filter-wrapper-shadow-color,rgb(var(--tone-neutral-06,158 158 158))) inset}}`;
+const mdsFilterCss = () => `@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-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-gap:calc(var(--spacing,.0025rem)*200);--mds-filter-items-padding:calc(var(--spacing,.0025rem)*200);--mds-filter-items-radius:var(--radius-full,1000px);--mds-filter-items-scroll-behavior:smooth;--mds-filter-label-padding:0 calc(var(--spacing,.0025rem)*600);--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-06,158 158 158));--mds-filter-wrapper-shadow-opacity:.1}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-filter-item,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}@property --mds-filter-items-scroll-behavior{syntax:"smooth|auto";inherits:false;initial-value:smooth}@property --mds-filter-wrapper-shadow-opacity{syntax:"<number>";inherits:false;initial-value:.1}:host{--mds-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-gap:calc(var(--spacing,.0025rem)*200);--mds-filter-items-padding:calc(var(--spacing,.0025rem)*200);--mds-filter-items-radius:var(--radius-full,1000px);--mds-filter-items-scroll-behavior:smooth;--mds-filter-items-transition-duration:var(--duration-300,.3s);--private-filter-items-transition-duration:var(--mds-filter-items-transition-duration);--mds-filter-label-padding:0 calc(var(--spacing,.0025rem)*600);--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-06,158 158 158));--mds-filter-wrapper-shadow:0 0 0 2px var(--mds-filter-wrapper-shadow-color,rgb(var(--tone-neutral-06,158 158 158))) inset;--mds-filter-wrapper-shadow-opacity:.1;display:grid;gap:calc(var(--spacing,.0025rem)*100);grid-auto-rows:-webkit-min-content;grid-auto-rows:min-content}.items{-webkit-overflow-scrolling:touch;-ms-overflow-style:none;background-color:var(--mds-filter-items-background,rgb(var(--tone-neutral-09,76 76 76)));border-radius:var(--mds-filter-items-radius,var(--radius-full,1000px));display:flex;gap:var(--mds-filter-items-gap,calc(var(--spacing,.0025rem)*200));overflow:auto;padding:var(--mds-filter-items-padding,calc(var(--spacing,.0025rem)*200));position:relative;scroll-behavior:var(--mds-filter-items-scroll-behavior,smooth);-webkit-scroll-snap-type:x mandatory;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-transition-duration:var(--private-filter-items-transition-duration);transition-duration:var(--private-filter-items-transition-duration);transition-property:background-color;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.items-wrapper{display:grid;overflow:hidden;position:relative}.items-wrapper:after{border-radius:var(--mds-filter-items-radius,var(--radius-full,1000px));-webkit-box-shadow:var(--mds-filter-wrapper-shadow);box-shadow:var(--mds-filter-wrapper-shadow);content:"";inset:0;opacity:var(--mds-filter-wrapper-shadow-opacity,.1);pointer-events:none;position:absolute}.items::-webkit-scrollbar{display:none}.label{padding:var(--mds-filter-label-padding,0 calc(var(--spacing,.0025rem)*600))}.active{background-color:var(--mds-filter-items-background-active,rgb(var(--tone-neutral-09,76 76 76)))}.reset{display:flex;flex-grow:1;justify-content:flex-end;transform-origin:50%}.reset,.reset-button{transform:scale(0);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:transform;-webkit-transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1));transition-timing-function:var(--ease-in-out-expo,cubic-bezier(1,0,0,1))}.reset-button-opened,:host([reset]:not([reset=false])) .reset{transform:scale(1)}:host([pref-animation=reduce]){--private-filter-items-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .items{--mds-filter-items-background-active:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76))}:host([pref-contrast=more]){--mds-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-wrapper-shadow-opacity:30%;--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-07,134 134 134));--mds-filter-wrapper-shadow:0 0 0 calc(var(--spacing,.0025rem)*50) var(--mds-filter-wrapper-shadow-color,rgb(var(--tone-neutral-06,158 158 158))) inset}@media (prefers-reduced-motion:reduce){:host{--mds-filter-items-scroll-behavior:auto}:host(:not([pref-animation])),:host([pref-animation=system]){--private-filter-items-transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))) .items{--mds-filter-items-background-active:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-items-background:rgb(var(--tone-neutral-09,76 76 76))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-filter-items-background-active:rgb(var(--tone-neutral-09,76 76 76));--mds-filter-items-background:rgb(var(--tone-neutral-10,60 60 60));--mds-filter-wrapper-shadow-opacity:30%;--mds-filter-wrapper-shadow-color:rgb(var(--tone-neutral-07,134 134 134));--mds-filter-wrapper-shadow:0 0 0 calc(var(--spacing,.0025rem)*50) var(--mds-filter-wrapper-shadow-color,rgb(var(--tone-neutral-06,158 158 158))) inset}}`;
 
 const MdsFilter = class {
     constructor(hostRef) {
@@ -60,6 +61,27 @@ const MdsFilter = class {
             return list.toString();
         };
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     componentWillLoad() {
         const items = this.queryItems();
         items.forEach((item, key) => {
@@ -68,7 +90,7 @@ const MdsFilter = class {
         this.checkSelectedItem();
     }
     activeEventHandler(event) {
-        this.lastSelectedItem = Number(event.detail.id ? event.detail.id.replace('item-', '') : 0);
+        this.lastSelectedItem = Number(event.detail.id !== '' ? event.detail.id.replace('item-', '') : 0);
         this.scrollTabs();
         const items = this.queryItems();
         if (this.multiple) {
@@ -99,7 +121,7 @@ const MdsFilter = class {
         this.changedEvent.emit({ children: items, value: this.itemsValues() });
     }
     render() {
-        return (index.h(index.Host, { key: 'df023e26a0590c5eb39c89b1b659c5ee6acbfe60', "aria-label": this.label, role: "menubar" }, this.label && (index.h("mds-text", { key: '0f18b755f675bf441473c1e9c9ec9aba3dfc14c7', class: "label", typography: "label" }, this.label)), index.h("div", { key: 'a2562aa4dc33a777f078ed2a043d6526d41d1fe9', class: "items-wrapper" }, index.h("div", { key: '740cf81017bc78a2cb1005438443a97ee164e097', class: clsx.clsx('items', this.active && 'active') }, index.h("slot", { key: '07905e90c203d3201c94860730d16cf17bdc3ee6' }), index.h("div", { key: '2feffe6e6e1f149d67303362d83fbc098426ca33', class: clsx.clsx('reset', this.active && 'reset--opened') }, index.h("mds-filter-item", { key: '07f3cdb2b3cfd71ec0ebc2eeab8d2c3f4b33c9f8', selected: this.active, disabled: !this.active && this.reset, class: clsx.clsx('reset-button', this.active && 'reset-button-opened'), icon: close.miBaselineClose, onClick: this.resetItems }))))));
+        return (index.h(index.Host, { key: 'f0478377115975741341bbe81fe35b376bc6d97a', "aria-label": this.label, role: "menubar", "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.label && (index.h("mds-text", { key: '8bcfb91192f373ab2a83b1a0a0292dcea1464a30', class: "label", typography: "label" }, this.label)), index.h("div", { key: 'ea2371d425dbf8f2df02d532d6d67b2f6f140b9b', class: "items-wrapper" }, index.h("div", { key: '21244c57c33d3117f29a4cbc7d91197ee8e1537c', class: clsx.clsx('items', this.active && 'active') }, index.h("slot", { key: '5c7a609acf560f1845a6e2429bfb2502cd0dd27d' }), index.h("div", { key: '1540ff802c8faa39e468f8171e48f24942296e7a', class: clsx.clsx('reset', this.active && 'reset--opened') }, index.h("mds-filter-item", { key: '7daef3e52613b52077fb9960bcb90e30ebe063b7', selected: this.active, disabled: !this.active && this.reset, class: clsx.clsx('reset-button', this.active && 'reset-button-opened'), icon: close.miBaselineClose, onClick: this.resetItems }))))));
     }
     get element() { return index.getElement(this); }
 };

package/dist/cjs/mds-header-bar.cjs.entry.js

@@ -1,10 +1,11 @@
 'use strict';
 
 var index = require('./index-CNuKb6Lv.js');
+var preference = require('./preference-BdpIXWLP.js');
 
 var miRoundMenu = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/></svg>`;
 
-const mdsHeaderBarCss = () => `@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-header-bar-hamburger-color:rgb(var(--tone-neutral-03,233 233 233))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-button: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-header-bar-hamburger-color:rgb(var(--tone-neutral-03,233 233 233));background-color:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);box-shadow:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);interpolate-size:allow-keywords;display:flex;inset:0 0 auto;justify-content:center;margin-left:auto;margin-right:auto;max-width:100%;padding:calc(var(--spacing,.0025rem)*400) calc(var(--spacing,.0025rem)*600);position:fixed;transition-duration:.5s;transition-property:background-color,border-radius,margin,max-width,transform,width;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));width:auto;z-index:var(--mds-header-z-index,1000)}.logo{color:inherit;display:flex}.content{align-items:center;display:flex;flex-grow:1;gap:calc(var(--spacing,.0025rem)*400);justify-content:space-between;max-width:var(--breakpoint-wide,1280px)}.actions{display:flex;gap:calc(var(--spacing,.0025rem)*600)}.nav{display:inline-flex;flex-shrink:0;gap:calc(var(--spacing,.0025rem)*400)}.menu{--mds-button-border-opacity:0;fill:var(--mds-header-bar-hamburger-color,rgb(var(--tone-neutral-03,233 233 233)));padding:0}.menu::part(icon){width:calc(var(--spacing,.0025rem)*800)}:host([menu=none]) .menu,:host([nav=none]) .nav{display:none}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){background-color:rgb(var(--tone-neutral-10,60 60 60));-webkit-box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a);box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a)}:host-context(:root.pref-contrast-more){--mds-header-bar-hamburger-color:rgb(var(--tone-neutral-01,255 255 255));-webkit-box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040);box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}@media not all and (min-width:768px){:host([menu=desktop]) .menu,:host([nav=desktop]) .nav{display:none}}@media (min-width:1024px){:host([menu=mobile]) .menu,:host([nav=mobile]) .nav{display:none}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){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]))){background-color:rgb(var(--tone-neutral-10,60 60 60));-webkit-box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a);box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a)}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-header-bar-hamburger-color:rgb(var(--tone-neutral-01,255 255 255));-webkit-box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040);box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}}`;
+const mdsHeaderBarCss = () => `@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-header-bar-hamburger-color:rgb(var(--tone-neutral-03,233 233 233))}}}:host(:not(:is([hydrated],.hydrated))),mds-button: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-header-bar-hamburger-color:rgb(var(--tone-neutral-03,233 233 233));--mds-header-bar-transition-duration:.5s;--private-header-bar-transition-duration:var(--mds-header-bar-transition-duration);background-color:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);box-shadow:var(--shadow-md-sharp,0 0 1px 1px #0000000f,0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f);interpolate-size:allow-keywords;display:flex;inset:0 0 auto;justify-content:center;margin-left:auto;margin-right:auto;max-width:100%;padding:calc(var(--spacing,.0025rem)*400) calc(var(--spacing,.0025rem)*600);position:fixed;-webkit-transition-duration:var(--private-header-bar-transition-duration);transition-duration:var(--private-header-bar-transition-duration);transition-property:background-color,border-radius,margin,max-width,transform,width;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));width:auto;z-index:var(--mds-header-z-index,1000)}.logo{color:inherit;display:flex}.content{align-items:center;display:flex;flex-grow:1;gap:calc(var(--spacing,.0025rem)*400);justify-content:space-between;max-width:var(--breakpoint-wide,1280px)}.actions{display:flex;gap:calc(var(--spacing,.0025rem)*600)}.nav{display:inline-flex;flex-shrink:0;gap:calc(var(--spacing,.0025rem)*400)}.menu{--mds-button-border-opacity:0;fill:var(--mds-header-bar-hamburger-color,rgb(var(--tone-neutral-03,233 233 233)));padding:0}.menu::part(icon){width:calc(var(--spacing,.0025rem)*800)}:host([menu=none]) .menu,:host([nav=none]) .nav{display:none}:host([pref-animation=reduce]){--private-header-bar-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){background-color:rgb(var(--tone-neutral-10,60 60 60));-webkit-box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a);box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a)}:host([pref-contrast=more]){--mds-header-bar-hamburger-color:rgb(var(--tone-neutral-01,255 255 255));-webkit-box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040);box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}@media not all and (min-width:768px){:host([menu=desktop]) .menu,:host([nav=desktop]) .nav{display:none}}@media (min-width:1024px){:host([menu=mobile]) .menu,:host([nav=mobile]) .nav{display:none}}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-header-bar-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){background-color:rgb(var(--tone-neutral-10,60 60 60));-webkit-box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a);box-shadow:var(--shadow-outline),var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a)}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-header-bar-hamburger-color:rgb(var(--tone-neutral-01,255 255 255));-webkit-box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040);box-shadow:var(--shadow-outline-strong-50),var(--shadow-2xl,0 25px 50px -12px #00000040)}}`;
 
 const MdsHeaderBar = class {
     constructor(hostRef) {
@@ -25,14 +26,39 @@ const MdsHeaderBar = class {
             (_a = this.host.closest('mds-header')) === null || _a === void 0 ? void 0 : _a.setOpened(true);
         };
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     componentWillLoad() {
         this.hasNav = this.host.querySelector(':scope > [slot="nav"]') !== null;
     }
+    /**
+     * Opens or closes the header bar.
+     * @param isOpened whether the header bar should be opened
+     */
     async setOpened(isOpened = true) {
         this.isOpened = isOpened;
     }
     render() {
-        return (index.h(index.Host, { key: 'a178d875406a0d139ec4d4853f2da7495b86374c' }, index.h("div", { key: '51e3151cae7173f67d7beb22dca28ea89a9cdf03', class: "content", part: "content" }, index.h("div", { key: '9648cf1eaa609f2fdb6ba28e5b63c4b0223729fa', class: "logo" }, index.h("slot", { key: 'edf1ea3ba82bd5e9302659ca76627998aebcfea1' })), index.h("div", { key: '87845ffe8e7181e8ec572c28a55c0a323808f2a6', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav && (index.h("nav", { key: '6a7911143923bf0de2d23c002bd1765cb2801859', class: "nav", part: "nav" }, index.h("slot", { key: '58b8cbfe785982b04b9ac1d4dbdfa2a44fe20053', name: "nav" }))), this.menu !== 'none' && (index.h("mds-button", { key: 'a948a0b38722ee2c6802f9ad62278f2af6249e38', class: "menu", variant: "dark", tone: "text", icon: miRoundMenu, onClick: this.open, part: "hamburger" }))))));
+        return (index.h(index.Host, { key: 'b1c85dfc8206bae1df8c6646da41ad85775c0eb7', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("div", { key: '3f73b7a9ffbf542b60c81e313b1164f6208eb4f2', class: "content", part: "content" }, index.h("div", { key: '47f423bd40c504c2e058152ce8ca9f0a8ca45326', class: "logo" }, index.h("slot", { key: 'd0a7f9e9d818fd3e02418bd0cd570eb292cf1095' })), index.h("div", { key: '4fe0b5d41e3c38ab175a71c8f949ab40c98e30fa', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav && (index.h("nav", { key: '4668b44604cd6619d4b8b894e4bb2086abea0e15', class: "nav", part: "nav" }, index.h("slot", { key: '0d75f2f06c05c5613b107d3a96a2ecba2bdedcb6', name: "nav" }))), this.menu !== 'none' && (index.h("mds-button", { key: '225c889c6731cd4db3866ec57f996348f9475ea9', class: "menu", variant: "dark", tone: "text", icon: miRoundMenu, onClick: this.open, part: "hamburger" }))))));
     }
     get host() { return index.getElement(this); }
 };