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

package/dist/cjs/mds-input-date.cjs.entry.js

@@ -4,8 +4,9 @@ var index = require('./index-CNuKb6Lv.js');
 var calendarToday = require('./calendar-today-EeRdNdiY.js');
 var datetime = require('./datetime-DHnUzK2K.js');
 var locale = require('./locale-oGW3SvGJ.js');
+var preference = require('./preference-BdpIXWLP.js');
 
-const mdsInputDateCss = () => `@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-date-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-date-background:rgb(var(--tone-neutral,0 0 0));--mds-input-date-field-background-empty:rgb(var(--status-error-10,115 0 0));--mds-input-date-field-color-empty:rgb(var(--status-error-06,239 108 105));--mds-input-date-icon-color-rgb:var(--mds-input-date-variant-color-rgb,0 0 0);--mds-input-date-variant-color-rgb:0 0 0;--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*1000);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233))}}}@layer reset,vendor,theme,base,components,utilities;@property --mds-input-date-variant-color-rgb{syntax:"<integer>+";inherits:false;initial-value:0 0 0}:host{--mds-input-date-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-date-background:rgb(var(--tone-neutral,0 0 0));--mds-input-date-field-background-empty:rgb(var(--status-error-10,115 0 0));--mds-input-date-field-color-empty:rgb(var(--status-error-06,239 108 105));--mds-input-date-icon-color-rgb:var(--mds-input-date-variant-color-rgb,0 0 0);--mds-input-date-ring:0 0 0 1px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.1);--mds-input-date-shadow:0 1px 3px 0 rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.1),0 1px 2px 0 rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.06);--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*1000);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));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;border-radius:var(--radius-2xl,24px);color:rgb(var(--tone-neutral-02,244 244 244));corner-shape:var(--magma-corner-shape,round);container-type:inline-size;display:flex;gap:calc(var(--spacing,.0025rem)*200);overflow:visible;position:relative;--mds-input-date-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-input-date-variant-color-rgb:0 0 0}.input::-webkit-calendar-picker-indicator{appearance:textfield;display:none}.input{font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-hack,.875rem);font-weight:var(--tw-font-weight,var(--text-size-code-hack--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-hack--line-height,1.25rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:inherit;box-sizing:border-box;color:inherit;corner-shape:inherit;background-color:#0000;border:0;margin:0;overflow:hidden;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:min-content}:host([empty]) .input{background-color:var(--mds-input-date-field-background-empty,rgb(var(--status-error-10,115 0 0)));color:var(--mds-input-date-field-color-empty,rgb(var(--status-error-06,239 108 105)))}:host([slot]){color:inherit;display:contents}:host([slot]) .input{cursor:text;text-align:center}:host(:not([slot])) .input{background-color:var(--mds-input-date-background,rgb(var(--tone-neutral,0 0 0)));-webkit-box-shadow:var(--mds-input-date-ring),var(--mds-input-date-shadow);box-shadow:var(--mds-input-date-ring),var(--mds-input-date-shadow);min-height:3rem;padding-left:calc(var(--spacing,.0025rem)*400);padding-right:calc(var(--spacing,.0025rem)*1200);padding-top:calc(var(--spacing,.0025rem)*300);width:100%}:host(:focus-within) .input{--tw-outline-style:none;outline-style:none;transition-duration:var(--default-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--default-transition-timing-function);--mds-input-date-ring:0 0 0 3px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/1);--mds-input-date-shadow:0 4px 6px 3px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.1),0 2px 4px -1px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.06);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);-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::placeholder{color:rgb(var(--tone-neutral-04,218 218 218))}.input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-04,218 218 218))}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button{appearance:none;display:none;margin:0}.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))}.action-open-calendar-wrapper{align-items:center;aspect-ratio:1;bottom:0;display:flex;justify-content:center;position:absolute;right:0;top:0}.action-open-calendar{--mds-button-color:var(--mds-input-date-icon-color,rgb(var(--variant-primary-03,211 226 255)))}:host([disabled]:not([disabled=false])) .action-open-calendar{-webkit-transform:translate(calc(var(--spacing,.0025rem)*250),calc(var(--spacing,.0025rem)*200));transform:translate(calc(var(--spacing,.0025rem)*250),calc(var(--spacing,.0025rem)*200))}mds-calendar{min-width:max-content}mds-dropdown{padding:0}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(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-calendar,mds-dropdown,mds-input-tip,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}:host-context(:root.pref-animation-reduce) .input{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-input-date-ring:var(--shadow-outline-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-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))}:host-context(:root.pref-contrast-more){--mds-input-date-ring:var(--shadow-outline-strong-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-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))}@supports ((-moz-appearance:none)){.action-open-calendar{display:none}:host(:not([slot])) .input{padding-right:calc(var(--spacing,.0025rem)*400)}}:host(:focus){--mds-input-date-icon-color:rgb(var(--variant-primary-05,152 188 255));--mds-input-date-variant-color-rgb:var(--variant-primary-04,184 208 255)}:host([variant=ai]){--mds-input-date-icon-color:rgb(var(--variant-ai-04,218 199 253));--mds-input-tip-background:rgb(var(--variant-ai-05,202 174 251));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=ai]:focus){--mds-input-date-icon-color:rgb(var(--variant-ai-05,202 174 251));--mds-input-date-variant-color-rgb:var(--variant-ai-04,218 199 253)}:host([variant=info]){--mds-input-date-icon-color:rgb(var(--status-info-04,159 216 241));--mds-input-tip-background:rgb(var(--status-info-05,112 198 234));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=info]:focus){--mds-input-date-icon-color:rgb(var(--status-info-05,112 198 234));--mds-input-date-variant-color-rgb:var(--status-info-04,159 216 241)}:host([variant=success]){--mds-input-date-icon-color:rgb(var(--status-success-04,158 222 181));--mds-input-tip-background:rgb(var(--status-success-05,107 206 147));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=success]:focus){--mds-input-date-icon-color:rgb(var(--status-success-05,107 206 147));--mds-input-date-variant-color-rgb:var(--status-success-04,158 222 181)}:host([variant=warning]){--mds-input-date-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-input-tip-background:rgb(var(--status-warning-05,237 177 0));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=warning]:focus){--mds-input-date-icon-color:rgb(var(--status-warning-05,237 177 0));--mds-input-date-variant-color-rgb:var(--status-warning-04,255 200 33)}:host([variant=error]){--mds-input-date-icon-color:rgb(var(--status-error-04,254 193 189));--mds-input-tip-background:rgb(var(--status-error-05,250 165 160));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=error]:focus){--mds-input-date-icon-color:rgb(var(--status-error-05,250 165 160));--mds-input-date-variant-color-rgb:var(--status-error-04,254 193 189)}@media (forced-colors:active){:host(:focus-within) .input{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-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-input-date-ring:var(--shadow-outline-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-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))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-input-date-ring:var(--shadow-outline-strong-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-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))}}`;
+const mdsInputDateCss = () => `@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-date-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-date-background:rgb(var(--tone-neutral,0 0 0));--mds-input-date-field-background-empty:rgb(var(--status-error-10,115 0 0));--mds-input-date-field-color-empty:rgb(var(--status-error-06,239 108 105));--mds-input-date-icon-color-rgb:var(--mds-input-date-variant-color-rgb,0 0 0);--mds-input-date-variant-color-rgb:0 0 0;--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*1000);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233))}}}@property --mds-input-date-variant-color-rgb{syntax:"<integer>+";inherits:false;initial-value:0 0 0}:host{--mds-input-date-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-date-background:rgb(var(--tone-neutral,0 0 0));--mds-input-date-field-background-empty:rgb(var(--status-error-10,115 0 0));--mds-input-date-field-color-empty:rgb(var(--status-error-06,239 108 105));--mds-input-date-icon-color-rgb:var(--mds-input-date-variant-color-rgb,0 0 0);--mds-input-date-ring:0 0 0 1px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.1);--mds-input-date-shadow:0 1px 3px 0 rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.1),0 1px 2px 0 rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.06);--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*1000);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));--mds-input-date-transition-duration:var(--duration-300,.3s);--private-input-date-transition-duration:var(--mds-input-date-transition-duration);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;border-radius:var(--radius-2xl,24px);color:rgb(var(--tone-neutral-02,244 244 244));corner-shape:var(--magma-corner-shape,round);container-type:inline-size;display:flex;gap:calc(var(--spacing,.0025rem)*200);overflow:visible;position:relative;--mds-input-date-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-input-date-variant-color-rgb:0 0 0}.input::-webkit-calendar-picker-indicator{appearance:textfield;display:none}.input{font-family:var(--font-code,"Roboto Mono","Courier New",monospace);font-size:var(--text-size-code-hack,.875rem);font-weight:var(--tw-font-weight,var(--text-size-code-hack--font-weight,400));line-height:var(--tw-leading,var(--text-size-code-hack--line-height,1.25rem));min-height:auto;text-box:trim-both text;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;border-radius:inherit;box-sizing:border-box;color:inherit;corner-shape:inherit;background-color:#0000;border:0;margin:0;overflow:hidden;text-overflow:ellipsis;-webkit-transition-duration:var(--private-input-date-transition-duration);transition-duration:var(--private-input-date-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:min-content}:host([empty]) .input{background-color:var(--mds-input-date-field-background-empty,rgb(var(--status-error-10,115 0 0)));color:var(--mds-input-date-field-color-empty,rgb(var(--status-error-06,239 108 105)))}:host([slot]){color:inherit;display:contents}:host([slot]) .input{cursor:text;text-align:center}:host(:not([slot])) .input{background-color:var(--mds-input-date-background,rgb(var(--tone-neutral,0 0 0)));-webkit-box-shadow:var(--mds-input-date-ring),var(--mds-input-date-shadow);box-shadow:var(--mds-input-date-ring),var(--mds-input-date-shadow);min-height:3rem;padding-left:calc(var(--spacing,.0025rem)*400);padding-right:calc(var(--spacing,.0025rem)*1200);width:100%}:host(:focus-within) .input{--tw-outline-style:none;outline-style:none;transition-duration:var(--default-transition-duration);transition-property:background-color,border-color,box-shadow,color,fill,height,margin,opacity,padding,transform,width;transition-timing-function:var(--default-transition-timing-function);--mds-input-date-ring:0 0 0 3px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/1);--mds-input-date-shadow:0 4px 6px 3px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.1),0 2px 4px -1px rgb(var(--mds-input-date-variant-color-rgb,0 0 0)/.06);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);-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::placeholder{color:rgb(var(--tone-neutral-04,218 218 218))}.input:-ms-placeholder-shown{color:rgb(var(--tone-neutral-04,218 218 218))}.input::-webkit-inner-spin-button,.input::-webkit-outer-spin-button{appearance:none;display:none;margin:0}.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))}.action-open-calendar-wrapper{align-items:center;aspect-ratio:1;bottom:0;display:flex;justify-content:center;position:absolute;right:0;top:0}.action-open-calendar{--mds-button-color:var(--mds-input-date-icon-color,rgb(var(--variant-primary-03,211 226 255)))}:host([disabled]:not([disabled=false])) .action-open-calendar{-webkit-transform:translate(calc(var(--spacing,.0025rem)*250),calc(var(--spacing,.0025rem)*200));transform:translate(calc(var(--spacing,.0025rem)*250),calc(var(--spacing,.0025rem)*200))}mds-calendar{min-width:max-content}mds-dropdown{padding:0}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(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-calendar,mds-dropdown,mds-input-tip,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}:host([pref-animation=reduce]){--private-input-date-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-input-date-ring:var(--shadow-outline-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-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))}:host([pref-contrast=more]){--mds-input-date-ring:var(--shadow-outline-strong-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-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))}@supports ((-moz-appearance:none)){.action-open-calendar{display:none}:host(:not([slot])) .input{padding-right:calc(var(--spacing,.0025rem)*400)}}:host(:focus){--mds-input-date-icon-color:rgb(var(--variant-primary-05,152 188 255));--mds-input-date-variant-color-rgb:var(--variant-primary-04,184 208 255)}:host([variant=ai]){--mds-input-date-icon-color:rgb(var(--variant-ai-04,218 199 253));--mds-input-tip-background:rgb(var(--variant-ai-05,202 174 251));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=ai]:focus){--mds-input-date-icon-color:rgb(var(--variant-ai-05,202 174 251));--mds-input-date-variant-color-rgb:var(--variant-ai-04,218 199 253)}:host([variant=info]){--mds-input-date-icon-color:rgb(var(--status-info-04,159 216 241));--mds-input-tip-background:rgb(var(--status-info-05,112 198 234));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=info]:focus){--mds-input-date-icon-color:rgb(var(--status-info-05,112 198 234));--mds-input-date-variant-color-rgb:var(--status-info-04,159 216 241)}:host([variant=success]){--mds-input-date-icon-color:rgb(var(--status-success-04,158 222 181));--mds-input-tip-background:rgb(var(--status-success-05,107 206 147));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=success]:focus){--mds-input-date-icon-color:rgb(var(--status-success-05,107 206 147));--mds-input-date-variant-color-rgb:var(--status-success-04,158 222 181)}:host([variant=warning]){--mds-input-date-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-input-tip-background:rgb(var(--status-warning-05,237 177 0));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=warning]:focus){--mds-input-date-icon-color:rgb(var(--status-warning-05,237 177 0));--mds-input-date-variant-color-rgb:var(--status-warning-04,255 200 33)}:host([variant=error]){--mds-input-date-icon-color:rgb(var(--status-error-04,254 193 189));--mds-input-tip-background:rgb(var(--status-error-05,250 165 160));--mds-input-date-variant-color-rgb:0 0 0}:host([variant=error]:focus){--mds-input-date-icon-color:rgb(var(--status-error-05,250 165 160));--mds-input-date-variant-color-rgb:var(--status-error-04,254 193 189)}@media (forced-colors:active){:host(:focus-within) .input{outline:2px solid #0000;outline-offset:2px}}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-input-date-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-input-date-ring:var(--shadow-outline-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-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))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-input-date-ring:var(--shadow-outline-strong-50);--mds-input-date-background:rgb(var(--tone-neutral-09,76 76 76));--mds-input-date-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))}}`;
 
 const MdsInputDate = class {
     constructor(hostRef) {
@@ -20,6 +21,7 @@ const MdsInputDate = class {
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
         this.isSlotted = false;
+        this.empty = undefined;
         this.t = new locale.Locale({
             el: {},
             en: {},
@@ -69,14 +71,15 @@ const MdsInputDate = class {
             const input = event.target;
             this.touched = true;
             // manage case when i insert 0 on date and default input behavior change in 01 instead of resetting all date
-            if (input.value)
+            if (input.value !== '')
                 this.value = input.value;
-            this.validateValue();
+            this.validateValue(input.validity.badInput);
         };
         this.onBlur = (ev) => {
             const input = ev.target;
             this.hasFocus = false;
             this.value = input.value;
+            this.validateValue(input.validity.badInput);
         };
         this.onFocus = (ev) => {
             const input = ev.target;
@@ -89,7 +92,24 @@ const MdsInputDate = class {
                 }, 10);
             }
         };
+        this.handleOpenCalendarClick = () => {
+            this.calendarKey += 1;
+        };
+        this.handleCalendarChange = (ev) => {
+            this.value = ev.detail.startDate;
+            if (this.delay === 0)
+                return;
+            const { dropdownRef } = this;
+            if (dropdownRef) {
+                setTimeout(() => {
+                    dropdownRef.visible = false;
+                }, this.delay);
+            }
+        };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -97,45 +117,82 @@ const MdsInputDate = class {
         this.valueChange.emit(this.value);
         this.validateValue();
     }
-    validateValue() {
+    validateValue(hasBadInput = false) {
         const date = datetime.DateTime.fromISO(this.value);
-        const isInvalidDate = date.invalid;
-        const outOfRange = (this.max && datetime.DateTime.fromISO(this.max) < date) ||
-            (this.min && datetime.DateTime.fromISO(this.min) > date);
-        if ((isInvalidDate && this.required) || outOfRange) {
+        const hasValue = Boolean(this.value);
+        const hasInvalidValue = hasValue && !date.isValid;
+        const isMissingRequiredValue = this.required && !hasValue;
+        const outOfRange = date.isValid &&
+            ((this.max && datetime.DateTime.fromISO(this.max) < date) ||
+                (this.min && datetime.DateTime.fromISO(this.min) > date));
+        if (hasBadInput || hasInvalidValue || isMissingRequiredValue || outOfRange) {
             this.isValid = false;
             this.variant = 'error';
             this.internals.setFormValue(null);
+            this.empty = hasBadInput || hasInvalidValue ? true : undefined;
         }
         else {
             this.isValid = true;
             this.variant = 'primary';
             this.internals.setFormValue(this.value);
+            this.empty = undefined;
         }
         this.validationEvent.emit(this.isValid);
     }
+    /**
+     * Sets focus on the underlying input element.
+     */
     async focusInput() {
         var _a;
         const input = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.input');
         input.focus();
     }
+    /**
+     * Sets the input value.
+     * @param value the value to set, in ISO format (YYYY-MM-DD)
+     */
     async setValue(value) {
         this.value = value;
         this.validateValue();
         return Promise.resolve();
     }
+    /**
+     * Returns the current validation errors, or `null` if the value is valid.
+     * @returns the validation errors, or `null` when valid
+     */
     async getErrors() {
         return Promise.resolve(this.isValid ? null : { error: '' });
     }
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     componentWillLoad() {
-        this.isSlotted = !!this.host.getAttribute('slot');
+        this.isSlotted = !(this.host.getAttribute('slot') === null || this.host.getAttribute('slot') === '');
         this.value = this.value || '';
         this.language = this.t.lang(this.host);
         // Se max è precedente a min, imposto max uguale a min
-        if (this.min && this.max) {
+        if (this.min !== null && this.min !== '' && this.max !== null && this.max !== '') {
             const minDate = datetime.DateTime.fromISO(this.min);
             const maxDate = datetime.DateTime.fromISO(this.max);
             if (maxDate < minDate) {
@@ -145,19 +202,7 @@ const MdsInputDate = class {
         this.validateValue();
     }
     render() {
-        return (index.h(index.Host, { key: '8efaa64794d705ab057db7b0b7743b588e35a3e7' }, index.h("input", { key: '1e109892c36eae01e91d2aa5860b446c5d983006', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && (index.h("div", { key: '3e9fb074efbfc12022587a627ea4815ec1428d31', class: "action-open-calendar-wrapper" }, index.h("mds-button", { key: 'd4cd21ec69ea8b30cf8fcd95b4052b401e1435a2', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "text", icon: calendarToday.miBaselineCalendarToday, onClick: () => {
-                this.calendarKey += 1;
-            } }))), index.h("mds-input-tip", { key: '472adce47e2ad731fc1c742919ed2b6b32504558', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '108c1310e84fce62fe49b7c19662e73535720807', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: 'bcbc3b4374824307b4e8b473a4a8b4d62a1bfd30', expanded: true, variant: "readonly" }), this.required && (index.h("mds-input-tip-item", { key: 'e9bea14210b583a0a16c353ad402520df436f957', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), !this.isSlotted && (index.h("mds-dropdown", { key: 'a567e5b0e1ce481d9829b0438d235c87f77153ef', placement: "bottom-end", "auto-placement": false, ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown" }, index.h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: (ev) => {
-                this.value = ev.detail.startDate;
-                if (this.delay === 0)
-                    return;
-                const { dropdownRef } = this;
-                if (dropdownRef) {
-                    setTimeout(() => {
-                        dropdownRef.visible = false;
-                    }, this.delay);
-                }
-            }, startDate: this.value }, (this.min ? { min: this.min } : {}), (this.max ? { max: this.max } : {})))))));
+        return (index.h(index.Host, { key: '4d896aae88a4637f371861ee251e2337530baded', empty: this.empty, "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("input", { key: '5e58df1c7b4e43e9c31c2660d31180efd2ac813e', value: this.value, id: "dateInput", class: "input", part: "input-date", type: "date", disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.handleChange, onChange: this.handleChange }), !this.isSlotted && (index.h("div", { key: 'bd68590ff1bbbc0a3a744e44e88d6a3bca11fdca', class: "action-open-calendar-wrapper" }, index.h("mds-button", { key: 'f3bd3316bce646eb4df4eb368a952096397447e7', id: "calendar-dropdown", class: "action-open-calendar", disabled: this.disabled, variant: "dark", tone: "text", icon: calendarToday.miBaselineCalendarToday, onClick: this.handleOpenCalendarClick }))), index.h("mds-input-tip", { key: '9f4264859de66046a3761ec96083c09c53bdced9', lang: this.language, position: "top", active: this.hasFocus }, this.disabled && index.h("mds-input-tip-item", { key: '8be9f58f10be7407d6c76d5e7b79e2faaa6aaa86', expanded: true, variant: "disabled" }), this.readonly && index.h("mds-input-tip-item", { key: '144bce0f9a1a67593be23decd4a59e34c342b359', expanded: true, variant: "readonly" }), this.required && (index.h("mds-input-tip-item", { key: 'efcafab1b01ddb3983299273dbddae86af6f621d', expanded: this.hasFocus, variant: this.isValid ? 'required-success' : 'required' }))), !this.isSlotted && (index.h("mds-dropdown", { key: 'df129e18751e4312509dc60ea4538fb4797071ff', placement: "bottom-end", "disable-auto-placement": true, ref: (el) => (this.dropdownRef = el), target: "#calendar-dropdown" }, index.h("mds-calendar", Object.assign({ key: this.calendarKey, rangePicker: false, lang: this.language, onMdsCalendarChange: this.handleCalendarChange, startDate: this.value }, (this.min !== null && this.min !== '' ? { min: this.min } : {}), (this.max !== null && this.max !== '' ? { max: this.max } : {})))))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }

package/dist/cjs/mds-input-field.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CNuKb6Lv.js');
 
-const mdsInputFieldCss = () => `@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-field-message-color:rgb(var(--tone-neutral-03,233 233 233));--mds-input-field-message-background:rgb(var(--tone-neutral-10,60 60 60))}}}@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-field-message-color:rgb(var(--tone-neutral-03,233 233 233));--mds-input-field-message-background:rgb(var(--tone-neutral-10,60 60 60));color:rgb(var(--tone-neutral-02,244 244 244));corner-shape:var(--magma-corner-shape,round);display:grid;gap:calc(var(--spacing,.0025rem)*300)}.message-window{border-radius:var(--radius-2xl,24px);color:var(--mds-input-field-message-color,rgb(var(--tone-neutral-03,233 233 233)));corner-shape:inherit;background-color:#0000;display:grid;gap:0;padding:0;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color,color,gap,padding;-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))}.message-window:has(.message:not(:empty)){background-color:var(--mds-input-field-message-background,rgb(var(--tone-neutral-10,60 60 60)));gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*200)}.message{interpolate-size:allow-keywords;display:flex;flex-direction:column;height:auto;padding:calc(var(--spacing,.0025rem)*100) calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*200);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:height,margin-top,opacity,padding;-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))}.message:empty{height:0;max-height:0;opacity:0;padding:0}.label:empty{display:none}.content{container:content/inline-size;display:flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*200)}::slotted(:first-child){flex-grow:1}::slotted(:not(:first-child)){flex-shrink:0}@container content (max-width:300px){::slotted(*){flex-grow:1;min-width:100%}}:host([variant=ai]){--mds-input-field-message-color:rgb(var(--variant-ai-02,242 235 254));--mds-input-field-message-background:rgb(var(--variant-ai-09,75 8 189))}:host([variant=info]){--mds-input-field-message-color:rgb(var(--status-info-02,222 242 250));--mds-input-field-message-background:rgb(var(--status-info-09,0 73 116))}:host([variant=success]){--mds-input-field-message-color:rgb(var(--status-success-02,222 244 228));--mds-input-field-message-background:rgb(var(--status-success-09,0 82 9))}:host([variant=warning]){--mds-input-field-message-color:rgb(var(--status-warning-02,255 237 185));--mds-input-field-message-background:rgb(var(--status-warning-09,90 67 0))}:host([variant=error]){--mds-input-field-message-color:rgb(var(--status-error-02,255 234 231));--mds-input-field-message-background:rgb(var(--status-error-09,135 0 14))}`;
+const mdsInputFieldCss = () => `@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-field-message-color:rgb(var(--tone-neutral-03,233 233 233));--mds-input-field-message-background:rgb(var(--tone-neutral-10,60 60 60))}}}: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-field-message-color:rgb(var(--tone-neutral-03,233 233 233));--mds-input-field-message-background:rgb(var(--tone-neutral-10,60 60 60));color:rgb(var(--tone-neutral-02,244 244 244));corner-shape:var(--magma-corner-shape,round);display:grid;gap:calc(var(--spacing,.0025rem)*300)}.message-window{border-radius:var(--radius-2xl,24px);color:var(--mds-input-field-message-color,rgb(var(--tone-neutral-03,233 233 233)));corner-shape:inherit;background-color:#0000;display:grid;gap:0;padding:0;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color,color,gap,padding;-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))}.message-window:has(.message:not(:empty)){background-color:var(--mds-input-field-message-background,rgb(var(--tone-neutral-10,60 60 60)));gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--spacing,.0025rem)*200)}.message{interpolate-size:allow-keywords;display:flex;flex-direction:column;height:auto;padding:calc(var(--spacing,.0025rem)*100) calc(var(--spacing,.0025rem)*200) calc(var(--spacing,.0025rem)*200);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:height,margin-top,opacity,padding;-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))}.message:empty{height:0;max-height:0;opacity:0;padding:0}.label:empty{display:none}.content{container:content/inline-size;display:flex;flex-wrap:wrap;gap:calc(var(--spacing,.0025rem)*200)}::slotted(:first-child){flex-grow:1}::slotted(:not(:first-child)){flex-shrink:0}@container content (max-width:300px){::slotted(*){flex-grow:1;min-width:100%}}:host([variant=ai]){--mds-input-field-message-color:rgb(var(--variant-ai-02,242 235 254));--mds-input-field-message-background:rgb(var(--variant-ai-09,75 8 189))}:host([variant=info]){--mds-input-field-message-color:rgb(var(--status-info-02,222 242 250));--mds-input-field-message-background:rgb(var(--status-info-09,0 73 116))}:host([variant=success]){--mds-input-field-message-color:rgb(var(--status-success-02,222 244 228));--mds-input-field-message-background:rgb(var(--status-success-09,0 82 9))}:host([variant=warning]){--mds-input-field-message-color:rgb(var(--status-warning-02,255 237 185));--mds-input-field-message-background:rgb(var(--status-warning-09,90 67 0))}:host([variant=error]){--mds-input-field-message-color:rgb(var(--status-error-02,255 234 231));--mds-input-field-message-background:rgb(var(--status-error-09,135 0 14))}:host([variant=info]) ::slotted(mds-input){--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]) ::slotted(mds-input: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=warning]) ::slotted(mds-input){--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]) ::slotted(mds-input: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=success]) ::slotted(mds-input){--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]) ::slotted(mds-input: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=error]) ::slotted(mds-input){--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]) ::slotted(mds-input: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)}`;
 
 const MdsInputField = class {
     constructor(hostRef) {
@@ -16,12 +16,12 @@ const MdsInputField = class {
         // mdsInput.hasValidator().then(hasValidator => {
         // if (!hasValidator) return
         mdsInput.getErrors().then((errors) => {
-            if (errors) {
+            if (errors != null) {
                 this.variant = 'error';
                 const messages = Object.entries(errors)
                     .map((v) => v[1])
                     .filter((v) => v);
-                this.message = messages.length ? messages.join(';') : undefined;
+                this.message = messages.length !== 0 ? messages.join(';') : undefined;
                 return;
             }
             this.variant = 'success';
@@ -31,13 +31,13 @@ const MdsInputField = class {
     }
     componentDidLoad() {
         const [mdsInput] = this.slotInput.assignedElements();
-        if (!mdsInput)
+        if (mdsInput == null)
             throw new Error('Mds input not found');
         mdsInput.addEventListener('mdsInputValidation', () => this.handleValidation(mdsInput));
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '07a3f00c463755ed5699415bda96b8a6ab0088e8' }, index.h("mds-text", { key: 'a76488419fd68dd54fbb814bd464445f963ff20d', class: "label", typography: "label" }, this.label), index.h("div", { key: '288d029bde16c91ace57a906abd4bff5a6a2b26d', class: "message-window" }, index.h("div", { key: 'b9a8bc1f7967741b91f09b7f944c7b598cba86e9', class: "content", part: "content" }, index.h("slot", { key: 'cb260b91c2dccb8161a76043bd7257eed51b275d', ref: (i) => (this.slotInput = i) })), index.h("div", { key: '9be6a675440795d75cd580f22f19d45db01840fa', class: "message" }, (_a = this.message) === null || _a === void 0 ? void 0 : _a.split(';').map((m, i) => (index.h("mds-text", { typography: "caption", key: i }, m)))))));
+        return (index.h(index.Host, { key: '7d2b6e591f2da90402eef9c453b6b229d04f56f8' }, index.h("mds-text", { key: '6058dec040f453a65f5d34c8d16ddf786ade620f', class: "label", typography: "label" }, this.label), index.h("div", { key: 'dda1efd3aed92889c8aa28d5958630d304f81f9e', class: "message-window" }, index.h("div", { key: '66196e8f4f024dbbd2c59dc6c8d00b46b4997ff4', class: "content", part: "content" }, index.h("slot", { key: 'ba8af714da43300a70833acbd281bfe19c5d3e4b', ref: (i) => (this.slotInput = i) })), index.h("div", { key: 'dbc5d405bb47cd7f3d730d3732e2ef0c49d9bfc6', class: "message" }, (_a = this.message) === null || _a === void 0 ? void 0 : _a.split(';').map((m, i) => (index.h("mds-text", { typography: "caption", key: i }, m)))))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }

package/dist/cjs/mds-input-otp.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-CNuKb6Lv.js');
 
-const mdsInputOtpCss = () => `@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;:host{display:inline-flex;gap:calc(var(--spacing,.0025rem)*400)}.input{width:calc(var(--spacing,.0025rem)*1200)}.input::part(field){text-align:center}.input::part(tip-count){display:none}`;
+const mdsInputOtpCss = () => `@layer reset,vendor,theme,base,components,utilities;:host{display:inline-flex;gap:calc(var(--spacing,.0025rem)*400)}.input{width:calc(var(--spacing,.0025rem)*1200)}.input::part(field){text-align:center}.input::part(tip-count){display:none}`;
 
 const MdsInputOtp = class {
     constructor(hostRef) {
@@ -58,7 +58,7 @@ const MdsInputOtp = class {
             const currentInput = e.target;
             this.setOtpDigit(currentInput, e.key);
             const nextInput = currentInput.nextElementSibling;
-            if (nextInput) {
+            if (nextInput != null) {
                 nextInput.setFocus();
             }
             else {
@@ -77,7 +77,7 @@ const MdsInputOtp = class {
             for (const currentDigit of digits) {
                 this.setOtpDigit(currentInput, currentDigit);
                 currentInput = currentInput.nextElementSibling;
-                if (currentInput) {
+                if (currentInput != null) {
                     currentInput.setFocus();
                 }
                 else {
@@ -88,7 +88,7 @@ const MdsInputOtp = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '1d8ade99b72505aea4f74022b3b1e1de4b84a82b' }, Array.from({ length: this.length }).map(() => (index.h("mds-input", { class: "input", maxlength: 1, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste })))));
+        return (index.h(index.Host, { key: 'b8ed6443032efcace51ea84c5dbae2533796a7f7' }, Array.from({ length: this.length }).map(() => (index.h("mds-input", { class: "input", maxlength: 1, onKeyDown: this.handleKeyDown, onPaste: this.handlePaste })))));
     }
     static get formAssociated() { return true; }
     get element() { return index.getElement(this); }

package/dist/cjs/mds-input-range.cjs.entry.js

@@ -1,8 +1,9 @@
 'use strict';
 
 var index = require('./index-CNuKb6Lv.js');
+var preference = require('./preference-BdpIXWLP.js');
 
-const mdsInputRangeCss = () => `@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{--tw-duration:initial;--tw-ease:initial}}}@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-range-thumb-background-disabled:rgb(var(--tone-neutral-08,107 107 107));--mds-input-range-thumb-background:rgb(var(--tone-neutral,0 0 0));--mds-input-range-thumb-cursor:col-resize;--mds-input-range-thumb-size:calc(var(--spacing,.0025rem)*400);--mds-input-range-track-background-disabled:rgb(var(--tone-neutral-08,107 107 107));--mds-input-range-track-background:rgb(var(--tone-neutral-08,107 107 107));--mds-input-range-track-progress-background-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-range-track-progress-background:rgb(var(--variant-primary-03,211 226 255));--mds-input-range-track-size:calc(var(--spacing,.0025rem)*600);--private-border-width:calc(var(--mds-input-range-track-size)/2 - var(--mds-input-range-thumb-size)/2);--private-thumb-size:calc(var(--mds-input-range-thumb-size) + var(--private-border-width)*2);gap:calc(var(--spacing,.0025rem)*200);--tw-duration:.3s;--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));display:grid;gap:calc(var(--spacing,.0025rem)*100);transition-duration:.3s;-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:color;transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));-webkit-transition-timing-function:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.header{display:flex;gap:calc(var(--spacing,.0025rem)*200)}.label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value{margin-left:auto}.range{align-items:center;display:flex;height:var(--private-thumb-size);position:relative}.track{box-sizing:border-box;position:absolute;width:100%}.field{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));appearance:none;background-color:#0000;border-radius:1000px;flex-grow:1;height:calc(var(--spacing,.0025rem)*400);margin: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-timing-function:ease-in-out;z-index:20}.field:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.field::-webkit-slider-thumb{appearance:none;background-color:var(--mds-input-range-thumb-background);border-color:var(--mds-input-range-track-progress-background);border-radius:var(--mds-input-range-thumb-size);border-style:solid;border-width:var(--private-border-width);cursor:var(--mds-input-range-thumb-cursor);height:var(--private-thumb-size);line-height:0;transform:translateY(-50%);transition-property:background-color,border;width:var(--private-thumb-size)}.field::-webkit-slider-runnable-track{appearance:none;border:0;height:0;width:100%}.track-progress{background-color:var(--mds-input-range-track-progress-background);width:calc((100% - var(--mds-input-range-track-size))*(var(--mds-input-range-progress,0)*0.01) + var(--mds-input-range-track-size)/2)}.track-progress,.track-total{display:flex;height:var(--mds-input-range-track-size);-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);transition-property:background-color}.track-total{background-color:var(--mds-input-range-track-background);overflow:hidden;-webkit-transition-timing-function:var(--ease-in-out);transition-timing-function:var(--ease-in-out);width:100%}.contrast-area,.track-total{border-radius:var(--mds-input-range-track-size)}.contrast-area{margin-left:calc(var(--spacing,.0025rem)*100);margin-right:calc(var(--spacing,.0025rem)*100)}:host([disabled]:not([disabled=false])){--mds-input-range-thumb-background:var(--mds-input-range-thumb-background-disabled);--mds-input-range-track-background:var(--mds-input-range-track-background-disabled);--mds-input-range-track-progress-background:var(--mds-input-range-track-progress-background-disabled)}:host([disabled]:not([disabled=false])) .field::-webkit-slider-thumb{cursor:not-allowed}:host-context(:root.pref-animation-reduce){transition-duration:0s}:is(:host-context(:root.pref-animation-reduce) .track-progress,:host-context(:root.pref-animation-reduce) .track-total){transition-duration:0s}:host-context(:root.pref-animation-reduce) .field::-webkit-slider-thumb{transition-duration:0s}:host-context(:root.pref-animation-reduce) .field::-webkit-slider-runnable-track{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-input-range-thumb-background:rgb(var(--variant-primary-04,184 208 255));--mds-input-range-track-background:rgb(var(--tone-neutral-07,134 134 134));--mds-input-range-track-progress-background:rgb(var(--variant-primary-05,152 188 255))}:host-context(:root.pref-contrast-more){color:rgb(var(--tone-neutral-01,255 255 255))}@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]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .track-progress,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .track-total{transition-duration:0s}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .field::-webkit-slider-thumb{transition-duration:0s}:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .field::-webkit-slider-runnable-track{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-input-range-thumb-background:rgb(var(--variant-primary-04,184 208 255));--mds-input-range-track-background:rgb(var(--tone-neutral-07,134 134 134));--mds-input-range-track-progress-background:rgb(var(--variant-primary-05,152 188 255))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){color:rgb(var(--tone-neutral-01,255 255 255))}}`;
+const mdsInputRangeCss = () => `@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-range-transition-duration:var(--duration-300,.3s);--private-input-range-transition-duration:var(--mds-input-range-transition-duration);--mds-input-range-thumb-background-disabled:rgb(var(--tone-neutral-08,107 107 107));--mds-input-range-thumb-background:rgb(var(--tone-neutral,0 0 0));--mds-input-range-thumb-cursor:col-resize;--mds-input-range-thumb-size:calc(var(--spacing,.0025rem)*400);--mds-input-range-track-background-disabled:rgb(var(--tone-neutral-08,107 107 107));--mds-input-range-track-background:rgb(var(--tone-neutral-08,107 107 107));--mds-input-range-track-progress-background-disabled:rgb(var(--tone-neutral-06,158 158 158));--mds-input-range-track-progress-background:rgb(var(--variant-primary-03,211 226 255));--mds-input-range-track-size:calc(var(--spacing,.0025rem)*600);--private-border-width:calc(var(--mds-input-range-track-size)/2 - var(--mds-input-range-thumb-size)/2);--private-thumb-size:calc(var(--mds-input-range-thumb-size) + var(--private-border-width)*2);display:grid;gap:calc(var(--spacing,.0025rem)*200);-webkit-transition-duration:var(--private-input-range-transition-duration);transition-duration:var(--private-input-range-transition-duration);transition-property:color;-webkit-transition-timing-function:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.header{display:flex;gap:calc(var(--spacing,.0025rem)*200)}.label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value{margin-left:auto}.range{align-items:center;display:flex;height:var(--private-thumb-size);position:relative}.track{box-sizing:border-box;position:absolute;width:100%}.field{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));appearance:none;background-color:#0000;border-radius:1000px;flex-grow:1;height:calc(var(--spacing,.0025rem)*400);margin: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-timing-function:ease-in-out;z-index:20}.field:focus-visible{--magma-outline-blur:var(--magma-outline-focus);animation-play-state:running}.field::-webkit-slider-thumb{appearance:none;background-color:var(--mds-input-range-thumb-background);border-color:var(--mds-input-range-track-progress-background);border-radius:var(--mds-input-range-thumb-size);border-style:solid;border-width:var(--private-border-width);cursor:var(--mds-input-range-thumb-cursor);height:var(--private-thumb-size);line-height:0;transform:translateY(-50%);transition-property:background-color,border;width:var(--private-thumb-size)}.field::-webkit-slider-runnable-track{appearance:none;border:0;height:0;width:100%}.track-progress{background-color:var(--mds-input-range-track-progress-background);width:calc((100% - var(--mds-input-range-track-size))*(var(--mds-input-range-progress,0)*0.01) + var(--mds-input-range-track-size)/2)}.track-progress,.track-total{display:flex;height:var(--mds-input-range-track-size);-webkit-transition-duration:var(--private-input-range-transition-duration);transition-duration:var(--private-input-range-transition-duration);transition-property:background-color}.track-total{background-color:var(--mds-input-range-track-background);overflow:hidden;-webkit-transition-timing-function:var(--ease-in-out);transition-timing-function:var(--ease-in-out);width:100%}.contrast-area,.track-total{border-radius:var(--mds-input-range-track-size)}.contrast-area{margin-left:calc(var(--spacing,.0025rem)*100);margin-right:calc(var(--spacing,.0025rem)*100)}:host([disabled]:not([disabled=false])){--mds-input-range-thumb-background:var(--mds-input-range-thumb-background-disabled);--mds-input-range-track-background:var(--mds-input-range-track-background-disabled);--mds-input-range-track-progress-background:var(--mds-input-range-track-progress-background-disabled)}:host([disabled]:not([disabled=false])) .field::-webkit-slider-thumb{cursor:not-allowed}:host([pref-animation=reduce]){--private-input-range-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-input-range-thumb-background:rgb(var(--variant-primary-04,184 208 255));--mds-input-range-track-background:rgb(var(--tone-neutral-07,134 134 134));--mds-input-range-track-progress-background:rgb(var(--variant-primary-05,152 188 255))}:host([pref-contrast=more]){color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-input-range-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-input-range-thumb-background:rgb(var(--variant-primary-04,184 208 255));--mds-input-range-track-background:rgb(var(--tone-neutral-07,134 134 134));--mds-input-range-track-progress-background:rgb(var(--variant-primary-05,152 188 255))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){color:rgb(var(--tone-neutral-01,255 255 255))}}`;
 
 const MdsInputRange = class {
     constructor(hostRef) {
@@ -94,6 +95,27 @@ const MdsInputRange = class {
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     componentDidLoad() {
         var _a;
         this.decimalPlaces = this.countDecimals(this.step);
@@ -103,7 +125,7 @@ const MdsInputRange = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '78e82c801e70cf992bc5deabaa9e808316213e1f' }, index.h("header", { key: '0f7e2c943c28ae1674a5a530647e77f9303540fa', class: "header", part: "header" }, index.h("mds-text", { key: '5fafac003285baa5d6d7cc62e9d4e4960b2e6a4b', class: "label", typography: "label" }, index.h("slot", { key: 'a8ed6b9ed62609a2f308e205419ccb822c5d330a' })), index.h("mds-text", { key: '0a2d6f18a4b0ed1efe8a7268aad848841d4291bb', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), index.h("div", { key: '3686881a383b073db00887c011e8dc1c7324c77f', class: "range" }, index.h("div", { key: '6acdd16108a2d21ced425bcde5dedaafb56729b9', class: "track", part: "track" }, index.h("div", { key: 'ac2ec72946c8971764189c987762700786e782b8', class: "contrast-area" }), index.h("div", { key: 'dd3336b85af882a8d2e97d856a1ac4c585dc8cd9', class: "track-total" }, index.h("div", { key: '2d2689cc0696a679726b353ccc8284cb80dd6ef7', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), index.h("input", { key: '38cfab4ef130022b6e8d0673431174801c6beac5', ref: (el) => (this.inputElement = el), class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value, name: this.name }))));
+        return (index.h(index.Host, { key: 'b820e8ed601040eee9bac980e0ee308a3d09de51', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("header", { key: 'f9849eb9243eaab7585991a7f32a7ecd0aa30d78', class: "header", part: "header" }, index.h("mds-text", { key: '9d32ebdd41564adfc5c4d4546017b87aeaef6580', class: "label", typography: "label" }, index.h("slot", { key: '6061c4d9d0987242ca08444370831aa55aa0e927' })), index.h("mds-text", { key: 'a8e588f3833bdd9a809b75b1f9cf2bef725ccd4e', class: "value", typography: "label" }, this.formatValue ? this.formatValue(this.value) : this.value)), index.h("div", { key: 'b0ea4bd7ca1b5f82c4b6581d891a5ca3db71b901', class: "range" }, index.h("div", { key: '2d888c14de77f99cfbb651c470e85888869eefcf', class: "track", part: "track" }, index.h("div", { key: '0bd42dcedd84c2e8ce4ac8e922c40de108bca01c', class: "contrast-area" }), index.h("div", { key: 'd88d39f19a361f6a515ba9faf63bfce0961abb77', class: "track-total" }, index.h("div", { key: '82d7e7dd1e4741f89ab8ca250daf93b3e1fb7c28', class: "track-progress", style: { '--mds-input-range-progress': `${(_a = this.progress) !== null && _a !== void 0 ? _a : 0}` } }))), index.h("input", { key: 'c6d01e5b369efc8a60007255b1ae4c1cd2cfce03', ref: (el) => (this.inputElement = el), class: "field", "aria-label": this.label, disabled: this.disabled, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value, name: this.name }))));
     }
     static get formAssociated() { return true; }
     get element() { return index.getElement(this); }

package/dist/cjs/mds-input-select.cjs.entry.js

@@ -2,9 +2,10 @@
 
 var index = require('./index-CNuKb6Lv.js');
 var locale = require('./locale-oGW3SvGJ.js');
+var preference = require('./preference-BdpIXWLP.js');
 var keyboardArrowDown = require('./keyboard-arrow-down-BNOA3Lin.js');
 
-const mdsInputSelectCss = () => `@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-select-variant-color-rgb:var(--tone-neutral-01,255 255 255);--mds-input-select-arrow-icon-background-color:var(--mds-input-select-arrow-icon-blur-background-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/0));--mds-input-select-arrow-icon-blur-background-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/0);--mds-input-select-arrow-icon-blur-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5);--mds-input-select-arrow-icon-color:var(--mds-input-select-arrow-icon-blur-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5);--mds-input-select-arrow-icon-hover-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255)));--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*1000);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233))}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-input-tip,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}:host{--mds-input-select-variant-color-rgb:var(--tone-neutral-01,255 255 255);--mds-input-select-ring:0 0 0 1px rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.1);--mds-input-select-shadow:0 1px 3px 0 rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.1),0 1px 2px 0 rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.06);--mds-input-select-arrow-icon-background-color:var(--mds-input-select-arrow-icon-blur-background-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/0));--mds-input-select-arrow-icon-blur-background-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/0);--mds-input-select-arrow-icon-blur-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5);--mds-input-select-arrow-icon-color:var(--mds-input-select-arrow-icon-blur-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5);--mds-input-select-arrow-icon-hover-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255)));--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*1000);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));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;color:rgb(var(--tone-neutral-02,244 244 244));display:flex;position:relative;-webkit-user-select:none;user-select:none;--mds-input-select-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-select-variant-color-rgb:0 0 0;--mds-input-select-arrow-icon-blur-background-color:rgb(var(--variant-primary-09,0 58 168));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--variant-primary-08,0 83 239));--mds-input-select-arrow-icon-blur-color:rgb(var(--variant-primary-06,90 147 255));--mds-input-select-arrow-icon-hover-color:rgb(var(--variant-primary-04,184 208 255))}:host([required]:not([required=false]):focus-within) .icon{-webkit-transform:translate(calc(var(--spacing,.0025rem)*150),calc(var(--spacing,.0025rem)*150));transform:translate(calc(var(--spacing,.0025rem)*150),calc(var(--spacing,.0025rem)*150))}:host(:focus-within),:host(:hover){--mds-input-select-variant-color-rgb:var(--variant-primary-03,211 226 255);--mds-input-select-ring:0 0 0 3px rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/1);--mds-input-select-shadow:0 4px 6px -1px rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.1),0 2px 4px -1px rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.06);--mds-input-select-arrow-icon-background-color:var(--mds-input-select-arrow-icon-hover-background-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5));--mds-input-select-arrow-icon-color:var(--mds-input-select-arrow-icon-hover-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))));--mds-input-select-variant-color-rgb:var(--variant-primary-04,184 208 255)}.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;appearance:none;background-color:rgb(var(--tone-neutral,0 0 0));border:0;border-radius:var(--radius-xs,8px);-webkit-box-shadow:var(--mds-input-select-ring),var(--mds-input-select-shadow);box-shadow:var(--mds-input-select-ring),var(--mds-input-select-shadow);box-sizing:border-box;color:rgb(var(--tone-neutral-02,244 244 244));cursor:pointer;margin:0;min-height:calc(var(--spacing,.0025rem)*1200);overflow:hidden;padding-left:calc(var(--spacing,.0025rem)*400);padding-right:calc(var(--spacing,.0025rem)*1200);text-overflow:ellipsis;transition-property:background-color,border-color,box-shadow,color,fill;width:100%}.input,.input:focus,.input:hover{-webkit-transition-duration:var(--duration-300,.3s);transition-duration:var(--duration-300,.3s);-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:focus,.input:hover{--tw-outline-style:none;color:rgb(var(--tone-neutral-03,233 233 233));outline-style:none}:host([value]:not([value=""])) .input{color:rgb(var(--tone-neutral-03,233 233 233))}:host([required]:not([required=false])) .input{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled{background-color:rgb(var(--tone-neutral-09,76 76 76));opacity:1}:host([disabled]:not([disabled=false])),:host([disabled]:not([disabled=false])) .input{pointer-events:none}:host([disabled]:not([disabled=false])) .icon{fill:rgb(var(--tone-neutral-06,158 158 158));-webkit-transform:translate(calc(var(--spacing,.0025rem)*250),calc(var(--spacing,.0025rem)*200));transform:translate(calc(var(--spacing,.0025rem)*250),calc(var(--spacing,.0025rem)*200))}.icon-container{align-items:center;color:inherit;display:flex;height:calc(var(--spacing,.0025rem)*1200);pointer-events:none;position:absolute;right:calc(var(--spacing,.0025rem)*400)}.icon{background-color:var(--mds-input-select-arrow-icon-background-color,var(--mds-input-select-arrow-icon-blur-background-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/0)));border-radius:var(--radius-full,1000px);display:flex;fill:var(--mds-input-select-arrow-icon-color,var(--mds-input-select-arrow-icon-blur-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5)));-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:background-color,fill}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}.option-container{display:none}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}@container (max-width:210px){:host .tip__content,:host(:focus-within) .tip__content{grid-template-columns:0fr;opacity:0}:host .tip{padding-left:0;padding-right:0}:host{--mds-input-select-background:rgb(var(--variant-primary-07,44 117 255))}}:host([variant=info]){--mds-input-select-icon-color:rgb(var(--status-info-05,112 198 234));--mds-input-select-tip-background:rgb(var(--status-info-05,112 198 234));--mds-input-select-arrow-icon-blur-background-color:rgb(var(--status-info-09,0 73 116));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--status-info-08,0 107 151));--mds-input-select-arrow-icon-blur-color:rgb(var(--status-info-06,0 161 208));--mds-input-select-arrow-icon-hover-color:rgb(var(--status-info-04,159 216 241));--mds-input-select-variant-color-rgb:0 0 0}:host([variant=info]:focus-within),:host([variant=info]:hover){--mds-input-select-icon-color:rgb(var(--status-info-04,159 216 241));--mds-input-select-variant-color-rgb:var(--status-info-05,112 198 234)}:host([variant=success]){--mds-input-select-icon-color:rgb(var(--status-success-05,107 206 147));--mds-input-select-tip-background:rgb(var(--status-success-05,107 206 147));--mds-input-select-arrow-icon-blur-background-color:rgb(var(--status-success-09,0 82 9));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--status-success-08,0 116 46));--mds-input-select-arrow-icon-blur-color:rgb(var(--status-success-06,0 171 97));--mds-input-select-arrow-icon-hover-color:rgb(var(--status-success-04,158 222 181));--mds-input-select-variant-color-rgb:0 0 0}:host([variant=success]:focus-within),:host([variant=success]:hover){--mds-input-select-icon-color:rgb(var(--status-success-04,158 222 181));--mds-input-select-variant-color-rgb:var(--status-success-05,107 206 147)}:host([variant=warning]){--mds-input-select-icon-color:rgb(var(--status-warning-05,237 177 0));--mds-input-select-tip-background:rgb(var(--status-warning-05,237 177 0));--mds-input-select-arrow-icon-blur-background-color:rgb(var(--status-warning-09,90 67 0));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--status-warning-08,129 96 0));--mds-input-select-arrow-icon-blur-color:rgb(var(--status-warning-06,190 142 0));--mds-input-select-arrow-icon-hover-color:rgb(var(--status-warning-04,255 200 33));--mds-input-select-variant-color-rgb:0 0 0}:host([variant=warning]:focus-within),:host([variant=warning]:hover){--mds-input-select-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-input-select-variant-color-rgb:var(--status-warning-05,237 177 0)}:host([variant=error]){--mds-input-select-icon-color:rgb(var(--status-error-05,250 165 160));--mds-input-select-tip-background:rgb(var(--status-error-05,250 165 160));--mds-input-select-arrow-icon-blur-background-color:rgb(var(--status-error-09,135 0 14));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--status-error-08,182 50 54));--mds-input-select-arrow-icon-blur-color:rgb(var(--status-error-06,239 108 105));--mds-input-select-arrow-icon-hover-color:rgb(var(--status-error-04,254 193 189));--mds-input-select-variant-color-rgb:0 0 0}:host([variant=error]:focus-within),:host([variant=error]:hover){--mds-input-select-icon-color:rgb(var(--status-error-04,254 193 189));--mds-input-select-variant-color-rgb:var(--status-error-05,250 165 160)}:host-context(:root.pref-animation-reduce){transition-duration:0s}:host-context(:root.pref-animation-reduce) .input{transition-duration:0s}:host-context(:root.pref-animation-reduce) .input:hover{transition-duration:0s}:host-context(:root.pref-animation-reduce) .input:focus{transition-duration:0s}:host-context(:root.pref-animation-reduce) .icon{transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-input-select-ring:var(--shadow-outline-50);--mds-input-select-arrow-icon-blur-background-color:rgb(var(--variant-primary-05,152 188 255));--mds-input-select-arrow-icon-blur-color:rgb(var(--mds-input-select-variant-color));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--variant-primary-04,184 208 255));--mds-input-select-arrow-icon-hover-color:rgb(var(--variant-primary-08,0 83 239))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)) .input{color:rgb(var(--tone-neutral-03,233 233 233))}:host-context(:root.pref-contrast-more){--mds-input-select-ring:var(--shadow-outline-strong-50)}:host-context(:root.pref-contrast-more) .input{color:rgb(var(--tone-neutral-01,255 255 255))}@media (forced-colors:active){.input:focus,.input:hover{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]))),:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .icon,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .input,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .input:focus,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .input:hover{transition-duration:0s}}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){--mds-input-select-ring:var(--shadow-outline-50);--mds-input-select-arrow-icon-blur-background-color:rgb(var(--variant-primary-05,152 188 255));--mds-input-select-arrow-icon-blur-color:rgb(var(--mds-input-select-variant-color));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--variant-primary-04,184 208 255));--mds-input-select-arrow-icon-hover-color:rgb(var(--variant-primary-08,0 83 239))}:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))) .input{color:rgb(var(--tone-neutral-03,233 233 233))}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-input-select-ring:var(--shadow-outline-strong-50)}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .input{color:rgb(var(--tone-neutral-01,255 255 255))}}`;
+const mdsInputSelectCss = () => `@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-select-variant-color-rgb:var(--tone-neutral-01,255 255 255);--mds-input-select-arrow-icon-background-color:var(--mds-input-select-arrow-icon-blur-background-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/0));--mds-input-select-arrow-icon-blur-background-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/0);--mds-input-select-arrow-icon-blur-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5);--mds-input-select-arrow-icon-color:var(--mds-input-select-arrow-icon-blur-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5);--mds-input-select-arrow-icon-hover-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255)));--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*1000);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233))}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-input-tip,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}:host{--mds-input-select-variant-color-rgb:var(--tone-neutral-01,255 255 255);--mds-input-select-ring:0 0 0 1px rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.1);--mds-input-select-shadow:0 1px 3px 0 rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.1),0 1px 2px 0 rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.06);--mds-input-select-arrow-icon-background-color:var(--mds-input-select-arrow-icon-blur-background-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/0));--mds-input-select-arrow-icon-blur-background-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/0);--mds-input-select-arrow-icon-blur-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5);--mds-input-select-arrow-icon-color:var(--mds-input-select-arrow-icon-blur-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5);--mds-input-select-arrow-icon-hover-color:rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255)));--mds-input-tip-horizontal-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-horizontal-offset-focused:calc(var(--spacing,.0025rem)*1000);--mds-input-tip-vertical-offset:calc(var(--spacing,.0025rem)*100);--mds-input-tip-background:rgb(var(--tone-neutral-03,233 233 233));--mds-input-select-transition-duration:var(--duration-300,.3s);--mds-input-select-icon-transition-duration:var(--duration-200,.2s);--private-input-select-transition-duration:var(--mds-input-select-transition-duration);--private-input-select-icon-transition-duration:var(--mds-input-select-icon-transition-duration);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;color:rgb(var(--tone-neutral-02,244 244 244));display:flex;position:relative;-webkit-user-select:none;user-select:none;--mds-input-select-icon-color:rgb(var(--variant-primary-03,211 226 255));--mds-input-select-variant-color-rgb:0 0 0;--mds-input-select-arrow-icon-blur-background-color:rgb(var(--variant-primary-09,0 58 168));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--variant-primary-08,0 83 239));--mds-input-select-arrow-icon-blur-color:rgb(var(--variant-primary-06,90 147 255));--mds-input-select-arrow-icon-hover-color:rgb(var(--variant-primary-04,184 208 255))}:host([required]:not([required=false]):focus-within) .icon{-webkit-transform:translate(calc(var(--spacing,.0025rem)*150),calc(var(--spacing,.0025rem)*150));transform:translate(calc(var(--spacing,.0025rem)*150),calc(var(--spacing,.0025rem)*150))}:host(:focus-within),:host(:hover){--mds-input-select-variant-color-rgb:var(--variant-primary-03,211 226 255);--mds-input-select-ring:0 0 0 3px rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/1);--mds-input-select-shadow:0 4px 6px -1px rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.1),0 2px 4px -1px rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.06);--mds-input-select-arrow-icon-background-color:var(--mds-input-select-arrow-icon-hover-background-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5));--mds-input-select-arrow-icon-color:var(--mds-input-select-arrow-icon-hover-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))));--mds-input-select-variant-color-rgb:var(--variant-primary-04,184 208 255)}.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;appearance:none;background-color:rgb(var(--tone-neutral,0 0 0));border:0;border-radius:var(--radius-xs,8px);-webkit-box-shadow:var(--mds-input-select-ring),var(--mds-input-select-shadow);box-shadow:var(--mds-input-select-ring),var(--mds-input-select-shadow);box-sizing:border-box;color:rgb(var(--tone-neutral-02,244 244 244));cursor:pointer;margin:0;min-height:calc(var(--spacing,.0025rem)*1200);overflow:hidden;padding-left:calc(var(--spacing,.0025rem)*400);padding-right:calc(var(--spacing,.0025rem)*1200);text-overflow:ellipsis;transition-property:background-color,border-color,box-shadow,color,fill;width:100%}.input,.input:focus,.input:hover{-webkit-transition-duration:var(--private-input-select-transition-duration);transition-duration:var(--private-input-select-transition-duration);-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:focus,.input:hover{--tw-outline-style:none;color:rgb(var(--tone-neutral-03,233 233 233));outline-style:none}:host([value]:not([value=""])) .input{color:rgb(var(--tone-neutral-03,233 233 233))}:host([required]:not([required=false])) .input{color:rgb(var(--tone-neutral-05,197 197 197))}.input:disabled{background-color:rgb(var(--tone-neutral-09,76 76 76));opacity:1}:host([disabled]:not([disabled=false])),:host([disabled]:not([disabled=false])) .input{pointer-events:none}:host([disabled]:not([disabled=false])) .icon{fill:rgb(var(--tone-neutral-06,158 158 158));-webkit-transform:translate(calc(var(--spacing,.0025rem)*250),calc(var(--spacing,.0025rem)*200));transform:translate(calc(var(--spacing,.0025rem)*250),calc(var(--spacing,.0025rem)*200))}.icon-container{align-items:center;color:inherit;display:flex;height:calc(var(--spacing,.0025rem)*1200);pointer-events:none;position:absolute;right:calc(var(--spacing,.0025rem)*400)}.icon{background-color:var(--mds-input-select-arrow-icon-background-color,var(--mds-input-select-arrow-icon-blur-background-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/0)));border-radius:var(--radius-full,1000px);display:flex;fill:var(--mds-input-select-arrow-icon-color,var(--mds-input-select-arrow-icon-blur-color,rgb(var(--mds-input-select-variant-color-rgb,var(--tone-neutral-01,255 255 255))/.5)));-webkit-transition-duration:var(--private-input-select-icon-transition-duration);transition-duration:var(--private-input-select-icon-transition-duration);transition-property:background-color,fill}.icon svg{aspect-ratio:var(--aspect-square,1/1);height:100%;width:100%}.option-container{display:none}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}@container (max-width:210px){:host .tip__content,:host(:focus-within) .tip__content{grid-template-columns:0fr;opacity:0}:host .tip{padding-left:0;padding-right:0}:host{--mds-input-select-background:rgb(var(--variant-primary-07,44 117 255))}}:host([variant=info]){--mds-input-select-icon-color:rgb(var(--status-info-05,112 198 234));--mds-input-select-tip-background:rgb(var(--status-info-05,112 198 234));--mds-input-select-arrow-icon-blur-background-color:rgb(var(--status-info-09,0 73 116));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--status-info-08,0 107 151));--mds-input-select-arrow-icon-blur-color:rgb(var(--status-info-06,0 161 208));--mds-input-select-arrow-icon-hover-color:rgb(var(--status-info-04,159 216 241));--mds-input-select-variant-color-rgb:0 0 0}:host([variant=info]:focus-within),:host([variant=info]:hover){--mds-input-select-icon-color:rgb(var(--status-info-04,159 216 241));--mds-input-select-variant-color-rgb:var(--status-info-05,112 198 234)}:host([variant=success]){--mds-input-select-icon-color:rgb(var(--status-success-05,107 206 147));--mds-input-select-tip-background:rgb(var(--status-success-05,107 206 147));--mds-input-select-arrow-icon-blur-background-color:rgb(var(--status-success-09,0 82 9));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--status-success-08,0 116 46));--mds-input-select-arrow-icon-blur-color:rgb(var(--status-success-06,0 171 97));--mds-input-select-arrow-icon-hover-color:rgb(var(--status-success-04,158 222 181));--mds-input-select-variant-color-rgb:0 0 0}:host([variant=success]:focus-within),:host([variant=success]:hover){--mds-input-select-icon-color:rgb(var(--status-success-04,158 222 181));--mds-input-select-variant-color-rgb:var(--status-success-05,107 206 147)}:host([variant=warning]){--mds-input-select-icon-color:rgb(var(--status-warning-05,237 177 0));--mds-input-select-tip-background:rgb(var(--status-warning-05,237 177 0));--mds-input-select-arrow-icon-blur-background-color:rgb(var(--status-warning-09,90 67 0));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--status-warning-08,129 96 0));--mds-input-select-arrow-icon-blur-color:rgb(var(--status-warning-06,190 142 0));--mds-input-select-arrow-icon-hover-color:rgb(var(--status-warning-04,255 200 33));--mds-input-select-variant-color-rgb:0 0 0}:host([variant=warning]:focus-within),:host([variant=warning]:hover){--mds-input-select-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-input-select-variant-color-rgb:var(--status-warning-05,237 177 0)}:host([variant=error]){--mds-input-select-icon-color:rgb(var(--status-error-05,250 165 160));--mds-input-select-tip-background:rgb(var(--status-error-05,250 165 160));--mds-input-select-arrow-icon-blur-background-color:rgb(var(--status-error-09,135 0 14));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--status-error-08,182 50 54));--mds-input-select-arrow-icon-blur-color:rgb(var(--status-error-06,239 108 105));--mds-input-select-arrow-icon-hover-color:rgb(var(--status-error-04,254 193 189));--mds-input-select-variant-color-rgb:0 0 0}:host([variant=error]:focus-within),:host([variant=error]:hover){--mds-input-select-icon-color:rgb(var(--status-error-04,254 193 189));--mds-input-select-variant-color-rgb:var(--status-error-05,250 165 160)}:host([pref-animation=reduce]){--private-input-select-transition-duration:0s;--private-input-select-icon-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-input-select-ring:var(--shadow-outline-50);--mds-input-select-arrow-icon-blur-background-color:rgb(var(--variant-primary-05,152 188 255));--mds-input-select-arrow-icon-blur-color:rgb(var(--mds-input-select-variant-color));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--variant-primary-04,184 208 255));--mds-input-select-arrow-icon-hover-color:rgb(var(--variant-primary-08,0 83 239))}:host([pref-theme=dark]:not([pref-theme-scheme=light])) .input{color:rgb(var(--tone-neutral-03,233 233 233))}:host([pref-contrast=more]){--mds-input-select-ring:var(--shadow-outline-strong-50)}:host([pref-contrast=more]) .input{color:rgb(var(--tone-neutral-01,255 255 255))}@media (forced-colors:active){.input:focus,.input:hover{outline:2px solid #0000;outline-offset:2px}}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-input-select-transition-duration:0s;--private-input-select-icon-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-input-select-ring:var(--shadow-outline-50);--mds-input-select-arrow-icon-blur-background-color:rgb(var(--variant-primary-05,152 188 255));--mds-input-select-arrow-icon-blur-color:rgb(var(--mds-input-select-variant-color));--mds-input-select-arrow-icon-hover-background-color:rgb(var(--variant-primary-04,184 208 255));--mds-input-select-arrow-icon-hover-color:rgb(var(--variant-primary-08,0 83 239))}:is(:host([pref-theme=system]:not([pref-theme-scheme=light])),:host(:not([pref-theme]))) .input{color:rgb(var(--tone-neutral-03,233 233 233))}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-input-select-ring:var(--shadow-outline-strong-50)}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .input{color:rgb(var(--tone-neutral-01,255 255 255))}}`;
 
 const MdsInputSelect = class {
     constructor(hostRef) {
@@ -60,10 +61,10 @@ const MdsInputSelect = class {
                 return;
             }
             options.forEach((option, index) => {
-                if (!this.placeholder) {
+                if (this.placeholder === undefined || this.placeholder === '') {
                     option.remove();
                 }
-                if (this.placeholder && index > 0) {
+                if (this.placeholder !== undefined && this.placeholder !== '' && index > 0) {
                     option.remove();
                 }
             });
@@ -72,13 +73,13 @@ const MdsInputSelect = class {
             var _a, _b, _c;
             const elements = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')[0]) === null || _b === void 0 ? void 0 : _b.assignedNodes();
             const options = (_c = this.selectEl) === null || _c === void 0 ? void 0 : _c.querySelectorAll('option');
-            if (!options) {
+            if (options == null) {
                 return;
             }
-            if (!this.placeholder && options.length > 0) {
+            if ((this.placeholder === undefined || this.placeholder === '') && options.length > 0) {
                 this.emptyOptions();
             }
-            if (this.placeholder && options.length > 1) {
+            if (this.placeholder !== undefined && this.placeholder !== '' && options.length > 1) {
                 this.emptyOptions();
             }
             elements === null || elements === void 0 ? void 0 : elements.forEach((element) => {
@@ -89,18 +90,21 @@ const MdsInputSelect = class {
         };
         this.setCurrentValue = () => {
             var _a;
-            if (!this.selectEl)
+            if (this.selectEl == null)
                 return;
-            if (this.value) {
+            if (this.value != null && this.value !== '' && this.value !== 0 && !Number.isNaN(this.value)) {
                 this.selectEl.querySelectorAll('option').forEach((element) => {
                     element.selected = element.value === this.value;
                 });
             }
-            else if (!this.placeholder) {
+            else if (this.placeholder === undefined || this.placeholder === '') {
                 this.value = (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('option')[0].value;
             }
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
         this.t.update();
@@ -139,7 +143,7 @@ const MdsInputSelect = class {
      * @param oldValue placeholder old value
      */
     placeholderChanged(newValue, oldValue) {
-        if (newValue && !oldValue) {
+        if (newValue !== undefined && newValue !== '' && (oldValue === undefined || oldValue === '')) {
             let defaultOption = document.querySelector('.placeholder-option');
             if (defaultOption)
                 defaultOption.remove();
@@ -147,7 +151,10 @@ const MdsInputSelect = class {
             this.selectEl.insertBefore(defaultOption, this.selectEl.firstChild);
             defaultOption.value = '';
             defaultOption.text = newValue;
-            if (!this.defaultValue) {
+            if (this.defaultValue == null ||
+                this.defaultValue === '' ||
+                this.defaultValue === 0 ||
+                Number.isNaN(this.defaultValue)) {
                 defaultOption.selected = true;
                 this.value = undefined;
             }
@@ -158,20 +165,49 @@ const MdsInputSelect = class {
     formResetCallback() {
         this.internals.setFormValue('');
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     componentWillLoad() {
         this.language = this.t.lang(this.host);
         // needed for react component, this prop should be used as default-value html attributo instead of defaultValue prop
-        if (this.defaultValue) {
+        if (this.defaultValue != null &&
+            this.defaultValue !== '' &&
+            this.defaultValue !== 0 &&
+            !Number.isNaN(this.defaultValue)) {
             this.value = this.defaultValue;
         }
     }
     componentDidLoad() {
-        if (this.value) {
+        if (this.value != null && this.value !== '' && this.value !== 0 && !Number.isNaN(this.value)) {
             this.internals.setFormValue(this.value.toString());
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'e24aa54e808ee37cb277a22859a54d93e23c5283' }, index.h("select", { key: 'f172e0a7e94c57dc1b847a816266c1f970b1aa69', class: "input", onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: (el) => (this.selectEl = el) }, index.h("option", { key: 'fe749c05df52318b427c0053c122071dbd29edb9', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue ? undefined : true }, this.placeholder)), index.h("div", { key: '3fcbf72764e5ba5f61f974abb3c0fd2ffa182d3c', class: "icon-container" }, index.h("i", { key: '0545e3600c92ec1a40cab4a7c95d4a4c30af007c', class: "icon", innerHTML: keyboardArrowDown.miBaselineKeyboardArrowDown })), index.h("div", { key: 'fad2e3518edecc638f507a186a74af503265fcaf', class: "option-container" }, index.h("slot", { key: 'f1cd07b2d41c75ecdbc911c180d245751ae1632e', onSlotchange: this.onSlotChangeHandler })), index.h("mds-input-tip", { key: '531dbe2be8117e17ab5158fdd64430948a44b5a4', position: "top", lang: this.language, active: this.hasFocus, part: "tip-top" }, this.disabled && index.h("mds-input-tip-item", { key: '2337cd67e9b88605e2795afdfebafa09ab72ba9e', expanded: true, variant: "disabled" }), this.required && (index.h("mds-input-tip-item", { key: 'e419f3266be106b5b405da2a36a1283d6eff9f7f', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })))));
+        return (index.h(index.Host, { key: '729807a3442ef1465c131a06041aa3e661e7362d', "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("select", { key: '708f45218c8651e99143fbc99f4d701d3837cdf5', class: "input", onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select", ref: (el) => (this.selectEl = el) }, index.h("option", { key: '8aca9030ca7eecb8bd90347ab0f65dd6195bf446', class: "placeholder-option", value: "", disabled: !this.required ? undefined : true, selected: this.defaultValue != null &&
+                this.defaultValue !== '' &&
+                this.defaultValue !== 0 &&
+                !Number.isNaN(this.defaultValue)
+                ? undefined
+                : true }, this.placeholder)), index.h("div", { key: 'c9ec4a12c6a1c61a843bd8e3b17fa49060f59cf4', class: "icon-container" }, index.h("i", { key: '8b1dffa75c8ccb7e69236d06cb22fedd75663721', class: "icon", innerHTML: keyboardArrowDown.miBaselineKeyboardArrowDown })), index.h("div", { key: '829bd49c29b9f890f36e88f09f1685a4675b4d37', class: "option-container" }, index.h("slot", { key: '7c077c0c8e5a46cfbd1707fc405e453cd12839d0', onSlotchange: this.onSlotChangeHandler })), index.h("mds-input-tip", { key: 'fb95b541445b5c5a2cdd7e8dda6f71e0a4a7dc8a', position: "top", lang: this.language, active: this.hasFocus, part: "tip-top" }, this.disabled && index.h("mds-input-tip-item", { key: '1f49975a3d659e263ed400edcc77a0d1ba3ca1ca', expanded: true, variant: "disabled" }), this.required && (index.h("mds-input-tip-item", { key: '45829a603cbd0c208e49c0103be849ada469db1a', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' })))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }