@maggioli-design-system/magma 1.0.0-beta → 1.0.1

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 
-const mdsInputRangeCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-input-range-thumb-size: Sets the thumb width and height of the component\n * @prop --mds-input-range-thumb-background:\n * @prop --mds-input-range-track-background:\n * @prop --mds-input-range-track-size:\n * @prop --mds-input-range-track-progress-background:\n */\n\n:host {\n\n  --mds-input-range-thumb-size: 1rem;\n  --mds-input-range-thumb-background: rgb(var(--brand-maggioli-04));\n  --mds-input-range-thumb-shadow: 0 0 0 2px rgb(var(--tone-neutral));\n  --mds-input-range-track-background: rgb(var(--tone-neutral-09));\n  --mds-input-range-track-size: 0.5rem;\n  --mds-input-range-track-progress-background: rgb(var(--brand-maggioli-03));\n  gap: 0.25rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n\n  display: grid;\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.header {\n  gap: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.label {\n  min-width: 0rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value {\n  margin-left: auto;\n}\n\n.range {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-thumb-size);\n  position: relative;\n}\n\n.track {\n  width: 100%;\n\n  --margin: calc(var(--mds-input-range-track-size) / 2);\n\n  -webkit-box-sizing: border-box;\n\n  box-sizing: border-box;\n  padding: 0 var(--margin);\n  position: absolute;\n}\n\n.field {\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n  }\n\n.field:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.field {\n  z-index: 20;\n  height: 1rem;\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: transparent;\n  border-radius: 1000px;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  margin: 0;\n}\n\n.field:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.field::-webkit-slider-thumb {\n  -webkit-appearance: none;\n          appearance: none;\n  background-color: var(--mds-input-range-thumb-background);\n  border: 0;\n  border-radius: var(--mds-input-range-thumb-size);\n  -webkit-box-shadow: var(--mds-input-range-thumb-shadow);\n  box-shadow: var(--mds-input-range-thumb-shadow);\n  cursor: -webkit-grab;\n  cursor: grab;\n  height: var(--mds-input-range-thumb-size);\n  line-height: 0;\n  -webkit-transform: translate(0, -50%);\n  transform: translate(0, -50%);\n  width: var(--mds-input-range-thumb-size);\n}\n\n.field::-webkit-slider-runnable-track {\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0;\n  height: 0;\n  width: 100%;\n}\n\n.track-progress {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-input-range-track-progress-background);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-track-size);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n.track-total {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-input-range-track-background);\n  border-radius: var(--mds-input-range-track-size);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-track-size);\n  overflow: hidden;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  width: 100%;\n}\n\n.contrast-area {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n\n  border-radius: var(--mds-input-range-track-size);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .field::-webkit-slider-thumb,\n  .field::-webkit-slider-runnable-track,\n  .track-progress,\n  .track-total {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .field::-webkit-slider-thumb,\n    .field::-webkit-slider-runnable-track,\n    .track-progress,\n    .track-total {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-range-thumb-background: rgb(var(--brand-maggioli-04));\n    --mds-input-range-track-background: rgb(var(--tone-neutral-07));\n    --mds-input-range-track-progress-background: rgb(var(--brand-maggioli-05));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-range-thumb-background: rgb(var(--brand-maggioli-04));\n      --mds-input-range-track-background: rgb(var(--tone-neutral-07));\n      --mds-input-range-track-progress-background: rgb(var(--brand-maggioli-05));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n";
+const mdsInputRangeCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-input-range-thumb-size: Sets the thumb width and height of the component\n * @prop --mds-input-range-thumb-background:\n * @prop --mds-input-range-track-background:\n * @prop --mds-input-range-track-size:\n * @prop --mds-input-range-track-progress-background:\n */\n\n:host {\n\n  --mds-input-range-thumb-size: 1rem;\n  --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n  --mds-input-range-thumb-shadow: 0 0 0 2px rgb(var(--tone-neutral));\n  --mds-input-range-track-background: rgb(var(--tone-neutral-09));\n  --mds-input-range-track-size: 0.5rem;\n  --mds-input-range-track-progress-background: rgb(var(--variant-primary-03));\n  gap: 0.25rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n\n  display: grid;\n  -webkit-transition-property: color;\n  transition-property: color;\n}\n\n.header {\n  gap: 0.5rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.label {\n  min-width: 0rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value {\n  margin-left: auto;\n}\n\n.range {\n  -ms-flex-align: center;\n  align-items: center;\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-thumb-size);\n  position: relative;\n}\n\n.track {\n  width: 100%;\n\n  --margin: calc(var(--mds-input-range-track-size) / 2);\n\n  -webkit-box-sizing: border-box;\n\n  box-sizing: border-box;\n  padding: 0 var(--margin);\n  position: absolute;\n}\n\n.field {\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n  }\n\n.field:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.field {\n  z-index: 20;\n  height: 1rem;\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: transparent;\n  border-radius: 1000px;\n  -ms-flex-positive: 1;\n  flex-grow: 1;\n  margin: 0;\n}\n\n.field:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n  }\n\n.field::-webkit-slider-thumb {\n  -webkit-appearance: none;\n          appearance: none;\n  background-color: var(--mds-input-range-thumb-background);\n  border: 0;\n  border-radius: var(--mds-input-range-thumb-size);\n  -webkit-box-shadow: var(--mds-input-range-thumb-shadow);\n  box-shadow: var(--mds-input-range-thumb-shadow);\n  cursor: -webkit-grab;\n  cursor: grab;\n  height: var(--mds-input-range-thumb-size);\n  line-height: 0;\n  -webkit-transform: translate(0, -50%);\n  transform: translate(0, -50%);\n  width: var(--mds-input-range-thumb-size);\n}\n\n.field::-webkit-slider-runnable-track {\n  -webkit-appearance: none;\n          appearance: none;\n  border: 0;\n  height: 0;\n  width: 100%;\n}\n\n.track-progress {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-input-range-track-progress-background);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-track-size);\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n}\n\n.track-total {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  background-color: var(--mds-input-range-track-background);\n  border-radius: var(--mds-input-range-track-size);\n  display: -ms-flexbox;\n  display: flex;\n  height: var(--mds-input-range-track-size);\n  overflow: hidden;\n  -webkit-transition-property: background-color;\n  transition-property: background-color;\n  width: 100%;\n}\n\n.contrast-area {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n\n  border-radius: var(--mds-input-range-track-size);\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .field::-webkit-slider-thumb,\n  .field::-webkit-slider-runnable-track,\n  .track-progress,\n  .track-total {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .field::-webkit-slider-thumb,\n    .field::-webkit-slider-runnable-track,\n    .track-progress,\n    .track-total {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n    --mds-input-range-track-background: rgb(var(--tone-neutral-07));\n    --mds-input-range-track-progress-background: rgb(var(--variant-primary-05));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-range-thumb-background: rgb(var(--variant-primary-04));\n      --mds-input-range-track-background: rgb(var(--tone-neutral-07));\n      --mds-input-range-track-progress-background: rgb(var(--variant-primary-05));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n";
 const MdsInputRangeStyle0 = mdsInputRangeCss;
 
 const MdsInputRange = class {
@@ -56,13 +56,14 @@ const MdsInputRange = class {
         this.calculateProgress();
     }
     componentDidLoad() {
-        var _a;
-        this.inputElement = (_a = this.element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.field');
+        var _a, _b;
+        this.label = (_a = this.element.textContent) !== null && _a !== void 0 ? _a : '';
+        this.inputElement = (_b = this.element.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.field');
         this.value = parseInt(this.inputElement.value);
         this.calculateProgress();
     }
     render() {
-        return (h(Host, { key: '9c8324dfe76033ae1451587cd50793e7ceacc284' }, h("header", { key: '69f40e9bec14e0e1d119f90c55a625b905266aa1', class: "header", part: "header" }, h("mds-text", { key: '08b0175db859f964c1a13a47335375f70edaf353', class: "label", typography: "label" }, h("slot", { key: '4b3c07572221ead50e00cc788c3ab55b338c15c0' })), h("mds-text", { key: '82f212eac1211e8b5fe2605f35ad7652d63b61ea', class: "value", typography: "label" }, this.value)), h("div", { key: '5f55fa2197a934b8feb0dc539c966c054a824558', class: "range" }, h("div", { key: '5fd94d96b3b43c88d22bd2636f34bafb21b41bd1', class: "track" }, h("div", { key: '2364fb6dcbe24ec0b23588af1f308e90fe23addc', class: "contrast-area" }), h("div", { key: '688bb44d42d7946f0c6d2e846f9514df9df4a49d', class: "track-total" }, h("div", { key: '05d431cf526193667f88b74c3349e910076f2849', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: 'edc77c0c0b8bafbe3aafae85d8bcf6f1a682f1d4', class: "field", max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
+        return (h(Host, { key: 'c92ab8563410461213ec304d48633fa05aa2a914' }, h("header", { key: '761ee2fd85bd78beaead463ac24aa356e23359eb', class: "header", part: "header" }, h("mds-text", { key: '3917734e52ba2f28cb0182870945f5a25c384189', class: "label", typography: "label" }, h("slot", { key: '7295908985059db99d628e6d8414d5304874e0e8' })), h("mds-text", { key: '0d39a81709459e0478dfa2812cc861bfaf072c46', class: "value", typography: "label" }, this.value)), h("div", { key: 'a459a88c212591bff0d8e93793db770141c09a50', class: "range" }, h("div", { key: '165870361567832a29263f4d5b86bfb6aa5a2123', class: "track" }, h("div", { key: 'abd1017e7a33fe82398d77d28d8f56bb4459bde7', class: "contrast-area" }), h("div", { key: '22475d8687c090f2f403bbf8e3726b08982a84af', class: "track-total" }, h("div", { key: '151b6e11544724e3d95347046629499738090e1c', class: "track-progress", style: { width: `${this.progress}%` } }))), h("input", { key: 'b1f06f7712d1b682c2bfee7417eb27bc520da234', class: "field", "aria-label": this.label, max: this.max, min: this.min, onInput: this.onInput, step: this.step, type: "range", value: this.value }))));
     }
     static get formAssociated() { return true; }
     get element() { return getElement(this); }

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { m as miBaselineArrowDown } from './keyboard-arrow-down-fa82970e.js';
 
-const mdsInputSelectCss = "@tailwind components;\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host([required]:not([required=\"false\"]):focus-within) .icon {\n  -webkit-transform: translate(0.375rem, 0.375rem);\n  transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, fill;\n  transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon {\n  fill: rgb(var(--tone-neutral-06));\n  -webkit-transform: translate(0.625rem, 0.5rem);\n  transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--brand-maggioli-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--brand-maggioli-04)));\n  -webkit-transition-property: background-color, fill;\n  transition-property: background-color, fill;\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--brand-maggioli-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--brand-maggioli-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--brand-maggioli-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--brand-maggioli-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--brand-maggioli-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--brand-maggioli-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:hover ),\n:host( [variant=\"info\"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:hover ),\n:host( [variant=\"success\"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:hover ),\n:host( [variant=\"warning\"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:hover ),\n:host( [variant=\"error\"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--brand-maggioli-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n";
+const mdsInputSelectCss = "@tailwind components;\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host([required]:not([required=\"false\"]):focus-within) .icon {\n  -webkit-transform: translate(0.375rem, 0.375rem);\n  transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n  --mds-input-select-variant-color: var(--variant-primary-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, fill;\n  transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=\"\"])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled=\"false\"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled=\"false\"])) .icon {\n  fill: rgb(var(--tone-neutral-06));\n  -webkit-transform: translate(0.625rem, 0.5rem);\n  transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n  -webkit-transition-property: background-color, fill;\n  transition-property: background-color, fill;\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--variant-primary-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host( [variant=\"info\"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"info\"]:hover ),\n:host( [variant=\"info\"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant=\"success\"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"success\"]:hover ),\n:host( [variant=\"success\"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant=\"warning\"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"warning\"]:hover ),\n:host( [variant=\"warning\"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant=\"error\"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant=\"error\"]:hover ),\n:host( [variant=\"error\"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n";
 const MdsInputSelectStyle0 = mdsInputSelectCss;
 
 const MdsInputSelect = class {
@@ -91,20 +91,20 @@ const MdsInputSelect = class {
      * Emits the change event when the component value changes
      */
     valueChanged() {
-        var _a;
+        var _a, _b, _c;
         this.selected = this.value !== '';
-        this.changeEvent.emit({ value: this.value });
-        this.internals.setFormValue((_a = this.value) !== null && _a !== void 0 ? _a : null);
+        this.changeEvent.emit({ value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString() });
+        this.internals.setFormValue((_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : null);
     }
     componentDidLoad() {
         if (this.value) {
             this.selected = true;
-            this.internals.setFormValue(this.value);
+            this.internals.setFormValue(this.value.toString());
         }
     }
     render() {
-        return (h(Host, { key: '6de32fabaad2ade098b2eb2b518c7679c4cdf986' }, h("select", { key: '5b024f08aaa0a61afd088e6d33144d05aa920ed4', class: clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select" }, this.placeholder && h("option", { key: '0dbfee31bcd9e66faeb1ac6f6060df5aa6534319', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '31a79728c16dab94dd0f500f311dd29849b0ba84', class: "icon-container" }, h("i", { key: '40c4e77003c6df880931decad9fcfc77c943b119', class: "icon", innerHTML: miBaselineArrowDown })), h("div", { key: '6937fa4072834a9a52f4023ec3dd17ad3f4b473f', class: "option-container" }, h("slot", { key: '22b1c2ce6ebbc05c124b9d47fac5f5ba8fcb9e6e', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: '469bc58f25c21b93179c4787e98041c973ae4ffe', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: '73fdfa42bf8abff88df3ab5f91066df58d663ebe', expanded: true, variant: "disabled" }), this.required &&
-            h("mds-input-tip-item", { key: 'c99eb7bdf0efb27f938bb03fb0633c0da67223ca', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
+        return (h(Host, { key: 'e1ea289b9af23ce497e370abd8d874d739d4eb77' }, h("select", { key: '0df60946dc418b09ada1dfb04ad5f0d962bd93f7', class: clsx('input', this.selected && 'input--selected'), onInput: this.onInput.bind(this), onBlur: this.onBlur, onFocus: this.onFocus, name: this.name, required: this.required, disabled: this.disabled, multiple: this.multiple, size: this.size, part: "select" }, this.placeholder && h("option", { key: 'e39a3bce88402b2caf01d565d365102e35af7f52', value: "", disabled: true, selected: true }, this.placeholder)), h("div", { key: '4c9de2341fcf7406f053e69ae4110d74633b3817', class: "icon-container" }, h("i", { key: 'cb279deb238fbec77456e3d5322e05bbcb6068ac', class: "icon", innerHTML: miBaselineArrowDown })), h("div", { key: '4a83b6b1daadb49197a9dcd7db57d2670f480955', class: "option-container" }, h("slot", { key: '43a3d13257bfea367bf1abb5d95137fdc2940138', onSlotchange: this.onSlotChangeHandler })), h("mds-input-tip", { key: 'b8ab18d380eec1842ed12487f819e8eb32132a5d', position: "top", active: this.hasFocus }, this.disabled && h("mds-input-tip-item", { key: 'b1bfb92dae2d4b48784958158edc2559d338931e', expanded: true, variant: "disabled" }), this.required &&
+            h("mds-input-tip-item", { key: '9f441604bfc6035b0f1875ae17026a8a369ec620', expanded: this.hasFocus, variant: this.value === '' ? 'required' : 'required-success' }))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { m as miBaselineRemove } from './remove-777e39e1.js';
-import { K as KeyboardManager } from './keyboard-manager-f3d273fc.js';
+import { K as KeyboardManager } from './keyboard-manager-9f287ab7.js';
 
 const miBaselineChecked = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
   <path d="M16.59 7.58 10 14.17l-2.59-2.58L6 13l4 4 8-8z"/>
@@ -36,7 +36,7 @@ const inputSwitchIconVariant = {
     },
 };
 
-const mdsInputSwitchCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; @tailwind utilities; :host{--mds-input-switch-animation-timing-adjust:1.4;--mds-input-switch-animation-timing-function:cubic-bezier(0.455, 0.03, 0.515, 0.955);--mds-input-switch-duration:300ms;--mds-input-switch-icon-color-checked-disabled:rgb(var(--tone-neutral-06));--mds-input-switch-icon-color-checked:rgb(var(--brand-maggioli-04));--mds-input-switch-icon-color-indeterminate-disabled:rgb(var(--tone-neutral-05));--mds-input-switch-icon-color-indeterminate:rgb(var(--tone-neutral-05));--mds-input-switch-icon-color-unchecked-disabled:rgb(var(--tone-neutral-06));--mds-input-switch-icon-color-unchecked:rgb(var(--tone-neutral-06));--mds-input-switch-box-color-checked:rgb(var(--brand-maggioli-04));--mds-input-switch-box-color-disabled-checked:rgb(var(--tone-neutral-06));--mds-input-switch-box-color-disabled-unchecked:rgb(var(--tone-neutral-08));--mds-input-switch-box-color-unchecked:rgb(var(--tone-neutral-07));--mds-input-switch-box-padding-sm:0.25rem;--mds-input-switch-box-padding-md:0.25rem;--mds-input-switch-box-padding-lg:0.25rem;--mds-input-switch-toggle-color-checked:rgb(var(--tone-neutral));--mds-input-switch-toggle-color-disabled-checked:rgb(var(--tone-neutral));--mds-input-switch-toggle-color-disabled-unchecked:rgb(var(--tone-neutral-09));--mds-input-switch-toggle-color-unchecked:rgb(var(--tone-neutral-10));--mds-input-switch-toggle-size-sm:1rem;--mds-input-switch-toggle-size-md:1.5rem;--mds-input-switch-toggle-size-lg:2rem;--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked);--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-md);--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-md) * 2) + calc(var(--mds-input-switch-box-padding-md) * 2));--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-md);gap:0.5rem;-ms-flex-align:start;align-items:flex-start;display:-ms-inline-flexbox;display:inline-flex}.field{display:none}.label-icon{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.label-icon:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.label-icon{-ms-flex-align:baseline;align-items:baseline;cursor:pointer;display:-ms-flexbox;display:flex;position:relative;-webkit-transition-property:outline-offset opacity;transition-property:outline-offset opacity}.label-icon:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.label-text{cursor:pointer;display:-ms-flexbox;display:flex}:host([type=\"switch\"]) .label-text{-ms-flex-align:center;align-items:center;-ms-flex-item-align:center;align-self:center}.icon-explicit{fill:var(--mds-input-switch-icon-explicit-color);height:var(--mds-input-switch-toggle-size);width:var(--mds-input-switch-toggle-size)}.icon-typography-checked,.icon-typography-unchecked{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex}.icon-typography-checked{left:0rem;top:0rem;position:absolute}.icon-checked,.icon-unchecked{font-weight:400;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);-webkit-transition-property:fill, -webkit-transform;transition-property:fill, -webkit-transform;transition-property:fill, transform;transition-property:fill, transform, -webkit-transform}.icon-unchecked{fill:var(--mds-input-switch-icon-color-unchecked);opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition-duration:var(--mds-input-switch-duration);transition-duration:var(--mds-input-switch-duration)}.icon-checked{fill:var(--mds-input-switch-icon-color-checked);-webkit-transform:scale(0);transform:scale(0);-webkit-transition-duration:var(--mds-input-switch-duration);transition-duration:var(--mds-input-switch-duration)}:host([indeterminate]) .icon-checked{fill:var(--mds-input-switch-icon-color-indeterminate)}.switch-container{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.switch-container:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.switch-container{border-radius:9999px;-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-transition-property:width outline-offset opacity;transition-property:width outline-offset opacity;width:var(--mds-input-switch-toggle-container-size)}.switch-container:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.switch{border-radius:9999px;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--mds-input-switch-box-color-unchecked);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;padding:var(--mds-input-switch-box-padding);-webkit-transition-duration:var(--mds-input-switch-duration);transition-duration:var(--mds-input-switch-duration);-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;width:var(--mds-input-switch-toggle-container-size)}.switch-toggle{border-radius:9999px;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:linear;transition-timing-function:linear;-ms-flex-align:center;align-items:center;-webkit-animation-duration:calc(var(--mds-input-switch-duration) * 1.5);animation-duration:calc(var(--mds-input-switch-duration) * 1.5);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:none;animation-name:none;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:var(--mds-input-switch-animation-timing-function);animation-timing-function:var(--mds-input-switch-animation-timing-function);background-color:var(--mds-input-switch-toggle-color-checked);-webkit-box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);cursor:pointer;display:-ms-flexbox;display:flex;height:var(--mds-input-switch-toggle-size);-ms-flex-pack:center;justify-content:center;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;width:var(--mds-input-switch-toggle-size)}.field:disabled+.label-icon{cursor:default}.field:disabled+.label-icon+.label-text{cursor:default}.field:checked+.switch-container .switch{background-color:var(--mds-input-switch-box-color-checked)}.field:checked+.switch-container .switch-toggle{-webkit-animation-name:check;animation-name:check;-webkit-animation-play-state:initial;animation-play-state:initial;background-color:var(--mds-input-switch-toggle-color-checked)}.field:not(:checked)+.dirty .switch-toggle{-webkit-animation-name:uncheck;animation-name:uncheck;-webkit-animation-play-state:initial;animation-play-state:initial;background-color:var(--mds-input-switch-toggle-color-unchecked)}.field:disabled+.switch-container .switch{background-color:var(--mds-input-switch-box-color-disabled-unchecked)}.field:checked:disabled+.switch-container .switch{background-color:var(--mds-input-switch-box-color-disabled-checked)}.field:disabled+.switch-container .switch-toggle{background-color:var(--mds-input-switch-toggle-color-disabled-unchecked)}.field:checked:disabled+.switch-container .switch-toggle{background-color:var(--mds-input-switch-toggle-color-disabled-checked)}@-webkit-keyframes check{0%{-webkit-transform:translateX(0);transform:translateX(0);width:var(--mds-input-switch-toggle-size)}50%{-webkit-transform:translateX(0);transform:translateX(0);width:calc(var(--mds-input-switch-toggle-size) * var(--mds-input-switch-animation-timing-adjust))}100%{-webkit-transform:translateX(100%);transform:translateX(100%);width:var(--mds-input-switch-toggle-size)}}@keyframes check{0%{-webkit-transform:translateX(0);transform:translateX(0);width:var(--mds-input-switch-toggle-size)}50%{-webkit-transform:translateX(0);transform:translateX(0);width:calc(var(--mds-input-switch-toggle-size) * var(--mds-input-switch-animation-timing-adjust))}100%{-webkit-transform:translateX(100%);transform:translateX(100%);width:var(--mds-input-switch-toggle-size)}}@-webkit-keyframes uncheck{0%{-webkit-transform:translateX(100%);transform:translateX(100%);width:var(--mds-input-switch-toggle-size)}50%{-webkit-transform:translateX(0);transform:translateX(0);width:calc(var(--mds-input-switch-toggle-size) * var(--mds-input-switch-animation-timing-adjust))}100%{-webkit-transform:translateX(0);transform:translateX(0);width:var(--mds-input-switch-toggle-size)}}@keyframes uncheck{0%{-webkit-transform:translateX(100%);transform:translateX(100%);width:var(--mds-input-switch-toggle-size)}50%{-webkit-transform:translateX(0);transform:translateX(0);width:calc(var(--mds-input-switch-toggle-size) * var(--mds-input-switch-animation-timing-adjust))}100%{-webkit-transform:translateX(0);transform:translateX(0);width:var(--mds-input-switch-toggle-size)}}:host([explicit]:not([explicit=\"false\"]) [checked]:not([checked=\"false\"]) [disabled]){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked)}:host([explicit]:not([explicit=\"false\"]) [checked]:not([checked=\"false\"]) [disabled]:not([disabled=\"false\"])){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked-disabled)}:host([explicit]:not([explicit=\"false\"]) [checked] [disabled]){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-unchecked)}:host([explicit]:not([explicit=\"false\"]) [disabled]:not([disabled=\"false\"]) [checked]){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-unchecked-disabled)}.field:checked+.label-icon .icon-unchecked{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-transition-duration:calc(var(--mds-input-switch-duration) * 2);transition-duration:calc(var(--mds-input-switch-duration) * 2)}.field:checked+.label-icon .icon-checked{-webkit-transform:scale(1);transform:scale(1);-webkit-transition-duration:calc(var(--mds-input-switch-duration) * 1.5);transition-duration:calc(var(--mds-input-switch-duration) * 1.5)}.field:disabled+.label-icon .icon-unchecked{fill:var(--mds-input-switch-icon-color-unchecked-disabled)}.field:disabled+.label-icon .icon-checked{fill:var(--mds-input-switch-icon-color-checked-disabled)}.indeterminate .field:disabled+.label-icon .icon-checked{fill:var(--mds-input-switch-icon-color-indeterminate-disabled)}:host([size=\"sm\"]){--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-sm);--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-sm);--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-sm) * 2) + calc(var(--mds-input-switch-box-padding-sm) * 2))}:host([size=\"md\"]){--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-md);--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-md);--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-md) * 2) + calc(var(--mds-input-switch-box-padding-md) * 2))}:host([size=\"lg\"]){--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-lg);--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-lg);--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-lg) * 2) + calc(var(--mds-input-switch-box-padding-lg) * 2))}";
+const mdsInputSwitchCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset, 6px)}50%{outline-offset:var(--magma-outline-blur-offset, 2px)}}@tailwind components; @tailwind utilities; :host{--mds-input-switch-animation-timing-adjust:1.4;--mds-input-switch-animation-timing-function:cubic-bezier(0.455, 0.03, 0.515, 0.955);--mds-input-switch-duration:300ms;--mds-input-switch-icon-color-checked-disabled:rgb(var(--tone-neutral-06));--mds-input-switch-icon-color-checked:rgb(var(--variant-primary-04));--mds-input-switch-icon-color-indeterminate-disabled:rgb(var(--tone-neutral-05));--mds-input-switch-icon-color-indeterminate:rgb(var(--tone-neutral-05));--mds-input-switch-icon-color-unchecked-disabled:rgb(var(--tone-neutral-06));--mds-input-switch-icon-color-unchecked:rgb(var(--tone-neutral-06));--mds-input-switch-box-color-checked:rgb(var(--variant-primary-04));--mds-input-switch-box-color-disabled-checked:rgb(var(--tone-neutral-06));--mds-input-switch-box-color-disabled-unchecked:rgb(var(--tone-neutral-08));--mds-input-switch-box-color-unchecked:rgb(var(--tone-neutral-07));--mds-input-switch-box-padding-sm:0.25rem;--mds-input-switch-box-padding-md:0.25rem;--mds-input-switch-box-padding-lg:0.25rem;--mds-input-switch-toggle-color-checked:rgb(var(--tone-neutral));--mds-input-switch-toggle-color-disabled-checked:rgb(var(--tone-neutral));--mds-input-switch-toggle-color-disabled-unchecked:rgb(var(--tone-neutral-09));--mds-input-switch-toggle-color-unchecked:rgb(var(--tone-neutral-10));--mds-input-switch-toggle-size-sm:1rem;--mds-input-switch-toggle-size-md:1.5rem;--mds-input-switch-toggle-size-lg:2rem;--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked);--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-md);--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-md) * 2) + calc(var(--mds-input-switch-box-padding-md) * 2));--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-md);gap:0.5rem;-ms-flex-align:start;align-items:flex-start;display:-ms-inline-flexbox;display:inline-flex}.field{display:none}.label-icon{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.label-icon:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.label-icon{-ms-flex-align:baseline;align-items:baseline;cursor:pointer;display:-ms-flexbox;display:flex;position:relative;-webkit-transition-property:outline-offset opacity;transition-property:outline-offset opacity}.label-icon:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.label-text{cursor:pointer;display:-ms-flexbox;display:flex}:host([type=\"switch\"]) .label-text{-ms-flex-align:center;align-items:center;-ms-flex-item-align:center;align-self:center}.icon-explicit{fill:var(--mds-input-switch-icon-explicit-color);height:var(--mds-input-switch-toggle-size);width:var(--mds-input-switch-toggle-size)}.icon-typography-checked,.icon-typography-unchecked{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex}.icon-typography-checked{left:0rem;top:0rem;position:absolute}.icon-checked,.icon-unchecked{font-weight:400;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);-webkit-transition-property:fill, -webkit-transform;transition-property:fill, -webkit-transform;transition-property:fill, transform;transition-property:fill, transform, -webkit-transform}.icon-unchecked{fill:var(--mds-input-switch-icon-color-unchecked);opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition-duration:var(--mds-input-switch-duration);transition-duration:var(--mds-input-switch-duration)}.icon-checked{fill:var(--mds-input-switch-icon-color-checked);-webkit-transform:scale(0);transform:scale(0);-webkit-transition-duration:var(--mds-input-switch-duration);transition-duration:var(--mds-input-switch-duration)}:host([indeterminate]) .icon-checked{fill:var(--mds-input-switch-icon-color-indeterminate)}.switch-container{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.switch-container:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.switch-container{border-radius:9999px;-ms-flex-item-align:stretch;align-self:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-transition-property:width outline-offset opacity;transition-property:width outline-offset opacity;width:var(--mds-input-switch-toggle-container-size)}.switch-container:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.switch{border-radius:9999px;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);background-color:var(--mds-input-switch-box-color-unchecked);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0;padding:var(--mds-input-switch-box-padding);-webkit-transition-duration:var(--mds-input-switch-duration);transition-duration:var(--mds-input-switch-duration);-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;width:var(--mds-input-switch-toggle-container-size)}.switch-toggle{border-radius:9999px;-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-timing-function:linear;transition-timing-function:linear;-ms-flex-align:center;align-items:center;-webkit-animation-duration:calc(var(--mds-input-switch-duration) * 1.5);animation-duration:calc(var(--mds-input-switch-duration) * 1.5);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:none;animation-name:none;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:var(--mds-input-switch-animation-timing-function);animation-timing-function:var(--mds-input-switch-animation-timing-function);background-color:var(--mds-input-switch-toggle-color-checked);-webkit-box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);cursor:pointer;display:-ms-flexbox;display:flex;height:var(--mds-input-switch-toggle-size);-ms-flex-pack:center;justify-content:center;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;width:var(--mds-input-switch-toggle-size)}.field:disabled+.label-icon{cursor:default}.field:disabled+.label-icon+.label-text{cursor:default}.field:checked+.switch-container .switch{background-color:var(--mds-input-switch-box-color-checked)}.field:checked+.switch-container .switch-toggle{-webkit-animation-name:check;animation-name:check;-webkit-animation-play-state:initial;animation-play-state:initial;background-color:var(--mds-input-switch-toggle-color-checked)}.field:not(:checked)+.dirty .switch-toggle{-webkit-animation-name:uncheck;animation-name:uncheck;-webkit-animation-play-state:initial;animation-play-state:initial;background-color:var(--mds-input-switch-toggle-color-unchecked)}.field:disabled+.switch-container .switch{background-color:var(--mds-input-switch-box-color-disabled-unchecked)}.field:checked:disabled+.switch-container .switch{background-color:var(--mds-input-switch-box-color-disabled-checked)}.field:disabled+.switch-container .switch-toggle{background-color:var(--mds-input-switch-toggle-color-disabled-unchecked)}.field:checked:disabled+.switch-container .switch-toggle{background-color:var(--mds-input-switch-toggle-color-disabled-checked)}@-webkit-keyframes check{0%{-webkit-transform:translateX(0);transform:translateX(0);width:var(--mds-input-switch-toggle-size)}50%{-webkit-transform:translateX(0);transform:translateX(0);width:calc(var(--mds-input-switch-toggle-size) * var(--mds-input-switch-animation-timing-adjust))}100%{-webkit-transform:translateX(100%);transform:translateX(100%);width:var(--mds-input-switch-toggle-size)}}@keyframes check{0%{-webkit-transform:translateX(0);transform:translateX(0);width:var(--mds-input-switch-toggle-size)}50%{-webkit-transform:translateX(0);transform:translateX(0);width:calc(var(--mds-input-switch-toggle-size) * var(--mds-input-switch-animation-timing-adjust))}100%{-webkit-transform:translateX(100%);transform:translateX(100%);width:var(--mds-input-switch-toggle-size)}}@-webkit-keyframes uncheck{0%{-webkit-transform:translateX(100%);transform:translateX(100%);width:var(--mds-input-switch-toggle-size)}50%{-webkit-transform:translateX(0);transform:translateX(0);width:calc(var(--mds-input-switch-toggle-size) * var(--mds-input-switch-animation-timing-adjust))}100%{-webkit-transform:translateX(0);transform:translateX(0);width:var(--mds-input-switch-toggle-size)}}@keyframes uncheck{0%{-webkit-transform:translateX(100%);transform:translateX(100%);width:var(--mds-input-switch-toggle-size)}50%{-webkit-transform:translateX(0);transform:translateX(0);width:calc(var(--mds-input-switch-toggle-size) * var(--mds-input-switch-animation-timing-adjust))}100%{-webkit-transform:translateX(0);transform:translateX(0);width:var(--mds-input-switch-toggle-size)}}:host([explicit]:not([explicit=\"false\"]) [checked]:not([checked=\"false\"]) [disabled]){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked)}:host([explicit]:not([explicit=\"false\"]) [checked]:not([checked=\"false\"]) [disabled]:not([disabled=\"false\"])){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-checked-disabled)}:host([explicit]:not([explicit=\"false\"]) [checked] [disabled]){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-unchecked)}:host([explicit]:not([explicit=\"false\"]) [disabled]:not([disabled=\"false\"]) [checked]){--mds-input-switch-icon-explicit-color:var(--mds-input-switch-icon-color-unchecked-disabled)}.field:checked+.label-icon .icon-unchecked{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-transition-duration:calc(var(--mds-input-switch-duration) * 2);transition-duration:calc(var(--mds-input-switch-duration) * 2)}.field:checked+.label-icon .icon-checked{-webkit-transform:scale(1);transform:scale(1);-webkit-transition-duration:calc(var(--mds-input-switch-duration) * 1.5);transition-duration:calc(var(--mds-input-switch-duration) * 1.5)}.field:disabled+.label-icon .icon-unchecked{fill:var(--mds-input-switch-icon-color-unchecked-disabled)}.field:disabled+.label-icon .icon-checked{fill:var(--mds-input-switch-icon-color-checked-disabled)}.indeterminate .field:disabled+.label-icon .icon-checked{fill:var(--mds-input-switch-icon-color-indeterminate-disabled)}:host([size=\"sm\"]){--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-sm);--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-sm);--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-sm) * 2) + calc(var(--mds-input-switch-box-padding-sm) * 2))}:host([size=\"md\"]){--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-md);--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-md);--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-md) * 2) + calc(var(--mds-input-switch-box-padding-md) * 2))}:host([size=\"lg\"]){--mds-input-switch-box-padding:var(--mds-input-switch-box-padding-lg);--mds-input-switch-toggle-size:var(--mds-input-switch-toggle-size-lg);--mds-input-switch-toggle-container-size:calc(calc(var(--mds-input-switch-toggle-size-lg) * 2) + calc(var(--mds-input-switch-box-padding-lg) * 2))}";
 const MdsInputSwitchStyle0 = mdsInputSwitchCss;
 
 const MdsInputSwitch = class {
@@ -104,19 +104,20 @@ const MdsInputSwitch = class {
         this.value = '';
     }
     componentDidLoad() {
-        var _a;
-        this.internals.setFormValue(this.checked ? (_a = this.value) !== null && _a !== void 0 ? _a : null : null);
+        var _a, _b;
+        this.label = (_a = this.host.textContent) !== null && _a !== void 0 ? _a : '';
+        this.internals.setFormValue(this.checked ? (_b = this.value) !== null && _b !== void 0 ? _b : null : null);
         this.checkFocusElement();
     }
     render() {
         var _a;
         const { iconChecked, iconUnchecked, iconIndeterminate } = inputSwitchIconVariant[this.type];
         const iconCheckedUser = this.icon !== '' ? this.icon : iconChecked;
-        return (h(Host, { key: 'c2676f5b032e265a4cf226881f2770fe59d9a7b4', onClick: this.handleDirty }, h("input", { key: '26d6c9c59360a70777d764a0916b8b35c76c3379', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: event => this.handleInputOnChange(event), type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch'
+        return (h(Host, { key: 'f9a223e37e15669ba5b8ed7e7f771c4445f24c15', onClick: this.handleDirty }, h("input", { key: '3a3fe64406b9617e777fcb18ea02c8d32e71e7af', autoFocus: this.autofocus, checked: this.checked, class: "field", disabled: this.disabled, id: "field", indeterminate: this.indeterminate, name: this.name, onChange: event => this.handleInputOnChange(event), type: this.type === 'switch' ? 'checkbox' : this.type, value: (_a = this.value) !== null && _a !== void 0 ? _a : undefined }), this.type === 'switch'
             ?
-                h("label", { htmlFor: "field", class: clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", role: "switch" }, h("div", { class: "switch" }, h("div", { class: "switch-toggle" }, this.explicit && h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : miBaselineRemove }))))
+                h("label", { htmlFor: "field", class: clsx('switch-container', this.dirty !== false && 'dirty'), tabindex: "0", "aria-label": this.label }, h("div", { class: "switch" }, h("div", { class: "switch-toggle" }, this.explicit && h("mds-icon", { class: "icon-explicit", name: this.checked ? miBaselineChecked : miBaselineRemove }))))
             :
-                h("label", { htmlFor: "field", class: "label-icon", tabindex: "0", role: "switch" }, h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-unchecked", name: iconUnchecked })), h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-checked", name: clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))), h("label", { key: 'd88da755d33ef95c388ada564b3a95ceab951b91', htmlFor: "field", class: "label-text" }, h("mds-text", { key: 'a3707cc5351f6c6193112fb7f60a8d565d0502df', typography: this.typography, variant: this.variant }, h("slot", { key: 'ac7aa4307abdc40cc51ffd9248b8564d8366ab80' })))));
+                h("label", { htmlFor: "field", class: "label-icon", "aria-hidden": "true" }, h("mds-text", { class: "icon-typography-unchecked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-unchecked", name: iconUnchecked })), h("mds-text", { class: "icon-typography-checked", tag: "div", typography: this.typography, variant: this.variant }, h("mds-icon", { class: "icon-checked", name: clsx(this.indeterminate ? iconIndeterminate : iconCheckedUser) }))), h("label", { key: '4f9a69c82ecc673d34a2de4119709b82f5836313', htmlFor: "field", class: "label-text" }, h("mds-text", { key: '94b9e53c0ec630e477cbcada5d3c8342655b9dd9', typography: this.typography, variant: this.variant }, h("slot", { key: 'c4180e63473708002b9ccac0eb222c8194f4433a' })))));
     }
     static get formAssociated() { return true; }
     get host() { return getElement(this); }

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-f08bac5f.js';
-import { L as Locale } from './locale-a730711f.js';
-import './_commonjsHelpers-e557d4a5.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-44fd80a1.js';
+import { L as Locale } from './locale-149207d6.js';
+import './_commonjsHelpers-bdec4bbd.js';
 
 const mdsInputTipCss = "@tailwind utilities;\n\n:host {\n\n  --mds-input-tip-active-translate: translate(0, 0);\n\n  left: 0.25rem;\n\n  right: 0.25rem;\n\n  gap: 0.25rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  display: -ms-flexbox;\n\n  display: flex;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n  pointer-events: none;\n  position: absolute;\n  -webkit-transform: var(--mds-input-tip-active-translate);\n  transform: var(--mds-input-tip-active-translate);\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n:host(:empty) {\n  display: none;\n}\n\n:host([position=\"top\"]) {\n  top: 0.25rem;\n}\n\n:host([position=\"bottom\"]) {\n  bottom: 0.25rem;\n}\n\n:host([position=\"top\"][active]:not([active=\"false\"])) {\n\n  --mds-input-tip-active-translate: translate(calc(0.25rem * -1), calc(0.25rem * -1));\n}\n\n:host([position=\"top\"][active]:not([active=\"false\"])) ::slotted( mds-input-tip-item ) {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n:host([position=\"bottom\"][active]:not([active=\"false\"])) {\n\n  --mds-input-tip-active-translate: translate(calc(0.25rem * -1), 0.25rem);\n}\n\n:host([position=\"bottom\"][active]:not([active=\"false\"])) ::slotted( mds-input-tip-item ) {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n";
 const MdsInputTipStyle0 = mdsInputTipCss;
@@ -19,10 +19,28 @@ MdsInputTip.style = MdsInputTipStyle0;
 
 const miBaselineDone = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4L9 16.2z"/></svg>`;
 
-const required$1 = "Required";
-const disabled$1 = "Disabled";
-const readonly$1 = "Read only";
+const required$3 = "Απαιτείται";
+const disabled$3 = "Απενεργοποιημένο";
+const readonly$3 = "Μόνο για ανάγνωση";
+const localeEl = {
+	required: required$3,
+	disabled: disabled$3,
+	readonly: readonly$3
+};
+
+const required$2 = "Required";
+const disabled$2 = "Disabled";
+const readonly$2 = "Read only";
 const localeEn = {
+	required: required$2,
+	disabled: disabled$2,
+	readonly: readonly$2
+};
+
+const required$1 = "Requerido";
+const disabled$1 = "Deshabilitado";
+const readonly$1 = "Solo lectura";
+const localeEs = {
 	required: required$1,
 	disabled: disabled$1,
 	readonly: readonly$1
@@ -45,21 +63,27 @@ const MdsInputTipItem = class {
         registerInstance(this, hostRef);
         this.t = new Locale({
             en: localeEn,
+            el: localeEl,
+            es: localeEs,
             it: localeIt,
         });
+        this.language = undefined;
         this.variant = 'required';
         this.expanded = true;
     }
+    async updateLang() {
+        this.language = this.t.lang(this.element);
+    }
     componentWillRender() {
         this.t.lang(this.element);
     }
     render() {
-        return (h(Host, { key: '7c43c391e7fd0c3d55d92eedc7cc5cadd4689215' }, h("div", { key: 'afaceaa0769892dfddf433a041d292b5dc3e7c2c', class: "content" }, this.variant === 'text' &&
-            h("mds-text", { key: '5fd3f799c904e8a0a7fb5cb2e8634164d38ba818', typography: "option", truncate: "word" }, h("span", { key: 'f2ae9cb7229c5c9d08777fc42c83acabaf3367e9', class: "text" }, h("slot", { key: '79d7b2ec986da254f6382ca4560a2aa594d16394' }))), this.variant === 'readonly' &&
-            h("mds-text", { key: '1fc3a0ee8291d209e9283cc875f65c93fd6177a0', typography: "option", truncate: "word" }, h("span", { key: '2248d66766b886a38b95a014044f375adc4f37e4', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'disabled' &&
-            h("mds-text", { key: 'fa7402f8a41bd583bb28514046efe4fabfad0c53', typography: "option", truncate: "word" }, h("span", { key: '0951fe81c0c50c9dc647d8709186d202ebb75195', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required' &&
-            h("mds-text", { key: 'faf16fe90889847544aaa976a952b352e086c4e6', typography: "option", truncate: "word" }, h("span", { key: 'fd3d53aef765e7a1ce8f08feb06f2d1959008488', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required-success' &&
-            h("span", { key: '422237ea1577f07a8e37a5ad964dcfbc52a60e98', class: "icon", innerHTML: miBaselineDone }))));
+        return (h(Host, { key: 'dfdba1a88042fc3a4fe6d29710e43cbddd797053' }, h("div", { key: 'cdc9cf831bb5621b046161ceed728f3cd52ab11c', class: "content" }, this.variant === 'text' &&
+            h("mds-text", { key: '3b53cc5eccd980f1666edfb1b9642d155bab8c15', typography: "option", truncate: "word" }, h("span", { key: '832d4dfa2c938a936bedbc0bdc00f446f71a53e3', class: "text" }, h("slot", { key: '5550f90749b34a8d748034f264089176d2735b55' }))), this.variant === 'readonly' &&
+            h("mds-text", { key: '7b7538403c428c440447a75b22952cc937d665f5', typography: "option", truncate: "word" }, h("span", { key: '0309833c99055fec6e8b5d8ec83220d8c0f7cf44', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'disabled' &&
+            h("mds-text", { key: '32b1fa3193f69afb0ad9fc8c4c303c29623ea572', typography: "option", truncate: "word" }, h("span", { key: 'dd4ae36e3e512f1f734fead8941a8b66e53536b6', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required' &&
+            h("mds-text", { key: 'ffcb47a3ad73190ae42540240b7b17b71a3ddc04', typography: "option", truncate: "word" }, h("span", { key: 'f810d3748dafcdf7d23ba65a137be9b7f8ddf7b3', class: "text" }, this.variant && this.t.get(this.variant.toString()))), this.variant === 'required-success' &&
+            h("span", { key: '97aeef9538a145cf335a857a334047627d190a8c', class: "icon", innerHTML: miBaselineDone }))));
     }
     get element() { return getElement(this); }
 };