@maggioli-design-system/mds-input-select 2.0.0 → 2.0.1

package/dist/mds-input-select/p-b7cb51b4.entry.js

@@ -0,0 +1 @@
+import{r as n,c as t,h as r,H as o,g as a}from"./p-babc558f.js";function i(n){var t,r,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var a=n.length;for(t=0;t<a;t++)n[t]&&(r=i(n[t]))&&(o&&(o+=" "),o+=r)}else for(r in n)n[r]&&(o&&(o+=" "),o+=r);return o}function e(){for(var n,t,r=0,o="",a=arguments.length;r<a;r++)(n=arguments[r])&&(t=i(n))&&(o&&(o+=" "),o+=t);return o}const s=class{constructor(r){n(this,r),this.changeEvent=t(this,"mdsInputSelectChange",7),r.$hostElement$["s-ei"]?this.internals=r.$hostElement$["s-ei"]:(this.internals=r.$hostElement$.attachInternals(),r.$hostElement$["s-ei"]=this.internals),this.onInput=n=>{const t=n.target;t&&(this.value=t.value)},this.onBlur=()=>{this.hasFocus=!1},this.onFocus=()=>{this.hasFocus=!0},this.emptyOptions=()=>{var n;const t=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelector("select"),r=null==t?void 0:t.querySelectorAll("option");r&&r.forEach(((n,t)=>{this.placeholder||n.remove(),this.placeholder&&t>0&&n.remove()}))},this.onSlotChangeHandler=()=>{var n,t,r;const o=null===(t=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelectorAll("slot")[0])||void 0===t?void 0:t.assignedNodes(),a=null===(r=this.host.shadowRoot)||void 0===r?void 0:r.querySelector("select"),i=null==a?void 0:a.querySelectorAll("option");i&&(!this.placeholder&&i.length>0&&this.emptyOptions(),this.placeholder&&i.length>1&&this.emptyOptions(),null==o||o.forEach((n=>{null==a||a.appendChild(n.cloneNode(!0))})),this.value&&(null==a||a.querySelectorAll("option").forEach((n=>{n.selected=n.value===this.value}))))},this.selected=void 0,this.hasFocus=!1,this.autocomplete=void 0,this.autoFocus=void 0,this.placeholder=void 0,this.name=void 0,this.disabled=!1,this.required=!1,this.multiple=!1,this.size=0,this.value="",this.variant=void 0}valueChanged(){var n;this.selected=""!==this.value,this.changeEvent.emit({value:this.value}),this.internals.setFormValue(null!==(n=this.value)&&void 0!==n?n:null)}componentDidLoad(){this.value&&(this.selected=!0,this.internals.setFormValue(this.value))}render(){return r(o,{key:"ea2542be96ac1e1fb7df7f0ed57341842827fcde"},r("select",{key:"ebd4810a2eb6b85b85feca18037b0419905276e4",class:e("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&&r("option",{key:"8e071e326a0e46f19931616099d6114ff5453609",value:"",disabled:!0,selected:!0},this.placeholder)),r("div",{key:"e081b71128730e9c2396e9ff5f4fae5c8f3707fb",class:"icon-container"},r("i",{key:"24c6ff4d6d6dcb1cadfe66666a971e8cef8835b9",class:"svg icon",innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6l1.41-1.41z"/></svg>'})),r("div",{key:"f21d4aeca656dd95081fe37e963e10de42cddc2a",class:"option-container"},r("slot",{key:"5e2d5bce08d8e8b0283c866956873092c6e0f715",onSlotchange:this.onSlotChangeHandler})),r("mds-input-tip",{key:"d4f14b01158d9aef1b3c4c7319d3077a8ad5a154",position:"top",active:this.hasFocus},this.disabled&&r("mds-input-tip-item",{key:"e3a21178db5726df5f91bf9213836f4388baf51e",expanded:!0,variant:"disabled"}),this.required&&r("mds-input-tip-item",{key:"614d37e64de08213f58a89d4f9e02508341614f3",expanded:this.hasFocus,variant:""===this.value?"required":"required-success"})))}static get formAssociated(){return!0}get host(){return a(this)}static get watchers(){return{value:["valueChanged"]}}};s.style='@tailwind components;\n@tailwind utilities;\n\n\n\n*, ::before, ::after{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-webkit-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::-ms-backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n\n\n\n::backdrop{\n\n  --tw-border-spacing-x: 0;\n\n  --tw-border-spacing-y: 0;\n\n  --tw-translate-x: 0;\n\n  --tw-translate-y: 0;\n\n  --tw-rotate: 0;\n\n  --tw-skew-x: 0;\n\n  --tw-skew-y: 0;\n\n  --tw-scale-x: 1;\n\n  --tw-scale-y: 1;\n\n  --tw-pan-x:  ;\n\n  --tw-pan-y:  ;\n\n  --tw-pinch-zoom:  ;\n\n  --tw-scroll-snap-strictness: proximity;\n\n  --tw-gradient-from-position:  ;\n\n  --tw-gradient-via-position:  ;\n\n  --tw-gradient-to-position:  ;\n\n  --tw-ordinal:  ;\n\n  --tw-slashed-zero:  ;\n\n  --tw-numeric-figure:  ;\n\n  --tw-numeric-spacing:  ;\n\n  --tw-numeric-fraction:  ;\n\n  --tw-ring-inset:  ;\n\n  --tw-ring-offset-width: 0px;\n\n  --tw-ring-offset-color: #fff;\n\n  --tw-ring-color: rgb(59 130 246 / 0.5);\n\n  --tw-ring-offset-shadow: 0 0 #0000;\n\n  --tw-ring-shadow: 0 0 #0000;\n\n  --tw-shadow: 0 0 #0000;\n\n  --tw-shadow-colored: 0 0 #0000;\n\n  --tw-blur:  ;\n\n  --tw-brightness:  ;\n\n  --tw-contrast:  ;\n\n  --tw-grayscale:  ;\n\n  --tw-hue-rotate:  ;\n\n  --tw-invert:  ;\n\n  --tw-saturate:  ;\n\n  --tw-sepia:  ;\n\n  --tw-drop-shadow:  ;\n\n  --tw-backdrop-blur:  ;\n\n  --tw-backdrop-brightness:  ;\n\n  --tw-backdrop-contrast:  ;\n\n  --tw-backdrop-grayscale:  ;\n\n  --tw-backdrop-hue-rotate:  ;\n\n  --tw-backdrop-invert:  ;\n\n  --tw-backdrop-opacity:  ;\n\n  --tw-backdrop-saturate:  ;\n\n  --tw-backdrop-sepia:  ;\n\n  --tw-contain-size:  ;\n\n  --tw-contain-layout:  ;\n\n  --tw-contain-paint:  ;\n\n  --tw-contain-style:  ;\n}\n.svg{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n.svg svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\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\n  --tw-translate-y: 0.375rem;\n\n  --tw-translate-x: 0.375rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\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-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\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}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\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\n  --tw-translate-y: 0.5rem;\n\n  --tw-translate-x: 0.625rem;\n\n  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n\n  fill: rgb(var(--tone-neutral-06));\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  border-radius: 9999px;\n\n  -webkit-transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;\n\n  transition-property: background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;\n\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\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}\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.visible{\n\n  visibility: visible;\n}\n\n.static{\n\n  position: static;\n}\n\n.fixed{\n\n  position: fixed;\n}\n\n.absolute{\n\n  position: absolute;\n}\n\n.border{\n\n  border-width: 1px;\n}\n\n.bg-label-amaranth-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-amaranth-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-aqua-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-aqua-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-blue-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-blue-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-green-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-green-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-lime-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-lime-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orange-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orange-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-orchid-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-orchid-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-violet-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-violet-10) / var(--tw-bg-opacity));\n}\n\n.bg-label-yellow-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--label-yellow-10) / var(--tw-bg-opacity));\n}\n\n.bg-tone-neutral-10{\n\n  --tw-bg-opacity: 1;\n\n  background-color: rgb(var(--tone-neutral-10) / var(--tw-bg-opacity));\n}\n\n.fill-label-amaranth-04{\n\n  fill: rgb(var(--label-amaranth-04));\n}\n\n.fill-label-aqua-04{\n\n  fill: rgb(var(--label-aqua-04));\n}\n\n.fill-label-blue-04{\n\n  fill: rgb(var(--label-blue-04));\n}\n\n.fill-label-green-04{\n\n  fill: rgb(var(--label-green-04));\n}\n\n.fill-label-lime-04{\n\n  fill: rgb(var(--label-lime-04));\n}\n\n.fill-label-orange-04{\n\n  fill: rgb(var(--label-orange-04));\n}\n\n.fill-label-orchid-04{\n\n  fill: rgb(var(--label-orchid-04));\n}\n\n.fill-label-violet-04{\n\n  fill: rgb(var(--label-violet-04));\n}\n\n.fill-label-yellow-04{\n\n  fill: rgb(var(--label-yellow-04));\n}\n\n.fill-tone-neutral-04{\n\n  fill: rgb(var(--tone-neutral-04));\n}\n\n.text-label-amaranth-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-amaranth-04) / var(--tw-text-opacity));\n}\n\n.text-label-aqua-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-aqua-04) / var(--tw-text-opacity));\n}\n\n.text-label-blue-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-blue-04) / var(--tw-text-opacity));\n}\n\n.text-label-green-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-green-04) / var(--tw-text-opacity));\n}\n\n.text-label-lime-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-lime-04) / var(--tw-text-opacity));\n}\n\n.text-label-orange-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orange-04) / var(--tw-text-opacity));\n}\n\n.text-label-orchid-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-orchid-04) / var(--tw-text-opacity));\n}\n\n.text-label-violet-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-violet-04) / var(--tw-text-opacity));\n}\n\n.text-label-yellow-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--label-yellow-04) / var(--tw-text-opacity));\n}\n\n.text-tone-neutral-04{\n\n  --tw-text-opacity: 1;\n\n  color: rgb(var(--tone-neutral-04) / var(--tw-text-opacity));\n}\n\n.shadow{\n\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n\n  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\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';export{s as mds_input_select}

package/dist/mds-input-select/p-babc558f.js

@@ -0,0 +1,2 @@
+var e=Object.defineProperty,t=new WeakMap,n=e=>t.get(e),l=(e,n)=>t.set(n.t=e,n),o=(e,t)=>t in e,s=(e,t)=>(0,console.error)(e,t),r=new Map,i=new Map,c="slot-fb{display:contents}slot-fb[hidden]{display:none}",a=["formAssociatedCallback","formResetCallback","formDisabledCallback","formStateRestoreCallback"],u="undefined"!=typeof window?window:{},f=u.document||{head:{}},h={l:0,o:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)},m=e=>Promise.resolve(e),p=(()=>{try{return new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync}catch(e){}return!1})(),d=!1,y=[],b=[],$=(e,t)=>n=>{e.push(n),d||(d=!0,t&&4&h.l?S(w):h.raf(w))},v=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){s(e)}e.length=0},w=()=>{v(y),v(b),(d=y.length>0)&&h.raf(w)},S=e=>m().then(e),g=$(b,!0),k={},j=e=>"object"==(e=typeof e)||"function"===e;function C(e){var t,n,l;return null!=(l=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?l:void 0}((t,n)=>{for(var l in n)e(t,l,{get:n[l],enumerable:!0})})({},{err:()=>O,map:()=>M,ok:()=>E,unwrap:()=>P,unwrapErr:()=>A});var E=e=>({isOk:!0,isErr:!1,value:e}),O=e=>({isOk:!1,isErr:!0,value:e});function M(e,t){if(e.isOk){const n=t(e.value);return n instanceof Promise?n.then((e=>E(e))):E(n)}if(e.isErr)return O(e.value);throw"should never get here"}var x,P=e=>{if(e.isOk)return e.value;throw e.value},A=e=>{if(e.isErr)return e.value;throw e.value},R=(e,t,...n)=>{let l=null,o=null,s=!1,r=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)l=t[n],Array.isArray(l)?c(l):null!=l&&"boolean"!=typeof l&&((s="function"!=typeof e&&!j(l))&&(l+=""),s&&r?i[i.length-1].i+=l:i.push(s?D(null,l):l),r=s)};if(c(n),t){t.key&&(o=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const a=D(e,null);return a.u=t,i.length>0&&(a.h=i),a.m=o,a},D=(e,t)=>({l:0,p:e,i:t,$:null,h:null,u:null,m:null}),H={},T=e=>n(e).$hostElement$,F=(e,t,n)=>{const l=T(e);return{emit:e=>L(l,t,{bubbles:!!(4&n),composed:!!(2&n),cancelable:!!(1&n),detail:e})}},L=(e,t,n)=>{const l=h.ce(t,n);return e.dispatchEvent(l),l},N=new WeakMap,U=e=>"sc-"+e.v,W=(e,t,n,l,s,r)=>{if(n!==l){let i=o(e,t),c=t.toLowerCase();if("class"===t){const t=e.classList,o=G(n),s=G(l);t.remove(...o.filter((e=>e&&!s.includes(e)))),t.add(...s.filter((e=>e&&!o.includes(e))))}else if("key"===t);else if(i||"o"!==t[0]||"n"!==t[1]){const o=j(l);if((i||o&&null!==l)&&!s)try{if(e.tagName.includes("-"))e[t]=l;else{const o=null==l?"":l;"list"===t?i=!1:null!=n&&e[t]==o||("function"==typeof e.__lookupSetter__(t)?e[t]=o:e.setAttribute(t,o))}}catch(e){}null==l||!1===l?!1===l&&""!==e.getAttribute(t)||e.removeAttribute(t):(!i||4&r||s)&&!o&&e.setAttribute(t,l=!0===l?"":l)}else if(t="-"===t[2]?t.slice(3):o(u,c)?c.slice(2):c[2]+t.slice(3),n||l){const o=t.endsWith(V);t=t.replace(_,""),n&&h.rel(e,t,n,o),l&&h.ael(e,t,l,o)}}},q=/\s/,G=e=>e?e.split(q):[],V="Capture",_=RegExp(V+"$"),z=(e,t,n)=>{const l=11===t.$.nodeType&&t.$.host?t.$.host:t.$,o=e&&e.u||k,s=t.u||k;for(const e of B(Object.keys(o)))e in s||W(l,e,o[e],void 0,n,t.l);for(const e of B(Object.keys(s)))W(l,e,o[e],s[e],n,t.l)};function B(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var I=!1,J=!1,K=(e,t,n)=>{const l=t.h[n];let o,s,r=0;if(null!==l.i)o=l.$=f.createTextNode(l.i);else if(o=l.$=f.createElement(l.p),z(null,l,J),o.getRootNode().querySelector("body"),l.h)for(r=0;r<l.h.length;++r)s=K(e,l,r),s&&o.appendChild(s);return o["s-hn"]=x,o},Q=(e,t,n,l,o,s)=>{let r,i=e;for(i.shadowRoot&&i.tagName===x&&(i=i.shadowRoot);o<=s;++o)l[o]&&(r=K(null,n,o),r&&(l[o].$=r,ee(i,r,t)))},X=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.$;e&&e.remove()}}},Y=(e,t,n=!1)=>e.p===t.p&&(!!n||e.m===t.m),Z=(e,t,n=!1)=>{const l=t.$=e.$,o=e.h,s=t.h,r=t.i;null===r?(("slot"!==t.p||I)&&z(e,t,J),null!==o&&null!==s?((e,t,n,l,o=!1)=>{let s,r,i=0,c=0,a=0,u=0,f=t.length-1,h=t[0],m=t[f],p=l.length-1,d=l[0],y=l[p];for(;i<=f&&c<=p;)if(null==h)h=t[++i];else if(null==m)m=t[--f];else if(null==d)d=l[++c];else if(null==y)y=l[--p];else if(Y(h,d,o))Z(h,d,o),h=t[++i],d=l[++c];else if(Y(m,y,o))Z(m,y,o),m=t[--f],y=l[--p];else if(Y(h,y,o))Z(h,y,o),ee(e,h.$,m.$.nextSibling),h=t[++i],y=l[--p];else if(Y(m,d,o))Z(m,d,o),ee(e,m.$,h.$),m=t[--f],d=l[++c];else{for(a=-1,u=i;u<=f;++u)if(t[u]&&null!==t[u].m&&t[u].m===d.m){a=u;break}a>=0?(r=t[a],r.p!==d.p?s=K(t&&t[c],n,a):(Z(r,d,o),t[a]=void 0,s=r.$),d=l[++c]):(s=K(t&&t[c],n,c),d=l[++c]),s&&ee(h.$.parentNode,s,h.$)}i>f?Q(e,null==l[p+1]?null:l[p+1].$,n,l,c,p):c>p&&X(t,i,f)})(l,o,t,s,n):null!==s?(null!==e.i&&(l.textContent=""),Q(l,null,t,s,0,s.length-1)):!n&&null!==o&&X(o,0,o.length-1)):e.i!==r&&(l.data=r)},ee=(e,t,n)=>null==e?void 0:e.insertBefore(t,n),te=(e,t)=>{t&&!e.S&&t["s-p"]&&t["s-p"].push(new Promise((t=>e.S=t)))},ne=(e,t)=>{if(e.l|=16,!(4&e.l))return te(e,e.k),g((()=>le(e,t)));e.l|=512},le=(e,t)=>{const n=e.t;if(!n)throw Error(`Can't render component <${e.$hostElement$.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);return oe(void 0,(()=>re(e,n,t)))},oe=(e,t)=>se(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),se=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,re=async(e,t,n)=>{var l;const o=e.$hostElement$,s=o["s-rc"];n&&(e=>{const t=e.j,n=e.$hostElement$,l=t.l,o=((e,t)=>{var n;const l=U(t),o=i.get(l);if(e=11===e.nodeType?e:f,o)if("string"==typeof o){let s,r=N.get(e=e.head||e);if(r||N.set(e,r=new Set),!r.has(l)){{s=f.createElement("style"),s.innerHTML=o;const l=null!=(n=h.C)?n:C(f);if(null!=l&&s.setAttribute("nonce",l),!(1&t.l))if("HEAD"===e.nodeName){const t=e.querySelectorAll("link[rel=preconnect]"),n=t.length>0?t[t.length-1].nextSibling:document.querySelector("style");e.insertBefore(s,n)}else"host"in e?e.prepend(s):e.append(s);1&t.l&&"HEAD"!==e.nodeName&&e.insertBefore(s,null)}4&t.l&&(s.innerHTML+=c),r&&r.add(l)}}else e.adoptedStyleSheets.includes(o)||(e.adoptedStyleSheets=[...e.adoptedStyleSheets,o]);return l})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&l&&2&l&&(n["s-sc"]=o,n.classList.add(o+"-h"))})(e);ie(e,t,o,n),s&&(s.map((e=>e())),o["s-rc"]=void 0);{const t=null!=(l=o["s-p"])?l:[],n=()=>ce(e);0===t.length?n():(Promise.all(t).then(n),e.l|=4,t.length=0)}},ie=(e,t,n,l)=>{try{t=t.render(),e.l&=-17,e.l|=2,((e,t,n=!1)=>{const l=e.$hostElement$,o=e.j,s=e.O||D(null,null),r=(e=>e&&e.p===H)(t)?t:R(null,null,t);if(x=l.tagName,o.M&&(r.u=r.u||{},o.M.map((([e,t])=>r.u[t]=l[e]))),n&&r.u)for(const e of Object.keys(r.u))l.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(r.u[e]=l[e]);r.p=null,r.l|=4,e.O=r,r.$=s.$=l.shadowRoot||l,I=!!(1&o.l),Z(s,r,n)})(e,t,l)}catch(t){s(t,e.$hostElement$)}return null},ce=e=>{const t=e.$hostElement$,n=e.t,l=e.k;64&e.l||(e.l|=64,fe(t),ue(n,"componentDidLoad"),e.P(t),l||ae()),e.S&&(e.S(),e.S=void 0),512&e.l&&S((()=>ne(e,!1))),e.l&=-517},ae=()=>{fe(f.documentElement),S((()=>L(u,"appload",{detail:{namespace:"mds-input-select"}})))},ue=(e,t,n)=>{if(e&&e[t])try{return e[t](n)}catch(e){s(e)}},fe=e=>e.setAttribute("hydrated",""),he=(e,t,l)=>{var o,r;const i=e.prototype;if(64&t.l&&1&l&&a.forEach((e=>Object.defineProperty(i,e,{value(...t){const l=n(this),o=l.t;if(o){const n=o[e];"function"==typeof n&&n.call(o,...t)}else l.A.then((n=>{const l=n[e];"function"==typeof l&&l.call(n,...t)}))}}))),t.R||t.D||e.watchers){e.watchers&&!t.D&&(t.D=e.watchers);const c=Object.entries(null!=(o=t.R)?o:{});if(c.map((([e,[o]])=>{(31&o||2&l&&32&o)&&Object.defineProperty(i,e,{get(){return((e,t)=>n(this).H.get(t))(0,e)},set(l){((e,t,l,o)=>{const r=n(e);if(!r)throw Error(`Couldn't find host element for "${o.v}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`);const i=r.$hostElement$,c=r.H.get(t),a=r.l,u=r.t;if(l=((e,t)=>null==e||j(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?parseFloat(e):1&t?e+"":e)(l,o.R[t][0]),(!(8&a)||void 0===c)&&l!==c&&(!Number.isNaN(c)||!Number.isNaN(l))&&(r.H.set(t,l),u)){if(o.D&&128&a){const e=o.D[t];e&&e.map((e=>{try{u[e](l,c,t)}catch(e){s(e,i)}}))}2==(18&a)&&ne(r,!1)}})(this,e,l,t)},configurable:!0,enumerable:!0})})),1&l){const l=new Map;i.attributeChangedCallback=function(e,o,s){h.jmp((()=>{var r;const c=l.get(e);if(this.hasOwnProperty(c))s=this[c],delete this[c];else{if(i.hasOwnProperty(c)&&"number"==typeof this[c]&&this[c]==s)return;if(null==c){const l=n(this),i=null==l?void 0:l.l;if(i&&!(8&i)&&128&i&&s!==o){const n=l.t,i=null==(r=t.D)?void 0:r[e];null==i||i.forEach((t=>{null!=n[t]&&n[t].call(n,s,o,e)}))}return}}this[c]=(null!==s||"boolean"!=typeof this[c])&&s}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(r=t.D)?r:{}),...c.filter((([e,t])=>15&t[0])).map((([e,n])=>{var o;const s=n[1]||e;return l.set(s,e),512&n[0]&&(null==(o=t.M)||o.push([e,s])),s}))]))}}return e},me=(e,l={})=>{var o;const a=[],m=l.exclude||[],d=u.customElements,y=f.head,b=y.querySelector("meta[charset]"),$=f.createElement("style"),v=[];let w,S=!0;Object.assign(h,l),h.o=new URL(l.resourcesUrl||"./",f.baseURI).href;let g=!1;if(e.map((e=>{e[1].map((l=>{var o;const c={l:l[0],v:l[1],R:l[2],T:l[3]};4&c.l&&(g=!0),c.R=l[2],c.M=[],c.D=null!=(o=l[4])?o:{};const u=c.v,f=class extends HTMLElement{constructor(e){if(super(e),this.hasRegisteredEventListeners=!1,((e,n)=>{const l={l:0,$hostElement$:e,j:n,H:new Map};l.A=new Promise((e=>l.P=e)),e["s-p"]=[],e["s-rc"]=[],t.set(e,l)})(e=this,c),1&c.l)if(e.shadowRoot){if("open"!==e.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${c.v}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else e.attachShadow({mode:"open"})}connectedCallback(){this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),w&&(clearTimeout(w),w=null),S?v.push(this):h.jmp((()=>(e=>{if(!(1&h.l)){const t=n(e),l=t.j,o=()=>{};if(1&t.l)(null==t?void 0:t.t)||(null==t?void 0:t.A)&&t.A.then((()=>{}));else{t.l|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){te(t,t.k=n);break}}l.R&&Object.entries(l.R).map((([t,[n]])=>{if(31&n&&e.hasOwnProperty(t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let l;if(!(32&t.l)){if(t.l|=32,n.F){const e=(e=>{const t=e.v.replace(/-/g,"_"),n=e.F;if(!n)return;const l=r.get(n);return l?l[t]:import(`./${n}.entry.js`).then((e=>(r.set(n,e),e[t])),s)
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n);if(e&&"then"in e){const t=()=>{};l=await e,t()}else l=e;if(!l)throw Error(`Constructor for "${n.v}#${t.L}" was not found`);l.isProxied||(n.D=l.watchers,he(l,n,2),l.isProxied=!0);const o=()=>{};t.l|=8;try{new l(t)}catch(e){s(e)}t.l&=-9,t.l|=128,o()}else l=e.constructor,customElements.whenDefined(e.localName).then((()=>t.l|=128));if(l&&l.style){let e;"string"==typeof l.style&&(e=l.style);const t=U(n);if(!i.has(t)){const l=()=>{};((e,t,n)=>{let l=i.get(e);p&&n?(l=l||new CSSStyleSheet,"string"==typeof l?l=t:l.replaceSync(t)):l=t,i.set(e,l)})(t,e,!!(1&n.l)),l()}}}const o=t.k,c=()=>ne(t,!0);o&&o["s-rc"]?o["s-rc"].push(c):c()})(e,t,l)}o()}})(this)))}disconnectedCallback(){h.jmp((()=>(async()=>{if(!(1&h.l)){const e=n(this);(null==e?void 0:e.t)||(null==e?void 0:e.A)&&e.A.then((()=>{}))}})()))}componentOnReady(){return n(this).A}};64&c.l&&(f.formAssociated=!0),c.F=e[0],m.includes(u)||d.get(u)||(a.push(u),d.define(u,he(f,c,1)))}))})),a.length>0&&(g&&($.textContent+=c),$.textContent+=a.sort()+"{visibility:hidden}[hydrated]{visibility:inherit}",$.innerHTML.length)){$.setAttribute("data-styles","");const e=null!=(o=h.C)?o:C(f);null!=e&&$.setAttribute("nonce",e),y.insertBefore($,b?b.nextSibling:y.firstChild)}S=!1,v.length?v.map((e=>e.connectedCallback())):h.jmp((()=>w=setTimeout(ae,30)))},pe=e=>h.C=e;export{H,me as b,F as c,T as g,R as h,m as p,l as r,pe as s}

package/dist/mds-input-select/p-e1255160.js

@@ -0,0 +1 @@
+const o=()=>{};export{o as g}

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-08-23T15:27:32",
+  "timestamp": "2024-09-05T13:43:55",
   "compiler": {
     "name": "node",
     "version": "20.10.0"
@@ -9,7 +9,7 @@
     "fsNamespace": "mds-input-select",
     "components": 1,
     "entries": 1,
-    "bundles": 82,
+    "bundles": 89,
     "outputs": [
       {
         "name": "dist-collection",
@@ -29,7 +29,6 @@
           "./dist/collection/common/yugop/utils/prng.js",
           "./dist/collection/common/yugop/utils/string.js",
           "./dist/collection/components/mds-input-select/mds-input-select.js",
-          "./dist/collection/components/mds-input-select/test/mds-input-select.e2e.js",
           "./dist/collection/components/mds-input-select/test/mds-input-select.stories.js",
           "./dist/collection/dictionary/autocomplete.js",
           "./dist/collection/dictionary/button.js",
@@ -52,6 +51,7 @@
           "./dist/collection/type/form-rel.js",
           "./dist/collection/type/input.js",
           "./dist/collection/type/loading.js",
+          "./dist/collection/type/preference.js",
           "./dist/collection/type/text.js",
           "./dist/collection/type/typography.js",
           "./dist/collection/type/variant-file-format.js",
@@ -70,19 +70,22 @@
       },
       {
         "name": "dist-lazy",
-        "files": 35,
+        "files": 42,
         "generatedFiles": [
-          "./dist/cjs/index-7175cc31.js",
+          "./dist/cjs/app-globals-3a1e7e63.js",
+          "./dist/cjs/index-9a5feb6d.js",
           "./dist/cjs/index.cjs.js",
           "./dist/cjs/loader.cjs.js",
           "./dist/cjs/mds-input-select.cjs.entry.js",
           "./dist/cjs/mds-input-select.cjs.js",
-          "./dist/esm-es5/index-4672d19a.js",
+          "./dist/esm-es5/app-globals-0f993ce5.js",
+          "./dist/esm-es5/index-27f9b67f.js",
           "./dist/esm-es5/index.js",
           "./dist/esm-es5/loader.js",
           "./dist/esm-es5/mds-input-select.entry.js",
           "./dist/esm-es5/mds-input-select.js",
-          "./dist/esm/index-4672d19a.js",
+          "./dist/esm/app-globals-0f993ce5.js",
+          "./dist/esm/index-27f9b67f.js",
           "./dist/esm/index.js",
           "./dist/esm/loader.js",
           "./dist/esm/mds-input-select.entry.js",
@@ -93,20 +96,24 @@
           "./dist/mds-input-select/mds-input-select.esm.js",
           "./dist/mds-input-select/mds-input-select.js",
           "./dist/mds-input-select/p-50ea2036.system.js",
-          "./dist/mds-input-select/p-53c0eb18.js",
-          "./dist/mds-input-select/p-6d6ca9a5.system.js",
-          "./dist/mds-input-select/p-7a1ae946.entry.js",
-          "./dist/mds-input-select/p-8ac51d55.system.entry.js",
-          "./dist/mds-input-select/p-ea04eaa8.system.js",
+          "./dist/mds-input-select/p-56ba5cbf.system.js",
+          "./dist/mds-input-select/p-5a0746e7.system.js",
+          "./dist/mds-input-select/p-750f66cc.system.js",
+          "./dist/mds-input-select/p-ad1eb960.system.entry.js",
+          "./dist/mds-input-select/p-b7cb51b4.entry.js",
+          "./dist/mds-input-select/p-babc558f.js",
+          "./dist/mds-input-select/p-e1255160.js",
           "./www/build/index.esm.js",
           "./www/build/mds-input-select.esm.js",
           "./www/build/mds-input-select.js",
           "./www/build/p-50ea2036.system.js",
-          "./www/build/p-53c0eb18.js",
-          "./www/build/p-6d6ca9a5.system.js",
-          "./www/build/p-7a1ae946.entry.js",
-          "./www/build/p-8ac51d55.system.entry.js",
-          "./www/build/p-ea04eaa8.system.js"
+          "./www/build/p-56ba5cbf.system.js",
+          "./www/build/p-5a0746e7.system.js",
+          "./www/build/p-750f66cc.system.js",
+          "./www/build/p-ad1eb960.system.entry.js",
+          "./www/build/p-b7cb51b4.entry.js",
+          "./www/build/p-babc558f.js",
+          "./www/build/p-e1255160.js"
         ]
       },
       {
@@ -139,12 +146,12 @@
         "components": [
           "mds-input-select"
         ],
-        "bundleId": "p-7a1ae946",
-        "fileName": "p-7a1ae946.entry.js",
+        "bundleId": "p-b7cb51b4",
+        "fileName": "p-b7cb51b4.entry.js",
         "imports": [
-          "p-53c0eb18.js"
+          "p-babc558f.js"
         ],
-        "originalByteSize": 26608
+        "originalByteSize": 30193
       }
     ],
     "esm": [
@@ -156,9 +163,9 @@
         "bundleId": "mds-input-select",
         "fileName": "mds-input-select.entry.js",
         "imports": [
-          "index-4672d19a.js"
+          "index-27f9b67f.js"
         ],
-        "originalByteSize": 26612
+        "originalByteSize": 30197
       }
     ],
     "es5": [
@@ -170,9 +177,9 @@
         "bundleId": "mds-input-select",
         "fileName": "mds-input-select.entry.js",
         "imports": [
-          "index-4672d19a.js"
+          "index-27f9b67f.js"
         ],
-        "originalByteSize": 26612
+        "originalByteSize": 30197
       }
     ],
     "system": [
@@ -181,12 +188,12 @@
         "components": [
           "mds-input-select"
         ],
-        "bundleId": "p-8ac51d55.system",
-        "fileName": "p-8ac51d55.system.entry.js",
+        "bundleId": "p-ad1eb960.system",
+        "fileName": "p-ad1eb960.system.entry.js",
         "imports": [
-          "p-ea04eaa8.system.js"
+          "p-5a0746e7.system.js"
         ],
-        "originalByteSize": 27503
+        "originalByteSize": 31094
       }
     ],
     "commonjs": [
@@ -198,9 +205,9 @@
         "bundleId": "mds-input-select.cjs",
         "fileName": "mds-input-select.cjs.entry.js",
         "imports": [
-          "index-7175cc31.js"
+          "index-9a5feb6d.js"
         ],
-        "originalByteSize": 26707
+        "originalByteSize": 30292
       }
     ]
   },
@@ -798,7 +805,7 @@
           "hasVdomXlink": false,
           "hasVdomClass": true,
           "hasVdomFunctional": false,
-          "hasVdomKey": false,
+          "hasVdomKey": true,
           "hasVdomListener": true,
           "hasVdomPropOrAttr": true,
           "hasVdomRef": false,
@@ -808,6 +815,7 @@
           "hasWatchCallback": true,
           "isPlain": false,
           "htmlAttrNames": [
+            "key",
             "class",
             "onInput",
             "onBlur",
@@ -855,7 +863,7 @@
   ],
   "componentGraph": {
     "sc-mds-input-select": [
-      "p-53c0eb18.js"
+      "p-babc558f.js"
     ]
   },
   "sourceGraph": {
@@ -882,7 +890,6 @@
     "./src/common/yugop/utils/prng.ts": [],
     "./src/common/yugop/utils/string.ts": [],
     "./src/components/mds-input-select/mds-input-select.tsx": [],
-    "./src/components/mds-input-select/test/mds-input-select.e2e.ts": [],
     "./src/components/mds-input-select/test/mds-input-select.stories.tsx": [],
     "./src/dictionary/autocomplete.ts": [],
     "./src/dictionary/button.ts": [],
@@ -908,6 +915,7 @@
     "./src/type/form-rel.ts": [],
     "./src/type/input.ts": [],
     "./src/type/loading.ts": [],
+    "./src/type/preference.ts": [],
     "./src/type/text.ts": [],
     "./src/type/typography.ts": [],
     "./src/type/variant-file-format.ts": [],

package/dist/types/common/locale.d.ts

@@ -1,7 +1,7 @@
 type LocaleConfig = {
-    it?: Record<string, string>;
-    en?: Record<string, string>;
-    gr?: Record<string, string>;
+    it?: Record<string, string | string[]>;
+    en?: Record<string, string | string[]>;
+    gr?: Record<string, string | string[]>;
 };
 export declare class Locale {
     defaultLanguage: string;
@@ -9,6 +9,7 @@ export declare class Locale {
     config: LocaleConfig;
     constructor(configData: LocaleConfig);
     lang: (element: HTMLElement) => void;
-    get: (tag: string) => string;
+    private pluralize;
+    get: (tag: string | string[], context?: Record<string, string | number>) => string;
 }
 export {};

package/dist/types/components/mds-input-select/mds-input-select.d.ts

@@ -0,0 +1,67 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { InputValue } from '@interface/input-value';
+import { ThemeStatusVariantType } from '@type/variant';
+/**
+ * @part select - The select HTML element
+ */
+export declare class MdsInputSelect {
+    host: HTMLMdsInputSelectElement;
+    selected: boolean;
+    hasFocus: boolean;
+    internals: ElementInternals;
+    /**
+     * Specifies a short hint that describes the expected value of the element
+     */
+    readonly autocomplete?: 'on';
+    /**
+     * Specifies a short hint that describes the expected value of the element
+     */
+    readonly autoFocus?: boolean;
+    /**
+     * Specifies a short hint that describes the expected value of the element
+     */
+    readonly placeholder?: string;
+    /**
+     * Is needed to reference the form data after the form is submitted
+     */
+    readonly name?: string;
+    /**
+     * If true, the element is displayed as disabled
+     */
+    readonly disabled?: boolean;
+    /**
+     * Specifies that the element must be filled out before submitting the form
+     */
+    readonly required?: boolean;
+    /**
+     * Specifies if the select should allow multiple options to be selected in the list
+     */
+    readonly multiple?: boolean;
+    /**
+     * When `multiple` is set to `true`, represents the number or rows in the list that should be visible
+     */
+    readonly size?: number;
+    /**
+     * Specifies the value of the component
+     */
+    value?: string | number | null;
+    /**
+     * Sets the variant of the component
+     */
+    readonly variant?: ThemeStatusVariantType;
+    /**
+     * Emits an InputChangeEventDetail when the value of the input element changes
+     */
+    changeEvent: EventEmitter<InputValue>;
+    /**
+     * Emits the change event when the component value changes
+     */
+    protected valueChanged(): void;
+    componentDidLoad(): void;
+    private onInput;
+    private onBlur;
+    private onFocus;
+    private emptyOptions;
+    private onSlotChangeHandler;
+    render(): any;
+}

package/dist/types/stencil-public-runtime.d.ts

@@ -768,6 +768,7 @@ export declare namespace JSXBase {
         hrefLang?: string;
         hreflang?: string;
         media?: string;
+        ping?: string;
         rel?: string;
         target?: string;
         referrerPolicy?: ReferrerPolicy;
@@ -794,7 +795,6 @@ export declare namespace JSXBase {
         cite?: string;
     }
     interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         formAction?: string;
@@ -921,8 +921,6 @@ export declare namespace JSXBase {
         autocapitalize?: string;
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         capture?: string;
         checked?: boolean;
         crossOrigin?: string;
@@ -979,8 +977,6 @@ export declare namespace JSXBase {
         popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         challenge?: string;
         disabled?: boolean;
         form?: string;
@@ -993,7 +989,6 @@ export declare namespace JSXBase {
     interface LabelHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
     }
     interface LiHTMLAttributes<T> extends HTMLAttributes<T> {
         value?: string | string[] | number;
@@ -1104,7 +1099,6 @@ export declare namespace JSXBase {
     interface OutputHTMLAttributes<T> extends HTMLAttributes<T> {
         form?: string;
         htmlFor?: string;
-        htmlfor?: string;
         name?: string;
     }
     interface ParamHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1129,7 +1123,6 @@ export declare namespace JSXBase {
         type?: string;
     }
     interface SelectHTMLAttributes<T> extends HTMLAttributes<T> {
-        autoFocus?: boolean;
         disabled?: boolean;
         form?: string;
         multiple?: boolean;
@@ -1164,8 +1157,6 @@ export declare namespace JSXBase {
     interface TextareaHTMLAttributes<T> extends HTMLAttributes<T> {
         autoComplete?: string;
         autocomplete?: string;
-        autoFocus?: boolean;
-        autofocus?: boolean | string;
         cols?: number;
         disabled?: boolean;
         form?: string;
@@ -1218,6 +1209,8 @@ export declare namespace JSXBase {
     interface HTMLAttributes<T = HTMLElement> extends DOMAttributes<T> {
         innerHTML?: string;
         accessKey?: string;
+        autoFocus?: boolean;
+        autofocus?: boolean | string;
         class?: string | {
             [className: string]: boolean;
         };

package/dist/types/type/preference.d.ts

@@ -0,0 +1,2 @@
+export type UIPreferenceType = 'animation' | 'consumption' | 'contrast' | 'theme';
+export type ConsumptionModeType = 'high' | 'medium' | 'low';

package/documentation.json

@@ -1,9 +1,9 @@
 {
-  "timestamp": "2024-08-23T14:24:28",
+  "timestamp": "2024-09-05T13:13:09",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.10.0",
-    "typescriptVersion": "5.3.3"
+    "version": "4.21.0",
+    "typescriptVersion": "5.5.3"
   },
   "components": [
     {
@@ -511,26 +511,6 @@
       "docstring": "",
       "path": "src/components/mds-filter-item/meta/event-detail.ts"
     },
-    "src/components/mds-form/meta/types.ts::CharacterSetType": {
-      "declaration": "export type CharacterSetType =\n  | '8859-1'\n  | 'ansi'\n  | 'ascii'\n  | 'utf-8'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
-    "src/components/mds-form/meta/types.ts::FormAutocompleteType": {
-      "declaration": "export type FormAutocompleteType =\n  | 'off'\n  | 'on'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
-    "src/components/mds-form/meta/types.ts::EnctypeType": {
-      "declaration": "export type EnctypeType =\n  | 'application/x-www-form-urlencoded'\n  | 'multipart/form-data'\n  | 'text/plain'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
-    "src/components/mds-form/meta/types.ts::FormMethodType": {
-      "declaration": "export type FormMethodType =\n  | 'get'\n  | 'post'",
-      "docstring": "",
-      "path": "src/components/mds-form/meta/types.ts"
-    },
     "src/components/mds-header-bar/meta/types.ts::MenuType": {
       "declaration": "export type MenuType =\n  | 'all'\n  | 'desktop'\n  | 'mobile'\n  | 'none'",
       "docstring": "",
@@ -696,10 +676,10 @@
       "docstring": "",
       "path": "src/components/mds-pref-animation/meta/types.ts"
     },
-    "src/components/mds-pref-consumption/meta/types.ts::ConsumptionModeType": {
+    "src/type/preference.ts::ConsumptionModeType": {
       "declaration": "export type ConsumptionModeType =\n  | 'high'\n  | 'medium'\n  | 'low'",
       "docstring": "",
-      "path": "src/components/mds-pref-consumption/meta/types.ts"
+      "path": "src/type/preference.ts"
     },
     "src/components/mds-pref-contrast/meta/types.ts::ContrastModeType": {
       "declaration": "export type ContrastModeType =\n  | 'more'\n  | 'no-preference'\n  | 'system'",

package/loader/cdn.js

@@ -1,3 +1,2 @@
-
 module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.cjs.js

@@ -1,3 +1,2 @@
-
 module.exports = require('../dist/cjs/loader.cjs.js');
-module.exports.applyPolyfills = function() { return Promise.resolve() };
+module.exports.applyPolyfills = function() { return Promise.resolve() };

package/loader/index.d.ts

@@ -9,6 +9,9 @@ export interface CustomElementsDefineOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
+/**
+ * @deprecated
+ */
 export declare function applyPolyfills(): Promise<void>;
 
 /**

package/loader/index.es2017.js

@@ -1,3 +1,2 @@
-
 export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm/loader.js';
+export * from '../dist/esm/loader.js';

package/loader/index.js

@@ -1,4 +1,3 @@
-
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../dist/esm/polyfills/index.js';
-export * from '../dist/esm-es5/loader.js';
+export * from '../dist/esm-es5/loader.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/mds-input-select",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "mds-input-select is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,9 +24,9 @@
     "test": "stencil test --spec --e2e"
   },
   "dependencies": {
-    "@maggioli-design-system/styles": "14.3.2",
-    "@maggioli-design-system/mds-input-tip": "1.0.0",
-    "@stencil/core": "4.10.0",
+    "@maggioli-design-system/styles": "15.3.0",
+    "@maggioli-design-system/mds-input-tip": "1.1.0",
+    "@stencil/core": "4.21.0",
     "clsx": "2.1.0"
   },
   "license": "MIT",

package/src/common/locale.ts

@@ -1,7 +1,9 @@
+import Handlebars from 'handlebars'
+
 type LocaleConfig = {
-  it?: Record<string, string>
-  en?: Record<string, string>
-  gr?: Record<string, string>
+  it?: Record<string, string | string[]>
+  en?: Record<string, string | string[]>
+  gr?: Record<string, string | string[]>
 }
 
 export class Locale {
@@ -25,7 +27,40 @@ export class Locale {
     this.language = this.defaultLanguage
   }
 
-  get = (tag: string): string => {
+  private pluralize = (tag: string | string[], context: Record<string, string | number>): string => {
+
+    const languagePhrase: string | string[] = this.config[this.language][tag] ?? this.config[this.defaultLanguage][tag]
+    const phrases: string[] = []
+    
+    if (Array.isArray(languagePhrase)) {
+      phrases.push(languagePhrase[0])
+      phrases.push(languagePhrase[1])
+    } else {
+      phrases.push(languagePhrase)
+      phrases.push(languagePhrase)
+    }
+
+    const [ defaultPhrase ] = phrases
+    let translatePhrase: string = defaultPhrase
+
+    const keys = Object.keys(context)
+    if (keys.length > 0) {
+      const [firstKey] = keys
+      if (typeof context[firstKey] === 'number') {
+        if (context[firstKey] !== 1) {
+          translatePhrase = phrases[1]
+        }
+      }
+    }
+
+    const template = Handlebars.compile(translatePhrase)
+    return template(context)
+  }
+
+  get = (tag: string | string[], context?: Record<string, string | number>): string => {
+    if (context) {
+      return this.pluralize(tag, context)
+    }
     return this.config[this.language][tag] ?? this.config[this.defaultLanguage][tag]
   }
 }