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

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BfAC4pqU.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
 import { m as miBaselineCancel } from './cancel-BJ8rpzfj.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 import { f as fileDescriptionLocaleIt, a as fileDescriptionLocaleEs, b as fileDescriptionLocaleEn, c as fileDescriptionLocaleEl, g as getExtensionInfos, d as getSuffix, e as getFormatsVariant } from './locale.it-Dj8sWDfj.js';
@@ -218,7 +218,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:1;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 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 MdsFilePreview = class {
     constructor(hostRef) {
@@ -251,6 +251,9 @@ 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);
     }
@@ -277,14 +280,23 @@ const MdsFilePreview = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '11eabf1edcf82c9ec5f0219dcb8e7346de419f8b' }, this.deletable && (h("mds-button", { key: '33c9fccce91b022ce5df51d59b00afd56630c7eb', title: this.t.get('remove'), class: "action-delete", icon: miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent })), h("div", { key: 'a6c55bb3d1b5b5bf638a1ff6b30aa42595ef0ce2', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src && !this.message && getExtensionInfos(this.filename, this.suffix).preview ? (h("mds-img", { src: this.src, class: "preview preview--image", "aspect-ratio": "1/1" })) : (h("div", { class: clsx('preview', !this.message ? 'preview--icon' : 'preview--status') }, this.icon ? (h("mds-icon", { class: "icon", name: this.icon })) : (h("mds-icon", { class: "icon", name: getFormatsVariant(this.filename, this.suffix).icon })), this.message && (h("mds-text", { class: "message", typography: "caption", variant: "info" }, this.message)))), h("mds-text", { key: '7e47a22e9dc9aa7ff9d4deede3d4b0d4ef041d2d', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), h("footer", { key: '8746dac0d12f389f8e6f3b541c6f7553a0ae1ca5', class: clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && (h("mds-text", { key: '995af9155e0c90696915fdad7312dbd3322dc457', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, filesize(Number(this.filesize), { standard: 'jedec' }))), this.filesize && this.filesize !== Number(this.filesize).toString() && (h("mds-text", { key: 'f261b9db7f2b63396555f0cedc0e3d10cee4c246', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize)), getSuffix(this.filename, this.suffix) && (h("mds-badge", { key: 'f20723a233b1b1c6f3bc05a18e70d3c37b94acb8', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultKeyDescription()) }, getSuffix(this.filename, this.suffix))), !this.filesize && (h("mds-text", { key: '99892ace53a5709df50e01780f84619e5996b744', class: "description", truncate: "word", typography: "caption", variant: "info", title: (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultKeyDescription()) }, (_c = this.description) !== null && _c !== void 0 ? _c : this.t.get(this.getDefaultKeyDescription())))))));
+        return (h(Host, { key: '4191a2f8b58aa3fa6f116ecc845c3298643f405c' }, this.deletable && (h("mds-button", { key: 'a3996c3793c86f913286fc416a2f18c251a629e3', title: this.t.get('remove'), class: "action-delete", icon: miBaselineCancel, variant: "light", onClick: this.onClickDeletedEvent })), h("div", { key: 'deb2fcc20862f851d28db79b2cef37c43fb4cc63', class: "card", part: "card", onClick: this.onClickDownloadEvent }, this.src !== undefined &&
+            this.src !== '' &&
+            (this.message === undefined || this.message === '') &&
+            getExtensionInfos(this.filename, this.suffix).preview ? (h("mds-img", { src: this.src, class: "preview preview--image", "aspect-ratio": "1/1" })) : (h("div", { class: clsx('preview', this.message === undefined || this.message === ''
+                ? 'preview--icon'
+                : 'preview--status') }, this.icon !== '' ? (h("mds-icon", { class: "icon", name: this.icon })) : (h("mds-icon", { class: "icon", name: getFormatsVariant(this.filename, this.suffix).icon })), this.message && (h("mds-text", { class: "message", typography: "caption", variant: "info" }, this.message)))), h("mds-text", { key: '9563cde9752cb3ff7778e1971bd8eff1b95edebf', class: "file-name", typography: "h6", variant: "title", truncate: this.truncate, title: this.filename }, this.filename), h("footer", { key: '824bde798749685fe9d989859f16e5fe96635ea8', class: clsx('infos', this.filesize && 'infos--has-file-size') }, this.filesize && this.filesize === Number(this.filesize).toString() && (h("mds-text", { key: 'e709b610d25e8d235b15fd8c47bc25982951f9fa', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, filesize(Number(this.filesize), { standard: 'jedec' }))), this.filesize && this.filesize !== Number(this.filesize).toString() && (h("mds-text", { key: 'd41bb090c1676b67014d11e478f7bc8975ef6b1f', class: "file-size", truncate: "word", typography: "caption", variant: "info" }, this.filesize)), getSuffix(this.filename, this.suffix) && (h("mds-badge", { key: 'd0cdb8b71431114d023e9df7e4cc9c55841b452d', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultKeyDescription()) }, getSuffix(this.filename, this.suffix))), (this.filesize === undefined || this.filesize === '') && (h("mds-text", { key: 'e4b78b52eba52f2cc6632539b56888774d005236', class: "description", truncate: "word", typography: "caption", variant: "info", title: (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultKeyDescription()) }, (_c = this.description) !== null && _c !== void 0 ? _c : this.t.get(this.getDefaultKeyDescription())))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "filename": ["handleFilename"],
-        "downloadable": ["handleDownloadable"]
+        "filename": [{
+                "handleFilename": 0
+            }],
+        "downloadable": [{
+                "handleDownloadable": 0
+            }]
     }; }
 };
-MdsFilePreview.style = mdsFilePreviewCss;
+MdsFilePreview.style = mdsFilePreviewCss();
 
 export { MdsFilePreview as mds_file_preview };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BfAC4pqU.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
 import { a as getAugmentedNamespace, c as commonjsGlobal } from './_commonjsHelpers-E-ZsRS8r.js';
 import { f as fileDescriptionLocaleIt, a as fileDescriptionLocaleEs, b as fileDescriptionLocaleEn, c as fileDescriptionLocaleEl, g as getExtensionInfos, d as getSuffix, h as getName, e as getFormatsVariant } from './locale.it-Dj8sWDfj.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
@@ -7541,7 +7541,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:1;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 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 MdsFile = class {
     constructor(hostRef) {
@@ -7577,6 +7577,9 @@ const MdsFile = class {
         };
         this.getDefaultDescription = () => getExtensionInfos(this.filename, this.suffix).description;
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -7593,13 +7596,15 @@ const MdsFile = class {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: 'fc07d6520462d6877b2ce80c20a635a3db76562f', tabindex: "0", onClick: this.handleOnClick }, h("div", { key: 'a1a065c686ef011224c7648d0101d3960f23e738', class: "preview" }, this.preview !== undefined ? (h("div", { class: "image-preview", style: { backgroundImage: `url(${this.preview})` } })) : (h("mds-icon", { class: "icon-preview", name: getFormatsVariant(this.filename, this.suffix).icon })), h("div", { key: '3a4741e0b175400d4954fd1761da8b2d1bab6cb9', class: "download-icon" }, h("mds-icon", { key: '48dc1b1b5af3b9989ccc75be86e3a7beb24bc440', name: miOutlineFileDownload }))), h("div", { key: 'fc001287ab920f2fae34b5bcfae4c95541fa451a', class: "info" }, h("div", { key: '174807172e1a46f8e64752698f1604fd28549b9c', class: "filename", title: this.filename }, h("mds-text", { key: '9750f49569fee6b3f419c02776921ca47663f590', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && (h("mds-text", { key: '9bab2d991fdf0a6a37cc68555386a2d13c8b631f', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix)))), h("div", { key: 'f06aff476d27046ef4558c9ea65ee00d10fc740d', class: "detail" }, getSuffix(this.filename, this.suffix) && (h("mds-badge", { key: 'f226817fc6681ce5f770475d553e88ad3cd90966', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix))), h("mds-text", { key: '2856f34ab2c0bb46d77b74cb54d1d79131616457', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultDescription()) }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultDescription())))), this.wasDownloaded && this.showDownloadedIcon && (h("div", { key: '8016b84257c95b7a9505f10e907c801f3561f993', class: "indicator" }, h("i", { key: '78e44bf63ab425d94508335d006c4bdfda442101', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.t.get('alreadyDownloaded') })))));
+        return (h(Host, { key: 'c0e9cad18f3aece026683f60c792f7f9cb72fe6d', tabindex: "0", onClick: this.handleOnClick }, h("div", { key: '0549f258474a3bfbb2ce14e425768dccb38a1304', class: "preview" }, this.preview !== undefined ? (h("div", { class: "image-preview", style: { backgroundImage: `url(${this.preview})` } })) : (h("mds-icon", { class: "icon-preview", name: getFormatsVariant(this.filename, this.suffix).icon })), h("div", { key: '6af5acdd202cf3f2c372dae43f7410c021436f8b', class: "download-icon" }, h("mds-icon", { key: 'eb9ca7ad12fe39531da1e765f8a176c84ccd5cbc', name: miOutlineFileDownload }))), h("div", { key: '59091a86effee53feba1f3886d91a0fbcc963ad8', class: "info" }, h("div", { key: 'efdac36e055c89999a2055e344bdd2ead3d4a63b', class: "filename", title: this.filename }, h("mds-text", { key: 'e702e1aad1d32052947b5a915d4dcd4c6e7ba8bc', truncate: "word", typography: "h6", class: "name" }, getName(this.filename)), this.suffix === undefined && getSuffix(this.filename, this.suffix) && (h("mds-text", { key: '83d4b4320310a88bcc7ae8bcec8e5c149de637ba', typography: "h6", class: "extension" }, ".", getSuffix(this.filename, this.suffix)))), h("div", { key: 'ed75683122f0612e5e5d0ae7853be9c53da832f1', class: "detail" }, getSuffix(this.filename, this.suffix) && (h("mds-badge", { key: '46be9c88c56795caf101953fe2faf4202a9800aa', variant: getFormatsVariant(this.filename, this.suffix).variant, tone: "weak", class: "suffix" }, getSuffix(this.filename, this.suffix))), h("mds-text", { key: '9dd1b4541bddb18f74bcc958697d6ebf22b33f6d', truncate: "word", typography: "caption", class: "description", title: (_a = this.description) !== null && _a !== void 0 ? _a : this.t.get(this.getDefaultDescription()) }, (_b = this.description) !== null && _b !== void 0 ? _b : this.t.get(this.getDefaultDescription())))), this.wasDownloaded && this.showDownloadedIcon && (h("div", { key: '72b97352184cc5e7300b9bcc2577db8817465554', class: "indicator" }, h("i", { key: '40968874d424bf044ba5627550550f09eaba43ed', class: "downloaded", innerHTML: miBaselineFileDownloadDone, title: this.t.get('alreadyDownloaded') })))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "filename": ["handleFilename"]
+        "filename": [{
+                "handleFilename": 0
+            }]
     }; }
 };
-MdsFile.style = mdsFileCss;
+MdsFile.style = mdsFileCss();
 
 export { MdsFile as mds_file };

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BfAC4pqU.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
 import { K as KeyboardManager } from './keyboard-manager-BudfaWhu.js';
 
-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 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 MdsFilterItem = class {
     constructor(hostRef) {
@@ -12,20 +12,20 @@ const MdsFilterItem = class {
             this.selected = !this.selected;
             this.selectedEvent.emit({ id: this.element.id, selected: this.selected });
         };
-        this.disconnectedCallback = () => {
-            this.km.detachClickBehavior();
-        };
     }
     componentDidLoad() {
         this.km.addElement(this.element);
         this.km.attachClickBehavior();
     }
+    disconnectedCallback() {
+        this.km.detachClickBehavior();
+    }
     render() {
         var _a;
-        return (h(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 && h("mds-icon", { key: 'd6afedf47e3216cf03608a33d4fbeddd63c44ed1', "aria-hidden": "true", name: this.icon }), this.label && (h("mds-text", { key: 'b26f486d9008c2ed419285e695e6c06c59e50a73', "aria-hidden": "true", variant: "info", typography: "caption" }, this.label)), this.count && (h("div", { key: '12a9e90f06b125344dc059978311adc3abb60363', class: "count" }, h("mds-text", { key: 'c43a05d0da075b1b61d589d4a3b0e93d9806428a', "aria-hidden": "true", variant: "info", typography: "option" }, this.count)))));
+        return (h(Host, { key: '9d4686de0bb4371076bb1d78b428b09efd0946f3', tabindex: this.disabled ? '-1' : '0', role: "menuitem", "aria-label": (_a = this.label) !== null && _a !== void 0 ? _a : this.icon, onClick: this.toggle }, this.icon && h("mds-icon", { key: '9c9c91f67e70442646a2846ab901e8e56de89064', "aria-hidden": "true", name: this.icon }), this.label && (h("mds-text", { key: '6299fdb29e9ed4a29c55c1c818ad0992fcda1b97', "aria-hidden": "true", variant: "info", typography: "caption" }, this.label)), this.count && (h("div", { key: '6df69e3386a6e6b01fc7262c0c70dd75731acd94', class: "count" }, h("mds-text", { key: '01380c1b2d11b56c6b244f5292ff4276c6866786', "aria-hidden": "true", variant: "info", typography: "option" }, this.count)))));
     }
     get element() { return getElement(this); }
 };
-MdsFilterItem.style = mdsFilterItemCss;
+MdsFilterItem.style = mdsFilterItemCss();
 
 export { MdsFilterItem as mds_filter_item };

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BfAC4pqU.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
 import { c as clsx } from './clsx-ChV9xqsO.js';
 import { m as miBaselineClose } from './close-J-ikDhyq.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 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 MdsFilter = class {
     constructor(hostRef) {
@@ -66,7 +66,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) {
@@ -97,10 +97,10 @@ const MdsFilter = class {
         this.changedEvent.emit({ children: items, value: this.itemsValues() });
     }
     render() {
-        return (h(Host, { key: 'df023e26a0590c5eb39c89b1b659c5ee6acbfe60', "aria-label": this.label, role: "menubar" }, this.label && (h("mds-text", { key: '0f18b755f675bf441473c1e9c9ec9aba3dfc14c7', class: "label", typography: "label" }, this.label)), h("div", { key: 'a2562aa4dc33a777f078ed2a043d6526d41d1fe9', class: "items-wrapper" }, h("div", { key: '740cf81017bc78a2cb1005438443a97ee164e097', class: clsx('items', this.active && 'active') }, h("slot", { key: '07905e90c203d3201c94860730d16cf17bdc3ee6' }), h("div", { key: '2feffe6e6e1f149d67303362d83fbc098426ca33', class: clsx('reset', this.active && 'reset--opened') }, h("mds-filter-item", { key: '07f3cdb2b3cfd71ec0ebc2eeab8d2c3f4b33c9f8', selected: this.active, disabled: !this.active && this.reset, class: clsx('reset-button', this.active && 'reset-button-opened'), icon: miBaselineClose, onClick: this.resetItems }))))));
+        return (h(Host, { key: '1dd060145cd00afd5bc869aa0ac39a375e31c45a', "aria-label": this.label, role: "menubar" }, this.label && (h("mds-text", { key: 'bc555868ff4c6599bbd5cbb0b075649b5ab0cca1', class: "label", typography: "label" }, this.label)), h("div", { key: '6dad87b041b6553711bc6b7d16e52bc8effabbcc', class: "items-wrapper" }, h("div", { key: 'd0d888532d201e44c12b273ced3c0106f6fc0641', class: clsx('items', this.active && 'active') }, h("slot", { key: 'd2919aba63eb86e5caa88b955a5eeb405daeccb8' }), h("div", { key: '9c70279b42e365d5f896277ed04add845b323dfc', class: clsx('reset', this.active && 'reset--opened') }, h("mds-filter-item", { key: '85e033c578dd050b5bf0a6407fd3a4836244bb17', selected: this.active, disabled: !this.active && this.reset, class: clsx('reset-button', this.active && 'reset-button-opened'), icon: miBaselineClose, onClick: this.resetItems }))))));
     }
     get element() { return getElement(this); }
 };
-MdsFilter.style = mdsFilterCss;
+MdsFilter.style = mdsFilterCss();
 
 export { MdsFilter as mds_filter };

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BfAC4pqU.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.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 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 MdsHeaderBar = class {
     constructor(hostRef) {
@@ -26,14 +26,18 @@ const MdsHeaderBar = class {
     componentWillLoad() {
         this.hasNav = this.host.querySelector(':scope > [slot="nav"]') !== null;
     }
+    /**
+     * Opens or closes the header bar.
+     * @param isOpened whether the header bar should be opened
+     */
     async setOpened(isOpened = true) {
         this.isOpened = isOpened;
     }
     render() {
-        return (h(Host, { key: 'a178d875406a0d139ec4d4853f2da7495b86374c' }, h("div", { key: '51e3151cae7173f67d7beb22dca28ea89a9cdf03', class: "content", part: "content" }, h("div", { key: '9648cf1eaa609f2fdb6ba28e5b63c4b0223729fa', class: "logo" }, h("slot", { key: 'edf1ea3ba82bd5e9302659ca76627998aebcfea1' })), h("div", { key: '87845ffe8e7181e8ec572c28a55c0a323808f2a6', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav && (h("nav", { key: '6a7911143923bf0de2d23c002bd1765cb2801859', class: "nav", part: "nav" }, h("slot", { key: '58b8cbfe785982b04b9ac1d4dbdfa2a44fe20053', name: "nav" }))), this.menu !== 'none' && (h("mds-button", { key: 'a948a0b38722ee2c6802f9ad62278f2af6249e38', class: "menu", variant: "dark", tone: "text", icon: miRoundMenu, onClick: this.open, part: "hamburger" }))))));
+        return (h(Host, { key: '6dd35a371fa5c356edb5f3dcdb3a7055ef59088b' }, h("div", { key: '2550f4a19b20204359c89fc7ba4d352ccc7fae68', class: "content", part: "content" }, h("div", { key: '41f1db71c01221c51e763d155ab701bd6c8ceb53', class: "logo" }, h("slot", { key: '2dec39a7e14263b3c2af14d7bc2892355c369db7' })), h("div", { key: '4b2191c4b205abc0a56bab40d8266a81fcd5dcff', class: "actions", part: "actions" }, this.nav !== 'none' && this.hasNav && (h("nav", { key: 'e0211adaa22e20fdfc213db906577704b55d752c', class: "nav", part: "nav" }, h("slot", { key: 'bd5aab236894a32ee0a46c1fbeebfcc386214dc3', name: "nav" }))), this.menu !== 'none' && (h("mds-button", { key: '233bd731f391808dec162ff73cc9a1ed6453998f', class: "menu", variant: "dark", tone: "text", icon: miRoundMenu, onClick: this.open, part: "hamburger" }))))));
     }
     get host() { return getElement(this); }
 };
-MdsHeaderBar.style = mdsHeaderBarCss;
+MdsHeaderBar.style = mdsHeaderBarCss();
 
 export { MdsHeaderBar as mds_header_bar };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BfAC4pqU.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CAd5312P.js';
 
-const mdsHeaderCss = "@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-header-color:rgb(var(--tone-neutral-02,244 244 244));--mds-header-icon-color:var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-header-modal-icon-color:rgb(var(--tone-neutral,0 0 0));--mds-header-backdrop-height:calc(var(--spacing,.0025rem)*1600);--mds-header-inline-margin-mobile:calc(var(--spacing,.0025rem)*400);--mds-header-inline-margin:calc(var(--spacing,.0025rem)*600);--mds-header-z-index:var(--magma-header-z-index,1000);--mds-header-backdrop-show:true;--mds-header-backdrop-blur-strength:2px}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-modal: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-header-backdrop-show{syntax:\"true|false\";inherits:false;initial-value:true}@property --mds-header-backdrop-blur-strength{syntax:\"<length>\";inherits:false;initial-value:2px}:host{--mds-header-color:rgb(var(--tone-neutral-02,244 244 244));--mds-header-hidden-bar-translate-inline:translateY(-150%);--mds-header-hidden-bar-translate-stripe:translateY(-110%);--mds-header-icon-color:var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-header-modal-icon-color:rgb(var(--tone-neutral,0 0 0));--mds-header-backdrop-blur-strength:2px;--mds-header-backdrop-height:calc(var(--spacing,.0025rem)*1600);--mds-header-backdrop-show:true;--mds-header-z-index:var(--magma-header-z-index,1000);--mds-header-inline-margin-mobile:calc(var(--spacing,.0025rem)*400);--mds-header-inline-margin:calc(var(--spacing,.0025rem)*600);--mds-header-backdrop-background-image:linear-gradient(0deg,#0000,#00000026);--private-mask-opacity:1;color:var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244)));fill:var(--mds-header-icon-color,var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244))));position:relative;z-index:var(--mds-header-z-index,var(--magma-header-z-index,1000))}.modal{--mds-modal-close-icon-color:var(--mds-header-modal-icon-color,rgb(var(--tone-neutral,0 0 0)));z-index:var(--mds-header-z-index,var(--magma-header-z-index,1000))}:host([appearance=inline]) ::slotted(mds-header-bar){--mds-header-inline-margin-current:var(--mds-header-inline-margin,calc(var(--spacing,.0025rem)*600));border-radius:var(--radius-lg,16px);margin-bottom:var(--mds-header-inline-margin-current);margin-top:var(--mds-header-inline-margin-current);max-width:var(--breakpoint-wide,1280px);width:calc(100% - var(--mds-header-inline-margin-current)*2)}:host([menu=none]) .menu{display:none}:host([visibility=hidden][appearance=stripe]) ::slotted(mds-header-bar){-webkit-transform:var(--mds-header-hidden-bar-translate-stripe);transform:var(--mds-header-hidden-bar-translate-stripe)}:host([visibility=hidden][appearance=inline]) ::slotted(mds-header-bar){-webkit-transform:var(--mds-header-hidden-bar-translate-inline);transform:var(--mds-header-hidden-bar-translate-inline)}.backdrop{align-items:center;-webkit-backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,10px));backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,10px));background-image:var(--mds-header-backdrop-background-image);content:\"\";display:flex;height:var(--mds-header-backdrop-height,calc(var(--spacing,.0025rem)*1600));inset:0;opacity:1;position:fixed;transform:translate(0);transition-duration:.2s;transition-property:opacity,transform;width:100%}.backdrop-blur-item{--private-gradient-position:calc(100% - (sibling-count() - sibling-index())*5%);display:none}.backdrop-blur-item:first-child{--private-gradient-position:100%}.backdrop-blur-item:nth-child(2){--private-gradient-position:95%}.backdrop-blur-item:nth-child(3){--private-gradient-position:90%}.backdrop-blur-item:nth-child(4){--private-gradient-position:85%}.backdrop-blur-item:nth-child(5){--private-gradient-position:80%}.backdrop-blur-item:nth-child(6){--private-gradient-position:75%}.backdrop-blur-item:nth-child(7){--private-gradient-position:70%}.backdrop-blur-item:nth-child(8){--private-gradient-position:65%}.backdrop-blur-item:nth-child(9){--private-gradient-position:60%}.backdrop-blur-item:nth-child(10){--private-gradient-position:55%}.backdrop-blur-item:nth-child(11){--private-gradient-position:50%}@supports ((-webkit-mask-image:linear-gradient(rgb(0 0 0/1),transparent)) or (mask-image:linear-gradient(rgb(0 0 0/1),transparent))){.backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background-image:none}.backdrop-blur-item{-webkit-backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,1px));backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,1px));display:flex;inset:0;-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgb(0 0 0/var(--private-mask-opacity,1))),to(#0000));mask-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgb(0 0 0/var(--private-mask-opacity,1))),to(#0000));-webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0/var(--private-mask-opacity,1)) 40%,#0000 var(--private-gradient-position,100%));mask-image:linear-gradient(to bottom,rgb(0 0 0/var(--private-mask-opacity,1)) 40%,#0000 var(--private-gradient-position,100%));pointer-events:none;position:absolute}}:host([appearance=inline]) .backdrop{transform:translate(0)}:host([appearance=stripe]) .backdrop,:host([visibility=hidden]) .backdrop{--mds-header-backdrop-blur-strength:0px;transform:translateY(-100%)}@container style(--mds-header-backdrop-show:false){:host-context(:not(.safari)) .backdrop{display:none}}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-header-modal-icon-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-consumption-high) .backdrop{--mds-header-backdrop-background-image:none}:host-context(:root.pref-consumption-medium) .backdrop{--mds-header-backdrop-blur-strength:1px}:host-context(:root.pref-consumption-low) .backdrop{--mds-header-backdrop-blur-strength:0px;display:none}@media (max-width:767px){:host([appearance=inline]) ::slotted(mds-header-bar){--mds-header-inline-margin-current:var(--mds-header-inline-margin-mobile,calc(var(--spacing,.0025rem)*400))}}@media not all and (min-width:768px){:host([menu=desktop]) .menu{display:none}}@media (min-width:1024px){:host([menu=mobile]) .menu{display:none}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-header-modal-icon-color:rgb(var(--tone-neutral-01,255 255 255))}}";
+const mdsHeaderCss = () => `@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-header-color:rgb(var(--tone-neutral-02,244 244 244));--mds-header-icon-color:var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-header-modal-icon-color:rgb(var(--tone-neutral,0 0 0));--mds-header-backdrop-height:calc(var(--spacing,.0025rem)*1600);--mds-header-inline-margin-mobile:calc(var(--spacing,.0025rem)*400);--mds-header-inline-margin:calc(var(--spacing,.0025rem)*600);--mds-header-z-index:var(--magma-header-z-index,1000);--mds-header-backdrop-show:true;--mds-header-backdrop-blur-strength:2px}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-modal: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-header-backdrop-show{syntax:"true|false";inherits:false;initial-value:true}@property --mds-header-backdrop-blur-strength{syntax:"<length>";inherits:false;initial-value:2px}:host{--mds-header-color:rgb(var(--tone-neutral-02,244 244 244));--mds-header-hidden-bar-translate-inline:translateY(-150%);--mds-header-hidden-bar-translate-stripe:translateY(-110%);--mds-header-icon-color:var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244)));--mds-header-modal-icon-color:rgb(var(--tone-neutral,0 0 0));--mds-header-backdrop-blur-strength:2px;--mds-header-backdrop-height:calc(var(--spacing,.0025rem)*1600);--mds-header-backdrop-show:true;--mds-header-z-index:var(--magma-header-z-index,1000);--mds-header-inline-margin-mobile:calc(var(--spacing,.0025rem)*400);--mds-header-inline-margin:calc(var(--spacing,.0025rem)*600);--mds-header-backdrop-background-image:linear-gradient(0deg,#0000,#00000026);--private-mask-opacity:1;color:var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244)));fill:var(--mds-header-icon-color,var(--mds-header-color,rgb(var(--tone-neutral-02,244 244 244))));position:relative;z-index:var(--mds-header-z-index,var(--magma-header-z-index,1000))}.modal{--mds-modal-close-icon-color:var(--mds-header-modal-icon-color,rgb(var(--tone-neutral,0 0 0)));z-index:var(--mds-header-z-index,var(--magma-header-z-index,1000))}:host([appearance=inline]) ::slotted(mds-header-bar){--mds-header-inline-margin-current:var(--mds-header-inline-margin,calc(var(--spacing,.0025rem)*600));border-radius:var(--radius-lg,16px);margin-bottom:var(--mds-header-inline-margin-current);margin-top:var(--mds-header-inline-margin-current);max-width:var(--breakpoint-wide,1280px);width:calc(100% - var(--mds-header-inline-margin-current)*2)}:host([menu=none]) .menu{display:none}:host([visibility=hidden][appearance=stripe]) ::slotted(mds-header-bar){-webkit-transform:var(--mds-header-hidden-bar-translate-stripe);transform:var(--mds-header-hidden-bar-translate-stripe)}:host([visibility=hidden][appearance=inline]) ::slotted(mds-header-bar){-webkit-transform:var(--mds-header-hidden-bar-translate-inline);transform:var(--mds-header-hidden-bar-translate-inline)}.backdrop{align-items:center;-webkit-backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,10px));backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,10px));background-image:var(--mds-header-backdrop-background-image);content:"";display:flex;height:var(--mds-header-backdrop-height,calc(var(--spacing,.0025rem)*1600));inset:0;opacity:1;position:fixed;transform:translate(0);transition-duration:.2s;transition-property:opacity,transform;width:100%}.backdrop-blur-item{--private-gradient-position:calc(100% - (sibling-count() - sibling-index())*5%);display:none}.backdrop-blur-item:first-child{--private-gradient-position:100%}.backdrop-blur-item:nth-child(2){--private-gradient-position:95%}.backdrop-blur-item:nth-child(3){--private-gradient-position:90%}.backdrop-blur-item:nth-child(4){--private-gradient-position:85%}.backdrop-blur-item:nth-child(5){--private-gradient-position:80%}.backdrop-blur-item:nth-child(6){--private-gradient-position:75%}.backdrop-blur-item:nth-child(7){--private-gradient-position:70%}.backdrop-blur-item:nth-child(8){--private-gradient-position:65%}.backdrop-blur-item:nth-child(9){--private-gradient-position:60%}.backdrop-blur-item:nth-child(10){--private-gradient-position:55%}.backdrop-blur-item:nth-child(11){--private-gradient-position:50%}@supports ((-webkit-mask-image:linear-gradient(rgb(0 0 0/1),transparent)) or (mask-image:linear-gradient(rgb(0 0 0/1),transparent))){.backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background-image:none}.backdrop-blur-item{-webkit-backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,1px));backdrop-filter:blur(var(--mds-header-backdrop-blur-strength,1px));display:flex;inset:0;-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgb(0 0 0/var(--private-mask-opacity,1))),to(#0000));mask-image:-webkit-gradient(linear,left top,left bottom,color-stop(40%,rgb(0 0 0/var(--private-mask-opacity,1))),to(#0000));-webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0/var(--private-mask-opacity,1)) 40%,#0000 var(--private-gradient-position,100%));mask-image:linear-gradient(to bottom,rgb(0 0 0/var(--private-mask-opacity,1)) 40%,#0000 var(--private-gradient-position,100%));pointer-events:none;position:absolute}}:host([appearance=inline]) .backdrop{transform:translate(0)}:host([appearance=stripe]) .backdrop,:host([visibility=hidden]) .backdrop{--mds-header-backdrop-blur-strength:0px;transform:translateY(-100%)}@container style(--mds-header-backdrop-show:false){:host-context(:not(.safari)) .backdrop{display:none}}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-header-modal-icon-color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-consumption-high) .backdrop{--mds-header-backdrop-background-image:none}:host-context(:root.pref-consumption-medium) .backdrop{--mds-header-backdrop-blur-strength:1px}:host-context(:root.pref-consumption-low) .backdrop{--mds-header-backdrop-blur-strength:0px;display:none}@media (max-width:767px){:host([appearance=inline]) ::slotted(mds-header-bar){--mds-header-inline-margin-current:var(--mds-header-inline-margin-mobile,calc(var(--spacing,.0025rem)*400))}}@media not all and (min-width:768px){:host([menu=desktop]) .menu{display:none}}@media (min-width:1024px){:host([menu=mobile]) .menu{display:none}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-header-modal-icon-color:rgb(var(--tone-neutral-01,255 255 255))}}`;
 
 const MdsHeader = class {
     constructor(hostRef) {
@@ -46,7 +46,7 @@ const MdsHeader = class {
             this.headerBar.setOpened(false);
         };
         this.handleVisibility = () => {
-            if (!this.autoHide) {
+            if (this.autoHide === undefined || this.autoHide === 0 || Number.isNaN(this.autoHide)) {
                 return;
             }
             // reset var if the page is scrolled to top
@@ -80,7 +80,7 @@ const MdsHeader = class {
             }
         };
         this.sanitizeAppearance = () => {
-            if (!this.appearanceSet) {
+            if (this.appearanceSet === undefined || this.appearanceSet === '') {
                 return [this.appearance];
             }
             const regex = /\b(\w+)\b/g;
@@ -101,7 +101,7 @@ const MdsHeader = class {
         this.handleScroll = () => {
             if (typeof window === 'undefined')
                 return;
-            if (this.autoHide) {
+            if (this.autoHide !== undefined && this.autoHide !== 0 && !Number.isNaN(this.autoHide)) {
                 this.handleVisibility();
             }
             if (this.sanitizedAppearance.length > 1) {
@@ -110,13 +110,15 @@ const MdsHeader = class {
         };
         this.setAppearanceSetData = () => {
             this.sanitizedAppearance = this.sanitizeAppearance();
-            if (this.sanitizedAppearance[2]) {
+            if (this.sanitizedAppearance[2] !== undefined &&
+                this.sanitizedAppearance[2] !== 0 &&
+                !Number.isNaN(this.sanitizedAppearance[2])) {
                 this.appearanceThreshold = this.sanitizedAppearance[2];
             }
             this.relativeTresholdDown = this.threshold;
         };
         this.initScrollListener = () => {
-            if (!window) {
+            if (typeof window === 'undefined') {
                 return;
             }
             this.setAppearanceSetData();
@@ -126,11 +128,15 @@ const MdsHeader = class {
             this.headerBar = this.host.querySelector('mds-header-bar');
         };
     }
+    /**
+     * Opens or closes the header.
+     * @param isOpened whether the header should be opened
+     */
     async setOpened(isOpened = true) {
         this.isOpened = isOpened;
     }
     disconnectedCallback() {
-        if (!window) {
+        if (typeof window === 'undefined') {
             return;
         }
         window.removeEventListener('scroll', this.handleScroll);
@@ -153,7 +159,7 @@ const MdsHeader = class {
         if (newValue === oldValue) {
             return;
         }
-        if (this.headerBar) {
+        if (this.headerBar != null) {
             this.headerBar.menu = newValue;
         }
     }
@@ -161,7 +167,7 @@ const MdsHeader = class {
         if (newValue === oldValue) {
             return;
         }
-        if (this.headerBar) {
+        if (this.headerBar != null) {
             this.headerBar.nav = newValue;
         }
     }
@@ -174,16 +180,24 @@ const MdsHeader = class {
         }
     }
     render() {
-        return (h(Host, { key: 'fd2460a71688aa65ee0565d4ecf6c214ca34154e' }, this.backdrop && (h("div", { key: 'de34fe54d6aad43628585406a5c2ab15e251ccd3', class: "backdrop" }, h("div", { key: '7d41e6853fa34d662c00694a3e2ba5d6df72da9c', class: "backdrop-blur-item" }), h("div", { key: 'b0d219348da5cfa1710b7b3ed5b2df9dfed06b03', class: "backdrop-blur-item" }), h("div", { key: '47ccf8c2aab974a3d3462b3b5eccab5c8099f4c5', class: "backdrop-blur-item" }), h("div", { key: 'b269780c2cc42aee6a33cede54c4c804e72cf0d5', class: "backdrop-blur-item" }), h("div", { key: 'eb1c837b9d6bef56c8573387a4e8f12eccab754f', class: "backdrop-blur-item" }), h("div", { key: '43debc4aa20f167259cb0e295abae91738f570ae', class: "backdrop-blur-item" }), h("div", { key: 'aed859d7f13aeb1b39405809eebe298b0676b227', class: "backdrop-blur-item" }), h("div", { key: '132a2828e89e260ac0b2235cc936ee58f730c48a', class: "backdrop-blur-item" }), h("div", { key: '10f063695d84dc6e214983f1f4ebe013aca84902', class: "backdrop-blur-item" }), h("div", { key: '93aff2c4d086ffca321495b14aed16f4ff7f2b5c', class: "backdrop-blur-item" }))), h("slot", { key: '417db97ad635f351dfb70b941a64fa3f8ad92064' }), this.hasMenu && (h("div", { key: 'df98336788b29148338e6b29d5b724fe6feff822', class: "menu", part: "menu" }, h("mds-modal", { key: 'b08071d663840e750be9e11c78519a4c56183611', class: "modal", opened: this.isOpened, onMdsModalClose: this.close, position: "right" }, h("slot", { key: '1487f523e00deb9eb1c754eeb9c03fb4be22c5c0', name: "menu" }))))));
+        return (h(Host, { key: '5128bc6c966e7953efd8e10ccc5bc50f17d75acd' }, this.backdrop && (h("div", { key: '9e56e7cf2a7a35b64e420379075a4927a261a0fe', class: "backdrop" }, h("div", { key: '0a6ccef3d03db7c08e3b73435413ca504833b12b', class: "backdrop-blur-item" }), h("div", { key: '22c1a00aed263989d6e89a0daad5e0840fc2260d', class: "backdrop-blur-item" }), h("div", { key: '4aba0c1c47f43f9a86e87884b8561c29b5564dc2', class: "backdrop-blur-item" }), h("div", { key: 'd43b86f9910d0d5542b9ed7aa49b5f251ad2a466', class: "backdrop-blur-item" }), h("div", { key: 'e1e77b70063e61209c839930017df200b91b6cae', class: "backdrop-blur-item" }), h("div", { key: 'fa60a8e58b29cc60fc95c89ecd47db0905fd9aac', class: "backdrop-blur-item" }), h("div", { key: '018ca6f46a7155c50cd3146ad703b941773b9214', class: "backdrop-blur-item" }), h("div", { key: 'b8eb26d49714c5e9d0df3486eafcea46a36a792e', class: "backdrop-blur-item" }), h("div", { key: 'b68ffd1fea3ecaa1489324e1807e0b8192181362', class: "backdrop-blur-item" }), h("div", { key: 'bf1a1fe44c9a8b3a90d0c8b325c2001c0af2cbb0', class: "backdrop-blur-item" }))), h("slot", { key: 'b457cbe705c13f1d4bd48b562417bdb8cc332ae5' }), this.hasMenu && (h("div", { key: '1cd40f7e1c4dd6a3c26a6277a7ac3256f2a39b2b', class: "menu", part: "menu" }, h("mds-modal", { key: '1568c0f8f76b2fa48bffa6b2b30fcd0caad6e845', class: "modal", opened: this.isOpened, onMdsModalClose: this.close, position: "right" }, h("slot", { key: 'b571fcaeef6763648a17ba8344522961b4f68994', name: "menu" }))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
-        "menu": ["onMenuChangedHandler"],
-        "nav": ["onNavChangedHandler"],
-        "appearanceSet": ["onAppearanceSetChangedHandler"],
-        "visibility": ["handleVisibilityChange"]
+        "menu": [{
+                "onMenuChangedHandler": 0
+            }],
+        "nav": [{
+                "onNavChangedHandler": 0
+            }],
+        "appearanceSet": [{
+                "onAppearanceSetChangedHandler": 0
+            }],
+        "visibility": [{
+                "handleVisibilityChange": 0
+            }]
     }; }
 };
-MdsHeader.style = mdsHeaderCss;
+MdsHeader.style = mdsHeaderCss();
 
 export { MdsHeader as mds_header };