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

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

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

package/dist/esm/mds-keyboard-key.entry.js

@@ -258,7 +258,7 @@ icons.set('windows', miSharpWindow);
 icons.set('windowsleft', miSharpWindow);
 icons.set('windowsright', miSharpWindow);
 
-const mdsKeyboardKeyCss = () => `@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-keyboard-key-illumination-dark-size:calc(var(--spacing,.0025rem)*150);--mds-keyboard-key-illumination-light-size:calc(var(--spacing,.0025rem)*50);--mds-keyboard-key-padding:calc(var(--spacing,.0025rem)*100);--mds-keyboard-key-transition-duration:.3s}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-keyboard-key-transition-duration{syntax:"<time>";inherits:false;initial-value:.3s}:host{--mds-keyboard-key-illumination-dark-size:calc(var(--spacing,.0025rem)*150);--mds-keyboard-key-illumination-light-size:calc(var(--spacing,.0025rem)*50);--mds-keyboard-key-illumination-dark:0 calc(var(--mds-keyboard-key-illumination-dark-size,calc(var(--spacing,.0025rem) * 150)) * -1) 0 0 rgb(0 0 0/var(--mds-keyboard-key-illumination-dark-opacity,.05)) inset;--mds-keyboard-key-illumination-light:0 var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem)*50)) 0 0 rgb(255 255 255/var(--mds-keyboard-key-illumination-light-opacity,.5)) inset;--mds-keyboard-key-padding:calc(var(--spacing,.0025rem)*100);--mds-keyboard-key-transition-duration:.3s;--icon-size:calc(var(--spacing,.0025rem)*600);--key-size-default:calc(var(--icon-size) + calc(var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100)) * 2) + var(--mds-keyboard-key-illumination-dark-size,calc(var(--spacing,.0025rem) * 150)) + var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem) * 50)));--key-size-pressed:calc(var(--icon-size) + calc(var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100)) * 2) + calc(var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem) * 50)) * 2));corner-shape:var(--magma-corner-shape,round);align-items:flex-end;display:inline-flex;min-height:var(--key-size-default);min-width:var(--key-size-default)}.physical-key{background-color:var(--mds-keyboard-key-background,rgb(var(--tone-bisque-08,121 103 97)));border-radius:var(--radius-lg,16px);-webkit-box-shadow:var(--mds-keyboard-key-illumination-light),var(--mds-keyboard-key-illumination-dark),var(--mds-keyboard-key-illumination-shadow);box-shadow:var(--mds-keyboard-key-illumination-light),var(--mds-keyboard-key-illumination-dark),var(--mds-keyboard-key-illumination-shadow);box-sizing:border-box;corner-shape:inherit;align-items:baseline;display:inline-flex;flex-grow:1;flex-shrink:0;height:var(--key-size-default);justify-content:center;min-width:calc(var(--spacing,.0025rem)*1000);padding:calc(var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem) * 50)) + var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100))) var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100)) calc(var(--mds-keyboard-key-illumination-dark-size,calc(var(--spacing,.0025rem) * 150)) + var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100))) var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100));position:relative;text-align:center;-webkit-transition-duration:var(--mds-keyboard-key-transition-duration,.3s);transition-duration:var(--mds-keyboard-key-transition-duration,.3s);transition-property:box-shadow,padding,height;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));-webkit-user-select:none;user-select:none}:host(:active) .physical-key,:host([pressed]:not([pressed=false])) .physical-key{--mds-keyboard-key-illumination-dark:0 calc(var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem) * 50)) * -1) 0 0 rgb(0 0 0/var(--mds-keyboard-key-illumination-dark-opacity,.075)) inset;-webkit-box-shadow:var(--mds-keyboard-key-illumination-light),var(--mds-keyboard-key-illumination-dark),var(--mds-keyboard-key-illumination-shadow);box-shadow:var(--mds-keyboard-key-illumination-light),var(--mds-keyboard-key-illumination-dark),var(--mds-keyboard-key-illumination-shadow);height:var(--key-size-pressed);padding:calc(var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem) * 50)) + var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100))) var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100)) calc(var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem) * 50)) + var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100))) var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100))}:host([code=space]) .physical-key{min-width:calc(var(--key-size-default)*2)}mds-badge{background-color:#0000;color:currentColor;margin-left:calc(var(--spacing,.0025rem)*50);padding:0;white-space:nowrap}.shortcut-icon{fill:currentColor}.shortcut-text{color:currentColor;text-transform:capitalize;white-space:nowrap}`;
+const mdsKeyboardKeyCss = () => `@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-keyboard-key-illumination-dark-size:calc(var(--spacing,.0025rem)*150);--mds-keyboard-key-illumination-light-size:calc(var(--spacing,.0025rem)*50);--mds-keyboard-key-padding:calc(var(--spacing,.0025rem)*100);--mds-keyboard-key-transition-duration:.3s}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-keyboard-key-transition-duration{syntax:"<time>";inherits:false;initial-value:.3s}:host{--mds-keyboard-key-illumination-dark-size:calc(var(--spacing,.0025rem)*150);--mds-keyboard-key-illumination-light-size:calc(var(--spacing,.0025rem)*50);--mds-keyboard-key-illumination-dark:0 calc(var(--mds-keyboard-key-illumination-dark-size,calc(var(--spacing,.0025rem) * 150)) * -1) 0 0 rgb(0 0 0/var(--mds-keyboard-key-illumination-dark-opacity,.05)) inset;--mds-keyboard-key-illumination-light:0 var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem)*50)) 0 0 rgb(255 255 255/var(--mds-keyboard-key-illumination-light-opacity,.5)) inset;--mds-keyboard-key-padding:calc(var(--spacing,.0025rem)*100);--mds-keyboard-key-transition-duration:.3s;--icon-size:calc(var(--spacing,.0025rem)*600);--key-size-default:calc(var(--icon-size) + calc(var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100)) * 2) + var(--mds-keyboard-key-illumination-dark-size,calc(var(--spacing,.0025rem) * 150)) + var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem) * 50)));--key-size-pressed:calc(var(--icon-size) + calc(var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100)) * 2) + calc(var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem) * 50)) * 2));corner-shape:var(--magma-corner-shape,round);align-items:flex-end;display:inline-flex;min-height:var(--key-size-default);min-width:var(--key-size-default)}.physical-key{background-color:var(--mds-keyboard-key-background,rgb(var(--tone-bisque-08,121 103 97)));border-radius:var(--radius-lg,16px);-webkit-box-shadow:var(--mds-keyboard-key-illumination-light),var(--mds-keyboard-key-illumination-dark),var(--mds-keyboard-key-illumination-shadow);box-shadow:var(--mds-keyboard-key-illumination-light),var(--mds-keyboard-key-illumination-dark),var(--mds-keyboard-key-illumination-shadow);box-sizing:border-box;corner-shape:inherit;align-items:baseline;display:inline-flex;flex-grow:1;flex-shrink:0;height:var(--key-size-default);justify-content:center;min-width:calc(var(--spacing,.0025rem)*1000);padding:calc(var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem) * 50)) + var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100))) var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100)) calc(var(--mds-keyboard-key-illumination-dark-size,calc(var(--spacing,.0025rem) * 150)) + var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100))) var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100));position:relative;text-align:center;-webkit-transition-duration:var(--mds-keyboard-key-transition-duration,.3s);transition-duration:var(--mds-keyboard-key-transition-duration,.3s);transition-property:box-shadow,padding,height;-webkit-transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));transition-timing-function:var(--ease-out-expo,cubic-bezier(.19,1,.22,1));-webkit-user-select:none;user-select:none}:host(:active) .physical-key,:host([pressed]:not([pressed=false])) .physical-key{--mds-keyboard-key-illumination-dark:0 calc(var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem) * 50)) * -1) 0 0 rgb(0 0 0/var(--mds-keyboard-key-illumination-dark-opacity,.075)) inset;-webkit-box-shadow:var(--mds-keyboard-key-illumination-light),var(--mds-keyboard-key-illumination-dark),var(--mds-keyboard-key-illumination-shadow);box-shadow:var(--mds-keyboard-key-illumination-light),var(--mds-keyboard-key-illumination-dark),var(--mds-keyboard-key-illumination-shadow);height:var(--key-size-pressed);padding:calc(var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem) * 50)) + var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100))) var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100)) calc(var(--mds-keyboard-key-illumination-light-size,calc(var(--spacing,.0025rem) * 50)) + var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100))) var(--mds-keyboard-key-padding,calc(var(--spacing,.0025rem) * 100))}:host([code=space]) .physical-key{min-width:calc(var(--key-size-default)*2)}mds-badge{background-color:#0000;color:currentColor;margin-left:calc(var(--spacing,.0025rem)*50);padding:0;white-space:nowrap}.shortcut-icon{fill:currentColor}.shortcut-text{color:currentColor;text-transform:capitalize;white-space:nowrap}`;
 
 const MdsKeyboardKey = class {
     constructor(hostRef) {
@@ -271,7 +271,7 @@ const MdsKeyboardKey = class {
         });
         this.keyboardKeys = keyboardKeysData;
         this.getTitle = () => {
-            if (this.name) {
+            if (this.name !== undefined) {
                 return this.t.get(this.keyboardKeys[this.name.toLowerCase()].description, {
                     character: this.keyboardKeys[this.name.toLowerCase()].alias,
                     keyboardPosition: this.keyboardKeys[this.name.toLowerCase()].keyboardPosition,
@@ -280,6 +280,9 @@ const MdsKeyboardKey = class {
             return undefined;
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
@@ -288,7 +291,7 @@ const MdsKeyboardKey = class {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '90c476d6fb6883fd81c874fa7fdac6b909314caf', title: this.getTitle() }, h("div", { key: 'ef49ed137c5537e259ae6c27484d8e752fe5d0b9', class: "physical-key" }, this.name && icons.has(this.name) ? (h("mds-icon", { name: (_a = icons.get(this.name)) !== null && _a !== void 0 ? _a : miBaselineBrokenImage, class: "shortcut-icon" })) : (h("mds-text", { class: "shortcut-text", typography: "detail" }, this.name && h("b", null, this.keyboardKeys[this.name].alias))), this.name && ((_b = this.keyboardKeys[this.name]) === null || _b === void 0 ? void 0 : _b.keyboardPosition) && (h("mds-text", { key: '926c22376dbb6157f51fe938647681f3aa2881ed', typography: "label" }, ((_c = this.keyboardKeys[this.name].keyboardPosition) === null || _c === void 0 ? void 0 : _c.left) && 'l', ((_d = this.keyboardKeys[this.name].keyboardPosition) === null || _d === void 0 ? void 0 : _d.right) && 'r')))));
+        return (h(Host, { key: 'cb83531c55004919cc5c55d48053369d7d90c659', title: this.getTitle() }, h("div", { key: 'e096caf23accb54d1364d9c78bc6896d02fac267', class: "physical-key" }, this.name && icons.has(this.name) ? (h("mds-icon", { name: (_a = icons.get(this.name)) !== null && _a !== void 0 ? _a : miBaselineBrokenImage, class: "shortcut-icon" })) : (h("mds-text", { class: "shortcut-text", typography: "detail" }, this.name && h("b", null, this.keyboardKeys[this.name].alias))), this.name && ((_b = this.keyboardKeys[this.name]) === null || _b === void 0 ? void 0 : _b.keyboardPosition) && (h("mds-text", { key: 'cf5210c595b02e51e32722d9ef7ed53d21a44045', typography: "label" }, ((_c = this.keyboardKeys[this.name].keyboardPosition) === null || _c === void 0 ? void 0 : _c.left) && 'l', ((_d = this.keyboardKeys[this.name].keyboardPosition) === null || _d === void 0 ? void 0 : _d.right) && 'r')))));
     }
     get host() { return getElement(this); }
 };

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

@@ -2,6 +2,7 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-CA
 import { m as miBaselineDone } from './done-CvUz9jjh.js';
 import { m as miBaselineClose } from './close-J-ikDhyq.js';
 import { L as Locale } from './locale-a4oAcjYG.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 import { k as keyboardKeysData } from './keys-C4ckbXOl.js';
 
 var miBaselineKeyboard = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z"/></svg>`;
@@ -42,7 +43,7 @@ var localeIt = {
 	wrongKeysCombination: wrongKeysCombination
 };
 
-const mdsKeyboardCss = () => `@layer reset,vendor,theme,base,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-keyboard-background-default:rgb(var(--tone-porcelain-08,89 107 134));--mds-keyboard-background-fail:rgb(var(--status-error-09,135 0 14));--mds-keyboard-background-pass:rgb(var(--status-success-09,0 82 9));--mds-keyboard-background:rgb(var(--tone-porcelain-08,89 107 134));--mds-keyboard-color:rgb(var(--tone-neutral-04,218 218 218));--mds-keyboard-fill-fail:rgb(var(--status-error-06,239 108 105));--mds-keyboard-fill-pass:rgb(var(--status-success-06,0 171 97));--mds-keyboard-illumination-dark-opacity:.05;--mds-keyboard-illumination-dark-size:calc(var(--spacing,.0025rem)*150);--mds-keyboard-illumination-light-opacity:.075;--mds-keyboard-illumination-light-size:calc(var(--spacing,.0025rem)*25);--mds-keyboard-key-background:rgb(var(--tone-porcelain-10,51 62 77));--mds-keyboard-key-illumination-dark-opacity:.075;--mds-keyboard-key-illumination-light-opacity:.5;--mds-keyboard-padding:calc(var(--spacing,.0025rem)*200);--mds-keyboard-spinner-duration:1s}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-text,mds-tooltip):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-keyboard-illumination-dark-opacity{syntax:"<number>";inherits:false;initial-value:.05}@property --mds-keyboard-illumination-light-opacity{syntax:"<number>";inherits:false;initial-value:.075}@property --mds-keyboard-key-illumination-dark-opacity{syntax:"<number>";inherits:false;initial-value:.075}@property --mds-keyboard-key-illumination-light-opacity{syntax:"<number>";inherits:false;initial-value:.5}@property --mds-keyboard-spinner-duration{syntax:"<time>";inherits:false;initial-value:1s}:host{--mds-keyboard-background-default:var(--mds-keyboard-background,rgb(var(--tone-porcelain-08,89 107 134)));--mds-keyboard-background-fail:rgb(var(--status-error-09,135 0 14));--mds-keyboard-background-pass:rgb(var(--status-success-09,0 82 9));--mds-keyboard-background:rgb(var(--tone-porcelain-08,89 107 134));--mds-keyboard-color:rgb(var(--tone-neutral-04,218 218 218));--mds-keyboard-fill-fail:rgb(var(--status-error-06,239 108 105));--mds-keyboard-fill-pass:rgb(var(--status-success-06,0 171 97));--mds-keyboard-illumination-dark-opacity:.05;--mds-keyboard-illumination-dark-size:calc(var(--spacing,.0025rem)*150);--mds-keyboard-illumination-dark:0 calc(var(--mds-keyboard-illumination-dark-size,calc(var(--spacing,.0025rem) * 150)) * -1) 0 0 rgb(0 0 0/var(--mds-keyboard-illumination-dark-opacity,.05)) inset;--mds-keyboard-illumination-light-opacity:.075;--mds-keyboard-illumination-light-size:calc(var(--spacing,.0025rem)*25);--mds-keyboard-illumination-light:0 var(--mds-keyboard-illumination-light-size,calc(var(--spacing,.0025rem)*25)) 0 0 rgb(255 255 255/var(--mds-keyboard-illumination-light-opacity,.075)) inset;--mds-keyboard-illumination-shadow:0 0 1px 0 #0000;--mds-keyboard-key-background:rgb(var(--tone-porcelain-10,51 62 77));--mds-keyboard-key-illumination-dark-opacity:.075;--mds-keyboard-key-illumination-light-opacity:.5;--mds-keyboard-key-illumination-shadow:var(--shadow-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-keyboard-padding:calc(var(--spacing,.0025rem)*200);--mds-keyboard-spinner-duration:1s;background-color:var(--mds-keyboard-background-default,rgb(var(--tone-porcelain-08,89 107 134)));border-radius:var(--radius-2xl,24px);-webkit-box-shadow:var(--mds-keyboard-illumination-light),var(--mds-keyboard-illumination-dark),var(--mds-keyboard-illumination-shadow);box-shadow:var(--mds-keyboard-illumination-light),var(--mds-keyboard-illumination-dark),var(--mds-keyboard-illumination-shadow);color:var(--mds-keyboard-color,rgb(var(--tone-neutral-04,218 218 218)));corner-shape:var(--magma-corner-shape,round);align-items:center;display:inline-flex;gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--mds-keyboard-illumination-light-size,calc(var(--spacing,.0025rem) * 25)) + var(--mds-keyboard-padding,calc(var(--spacing,.0025rem) * 200))) var(--mds-keyboard-padding,calc(var(--spacing,.0025rem) * 200)) calc(var(--mds-keyboard-illumination-dark-size,calc(var(--spacing,.0025rem) * 150)) + var(--mds-keyboard-padding,calc(var(--spacing,.0025rem) * 200))) var(--mds-keyboard-padding,calc(var(--spacing,.0025rem) * 200));transition-duration:.2s;transition-property:background-color;-webkit-transition-timing-function:var(--ease-out-quad,cubic-bezier(.25,.46,.45,.94));transition-timing-function:var(--ease-out-quad,cubic-bezier(.25,.46,.45,.94));-webkit-user-select:none;user-select:none}.errors{display:grid}.errors,.shortcuts{gap:calc(var(--spacing,.0025rem)*100)}.shortcuts{align-items:center;display:inline-flex;outline:0}:host(:focus-within){--mds-keyboard-background:rgb(var(--tone-porcelain-07,117 137 164))}mds-tooltip{--mds-tooltip-delay:0}.combination-checker{--mds-button-await-duration:var(--mds-keyboard-spinner-duration,1s);border-radius:100px}::slotted(mds-keyboard-key){align-self:flex-end}:host([test=pass]){--mds-keyboard-background-default:var(--mds-keyboard-background-pass,rgb(var(--status-success-09,0 82 9)))}:host([test=fail]){--mds-keyboard-background-default:var(--mds-keyboard-background-fail,rgb(var(--status-error-09,135 0 14)))}:host([test=pass]) .combination-checker{background-color:var(--mds-keyboard-background-pass,rgb(var(--status-success-09,0 82 9)));fill:var(--mds-keyboard-fill-pass,rgb(var(--status-success-06,0 171 97)))}:host([test=fail]) .combination-checker{background-color:var(--mds-keyboard-background-fail,rgb(var(--status-error-09,135 0 14)));fill:var(--mds-keyboard-fill-fail,rgb(var(--status-error-06,239 108 105)))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-keyboard-color:rgb(var(--tone-porcelain-01,255 255 255));--mds-keyboard-background:rgb(var(--tone-porcelain-07,117 137 164));--mds-keyboard-illumination-dark-opacity:.5;--mds-keyboard-illumination-light-opacity:.15;--mds-keyboard-illumination-shadow:0 0 3px 0 #ffffff80;--mds-keyboard-key-background:rgb(var(--tone-porcelain-06,144 159 181));--mds-keyboard-key-illumination-dark-opacity:.5;--mds-keyboard-key-illumination-light-opacity:.15;--mds-keyboard-key-illumination-shadow:0 0 1px 0 #ffffff80}@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-keyboard-color:rgb(var(--tone-porcelain-01,255 255 255));--mds-keyboard-background:rgb(var(--tone-porcelain-07,117 137 164));--mds-keyboard-illumination-dark-opacity:.5;--mds-keyboard-illumination-light-opacity:.15;--mds-keyboard-illumination-shadow:0 0 3px 0 #ffffff80;--mds-keyboard-key-background:rgb(var(--tone-porcelain-06,144 159 181));--mds-keyboard-key-illumination-dark-opacity:.5;--mds-keyboard-key-illumination-light-opacity:.15;--mds-keyboard-key-illumination-shadow:0 0 1px 0 #ffffff80}}`;
+const mdsKeyboardCss = () => `@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-keyboard-background-default:rgb(var(--tone-porcelain-08,89 107 134));--mds-keyboard-background-fail:rgb(var(--status-error-09,135 0 14));--mds-keyboard-background-pass:rgb(var(--status-success-09,0 82 9));--mds-keyboard-background:rgb(var(--tone-porcelain-08,89 107 134));--mds-keyboard-color:rgb(var(--tone-neutral-04,218 218 218));--mds-keyboard-fill-fail:rgb(var(--status-error-06,239 108 105));--mds-keyboard-fill-pass:rgb(var(--status-success-06,0 171 97));--mds-keyboard-illumination-dark-opacity:.05;--mds-keyboard-illumination-dark-size:calc(var(--spacing,.0025rem)*150);--mds-keyboard-illumination-light-opacity:.075;--mds-keyboard-illumination-light-size:calc(var(--spacing,.0025rem)*25);--mds-keyboard-key-background:rgb(var(--tone-porcelain-10,51 62 77));--mds-keyboard-key-illumination-dark-opacity:.075;--mds-keyboard-key-illumination-light-opacity:.5;--mds-keyboard-padding:calc(var(--spacing,.0025rem)*200);--mds-keyboard-spinner-duration:1s}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,mds-text,mds-tooltip):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-keyboard-illumination-dark-opacity{syntax:"<number>";inherits:false;initial-value:.05}@property --mds-keyboard-illumination-light-opacity{syntax:"<number>";inherits:false;initial-value:.075}@property --mds-keyboard-key-illumination-dark-opacity{syntax:"<number>";inherits:false;initial-value:.075}@property --mds-keyboard-key-illumination-light-opacity{syntax:"<number>";inherits:false;initial-value:.5}@property --mds-keyboard-spinner-duration{syntax:"<time>";inherits:false;initial-value:1s}:host{--mds-keyboard-background-default:var(--mds-keyboard-background,rgb(var(--tone-porcelain-08,89 107 134)));--mds-keyboard-background-fail:rgb(var(--status-error-09,135 0 14));--mds-keyboard-background-pass:rgb(var(--status-success-09,0 82 9));--mds-keyboard-background:rgb(var(--tone-porcelain-08,89 107 134));--mds-keyboard-color:rgb(var(--tone-neutral-04,218 218 218));--mds-keyboard-fill-fail:rgb(var(--status-error-06,239 108 105));--mds-keyboard-fill-pass:rgb(var(--status-success-06,0 171 97));--mds-keyboard-illumination-dark-opacity:.05;--mds-keyboard-illumination-dark-size:calc(var(--spacing,.0025rem)*150);--mds-keyboard-illumination-dark:0 calc(var(--mds-keyboard-illumination-dark-size,calc(var(--spacing,.0025rem) * 150)) * -1) 0 0 rgb(0 0 0/var(--mds-keyboard-illumination-dark-opacity,.05)) inset;--mds-keyboard-illumination-light-opacity:.075;--mds-keyboard-illumination-light-size:calc(var(--spacing,.0025rem)*25);--mds-keyboard-illumination-light:0 var(--mds-keyboard-illumination-light-size,calc(var(--spacing,.0025rem)*25)) 0 0 rgb(255 255 255/var(--mds-keyboard-illumination-light-opacity,.075)) inset;--mds-keyboard-illumination-shadow:0 0 1px 0 #0000;--mds-keyboard-key-background:rgb(var(--tone-porcelain-10,51 62 77));--mds-keyboard-key-illumination-dark-opacity:.075;--mds-keyboard-key-illumination-light-opacity:.5;--mds-keyboard-key-illumination-shadow:var(--shadow-sharp,0 0 1px 1px #0000000f,0 1px 3px 0 #0000001a);--mds-keyboard-padding:calc(var(--spacing,.0025rem)*200);--mds-keyboard-spinner-duration:1s;background-color:var(--mds-keyboard-background-default,rgb(var(--tone-porcelain-08,89 107 134)));border-radius:var(--radius-2xl,24px);-webkit-box-shadow:var(--mds-keyboard-illumination-light),var(--mds-keyboard-illumination-dark),var(--mds-keyboard-illumination-shadow);box-shadow:var(--mds-keyboard-illumination-light),var(--mds-keyboard-illumination-dark),var(--mds-keyboard-illumination-shadow);color:var(--mds-keyboard-color,rgb(var(--tone-neutral-04,218 218 218)));corner-shape:var(--magma-corner-shape,round);align-items:center;display:inline-flex;gap:calc(var(--spacing,.0025rem)*200);padding:calc(var(--mds-keyboard-illumination-light-size,calc(var(--spacing,.0025rem) * 25)) + var(--mds-keyboard-padding,calc(var(--spacing,.0025rem) * 200))) var(--mds-keyboard-padding,calc(var(--spacing,.0025rem) * 200)) calc(var(--mds-keyboard-illumination-dark-size,calc(var(--spacing,.0025rem) * 150)) + var(--mds-keyboard-padding,calc(var(--spacing,.0025rem) * 200))) var(--mds-keyboard-padding,calc(var(--spacing,.0025rem) * 200));transition-duration:.2s;transition-property:background-color;-webkit-transition-timing-function:var(--ease-out-quad,cubic-bezier(.25,.46,.45,.94));transition-timing-function:var(--ease-out-quad,cubic-bezier(.25,.46,.45,.94));-webkit-user-select:none;user-select:none}.errors{display:grid}.errors,.shortcuts{gap:calc(var(--spacing,.0025rem)*100)}.shortcuts{align-items:center;display:inline-flex;outline:0}:host(:focus-within){--mds-keyboard-background:rgb(var(--tone-porcelain-07,117 137 164))}mds-tooltip{--mds-tooltip-delay:0}.combination-checker{--mds-button-await-duration:var(--mds-keyboard-spinner-duration,1s);border-radius:100px}::slotted(mds-keyboard-key){align-self:flex-end}:host([test=pass]){--mds-keyboard-background-default:var(--mds-keyboard-background-pass,rgb(var(--status-success-09,0 82 9)))}:host([test=fail]){--mds-keyboard-background-default:var(--mds-keyboard-background-fail,rgb(var(--status-error-09,135 0 14)))}:host([test=pass]) .combination-checker{background-color:var(--mds-keyboard-background-pass,rgb(var(--status-success-09,0 82 9)));fill:var(--mds-keyboard-fill-pass,rgb(var(--status-success-06,0 171 97)))}:host([test=fail]) .combination-checker{background-color:var(--mds-keyboard-background-fail,rgb(var(--status-error-09,135 0 14)));fill:var(--mds-keyboard-fill-fail,rgb(var(--status-error-06,239 108 105)))}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-keyboard-color:rgb(var(--tone-porcelain-01,255 255 255));--mds-keyboard-background:rgb(var(--tone-porcelain-07,117 137 164));--mds-keyboard-illumination-dark-opacity:.5;--mds-keyboard-illumination-light-opacity:.15;--mds-keyboard-illumination-shadow:0 0 3px 0 #ffffff80;--mds-keyboard-key-background:rgb(var(--tone-porcelain-06,144 159 181));--mds-keyboard-key-illumination-dark-opacity:.5;--mds-keyboard-key-illumination-light-opacity:.15;--mds-keyboard-key-illumination-shadow:0 0 1px 0 #ffffff80}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-keyboard-color:rgb(var(--tone-porcelain-01,255 255 255));--mds-keyboard-background:rgb(var(--tone-porcelain-07,117 137 164));--mds-keyboard-illumination-dark-opacity:.5;--mds-keyboard-illumination-light-opacity:.15;--mds-keyboard-illumination-shadow:0 0 3px 0 #ffffff80;--mds-keyboard-key-background:rgb(var(--tone-porcelain-06,144 159 181));--mds-keyboard-key-illumination-dark-opacity:.5;--mds-keyboard-key-illumination-light-opacity:.15;--mds-keyboard-key-illumination-shadow:0 0 1px 0 #ffffff80}}`;
 
 const MdsKeyboard = class {
     constructor(hostRef) {
@@ -69,9 +70,6 @@ const MdsKeyboard = class {
             this.shortcutsEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.shortcuts');
             this.buttonTrigger = (_b = this.host.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.combination-checker');
             this.buttonTrigger.removeAttribute('title');
-            this.shortcutsEl.addEventListener('blur', this.stopKeyboardShortcutTest.bind(this));
-            this.shortcutsEl.addEventListener('keydown', this.addKeyboardShortcut.bind(this));
-            this.shortcutsEl.addEventListener('keyup', this.checkKeyboardShortcut.bind(this));
         };
         this.separateKeys = () => {
             this.filteredNodes.forEach((node, index) => {
@@ -85,7 +83,7 @@ const MdsKeyboard = class {
         };
         this.updateElements = () => {
             this.filteredNodes.forEach((node) => {
-                if (node.name) {
+                if (node.name !== undefined) {
                     this.keyEls.push(node);
                     this.keyCombination.add(this.keyCodes(node.name.toLowerCase()).toString());
                 }
@@ -134,7 +132,7 @@ const MdsKeyboard = class {
             return isValid;
         };
         this.addKeyboardShortcut = (event) => {
-            if (!document) {
+            if (typeof document === 'undefined') {
                 return;
             }
             event.stopPropagation();
@@ -156,14 +154,19 @@ const MdsKeyboard = class {
             this.buttonTrigger.removeAttribute('tabindex');
             this.shortcutsEl.setAttribute('tabindex', '0');
             this.shortcutsEl.focus();
+            // Attach for this run; stopKeyboardShortcutTest detaches. The handlers are
+            // stable arrow refs, so re-adding is idempotent and removal matches.
+            this.shortcutsEl.addEventListener('blur', this.stopKeyboardShortcutTest);
+            this.shortcutsEl.addEventListener('keydown', this.addKeyboardShortcut);
+            this.shortcutsEl.addEventListener('keyup', this.checkKeyboardShortcut);
         };
         this.stopKeyboardShortcutTest = () => {
             this.buttonTrigger.await = false;
             this.buttonTrigger.setAttribute('tabindex', '0');
             this.shortcutsEl.removeAttribute('tabindex');
-            this.shortcutsEl.removeEventListener('blur', this.stopKeyboardShortcutTest.bind(this));
-            this.shortcutsEl.removeEventListener('keydown', this.addKeyboardShortcut.bind(this));
-            this.shortcutsEl.removeEventListener('keyup', this.checkKeyboardShortcut.bind(this));
+            this.shortcutsEl.removeEventListener('blur', this.stopKeyboardShortcutTest);
+            this.shortcutsEl.removeEventListener('keydown', this.addKeyboardShortcut);
+            this.shortcutsEl.removeEventListener('keyup', this.checkKeyboardShortcut);
         };
         this.getButtonIcon = () => {
             if (this.test === 'pass') {
@@ -175,9 +178,31 @@ const MdsKeyboard = class {
             return miBaselineKeyboard;
         };
     }
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    connectedCallback() {
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.unsubscribePrefTheme) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefThemeScheme) === null || _b === void 0 ? void 0 : _b.call(this);
+        // Tear down the keyboard test only if it was initialized; otherwise
+        // buttonTrigger/shortcutsEl are undefined and this would throw. (This used
+        // to live in a misspelled `discottectedCallback`, so it never ran.)
+        if (this.testInit) {
+            this.stopKeyboardShortcutTest();
+        }
+    }
     componentWillLoad() {
         this.t.lang(this.host);
     }
@@ -195,11 +220,8 @@ const MdsKeyboard = class {
             this.initKeyboardTest();
         }
     }
-    discottectedCallback() {
-        this.stopKeyboardShortcutTest();
-    }
     render() {
-        return (h(Host, { key: 'ea9c57b89ba7f46adea2f7d8b3e08788387e01d8' }, h("div", { key: 'adfe0051525e8cb26c34cc17e04135485145beaa', class: "shortcuts" }, h("slot", { key: 'def60aa7b5ca01d48e55f117f806e187f6ff9a81' })), this.try && (h("mds-button", { key: '369821c091dcad208a622210e050c17e6e862ddb', icon: this.getButtonIcon(), "aria-title": this.t.get('testKeyCombination'), class: "combination-checker", variant: "dark", tone: "text", onClick: this.startKeyboardShortcutTest.bind(this) })), this.try && (h("mds-tooltip", { key: '25b0a9a678d6cbe71a7829fc6ba7cbebab0ece89', target: ".combination-checker" }, this.testPassed === undefined && this.t.get('testKeyCombination'), this.testPassed === true && this.t.get('testPassed'), this.testPassed === false && (h("div", { key: 'cb821065194776b5f00c3eaba7d5cb1a806bfa48', class: "errors" }, [...this.errors].map((error) => (h("mds-text", { typography: "tip" }, this.t.get(error))))))))));
+        return (h(Host, { key: '04b53f45038a5462ecd3a5389bd5f39ef461d43b', "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, h("div", { key: '0105a25f75d267bb2497307b0a0983cdde8ce8ad', class: "shortcuts" }, h("slot", { key: '25e462272a3dd4bc5fcb6915957614ed8921ad09' })), this.try && (h("mds-button", { key: '376a9691e6ae3dada84a653e00d6aeaccdbe65ec', icon: this.getButtonIcon(), "aria-title": this.t.get('testKeyCombination'), class: "combination-checker", variant: "dark", tone: "text", onClick: this.startKeyboardShortcutTest })), this.try && (h("mds-tooltip", { key: '0e8201759ef326e1ab52b26ec6b71efd73400637', target: ".combination-checker" }, this.testPassed === undefined && this.t.get('testKeyCombination'), this.testPassed === true && this.t.get('testPassed'), this.testPassed === false && (h("div", { key: 'ec7f97f898c005f8a0e0ee92ee0ae3aab21b0cd2', class: "errors" }, [...this.errors].map((error) => (h("mds-text", { typography: "tip" }, this.t.get(error))))))))));
     }
     get host() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-CAd5312P.js';
+import { s as subscribePreference } from './preference-fMwnXhio.js';
 
-const mdsKpiItemCss = () => `@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{--tw-duration:initial;--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-kpi-item-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));--mds-kpi-item-text-animation-placeholder-char:var(--mds-kpi-text-animation-placeholder-char," ");--mds-kpi-item-text-animation-speed:var(--mds-kpi-text-animation-speed,.15);gap:calc(var(--spacing,.0025rem)*0);--tw-duration:.3s;--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));aspect-ratio:1;background-color:rgb(var(--variant-primary-10,0 49 142));border-radius:var(--radius-4xl,48px);transition-duration:.3s;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));corner-shape:var(--magma-corner-shape,round);display:flex;flex-direction:column;overflow:hidden;padding:calc(var(--spacing,.0025rem)*400);transition-property:background-color,box-shadow}.icon-container{align-items:center;display:flex;flex-grow:1;justify-content:center;transition-property:background-color;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}.icon,.icon-container{--tw-duration:.3s;--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));transition-duration:.3s}.icon{fill:var(--mds-kpi-item-icon-color);transition-property:fill;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));width:40%}.info{background-color:var(--mds-kpi-item-info-background);border-radius:var(--radius-xl,20px);-webkit-box-shadow:var(--shadow-sm,0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a);box-shadow:var(--shadow-sm,0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a);gap:calc(var(--spacing,.0025rem)*0);transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));corner-shape:inherit;display:grid;flex-shrink:0;justify-content:center;padding:calc(var(--spacing,.0025rem)*400);text-align:center;transition-property:background-color,border-radius,box-shadow}.description,.info,.label{--tw-duration:.3s;--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));transition-duration:.3s}.description,.label{transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));--mds-text-animation-speed:var(--mds-kpi-item-text-animation-speed);--mds-text-animation-placeholder-char:var(--mds-kpi-item-text-animation-placeholder-char);transition-property:fill}:host-context(:root.pref-animation-reduce){transition-duration:0s}:is(:host-context(:root.pref-animation-reduce) .description,:host-context(:root.pref-animation-reduce) .icon,:host-context(:root.pref-animation-reduce) .icon-container,:host-context(:root.pref-animation-reduce) .info,:host-context(:root.pref-animation-reduce) .label){transition-duration:0s}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){--mds-kpi-item-info-background:rgb(var(--tone-neutral-09,76 76 76));background-color:rgb(var(--variant-primary-09,0 58 168));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host-context(:root.pref-contrast-more){--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a),var(--shadow-outline);box-shadow:var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a),var(--shadow-outline);color:rgb(var(--tone-neutral-01,255 255 255))}:host-context(:root.pref-contrast-more) .info{-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host-context(:root.pref-contrast-more.pref-theme-dark){--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}@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]))) .description,: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]))) .icon-container,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .info,:is(:host-context(:root.pref-animation-system),:host-context(:root:not([data-magma-pref]))) .label{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-kpi-item-info-background:rgb(var(--tone-neutral-09,76 76 76));background-color:rgb(var(--variant-primary-09,0 58 168));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host-context(:root.pref-contrast-more.pref-theme-system){--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}:host-context(:root.pref-contrast-system.pref-theme-system){--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a),var(--shadow-outline);box-shadow:var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a),var(--shadow-outline);color:rgb(var(--tone-neutral-01,255 255 255))}:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))) .info{-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host-context(:root.pref-contrast-system.pref-theme-dark){--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}`;
+const mdsKpiItemCss = () => `@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-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-icon,mds-text):not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{--mds-kpi-item-icon-color:rgb(var(--variant-primary-04,184 208 255));--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));--mds-kpi-item-text-animation-placeholder-char:var(--mds-kpi-text-animation-placeholder-char," ");--mds-kpi-item-text-animation-speed:var(--mds-kpi-text-animation-speed,.15);--mds-kpi-item-transition-duration:var(--duration-300,.3s);--private-kpi-item-transition-duration:var(--mds-kpi-item-transition-duration);--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1));aspect-ratio:1;background-color:rgb(var(--variant-primary-10,0 49 142));border-radius:var(--radius-4xl,48px);transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));corner-shape:var(--magma-corner-shape,round);display:flex;flex-direction:column;gap:0;overflow:hidden;padding:calc(var(--spacing,.0025rem)*400);-webkit-transition-duration:var(--private-kpi-item-transition-duration);transition-duration:var(--private-kpi-item-transition-duration);transition-property:background-color,box-shadow}.icon-container{align-items:center;display:flex;flex-grow:1;justify-content:center;-webkit-transition-duration:var(--private-kpi-item-transition-duration);transition-duration:var(--private-kpi-item-transition-duration);transition-property:background-color;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1))}.icon,.icon-container{--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1))}.icon{fill:var(--mds-kpi-item-icon-color);-webkit-transition-duration:var(--private-kpi-item-transition-duration);transition-duration:var(--private-kpi-item-transition-duration);transition-property:fill;transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));width:40%}.info{background-color:var(--mds-kpi-item-info-background);border-radius:var(--radius-xl,20px);-webkit-box-shadow:var(--shadow-sm,0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a);box-shadow:var(--shadow-sm,0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a);transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));corner-shape:inherit;display:grid;flex-shrink:0;gap:0;justify-content:center;padding:calc(var(--spacing,.0025rem)*400);text-align:center;-webkit-transition-duration:var(--private-kpi-item-transition-duration);transition-duration:var(--private-kpi-item-transition-duration);transition-property:background-color,border-radius,box-shadow}.description,.info,.label{--tw-ease:var(--ease-out,cubic-bezier(0,0,.2,1))}.description,.label{transition-timing-function:var(--ease-out,cubic-bezier(0,0,.2,1));--mds-text-animation-speed:var(--mds-kpi-item-text-animation-speed);--mds-text-animation-placeholder-char:var(--mds-kpi-item-text-animation-placeholder-char);-webkit-transition-duration:var(--private-kpi-item-transition-duration);transition-duration:var(--private-kpi-item-transition-duration);transition-property:fill}:host([pref-animation=reduce]){--private-kpi-item-transition-duration:0s}:host([pref-theme=dark]:not([pref-theme-scheme=light])){--mds-kpi-item-info-background:rgb(var(--tone-neutral-09,76 76 76));background-color:rgb(var(--variant-primary-09,0 58 168));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host([pref-contrast=more]){--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a),var(--shadow-outline);box-shadow:var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a),var(--shadow-outline);color:rgb(var(--tone-neutral-01,255 255 255))}:host([pref-contrast=more]) .info{-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host([pref-contrast=more][pref-theme=dark]){--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-reduced-motion:reduce){:host(:not([pref-animation])),:host([pref-animation=system]){--private-kpi-item-transition-duration:0s}}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){--mds-kpi-item-info-background:rgb(var(--tone-neutral-09,76 76 76));background-color:rgb(var(--variant-primary-09,0 58 168));-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host([pref-contrast=more][pref-theme=system]){--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}:host([pref-contrast=system][pref-theme=system]){--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a),var(--shadow-outline);box-shadow:var(--shadow-lg,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a),var(--shadow-outline);color:rgb(var(--tone-neutral-01,255 255 255))}:is(:host([pref-contrast=system]),:host(:not([pref-contrast]))) .info{-webkit-box-shadow:var(--shadow-outline);box-shadow:var(--shadow-outline)}:host([pref-contrast=system][pref-theme=dark]){--mds-kpi-item-info-background:rgb(var(--tone-neutral,0 0 0));-webkit-box-shadow:var(--shadow-outline-50);box-shadow:var(--shadow-outline-50)}}`;
 
 const MdsKpiItem = class {
     constructor(hostRef) {
@@ -21,13 +22,34 @@ const MdsKpiItem = class {
             this.observer.observe(this.hostElement);
         };
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     componentWillLoad() {
         if (this.threshold !== 0) {
             this.setObserver();
         }
     }
     render() {
-        return (h(Host, { key: '7151944cb8019b988fdd9577c0c6f9fd4ab12c6e', "aria-label": `${this.label}: ${this.description}`, role: "listitem" }, this.icon && (h("div", { key: 'abf637a070c46e0c4916e5ba13452470571377df', class: "icon-container", part: "icon-container" }, h("mds-icon", { key: '5a079dd7dd396c15f9a2d0f94f7568e6562e28fd', class: "icon", name: this.icon, part: "icon" }))), h("div", { key: '7fb2bfb3888992ea0b693651522696f8b2cdc3dd', class: "info", part: "content", "aria-hidden": "true" }, this.label && this.threshold !== 0 && (h("mds-text", { key: '00b38a3c634291a7ca6f0bda28f159dd4503fb84', class: "value", typography: "h2", text: this.isIntersecting ? this.label : '', animation: "yugop" })), this.label && this.threshold === 0 && (h("mds-text", { key: '1f4a28be56905ef80acfe89480cc4f3058d7a988', class: "value", typography: "h2" }, this.label)), this.description && this.threshold !== 0 && (h("mds-text", { key: 'f77d680512cc3ae17ac71a56895070a399932193', class: "description", typography: "label", text: this.isIntersecting ? this.description : '', animation: "yugop" })), this.description && this.threshold === 0 && (h("mds-text", { key: '54dbc082786a615c743fa79c3e0554bf2df54e48', class: "description", typography: "label" }, this.description)))));
+        return (h(Host, { key: 'dda8167c05496f388673c36096dfc958af05ba29', "aria-label": `${this.label}: ${this.description}`, role: "listitem", "pref-animation": this.prefAnimation, "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, this.icon && (h("div", { key: '07f186b9a747268f2ec805398a57c2163a238962', class: "icon-container", part: "icon-container" }, h("mds-icon", { key: '0312c7bb07c33d14c7f505a99a648bc1b6ebb613', class: "icon", name: this.icon, part: "icon" }))), h("div", { key: '9b40d9130105ecca08d81f8f41006cc1cdc0a379', class: "info", part: "content", "aria-hidden": "true" }, this.label && this.threshold !== 0 && (h("mds-text", { key: '3f8fecb2e84d6a348948c80cbbf66fc5f6c83d2d', class: "value", typography: "h2", text: this.isIntersecting ? this.label : '', animation: "yugop" })), this.label && this.threshold === 0 && (h("mds-text", { key: '8d1d07deb1adee9d393a1d2bc40466f7e2181827', class: "value", typography: "h2" }, this.label)), this.description && this.threshold !== 0 && (h("mds-text", { key: '7bafc80c238fa9952559e0f388e70b067eedb5ce', class: "description", typography: "label", text: this.isIntersecting ? this.description : '', animation: "yugop" })), this.description && this.threshold === 0 && (h("mds-text", { key: 'ebcb68b6556f6c67c974f6fbf44af24acd30aaea', class: "description", typography: "label" }, this.description)))));
     }
     get hostElement() { return getElement(this); }
 };

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

@@ -1,13 +1,13 @@
 import { r as registerInstance, h, H as Host } from './index-CAd5312P.js';
 
-const mdsKpiCss = () => `@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-kpi-text-animation-speed:.15;--mds-kpi-text-animation-placeholder-char:" "}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-kpi-item:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-kpi-text-animation-speed{syntax:"<number>";inherits:false;initial-value:.15}@property --mds-kpi-text-animation-placeholder-char{syntax:"<string>";inherits:false;initial-value:" "}:host{--mds-kpi-text-animation-speed:.15;--mds-kpi-text-animation-placeholder-char:" ";display:grid;gap:calc(var(--spacing,.0025rem)*400);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}`;
+const mdsKpiCss = () => `@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-kpi-text-animation-speed:.15;--mds-kpi-text-animation-placeholder-char:" "}}}:host(:not(:is([hydrated],.hydrated))),mds-kpi-item:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}@property --mds-kpi-text-animation-speed{syntax:"<number>";inherits:false;initial-value:.15}@property --mds-kpi-text-animation-placeholder-char{syntax:"<string>";inherits:false;initial-value:" "}:host{--mds-kpi-text-animation-speed:.15;--mds-kpi-text-animation-placeholder-char:" ";display:grid;gap:calc(var(--spacing,.0025rem)*400);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}`;
 
 const MdsKpi = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: 'c245abce494cf9dba09c47a0e07b63b66c786349', role: "list" }, h("slot", { key: '5c5ecc44ae3d9e5a0b4d737c64694acba6a48660' })));
+        return (h(Host, { key: '02a890b517f0b821803bf27d527162edf2693d0b', role: "list" }, h("slot", { key: '8a8f4296650703c03528450674afc6712afb54b8' })));
     }
 };
 MdsKpi.style = mdsKpiCss();