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

package/dist/esm/mds-input-switch_2.entry.js

@@ -4,6 +4,7 @@ import { m as miBaselineRemove } from './remove-D17B058a.js';
 import { K as KeyboardManager } from './keyboard-manager-BudfaWhu.js';
 import { h as hasSlotted } from './slot-ttrRC6OE.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 import { s as setAttributeIfEmpty } from './aria-CSCy6TMW.js';
 
 var miBaselineChecked = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -67,7 +68,7 @@ var localeIt = {
 	unselect: unselect
 };
 
-const mdsInputSwitchCss = () => `@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-input-switch-animation-timing-adjust:1.4;--mds-input-switch-box-color-enabled-checked:rgb(var(--variant-primary-04,184 208 255));--mds-input-switch-box-color-enabled-unchecked:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-box-color-disabled-checked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-box-color-disabled-unchecked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-box-padding-lg:calc(var(--spacing,.0025rem)*100);--mds-input-switch-box-padding-md:calc(var(--spacing,.0025rem)*100);--mds-input-switch-box-padding-sm:calc(var(--spacing,.0025rem)*100);--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem)*100));--mds-input-switch-duration:.3s;--mds-input-switch-icon-color-checked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-checked:rgb(var(--variant-primary-04,184 208 255));--mds-input-switch-icon-color-indeterminate-disabled:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-indeterminate:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-unchecked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-unchecked:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked,rgb(var(--variant-primary-04,184 208 255)));--mds-input-switch-toggle-color-enabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-enabled-unchecked:rgb(var(--tone-neutral-10,60 60 60));--mds-input-switch-toggle-color-disabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-disabled-unchecked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600)) * 2) + calc(var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem) * 100)) * 2));--mds-input-switch-toggle-size-lg:calc(var(--spacing,.0025rem)*800);--mds-input-switch-toggle-size-md:calc(var(--spacing,.0025rem)*600);--mds-input-switch-toggle-size-sm:calc(var(--spacing,.0025rem)*400);--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600));--tw-font-weight:initial}}}@layer reset,vendor,theme,base,components,utilities;: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}@property --mds-input-switch-animation-timing-adjust{syntax:"<number>";inherits:false;initial-value:1.4}@property --mds-input-switch-duration{syntax:"<time>";inherits:false;initial-value:.3s}:host{--mds-input-switch-animation-timing-adjust:1.4;--mds-input-switch-animation-timing-function:var(--ease-in-out-quad,cubic-bezier(.455,.03,.515,.955));--mds-input-switch-box-color-enabled-checked:rgb(var(--variant-primary-04,184 208 255));--mds-input-switch-box-color-enabled-unchecked:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-box-color-disabled-checked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-box-color-disabled-unchecked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-box-padding-lg:calc(var(--spacing,.0025rem)*100);--mds-input-switch-box-padding-md:calc(var(--spacing,.0025rem)*100);--mds-input-switch-box-padding-sm:calc(var(--spacing,.0025rem)*100);--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem)*100));--mds-input-switch-duration:.3s;--mds-input-switch-icon-color-checked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-checked:rgb(var(--variant-primary-04,184 208 255));--mds-input-switch-icon-color-indeterminate-disabled:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-indeterminate:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-unchecked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-unchecked:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked,rgb(var(--variant-primary-04,184 208 255)));--mds-input-switch-toggle-color-enabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-enabled-unchecked:rgb(var(--tone-neutral-10,60 60 60));--mds-input-switch-toggle-color-disabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-disabled-unchecked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600)) * 2) + calc(var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem) * 100)) * 2));--mds-input-switch-toggle-size-lg:calc(var(--spacing,.0025rem)*800);--mds-input-switch-toggle-size-md:calc(var(--spacing,.0025rem)*600);--mds-input-switch-toggle-size-sm:calc(var(--spacing,.0025rem)*400);--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600));align-items:flex-start;display:inline-flex;gap:calc(var(--spacing,.0025rem)*200)}.field{display:none}.label-icon{align-items:baseline;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:var(--radius);cursor:pointer;display:flex;outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));position:relative;transition-duration:.2s;transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-property:outline-offset,opacity;transition-timing-function:ease-in-out}.label-icon:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.label-text{cursor:pointer;display:flex}.label-text--empty{display:none}:host([type=switch]) .label-text{align-items:center;align-self:center}.icon-explicit{fill:var(--mds-input-switch-icon-explicit-color,var(--mds-input-switch-icon-color-checked,rgb(var(--variant-primary-04,184 208 255))));height:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)));width:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)))}.icon-typography-checked,.icon-typography-unchecked{align-items:center;display:inline-flex}.icon-typography-checked{left:0;position:absolute;top:0}.switch-container{align-self:stretch;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:var(--radius-full,1000px);box-sizing:border-box;display:flex;flex-shrink:0;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-property:width,outline-offset,opacity;transition-timing-function:ease-in-out;width:var(--mds-input-switch-toggle-container-size,calc(calc(var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600)) * 2) + calc(var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem) * 100)) * 2)))}.switch-container:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.switch{background-color:var(--mds-input-switch-box-color-enabled-unchecked,rgb(var(--tone-neutral-06,158 158 158)));box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;height:min-content;padding:var(--mds-input-switch-box-padding,var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem)*100)));-webkit-transition-duration:var(--mds-input-switch-duration,.3s);transition-duration:var(--mds-input-switch-duration,.3s);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;-webkit-transition-timing-function:var(--ease-in-out);transition-timing-function:var(--ease-in-out);width:var(--mds-input-switch-toggle-container-size,calc(calc(var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600)) * 2) + calc(var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem) * 100)) * 2)))}.switch,.switch-toggle{border-radius:var(--radius-full,1000px)}.switch-toggle{align-items:center;-webkit-animation-duration:calc(var(--mds-input-switch-duration,.3s)*1.5);animation-duration:calc(var(--mds-input-switch-duration,.3s)*1.5);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:none;animation-play-state:paused;-webkit-animation-timing-function:var(--mds-input-switch-animation-timing-function);animation-timing-function:var(--mds-input-switch-animation-timing-function);background-color:var(--mds-input-switch-toggle-color-enabled-checked,rgb(var(--tone-neutral,0 0 0)));-webkit-box-shadow:var(--shadow);box-shadow:var(--shadow);display:flex;height:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)));justify-content:center;-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;-webkit-transition-timing-function:var(--ease-linear);transition-timing-function:var(--ease-linear);width:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)))}.field:checked+.switch-container .switch{background-color:var(--mds-input-switch-box-color-enabled-checked,rgb(var(--variant-primary-04,184 208 255)))}.field:checked+.switch-container .switch-toggle{animation-name:check;-webkit-animation-play-state:initial;animation-play-state:initial;background-color:var(--mds-input-switch-toggle-color-enabled-checked,rgb(var(--tone-neutral,0 0 0)))}.field:not(:checked)+.dirty .switch-toggle{animation-name:uncheck;-webkit-animation-play-state:initial;animation-play-state:initial;background-color:var(--mds-input-switch-toggle-color-enabled-unchecked,rgb(var(--tone-neutral-10,60 60 60)))}.field:disabled+.switch-container .switch{background-color:var(--mds-input-switch-box-color-disabled-unchecked,rgb(var(--tone-neutral-08,107 107 107)))}.field:checked:disabled+.switch-container .switch{background-color:var(--mds-input-switch-box-color-disabled-checked,rgb(var(--tone-neutral-08,107 107 107)))}.field:disabled+.switch-container .switch-toggle{background-color:var(--mds-input-switch-toggle-color-disabled-unchecked,rgb(var(--tone-neutral,0 0 0)))}.field:checked:disabled+.switch-container .switch-toggle{background-color:var(--mds-input-switch-toggle-color-disabled-checked,rgb(var(--tone-neutral,0 0 0)))}@keyframes check{0%{transform:translate(0);width:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)))}50%{transform:translate(0);width:calc(var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600))) * var(--mds-input-switch-animation-timing-adjust,1.4))}to{transform:translate(100%);width:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)))}}@keyframes uncheck{0%{transform:translate(100%);width:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)))}50%{transform:translate(0);width:calc(var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600))) * var(--mds-input-switch-animation-timing-adjust,1.4))}to{transform:translate(0);width:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)))}}:host([disabled]){pointer-events:none}.icon-checked,.icon-unchecked{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:fill,transform;-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))}.icon-unchecked{fill:var(--mds-input-switch-icon-color-unchecked,rgb(var(--tone-neutral-06,158 158 158)));opacity:1;transform:scale(1)}.icon-checked,.icon-unchecked{-webkit-transition-duration:var(--mds-input-switch-duration,.3s);transition-duration:var(--mds-input-switch-duration,.3s)}.icon-checked{fill:var(--mds-input-switch-icon-color-checked,rgb(var(--variant-primary-04,184 208 255)));transform:scale(0)}.field:disabled+.label-icon,.field:disabled+.label-icon+.label-text{cursor:default}.field:checked+.label-icon .icon-unchecked{opacity:0;transform:scale(1.5);-webkit-transition-duration:calc(var(--mds-input-switch-duration,.3s)*2);transition-duration:calc(var(--mds-input-switch-duration,.3s)*2)}.field:checked+.label-icon .icon-checked{transform:scale(1);-webkit-transition-duration:calc(var(--mds-input-switch-duration,.3s)*1.5);transition-duration:calc(var(--mds-input-switch-duration,.3s)*1.5)}.field:disabled+.label-icon .icon-unchecked{fill:var(--mds-input-switch-icon-color-unchecked-disabled,rgb(var(--tone-neutral-06,158 158 158)))}.field:disabled+.label-icon .icon-checked{fill:var(--mds-input-switch-icon-color-checked-disabled,rgb(var(--tone-neutral-06,158 158 158)))}.field:disabled:indeterminate+.label-icon .icon-checked{fill:var(--mds-input-switch-icon-color-indeterminate-disabled,rgb(var(--tone-neutral-05,197 197 197)))}.field:indeterminate+.label-icon .icon-checked{fill:var(--mds-input-switch-icon-color-indeterminate,rgb(var(--tone-neutral-05,197 197 197)));transform:scale(1)}:host([explicit]:not([disabled]):not([checked])){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-unchecked,rgb(var(--tone-neutral-06,158 158 158)))}:host([explicit][checked]:not([disabled])){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked,rgb(var(--variant-primary-04,184 208 255)))}:host([explicit][checked][disabled]){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked-disabled,rgb(var(--tone-neutral-06,158 158 158)))}:host([explicit][disabled]:not([checked])){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-unchecked-disabled,rgb(var(--tone-neutral-06,158 158 158)))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-input-switch-box-color-enabled-checked:rgb(var(--variant-primary-04,184 208 255));--mds-input-switch-box-color-enabled-unchecked:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-box-color-disabled-checked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-box-color-disabled-unchecked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-toggle-color-enabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-enabled-unchecked:rgb(var(--tone-neutral-10,60 60 60));--mds-input-switch-toggle-color-disabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-disabled-unchecked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-icon-color-checked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-checked:rgb(var(--variant-primary-06,90 147 255));--mds-input-switch-icon-color-indeterminate-disabled:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-indeterminate:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-unchecked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-unchecked:rgb(var(--tone-neutral-06,158 158 158))}:host([size=sm]){--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-sm,calc(var(--spacing,.0025rem)*100));--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-sm,calc(var(--spacing,.0025rem)*400));--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-sm,calc(var(--spacing,.0025rem) * 400)) * 2) + calc(var(--mds-input-switch-box-padding-sm,calc(var(--spacing,.0025rem) * 100)) * 2))}:host([size=md]){--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem)*100));--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600));--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600)) * 2) + calc(var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem) * 100)) * 2))}:host([size=lg]){--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-lg,calc(var(--spacing,.0025rem)*100));--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-lg,calc(var(--spacing,.0025rem)*800));--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-lg,calc(var(--spacing,.0025rem) * 800)) * 2) + calc(var(--mds-input-switch-box-padding-lg,calc(var(--spacing,.0025rem) * 100)) * 2))}@property --tw-font-weight{syntax:"*";inherits:false}@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-input-switch-box-color-enabled-checked:rgb(var(--variant-primary-04,184 208 255));--mds-input-switch-box-color-enabled-unchecked:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-box-color-disabled-checked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-box-color-disabled-unchecked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-toggle-color-enabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-enabled-unchecked:rgb(var(--tone-neutral-10,60 60 60));--mds-input-switch-toggle-color-disabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-disabled-unchecked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-icon-color-checked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-checked:rgb(var(--variant-primary-06,90 147 255));--mds-input-switch-icon-color-indeterminate-disabled:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-indeterminate:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-unchecked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-unchecked:rgb(var(--tone-neutral-06,158 158 158))}}`;
+const mdsInputSwitchCss = () => `@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-input-switch-animation-timing-adjust:1.4;--mds-input-switch-box-color-enabled-checked:rgb(var(--variant-primary-04,184 208 255));--mds-input-switch-box-color-enabled-unchecked:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-box-color-disabled-checked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-box-color-disabled-unchecked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-box-padding-lg:calc(var(--spacing,.0025rem)*100);--mds-input-switch-box-padding-md:calc(var(--spacing,.0025rem)*100);--mds-input-switch-box-padding-sm:calc(var(--spacing,.0025rem)*100);--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem)*100));--mds-input-switch-duration:.3s;--mds-input-switch-icon-color-checked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-checked:rgb(var(--variant-primary-04,184 208 255));--mds-input-switch-icon-color-indeterminate-disabled:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-indeterminate:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-unchecked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-unchecked:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked,rgb(var(--variant-primary-04,184 208 255)));--mds-input-switch-toggle-color-enabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-enabled-unchecked:rgb(var(--tone-neutral-10,60 60 60));--mds-input-switch-toggle-color-disabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-disabled-unchecked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600)) * 2) + calc(var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem) * 100)) * 2));--mds-input-switch-toggle-size-lg:calc(var(--spacing,.0025rem)*800);--mds-input-switch-toggle-size-md:calc(var(--spacing,.0025rem)*600);--mds-input-switch-toggle-size-sm:calc(var(--spacing,.0025rem)*400);--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600));--tw-font-weight:initial}}}: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}@property --mds-input-switch-animation-timing-adjust{syntax:"<number>";inherits:false;initial-value:1.4}@property --mds-input-switch-duration{syntax:"<time>";inherits:false;initial-value:.3s}:host{--mds-input-switch-animation-timing-adjust:1.4;--mds-input-switch-animation-timing-function:var(--ease-in-out-quad,cubic-bezier(.455,.03,.515,.955));--mds-input-switch-box-color-enabled-checked:rgb(var(--variant-primary-04,184 208 255));--mds-input-switch-box-color-enabled-unchecked:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-box-color-disabled-checked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-box-color-disabled-unchecked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-box-padding-lg:calc(var(--spacing,.0025rem)*100);--mds-input-switch-box-padding-md:calc(var(--spacing,.0025rem)*100);--mds-input-switch-box-padding-sm:calc(var(--spacing,.0025rem)*100);--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem)*100));--mds-input-switch-duration:.3s;--mds-input-switch-icon-color-checked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-checked:rgb(var(--variant-primary-04,184 208 255));--mds-input-switch-icon-color-indeterminate-disabled:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-indeterminate:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-unchecked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-unchecked:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked,rgb(var(--variant-primary-04,184 208 255)));--mds-input-switch-toggle-color-enabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-enabled-unchecked:rgb(var(--tone-neutral-10,60 60 60));--mds-input-switch-toggle-color-disabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-disabled-unchecked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600)) * 2) + calc(var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem) * 100)) * 2));--mds-input-switch-toggle-size-lg:calc(var(--spacing,.0025rem)*800);--mds-input-switch-toggle-size-md:calc(var(--spacing,.0025rem)*600);--mds-input-switch-toggle-size-sm:calc(var(--spacing,.0025rem)*400);--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600));align-items:flex-start;display:inline-flex;gap:calc(var(--spacing,.0025rem)*200)}.field{display:none}.label-icon{align-items:baseline;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:var(--radius);cursor:pointer;display:flex;outline:var(--magma-outline-blur,2px solid var(--magma-outline-blur-color,#0000));position:relative;transition-duration:.2s;transition-property:background-color,border-color,box-shadow,color,fill,outline,outline-offset,transform;transition-property:outline-offset,opacity;transition-timing-function:ease-in-out}.label-icon:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.label-text{cursor:pointer;display:flex}.label-text--empty{display:none}:host([type=switch]) .label-text{align-items:center;align-self:center}.icon-explicit{fill:var(--mds-input-switch-icon-explicit-color,var(--mds-input-switch-icon-color-checked,rgb(var(--variant-primary-04,184 208 255))));height:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)));width:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)))}.icon-typography-checked,.icon-typography-unchecked{align-items:center;display:inline-flex}.icon-typography-checked{left:0;position:absolute;top:0}.switch-container{align-self:stretch;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:var(--radius-full,1000px);box-sizing:border-box;display:flex;flex-shrink:0;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-property:width,outline-offset,opacity;transition-timing-function:ease-in-out;width:var(--mds-input-switch-toggle-container-size,calc(calc(var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600)) * 2) + calc(var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem) * 100)) * 2)))}.switch-container:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.switch{background-color:var(--mds-input-switch-box-color-enabled-unchecked,rgb(var(--tone-neutral-06,158 158 158)));box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;height:min-content;padding:var(--mds-input-switch-box-padding,var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem)*100)));-webkit-transition-duration:var(--mds-input-switch-duration,.3s);transition-duration:var(--mds-input-switch-duration,.3s);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;-webkit-transition-timing-function:var(--ease-in-out);transition-timing-function:var(--ease-in-out);width:var(--mds-input-switch-toggle-container-size,calc(calc(var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600)) * 2) + calc(var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem) * 100)) * 2)))}.switch,.switch-toggle{border-radius:var(--radius-full,1000px)}.switch-toggle{align-items:center;-webkit-animation-duration:calc(var(--mds-input-switch-duration,.3s)*1.5);animation-duration:calc(var(--mds-input-switch-duration,.3s)*1.5);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:none;animation-play-state:paused;-webkit-animation-timing-function:var(--mds-input-switch-animation-timing-function);animation-timing-function:var(--mds-input-switch-animation-timing-function);background-color:var(--mds-input-switch-toggle-color-enabled-checked,rgb(var(--tone-neutral,0 0 0)));-webkit-box-shadow:var(--shadow);box-shadow:var(--shadow);display:flex;height:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)));justify-content:center;-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;-webkit-transition-timing-function:var(--ease-linear);transition-timing-function:var(--ease-linear);width:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)))}.field:checked+.switch-container .switch{background-color:var(--mds-input-switch-box-color-enabled-checked,rgb(var(--variant-primary-04,184 208 255)))}.field:checked+.switch-container .switch-toggle{animation-name:check;-webkit-animation-play-state:initial;animation-play-state:initial;background-color:var(--mds-input-switch-toggle-color-enabled-checked,rgb(var(--tone-neutral,0 0 0)))}.field:not(:checked)+.dirty .switch-toggle{animation-name:uncheck;-webkit-animation-play-state:initial;animation-play-state:initial;background-color:var(--mds-input-switch-toggle-color-enabled-unchecked,rgb(var(--tone-neutral-10,60 60 60)))}.field:disabled+.switch-container .switch{background-color:var(--mds-input-switch-box-color-disabled-unchecked,rgb(var(--tone-neutral-08,107 107 107)))}.field:checked:disabled+.switch-container .switch{background-color:var(--mds-input-switch-box-color-disabled-checked,rgb(var(--tone-neutral-08,107 107 107)))}.field:disabled+.switch-container .switch-toggle{background-color:var(--mds-input-switch-toggle-color-disabled-unchecked,rgb(var(--tone-neutral,0 0 0)))}.field:checked:disabled+.switch-container .switch-toggle{background-color:var(--mds-input-switch-toggle-color-disabled-checked,rgb(var(--tone-neutral,0 0 0)))}@keyframes check{0%{transform:translate(0);width:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)))}50%{transform:translate(0);width:calc(var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600))) * var(--mds-input-switch-animation-timing-adjust,1.4))}to{transform:translate(100%);width:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)))}}@keyframes uncheck{0%{transform:translate(100%);width:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)))}50%{transform:translate(0);width:calc(var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600))) * var(--mds-input-switch-animation-timing-adjust,1.4))}to{transform:translate(0);width:var(--mds-input-switch-toggle-size,var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600)))}}:host([disabled]){pointer-events:none}.icon-checked,.icon-unchecked{--tw-font-weight:var(--font-weight-normal,400);font-weight:var(--font-weight-normal,400);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:fill,transform;-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))}.icon-unchecked{fill:var(--mds-input-switch-icon-color-unchecked,rgb(var(--tone-neutral-06,158 158 158)));opacity:1;transform:scale(1)}.icon-checked,.icon-unchecked{-webkit-transition-duration:var(--mds-input-switch-duration,.3s);transition-duration:var(--mds-input-switch-duration,.3s)}.icon-checked{fill:var(--mds-input-switch-icon-color-checked,rgb(var(--variant-primary-04,184 208 255)));transform:scale(0)}.field:disabled+.label-icon,.field:disabled+.label-icon+.label-text{cursor:default}.field:checked+.label-icon .icon-unchecked{opacity:0;transform:scale(1.5);-webkit-transition-duration:calc(var(--mds-input-switch-duration,.3s)*2);transition-duration:calc(var(--mds-input-switch-duration,.3s)*2)}.field:checked+.label-icon .icon-checked{transform:scale(1);-webkit-transition-duration:calc(var(--mds-input-switch-duration,.3s)*1.5);transition-duration:calc(var(--mds-input-switch-duration,.3s)*1.5)}.field:disabled+.label-icon .icon-unchecked{fill:var(--mds-input-switch-icon-color-unchecked-disabled,rgb(var(--tone-neutral-06,158 158 158)))}.field:disabled+.label-icon .icon-checked{fill:var(--mds-input-switch-icon-color-checked-disabled,rgb(var(--tone-neutral-06,158 158 158)))}.field:disabled:indeterminate+.label-icon .icon-checked{fill:var(--mds-input-switch-icon-color-indeterminate-disabled,rgb(var(--tone-neutral-05,197 197 197)))}.field:indeterminate+.label-icon .icon-checked{fill:var(--mds-input-switch-icon-color-indeterminate,rgb(var(--tone-neutral-05,197 197 197)));transform:scale(1)}:host([explicit]:not([disabled]):not([checked])){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-unchecked,rgb(var(--tone-neutral-06,158 158 158)))}:host([explicit][checked]:not([disabled])){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked,rgb(var(--variant-primary-04,184 208 255)))}:host([explicit][checked][disabled]){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked-disabled,rgb(var(--tone-neutral-06,158 158 158)))}:host([explicit][disabled]:not([checked])){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-unchecked-disabled,rgb(var(--tone-neutral-06,158 158 158)))}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-input-switch-box-color-enabled-checked:rgb(var(--variant-primary-04,184 208 255));--mds-input-switch-box-color-enabled-unchecked:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-box-color-disabled-checked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-box-color-disabled-unchecked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-toggle-color-enabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-enabled-unchecked:rgb(var(--tone-neutral-10,60 60 60));--mds-input-switch-toggle-color-disabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-disabled-unchecked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-icon-color-checked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-checked:rgb(var(--variant-primary-06,90 147 255));--mds-input-switch-icon-color-indeterminate-disabled:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-indeterminate:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-unchecked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-unchecked:rgb(var(--tone-neutral-06,158 158 158))}:host([size=sm]){--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-sm,calc(var(--spacing,.0025rem)*100));--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-sm,calc(var(--spacing,.0025rem)*400));--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-sm,calc(var(--spacing,.0025rem) * 400)) * 2) + calc(var(--mds-input-switch-box-padding-sm,calc(var(--spacing,.0025rem) * 100)) * 2))}:host([size=md]){--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem)*100));--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem)*600));--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-md,calc(var(--spacing,.0025rem) * 600)) * 2) + calc(var(--mds-input-switch-box-padding-md,calc(var(--spacing,.0025rem) * 100)) * 2))}:host([size=lg]){--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-lg,calc(var(--spacing,.0025rem)*100));--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-lg,calc(var(--spacing,.0025rem)*800));--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-lg,calc(var(--spacing,.0025rem) * 800)) * 2) + calc(var(--mds-input-switch-box-padding-lg,calc(var(--spacing,.0025rem) * 100)) * 2))}@property --tw-font-weight{syntax:"*";inherits:false}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-input-switch-box-color-enabled-checked:rgb(var(--variant-primary-04,184 208 255));--mds-input-switch-box-color-enabled-unchecked:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-box-color-disabled-checked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-box-color-disabled-unchecked:rgb(var(--tone-neutral-08,107 107 107));--mds-input-switch-toggle-color-enabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-enabled-unchecked:rgb(var(--tone-neutral-10,60 60 60));--mds-input-switch-toggle-color-disabled-checked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-toggle-color-disabled-unchecked:rgb(var(--tone-neutral,0 0 0));--mds-input-switch-icon-color-checked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-checked:rgb(var(--variant-primary-06,90 147 255));--mds-input-switch-icon-color-indeterminate-disabled:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-indeterminate:rgb(var(--tone-neutral-05,197 197 197));--mds-input-switch-icon-color-unchecked-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-switch-icon-color-unchecked:rgb(var(--tone-neutral-06,158 158 158))}}`;
 
 const MdsInputSwitch = class {
     constructor(hostRef) {
@@ -186,6 +187,19 @@ const MdsInputSwitch = class {
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    connectedCallback() {
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefTheme) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefThemeScheme) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
     componentDidLoad() {
         var _a, _b;
         this.language = this.t.lang(this.host);
@@ -198,7 +212,7 @@ const MdsInputSwitch = class {
         var _a;
         const { iconChecked, iconUnchecked, iconIndeterminate } = inputSwitchIconVariant[this.type];
         const iconCheckedUser = this.icon !== '' ? this.icon : iconChecked;
-        return (h(Host, { key: '2567f5e3e7e467b8e631ea7811d57006c4b1c5d3', onClick: this.handleDirty }, h("input", { key: 'b33e197bed24584b0f1a1f795a699f8d4c2ba1ea', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: (event) => this.handleInputOnChange(event), type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch' ? (h("label", { htmlFor: "field", class: clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("div", { class: "switch" }, h("div", { class: "switch-toggle" }, this.explicit && (h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : miBaselineRemove })))))) : (h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-unchecked", name: clsx(this.indeterminate ? iconIndeterminate : iconUnchecked) })), this.checked && (h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-checked", name: clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))))), h("label", { key: '1972a79c1db097026c9833f47da6eb96a7d95d6d', htmlFor: "field", class: clsx('label-text', !this.hasText && 'label-text--empty') }, h("mds-text", { key: '041a88fbb8a21a4a5eb810947c29dbce24665651', tag: "p", typography: this.typography, variant: this.variant }, h("slot", { key: 'ea04ede1e08f07893d941eb2426a7cb0d9005a3d' })))));
+        return (h(Host, { key: '963b8366404d13af6237a061c10d7b7f3512ff47', onClick: this.handleDirty, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("input", { key: '1d13fb479902008db6d8f8bce420aea5eabb8232', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: this.handleInputOnChange, type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch' ? (h("label", { htmlFor: "field", class: clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("div", { class: "switch" }, h("div", { class: "switch-toggle" }, this.explicit && (h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : miBaselineRemove })))))) : (h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", "aria-label": this.t.get(this.checked ? 'unselect' : 'select', { label: this.label }) }, h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-unchecked", name: clsx(this.indeterminate ? iconIndeterminate : iconUnchecked) })), this.checked && (h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-checked", name: clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))))), h("label", { key: 'e95925e2b9c53b9fb5e2dba6523d24b573eb4849', htmlFor: "field", class: clsx('label-text', !this.hasText && 'label-text--empty') }, h("mds-text", { key: 'cc1fd90f2ac22285cb764b4cce34e80180d95431', tag: "p", typography: this.typography, variant: this.variant }, h("slot", { key: '2bfaae2683bf4b30daf69d07febbf7848605e1de' })))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }
@@ -216,7 +230,7 @@ const MdsInputSwitch = class {
 };
 MdsInputSwitch.style = mdsInputSwitchCss();
 
-const mdsTableCellCss = () => `@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-table-cell-background:var(--mds-table-row-background);--mds-table-cell-background-alt:var(--mds-table-row-background-alt,rgb(var(--tone-neutral,0 0 0)));--mds-table-cell-color-alt:var(--mds-table-row-color-alt,rgb(var(--tone-neutral-02,244 244 244)));--mds-table-cell-color:var(--mds-table-row-color);--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host{--mds-table-cell-background:var(--mds-table-row-background);--mds-table-cell-background-alt:var(--mds-table-row-background-alt,rgb(var(--tone-neutral,0 0 0)));--mds-table-cell-color-alt:var(--mds-table-row-color-alt,rgb(var(--tone-neutral-02,244 244 244)));--mds-table-cell-color:var(--mds-table-row-color);--tw-duration:.2s;--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:var(--mds-table-cell-background,var(--mds-table-row-background));border-bottom:var(--private-cell-border-width) solid var(--private-cell-border-color)!important;border-top:var(--private-cell-border-width) solid transparent!important;color:var(--mds-table-cell-color,var(--mds-table-row-color));display:table-cell;padding:var(--mds-table-cell-padding,calc(var(--spacing,.0025rem)*400));transition-duration:.2s;transition-property:background-color,border-color,color;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host([selected]){--mds-table-cell-background:var(--mds-table-cell-background-alt,var(--mds-table-row-background-alt,rgb(var(--tone-neutral,0 0 0))));--mds-table-cell-color:var(--mds-table-cell-color-alt,var(--mds-table-row-color-alt,rgb(var(--tone-neutral-02,244 244 244))))}:host([sorted]){--mds-table-cell-background:var(--mds-table-background,rgb(var(--tone-neutral,0 0 0)));--mds-table-cell-color:var(--mds-table-color,rgb(var(--tone-neutral-02,244 244 244)))}:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s}}`;
+const mdsTableCellCss = () => `@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-table-cell-background:var(--mds-table-row-background);--mds-table-cell-background-alt:var(--mds-table-row-background-alt,rgb(var(--tone-neutral,0 0 0)));--mds-table-cell-color-alt:var(--mds-table-row-color-alt,rgb(var(--tone-neutral-02,244 244 244)));--mds-table-cell-color:var(--mds-table-row-color);--tw-ease:initial}}}:host{--mds-table-cell-background:var(--mds-table-row-background);--mds-table-cell-background-alt:var(--mds-table-row-background-alt,rgb(var(--tone-neutral,0 0 0)));--mds-table-cell-color-alt:var(--mds-table-row-color-alt,rgb(var(--tone-neutral-02,244 244 244)));--mds-table-cell-color:var(--mds-table-row-color);--mds-table-cell-transition-duration:var(--duration-200,.2s);--private-table-cell-transition-duration:var(--mds-table-cell-transition-duration);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));background-color:var(--mds-table-cell-background,var(--mds-table-row-background));border-bottom:var(--private-cell-border-width) solid var(--private-cell-border-color)!important;border-top:var(--private-cell-border-width) solid #0000!important;color:var(--mds-table-cell-color,var(--mds-table-row-color));display:table-cell;padding:var(--mds-table-cell-padding,calc(var(--spacing,.0025rem)*400));-webkit-transition-duration:var(--private-table-cell-transition-duration);transition-duration:var(--private-table-cell-transition-duration);transition-property:background-color,border-color,color;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}:host([pref-animation=reduce]){--private-table-cell-transition-duration:0s}:host([selected]){--mds-table-cell-background:var(--mds-table-cell-background-alt,var(--mds-table-row-background-alt,rgb(var(--tone-neutral,0 0 0))));--mds-table-cell-color:var(--mds-table-cell-color-alt,var(--mds-table-row-color-alt,rgb(var(--tone-neutral-02,244 244 244))))}:host([sorted]){--mds-table-cell-background:var(--mds-table-background,rgb(var(--tone-neutral,0 0 0)));--mds-table-cell-color:var(--mds-table-color,rgb(var(--tone-neutral-02,244 244 244)))}:host(:not(:is([hydrated],.hydrated))){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-table-cell-transition-duration:0s}}`;
 
 const MdsTableCell = class {
     constructor(hostRef) {
@@ -225,8 +239,17 @@ const MdsTableCell = class {
     componentWillLoad() {
         setAttributeIfEmpty(this.host, 'role', 'cell');
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     render() {
-        return (h(Host, { key: '23bf4e14f265a14bdd0ee6fc81ebb76b0b3077c1' }, h("slot", { key: '8d17336ccffc0ca1735fa1af852d93dd64e86973' })));
+        return (h(Host, { key: 'cb36677b929728cfe418b9fbcc528fb36769f62c', "pref-animation": this.prefAnimation }, h("slot", { key: 'cfad63ed2784a464f48ab96fa1ba67184afc6aba' })));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/mds-input-tip_2.entry.js

@@ -1,8 +1,9 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-CAd5312P.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 import { m as miBaselineDone } from './done-CvUz9jjh.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
 
-const mdsInputTipCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-input-tip-active-translate:translate(0,0);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));--mds-input-tip-horizontal-offset-focused:0px;--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*400);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100)}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-input-tip-item: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-input-tip-active-translate{syntax:"<transform-function>";inherits:false;initial-value:translate(0)}@property --mds-input-tip-horizontal-offset-focused{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-input-tip-active-translate:translate(0,0);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));--mds-input-tip-horizontal-offset-focused:0px;--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*400);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);display:flex;gap:calc(var(--spacing,.0025rem)*100);justify-content:flex-end;left:var(--mds-input-tip-horizontal-offset,calc(var(--spacing,.0025rem)*400));pointer-events:none;position:absolute;right:var(--mds-input-tip-horizontal-offset,calc(var(--spacing,.0025rem)*400));-webkit-transform:var(--mds-input-tip-active-translate,translate(0,0));transform:var(--mds-input-tip-active-translate,translate(0,0));-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:transform;-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))}:host(:empty){display:none}:host([position=top]){top:var(--mds-input-tip-vertical-offset,calc(var(--spacing,.0025rem)*100))}:host([position=bottom]){bottom:var(--mds-input-tip-vertical-offset,calc(var(--spacing,.0025rem)*100))}:host([position=top][active]:not([active=false])){--mds-input-tip-active-translate:translate(calc(var(--mds-input-tip-horizontal-offset-focused,0px) * -1),calc(var(--mds-input-tip-vertical-offset,calc(var(--spacing,.0025rem) * 100)) * -1))}:host([position=top][active]:not([active=false])) ::slotted(mds-input-tip-item){border-top-left-radius:0;border-top-right-radius:0}:host([position=bottom][active]:not([active=false])){--mds-input-tip-active-translate:translate(calc(var(--mds-input-tip-horizontal-offset-focused,0px)*-1),var(--mds-input-tip-vertical-offset,calc(var(--spacing,.0025rem)*100)))}:host([position=bottom][active]:not([active=false])) ::slotted(mds-input-tip-item){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(:root.pref-animation-reduce){transition-duration:0s}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))){transition-duration:0s}}`;
+const mdsInputTipCss = () => `@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-input-tip-active-translate:translate(0,0);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));--mds-input-tip-horizontal-offset-focused:0px;--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*400);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100)}}}:host(:not(:is([hydrated],.hydrated))),mds-input-tip-item: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-input-tip-active-translate{syntax:"<transform-function>";inherits:false;initial-value:translate(0)}@property --mds-input-tip-horizontal-offset-focused{syntax:"<length>";inherits:false;initial-value:0}:host{--mds-input-tip-transition-duration:var(--duration-300,.3s);--private-input-tip-transition-duration:var(--mds-input-tip-transition-duration);--mds-input-tip-active-translate:translate(0,0);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));--mds-input-tip-horizontal-offset-focused:0px;--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*400);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);display:flex;gap:calc(var(--spacing,.0025rem)*100);justify-content:flex-end;left:var(--mds-input-tip-horizontal-offset,calc(var(--spacing,.0025rem)*400));pointer-events:none;position:absolute;right:var(--mds-input-tip-horizontal-offset,calc(var(--spacing,.0025rem)*400));-webkit-transform:var(--mds-input-tip-active-translate,translate(0,0));transform:var(--mds-input-tip-active-translate,translate(0,0));-webkit-transition-duration:var(--private-input-tip-transition-duration);transition-duration:var(--private-input-tip-transition-duration);transition-property:transform;-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))}:host(:empty){display:none}:host([position=top]){top:var(--mds-input-tip-vertical-offset,calc(var(--spacing,.0025rem)*100))}:host([position=bottom]){bottom:var(--mds-input-tip-vertical-offset,calc(var(--spacing,.0025rem)*100))}:host([position=top][active]:not([active=false])){--mds-input-tip-active-translate:translate(calc(var(--mds-input-tip-horizontal-offset-focused,0px) * -1),calc(var(--mds-input-tip-vertical-offset,calc(var(--spacing,.0025rem) * 100)) * -1))}:host([position=top][active]:not([active=false])) ::slotted(mds-input-tip-item){border-top-left-radius:0;border-top-right-radius:0}:host([position=bottom][active]:not([active=false])){--mds-input-tip-active-translate:translate(calc(var(--mds-input-tip-horizontal-offset-focused,0px)*-1),var(--mds-input-tip-vertical-offset,calc(var(--spacing,.0025rem)*100)))}:host([position=bottom][active]:not([active=false])) ::slotted(mds-input-tip-item){border-bottom-left-radius:0;border-bottom-right-radius:0}:host([pref-animation=reduce]){--private-input-tip-transition-duration:0s}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-input-tip-transition-duration:0s}}`;
 
 const MdsInputTip = class {
     constructor(hostRef) {
@@ -16,8 +17,17 @@ const MdsInputTip = class {
          */
         this.position = 'top';
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     render() {
-        return (h(Host, { key: '8d15fab2deec49cb23836bd8e0f931b312d38271' }, h("slot", { key: '24a4377f0eb1825000fc380f7d96255d9233853e' })));
+        return (h(Host, { key: 'db2fa18fdcb6501bd9d29fbe0d5d0441b89fe16b', "pref-animation": this.prefAnimation }, h("slot", { key: 'ffcb33a9f61008c5f826513049232eedf3cf520c' })));
     }
 };
 MdsInputTip.style = mdsInputTipCss();
@@ -58,7 +68,7 @@ var localeIt = {
 	readonly: readonly
 };
 
-const mdsInputTipItemCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--mds-input-tip-item-background:rgb(var(--tone-neutral-03,233 233 233));--mds-input-tip-item-color:rgb(var(--tone-neutral,0 0 0));--mds-input-tip-item-icon-color:rgb(var(--tone-neutral,0 0 0))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),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-input-tip-item-background:var(--mds-input-tip-background,rgb(var(--tone-neutral-03,233 233 233)));--mds-input-tip-item-color:rgb(var(--tone-neutral,0 0 0));--mds-input-tip-item-icon-color:rgb(var(--tone-neutral,0 0 0));align-items:center;background-color:var(--mds-input-tip-item-background,rgb(var(--tone-neutral-03,233 233 233)));border-radius:var(--radius-2xs,6px);color:var(--mds-input-tip-item-color,rgb(var(--tone-neutral,0 0 0)));display:flex;height:calc(var(--spacing,.0025rem)*300);justify-content:center;min-width:calc(var(--spacing,.0025rem)*300);padding:0;pointer-events:none;position:static;text-align:center;transform:translate(0);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color,border-radius,color,padding-left,padding-right,transform;-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));-webkit-user-select:none;user-select:none}mds-text{display:flex;place-self:center}.content{display:grid;grid-template-columns:0fr;opacity:0;overflow:hidden;-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:grid-template-columns,opacity,-ms-grid-columns;-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))}.content,.icon{height:calc(var(--spacing,.0025rem)*300)}.icon{display:flex;fill:var(--mds-input-tip-item-icon-color,rgb(var(--tone-neutral,0 0 0)));transform:translateY(-1px);width:calc(var(--spacing,.0025rem)*300)}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}:host(:not([expanded])){color:#0000}:host([expanded]){--mds-input-tip-item-color:rgb(var(--tone-neutral,0 0 0));padding-left:calc(var(--spacing,.0025rem)*200);padding-right:calc(var(--spacing,.0025rem)*200)}:host([expanded]) .content{grid-template-columns:1fr;opacity:1}:host([variant=required]){--mds-input-tip-item-background:rgb(var(--status-error-05,250 165 160))}:host([variant=required-success]){--mds-input-tip-item-background:rgb(var(--status-success-05,107 206 147))}:host([variant=readonly]){--mds-input-tip-item-background:rgb(var(--status-info-05,112 198 234))}:host([variant=disabled]){--mds-input-tip-item-background:rgb(var(--tone-neutral-05,197 197 197))}:host([variant=count-empty]){--mds-input-tip-item-color:rgb(var(--status-info-02,222 242 250));--mds-input-tip-item-background:rgb(var(--status-info-08,0 107 151))}:host([variant=count-incomplete]){--mds-input-tip-item-color:rgb(var(--status-success-02,222 244 228));--mds-input-tip-item-background:rgb(var(--status-success-08,0 116 46))}:host([variant=count-almost]){--mds-input-tip-item-color:rgb(var(--status-warning-02,255 237 185));--mds-input-tip-item-background:rgb(var(--status-warning-08,129 96 0))}:host([variant=count-almost-full]){--mds-input-tip-item-color:rgb(var(--status-error-02,255 234 231));--mds-input-tip-item-background:rgb(var(--status-error-08,182 50 54))}:host([variant=count-full]){--mds-input-tip-item-color:rgb(var(--status-error-09,135 0 14));--mds-input-tip-item-background:rgb(var(--status-error-05,250 165 160))}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-animation-reduce) .content{transition-duration:0s}:host-context(:root.pref-contrast-more):host([variant=count-empty]){--mds-input-tip-item-color:rgb(var(--status-info-10,0 61 103));--mds-input-tip-item-background:rgb(var(--status-info-05,112 198 234))}:host-context(:root.pref-contrast-more):host([variant=count-incomplete]){--mds-input-tip-item-color:rgb(var(--status-success-10,0 69 0));--mds-input-tip-item-background:rgb(var(--status-success-05,107 206 147))}:host-context(:root.pref-contrast-more):host([variant=count-almost]){--mds-input-tip-item-color:rgb(var(--status-warning-10,77 57 0));--mds-input-tip-item-background:rgb(var(--status-warning-05,237 177 0))}:host-context(:root.pref-contrast-more):host([variant=count-almost-full]){--mds-input-tip-item-color:rgb(var(--status-error-10,115 0 0));--mds-input-tip-item-background:rgb(var(--status-error-05,250 165 160))}@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]))) .content{transition-duration:0s}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=count-empty]){--mds-input-tip-item-color:rgb(var(--status-info-10,0 61 103));--mds-input-tip-item-background:rgb(var(--status-info-05,112 198 234))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=count-incomplete]){--mds-input-tip-item-color:rgb(var(--status-success-10,0 69 0));--mds-input-tip-item-background:rgb(var(--status-success-05,107 206 147))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=count-almost]){--mds-input-tip-item-color:rgb(var(--status-warning-10,77 57 0));--mds-input-tip-item-background:rgb(var(--status-warning-05,237 177 0))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))):host([variant=count-almost-full]){--mds-input-tip-item-color:rgb(var(--status-error-10,115 0 0));--mds-input-tip-item-background:rgb(var(--status-error-05,250 165 160))}}`;
+const mdsInputTipItemCss = () => `@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-input-tip-item-background:rgb(var(--tone-neutral-03,233 233 233));--mds-input-tip-item-color:rgb(var(--tone-neutral,0 0 0));--mds-input-tip-item-icon-color:rgb(var(--tone-neutral,0 0 0))}}}:host(:not(:is([hydrated],.hydrated))),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-input-tip-item-transition-duration:var(--duration-300,.3s);--private-input-tip-item-transition-duration:var(--mds-input-tip-item-transition-duration);--mds-input-tip-item-content-transition-duration:var(--duration-200,.2s);--private-input-tip-item-content-transition-duration:var(--mds-input-tip-item-content-transition-duration);--mds-input-tip-item-background:var(--mds-input-tip-background,rgb(var(--tone-neutral-03,233 233 233)));--mds-input-tip-item-color:rgb(var(--tone-neutral,0 0 0));--mds-input-tip-item-icon-color:rgb(var(--tone-neutral,0 0 0));align-items:center;background-color:var(--mds-input-tip-item-background,rgb(var(--tone-neutral-03,233 233 233)));border-radius:var(--radius-2xs,6px);color:var(--mds-input-tip-item-color,rgb(var(--tone-neutral,0 0 0)));display:flex;height:calc(var(--spacing,.0025rem)*300);justify-content:center;min-width:calc(var(--spacing,.0025rem)*300);padding:0;pointer-events:none;position:static;text-align:center;transform:translate(0);-webkit-transition-duration:var(--private-input-tip-item-transition-duration);transition-duration:var(--private-input-tip-item-transition-duration);transition-property:background-color,border-radius,color,padding-left,padding-right,transform;-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));-webkit-user-select:none;user-select:none}mds-text{display:flex;place-self:center}.content{display:grid;grid-template-columns:0fr;opacity:0;overflow:hidden;-webkit-transition-duration:var(--private-input-tip-item-content-transition-duration);transition-duration:var(--private-input-tip-item-content-transition-duration);transition-property:grid-template-columns,opacity,-ms-grid-columns;-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))}.content,.icon{height:calc(var(--spacing,.0025rem)*300)}.icon{display:flex;fill:var(--mds-input-tip-item-icon-color,rgb(var(--tone-neutral,0 0 0)));transform:translateY(-1px);width:calc(var(--spacing,.0025rem)*300)}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}:host(:not([expanded])){color:#0000}:host([expanded]){--mds-input-tip-item-color:rgb(var(--tone-neutral,0 0 0));padding-left:calc(var(--spacing,.0025rem)*200);padding-right:calc(var(--spacing,.0025rem)*200)}:host([expanded]) .content{grid-template-columns:1fr;opacity:1}:host([variant=required]){--mds-input-tip-item-background:rgb(var(--status-error-05,250 165 160))}:host([variant=required-success]){--mds-input-tip-item-background:rgb(var(--status-success-05,107 206 147))}:host([variant=readonly]){--mds-input-tip-item-background:rgb(var(--status-info-05,112 198 234))}:host([variant=disabled]){--mds-input-tip-item-background:rgb(var(--tone-neutral-05,197 197 197))}:host([variant=count-empty]){--mds-input-tip-item-color:rgb(var(--status-info-02,222 242 250));--mds-input-tip-item-background:rgb(var(--status-info-08,0 107 151))}:host([variant=count-incomplete]){--mds-input-tip-item-color:rgb(var(--status-success-02,222 244 228));--mds-input-tip-item-background:rgb(var(--status-success-08,0 116 46))}:host([variant=count-almost]){--mds-input-tip-item-color:rgb(var(--status-warning-02,255 237 185));--mds-input-tip-item-background:rgb(var(--status-warning-08,129 96 0))}:host([variant=count-almost-full]){--mds-input-tip-item-color:rgb(var(--status-error-02,255 234 231));--mds-input-tip-item-background:rgb(var(--status-error-08,182 50 54))}:host([variant=count-full]){--mds-input-tip-item-color:rgb(var(--status-error-09,135 0 14));--mds-input-tip-item-background:rgb(var(--status-error-05,250 165 160))}:host([pref-animation=reduce]){--private-input-tip-item-transition-duration:0s;--private-input-tip-item-content-transition-duration:0s}:host([pref-contrast=more]):host([variant=count-empty]){--mds-input-tip-item-color:rgb(var(--status-info-10,0 61 103));--mds-input-tip-item-background:rgb(var(--status-info-05,112 198 234))}:host([pref-contrast=more]):host([variant=count-incomplete]){--mds-input-tip-item-color:rgb(var(--status-success-10,0 69 0));--mds-input-tip-item-background:rgb(var(--status-success-05,107 206 147))}:host([pref-contrast=more]):host([variant=count-almost]){--mds-input-tip-item-color:rgb(var(--status-warning-10,77 57 0));--mds-input-tip-item-background:rgb(var(--status-warning-05,237 177 0))}:host([pref-contrast=more]):host([variant=count-almost-full]){--mds-input-tip-item-color:rgb(var(--status-error-10,115 0 0));--mds-input-tip-item-background:rgb(var(--status-error-05,250 165 160))}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-input-tip-item-transition-duration:0s;--private-input-tip-item-content-transition-duration:0s}}@media (prefers-contrast:more){:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=count-empty]){--mds-input-tip-item-color:rgb(var(--status-info-10,0 61 103));--mds-input-tip-item-background:rgb(var(--status-info-05,112 198 234))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=count-incomplete]){--mds-input-tip-item-color:rgb(var(--status-success-10,0 69 0));--mds-input-tip-item-background:rgb(var(--status-success-05,107 206 147))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=count-almost]){--mds-input-tip-item-color:rgb(var(--status-warning-10,77 57 0));--mds-input-tip-item-background:rgb(var(--status-warning-05,237 177 0))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))):host([variant=count-almost-full]){--mds-input-tip-item-color:rgb(var(--status-error-10,115 0 0));--mds-input-tip-item-background:rgb(var(--status-error-05,250 165 160))}}`;
 
 const MdsInputTipItem = class {
     constructor(hostRef) {
@@ -80,6 +90,19 @@ const MdsInputTipItem = class {
     async updateLang() {
         this.language = this.t.lang(this.element);
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+    }
     componentWillRender() {
         this.t.lang(this.element);
     }
@@ -89,11 +112,11 @@ const MdsInputTipItem = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ae50f25e0d68a10b9404fa1541472e47f90a8169' }, h("div", { key: '5afdef4bd449b5e682f531c380380c1750d815b5', class: "content" }, this.variant === 'text' && (h("mds-text", { key: '8f9323c1472bb4b4e7dd53c6aef286988dd5dd0a', typography: "option", truncate: "word" }, h("span", { key: '61308db5680808b83d2500b0cb2a7de0d149b54f', class: "text" }, h("slot", { key: 'e0e748d323186ad4eebeacff1250a1bcbe8f38f2' })))), this.variant === 'readonly' && (h("mds-text", { key: '6ddb55f4f80428589fdd73f6fcc1640f6bd5c491', typography: "option", truncate: "word" }, h("span", { key: '32a81ac4bcc3738214704936dc4c28cd7857bbcb', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'disabled' && (h("mds-text", { key: '24b75746aaa4a4ed2f20a6abf03de25229846016', typography: "option", truncate: "word" }, h("span", { key: '51be2f75381a4f0c04ab1b73b5be0bcde1e72266', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required' && (h("mds-text", { key: '1517bb6da94c864a1feb5a01fde4c6db8781d279', typography: "option", truncate: "word" }, h("span", { key: 'e855ebba3eb6d70a45e6315da892b7a0f3348d1f', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required-success' && (h("span", { key: 'a63c9ee2d3aa739a7ba14c12b235793cea1a11a6', class: "icon", innerHTML: miBaselineDone })), (this.variant === 'count-almost' ||
+        return (h(Host, { key: '078e75be53bad8d08bb5e6afefd743c73be8da39', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast }, h("div", { key: '49692a7d3678d9d28e8ea18b78f37daa0e4d611f', class: "content" }, this.variant === 'text' && (h("mds-text", { key: 'a1664a33f7e3c088a582f0b1df7e649c91e3a290', typography: "option", truncate: "word" }, h("span", { key: '46e8a779522842314c26dddae23e26dc2240d8d3', class: "text" }, h("slot", { key: 'e66eb599d52bc074b94fc82a9b9fe9cea295ee5b' })))), this.variant === 'readonly' && (h("mds-text", { key: '09e5d988e0ab597e8fd7e82705bb7ebd12b33838', typography: "option", truncate: "word" }, h("span", { key: '04e8068c07dbc1f91c5093953e61f591f170fc52', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'disabled' && (h("mds-text", { key: '1928c7efc9c79e66445f86c97f1915d1d8129ef4', typography: "option", truncate: "word" }, h("span", { key: '9851a981f3d17d76889ab8ac1bedc37200f69bfb', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required' && (h("mds-text", { key: '81b34311357f835292345591ae6814b577686893', typography: "option", truncate: "word" }, h("span", { key: 'fa77c15632a89bfaf6d23a987e6711e129def577', class: "text" }, this.variant && this.t.get(this.variant.toString())))), this.variant === 'required-success' && (h("span", { key: '95b68a306c47da4f289de09cf7ecbfb335d136fa', class: "icon", innerHTML: miBaselineDone })), (this.variant === 'count-almost' ||
             this.variant === 'count-almost-full' ||
             this.variant === 'count-empty' ||
             this.variant === 'count-full' ||
-            this.variant === 'count-incomplete') && (h("mds-text", { key: 'c61077c3c8f0b18b61c8c067950d052d6845072a', typography: "option", truncate: "word" }, h("span", { key: '1e2daa4c1576e591dde261964a8414ffe7b26310', class: "text" }, h("slot", { key: '444a0b42e115b0dec9f9c800400a17d9a36ff036' })))))));
+            this.variant === 'count-incomplete') && (h("mds-text", { key: 'c8c6069998f8e9d44e04006b41ece2c268f4cd16', typography: "option", truncate: "word" }, h("span", { key: 'e783cb1faed6ffa6d81a28b101b3f4f2e5391927', class: "text" }, h("slot", { key: '3bd4f171221a3bd0b8e302b5bbdd1a82e4b7343e' })))))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/mds-input-upload.entry.js

@@ -304,7 +304,7 @@ var localeIt = {
 	sortByStatus: sortByStatus
 };
 
-const mdsInputUploadCss = () => `@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-input-upload-drag-area-background-color-on-drag:rgb(var(--tone-neutral-10,60 60 60));--mds-input-upload-drag-area-background-color:rgb(var(--tone-neutral,0 0 0));--mds-input-upload-min-cols:3}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-file-preview,mds-progress,mds-tab,mds-tab-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-input-upload-min-cols{syntax:"<integer>";inherits:false;initial-value:3}:host{--mds-input-upload-drag-area-background-color-on-drag:rgb(var(--tone-neutral-10,60 60 60));--mds-input-upload-drag-area-background-color:rgb(var(--tone-neutral,0 0 0));--mds-input-upload-drag-area-border-on-drag:3px dashed rgb(var(--tone-neutral-04,218 218 218));--mds-input-upload-drag-area-border:3px dashed rgb(var(--tone-neutral-07,134 134 134));--mds-input-upload-min-cols:3;display:grid;gap:calc(var(--spacing,.0025rem)*400);grid-template-columns:repeat(1,minmax(1px,100%))}.drag-area{align-items:center;background-color:var(--mds-input-upload-drag-area-background-color,rgb(var(--tone-neutral,0 0 0)));border:var(--mds-input-upload-drag-area-border);border-radius:var(--radius-2xl,24px);display:flex;flex-direction:column;gap:calc(var(--spacing,.0025rem)*400);justify-content:center;padding:calc(var(--spacing,.0025rem)*600);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;-webkit-transition-timing-function:var(--ease-in-out);transition-timing-function:var(--ease-in-out);-webkit-user-select:none;user-select:none}.drag-area--on-drag-enter{--mds-input-upload-drag-area-background-color:var(--mds-input-upload-drag-area-background-color-on-drag,rgb(var(--tone-neutral-10,60 60 60)));--mds-input-upload-drag-area-border:var(--mds-input-upload-drag-area-border-on-drag)}.icon{display:flex;fill:rgb(var(--tone-neutral-03,233 233 233));width:calc(var(--spacing,.0025rem)*600)}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}.action{border-radius:1000px;fill:rgb(var(--tone-neutral-04,218 218 218));height:auto;padding:calc(var(--spacing,.0025rem)*150)}.action--cancel-upload:focus-visible,.action--cancel-upload:hover{--mds-button-background:rgb(var(--status-error-09,135 0 14));fill:rgb(var(--status-error-04,254 193 189))}.action--retry-upload:focus-visible,.action--retry-upload:hover{--mds-button-background:rgb(var(--status-success-09,0 82 9));fill:rgb(var(--status-success-04,158 222 181))}.main-action{display:grid;grid-template-columns:repeat(1,minmax(1px,100%));pointer-events:none;text-align:center}.main-action,.main-actions{gap:calc(var(--spacing,.0025rem)*200)}.main-actions{display:flex;flex-direction:column;min-width:calc(var(--spacing,.0025rem)*3200)}.main-action-icon{align-items:center;display:inline-flex;justify-content:center}.file-list,.main-infos{display:grid;gap:calc(var(--spacing,.0025rem)*100);grid-template-columns:repeat(1,minmax(1px,100%))}.file-list{gap:calc(var(--spacing,.0025rem)*400);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}:host-context(:not(.safari)) .file-list{--cols:var(--mds-input-upload-min-cols,3);--perc-w:calc(100%/var(--cols));--gap:calc(var(--spacing,.0025rem)*400);--gap-w:calc(var(--gap) - var(--gap)/var(--cols));--max-w:calc(var(--perc-w) - var(--gap-w));--template-cols:repeat(auto-fit,minmax(calc(var(--spacing,.0025rem)*4000),var(--max-w)));grid-template-columns:var(--template-cols)}:host-context(:not(.safari)) .file-list--more-items{--template-cols:repeat(auto-fit,minmax(calc(var(--spacing,.0025rem)*4000),1fr))}.main-infos{max-width:calc(var(--spacing,.0025rem)*4800);text-align:center}.main-infos,.progress-bar{min-width:0;width:100%}.additional-infos{align-items:flex-start;gap:calc(var(--spacing,.0025rem)*400)}.additional-infos,.file-specs{display:flex;flex-wrap:wrap;justify-content:space-between}.file-specs{flex-grow:1;gap:calc(var(--spacing,.0025rem)*100) calc(var(--spacing,.0025rem)*400)}.action-sort{display:inline-flex}.file-specs.file-specs-sort{flex-flow:column;justify-content:center}@container (max-width:340px){.file-list{--template-cols:1fr}}`;
+const mdsInputUploadCss = () => `@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-input-upload-drag-area-background-color-on-drag:rgb(var(--tone-neutral-10,60 60 60));--mds-input-upload-drag-area-background-color:rgb(var(--tone-neutral,0 0 0));--mds-input-upload-min-cols:3}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-file-preview,mds-progress,mds-tab,mds-tab-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-input-upload-min-cols{syntax:"<integer>";inherits:false;initial-value:3}:host{--mds-input-upload-drag-area-background-color-on-drag:rgb(var(--tone-neutral-10,60 60 60));--mds-input-upload-drag-area-background-color:rgb(var(--tone-neutral,0 0 0));--mds-input-upload-drag-area-border-on-drag:3px dashed rgb(var(--tone-neutral-04,218 218 218));--mds-input-upload-drag-area-border:3px dashed rgb(var(--tone-neutral-07,134 134 134));--mds-input-upload-min-cols:3;display:grid;gap:calc(var(--spacing,.0025rem)*400);grid-template-columns:repeat(1,minmax(1px,100%))}.drag-area{align-items:center;background-color:var(--mds-input-upload-drag-area-background-color,rgb(var(--tone-neutral,0 0 0)));border:var(--mds-input-upload-drag-area-border);border-radius:var(--radius-2xl,24px);display:flex;flex-direction:column;gap:calc(var(--spacing,.0025rem)*400);justify-content:center;padding:calc(var(--spacing,.0025rem)*600);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;-webkit-transition-timing-function:var(--ease-in-out);transition-timing-function:var(--ease-in-out);-webkit-user-select:none;user-select:none}.drag-area--on-drag-enter{--mds-input-upload-drag-area-background-color:var(--mds-input-upload-drag-area-background-color-on-drag,rgb(var(--tone-neutral-10,60 60 60)));--mds-input-upload-drag-area-border:var(--mds-input-upload-drag-area-border-on-drag)}.icon{display:flex;fill:rgb(var(--tone-neutral-03,233 233 233));width:calc(var(--spacing,.0025rem)*600)}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}.action{border-radius:1000px;fill:rgb(var(--tone-neutral-04,218 218 218));height:auto;padding:calc(var(--spacing,.0025rem)*150)}.action--cancel-upload:focus-visible,.action--cancel-upload:hover{--mds-button-background:rgb(var(--status-error-09,135 0 14));fill:rgb(var(--status-error-04,254 193 189))}.action--retry-upload:focus-visible,.action--retry-upload:hover{--mds-button-background:rgb(var(--status-success-09,0 82 9));fill:rgb(var(--status-success-04,158 222 181))}.main-action{display:grid;grid-template-columns:repeat(1,minmax(1px,100%));pointer-events:none;text-align:center}.main-action,.main-actions{gap:calc(var(--spacing,.0025rem)*200)}.main-actions{display:flex;flex-direction:column;min-width:calc(var(--spacing,.0025rem)*3200)}.main-action-icon{align-items:center;display:inline-flex;justify-content:center}.file-list,.main-infos{display:grid;gap:calc(var(--spacing,.0025rem)*100);grid-template-columns:repeat(1,minmax(1px,100%))}.file-list{--cols:var(--mds-input-upload-min-cols,3);--perc-w:calc(100%/var(--cols));--gap:calc(var(--spacing,.0025rem)*400);--gap-w:calc(var(--gap) - var(--gap)/var(--cols));--max-w:calc(var(--perc-w) - var(--gap-w));--template-cols:repeat(auto-fit,minmax(calc(var(--spacing,.0025rem)*4000),var(--max-w)));gap:calc(var(--spacing,.0025rem)*400);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));grid-template-columns:var(--template-cols)}.file-list--more-items{--template-cols:repeat(auto-fit,minmax(calc(var(--spacing,.0025rem)*4000),1fr))}.main-infos{max-width:calc(var(--spacing,.0025rem)*4800);text-align:center}.main-infos,.progress-bar{min-width:0;width:100%}.additional-infos{align-items:flex-start;gap:calc(var(--spacing,.0025rem)*400)}.additional-infos,.file-specs{display:flex;flex-wrap:wrap;justify-content:space-between}.file-specs{flex-grow:1;gap:calc(var(--spacing,.0025rem)*100) calc(var(--spacing,.0025rem)*400)}.action-sort{display:inline-flex}.file-specs.file-specs-sort{flex-flow:column;justify-content:center}@container (max-width:340px){.file-list{--template-cols:1fr}}`;
 
 const MdsInputUpload = class {
     constructor(hostRef) {
@@ -414,6 +414,16 @@ const MdsInputUpload = class {
                 localStorage.setItem(LOCALSTORAGE_KEY_USER_SORT, this.userSort);
             }
         };
+        this.handleAddFileClick = () => {
+            var _a;
+            (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click();
+        };
+        this.handleTabChange = (event) => {
+            this.onChangeTab(event.detail);
+        };
+        this.handleFileDelete = (filekey) => () => {
+            this.onCancel(filekey);
+        };
     }
     /**
      * Updates the component's texts to the locale currently set on the host element.
@@ -628,21 +638,21 @@ const MdsInputUpload = class {
         return this.sort !== undefined && this.files.length > 1;
     }
     render() {
-        return (h(Host, { key: '897d7ff19b709b4afb7c6c49d955b86d46300b25' }, h("div", { key: '271cfe885973fcb61837ef7f8540bcf7dbd614f4', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: (dragArea) => (this.elDragArea = dragArea) }, h("div", { key: 'b3678991f47df3f22af836310adf321dfcbd3c77', class: "main-action" }, h("div", { key: '61aeeeed1f924491cf833b72bd7937d4910aedde', class: "main-action-icon" }, h("mds-icon", { key: 'd20de6d5fbbe9b876d1ef9e250a30b3a175234aa', class: "icon", name: miOutlineFileUpload })), h("mds-text", { key: 'a8aa32d574c26e4f82276a298f11168c83f8a5b2', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '2bd9a84be1200c57d03087243cd7a1319c23d391', class: "main-actions" }, h("mds-button", { key: '9f5a06c254195d68f18f0e0d1718117f64cccab6', variant: "primary", onClick: () => { var _a; return (_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.click(); } }, ' ', this.files != null
+        return (h(Host, { key: '11be648cd871e039af8ada9d00ad6f9735a47855' }, h("div", { key: '65173559d95fd8215da2c745a9a8baa1793eb92d', class: "drag-area", onDrop: this.onDropHandler, onDragOver: this.onDragOverHandler, onDragEnter: this.onDragEnterHandler, onDragLeave: this.onDragLeaveHandler, ref: (dragArea) => (this.elDragArea = dragArea) }, h("div", { key: '75f516f8cf412f757c7e061ac6a480a8761606cd', class: "main-action" }, h("div", { key: '437cbc1439b93da2cfdb14c85ea2007990e42813', class: "main-action-icon" }, h("mds-icon", { key: '1983618a2e3d6490e40e7bf72f0d8fe718575b8e', class: "icon", name: miOutlineFileUpload })), h("mds-text", { key: '027f195062b1d17b22f886e3b54fb6c715e47461', animation: this.animateText ? 'yugop' : 'none', variant: "title", typography: "action", text: this.actionTitle })), h("div", { key: '9a08ddd0dceac85a3dd1a3cfc462d537b7572c66', class: "main-actions" }, h("mds-button", { key: '965b7302c6181857737427a7edeefa66b3955c7e', variant: "primary", onClick: this.handleAddFileClick }, ' ', this.files != null
             ? this.t.get('addFile', { maxFiles: this.maxFiles })
-            : this.t.get('selectFile')), this.files.length > 0 && (h("mds-button", { key: 'd6d640d72e08cb3d575f499c78a23b57a18a9930', variant: "error", onClick: this.onReset }, this.t.get('cancel')))), h("div", { key: '2277dc83af7e02ec6ea18fc69e36f66a3e346e6a', class: "main-infos" }, h("mds-progress", { key: '17fd2e49e8d316fabd172bce7700cb2b387e6adb', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1 ? (h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))) : (h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles !== 0 && !Number.isNaN(this.maxFiles)
+            : this.t.get('selectFile')), this.files.length > 0 && (h("mds-button", { key: '7b651410ba2b458f40e38eceaf40d10d154b4076', variant: "error", onClick: this.onReset }, this.t.get('cancel')))), h("div", { key: '91c08525d3580765bd2e189b67c2fb679b52668a', class: "main-infos" }, h("mds-progress", { key: 'ec133efac412e827bbd038a8708532a36ff352f4', "aria-hidden": "true", class: "progress-bar", progress: this.progress }), this.files.length < 1 ? (h("mds-text", { variant: "info", typography: "caption" }, this.t.get('maxFilesUpload', { maxFiles: this.maxFiles }))) : (h("mds-text", { variant: "info", typography: "caption" }, this.maxFiles !== 0 && !Number.isNaN(this.maxFiles)
             ? this.t.get('currentFilesWithMax', {
                 currentFiles: this.files.length,
                 maxFiles: this.maxFiles,
             })
-            : this.t.get('currentFilesNoMax', { currentFiles: this.files.length }))))), h("input", { key: '2f9e04f4dfdbeed9f5e636f803462250cc3cb3e0', type: "file", accept: this.accept, hidden: true, ref: (i) => (this.nativeInput = i), onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: 'fef36951003f924232da4d8b9c0b8557b01281d8', class: "additional-infos" }, h("div", { key: 'a61db4357d3210444a466db0962dd34f4bc4870f', class: clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, h("mds-text", { key: 'b59f132d6530615d96b59a030d5eae99bb26c2c3', variant: "info", typography: "caption" }, this.extensions !== ''
+            : this.t.get('currentFilesNoMax', { currentFiles: this.files.length }))))), h("input", { key: 'd1017a9d0fd39f8feeb1bb00bf02c3245dbb22a0', type: "file", accept: this.accept, hidden: true, ref: (i) => (this.nativeInput = i), onChange: this.onAdd, multiple: this.maxFiles > 1 }), h("div", { key: '937698a3868e9c134974b470c3f75809d3745eee', class: "additional-infos" }, h("div", { key: 'cbcc4354649ae03eaa76c43ab405c64a3879ebe2', class: clsx('file-specs', this.isSortTabShown() && 'file-specs-sort') }, h("mds-text", { key: '525535d43f1adbac5f8994125eb5285b83690434', variant: "info", typography: "caption" }, this.extensions !== ''
             ? `${this.t.get('canUpload')} ${this.extensions}`
-            : this.t.get('canUploadAll')), h("mds-text", { key: '616cd7e7bf1e303a53b92eb2ae60825584b28d70', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() && (h("mds-tab", { key: '09da0b59bd0da72112faf753d653ad1913e8fe92', class: "action-sort", onMdsTabChange: (event) => this.onChangeTab(event.detail) }, h("mds-tab-item", { key: '1b7efa058f806a970b710bb397a828350e6496a4', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: "date" }), h("mds-tab-item", { key: '0778ef97b2835eeea614af0b04f3e27fe6337642', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: "status" })))), h("div", { key: 'a78410ef5c0d8c43d3721c613a5e38da53175416', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map((file) => {
+            : this.t.get('canUploadAll')), h("mds-text", { key: 'bf2dd644753d7f3c2d3f8cdc2d1c2e71bebf5e47', variant: "info", typography: "caption" }, this.t.get('maxFileSizePerFile', { maxFileSize: this.maxFileSize }))), this.isSortTabShown() && (h("mds-tab", { key: 'be5ffb6ef43f5c98d2d2fe0f6c8cfe380c93e873', class: "action-sort", onMdsTabChange: this.handleTabChange }, h("mds-tab-item", { key: 'c6e1288e74430bc64cc7c1d5766a9aaa96eb30f9', icon: iconSortById, selected: this.userSort === 'date', title: this.t.get('sortByDate'), value: "date" }), h("mds-tab-item", { key: 'cbf7a5855ee345eb6388eb010e30f01242ceb903', icon: iconSortByStatus, selected: this.userSort === 'status', title: this.t.get('sortByStatus'), value: "status" })))), h("div", { key: '5a0f138b9ceb769c384ac0cdc644630542092fac', class: clsx('file-list', this.files.length > this.cssMinCols && 'file-list--more-items') }, this.files.map((file) => {
             switch (file.status) {
                 case Status.ERROR:
-                    return (h("mds-file-preview", { deletable: true, variant: "error", filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: () => this.onCancel(file.key), message: file.errorMessage }));
+                    return (h("mds-file-preview", { deletable: true, variant: "error", filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: this.handleFileDelete(file.key), message: file.errorMessage }));
                 case Status.SUCCESS:
-                    return (h("mds-file-preview", { deletable: true, filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: () => this.onCancel(file.key), src: URL.createObjectURL(file.file) }));
+                    return (h("mds-file-preview", { deletable: true, filename: file.file.name, filesize: file.file.size.toString(), onMdsFileDelete: this.handleFileDelete(file.key), src: URL.createObjectURL(file.file) }));
             }
         }))));
     }

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

@@ -6,6 +6,7 @@ import { m as miBaselineRemove } from './remove-D17B058a.js';
 import { m as miBaselineDone } from './done-CvUz9jjh.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
 import { h as hashRandomValue } from './aria-CSCy6TMW.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
 var mggAiChatbotOutline = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path d="M10 11H8V8h2zM16 11h-2V8h2z"/>
@@ -277,7 +278,7 @@ function createInputValidationManager(type) {
     return inputManager;
 }
 
-const mdsInputCss = () => `@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-input-background:rgb(var(--tone-neutral,0 0 0));--mds-input-placeholder-default-color:rgb(var(--tone-neutral-06,158 158 158));--mds-input-placeholder-focus-color:rgb(var(--tone-neutral-07,134 134 134));--mds-input-placeholder-hover-color:var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158)));--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));--mds-input-icon-color:var(--mds-input-variant-color-rgb,0 0 0);--mds-input-variant-color-rgb:0 0 0;--mds-input-textarea-resize:none;--mds-input-textarea-max-height:calc(var(--spacing,.0025rem)*6400);--mds-input-textarea-min-height:calc(var(--spacing,.0025rem)*2400);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-textarea-field-sizing:content}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-icon,mds-input-tip,mds-input-tip-item,mds-spinner):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-input-variant-color-rgb{syntax:"<integer>+";inherits:false;initial-value:0 0 0}@property --mds-input-textarea-resize{syntax:"none|vertical";inherits:false;initial-value:none}@property --mds-input-textarea-field-sizing{syntax:"content|fixed";inherits:false;initial-value:content}:host{--mds-input-background:rgb(var(--tone-neutral,0 0 0));--mds-input-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-placeholder-default-color:rgb(var(--tone-neutral-06,158 158 158));--mds-input-placeholder-focus-color:rgb(var(--tone-neutral-07,134 134 134));--mds-input-placeholder-hover-color:var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158)));--mds-input-ring:0 0 0 1px rgb(var(--mds-input-variant-color-rgb,0 0 0)/.1);--mds-input-shadow:0 1px 3px 0 rgb(var(--mds-input-variant-color-rgb,0 0 0)/.1),0 1px 2px 0 rgb(var(--mds-input-variant-color-rgb,0 0 0)/.06);--mds-input-textarea-field-sizing:content;--mds-input-textarea-resize:none;--mds-input-textarea-max-height:calc(var(--spacing,.0025rem)*6400);--mds-input-textarea-min-height:calc(var(--spacing,.0025rem)*2400);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-variant-color-rgb:var(--variant-primary-03,211 226 255);--mds-input-border-radius:var(--radius-xl,20px);--mds-input-controls-border:2px solid rgb(var(--tone-neutral-09,76 76 76));--mds-input-controls-color:rgb(var(--tone-neutral-03,233 233 233));border-radius:var(--mds-input-border-radius);corner-shape:var(--magma-corner-shape,round);font-family:var(--font-info,Karla,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:var(--text-size-info-detail,1rem);font-weight:var(--tw-font-weight,var(--text-size-info-detail--font-weight,400));gap:calc(var(--spacing,.0025rem)*200);line-height:var(--tw-leading,var(--text-size-info-detail--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:inline-size;display:flex;position:relative;--mds-input-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-input-variant-color-rgb:0 0 0}:host([typography=detail]) .input{font-family:var(--font-info,Karla,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:var(--text-size-info-detail,1rem);font-weight:var(--tw-font-weight,var(--text-size-info-detail--font-weight,400));line-height:var(--tw-leading,var(--text-size-info-detail--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([typography=snippet]) .input{font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-snippet,1rem);font-weight:var(--tw-font-weight,var(--text-size-code-snippet--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-snippet--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.input{font-family:var(--font-info,Karla,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:var(--text-size-info-detail,1rem);font-weight:var(--tw-font-weight,var(--text-size-info-detail--font-weight,400));line-height:var(--tw-leading,var(--text-size-info-detail--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--mds-input-background,rgb(var(--tone-neutral,0 0 0)));border-radius:inherit;-webkit-box-shadow:var(--mds-input-ring),var(--mds-input-shadow);box-shadow:var(--mds-input-ring),var(--mds-input-shadow);box-sizing:border-box;color:rgb(var(--tone-neutral-02,244 244 244));corner-shape:inherit;border:0;margin:0;max-width:100%;min-height:3rem;overflow:hidden;padding:calc(var(--spacing,.0025rem)*300) calc(var(--spacing,.0025rem)*400);text-overflow:ellipsis;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color,border-color,box-shadow,color,fill,margin,opacity,padding,transform;-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:100%}.input::-webkit-input-placeholder{color:var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158)));-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:color;-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))}.input:-ms-placeholder-shown{color:var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158)));transition-duration:var(--duration-300,.3s);transition-property:color;transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.input::-moz-placeholder{color:var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158)));transition-duration:var(--duration-300,.3s);transition-property:color;transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.input::placeholder{color:var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158)));-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:color;-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))}.input:hover::placeholder{color:var(--mds-input-placeholder-hover-color,var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158))))}.input:hover:-ms-placeholder-shown{color:var(--mds-input-placeholder-hover-color,var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158))))}.input:focus::placeholder{color:var(--mds-input-placeholder-focus-color,rgb(var(--tone-neutral-07,134 134 134)))}.input:focus:-ms-placeholder-shown{color:var(--mds-input-placeholder-focus-color,rgb(var(--tone-neutral-07,134 134 134)))}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button{appearance:none;display:none;margin:0}:host textarea.input,:host([typography]) textarea.input{border-radius:var(--radius-xs,8px);field-sizing:var(--mds-input-textarea-field-sizing,content);max-height:var(--mds-input-textarea-max-height,calc(var(--spacing,.0025rem)*6400));min-height:var(--mds-input-textarea-min-height,calc(var(--spacing,.0025rem)*2400));overflow:auto;resize:var(--mds-input-textarea-resize,none)}@container style(--mds-input-textarea-resize:none){:host textarea.input,:host([typography]) textarea.input{border-bottom-right-radius:0}}.input:focus{--tw-outline-style:none;outline-style:none;--mds-input-ring:0 0 0 3px rgb(var(--mds-input-variant-color-rgb,0 0 0)/1);--mds-input-shadow:0 4px 6px 3px rgb(var(--mds-input-variant-color-rgb,0 0 0)/.1),0 2px 4px -1px rgb(var(--mds-input-variant-color-rgb,0 0 0)/.06)}.input:disabled{background-color:rgb(var(--tone-neutral-10,60 60 60))}.input:disabled::placeholder{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled:-ms-placeholder-shown{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled::-moz-placeholder{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled,.input:disabled::placeholder{color:rgb(var(--tone-neutral-05,197 197 197))}.input.has-icon{padding-left:calc(var(--spacing,.0025rem)*1100)}.input.has-right-icon{padding-right:calc(var(--spacing,.0025rem)*1100)}.await,.icon{fill:var(--mds-input-icon-color,var(--mds-input-variant-color-rgb,0 0 0));left:calc(var(--spacing,.0025rem)*300);position:absolute;top:calc(var(--spacing,.0025rem)*300)}.await{color:var(--mds-input-icon-color,var(--mds-input-variant-color-rgb,0 0 0));height:24px;width:24px}.counter{border-left:var(--mds-input-controls-border);display:flex;flex-direction:column;gap:0;position:absolute;right:0}.counter-button{aspect-ratio:unset;border:0;border-radius:var(--mds-input-border-radius);fill:var(--mds-input-controls-color);height:calc(var(--spacing,.0025rem)*600);min-height:0;width:calc(var(--spacing,.0025rem)*700)}.counter .counter-button:first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:var(--mds-input-border-radius)}.counter .counter-button:last-child{border-bottom-left-radius:0;border-bottom-right-radius:var(--mds-input-border-radius);border-top-left-radius:0;border-top-right-radius:0}.counter-button--horizontal{bottom:0;height:calc(var(--spacing,.0025rem)*1200);position:absolute;top:0;width:calc(var(--spacing,.0025rem)*1200)}.counter-button--decrease{border-bottom-right-radius:0;border-right:var(--mds-input-controls-border);border-top-right-radius:0;left:0}.counter-button--increase{border-bottom-left-radius:0;border-left:var(--mds-input-controls-border);border-top-left-radius:0;right:0}.mic-toggle-button,.password-toggle-button{fill:var(--mds-input-controls-color);position:absolute;right:calc(var(--spacing,.0025rem)*150);top:calc(var(--spacing,.0025rem)*150)}.toggle-button--error{cursor:help;fill:rgb(var(--tone-neutral-06,158 158 158))}.mic-toggle-button--recording{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4,0,.6,1) infinite)}:host([type=number]) .input{-moz-appearance:textfield;padding-right:calc(var(--spacing,.0025rem)*800)}:host([type=number][controls-layout=horizontal]) .input{padding-left:calc(var(--spacing,.0025rem)*1400);padding-right:calc(var(--spacing,.0025rem)*1400);text-align:center}:host([type=number][controls-layout=horizontal][icon]) .input{padding-left:calc(var(--spacing,.0025rem)*2400);text-align:left}:host([type=number][controls-layout=horizontal]) .icon{left:calc(var(--spacing,.0025rem)*1500)}:host([type=password]) .input{padding-right:calc(var(--spacing,.0025rem)*1000)}:host([type=password]) .input[type=text]:not(:-moz-placeholder-shown){font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-snippet,1rem);font-weight:var(--tw-font-weight,var(--text-size-code-snippet--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-snippet--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=password]) .input[type=text]:not(:-ms-placeholder-shown){font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-snippet,1rem);font-weight:var(--tw-font-weight,var(--text-size-code-snippet--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-snippet--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=password]) .input[type=text]:not(:placeholder-shown){font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-snippet,1rem);font-weight:var(--tw-font-weight,var(--text-size-code-snippet--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-snippet--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=cf]) .input{font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-snippet,1rem);font-weight:var(--tw-font-weight,var(--text-size-code-snippet--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-snippet--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:uppercase}mds-input-tip{--mds-input-tip-horizontal-offset:inherit;--mds-input-tip-horizontal-offset-focused:inherit;--mds-input-tip-vertical-offset:inherit;--mds-input-tip-background:inherit}:host(:focus){--mds-input-icon-color:rgb(var(--variant-primary-05,152 188 255));--mds-input-variant-color-rgb:var(--variant-primary-04,184 208 255)}:host([variant=ai]){--mds-input-icon-color:rgb(var(--variant-ai-04,218 199 253));--mds-input-tip-background:rgb(var(--variant-ai-05,202 174 251));--mds-input-variant-color-rgb:0 0 0}:host([variant=ai]:focus){--mds-input-icon-color:rgb(var(--variant-ai-05,202 174 251));--mds-input-variant-color-rgb:var(--variant-ai-04,218 199 253)}:host([variant=info]){--mds-input-icon-color:rgb(var(--status-info-04,159 216 241));--mds-input-tip-background:rgb(var(--status-info-05,112 198 234));--mds-input-variant-color-rgb:0 0 0}:host([variant=info]:focus){--mds-input-icon-color:rgb(var(--status-info-05,112 198 234));--mds-input-variant-color-rgb:var(--status-info-04,159 216 241)}:host([variant=success]){--mds-input-icon-color:rgb(var(--status-success-04,158 222 181));--mds-input-tip-background:rgb(var(--status-success-05,107 206 147));--mds-input-variant-color-rgb:0 0 0}:host([variant=success]:focus){--mds-input-icon-color:rgb(var(--status-success-05,107 206 147));--mds-input-variant-color-rgb:var(--status-success-04,158 222 181)}:host([variant=warning]){--mds-input-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-input-tip-background:rgb(var(--status-warning-05,237 177 0));--mds-input-variant-color-rgb:0 0 0}:host([variant=warning]:focus){--mds-input-icon-color:rgb(var(--status-warning-05,237 177 0));--mds-input-variant-color-rgb:var(--status-warning-04,255 200 33)}:host([variant=error]){--mds-input-icon-color:rgb(var(--status-error-04,254 193 189));--mds-input-tip-background:rgb(var(--status-error-05,250 165 160));--mds-input-variant-color-rgb:0 0 0}:host([variant=error]:focus){--mds-input-icon-color:rgb(var(--status-error-05,250 165 160));--mds-input-variant-color-rgb:var(--status-error-04,254 193 189)}:host-context(mds-input-field[variant=info]):host{--mds-input-icon-color:rgb(var(--status-info-04,159 216 241));--mds-input-tip-background:rgb(var(--status-info-05,112 198 234));--mds-input-variant-color-rgb:0 0 0}:host-context(mds-input-field[variant=info]):host(:focus){--mds-input-icon-color:rgb(var(--status-info-05,112 198 234));--mds-input-variant-color-rgb:var(--status-info-04,159 216 241)}:host-context(mds-input-field[variant=warning]):host{--mds-input-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-input-tip-background:rgb(var(--status-warning-05,237 177 0));--mds-input-variant-color-rgb:0 0 0}:host-context(mds-input-field[variant=warning]):host(:focus){--mds-input-icon-color:rgb(var(--status-warning-05,237 177 0));--mds-input-variant-color-rgb:var(--status-warning-04,255 200 33)}:host-context(mds-input-field[variant=success]):host{--mds-input-icon-color:rgb(var(--status-success-04,158 222 181));--mds-input-tip-background:rgb(var(--status-success-05,107 206 147));--mds-input-variant-color-rgb:0 0 0}:host-context(mds-input-field[variant=success]):host(:focus){--mds-input-icon-color:rgb(var(--status-success-05,107 206 147));--mds-input-variant-color-rgb:var(--status-success-04,158 222 181)}:host-context(mds-input-field[variant=error]):host{--mds-input-icon-color:rgb(var(--status-error-04,254 193 189));--mds-input-tip-background:rgb(var(--status-error-05,250 165 160));--mds-input-variant-color-rgb:0 0 0}:host-context(mds-input-field[variant=error]):host(:focus){--mds-input-icon-color:rgb(var(--status-error-05,250 165 160));--mds-input-variant-color-rgb:var(--status-error-04,254 193 189)}:host-context(:root.pref-animation-reduce) .input{transition-duration:0s}:host-context(:root.pref-contrast-more){--mds-input-ring:var(--shadow-outline-strong-50);--mds-input-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-05,197 197 197))}:host-context(:root.pref-contrast-more) .input::placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}:host-context(:root.pref-contrast-more) .input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-03,233 233 233))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-input-ring:var(--shadow-outline-50);--mds-input-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-06,158 158 158))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08,107 107 107))}.password-mask{align-items:center;background-color:var(--mds-input-background,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--radius-xs,8px);bottom:0;display:flex;gap:calc(var(--spacing,.0025rem)*50);height:100%;justify-content:start;left:0;overflow:hidden;padding-left:calc(var(--spacing,.0025rem)*500);pointer-events:none;position:absolute;right:calc(var(--spacing,.0025rem)*1200);top:0}.password-mask:before{background-image:-webkit-gradient(linear,left top,right top,from(transparent),to(var(--mds-input-background,rgb(var(--tone-neutral,0 0 0)))));background-image:linear-gradient(to right,transparent,var(--mds-input-background,rgb(var(--tone-neutral,0 0 0))));bottom:0;content:"";display:inline-flex;position:absolute;right:0;top:0;width:calc(var(--spacing,.0025rem)*600)}.password-mask-items{background-color:rgb(var(--tone-neutral-08,107 107 107)/0);display:inline-flex;gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*100)}.password-mask-item,.password-mask-items{border-radius:1000px;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color;-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))}.password-mask-item{background-color:rgb(var(--tone-neutral-03,233 233 233));height:calc(var(--spacing,.0025rem)*200);width:calc(var(--spacing,.0025rem)*200)}:host(:focus-within) .password-mask-items{background-color:rgb(var(--tone-neutral-08,107 107 107))}@keyframes pulse{50%{opacity:.5}}@media (forced-colors:active){.input:focus{outline:2px solid #0000;outline-offset:2px}}@media (prefers-reduced-motion){:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .input{transition-duration:0s}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-input-ring:var(--shadow-outline-strong-50);--mds-input-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-05,197 197 197))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .input::placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-03,233 233 233))}}@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-input-ring:var(--shadow-outline-50);--mds-input-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-06,158 158 158))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08,107 107 107))}}`;
+const mdsInputCss = () => `@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-input-background:rgb(var(--tone-neutral,0 0 0));--mds-input-placeholder-default-color:rgb(var(--tone-neutral-06,158 158 158));--mds-input-placeholder-focus-color:rgb(var(--tone-neutral-07,134 134 134));--mds-input-placeholder-hover-color:var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158)));--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));--mds-input-icon-color:var(--mds-input-variant-color-rgb,0 0 0);--mds-input-variant-color-rgb:0 0 0;--mds-input-textarea-resize:none;--mds-input-textarea-max-height:calc(var(--spacing,.0025rem)*6400);--mds-input-textarea-min-height:calc(var(--spacing,.0025rem)*2400);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-textarea-field-sizing:content}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-icon,mds-input-tip,mds-input-tip-item,mds-spinner):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-input-variant-color-rgb{syntax:"<integer>+";inherits:false;initial-value:0 0 0}@property --mds-input-textarea-resize{syntax:"none|vertical";inherits:false;initial-value:none}@property --mds-input-textarea-field-sizing{syntax:"content|fixed";inherits:false;initial-value:content}:host{--mds-input-background:rgb(var(--tone-neutral,0 0 0));--mds-input-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-placeholder-default-color:rgb(var(--tone-neutral-06,158 158 158));--mds-input-placeholder-focus-color:rgb(var(--tone-neutral-07,134 134 134));--mds-input-placeholder-hover-color:var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158)));--mds-input-ring:0 0 0 1px rgb(var(--mds-input-variant-color-rgb,0 0 0)/.1);--mds-input-shadow:0 1px 3px 0 rgb(var(--mds-input-variant-color-rgb,0 0 0)/.1),0 1px 2px 0 rgb(var(--mds-input-variant-color-rgb,0 0 0)/.06);--mds-input-textarea-field-sizing:content;--mds-input-textarea-resize:none;--mds-input-textarea-max-height:calc(var(--spacing,.0025rem)*6400);--mds-input-textarea-min-height:calc(var(--spacing,.0025rem)*2400);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-variant-color-rgb:var(--variant-primary-03,211 226 255);--mds-input-border-radius:var(--radius-xl,20px);--mds-input-transition-duration:var(--duration-300,.3s);--mds-input-controls-border:2px solid rgb(var(--tone-neutral-09,76 76 76));--mds-input-controls-color:rgb(var(--tone-neutral-03,233 233 233));--private-input-transition-duration:var(--mds-input-transition-duration);border-radius:var(--mds-input-border-radius);corner-shape:var(--magma-corner-shape,round);font-family:var(--font-info,Karla,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:var(--text-size-info-detail,1rem);font-weight:var(--tw-font-weight,var(--text-size-info-detail--font-weight,400));gap:calc(var(--spacing,.0025rem)*200);line-height:var(--tw-leading,var(--text-size-info-detail--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;container-type:inline-size;display:flex;position:relative;--mds-input-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-input-variant-color-rgb:0 0 0}:host([typography=detail]) .input{font-family:var(--font-info,Karla,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:var(--text-size-info-detail,1rem);font-weight:var(--tw-font-weight,var(--text-size-info-detail--font-weight,400));line-height:var(--tw-leading,var(--text-size-info-detail--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([typography=snippet]) .input{font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-snippet,1rem);font-weight:var(--tw-font-weight,var(--text-size-code-snippet--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-snippet--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.input{font-family:var(--font-info,Karla,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:var(--text-size-info-detail,1rem);font-weight:var(--tw-font-weight,var(--text-size-info-detail--font-weight,400));line-height:var(--tw-leading,var(--text-size-info-detail--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--mds-input-background,rgb(var(--tone-neutral,0 0 0)));border-radius:inherit;-webkit-box-shadow:var(--mds-input-ring),var(--mds-input-shadow);box-shadow:var(--mds-input-ring),var(--mds-input-shadow);box-sizing:border-box;color:rgb(var(--tone-neutral-02,244 244 244));corner-shape:inherit;border:0;margin:0;max-width:100%;min-height:3rem;overflow:hidden;padding:calc(var(--spacing,.0025rem)*300) calc(var(--spacing,.0025rem)*400);text-overflow:ellipsis;-webkit-transition-duration:var(--private-input-transition-duration);transition-duration:var(--private-input-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,margin,opacity,padding,transform;-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:100%}.input::-webkit-input-placeholder{color:var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158)));-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:color;-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))}.input:-ms-placeholder-shown{color:var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158)));transition-duration:var(--duration-300,.3s);transition-property:color;transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.input::-moz-placeholder{color:var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158)));transition-duration:var(--duration-300,.3s);transition-property:color;transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1))}.input::placeholder{color:var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158)));-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:color;-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))}.input:hover::placeholder{color:var(--mds-input-placeholder-hover-color,var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158))))}.input:hover:-ms-placeholder-shown{color:var(--mds-input-placeholder-hover-color,var(--mds-input-placeholder-default-color,rgb(var(--tone-neutral-06,158 158 158))))}.input:focus::placeholder{color:var(--mds-input-placeholder-focus-color,rgb(var(--tone-neutral-07,134 134 134)))}.input:focus:-ms-placeholder-shown{color:var(--mds-input-placeholder-focus-color,rgb(var(--tone-neutral-07,134 134 134)))}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button{appearance:none;display:none;margin:0}:host textarea.input,:host([typography]) textarea.input{border-radius:var(--mds-input-border-radius);field-sizing:var(--mds-input-textarea-field-sizing,content);max-height:var(--mds-input-textarea-max-height,calc(var(--spacing,.0025rem)*6400));min-height:var(--mds-input-textarea-min-height,calc(var(--spacing,.0025rem)*2400));overflow:auto;resize:var(--mds-input-textarea-resize,none)}@container style(--mds-input-textarea-resize:none){:host textarea.input,:host([typography]) textarea.input{border-bottom-right-radius:0}}.input:focus{--tw-outline-style:none;outline-style:none;--mds-input-ring:0 0 0 3px rgb(var(--mds-input-variant-color-rgb,0 0 0)/1);--mds-input-shadow:0 4px 6px 3px rgb(var(--mds-input-variant-color-rgb,0 0 0)/.1),0 2px 4px -1px rgb(var(--mds-input-variant-color-rgb,0 0 0)/.06)}.input:disabled{background-color:rgb(var(--tone-neutral-10,60 60 60))}.input:disabled::placeholder{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled:-ms-placeholder-shown{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled::-moz-placeholder{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled,.input:disabled::placeholder{color:rgb(var(--tone-neutral-05,197 197 197))}.input.has-icon{padding-left:calc(var(--spacing,.0025rem)*1100)}.input.has-right-icon{padding-right:calc(var(--spacing,.0025rem)*1100)}.await,.icon{fill:var(--mds-input-icon-color,var(--mds-input-variant-color-rgb,0 0 0));left:calc(var(--spacing,.0025rem)*300);position:absolute;top:calc(var(--spacing,.0025rem)*300)}.await{color:var(--mds-input-icon-color,var(--mds-input-variant-color-rgb,0 0 0));height:24px;width:24px}.counter{border-left:var(--mds-input-controls-border);display:flex;flex-direction:column;gap:0;position:absolute;right:0}.counter-button{aspect-ratio:unset;border:0;border-radius:var(--mds-input-border-radius);fill:var(--mds-input-controls-color);height:calc(var(--spacing,.0025rem)*600);min-height:0;width:calc(var(--spacing,.0025rem)*700)}.counter .counter-button:first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:0;border-top-right-radius:var(--mds-input-border-radius)}.counter .counter-button:last-child{border-bottom-left-radius:0;border-bottom-right-radius:var(--mds-input-border-radius);border-top-left-radius:0;border-top-right-radius:0}.counter-button--horizontal{bottom:0;height:calc(var(--spacing,.0025rem)*1200);position:absolute;top:0;width:calc(var(--spacing,.0025rem)*1200)}.counter-button--decrease{border-bottom-right-radius:0;border-right:var(--mds-input-controls-border);border-top-right-radius:0;left:0}.counter-button--increase{border-bottom-left-radius:0;border-left:var(--mds-input-controls-border);border-top-left-radius:0;right:0}.mic-toggle-button,.password-toggle-button{fill:var(--mds-input-controls-color);position:absolute;right:calc(var(--spacing,.0025rem)*150);top:calc(var(--spacing,.0025rem)*150)}.toggle-button--error{cursor:help;fill:rgb(var(--tone-neutral-06,158 158 158))}.mic-toggle-button--recording{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4,0,.6,1) infinite)}:host([type=number]) .input{-moz-appearance:textfield;padding-right:calc(var(--spacing,.0025rem)*800)}:host([type=number][controls-layout=horizontal]) .input{padding-left:calc(var(--spacing,.0025rem)*1400);padding-right:calc(var(--spacing,.0025rem)*1400);text-align:center}:host([type=number][controls-layout=horizontal][icon]) .input{padding-left:calc(var(--spacing,.0025rem)*2400);text-align:left}:host([type=number][controls-layout=horizontal]) .icon{left:calc(var(--spacing,.0025rem)*1500)}:host([type=password]) .input{padding-right:calc(var(--spacing,.0025rem)*1000)}:host([type=password]) .input[type=text]:not(:-moz-placeholder-shown){font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-snippet,1rem);font-weight:var(--tw-font-weight,var(--text-size-code-snippet--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-snippet--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=password]) .input[type=text]:not(:-ms-placeholder-shown){font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-snippet,1rem);font-weight:var(--tw-font-weight,var(--text-size-code-snippet--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-snippet--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=password]) .input[type=text]:not(:placeholder-shown){font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-snippet,1rem);font-weight:var(--tw-font-weight,var(--text-size-code-snippet--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-snippet--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:host([type=cf]) .input{font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-snippet,1rem);font-weight:var(--tw-font-weight,var(--text-size-code-snippet--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-snippet--line-height,1.5rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:uppercase}mds-input-tip{--mds-input-tip-horizontal-offset:inherit;--mds-input-tip-horizontal-offset-focused:inherit;--mds-input-tip-vertical-offset:inherit;--mds-input-tip-background:inherit}:host(:focus){--mds-input-icon-color:rgb(var(--variant-primary-05,152 188 255));--mds-input-variant-color-rgb:var(--variant-primary-04,184 208 255)}:host([variant=ai]){--mds-input-icon-color:rgb(var(--variant-ai-04,218 199 253));--mds-input-tip-background:rgb(var(--variant-ai-05,202 174 251));--mds-input-variant-color-rgb:0 0 0}:host([variant=ai]:focus){--mds-input-icon-color:rgb(var(--variant-ai-05,202 174 251));--mds-input-variant-color-rgb:var(--variant-ai-04,218 199 253)}:host([variant=info]){--mds-input-icon-color:rgb(var(--status-info-04,159 216 241));--mds-input-tip-background:rgb(var(--status-info-05,112 198 234));--mds-input-variant-color-rgb:0 0 0}:host([variant=info]:focus){--mds-input-icon-color:rgb(var(--status-info-05,112 198 234));--mds-input-variant-color-rgb:var(--status-info-04,159 216 241)}:host([variant=success]){--mds-input-icon-color:rgb(var(--status-success-04,158 222 181));--mds-input-tip-background:rgb(var(--status-success-05,107 206 147));--mds-input-variant-color-rgb:0 0 0}:host([variant=success]:focus){--mds-input-icon-color:rgb(var(--status-success-05,107 206 147));--mds-input-variant-color-rgb:var(--status-success-04,158 222 181)}:host([variant=warning]){--mds-input-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-input-tip-background:rgb(var(--status-warning-05,237 177 0));--mds-input-variant-color-rgb:0 0 0}:host([variant=warning]:focus){--mds-input-icon-color:rgb(var(--status-warning-05,237 177 0));--mds-input-variant-color-rgb:var(--status-warning-04,255 200 33)}:host([variant=error]){--mds-input-icon-color:rgb(var(--status-error-04,254 193 189));--mds-input-tip-background:rgb(var(--status-error-05,250 165 160));--mds-input-variant-color-rgb:0 0 0}:host([variant=error]:focus){--mds-input-icon-color:rgb(var(--status-error-05,250 165 160));--mds-input-variant-color-rgb:var(--status-error-04,254 193 189)}:host([pref-animation=reduce]){--private-input-transition-duration:0s}:host([pref-contrast=more]){--mds-input-ring:var(--shadow-outline-strong-50);--mds-input-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-05,197 197 197))}:host([pref-contrast=more]) .input::placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}:host([pref-contrast=more]) .input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-03,233 233 233))}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-input-ring:var(--shadow-outline-50);--mds-input-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-06,158 158 158))}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08,107 107 107))}.password-mask{align-items:center;background-color:var(--mds-input-background,rgb(var(--tone-neutral,0 0 0)));border-radius:var(--radius-xs,8px);bottom:0;display:flex;gap:calc(var(--spacing,.0025rem)*50);height:100%;justify-content:start;left:0;overflow:hidden;padding-left:calc(var(--spacing,.0025rem)*500);pointer-events:none;position:absolute;right:calc(var(--spacing,.0025rem)*1200);top:0}.password-mask:before{background-image:-webkit-gradient(linear,left top,right top,from(#0000),to(var(--mds-input-background,rgb(var(--tone-neutral,0 0 0)))));background-image:linear-gradient(to right,#0000,var(--mds-input-background,rgb(var(--tone-neutral,0 0 0))));bottom:0;content:"";display:inline-flex;position:absolute;right:0;top:0;width:calc(var(--spacing,.0025rem)*600)}.password-mask-items{background-color:rgb(var(--tone-neutral-08,107 107 107)/0);display:inline-flex;gap:calc(var(--spacing,.0025rem)*100);padding:calc(var(--spacing,.0025rem)*100)}.password-mask-item,.password-mask-items{border-radius:1000px;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color;-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))}.password-mask-item{background-color:rgb(var(--tone-neutral-03,233 233 233));height:calc(var(--spacing,.0025rem)*200);width:calc(var(--spacing,.0025rem)*200)}:host(:focus-within) .password-mask-items{background-color:rgb(var(--tone-neutral-08,107 107 107))}@keyframes pulse{50%{opacity:.5}}@media (forced-colors:active){.input:focus{outline:2px solid #0000;outline-offset:2px}}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-input-transition-duration:0s}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-input-ring:var(--shadow-outline-strong-50);--mds-input-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-05,197 197 197))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .input::-webkit-input-placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-03,233 233 233))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .input::placeholder{color:rgb(var(--tone-neutral-03,233 233 233))}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-input-ring:var(--shadow-outline-50);--mds-input-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-controls-border:2px solid rgb(var(--tone-neutral-06,158 158 158))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))) .counter-button:hover{--mds-button-background:rgb(var(--tone-neutral-08,107 107 107))}}`;
 
 const MdsInput = class {
     constructor(hostRef) {
@@ -435,6 +436,9 @@ const MdsInput = class {
             this.speechToTextIcon = miBaselineDone;
             this.startRecognition();
         };
+        this.handlePasswordToggleClick = () => {
+            this.isPasswordVisible = !this.isPasswordVisible;
+        };
         this.onSpeechRecognitionError = () => {
             console.error('SpeechRecognition API may not work properly on Chrome based browsers.');
             this.speechButton.classList.remove('mic-toggle-button--recording');
@@ -500,8 +504,27 @@ const MdsInput = class {
         this.internals.setFormValue('');
     }
     connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
         this.datalistId = `datalist-${hashRandomValue()}`;
     }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     componentWillLoad() {
         var _a;
         this.language = this.t.lang(this.el);
@@ -645,9 +668,9 @@ const MdsInput = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'ad6a22b8162d976d62a9991054934c71c218c500' }, this.type === 'number' && this.controlsLayout === 'horizontal' && (h("mds-button", { key: '68c91a11f6c37cea5e21c9695522e45213050d45', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", tone: "text", part: "counter-button-decrease" })), this.type === 'textarea' ? (h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })) : (h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value })), this.type === 'number' && this.controlsLayout === 'vertical' && (h("div", { key: 'fd2b20e2a3ed42a61b6728fcadfd305f34c6a446', class: "counter counter--vertical" }, h("mds-button", { key: '48a253a2ca7e4ee58228c0a6df600ef366e984cc', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), variant: "dark", size: "sm", tone: "text", part: "counter-button-increase" }), h("mds-button", { key: '0a6b850aae842b24dc4f7ef8988a75990de136aa', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", size: "sm", tone: "text", part: "counter-button-decrease" }))), this.type === 'number' && this.controlsLayout === 'horizontal' && (h("mds-button", { key: 'ea3e0594d7a31601bbe20cc4e38afd4bec6cdff7', class: "counter-button counter-button--horizontal counter-button--increase", variant: "dark", tone: "text", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" })), this.type === 'password' && (h("mds-button", { key: 'bf34d6df82fc3e960fbcbc3067d92b433b42accd', class: "password-toggle-button", variant: "dark", tone: "text", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: () => (this.isPasswordVisible = !this.isPasswordVisible), tabindex: "0", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" })), this.type === 'password' && !this.isPasswordVisible && ((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) > 0 && (h("div", { key: '99ec0f020348a5de910ab91fd42e1bd4484e4aff', class: "password-mask" }, h("div", { key: '3551407dcbde2547391f940c3a010a7c0855ef85', class: "password-mask-items", part: "password-mask-items" }, Array.from({ length: this.value.length }).map((_, index) => (h("div", { key: index, class: "password-mask-item", part: "password-mask-item" })))))), this.mic && (h("mds-button", { key: '49dbb6cffac109437ac5de7357a1a995d9c9d22f', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: () => this.toggleTextRecognition(), tabindex: "0", title: this.speechToTextLabel, variant: "dark", tone: "text", part: "mic-toggle-button" })), h("mds-input-tip", { key: 'a81de1242c891bc7a82d6a213e854af3b7f7e6b6', lang: this.language, position: "top", active: this.hasFocus, part: "tip-top" }, this.disabled && h("mds-input-tip-item", { key: 'b6ec44b88905eded511cf192504853c5e7eaa287', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: 'ce523b25baf2300715d12b5bef5c0842d2a19fd9', expanded: true, variant: "readonly" }), this.required && (h("mds-input-tip-item", { key: '7aa2b62701797678d32bdb43f7c0d3c0da47443c', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), h("mds-input-tip", { key: '17cf961c116164a7266e5541693dc00435b72e16', lang: this.language, position: "bottom", active: this.hasFocus, part: "tip-bottom" }, this.tip && (h("mds-input-tip-item", { key: 'e604b97d70fd47ee4a9681272a1a95f1aafc3a82', expanded: true, variant: "text" }, this.tip)), this.maxlength && (h("mds-input-tip-item", { key: '572470935113d9182e9d96c0ef743d4c30ffbf22', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel))), this.datalist && (h("datalist", { key: '1501e7a01bc73103691be34570420ab8f2601e75', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
+        return (h(Host, { key: '0d7460db7aad441110cd7f4d47764c2d9e791108', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.type === 'number' && this.controlsLayout === 'horizontal' && (h("mds-button", { key: 'c172027bf96b0c93dbf96d248a1c88b301039e45', class: "counter-button counter-button--horizontal counter-button--decrease", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", tone: "text", part: "counter-button-decrease" })), this.type === 'textarea' ? (h("textarea", { class: clsx('input', ((_a = this.icon) !== null && _a !== void 0 ? _a : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoFocus: this.autofocus, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, tabIndex: this.tabindex, value: this.value })) : (h("input", { class: clsx('input', ((_b = this.icon) !== null && _b !== void 0 ? _b : this.await) && 'has-icon', this.mic && 'has-right-icon'), autoComplete: this.autocomplete, autoFocus: this.autofocus, disabled: this.disabled, max: this.max, maxLength: this.maxlength, min: this.min, minLength: this.minlength, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, pattern: this.pattern, list: this.datalistId, part: "field", placeholder: this.placeholder, readOnly: this.readonly, ref: (input) => (this.nativeInput = input), required: this.required, step: this.step, tabIndex: this.tabindex, type: this.type === 'password' && this.isPasswordVisible ? 'text' : this.type, value: this.value })), this.type === 'number' && this.controlsLayout === 'vertical' && (h("div", { key: 'f3a88361f0941911d29d0c6d705d0960857a336b', class: "counter counter--vertical" }, h("mds-button", { key: '0843bbc7172058eab2b159c3886f196f64220f82', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), variant: "dark", size: "sm", tone: "text", part: "counter-button-increase" }), h("mds-button", { key: '3e820603b927109d00d1619f9767543ce99cb0d4', class: "counter-button", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowDown : miBaselineRemove, onClick: this.stepDown, tabindex: "0", title: this.t.get('decrease'), variant: "dark", size: "sm", tone: "text", part: "counter-button-decrease" }))), this.type === 'number' && this.controlsLayout === 'horizontal' && (h("mds-button", { key: 'eb607c83b10df8828ad70794795a098fc6b14105', class: "counter-button counter-button--horizontal counter-button--increase", variant: "dark", tone: "text", icon: this.controlsIcon === 'arrow' ? miBaselineKeyboardArrowUp : miBaselineAdd, onClick: this.stepUp, tabindex: "0", title: this.t.get('increase'), part: "counter-button-increase" })), this.type === 'password' && (h("mds-button", { key: '94118a6d845831badad930088ff46643c3247d9f', class: "password-toggle-button", variant: "dark", tone: "text", icon: this.isPasswordVisible ? miBaselineVisibleOff : miBaselineVisible, onClick: this.handlePasswordToggleClick, tabindex: "0", title: this.isPasswordVisible ? this.t.get('hidePassword') : this.t.get('showPassword'), part: "password-toggle-button" })), this.type === 'password' && !this.isPasswordVisible && ((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) > 0 && (h("div", { key: '4026d3f3e1fef4cb7ed4f8f5ba6e5da8ebc0909d', class: "password-mask" }, h("div", { key: 'c7cebe84657042702702c76d9e60e57423ca4350', class: "password-mask-items", part: "password-mask-items" }, Array.from({ length: this.value.length }).map((_, index) => (h("div", { key: index, class: "password-mask-item", part: "password-mask-item" })))))), this.mic && (h("mds-button", { key: '7c2c2928717675d31808a25d3f42b3ebb1d3470a', class: clsx('mic-toggle-button', this.isRecording && 'mic-toggle-button--recording'), icon: this.speechToTextIcon, onClick: this.toggleTextRecognition, tabindex: "0", title: this.speechToTextLabel, variant: "dark", tone: "text", part: "mic-toggle-button" })), h("mds-input-tip", { key: '5f0cb96e29178d3b1ab54c3172cec7123aab665a', lang: this.language, position: "top", active: this.hasFocus, part: "tip-top" }, this.disabled && h("mds-input-tip-item", { key: 'd0bd26011d9831b88c3e3d5cbe4aacb7e7d5f1f9', expanded: true, variant: "disabled" }), this.readonly && h("mds-input-tip-item", { key: '7f36c1740c4ce9835e361b423a6e569d0d9b9c1d', expanded: true, variant: "readonly" }), this.required && (h("mds-input-tip-item", { key: 'e9208eb5f269492e0700196bf2837fd00a7558c2', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), h("mds-input-tip", { key: 'faa8b92c6f881b6945923162b6f3a9ffb14311cf', lang: this.language, position: "bottom", active: this.hasFocus, part: "tip-bottom" }, this.tip && (h("mds-input-tip-item", { key: 'dbb4cd6b9525f2e27e685886d158848fc9fc3096', expanded: true, variant: "text" }, this.tip)), this.maxlength && (h("mds-input-tip-item", { key: '4be41bf4d722fb252bb55bb9a6f069277ba50b23', part: "tip-count", expanded: true, variant: this.countVariant }, this.currentLengthLabel))), this.datalist && (h("datalist", { key: '18f5d2db217e70e0e96769550630eb21e41fa4fd', id: this.datalistId, class: "datalist" }, this.datalist.map((element, i) => {
             return h("option", { key: i, value: element });
-        }))), this.icon && !this.await && (h("mds-icon", { key: '5e3eb451e9d1bbc2d1c2c253c8baa80b5ba8a9ed', class: clsx('icon', this.variant), name: this.icon })), h("mds-spinner", { key: 'f0606534fb2a0b698a28548d48352e5429302d1b', running: this.await, class: clsx('await', this.variant) })));
+        }))), this.icon && !this.await && (h("mds-icon", { key: 'be8705af2bfacf0b7b36b2e3d4c2b0267f2d9875', class: clsx('icon', this.variant), name: this.icon })), h("mds-spinner", { key: 'c3644543256d040a5f9538c2ab60ec07feed04fe', running: this.await, class: clsx('await', this.variant) })));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }