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

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

@@ -260,7 +260,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) {

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

@@ -4,6 +4,7 @@ var index = require('./index-CNuKb6Lv.js');
 var done = require('./done-vJU_4-de.js');
 var close = require('./close-BS8N44H4.js');
 var locale = require('./locale-oGW3SvGJ.js');
+var preference = require('./preference-BdpIXWLP.js');
 var keys = require('./keys-Qy7bKCZW.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>`;
@@ -44,7 +45,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) {
@@ -71,9 +72,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) => {
@@ -158,14 +156,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') {
@@ -183,6 +186,25 @@ const MdsKeyboard = class {
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    connectedCallback() {
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.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);
     }
@@ -200,11 +222,8 @@ const MdsKeyboard = class {
             this.initKeyboardTest();
         }
     }
-    disconnectedCallback() {
-        this.stopKeyboardShortcutTest();
-    }
     render() {
-        return (index.h(index.Host, { key: 'e69835d30adc7607a0a5e53177cb56b48cdbc009' }, index.h("div", { key: '8b7534e87d1ef433cdd38f38e79fbe35be43815e', class: "shortcuts" }, index.h("slot", { key: 'a4ddc3b82e4a5b76d3f7f52771574c02373864af' })), this.try && (index.h("mds-button", { key: 'dd8960111c546eff91b43f5a247fa339a68370d9', icon: this.getButtonIcon(), "aria-title": this.t.get('testKeyCombination'), class: "combination-checker", variant: "dark", tone: "text", onClick: this.startKeyboardShortcutTest })), this.try && (index.h("mds-tooltip", { key: 'c064d6c315572085f3790792fd10c5645c872604', target: ".combination-checker" }, this.testPassed === undefined && this.t.get('testKeyCombination'), this.testPassed === true && this.t.get('testPassed'), this.testPassed === false && (index.h("div", { key: '523ecf23e4e53b3dbfb50a41b5b3863a0f1cd2e1', class: "errors" }, [...this.errors].map((error) => (index.h("mds-text", { typography: "tip" }, this.t.get(error))))))))));
+        return (index.h(index.Host, { key: '04b53f45038a5462ecd3a5389bd5f39ef461d43b', "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("div", { key: '0105a25f75d267bb2497307b0a0983cdde8ce8ad', class: "shortcuts" }, index.h("slot", { key: '25e462272a3dd4bc5fcb6915957614ed8921ad09' })), this.try && (index.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 && (index.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 && (index.h("div", { key: 'ec7f97f898c005f8a0e0ee92ee0ae3aab21b0cd2', class: "errors" }, [...this.errors].map((error) => (index.h("mds-text", { typography: "tip" }, this.t.get(error))))))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,8 +1,9 @@
 'use strict';
 
 var index = require('./index-CNuKb6Lv.js');
+var preference = require('./preference-BdpIXWLP.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) {
@@ -23,13 +24,34 @@ const MdsKpiItem = class {
             this.observer.observe(this.hostElement);
         };
     }
+    connectedCallback() {
+        this.unsubscribePrefAnimation = preference.subscribePreference('animation', (value) => {
+            this.prefAnimation = value;
+        });
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d;
+        (_a = this.unsubscribePrefAnimation) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefContrast) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefTheme) === null || _c === void 0 ? void 0 : _c.call(this);
+        (_d = this.unsubscribePrefThemeScheme) === null || _d === void 0 ? void 0 : _d.call(this);
+    }
     componentWillLoad() {
         if (this.threshold !== 0) {
             this.setObserver();
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2a5235504ab4d835f368fb01ce0aef672fadd13b', "aria-label": `${this.label}: ${this.description}`, role: "listitem" }, this.icon && (index.h("div", { key: '17b567f2d7781aa31cb80894e2265623eae07289', class: "icon-container", part: "icon-container" }, index.h("mds-icon", { key: 'b6fcdfcd6180afbe10a3874cf882ec23ea75ae0c', class: "icon", name: this.icon, part: "icon" }))), index.h("div", { key: '34851571ac32f518bafb089e4b6036e1219c623b', class: "info", part: "content", "aria-hidden": "true" }, this.label && this.threshold !== 0 && (index.h("mds-text", { key: '4f343527186ff5342800b650dd637bde11aa40ea', class: "value", typography: "h2", text: this.isIntersecting ? this.label : '', animation: "yugop" })), this.label && this.threshold === 0 && (index.h("mds-text", { key: 'da2fc65b8fa41543b582b9cc6bbb558e99d4bc35', class: "value", typography: "h2" }, this.label)), this.description && this.threshold !== 0 && (index.h("mds-text", { key: 'f9223f928df5a2e2d3573bc894da4b0cc35e9da4', class: "description", typography: "label", text: this.isIntersecting ? this.description : '', animation: "yugop" })), this.description && this.threshold === 0 && (index.h("mds-text", { key: 'c4f8d004079d287219b96d90eeb590e2022704c1', class: "description", typography: "label" }, this.description)))));
+        return (index.h(index.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 && (index.h("div", { key: '07f186b9a747268f2ec805398a57c2163a238962', class: "icon-container", part: "icon-container" }, index.h("mds-icon", { key: '0312c7bb07c33d14c7f505a99a648bc1b6ebb613', class: "icon", name: this.icon, part: "icon" }))), index.h("div", { key: '9b40d9130105ecca08d81f8f41006cc1cdc0a379', class: "info", part: "content", "aria-hidden": "true" }, this.label && this.threshold !== 0 && (index.h("mds-text", { key: '3f8fecb2e84d6a348948c80cbbf66fc5f6c83d2d', class: "value", typography: "h2", text: this.isIntersecting ? this.label : '', animation: "yugop" })), this.label && this.threshold === 0 && (index.h("mds-text", { key: '8d1d07deb1adee9d393a1d2bc40466f7e2181827', class: "value", typography: "h2" }, this.label)), this.description && this.threshold !== 0 && (index.h("mds-text", { key: '7bafc80c238fa9952559e0f388e70b067eedb5ce', class: "description", typography: "label", text: this.isIntersecting ? this.description : '', animation: "yugop" })), this.description && this.threshold === 0 && (index.h("mds-text", { key: 'ebcb68b6556f6c67c974f6fbf44af24acd30aaea', class: "description", typography: "label" }, this.description)))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-CNuKb6Lv.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) {

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

@@ -4,6 +4,7 @@ var index = require('./index-CNuKb6Lv.js');
 var cancel = require('./cancel-_rS5f5_p.js');
 var keyboardManager = require('./keyboard-manager-BXKT5TGW.js');
 var locale = require('./locale-oGW3SvGJ.js');
+var preference = require('./preference-BdpIXWLP.js');
 
 const remove$2 = "Αφαίρεση";
 var localeEl = {
@@ -20,7 +21,7 @@ var localeIt = {
 	remove: remove
 };
 
-const mdsLabelCss = () => `@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-label-background:rgb(var(--label-yellow-09,89 68 3));--mds-label-color:rgb(var(--label-yellow-02,253 238 190));--mds-label-icon-color:var(--mds-label-color,rgb(var(--label-yellow-02,253 238 190)));--mds-label-radius:calc(var(--spacing,.0025rem)*150);--mds-label-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-label-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));--mds-label-button-background:rgb(var(--label-yellow-08,127 97 4));--mds-label-button-background-hover:rgb(var(--label-yellow-07,158 120 5));--mds-label-button-icon-color:rgb(var(--label-yellow-03,251 224 142));--tw-ease:initial}}}@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),:is(mds-button,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-label-background:rgb(var(--label-yellow-09,89 68 3));--mds-label-color:rgb(var(--label-yellow-02,253 238 190));--mds-label-icon-color:var(--mds-label-color,rgb(var(--label-yellow-02,253 238 190)));--mds-label-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-label-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));--mds-label-button-background:rgb(var(--label-yellow-08,127 97 4));--mds-label-button-background-hover:rgb(var(--label-yellow-07,158 120 5));--mds-label-button-icon-color:rgb(var(--label-yellow-03,251 224 142));--private-bevel-size:calc(var(--spacing,.0025rem)*900);--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--mds-label-background,rgb(var(--label-yellow-09,89 68 3)));color:var(--mds-label-color,rgb(var(--label-yellow-02,253 238 190)));transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));corner-shape:round;align-items:center;border-radius:100px;display:flex;fill:var(--mds-label-icon-color,var(--mds-label-color,rgb(var(--label-yellow-02,253 238 190))));flex:1;gap:calc(var(--spacing,.0025rem)*50);max-width:min-content;min-height:calc(var(--spacing,.0025rem)*700);padding:0 calc(var(--spacing,.0025rem)*200);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:color,background-color,fill;--mds-label-background:rgb(var(--label-blue-08,42 77 247));--mds-label-button-background:rgb(var(--label-blue-09,7 40 196));--mds-label-button-background-hover:rgb(var(--label-blue-08,42 77 247));--mds-label-button-icon-color:rgb(var(--label-blue-04,196 206 253));--mds-label-color:rgb(var(--label-blue-02,234 238 254));--mds-label-icon-color:rgb(var(--label-blue-02,234 238 254));--mds-label-selection-background:rgb(var(--label-blue-06,121 143 250));--mds-label-selection-color:rgb(var(--label-blue-10,6 34 166))}@supports (corner-shape:bevel){:host{corner-left-shape:superellipse(.25);corner-right-shape:var(--magma-corner-shape,round);align-items:stretch;border-bottom-left-radius:100px;border-top-left-radius:100px;padding-left:calc(var(--private-bevel-size)/2);padding-right:0}}:host::selection{background-color:var(--mds-label-selection-background,var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3))));color:var(--mds-label-selection-color,var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190))))}:host([truncate=word]) .text{white-space:nowrap}.text{--mds-text-selection-background:var(--mds-label-selection-background,var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3))));--mds-text-selection-color:var(--mds-label-selection-color,var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190))));align-self:center;display:block;flex-grow:1}.text:last-child{padding-right:calc(var(--spacing,.0025rem)*200)}.button-close{--mds-button-background:var(--mds-label-button-background,rgb(var(--label-yellow-08,127 97 4)));--mds-button-border-opacity:0;align-self:center;fill:var(--mds-label-button-icon-color,rgb(var(--label-yellow-03,251 224 142)));flex-shrink:0}.button-close:hover{--mds-button-background:var(--mds-label-button-background-hover,rgb(var(--label-yellow-07,158 120 5)))}:host([variant=red]){--mds-label-background:rgb(var(--label-red-04,247 195 195));--mds-label-button-background:rgb(var(--label-red-04,247 195 195));--mds-label-button-background-hover:rgb(var(--label-red-05,244 167 167));--mds-label-button-icon-color:rgb(var(--label-red-10,115 15 15));--mds-label-color:rgb(var(--label-red-10,115 15 15));--mds-label-icon-color:rgb(var(--label-red-10,115 15 15));--mds-label-selection-background:rgb(var(--label-red-08,192 25 25));--mds-label-selection-color:rgb(var(--label-red-02,252 234 234))}:host([variant=red]):host([tone=weak]){--mds-label-background:rgb(var(--label-red-08,192 25 25));--mds-label-button-background:rgb(var(--label-red-09,134 17 17));--mds-label-button-background-hover:rgb(var(--label-red-08,192 25 25));--mds-label-button-icon-color:rgb(var(--label-red-04,247 195 195));--mds-label-color:rgb(var(--label-red-02,252 234 234));--mds-label-icon-color:rgb(var(--label-red-02,252 234 234));--mds-label-selection-background:rgb(var(--label-red-06,236 110 110));--mds-label-selection-color:rgb(var(--label-red-10,115 15 15))}:host([variant=amaranth]){--mds-label-background:rgb(var(--label-amaranth-04,251 192 203));--mds-label-button-background:rgb(var(--label-amaranth-04,251 192 203));--mds-label-button-background-hover:rgb(var(--label-amaranth-05,250 163 178));--mds-label-button-icon-color:rgb(var(--label-amaranth-10,114 7 25));--mds-label-color:rgb(var(--label-amaranth-10,114 7 25));--mds-label-icon-color:rgb(var(--label-amaranth-10,114 7 25));--mds-label-selection-background:rgb(var(--label-amaranth-08,193 11 42));--mds-label-selection-color:rgb(var(--label-amaranth-02,254 233 237))}:host([variant=amaranth]):host([tone=weak]){--mds-label-background:rgb(var(--label-amaranth-08,193 11 42));--mds-label-button-background:rgb(var(--label-amaranth-09,135 8 30));--mds-label-button-background-hover:rgb(var(--label-amaranth-08,193 11 42));--mds-label-button-icon-color:rgb(var(--label-amaranth-04,251 192 203));--mds-label-color:rgb(var(--label-amaranth-02,254 233 237));--mds-label-icon-color:rgb(var(--label-amaranth-02,254 233 237));--mds-label-selection-background:rgb(var(--label-amaranth-06,246 99 125));--mds-label-selection-color:rgb(var(--label-amaranth-10,114 7 25))}:host([variant=aqua]){--mds-label-background:rgb(var(--label-aqua-04,81 225 250));--mds-label-button-background:rgb(var(--label-aqua-04,81 225 250));--mds-label-button-background-hover:rgb(var(--label-aqua-05,7 203 237));--mds-label-button-icon-color:rgb(var(--label-aqua-10,2 65 76));--mds-label-color:rgb(var(--label-aqua-10,2 65 76));--mds-label-icon-color:rgb(var(--label-aqua-10,2 65 76));--mds-label-selection-background:rgb(var(--label-aqua-08,4 110 129));--mds-label-selection-color:rgb(var(--label-aqua-02,203 246 254))}:host([variant=aqua]):host([tone=weak]){--mds-label-background:rgb(var(--label-aqua-08,4 110 129));--mds-label-button-background:rgb(var(--label-aqua-09,3 77 90));--mds-label-button-background-hover:rgb(var(--label-aqua-08,4 110 129));--mds-label-button-icon-color:rgb(var(--label-aqua-04,81 225 250));--mds-label-color:rgb(var(--label-aqua-02,203 246 254));--mds-label-icon-color:rgb(var(--label-aqua-02,203 246 254));--mds-label-selection-background:rgb(var(--label-aqua-06,5 163 190));--mds-label-selection-color:rgb(var(--label-aqua-10,2 65 76))}:host([variant=blue]){--mds-label-background:rgb(var(--label-blue-04,196 206 253));--mds-label-button-background:rgb(var(--label-blue-04,196 206 253));--mds-label-button-background-hover:rgb(var(--label-blue-05,170 184 252));--mds-label-button-icon-color:rgb(var(--label-blue-10,6 34 166));--mds-label-color:rgb(var(--label-blue-10,6 34 166));--mds-label-icon-color:rgb(var(--label-blue-10,6 34 166));--mds-label-selection-background:rgb(var(--label-blue-08,42 77 247));--mds-label-selection-color:rgb(var(--label-blue-02,234 238 254))}:host([variant=blue]):host([tone=weak]){--mds-label-background:rgb(var(--label-blue-08,42 77 247));--mds-label-button-background:rgb(var(--label-blue-09,7 40 196));--mds-label-button-background-hover:rgb(var(--label-blue-08,42 77 247));--mds-label-button-icon-color:rgb(var(--label-blue-04,196 206 253));--mds-label-color:rgb(var(--label-blue-02,234 238 254));--mds-label-icon-color:rgb(var(--label-blue-02,234 238 254));--mds-label-selection-background:rgb(var(--label-blue-06,121 143 250));--mds-label-selection-color:rgb(var(--label-blue-10,6 34 166))}:host([variant=green]){--mds-label-background:rgb(var(--label-green-04,113 230 156));--mds-label-button-background:rgb(var(--label-green-04,113 230 156));--mds-label-button-background-hover:rgb(var(--label-green-05,37 213 102));--mds-label-button-icon-color:rgb(var(--label-green-10,12 68 33));--mds-label-color:rgb(var(--label-green-10,12 68 33));--mds-label-icon-color:rgb(var(--label-green-10,12 68 33));--mds-label-selection-background:rgb(var(--label-green-08,20 116 56));--mds-label-selection-color:rgb(var(--label-green-02,211 247 224))}:host([variant=green]):host([tone=weak]){--mds-label-background:rgb(var(--label-green-08,20 116 56));--mds-label-button-background:rgb(var(--label-green-09,14 81 39));--mds-label-button-background-hover:rgb(var(--label-green-08,20 116 56));--mds-label-button-icon-color:rgb(var(--label-green-04,113 230 156));--mds-label-color:rgb(var(--label-green-02,211 247 224));--mds-label-icon-color:rgb(var(--label-green-02,211 247 224));--mds-label-selection-background:rgb(var(--label-green-06,30 171 82));--mds-label-selection-color:rgb(var(--label-green-10,12 68 33))}:host([variant=lime]){--mds-label-background:rgb(var(--label-lime-04,148 229 25));--mds-label-button-background:rgb(var(--label-lime-04,148 229 25));--mds-label-button-background-hover:rgb(var(--label-lime-05,134 207 22));--mds-label-button-icon-color:rgb(var(--label-lime-10,43 66 7));--mds-label-color:rgb(var(--label-lime-10,43 66 7));--mds-label-icon-color:rgb(var(--label-lime-10,43 66 7));--mds-label-selection-background:rgb(var(--label-lime-08,73 112 12));--mds-label-selection-color:rgb(var(--label-lime-02,223 247 185))}:host([variant=lime]):host([tone=weak]){--mds-label-background:rgb(var(--label-lime-08,73 112 12));--mds-label-button-background:rgb(var(--label-lime-09,51 79 8));--mds-label-button-background-hover:rgb(var(--label-lime-08,73 112 12));--mds-label-button-icon-color:rgb(var(--label-lime-04,148 229 25));--mds-label-color:rgb(var(--label-lime-02,223 247 185));--mds-label-icon-color:rgb(var(--label-lime-02,223 247 185));--mds-label-selection-background:rgb(var(--label-lime-06,108 167 18));--mds-label-selection-color:rgb(var(--label-lime-10,43 66 7))}:host([variant=orange]){--mds-label-background:rgb(var(--label-orange-04,252 196 158));--mds-label-button-background:rgb(var(--label-orange-04,252 196 158));--mds-label-button-background-hover:rgb(var(--label-orange-05,251 168 111));--mds-label-button-icon-color:rgb(var(--label-orange-10,99 42 3));--mds-label-color:rgb(var(--label-orange-10,99 42 3));--mds-label-icon-color:rgb(var(--label-orange-10,99 42 3));--mds-label-selection-background:rgb(var(--label-orange-08,167 71 4));--mds-label-selection-color:rgb(var(--label-orange-02,254 235 222))}:host([variant=orange]):host([tone=weak]){--mds-label-background:rgb(var(--label-orange-08,167 71 4));--mds-label-button-background:rgb(var(--label-orange-09,116 49 3));--mds-label-button-background-hover:rgb(var(--label-orange-08,167 71 4));--mds-label-button-icon-color:rgb(var(--label-orange-04,252 196 158));--mds-label-color:rgb(var(--label-orange-02,254 235 222));--mds-label-icon-color:rgb(var(--label-orange-02,254 235 222));--mds-label-selection-background:rgb(var(--label-orange-06,247 105 6));--mds-label-selection-color:rgb(var(--label-orange-10,99 42 3))}:host([variant=orchid]){--mds-label-background:rgb(var(--label-orchid-04,248 192 220));--mds-label-button-background:rgb(var(--label-orchid-04,248 192 220));--mds-label-button-background-hover:rgb(var(--label-orchid-05,245 163 203));--mds-label-button-icon-color:rgb(var(--label-orchid-10,111 12 61));--mds-label-color:rgb(var(--label-orchid-10,111 12 61));--mds-label-icon-color:rgb(var(--label-orchid-10,111 12 61));--mds-label-selection-background:rgb(var(--label-orchid-08,187 19 102));--mds-label-selection-color:rgb(var(--label-orchid-02,253 233 243))}:host([variant=orchid]):host([tone=weak]){--mds-label-background:rgb(var(--label-orchid-08,187 19 102));--mds-label-button-background:rgb(var(--label-orchid-09,131 14 71));--mds-label-button-background-hover:rgb(var(--label-orchid-08,187 19 102));--mds-label-button-icon-color:rgb(var(--label-orchid-04,248 192 220));--mds-label-color:rgb(var(--label-orchid-02,253 233 243));--mds-label-icon-color:rgb(var(--label-orchid-02,253 233 243));--mds-label-selection-background:rgb(var(--label-orchid-06,239 99 168));--mds-label-selection-color:rgb(var(--label-orchid-10,111 12 61))}:host([variant=sky]){--mds-label-background:rgb(var(--label-sky-04,148 217 249));--mds-label-button-background:rgb(var(--label-sky-04,148 217 249));--mds-label-button-background-hover:rgb(var(--label-sky-05,94 198 245));--mds-label-button-icon-color:rgb(var(--label-sky-10,5 63 90));--mds-label-color:rgb(var(--label-sky-10,5 63 90));--mds-label-icon-color:rgb(var(--label-sky-10,5 63 90));--mds-label-selection-background:rgb(var(--label-sky-08,9 107 152));--mds-label-selection-color:rgb(var(--label-sky-02,219 242 253))}:host([variant=sky]):host([tone=weak]){--mds-label-background:rgb(var(--label-sky-08,9 107 152));--mds-label-button-background:rgb(var(--label-sky-09,6 76 107));--mds-label-button-background-hover:rgb(var(--label-sky-08,9 107 152));--mds-label-button-icon-color:rgb(var(--label-sky-04,148 217 249));--mds-label-color:rgb(var(--label-sky-02,219 242 253));--mds-label-icon-color:rgb(var(--label-sky-02,219 242 253));--mds-label-selection-background:rgb(var(--label-sky-06,13 158 224));--mds-label-selection-color:rgb(var(--label-sky-10,5 63 90))}:host([variant=violet]){--mds-label-background:rgb(var(--label-violet-04,216 200 252));--mds-label-button-background:rgb(var(--label-violet-04,216 200 252));--mds-label-button-background-hover:rgb(var(--label-violet-05,198 175 251));--mds-label-button-icon-color:rgb(var(--label-violet-10,57 9 165));--mds-label-color:rgb(var(--label-violet-10,57 9 165));--mds-label-icon-color:rgb(var(--label-violet-10,57 9 165));--mds-label-selection-background:rgb(var(--label-violet-08,111 53 244));--mds-label-selection-color:rgb(var(--label-violet-02,241 235 254))}:host([variant=violet]):host([tone=weak]){--mds-label-background:rgb(var(--label-violet-08,111 53 244));--mds-label-button-background:rgb(var(--label-violet-09,67 11 195));--mds-label-button-background-hover:rgb(var(--label-violet-08,111 53 244));--mds-label-button-icon-color:rgb(var(--label-violet-04,216 200 252));--mds-label-color:rgb(var(--label-violet-02,241 235 254));--mds-label-icon-color:rgb(var(--label-violet-02,241 235 254));--mds-label-selection-background:rgb(var(--label-violet-06,166 129 248));--mds-label-selection-color:rgb(var(--label-violet-10,57 9 165))}:host([variant=purple]){--mds-label-background:rgb(var(--label-purple-04,225 196 252));--mds-label-button-background:rgb(var(--label-purple-04,225 196 252));--mds-label-button-background-hover:rgb(var(--label-purple-05,212 170 251));--mds-label-button-icon-color:rgb(var(--label-purple-10,78 7 146));--mds-label-color:rgb(var(--label-purple-10,78 7 146));--mds-label-icon-color:rgb(var(--label-purple-10,78 7 146));--mds-label-selection-background:rgb(var(--label-purple-08,133 17 244));--mds-label-selection-color:rgb(var(--label-purple-02,245 234 254))}:host([variant=purple]):host([tone=weak]){--mds-label-background:rgb(var(--label-purple-08,133 17 244));--mds-label-button-background:rgb(var(--label-purple-09,92 8 173));--mds-label-button-background-hover:rgb(var(--label-purple-08,133 17 244));--mds-label-button-icon-color:rgb(var(--label-purple-04,225 196 252));--mds-label-color:rgb(var(--label-purple-02,245 234 254));--mds-label-icon-color:rgb(var(--label-purple-02,245 234 254));--mds-label-selection-background:rgb(var(--label-purple-06,186 119 249));--mds-label-selection-color:rgb(var(--label-purple-10,78 7 146))}:host([variant=yellow]){--mds-label-background:rgb(var(--label-yellow-04,248 202 60));--mds-label-button-background:rgb(var(--label-yellow-04,248 202 60));--mds-label-button-background-hover:rgb(var(--label-yellow-05,234 179 8));--mds-label-button-icon-color:rgb(var(--label-yellow-10,75 57 3));--mds-label-color:rgb(var(--label-yellow-10,75 57 3));--mds-label-icon-color:rgb(var(--label-yellow-10,75 57 3));--mds-label-selection-background:rgb(var(--label-yellow-08,127 97 4));--mds-label-selection-color:rgb(var(--label-yellow-02,253 238 190))}:host([variant=yellow]):host([tone=weak]){--mds-label-background:rgb(var(--label-yellow-08,127 97 4));--mds-label-button-background:rgb(var(--label-yellow-09,89 68 3));--mds-label-button-background-hover:rgb(var(--label-yellow-08,127 97 4));--mds-label-button-icon-color:rgb(var(--label-yellow-04,248 202 60));--mds-label-color:rgb(var(--label-yellow-02,253 238 190));--mds-label-icon-color:rgb(var(--label-yellow-02,253 238 190));--mds-label-selection-background:rgb(var(--label-yellow-06,188 143 6));--mds-label-selection-color:rgb(var(--label-yellow-10,75 57 3))}:host([variant=error]){--mds-label-background:rgb(var(--status-error-04,254 193 189));--mds-label-button-background:rgb(var(--status-error-04,254 193 189));--mds-label-button-background-hover:rgb(var(--status-error-05,250 165 160));--mds-label-button-icon-color:rgb(var(--status-error-10,115 0 0));--mds-label-color:rgb(var(--status-error-10,115 0 0));--mds-label-icon-color:rgb(var(--status-error-10,115 0 0));--mds-label-selection-background:rgb(var(--status-error-08,182 50 54));--mds-label-selection-color:rgb(var(--status-error-02,255 234 231))}:host([variant=error]):host([tone=weak]){--mds-label-background:rgb(var(--status-error-08,182 50 54));--mds-label-button-background:rgb(var(--status-error-09,135 0 14));--mds-label-button-background-hover:rgb(var(--status-error-08,182 50 54));--mds-label-button-icon-color:rgb(var(--status-error-04,254 193 189));--mds-label-color:rgb(var(--status-error-02,255 234 231));--mds-label-icon-color:rgb(var(--status-error-02,255 234 231));--mds-label-selection-background:rgb(var(--status-error-06,239 108 105));--mds-label-selection-color:rgb(var(--status-error-10,115 0 0))}:host([variant=warning]){--mds-label-background:rgb(var(--status-warning-04,255 200 33));--mds-label-button-background:rgb(var(--status-warning-04,255 200 33));--mds-label-button-background-hover:rgb(var(--status-warning-05,237 177 0));--mds-label-button-icon-color:rgb(var(--status-warning-10,77 57 0));--mds-label-color:rgb(var(--status-warning-10,77 57 0));--mds-label-icon-color:rgb(var(--status-warning-10,77 57 0));--mds-label-selection-background:rgb(var(--status-warning-08,129 96 0));--mds-label-selection-color:rgb(var(--status-warning-02,255 237 185))}:host([variant=warning]):host([tone=weak]){--mds-label-background:rgb(var(--status-warning-08,129 96 0));--mds-label-button-background:rgb(var(--status-warning-09,90 67 0));--mds-label-button-background-hover:rgb(var(--status-warning-08,129 96 0));--mds-label-button-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-label-color:rgb(var(--status-warning-02,255 237 185));--mds-label-icon-color:rgb(var(--status-warning-02,255 237 185));--mds-label-selection-background:rgb(var(--status-warning-06,190 142 0));--mds-label-selection-color:rgb(var(--status-warning-10,77 57 0))}:host([variant=success]){--mds-label-background:rgb(var(--status-success-04,158 222 181));--mds-label-button-background:rgb(var(--status-success-04,158 222 181));--mds-label-button-background-hover:rgb(var(--status-success-05,107 206 147));--mds-label-button-icon-color:rgb(var(--status-success-10,0 69 0));--mds-label-color:rgb(var(--status-success-10,0 69 0));--mds-label-icon-color:rgb(var(--status-success-10,0 69 0));--mds-label-selection-background:rgb(var(--status-success-08,0 116 46));--mds-label-selection-color:rgb(var(--status-success-02,222 244 228))}:host([variant=success]):host([tone=weak]){--mds-label-background:rgb(var(--status-success-08,0 116 46));--mds-label-button-background:rgb(var(--status-success-09,0 82 9));--mds-label-button-background-hover:rgb(var(--status-success-08,0 116 46));--mds-label-button-icon-color:rgb(var(--status-success-04,158 222 181));--mds-label-color:rgb(var(--status-success-02,222 244 228));--mds-label-icon-color:rgb(var(--status-success-02,222 244 228));--mds-label-selection-background:rgb(var(--status-success-06,0 171 97));--mds-label-selection-color:rgb(var(--status-success-10,0 69 0))}:host([variant=info]){--mds-label-background:rgb(var(--status-info-04,159 216 241));--mds-label-button-background:rgb(var(--status-info-04,159 216 241));--mds-label-button-background-hover:rgb(var(--status-info-05,112 198 234));--mds-label-button-icon-color:rgb(var(--status-info-10,0 61 103));--mds-label-color:rgb(var(--status-info-10,0 61 103));--mds-label-icon-color:rgb(var(--status-info-10,0 61 103));--mds-label-selection-background:rgb(var(--status-info-08,0 107 151));--mds-label-selection-color:rgb(var(--status-info-02,222 242 250))}:host([variant=info]):host([tone=weak]){--mds-label-background:rgb(var(--status-info-08,0 107 151));--mds-label-button-background:rgb(var(--status-info-09,0 73 116));--mds-label-button-background-hover:rgb(var(--status-info-08,0 107 151));--mds-label-button-icon-color:rgb(var(--status-info-04,159 216 241));--mds-label-color:rgb(var(--status-info-02,222 242 250));--mds-label-icon-color:rgb(var(--status-info-02,222 242 250));--mds-label-selection-background:rgb(var(--status-info-06,0 161 208));--mds-label-selection-color:rgb(var(--status-info-10,0 61 103))}:host-context(:root.pref-theme-dark:not(.pref-theme-scheme-light)){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:host-context(:root.pref-contrast-more){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-color-scheme:dark){:is(:host-context(:root.pref-theme-system:not(.pref-theme-scheme-light)),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}}`;
+const mdsLabelCss = () => `@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-label-background:rgb(var(--label-yellow-09,89 68 3));--mds-label-color:rgb(var(--label-yellow-02,253 238 190));--mds-label-icon-color:var(--mds-label-color,rgb(var(--label-yellow-02,253 238 190)));--mds-label-radius:calc(var(--spacing,.0025rem)*150);--mds-label-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-label-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));--mds-label-button-background:rgb(var(--label-yellow-08,127 97 4));--mds-label-button-background-hover:rgb(var(--label-yellow-07,158 120 5));--mds-label-button-icon-color:rgb(var(--label-yellow-03,251 224 142));--tw-ease:initial}}}:host(:not(:is([hydrated],.hydrated))),:is(mds-button,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-label-background:rgb(var(--label-yellow-09,89 68 3));--mds-label-color:rgb(var(--label-yellow-02,253 238 190));--mds-label-icon-color:var(--mds-label-color,rgb(var(--label-yellow-02,253 238 190)));--mds-label-selection-background:var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3)));--mds-label-selection-color:var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190)));--mds-label-button-background:rgb(var(--label-yellow-08,127 97 4));--mds-label-button-background-hover:rgb(var(--label-yellow-07,158 120 5));--mds-label-button-icon-color:rgb(var(--label-yellow-03,251 224 142));--private-bevel-size:calc(var(--spacing,.0025rem)*900);--tw-ease:var(--ease-in-out,cubic-bezier(.4,0,.2,1));background-color:var(--mds-label-background,rgb(var(--label-yellow-09,89 68 3)));color:var(--mds-label-color,rgb(var(--label-yellow-02,253 238 190)));transition-timing-function:var(--ease-in-out,cubic-bezier(.4,0,.2,1));corner-shape:round;align-items:center;border-radius:100px;display:flex;fill:var(--mds-label-icon-color,var(--mds-label-color,rgb(var(--label-yellow-02,253 238 190))));flex:1;gap:calc(var(--spacing,.0025rem)*50);max-width:min-content;min-height:calc(var(--spacing,.0025rem)*700);padding:0 calc(var(--spacing,.0025rem)*200);-webkit-transition-duration:var(--duration-200,.2s);transition-duration:var(--duration-200,.2s);transition-property:color,background-color,fill;--mds-label-background:rgb(var(--label-blue-08,42 77 247));--mds-label-button-background:rgb(var(--label-blue-09,7 40 196));--mds-label-button-background-hover:rgb(var(--label-blue-08,42 77 247));--mds-label-button-icon-color:rgb(var(--label-blue-04,196 206 253));--mds-label-color:rgb(var(--label-blue-02,234 238 254));--mds-label-icon-color:rgb(var(--label-blue-02,234 238 254));--mds-label-selection-background:rgb(var(--label-blue-06,121 143 250));--mds-label-selection-color:rgb(var(--label-blue-10,6 34 166))}@supports (corner-shape:bevel){:host{corner-left-shape:superellipse(.25);corner-right-shape:var(--magma-corner-shape,round);align-items:stretch;border-bottom-left-radius:100px;border-top-left-radius:100px;padding-left:calc(var(--private-bevel-size)/2);padding-right:0}}:host::selection{background-color:var(--mds-label-selection-background,var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3))));color:var(--mds-label-selection-color,var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190))))}:host([truncate=word]) .text{white-space:nowrap}.text{--mds-text-selection-background:var(--mds-label-selection-background,var(--magma-selection-background,rgb(var(--label-yellow-09,89 68 3))));--mds-text-selection-color:var(--mds-label-selection-color,var(--magma-selection-color,rgb(var(--label-yellow-02,253 238 190))));align-self:center;display:block;flex-grow:1}.text:last-child{padding-right:calc(var(--spacing,.0025rem)*200)}.button-close{--mds-button-background:var(--mds-label-button-background,rgb(var(--label-yellow-08,127 97 4)));--mds-button-border-opacity:0;align-self:center;fill:var(--mds-label-button-icon-color,rgb(var(--label-yellow-03,251 224 142)));flex-shrink:0}.button-close:hover{--mds-button-background:var(--mds-label-button-background-hover,rgb(var(--label-yellow-07,158 120 5)))}:host([variant=red]){--mds-label-background:rgb(var(--label-red-04,247 195 195));--mds-label-button-background:rgb(var(--label-red-04,247 195 195));--mds-label-button-background-hover:rgb(var(--label-red-05,244 167 167));--mds-label-button-icon-color:rgb(var(--label-red-10,115 15 15));--mds-label-color:rgb(var(--label-red-10,115 15 15));--mds-label-icon-color:rgb(var(--label-red-10,115 15 15));--mds-label-selection-background:rgb(var(--label-red-08,192 25 25));--mds-label-selection-color:rgb(var(--label-red-02,252 234 234))}:host([variant=red]):host([tone=weak]){--mds-label-background:rgb(var(--label-red-08,192 25 25));--mds-label-button-background:rgb(var(--label-red-09,134 17 17));--mds-label-button-background-hover:rgb(var(--label-red-08,192 25 25));--mds-label-button-icon-color:rgb(var(--label-red-04,247 195 195));--mds-label-color:rgb(var(--label-red-02,252 234 234));--mds-label-icon-color:rgb(var(--label-red-02,252 234 234));--mds-label-selection-background:rgb(var(--label-red-06,236 110 110));--mds-label-selection-color:rgb(var(--label-red-10,115 15 15))}:host([variant=amaranth]){--mds-label-background:rgb(var(--label-amaranth-04,251 192 203));--mds-label-button-background:rgb(var(--label-amaranth-04,251 192 203));--mds-label-button-background-hover:rgb(var(--label-amaranth-05,250 163 178));--mds-label-button-icon-color:rgb(var(--label-amaranth-10,114 7 25));--mds-label-color:rgb(var(--label-amaranth-10,114 7 25));--mds-label-icon-color:rgb(var(--label-amaranth-10,114 7 25));--mds-label-selection-background:rgb(var(--label-amaranth-08,193 11 42));--mds-label-selection-color:rgb(var(--label-amaranth-02,254 233 237))}:host([variant=amaranth]):host([tone=weak]){--mds-label-background:rgb(var(--label-amaranth-08,193 11 42));--mds-label-button-background:rgb(var(--label-amaranth-09,135 8 30));--mds-label-button-background-hover:rgb(var(--label-amaranth-08,193 11 42));--mds-label-button-icon-color:rgb(var(--label-amaranth-04,251 192 203));--mds-label-color:rgb(var(--label-amaranth-02,254 233 237));--mds-label-icon-color:rgb(var(--label-amaranth-02,254 233 237));--mds-label-selection-background:rgb(var(--label-amaranth-06,246 99 125));--mds-label-selection-color:rgb(var(--label-amaranth-10,114 7 25))}:host([variant=aqua]){--mds-label-background:rgb(var(--label-aqua-04,81 225 250));--mds-label-button-background:rgb(var(--label-aqua-04,81 225 250));--mds-label-button-background-hover:rgb(var(--label-aqua-05,7 203 237));--mds-label-button-icon-color:rgb(var(--label-aqua-10,2 65 76));--mds-label-color:rgb(var(--label-aqua-10,2 65 76));--mds-label-icon-color:rgb(var(--label-aqua-10,2 65 76));--mds-label-selection-background:rgb(var(--label-aqua-08,4 110 129));--mds-label-selection-color:rgb(var(--label-aqua-02,203 246 254))}:host([variant=aqua]):host([tone=weak]){--mds-label-background:rgb(var(--label-aqua-08,4 110 129));--mds-label-button-background:rgb(var(--label-aqua-09,3 77 90));--mds-label-button-background-hover:rgb(var(--label-aqua-08,4 110 129));--mds-label-button-icon-color:rgb(var(--label-aqua-04,81 225 250));--mds-label-color:rgb(var(--label-aqua-02,203 246 254));--mds-label-icon-color:rgb(var(--label-aqua-02,203 246 254));--mds-label-selection-background:rgb(var(--label-aqua-06,5 163 190));--mds-label-selection-color:rgb(var(--label-aqua-10,2 65 76))}:host([variant=blue]){--mds-label-background:rgb(var(--label-blue-04,196 206 253));--mds-label-button-background:rgb(var(--label-blue-04,196 206 253));--mds-label-button-background-hover:rgb(var(--label-blue-05,170 184 252));--mds-label-button-icon-color:rgb(var(--label-blue-10,6 34 166));--mds-label-color:rgb(var(--label-blue-10,6 34 166));--mds-label-icon-color:rgb(var(--label-blue-10,6 34 166));--mds-label-selection-background:rgb(var(--label-blue-08,42 77 247));--mds-label-selection-color:rgb(var(--label-blue-02,234 238 254))}:host([variant=blue]):host([tone=weak]){--mds-label-background:rgb(var(--label-blue-08,42 77 247));--mds-label-button-background:rgb(var(--label-blue-09,7 40 196));--mds-label-button-background-hover:rgb(var(--label-blue-08,42 77 247));--mds-label-button-icon-color:rgb(var(--label-blue-04,196 206 253));--mds-label-color:rgb(var(--label-blue-02,234 238 254));--mds-label-icon-color:rgb(var(--label-blue-02,234 238 254));--mds-label-selection-background:rgb(var(--label-blue-06,121 143 250));--mds-label-selection-color:rgb(var(--label-blue-10,6 34 166))}:host([variant=green]){--mds-label-background:rgb(var(--label-green-04,113 230 156));--mds-label-button-background:rgb(var(--label-green-04,113 230 156));--mds-label-button-background-hover:rgb(var(--label-green-05,37 213 102));--mds-label-button-icon-color:rgb(var(--label-green-10,12 68 33));--mds-label-color:rgb(var(--label-green-10,12 68 33));--mds-label-icon-color:rgb(var(--label-green-10,12 68 33));--mds-label-selection-background:rgb(var(--label-green-08,20 116 56));--mds-label-selection-color:rgb(var(--label-green-02,211 247 224))}:host([variant=green]):host([tone=weak]){--mds-label-background:rgb(var(--label-green-08,20 116 56));--mds-label-button-background:rgb(var(--label-green-09,14 81 39));--mds-label-button-background-hover:rgb(var(--label-green-08,20 116 56));--mds-label-button-icon-color:rgb(var(--label-green-04,113 230 156));--mds-label-color:rgb(var(--label-green-02,211 247 224));--mds-label-icon-color:rgb(var(--label-green-02,211 247 224));--mds-label-selection-background:rgb(var(--label-green-06,30 171 82));--mds-label-selection-color:rgb(var(--label-green-10,12 68 33))}:host([variant=lime]){--mds-label-background:rgb(var(--label-lime-04,148 229 25));--mds-label-button-background:rgb(var(--label-lime-04,148 229 25));--mds-label-button-background-hover:rgb(var(--label-lime-05,134 207 22));--mds-label-button-icon-color:rgb(var(--label-lime-10,43 66 7));--mds-label-color:rgb(var(--label-lime-10,43 66 7));--mds-label-icon-color:rgb(var(--label-lime-10,43 66 7));--mds-label-selection-background:rgb(var(--label-lime-08,73 112 12));--mds-label-selection-color:rgb(var(--label-lime-02,223 247 185))}:host([variant=lime]):host([tone=weak]){--mds-label-background:rgb(var(--label-lime-08,73 112 12));--mds-label-button-background:rgb(var(--label-lime-09,51 79 8));--mds-label-button-background-hover:rgb(var(--label-lime-08,73 112 12));--mds-label-button-icon-color:rgb(var(--label-lime-04,148 229 25));--mds-label-color:rgb(var(--label-lime-02,223 247 185));--mds-label-icon-color:rgb(var(--label-lime-02,223 247 185));--mds-label-selection-background:rgb(var(--label-lime-06,108 167 18));--mds-label-selection-color:rgb(var(--label-lime-10,43 66 7))}:host([variant=orange]){--mds-label-background:rgb(var(--label-orange-04,252 196 158));--mds-label-button-background:rgb(var(--label-orange-04,252 196 158));--mds-label-button-background-hover:rgb(var(--label-orange-05,251 168 111));--mds-label-button-icon-color:rgb(var(--label-orange-10,99 42 3));--mds-label-color:rgb(var(--label-orange-10,99 42 3));--mds-label-icon-color:rgb(var(--label-orange-10,99 42 3));--mds-label-selection-background:rgb(var(--label-orange-08,167 71 4));--mds-label-selection-color:rgb(var(--label-orange-02,254 235 222))}:host([variant=orange]):host([tone=weak]){--mds-label-background:rgb(var(--label-orange-08,167 71 4));--mds-label-button-background:rgb(var(--label-orange-09,116 49 3));--mds-label-button-background-hover:rgb(var(--label-orange-08,167 71 4));--mds-label-button-icon-color:rgb(var(--label-orange-04,252 196 158));--mds-label-color:rgb(var(--label-orange-02,254 235 222));--mds-label-icon-color:rgb(var(--label-orange-02,254 235 222));--mds-label-selection-background:rgb(var(--label-orange-06,247 105 6));--mds-label-selection-color:rgb(var(--label-orange-10,99 42 3))}:host([variant=orchid]){--mds-label-background:rgb(var(--label-orchid-04,248 192 220));--mds-label-button-background:rgb(var(--label-orchid-04,248 192 220));--mds-label-button-background-hover:rgb(var(--label-orchid-05,245 163 203));--mds-label-button-icon-color:rgb(var(--label-orchid-10,111 12 61));--mds-label-color:rgb(var(--label-orchid-10,111 12 61));--mds-label-icon-color:rgb(var(--label-orchid-10,111 12 61));--mds-label-selection-background:rgb(var(--label-orchid-08,187 19 102));--mds-label-selection-color:rgb(var(--label-orchid-02,253 233 243))}:host([variant=orchid]):host([tone=weak]){--mds-label-background:rgb(var(--label-orchid-08,187 19 102));--mds-label-button-background:rgb(var(--label-orchid-09,131 14 71));--mds-label-button-background-hover:rgb(var(--label-orchid-08,187 19 102));--mds-label-button-icon-color:rgb(var(--label-orchid-04,248 192 220));--mds-label-color:rgb(var(--label-orchid-02,253 233 243));--mds-label-icon-color:rgb(var(--label-orchid-02,253 233 243));--mds-label-selection-background:rgb(var(--label-orchid-06,239 99 168));--mds-label-selection-color:rgb(var(--label-orchid-10,111 12 61))}:host([variant=sky]){--mds-label-background:rgb(var(--label-sky-04,148 217 249));--mds-label-button-background:rgb(var(--label-sky-04,148 217 249));--mds-label-button-background-hover:rgb(var(--label-sky-05,94 198 245));--mds-label-button-icon-color:rgb(var(--label-sky-10,5 63 90));--mds-label-color:rgb(var(--label-sky-10,5 63 90));--mds-label-icon-color:rgb(var(--label-sky-10,5 63 90));--mds-label-selection-background:rgb(var(--label-sky-08,9 107 152));--mds-label-selection-color:rgb(var(--label-sky-02,219 242 253))}:host([variant=sky]):host([tone=weak]){--mds-label-background:rgb(var(--label-sky-08,9 107 152));--mds-label-button-background:rgb(var(--label-sky-09,6 76 107));--mds-label-button-background-hover:rgb(var(--label-sky-08,9 107 152));--mds-label-button-icon-color:rgb(var(--label-sky-04,148 217 249));--mds-label-color:rgb(var(--label-sky-02,219 242 253));--mds-label-icon-color:rgb(var(--label-sky-02,219 242 253));--mds-label-selection-background:rgb(var(--label-sky-06,13 158 224));--mds-label-selection-color:rgb(var(--label-sky-10,5 63 90))}:host([variant=violet]){--mds-label-background:rgb(var(--label-violet-04,216 200 252));--mds-label-button-background:rgb(var(--label-violet-04,216 200 252));--mds-label-button-background-hover:rgb(var(--label-violet-05,198 175 251));--mds-label-button-icon-color:rgb(var(--label-violet-10,57 9 165));--mds-label-color:rgb(var(--label-violet-10,57 9 165));--mds-label-icon-color:rgb(var(--label-violet-10,57 9 165));--mds-label-selection-background:rgb(var(--label-violet-08,111 53 244));--mds-label-selection-color:rgb(var(--label-violet-02,241 235 254))}:host([variant=violet]):host([tone=weak]){--mds-label-background:rgb(var(--label-violet-08,111 53 244));--mds-label-button-background:rgb(var(--label-violet-09,67 11 195));--mds-label-button-background-hover:rgb(var(--label-violet-08,111 53 244));--mds-label-button-icon-color:rgb(var(--label-violet-04,216 200 252));--mds-label-color:rgb(var(--label-violet-02,241 235 254));--mds-label-icon-color:rgb(var(--label-violet-02,241 235 254));--mds-label-selection-background:rgb(var(--label-violet-06,166 129 248));--mds-label-selection-color:rgb(var(--label-violet-10,57 9 165))}:host([variant=purple]){--mds-label-background:rgb(var(--label-purple-04,225 196 252));--mds-label-button-background:rgb(var(--label-purple-04,225 196 252));--mds-label-button-background-hover:rgb(var(--label-purple-05,212 170 251));--mds-label-button-icon-color:rgb(var(--label-purple-10,78 7 146));--mds-label-color:rgb(var(--label-purple-10,78 7 146));--mds-label-icon-color:rgb(var(--label-purple-10,78 7 146));--mds-label-selection-background:rgb(var(--label-purple-08,133 17 244));--mds-label-selection-color:rgb(var(--label-purple-02,245 234 254))}:host([variant=purple]):host([tone=weak]){--mds-label-background:rgb(var(--label-purple-08,133 17 244));--mds-label-button-background:rgb(var(--label-purple-09,92 8 173));--mds-label-button-background-hover:rgb(var(--label-purple-08,133 17 244));--mds-label-button-icon-color:rgb(var(--label-purple-04,225 196 252));--mds-label-color:rgb(var(--label-purple-02,245 234 254));--mds-label-icon-color:rgb(var(--label-purple-02,245 234 254));--mds-label-selection-background:rgb(var(--label-purple-06,186 119 249));--mds-label-selection-color:rgb(var(--label-purple-10,78 7 146))}:host([variant=yellow]){--mds-label-background:rgb(var(--label-yellow-04,248 202 60));--mds-label-button-background:rgb(var(--label-yellow-04,248 202 60));--mds-label-button-background-hover:rgb(var(--label-yellow-05,234 179 8));--mds-label-button-icon-color:rgb(var(--label-yellow-10,75 57 3));--mds-label-color:rgb(var(--label-yellow-10,75 57 3));--mds-label-icon-color:rgb(var(--label-yellow-10,75 57 3));--mds-label-selection-background:rgb(var(--label-yellow-08,127 97 4));--mds-label-selection-color:rgb(var(--label-yellow-02,253 238 190))}:host([variant=yellow]):host([tone=weak]){--mds-label-background:rgb(var(--label-yellow-08,127 97 4));--mds-label-button-background:rgb(var(--label-yellow-09,89 68 3));--mds-label-button-background-hover:rgb(var(--label-yellow-08,127 97 4));--mds-label-button-icon-color:rgb(var(--label-yellow-04,248 202 60));--mds-label-color:rgb(var(--label-yellow-02,253 238 190));--mds-label-icon-color:rgb(var(--label-yellow-02,253 238 190));--mds-label-selection-background:rgb(var(--label-yellow-06,188 143 6));--mds-label-selection-color:rgb(var(--label-yellow-10,75 57 3))}:host([variant=error]){--mds-label-background:rgb(var(--status-error-04,254 193 189));--mds-label-button-background:rgb(var(--status-error-04,254 193 189));--mds-label-button-background-hover:rgb(var(--status-error-05,250 165 160));--mds-label-button-icon-color:rgb(var(--status-error-10,115 0 0));--mds-label-color:rgb(var(--status-error-10,115 0 0));--mds-label-icon-color:rgb(var(--status-error-10,115 0 0));--mds-label-selection-background:rgb(var(--status-error-08,182 50 54));--mds-label-selection-color:rgb(var(--status-error-02,255 234 231))}:host([variant=error]):host([tone=weak]){--mds-label-background:rgb(var(--status-error-08,182 50 54));--mds-label-button-background:rgb(var(--status-error-09,135 0 14));--mds-label-button-background-hover:rgb(var(--status-error-08,182 50 54));--mds-label-button-icon-color:rgb(var(--status-error-04,254 193 189));--mds-label-color:rgb(var(--status-error-02,255 234 231));--mds-label-icon-color:rgb(var(--status-error-02,255 234 231));--mds-label-selection-background:rgb(var(--status-error-06,239 108 105));--mds-label-selection-color:rgb(var(--status-error-10,115 0 0))}:host([variant=warning]){--mds-label-background:rgb(var(--status-warning-04,255 200 33));--mds-label-button-background:rgb(var(--status-warning-04,255 200 33));--mds-label-button-background-hover:rgb(var(--status-warning-05,237 177 0));--mds-label-button-icon-color:rgb(var(--status-warning-10,77 57 0));--mds-label-color:rgb(var(--status-warning-10,77 57 0));--mds-label-icon-color:rgb(var(--status-warning-10,77 57 0));--mds-label-selection-background:rgb(var(--status-warning-08,129 96 0));--mds-label-selection-color:rgb(var(--status-warning-02,255 237 185))}:host([variant=warning]):host([tone=weak]){--mds-label-background:rgb(var(--status-warning-08,129 96 0));--mds-label-button-background:rgb(var(--status-warning-09,90 67 0));--mds-label-button-background-hover:rgb(var(--status-warning-08,129 96 0));--mds-label-button-icon-color:rgb(var(--status-warning-04,255 200 33));--mds-label-color:rgb(var(--status-warning-02,255 237 185));--mds-label-icon-color:rgb(var(--status-warning-02,255 237 185));--mds-label-selection-background:rgb(var(--status-warning-06,190 142 0));--mds-label-selection-color:rgb(var(--status-warning-10,77 57 0))}:host([variant=success]){--mds-label-background:rgb(var(--status-success-04,158 222 181));--mds-label-button-background:rgb(var(--status-success-04,158 222 181));--mds-label-button-background-hover:rgb(var(--status-success-05,107 206 147));--mds-label-button-icon-color:rgb(var(--status-success-10,0 69 0));--mds-label-color:rgb(var(--status-success-10,0 69 0));--mds-label-icon-color:rgb(var(--status-success-10,0 69 0));--mds-label-selection-background:rgb(var(--status-success-08,0 116 46));--mds-label-selection-color:rgb(var(--status-success-02,222 244 228))}:host([variant=success]):host([tone=weak]){--mds-label-background:rgb(var(--status-success-08,0 116 46));--mds-label-button-background:rgb(var(--status-success-09,0 82 9));--mds-label-button-background-hover:rgb(var(--status-success-08,0 116 46));--mds-label-button-icon-color:rgb(var(--status-success-04,158 222 181));--mds-label-color:rgb(var(--status-success-02,222 244 228));--mds-label-icon-color:rgb(var(--status-success-02,222 244 228));--mds-label-selection-background:rgb(var(--status-success-06,0 171 97));--mds-label-selection-color:rgb(var(--status-success-10,0 69 0))}:host([variant=info]){--mds-label-background:rgb(var(--status-info-04,159 216 241));--mds-label-button-background:rgb(var(--status-info-04,159 216 241));--mds-label-button-background-hover:rgb(var(--status-info-05,112 198 234));--mds-label-button-icon-color:rgb(var(--status-info-10,0 61 103));--mds-label-color:rgb(var(--status-info-10,0 61 103));--mds-label-icon-color:rgb(var(--status-info-10,0 61 103));--mds-label-selection-background:rgb(var(--status-info-08,0 107 151));--mds-label-selection-color:rgb(var(--status-info-02,222 242 250))}:host([variant=info]):host([tone=weak]){--mds-label-background:rgb(var(--status-info-08,0 107 151));--mds-label-button-background:rgb(var(--status-info-09,0 73 116));--mds-label-button-background-hover:rgb(var(--status-info-08,0 107 151));--mds-label-button-icon-color:rgb(var(--status-info-04,159 216 241));--mds-label-color:rgb(var(--status-info-02,222 242 250));--mds-label-icon-color:rgb(var(--status-info-02,222 242 250));--mds-label-selection-background:rgb(var(--status-info-06,0 161 208));--mds-label-selection-color:rgb(var(--status-info-10,0 61 103))}:host([pref-theme=dark]:not([pref-theme-scheme=light])){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}:host([pref-contrast=more]){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}@property --tw-ease{syntax:"*";inherits:false}@media (prefers-color-scheme:dark){:host(:not([pref-theme])),:host([pref-theme=system]:not([pref-theme-scheme=light])){-webkit-box-shadow:var(--shadow-outline) inset;box-shadow:var(--shadow-outline) inset}}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){-webkit-box-shadow:var(--shadow-outline-50) inset;box-shadow:var(--shadow-outline-50) inset}}`;
 
 const MdsLabel = class {
     constructor(hostRef) {
@@ -75,6 +76,17 @@ const MdsLabel = class {
     async updateLang() {
         this.language = this.t.lang(this.host);
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+        this.unsubscribePrefTheme = preference.subscribePreference('theme', (value) => {
+            this.prefTheme = value;
+        });
+        this.unsubscribePrefThemeScheme = preference.subscribePreference('theme-scheme', (value) => {
+            this.prefThemeScheme = value;
+        });
+    }
     componentDidLoad() {
         this.t.lang(this.host);
         this.handleKeyboard();
@@ -83,10 +95,14 @@ const MdsLabel = class {
         this.handleKeyboard();
     }
     disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.unsubscribePrefTheme) === null || _b === void 0 ? void 0 : _b.call(this);
+        (_c = this.unsubscribePrefThemeScheme) === null || _c === void 0 ? void 0 : _c.call(this);
         this.km.detachClickBehavior();
     }
     render() {
-        return (index.h(index.Host, { key: '479ecf8ecb56445fe7ce90aaffb48a5287d7d2d8' }, index.h("mds-text", { key: 'fba92e724fd68f1fd41fc5143865eb6f0563d1d7', class: "text", truncate: this.truncate, typography: this.typography }, this.label), this.deletable && (index.h("mds-button", { key: 'dd39ea8a9f20c24663e962d1d103ee646c802880', class: "button-close", icon: cancel.miBaselineCancel, onClick: this.onClickDelete, title: this.t.get('remove'), size: "sm" }))));
+        return (index.h(index.Host, { key: '4c336d1e5bbc48d30f4a917a92b6a40c69c0302b', "pref-contrast": this.prefContrast, "pref-theme": this.prefTheme, "pref-theme-scheme": this.prefThemeScheme }, index.h("mds-text", { key: '6518c15b0d1c0c0b8dc56746ebc1961317a54958', class: "text", truncate: this.truncate, typography: this.typography }, this.label), this.deletable && (index.h("mds-button", { key: 'be2eca94574b8b0d286e22f1968b2a1e024c6328', class: "button-close", icon: cancel.miBaselineCancel, onClick: this.onClickDelete, title: this.t.get('remove'), size: "sm" }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -1,13 +1,14 @@
 'use strict';
 
 var index = require('./index-CNuKb6Lv.js');
+var preference = require('./preference-BdpIXWLP.js');
 
 var mggListDot = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path d="M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10"/>
 </svg>
 `;
 
-const mdsListItemCss = () => `@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-list-item-icon-margin:0 calc(var(--spacing,.0025rem)*200) 0 0}}}@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-list-item-icon-margin:0 calc(var(--spacing,.0025rem)*200) 0 0;align-items:flex-start;color:rgb(var(--tone-neutral-03,233 233 233));display:flex;justify-content:flex-start;width:100%}.icon{fill:currentColor;height:calc(var(--spacing,.0025rem)*600);margin:var(--mds-list-item-icon-margin,0 calc(var(--spacing,.0025rem)*200) 0 0);width:calc(var(--spacing,.0025rem)*600)}:host([typography=paragraph]){--mds-list-item-icon-margin:.25rem calc(var(--spacing,.0025rem)*200) 0 0}:host([typography=caption]){--mds-list-item-icon-margin:-.125rem calc(var(--spacing,.0025rem)*200) 0 0}:host([typography=label]),:host([typography=tip]){--mds-list-item-icon-margin:-.25rem calc(var(--spacing,.0025rem)*200) 0 0}:host([typography=option]){--mds-list-item-icon-margin:-.5rem calc(var(--spacing,.0025rem)*200) 0 0}:host-context(:root.pref-contrast-more){color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-contrast:more){:is(:host-context(:root.pref-contrast-system),:host-context(:root:not([data-magma-pref]))){color:rgb(var(--tone-neutral-01,255 255 255))}}`;
+const mdsListItemCss = () => `@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-list-item-icon-margin:0 calc(var(--spacing,.0025rem)*200) 0 0}}}: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-list-item-icon-margin:0 calc(var(--spacing,.0025rem)*200) 0 0;align-items:flex-start;color:rgb(var(--tone-neutral-03,233 233 233));display:flex;justify-content:flex-start;width:100%}.icon{fill:currentColor;height:calc(var(--spacing,.0025rem)*600);margin:var(--mds-list-item-icon-margin,0 calc(var(--spacing,.0025rem)*200) 0 0);width:calc(var(--spacing,.0025rem)*600)}:host([typography=paragraph]){--mds-list-item-icon-margin:.25rem calc(var(--spacing,.0025rem)*200) 0 0}:host([typography=caption]){--mds-list-item-icon-margin:-.125rem calc(var(--spacing,.0025rem)*200) 0 0}:host([typography=label]),:host([typography=tip]){--mds-list-item-icon-margin:-.25rem calc(var(--spacing,.0025rem)*200) 0 0}:host([typography=option]){--mds-list-item-icon-margin:-.5rem calc(var(--spacing,.0025rem)*200) 0 0}:host([pref-contrast=more]){color:rgb(var(--tone-neutral-01,255 255 255))}@media (prefers-contrast:more){:host(:not([pref-contrast])),:host([pref-contrast=system]){color:rgb(var(--tone-neutral-01,255 255 255))}}`;
 
 const MdsListItem = class {
     constructor(hostRef) {
@@ -21,9 +22,18 @@ const MdsListItem = class {
          */
         this.variant = 'info';
     }
+    connectedCallback() {
+        this.unsubscribePrefContrast = preference.subscribePreference('contrast', (value) => {
+            this.prefContrast = value;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribePrefContrast) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '07618503a5c3257ae34fdceb7273bcd8fa2ecb14', role: "listitem" }, index.h("mds-icon", { key: '9f22170dcdb6432905df8bbd6d448cb247a394fd', "aria-hidden": "true", class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), index.h("mds-text", { key: 'c9984a427031b24c5f0f4af33b07a836b2d81289', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, index.h("slot", { key: '3e16aba7cb14207c26a6b6b61ea895bc33cbc3de' }))));
+        return (index.h(index.Host, { key: '247b701acbdd9b8844fdef598aa7366cc4c9c414', role: "listitem", "pref-contrast": this.prefContrast }, index.h("mds-icon", { key: 'bf0ec570af51dfaed18739dca7a4c200fcfae54d', "aria-hidden": "true", class: "icon", name: (_a = this.icon) !== null && _a !== void 0 ? _a : mggListDot, part: "icon" }), index.h("mds-text", { key: '734184dfef9a5daeb904027700873aa2bd322114', tag: "span", typography: this.typography, variant: this.variant, part: "text" }, index.h("slot", { key: 'a5dfd173440c8f6fd9cda1a05e1e76ddd4976f40' }))));
     }
 };
 MdsListItem.style = mdsListItemCss();

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-CNuKb6Lv.js');
 
-const mdsListCss = () => `@layer reset,vendor,theme,base,components,utilities;@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-list-item:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:grid;gap:calc(var(--spacing,.0025rem)*400);padding-left:calc(var(--spacing,.0025rem)*400)}ul{margin:calc(var(--spacing,.0025rem)*0);padding:calc(var(--spacing,.0025rem)*0)}`;
+const mdsListCss = () => `@layer reset,vendor,theme,base,components,utilities;:host(:not(:is([hydrated],.hydrated))),mds-list-item:not(:is([hydrated],.hydrated)){animation-duration:0s;border-color:#0000;box-shadow:0 0 #0000;opacity:0;outline-color:#0000;transition-delay:.1s;transition-duration:0s;visibility:hidden}:host{display:grid;gap:calc(var(--spacing,.0025rem)*400);padding-left:calc(var(--spacing,.0025rem)*400)}ul{margin:0;padding:0}`;
 
 const MdsList = class {
     constructor(hostRef) {

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

@@ -5,7 +5,7 @@ var cancel = require('./cancel-_rS5f5_p.js');
 
 var miBaselineAlternateEmail = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10h5v-2h-5c-4.34 0-8-3.66-8-8s3.66-8 8-8s8 3.66 8 8v1.43c0 .79-.71 1.57-1.5 1.57s-1.5-.78-1.5-1.57V12c0-2.76-2.24-5-5-5s-5 2.24-5 5s2.24 5 5 5c1.38 0 2.64-.56 3.54-1.47c.65.89 1.77 1.47 2.96 1.47c1.97 0 3.5-1.6 3.5-3.57V12c0-5.52-4.48-10-10-10zm0 13c-1.66 0-3-1.34-3-3s1.34-3 3-3s3 1.34 3 3s-1.34 3-3 3z"/></svg>`;
 
-const mdsMentionCss = () => `@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-mention-icon-size:calc(var(--spacing,.0025rem)*600)}}}@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-mention-icon-size:calc(var(--spacing,.0025rem)*600);align-items:center;background-color:rgb(var(--tone-neutral-09,76 76 76));border-radius:100px;color:rgb(var(--tone-neutral-03,233 233 233));cursor:pointer;display:inline-flex;fill:currentColor;padding:calc(var(--spacing,.0025rem)*25);padding-right:calc(var(--spacing,.0025rem)*200);vertical-align:middle}mds-icon{height:var(--mds-mention-icon-size,calc(var(--spacing,.0025rem)*600));width:var(--mds-mention-icon-size,calc(var(--spacing,.0025rem)*600))}:host([size=sm]){--mds-mention-icon-size:calc(var(--spacing,.0025rem)*400)}:host([size=sm]) .badge{padding-left:calc(var(--spacing,.0025rem)*50);padding-right:calc(var(--spacing,.0025rem)*150)}:host([size=md]){--mds-mention-icon-size:calc(var(--spacing,.0025rem)*600)}:host([size=md]) .badge{padding-right:calc(var(--spacing,.0025rem)*200)}.action-remove{corner-shape:round;border-radius:100px;min-height:0;min-width:0;padding:0}`;
+const mdsMentionCss = () => `@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-mention-icon-size:calc(var(--spacing,.0025rem)*600)}}}: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-mention-icon-size:calc(var(--spacing,.0025rem)*600);align-items:center;background-color:rgb(var(--tone-neutral-09,76 76 76));border-radius:100px;color:rgb(var(--tone-neutral-03,233 233 233));cursor:pointer;display:inline-flex;fill:currentColor;padding:calc(var(--spacing,.0025rem)*25);padding-right:calc(var(--spacing,.0025rem)*200);vertical-align:middle}mds-icon{height:var(--mds-mention-icon-size,calc(var(--spacing,.0025rem)*600));width:var(--mds-mention-icon-size,calc(var(--spacing,.0025rem)*600))}:host([size=sm]){--mds-mention-icon-size:calc(var(--spacing,.0025rem)*400)}:host([size=sm]) .badge{padding-left:calc(var(--spacing,.0025rem)*50);padding-right:calc(var(--spacing,.0025rem)*150)}:host([size=md]){--mds-mention-icon-size:calc(var(--spacing,.0025rem)*600)}:host([size=md]) .badge{padding-right:calc(var(--spacing,.0025rem)*200)}.action-remove{corner-shape:round;border-radius:100px;min-height:0;min-width:0;padding:0}`;
 
 const MdsMention = class {
     constructor(hostRef) {