@maggioli-design-system/magma 1.10.6 → 1.10.7

package/dist/magma-components/p-7a01206a.system.entry.js

@@ -0,0 +1 @@
+System.register(["./p-2aef517c.system.js","./p-6923538c.system.js"],(function(n){"use strict";var t,r,e,o,a,i;return{setters:[function(n){t=n.r;r=n.c;e=n.h;o=n.H;a=n.g},function(n){i=n.m}],execute:function(){var s='@tailwind components;\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  --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-02));\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:host([required]:not([required="false"])) .input {\n  color: rgb(var(--tone-neutral-05));\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    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n:host {\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  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host([variant="info"]) {\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  --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  --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  --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  --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  --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  --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  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .input,\n:host-context(.pref-animation-reduce) .input:hover,\n:host-context(.pref-animation-reduce) .input:focus,\n:host-context(.pref-animation-reduce) .icon {\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n  :host-context(.pref-animation-system),\n  :host-context(.pref-animation-system) .input,\n  :host-context(.pref-animation-system) .input:hover,\n  :host-context(.pref-animation-system) .input:focus,\n  :host-context(.pref-animation-system) .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n:host-context(.pref-theme-dark) {\n  --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\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-hover-background-color: rgb(var(--variant-primary-04));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n}\n\n:host-context(.pref-theme-dark) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system) {\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\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-hover-background-color: rgb(var(--variant-primary-04));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n  }\n\n  :host-context(.pref-theme-system) .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n:host-context(.pref-contrast-more) {\n  --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n}\n\n:host-context(.pref-contrast-more) .input {\n  color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system) {\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  :host-context(.pref-contrast-system) .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n';var d=s;var c=n("mds_input_select",function(){function n(n){var e=this;t(this,n);this.changeEvent=r(this,"mdsInputSelectChange",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.hasFocus=false;this.disabled=false;this.required=false;this.multiple=false;this.size=0;this.value="";this.onInput=function(n){var t=n.target;if(t){e.value=t.value}};this.onBlur=function(){e.hasFocus=false};this.onFocus=function(){e.hasFocus=true};this.emptyOptions=function(){var n;var t=(n=e.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("select");var r=t===null||t===void 0?void 0:t.querySelectorAll("option");if(!r){return}r.forEach((function(n,t){if(!e.placeholder){n.remove()}if(e.placeholder&&t>0){n.remove()}}))};this.onSlotChangeHandler=function(){var n,t,r,o;var a=(t=(n=e.host.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("slot")[0])===null||t===void 0?void 0:t.assignedNodes();var i=(r=e.selectEl)===null||r===void 0?void 0:r.querySelectorAll("option");if(!i){return}if(!e.placeholder&&i.length>0){e.emptyOptions()}if(e.placeholder&&i.length>1){e.emptyOptions()}a===null||a===void 0?void 0:a.forEach((function(n){var t;(t=e.selectEl)===null||t===void 0?void 0:t.appendChild(n.cloneNode(true))}));if(e.value&&e.selectEl){e.selectEl.querySelectorAll("option").forEach((function(n){n.selected=n.value===e.value}))}else if(!e.placeholder){e.value=(o=e.selectEl)===null||o===void 0?void 0:o.querySelectorAll("option")[0].value}}}n.prototype.valueChanged=function(){var n,t,r;this.changeEvent.emit({value:(n=this.value)===null||n===void 0?void 0:n.toString()});this.internals.setFormValue((r=(t=this.value)===null||t===void 0?void 0:t.toString())!==null&&r!==void 0?r:null)};n.prototype.disabledChanged=function(n){if(n){this.internals.setFormValue(null)}};n.prototype.placeholderChanged=function(n,t){if(n&&!t){var r=document.querySelector(".placeholder-option");if(r)r.remove();r=document.createElement("option");this.selectEl.insertBefore(r,this.selectEl.firstChild);r.value="";r.text=n;if(!this.defaultValue)r.selected=true;if(this.required)r.disabled=true}};n.prototype.formResetCallback=function(){this.internals.setFormValue("")};n.prototype.componentWillLoad=function(){if(this.defaultValue){this.value=this.defaultValue}};n.prototype.componentDidLoad=function(){if(this.value){this.internals.setFormValue(this.value.toString())}};n.prototype.render=function(){var n=this;return e(o,{key:"2f4a0c12b02e735f13102477b670de1d305d4e74"},e("select",{key:"af74a6d8be051aa97efe469f02c634b5afb17090",class:"input",onInput:this.onInput.bind(this),onBlur:this.onBlur,onFocus:this.onFocus,name:this.name,required:this.required,disabled:this.disabled,multiple:this.multiple,size:this.size,part:"select",ref:function(t){return n.selectEl=t}},e("option",{key:"eed3a91bff7759bf8861dbf8ac2d2ea133e16a55",class:"placeholder-option",value:"",disabled:!this.required?undefined:true,selected:this.defaultValue?undefined:true},this.placeholder)),e("div",{key:"17d85258b38d73baff10b052676fa12e3c07a57e",class:"icon-container"},e("i",{key:"a205484c8af4681f9d40c04769220898ebc3bf77",class:"icon",innerHTML:i})),e("div",{key:"8f61e86c19b7a7e8ed9ae9a50e31daa4784a4455",class:"option-container"},e("slot",{key:"425f44dd0376cb0dc9155c9090d2faffaa18a9df",onSlotchange:this.onSlotChangeHandler})),e("mds-input-tip",{key:"0c2cbe8bec30637844b408242be54c471a221e30",position:"top",active:this.hasFocus},this.disabled&&e("mds-input-tip-item",{key:"60bb927f181184b04e6cc703c445f516f77104e0",expanded:true,variant:"disabled"}),this.required&&e("mds-input-tip-item",{key:"575b39745f3ecd81165dbf4b3c82ad64b5227403",expanded:this.hasFocus,variant:this.value===""?"required":"required-success"})))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"],disabled:["disabledChanged"],placeholder:["placeholderChanged"]}},enumerable:false,configurable:true});return n}());c.style=d}}}));

package/dist/stats.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-01T11:04:58",
+  "timestamp": "2025-12-03T10:30:31",
   "compiler": {
     "name": "node",
     "version": "22.15.0"
@@ -1101,7 +1101,6 @@
           "./dist/magma-components/p-03c4d4d0.entry.js",
           "./dist/magma-components/p-03cadeb4.system.entry.js",
           "./dist/magma-components/p-03f3d633.system.entry.js",
-          "./dist/magma-components/p-045996f1.system.entry.js",
           "./dist/magma-components/p-05da2c23.js",
           "./dist/magma-components/p-0689710c.system.entry.js",
           "./dist/magma-components/p-07d9296f.system.entry.js",
@@ -1145,6 +1144,7 @@
           "./dist/magma-components/p-269ab10e.system.js",
           "./dist/magma-components/p-26cd6ec8.system.js",
           "./dist/magma-components/p-27cb23f6.entry.js",
+          "./dist/magma-components/p-2812b739.entry.js",
           "./dist/magma-components/p-28f0e180.entry.js",
           "./dist/magma-components/p-290433af.system.entry.js",
           "./dist/magma-components/p-29476921.entry.js",
@@ -1178,7 +1178,6 @@
           "./dist/magma-components/p-43f16b11.system.entry.js",
           "./dist/magma-components/p-44ce6dc8.entry.js",
           "./dist/magma-components/p-4574eb64.entry.js",
-          "./dist/magma-components/p-4745e425.entry.js",
           "./dist/magma-components/p-47f78ada.entry.js",
           "./dist/magma-components/p-485f2998.system.entry.js",
           "./dist/magma-components/p-4a33c016.entry.js",
@@ -1235,6 +1234,7 @@
           "./dist/magma-components/p-788e95ce.entry.js",
           "./dist/magma-components/p-78d39566.system.entry.js",
           "./dist/magma-components/p-78f9abaa.js",
+          "./dist/magma-components/p-7a01206a.system.entry.js",
           "./dist/magma-components/p-7afd6711.system.entry.js",
           "./dist/magma-components/p-7c020ee6.entry.js",
           "./dist/magma-components/p-7c463896.system.entry.js",
@@ -1374,7 +1374,6 @@
           "./www/build/p-03c4d4d0.entry.js",
           "./www/build/p-03cadeb4.system.entry.js",
           "./www/build/p-03f3d633.system.entry.js",
-          "./www/build/p-045996f1.system.entry.js",
           "./www/build/p-05da2c23.js",
           "./www/build/p-0689710c.system.entry.js",
           "./www/build/p-07d9296f.system.entry.js",
@@ -1418,6 +1417,7 @@
           "./www/build/p-269ab10e.system.js",
           "./www/build/p-26cd6ec8.system.js",
           "./www/build/p-27cb23f6.entry.js",
+          "./www/build/p-2812b739.entry.js",
           "./www/build/p-28f0e180.entry.js",
           "./www/build/p-290433af.system.entry.js",
           "./www/build/p-29476921.entry.js",
@@ -1451,7 +1451,6 @@
           "./www/build/p-43f16b11.system.entry.js",
           "./www/build/p-44ce6dc8.entry.js",
           "./www/build/p-4574eb64.entry.js",
-          "./www/build/p-4745e425.entry.js",
           "./www/build/p-47f78ada.entry.js",
           "./www/build/p-485f2998.system.entry.js",
           "./www/build/p-4a33c016.entry.js",
@@ -1508,6 +1507,7 @@
           "./www/build/p-788e95ce.entry.js",
           "./www/build/p-78d39566.system.entry.js",
           "./www/build/p-78f9abaa.js",
+          "./www/build/p-7a01206a.system.entry.js",
           "./www/build/p-7afd6711.system.entry.js",
           "./www/build/p-7c020ee6.entry.js",
           "./www/build/p-7c463896.system.entry.js",
@@ -2086,14 +2086,13 @@
         "components": [
           "mds-input-select"
         ],
-        "bundleId": "p-4745e425",
-        "fileName": "p-4745e425.entry.js",
+        "bundleId": "p-2812b739",
+        "fileName": "p-2812b739.entry.js",
         "imports": [
           "p-3a6b32e7.js",
-          "p-8a1a6e56.js",
           "p-581a0bb5.js"
         ],
-        "originalByteSize": 23705
+        "originalByteSize": 24681
       },
       {
         "key": "mds-input-upload.entry",
@@ -3523,10 +3522,9 @@
         "fileName": "mds-input-select.entry.js",
         "imports": [
           "index-7f153b9b.js",
-          "clsx-297c1ffe.js",
           "keyboard-arrow-down-b79b8faf.js"
         ],
-        "originalByteSize": 23730
+        "originalByteSize": 24703
       },
       {
         "key": "mds-input-upload.entry",
@@ -4956,10 +4954,9 @@
         "fileName": "mds-input-select.entry.js",
         "imports": [
           "index-7f153b9b.js",
-          "clsx-297c1ffe.js",
           "keyboard-arrow-down-b79b8faf.js"
         ],
-        "originalByteSize": 23730
+        "originalByteSize": 24703
       },
       {
         "key": "mds-input-upload.entry",
@@ -6385,14 +6382,13 @@
         "components": [
           "mds-input-select"
         ],
-        "bundleId": "p-045996f1.system",
-        "fileName": "p-045996f1.system.entry.js",
+        "bundleId": "p-7a01206a.system",
+        "fileName": "p-7a01206a.system.entry.js",
         "imports": [
           "p-2aef517c.system.js",
-          "p-d68089ba.system.js",
           "p-6923538c.system.js"
         ],
-        "originalByteSize": 24847
+        "originalByteSize": 25930
       },
       {
         "key": "mds-input-upload.entry",
@@ -7822,10 +7818,9 @@
         "fileName": "mds-input-select.cjs.entry.js",
         "imports": [
           "index-de0ace0a.js",
-          "clsx-fc789adc.js",
           "keyboard-arrow-down-bcfab108.js"
         ],
-        "originalByteSize": 23830
+        "originalByteSize": 24802
       },
       {
         "key": "mds-input-upload.entry",
@@ -18613,6 +18608,27 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "defaultValue",
+          "type": "any",
+          "attribute": "default-value",
+          "reflect": true,
+          "mutable": false,
+          "required": false,
+          "optional": true,
+          "complexType": {
+            "original": "string | number | null",
+            "resolved": "null | number | string | undefined",
+            "references": {}
+          },
+          "docs": {
+            "tags": [],
+            "text": "Specifies the default value of the component"
+          },
+          "internal": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "variant",
           "type": "string",
@@ -18643,9 +18659,6 @@
       ],
       "shadowDelegatesFocus": false,
       "states": [
-        {
-          "name": "selected"
-        },
         {
           "name": "hasFocus"
         }
@@ -36851,6 +36864,27 @@
               "getter": false,
               "setter": false
             },
+            {
+              "name": "defaultValue",
+              "type": "any",
+              "attribute": "default-value",
+              "reflect": true,
+              "mutable": false,
+              "required": false,
+              "optional": true,
+              "complexType": {
+                "original": "string | number | null",
+                "resolved": "null | number | string | undefined",
+                "references": {}
+              },
+              "docs": {
+                "tags": [],
+                "text": "Specifies the default value of the component"
+              },
+              "internal": false,
+              "getter": false,
+              "setter": false
+            },
             {
               "name": "variant",
               "type": "string",
@@ -36881,9 +36915,6 @@
           ],
           "virtualProperties": [],
           "states": [
-            {
-              "name": "selected"
-            },
             {
               "name": "hasFocus"
             }
@@ -36923,6 +36954,10 @@
             {
               "propName": "disabled",
               "methodName": "disabledChanged"
+            },
+            {
+              "propName": "placeholder",
+              "methodName": "placeholderChanged"
             }
           ],
           "styles": [
@@ -36956,7 +36991,7 @@
           "sourceFilePath": "/builds/maggiolispa/ricerca-sviluppo-new-media/magma/design-system/projects/stencil/src/components/mds-input-select/mds-input-select.tsx",
           "sourceMapPath": null,
           "hasAttributeChangedCallbackFn": false,
-          "hasComponentWillLoadFn": false,
+          "hasComponentWillLoadFn": true,
           "hasComponentDidLoadFn": true,
           "hasComponentShouldUpdateFn": false,
           "hasComponentWillUpdateFn": false,
@@ -36995,7 +37030,7 @@
           "hasVdomKey": true,
           "hasVdomListener": true,
           "hasVdomPropOrAttr": true,
-          "hasVdomRef": false,
+          "hasVdomRef": true,
           "hasVdomRender": true,
           "hasVdomStyle": false,
           "hasVdomText": true,
@@ -37013,6 +37048,7 @@
             "multiple",
             "size",
             "part",
+            "ref",
             "value",
             "selected",
             "innerHTML",
@@ -37023,8 +37059,8 @@
             "variant"
           ],
           "htmlTagNames": [
-            "select",
             "option",
+            "select",
             "div",
             "i",
             "slot",
@@ -61177,7 +61213,6 @@
     ],
     "sc-mds-input-select": [
       "p-3a6b32e7.js",
-      "p-8a1a6e56.js",
       "p-581a0bb5.js"
     ],
     "sc-mds-input-switch": [

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

@@ -5,8 +5,8 @@ import { ThemeStatusVariantType } from "../../type/variant";
  * @part select - The select HTML element
  */
 export declare class MdsInputSelect {
+    private selectEl;
     host: HTMLMdsInputSelectElement;
-    selected: boolean;
     hasFocus: boolean;
     internals: ElementInternals;
     /**
@@ -45,6 +45,10 @@ export declare class MdsInputSelect {
      * Specifies the value of the component
      */
     value?: string | number | null;
+    /**
+     * Specifies the default value of the component
+     */
+    defaultValue?: string | number | null;
     /**
      * Sets the variant of the component
      */
@@ -58,7 +62,16 @@ export declare class MdsInputSelect {
      */
     protected valueChanged(): void;
     protected disabledChanged(newValue: boolean): void;
+    /**
+     * This is for the react component because placeholder is valued after didload
+     * and therefore the placeholder option is drawn as the last option.
+     * Here the option is brought back to the first position
+     * @param newValue placeholder new value
+     * @param oldValue placeholder old value
+     */
+    protected placeholderChanged(newValue: string | undefined, oldValue: string | undefined): void;
     formResetCallback(): void;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     private onInput;
     private onBlur;

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

@@ -79,6 +79,7 @@ export declare const Required: {
     render: (args: any) => any;
     args: {
         required: boolean;
+        placeholder: string;
     };
 };
 export declare const Disabled: {

package/dist/types/components.d.ts

@@ -1281,6 +1281,10 @@ export namespace Components {
           * Specifies a short hint that describes the expected value of the element
          */
         "autocomplete"?: 'on';
+        /**
+          * Specifies the default value of the component
+         */
+        "defaultValue"?: string | number | null;
         /**
           * If true, the element is displayed as disabled
          */
@@ -5073,6 +5077,10 @@ declare namespace LocalJSX {
           * Specifies a short hint that describes the expected value of the element
          */
         "autocomplete"?: 'on';
+        /**
+          * Specifies the default value of the component
+         */
+        "defaultValue"?: string | number | null;
         /**
           * If true, the element is displayed as disabled
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maggioli-design-system/magma",
-  "version": "1.10.6",
+  "version": "1.10.7",
   "description": "Magma is Maggioli Design System's web-components library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/magma-components/p-045996f1.system.entry.js

@@ -1 +0,0 @@
-System.register(["./p-2aef517c.system.js","./p-d68089ba.system.js","./p-6923538c.system.js"],(function(n){"use strict";var t,r,e,o,a,i,s;return{setters:[function(n){t=n.r;r=n.c;e=n.h;o=n.H;a=n.g},function(n){i=n.c},function(n){s=n.m}],execute:function(){var d='@tailwind components;\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  --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    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n:host {\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  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host([variant="info"]) {\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  --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  --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  --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  --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  --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  --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  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .input,\n:host-context(.pref-animation-reduce) .input:hover,\n:host-context(.pref-animation-reduce) .input:focus,\n:host-context(.pref-animation-reduce) .icon {\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n  :host-context(.pref-animation-system),\n  :host-context(.pref-animation-system) .input,\n  :host-context(.pref-animation-system) .input:hover,\n  :host-context(.pref-animation-system) .input:focus,\n  :host-context(.pref-animation-system) .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n:host-context(.pref-theme-dark) {\n  --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\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-hover-background-color: rgb(var(--variant-primary-04));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n}\n\n:host-context(.pref-theme-dark) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system) {\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\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-hover-background-color: rgb(var(--variant-primary-04));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n  }\n\n  :host-context(.pref-theme-system) .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n:host-context(.pref-contrast-more) {\n  --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n}\n\n:host-context(.pref-contrast-more) .input {\n  color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system) {\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  :host-context(.pref-contrast-system) .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n';var c=d;var l=n("mds_input_select",function(){function n(n){var e=this;t(this,n);this.changeEvent=r(this,"mdsInputSelectChange",7);if(n.$hostElement$["s-ei"]){this.internals=n.$hostElement$["s-ei"]}else{this.internals=n.$hostElement$.attachInternals();n.$hostElement$["s-ei"]=this.internals}this.hasFocus=false;this.disabled=false;this.required=false;this.multiple=false;this.size=0;this.value="";this.onInput=function(n){var t=n.target;if(t){e.value=t.value}};this.onBlur=function(){e.hasFocus=false};this.onFocus=function(){e.hasFocus=true};this.emptyOptions=function(){var n;var t=(n=e.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("select");var r=t===null||t===void 0?void 0:t.querySelectorAll("option");if(!r){return}r.forEach((function(n,t){if(!e.placeholder){n.remove()}if(e.placeholder&&t>0){n.remove()}}))};this.onSlotChangeHandler=function(){var n,t,r;var o=(t=(n=e.host.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("slot")[0])===null||t===void 0?void 0:t.assignedNodes();var a=(r=e.host.shadowRoot)===null||r===void 0?void 0:r.querySelector("select");var i=a===null||a===void 0?void 0:a.querySelectorAll("option");if(!i){return}if(!e.placeholder&&i.length>0){e.emptyOptions()}if(e.placeholder&&i.length>1){e.emptyOptions()}o===null||o===void 0?void 0:o.forEach((function(n){a===null||a===void 0?void 0:a.appendChild(n.cloneNode(true))}));if(e.value){a===null||a===void 0?void 0:a.querySelectorAll("option").forEach((function(n){n.selected=n.value===e.value}))}else if(!e.placeholder){e.value=a===null||a===void 0?void 0:a.querySelectorAll("option")[0].value}}}n.prototype.valueChanged=function(){var n,t,r;this.selected=this.value!=="";this.changeEvent.emit({value:(n=this.value)===null||n===void 0?void 0:n.toString()});this.internals.setFormValue((r=(t=this.value)===null||t===void 0?void 0:t.toString())!==null&&r!==void 0?r:null)};n.prototype.disabledChanged=function(n){if(n){this.internals.setFormValue(null)}};n.prototype.formResetCallback=function(){this.internals.setFormValue("")};n.prototype.componentDidLoad=function(){if(this.value){this.selected=true;this.internals.setFormValue(this.value.toString())}};n.prototype.render=function(){return e(o,{key:"42c8c47d40f44d64c3c522591f196109258ee584"},e("select",{key:"89d1929e9bed34a874094274da2b3897bd48a5fb",class:i("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&&e("option",{key:"01c84e11e4504e467865657e46419c6e9904beac",value:"",disabled:true,selected:true},this.placeholder)),e("div",{key:"466cba766c7bcfa2b7e8a2e3e383f059fd0fb6e4",class:"icon-container"},e("i",{key:"fc9f64a92325e1ec116c99f46c6865755bb0d1b8",class:"icon",innerHTML:s})),e("div",{key:"c53f11b9715c9f6fd8d2e0f434da498365d5f101",class:"option-container"},e("slot",{key:"c3135009efad92a8a0be5cd4797422203a87c8b7",onSlotchange:this.onSlotChangeHandler})),e("mds-input-tip",{key:"236ebb4498a6b3f16cc241fb33a9a7b26c4166f1",position:"top",active:this.hasFocus},this.disabled&&e("mds-input-tip-item",{key:"e027575cb716fd8c638ffeb1c09e13c0698c3cc0",expanded:true,variant:"disabled"}),this.required&&e("mds-input-tip-item",{key:"8a3458aa14e4b3fba95e1f924816632197fb632d",expanded:this.hasFocus,variant:this.value===""?"required":"required-success"})))};Object.defineProperty(n,"formAssociated",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"host",{get:function(){return a(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"],disabled:["disabledChanged"]}},enumerable:false,configurable:true});return n}());l.style=c}}}));

package/dist/magma-components/p-4745e425.entry.js

@@ -1 +0,0 @@
-import{r as n,c as t,h as r,H as e,g as o}from"./p-3a6b32e7.js";import{c as a}from"./p-8a1a6e56.js";import{m as s}from"./p-581a0bb5.js";const i=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.hasFocus=!1,this.disabled=!1,this.required=!1,this.multiple=!1,this.size=0,this.value="",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 e=null===(t=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelectorAll("slot")[0])||void 0===t?void 0:t.assignedNodes(),o=null===(r=this.host.shadowRoot)||void 0===r?void 0:r.querySelector("select"),a=null==o?void 0:o.querySelectorAll("option");a&&(!this.placeholder&&a.length>0&&this.emptyOptions(),this.placeholder&&a.length>1&&this.emptyOptions(),null==e||e.forEach((n=>{null==o||o.appendChild(n.cloneNode(!0))})),this.value?null==o||o.querySelectorAll("option").forEach((n=>{n.selected=n.value===this.value})):this.placeholder||(this.value=null==o?void 0:o.querySelectorAll("option")[0].value))}}valueChanged(){var n,t,r;this.selected=""!==this.value,this.changeEvent.emit({value:null===(n=this.value)||void 0===n?void 0:n.toString()}),this.internals.setFormValue(null!==(r=null===(t=this.value)||void 0===t?void 0:t.toString())&&void 0!==r?r:null)}disabledChanged(n){n&&this.internals.setFormValue(null)}formResetCallback(){this.internals.setFormValue("")}componentDidLoad(){this.value&&(this.selected=!0,this.internals.setFormValue(this.value.toString()))}render(){return r(e,{key:"42c8c47d40f44d64c3c522591f196109258ee584"},r("select",{key:"89d1929e9bed34a874094274da2b3897bd48a5fb",class:a("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:"01c84e11e4504e467865657e46419c6e9904beac",value:"",disabled:!0,selected:!0},this.placeholder)),r("div",{key:"466cba766c7bcfa2b7e8a2e3e383f059fd0fb6e4",class:"icon-container"},r("i",{key:"fc9f64a92325e1ec116c99f46c6865755bb0d1b8",class:"icon",innerHTML:s})),r("div",{key:"c53f11b9715c9f6fd8d2e0f434da498365d5f101",class:"option-container"},r("slot",{key:"c3135009efad92a8a0be5cd4797422203a87c8b7",onSlotchange:this.onSlotChangeHandler})),r("mds-input-tip",{key:"236ebb4498a6b3f16cc241fb33a9a7b26c4166f1",position:"top",active:this.hasFocus},this.disabled&&r("mds-input-tip-item",{key:"e027575cb716fd8c638ffeb1c09e13c0698c3cc0",expanded:!0,variant:"disabled"}),this.required&&r("mds-input-tip-item",{key:"8a3458aa14e4b3fba95e1f924816632197fb632d",expanded:this.hasFocus,variant:""===this.value?"required":"required-success"})))}static get formAssociated(){return!0}get host(){return o(this)}static get watchers(){return{value:["valueChanged"],disabled:["disabledChanged"]}}};i.style='@tailwind components;\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  --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    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n:host {\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  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host([variant="info"]) {\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  --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  --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  --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  --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  --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  --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  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n:host-context(.pref-animation-reduce),\n:host-context(.pref-animation-reduce) .input,\n:host-context(.pref-animation-reduce) .input:hover,\n:host-context(.pref-animation-reduce) .input:focus,\n:host-context(.pref-animation-reduce) .icon {\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n}\n\n@media (prefers-reduced-motion) {\n  :host-context(.pref-animation-system),\n  :host-context(.pref-animation-system) .input,\n  :host-context(.pref-animation-system) .input:hover,\n  :host-context(.pref-animation-system) .input:focus,\n  :host-context(.pref-animation-system) .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n:host-context(.pref-theme-dark) {\n  --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\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-hover-background-color: rgb(var(--variant-primary-04));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n}\n\n:host-context(.pref-theme-dark) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n@media (prefers-color-scheme: dark) {\n  :host-context(.pref-theme-system) {\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\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-hover-background-color: rgb(var(--variant-primary-04));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-08));\n  }\n\n  :host-context(.pref-theme-system) .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n:host-context(.pref-contrast-more) {\n  --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n}\n\n:host-context(.pref-contrast-more) .input {\n  color: rgb(var(--tone-neutral-01));\n}\n\n@media (prefers-contrast: more) {\n  :host-context(.pref-contrast-system) {\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  :host-context(.pref-contrast-system) .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n:host(:not(:is([hydrated], .hydrated))) {\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n/* TODO refact(stencil): Uses only used selector from parent shadowDOM component */\n\nmds-accordion:not(:is([hydrated], .hydrated)),\nmds-accordion-item:not(:is([hydrated], .hydrated)),\nmds-accordion-timer:not(:is([hydrated], .hydrated)),\nmds-accordion-timer-item:not(:is([hydrated], .hydrated)),\nmds-author:not(:is([hydrated], .hydrated)),\nmds-avatar:not(:is([hydrated], .hydrated)),\nmds-badge:not(:is([hydrated], .hydrated)),\nmds-banner:not(:is([hydrated], .hydrated)),\nmds-benchmark-bar:not(:is([hydrated], .hydrated)),\nmds-bibliography:not(:is([hydrated], .hydrated)),\nmds-breadcrumb:not(:is([hydrated], .hydrated)),\nmds-breadcrumb-item:not(:is([hydrated], .hydrated)),\nmds-button:not(:is([hydrated], .hydrated)),\nmds-card:not(:is([hydrated], .hydrated)),\nmds-card-content:not(:is([hydrated], .hydrated)),\nmds-card-footer:not(:is([hydrated], .hydrated)),\nmds-card-header:not(:is([hydrated], .hydrated)),\nmds-card-media:not(:is([hydrated], .hydrated)),\nmds-chip:not(:is([hydrated], .hydrated)),\nmds-details:not(:is([hydrated], .hydrated)),\nmds-dropdown:not(:is([hydrated], .hydrated)),\nmds-entity:not(:is([hydrated], .hydrated)),\nmds-file:not(:is([hydrated], .hydrated)),\nmds-file-preview:not(:is([hydrated], .hydrated)),\nmds-filter:not(:is([hydrated], .hydrated)),\nmds-filter-item:not(:is([hydrated], .hydrated)),\nmds-header:not(:is([hydrated], .hydrated)),\nmds-header-bar:not(:is([hydrated], .hydrated)),\nmds-help:not(:is([hydrated], .hydrated)),\nmds-horizontal-scroll:not(:is([hydrated], .hydrated)),\nmds-hr:not(:is([hydrated], .hydrated)),\nmds-icon:not(:is([hydrated], .hydrated)),\nmds-img:not(:is([hydrated], .hydrated)),\nmds-input:not(:is([hydrated], .hydrated)),\nmds-input-field:not(:is([hydrated], .hydrated)),\nmds-input-range:not(:is([hydrated], .hydrated)),\nmds-input-select:not(:is([hydrated], .hydrated)),\nmds-input-switch:not(:is([hydrated], .hydrated)),\nmds-input-tip:not(:is([hydrated], .hydrated)),\nmds-input-tip-item:not(:is([hydrated], .hydrated)),\nmds-input-upload:not(:is([hydrated], .hydrated)),\nmds-keyboard:not(:is([hydrated], .hydrated)),\nmds-keyboard-key:not(:is([hydrated], .hydrated)),\nmds-kpi:not(:is([hydrated], .hydrated)),\nmds-kpi-item:not(:is([hydrated], .hydrated)),\nmds-label:not(:is([hydrated], .hydrated)),\nmds-list:not(:is([hydrated], .hydrated)),\nmds-list-item:not(:is([hydrated], .hydrated)),\nmds-modal:not(:is([hydrated], .hydrated)),\nmds-note:not(:is([hydrated], .hydrated)),\nmds-notification:not(:is([hydrated], .hydrated)),\nmds-paginator:not(:is([hydrated], .hydrated)),\nmds-paginator-item:not(:is([hydrated], .hydrated)),\nmds-pref:not(:is([hydrated], .hydrated)),\nmds-pref-animation:not(:is([hydrated], .hydrated)),\nmds-pref-consumption:not(:is([hydrated], .hydrated)),\nmds-pref-contrast:not(:is([hydrated], .hydrated)),\nmds-pref-language:not(:is([hydrated], .hydrated)),\nmds-pref-language-item:not(:is([hydrated], .hydrated)),\nmds-pref-theme:not(:is([hydrated], .hydrated)),\nmds-price-table:not(:is([hydrated], .hydrated)),\nmds-price-table-features:not(:is([hydrated], .hydrated)),\nmds-price-table-features-cell:not(:is([hydrated], .hydrated)),\nmds-price-table-features-row:not(:is([hydrated], .hydrated)),\nmds-price-table-header:not(:is([hydrated], .hydrated)),\nmds-price-table-list:not(:is([hydrated], .hydrated)),\nmds-price-table-list-item:not(:is([hydrated], .hydrated)),\nmds-progress:not(:is([hydrated], .hydrated)),\nmds-push-notification:not(:is([hydrated], .hydrated)),\nmds-push-notifications:not(:is([hydrated], .hydrated)),\nmds-quote:not(:is([hydrated], .hydrated)),\nmds-separator:not(:is([hydrated], .hydrated)),\nmds-spinner:not(:is([hydrated], .hydrated)),\nmds-stepper-bar:not(:is([hydrated], .hydrated)),\nmds-stepper-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab:not(:is([hydrated], .hydrated)),\nmds-tab-bar:not(:is([hydrated], .hydrated)),\nmds-tab-bar-item:not(:is([hydrated], .hydrated)),\nmds-tab-item:not(:is([hydrated], .hydrated)),\nmds-table:not(:is([hydrated], .hydrated)),\nmds-table-body:not(:is([hydrated], .hydrated)),\nmds-table-cell:not(:is([hydrated], .hydrated)),\nmds-table-footer:not(:is([hydrated], .hydrated)),\nmds-table-header:not(:is([hydrated], .hydrated)),\nmds-table-header-cell:not(:is([hydrated], .hydrated)),\nmds-table-row:not(:is([hydrated], .hydrated)),\nmds-text:not(:is([hydrated], .hydrated)),\nmds-toast:not(:is([hydrated], .hydrated)),\nmds-tooltip:not(:is([hydrated], .hydrated)),\nmds-tree:not(:is([hydrated], .hydrated)),\nmds-tree-item:not(:is([hydrated], .hydrated)),\nmds-url-view:not(:is([hydrated], .hydrated)),\nmds-usage:not(:is([hydrated], .hydrated)),\nmds-video-wall:not(:is([hydrated], .hydrated)),\nmds-zero:not(:is([hydrated], .hydrated))\n{\n  -webkit-animation-duration: 0s;\n  animation-duration: 0s;\n  border-color: transparent;\n  -webkit-box-shadow: 0 0 0 transparent;\n  box-shadow: 0 0 0 transparent;\n  opacity: 0;\n  outline-color: transparent;\n  -webkit-transition-delay: 0s;\n  transition-delay: 0s;\n  -webkit-transition-duration: 0s;\n  transition-duration: 0s;\n  visibility: hidden;\n}\n\n';export{i as mds_input_select}