@maggioli-design-system/mds-input-select 3.0.0 → 3.1.0

package/src/meta/file-format/locale.en.json

@@ -0,0 +1,44 @@
+{
+  "appleDiskImage": "Apple Disk Image",
+  "certificateTSD": "Timestamp Certificate",
+  "compressedArchive": "Compressed Archive",
+  "compressedAudio": "Compressed Audio",
+  "compressedDocumentMS": "Compressed Microsoft Word Document",
+  "compressedImage": "Compressed Image",
+  "dart": "Dart File",
+  "documentAdobe": "Adobe Document",
+  "documentDigitalSingnature": "Document with digital signature",
+  "documentLO": "LibreOffice Document",
+  "documentMS": "Microsoft Word Document",
+  "documentRTF": "Rich Text Format Document",
+  "documentTXT": "Plain Text Document",
+  "documentWeb": "Web Page",
+  "email": "E-mail",
+  "extensibleMarkupLanguage": "Markup language for data",
+  "fileAI": "Adobe Illustrator Vector File",
+  "fileDB": "Database File",
+  "fileEPS": "Corel Draw Vector File",
+  "fileEXE": "Windows Executable File",
+  "fileJS": "JavaScript File",
+  "fileJSON": "JavaScript Object Notation File",
+  "filePHP": "Hypertext Preprocessor File",
+  "fileSASS": "Syntactically Awesome StyleSheets File",
+  "fileTS": "TypeScript File",
+  "fileTSX": "TypeScript Extended Syntax File",
+  "imageHEIC": "High Efficiency Image File Format",
+  "imagePNG": "Portable Network Graphics Image",
+  "imageSVG": "Scalable Vector Graphics Image",
+  "imageTIFF": "Tag Image File Format Image",
+  "imageWEBP": "Google Web Picture Image",
+  "objectLinkingAndEmbedding": "Object Linking and Embedding",
+  "openDocumentFormat": "OpenDocument Document",
+  "slideLO": "LibreOffice Presentation Slide",
+  "slidePowerPoint": "PowerPoint Presentation Slide",
+  "spreadsheetLO": "LibreOffice Spreadsheet",
+  "spreadsheetMS": "Microsoft Office Spreadsheet",
+  "uncompressedArchive": "Uncompressed Archive",
+  "uncompressedAudio": "Uncompressed Audio",
+  "unknown": "Unknown File Format",
+  "videoHD": "High Definition Video",
+  "videoSD": "Standard Definition Video"
+}

package/src/meta/file-format/locale.es.json

@@ -0,0 +1,44 @@
+{
+  "appleDiskImage": "Imagen de disco Apple",
+  "certificateTSD": "Certificado de sello de tiempo",
+  "compressedArchive": "Archivo comprimido",
+  "compressedAudio": "Audio comprimido",
+  "compressedDocumentMS": "Documento comprimido de Microsoft Word",
+  "compressedImage": "Imagen comprimida",
+  "dart": "Archivo Dart",
+  "documentAdobe": "Documento Adobe",
+  "documentDigitalSingnature": "Documento con firma digital",
+  "documentLO": "Documento de LibreOffice",
+  "documentMS": "Documento de Microsoft Word",
+  "documentRTF": "Documento de formato de texto enriquecido",
+  "documentTXT": "Documento de texto sin formato",
+  "documentWeb": "Página web",
+  "email": "Correo electrónico",
+  "extensibleMarkupLanguage": "Lenguaje de marcado para datos",
+  "fileAI": "Archivo vectorial de Adobe Illustrator",
+  "fileDB": "Archivo de base de datos",
+  "fileEPS": "Archivo vectorial de Corel Draw",
+  "fileEXE": "Archivo ejecutable de Windows",
+  "fileJS": "Archivo JavaScript",
+  "fileJSON": "Archivo de notación de objetos de JavaScript",
+  "filePHP": "Archivo de preprocesador de hipertexto",
+  "fileSASS": "Archivo de Syntactically Awesome StyleSheets",
+  "fileTS": "Archivo TypeScript",
+  "fileTSX": "Archivo de sintaxis extendida de TypeScript",
+  "imageHEIC": "Formato de archivo de imagen de alta eficiencia",
+  "imagePNG": "Imagen Portable Network Graphics",
+  "imageSVG": "Imagen de gráficos vectoriales escalables",
+  "imageTIFF": "Imagen de formato de archivo de imagen etiquetado",
+  "imageWEBP": "Imagen Google Web Picture",
+  "objectLinkingAndEmbedding": "Vinculación e incrustación de objetos",
+  "openDocumentFormat": "Documento OpenDocument",
+  "slideLO": "Diapositiva de presentación de LibreOffice",
+  "slidePowerPoint": "Diapositiva de presentación de PowerPoint",
+  "spreadsheetLO": "Hoja de cálculo de LibreOffice",
+  "spreadsheetMS": "Hoja de cálculo de Microsoft Office",
+  "uncompressedArchive": "Archivo no comprimido",
+  "uncompressedAudio": "Audio no comprimido",
+  "unknown": "Formato de archivo desconocido",
+  "videoHD": "Video de alta definición",
+  "videoSD": "Video de definición estándar"
+}

package/src/meta/file-format/locale.it.json

@@ -0,0 +1,44 @@
+{
+  "appleDiskImage": "Immagine Disco Apple",
+  "certificateTSD": "Marca temporale",
+  "compressedArchive": "Archivio compresso",
+  "compressedAudio": "Audio compresso",
+  "compressedDocumentMS": "Documento di testo Microsoft Word Compresso",
+  "compressedImage": "Immagine compressa",
+  "dart": "File Dart",
+  "documentAdobe": "Documento Adobe",
+  "documentDigitalSingnature": "Documento con firma digitale",
+  "documentLO": "Documento di testo LibreOffice",
+  "documentMS": "Documento di testo Microsoft Word",
+  "documentRTF": "Documento di testo Rich Text Format",
+  "documentTXT": "Documento di testo senza formattazione",
+  "documentWeb": "Pagina web",
+  "email": "E-mail",
+  "extensibleMarkupLanguage": "Linguaggio markup per dati",
+  "fileAI": "File vettoriale Adobe Illustrator",
+  "fileDB": "File di database",
+  "fileEPS": "File vettoriale Corel Draw",
+  "fileEXE": "File eseguibile Windows",
+  "fileJS": "File JavaScript",
+  "fileJSON": "File JavaScript Object Notation",
+  "filePHP": "File Hypertext Preprocessor",
+  "fileSASS": "File Syntactically Awesome StyleSheets",
+  "fileTS": "File TypeScript",
+  "fileTSX": "File TypeScript Extended Syntax",
+  "imageHEIC": "High Efficiency Image File Format",
+  "imagePNG": "Immagine Portable Network Graphics",
+  "imageSVG": "Immagine vettoriale Scalable Vector Graphics",
+  "imageTIFF": "Immagine Tag Image File Format",
+  "imageWEBP": "Immagine Google Web Picture",
+  "objectLinkingAndEmbedding": "Integrazione oggetti nei file",
+  "openDocumentFormat": "Documento OpenDocument",
+  "slideLO": "Slide di presentazione LibreOffice",
+  "slidePowerPoint": "Slide di presentazione PowerPoint",
+  "spreadsheetLO": "Foglio di calcolo LibreOffice",
+  "spreadsheetMS": "Foglio di calcolo Office",
+  "uncompressedArchive": "Archivio non compresso",
+  "uncompressedAudio": "Audio non compresso",
+  "unknown": "Formato file sconosciuto",
+  "videoHD": "Filmato HD ad alta risoluzione",
+  "videoSD": "Filmato SD a bassa risoluzione"
+}

package/src/type/animation.ts

@@ -0,0 +1,3 @@
+export type HorizontalActionsAnimationType =
+  | 'fade'
+  | 'slide'

package/src/type/file-types.ts

@@ -31,9 +31,13 @@ export type ExtensionSuffixType =
   | 'mpg'
   | 'mpg4'
   | 'mpga'
+  | 'odf'
   | 'odp'
   | 'ods'
   | 'odt'
+  | 'odt'
+  | 'ole'
+  | 'p7m'
   | 'pdf'
   | 'php'
   | 'png'
@@ -46,10 +50,12 @@ export type ExtensionSuffixType =
   | 'tar'
   | 'tiff'
   | 'ts'
+  | 'tsd'
   | 'txt'
   | 'wav'
   | 'webp'
   | 'xar'
   | 'xls'
   | 'xlsx'
+  | 'xml'
   | 'zip'

package/src/type/text.ts

@@ -1,3 +1,62 @@
+export type TypographyTagType =
+  | 'abbr'
+  | 'address'
+  | 'article'
+  | 'b'
+  | 'bdo'
+  | 'blockquote'
+  | 'cite'
+  | 'code'
+  | 'dd'
+  | 'del'
+  | 'details'
+  | 'dfn'
+  | 'div'
+  | 'dl'
+  | 'dt'
+  | 'em'
+  | 'figcaption'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'i'
+  | 'ins'
+  | 'kbd'
+  | 'label'
+  | 'legend'
+  | 'li'
+  | 'mark'
+  | 'ol'
+  | 'p'
+  | 'pre'
+  | 'q'
+  | 'rb'
+  | 'rt'
+  | 'ruby'
+  | 's'
+  | 'samp'
+  | 'small'
+  | 'span'
+  | 'strong'
+  | 'sub'
+  | 'summary'
+  | 'sup'
+  | 'time'
+  | 'u'
+  | 'ul'
+  | 'var'
+
+export type TypographyHeadingTagType =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+
 export type TypographyTruncateType =
   | 'all'
   | 'none'

package/src/type/variant-file-format.ts

@@ -3,6 +3,7 @@ import baselineAttachFile from '@icon/mi/baseline/attach-file.svg'
 import baselineAudiotrack from '@icon/mi/baseline/audiotrack.svg'
 import baselineTerminal from '@icon/mi/baseline/terminal.svg'
 import baselineInsertDriveFile from '@icon/mi/baseline/insert-drive-file.svg'
+import mdiLicense from '@icon/mdi/license.svg'
 import mdiHardDisk from '@icon/mdi/harddisk.svg'
 import baselineEmail from '@icon/mi/baseline/email.svg'
 import baselineWysiwyg from '@icon/mi/baseline/wysiwyg.svg'
@@ -19,6 +20,7 @@ type FileFormat =
   | 'archive'
   | 'attachment'
   | 'audio'
+  | 'certificate'
   | 'code'
   | 'data'
   | 'document'
@@ -54,6 +56,10 @@ const fileFormatsVariant: FileFormatVariants = {
     icon: baselineAudiotrack,
     variant: 'violet',
   },
+  certificate: {
+    icon: mdiLicense,
+    variant: 'orange',
+  },
   code: {
     icon: baselineTerminal,
     variant: 'yellow',

package/www/build/mds-input-select.esm.js

@@ -1 +1 @@
-import{p as e,b as a}from"./p-ecf343d4.js";export{s as setNonce}from"./p-ecf343d4.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await t(),a([["p-99fd6ce0",[[65,"mds-input-select",{autocomplete:[513],autoFocus:[516,"auto-focus"],placeholder:[513],name:[513],disabled:[516],required:[516],multiple:[516],size:[514],value:[520],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"]}]]]],e))));
+import{p as e,b as a}from"./p-ecf343d4.js";export{s as setNonce}from"./p-ecf343d4.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await t(),a([["p-0511e8d9",[[65,"mds-input-select",{autocomplete:[513],autoFocus:[516,"auto-focus"],placeholder:[513],name:[513],disabled:[516],required:[516],multiple:[516],size:[514],value:[520],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"],disabled:["disabledChanged"]}]]]],e))));

package/www/build/p-0511e8d9.entry.js

@@ -0,0 +1 @@
+import{r as n,c as r,h as t,H as o,g as i}from"./p-ecf343d4.js";function e(n){var r,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var i=n.length;for(r=0;r<i;r++)n[r]&&(t=e(n[r]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function s(){for(var n,r,t=0,o="",i=arguments.length;t<i;t++)(n=arguments[t])&&(r=e(n))&&(o&&(o+=" "),o+=r);return o}const a=class{constructor(t){n(this,t),this.changeEvent=r(this,"mdsInputSelectChange",7),t.$hostElement$["s-ei"]?this.internals=t.$hostElement$["s-ei"]:(this.internals=t.$hostElement$.attachInternals(),t.$hostElement$["s-ei"]=this.internals),this.onInput=n=>{const r=n.target;r&&(this.value=r.value)},this.onBlur=()=>{this.hasFocus=!1},this.onFocus=()=>{this.hasFocus=!0},this.emptyOptions=()=>{var n;const r=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelector("select"),t=null==r?void 0:r.querySelectorAll("option");t&&t.forEach(((n,r)=>{this.placeholder||n.remove(),this.placeholder&&r>0&&n.remove()}))},this.onSlotChangeHandler=()=>{var n,r,t;const o=null===(r=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelectorAll("slot")[0])||void 0===r?void 0:r.assignedNodes(),i=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector("select"),e=null==i?void 0:i.querySelectorAll("option");e&&(!this.placeholder&&e.length>0&&this.emptyOptions(),this.placeholder&&e.length>1&&this.emptyOptions(),null==o||o.forEach((n=>{null==i||i.appendChild(n.cloneNode(!0))})),this.value?null==i||i.querySelectorAll("option").forEach((n=>{n.selected=n.value===this.value})):this.placeholder||(this.value=null==i?void 0:i.querySelectorAll("option")[0].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,r,t;this.selected=""!==this.value,this.changeEvent.emit({value:null===(n=this.value)||void 0===n?void 0:n.toString()}),this.internals.setFormValue(null!==(t=null===(r=this.value)||void 0===r?void 0:r.toString())&&void 0!==t?t: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 t(o,{key:"4530b7a0bc9da6176b222477f7cf41aceaf380f3"},t("select",{key:"6f190cc6924b5f0da6f9703c10eec1e0c55e3360",class:s("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&&t("option",{key:"fca8a6450fb9c1ee9b66efc9b24f7a346673b3c6",value:"",disabled:!0,selected:!0},this.placeholder)),t("div",{key:"557463d7c2cc90f451fd9d18a9df7745352c29dd",class:"icon-container"},t("i",{key:"3b5cd0ddcd86d9ac2dd16717d3536f7daff4a48c",class:"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>'})),t("div",{key:"c341322713f8b8e739cb3e5d6a9f1b0a163cfadd",class:"option-container"},t("slot",{key:"bffb6b7b0a0be6f2f006f2776e03021fd5f59964",onSlotchange:this.onSlotChangeHandler})),t("mds-input-tip",{key:"b8af860a3f766e829fc811fd8b3aba9f5e33394b",position:"top",active:this.hasFocus},this.disabled&&t("mds-input-tip-item",{key:"ec17d9e2e3b3baab7d6307fa31853fa01a7f78fb",expanded:!0,variant:"disabled"}),this.required&&t("mds-input-tip-item",{key:"459e3ba038297693d650405b7af577d4a44505a8",expanded:this.hasFocus,variant:""===this.value?"required":"required-success"})))}static get formAssociated(){return!0}get host(){return i(this)}static get watchers(){return{value:["valueChanged"],disabled:["disabledChanged"]}}};a.style='@tailwind components;\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host([required]:not([required="false"]):focus-within) .icon {\n  -webkit-transform: translate(0.375rem, 0.375rem);\n  transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n  --mds-input-select-variant-color: var(--variant-primary-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, fill;\n  transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon {\n  fill: rgb(var(--tone-neutral-06));\n  -webkit-transform: translate(0.625rem, 0.5rem);\n  transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n  -webkit-transition-property: background-color, fill;\n  transition-property: background-color, fill;\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--variant-primary-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host( [variant="info"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant="success"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant="warning"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant="error"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n';export{a as mds_input_select}

package/www/build/{p-f1804d7b.system.entry.js → p-879b97ee.system.entry.js}

@@ -1 +1 @@
-System.register(["./p-39558724.system.js"],(function(n){"use strict";var r,t,o,e,i;return{setters:[function(n){r=n.r;t=n.c;o=n.h;e=n.H;i=n.g}],execute:function(){function s(n){var r,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var e=n.length;for(r=0;r<e;r++)n[r]&&(t=s(n[r]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function a(){for(var n,r,t=0,o="",e=arguments.length;t<e;t++)(n=arguments[t])&&(r=s(n))&&(o&&(o+=" "),o+=r);return o}var c='<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>';var l='@tailwind components;\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host([required]:not([required="false"]):focus-within) .icon {\n  -webkit-transform: translate(0.375rem, 0.375rem);\n  transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n  --mds-input-select-variant-color: var(--variant-primary-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, fill;\n  transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon {\n  fill: rgb(var(--tone-neutral-06));\n  -webkit-transform: translate(0.625rem, 0.5rem);\n  transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n  -webkit-transition-property: background-color, fill;\n  transition-property: background-color, fill;\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--variant-primary-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host( [variant="info"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant="success"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant="warning"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant="error"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n';var u=l;var d=n("mds_input_select",function(){function n(n){var o=this;r(this,n);this.changeEvent=t(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.onInput=function(n){var r=n.target;if(r){o.value=r.value}};this.onBlur=function(){o.hasFocus=false};this.onFocus=function(){o.hasFocus=true};this.emptyOptions=function(){var n;var r=(n=o.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("select");var t=r===null||r===void 0?void 0:r.querySelectorAll("option");if(!t){return}t.forEach((function(n,r){if(!o.placeholder){n.remove()}if(o.placeholder&&r>0){n.remove()}}))};this.onSlotChangeHandler=function(){var n,r,t;var e=(r=(n=o.host.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("slot")[0])===null||r===void 0?void 0:r.assignedNodes();var i=(t=o.host.shadowRoot)===null||t===void 0?void 0:t.querySelector("select");var s=i===null||i===void 0?void 0:i.querySelectorAll("option");if(!s){return}if(!o.placeholder&&s.length>0){o.emptyOptions()}if(o.placeholder&&s.length>1){o.emptyOptions()}e===null||e===void 0?void 0:e.forEach((function(n){i===null||i===void 0?void 0:i.appendChild(n.cloneNode(true))}));if(o.value){i===null||i===void 0?void 0:i.querySelectorAll("option").forEach((function(n){n.selected=n.value===o.value}))}else if(!o.placeholder){o.value=i===null||i===void 0?void 0:i.querySelectorAll("option")[0].value}};this.selected=undefined;this.hasFocus=false;this.autocomplete=undefined;this.autoFocus=undefined;this.placeholder=undefined;this.name=undefined;this.disabled=false;this.required=false;this.multiple=false;this.size=0;this.value="";this.variant=undefined}n.prototype.valueChanged=function(){var n,r,t;this.selected=this.value!=="";this.changeEvent.emit({value:(n=this.value)===null||n===void 0?void 0:n.toString()});this.internals.setFormValue((t=(r=this.value)===null||r===void 0?void 0:r.toString())!==null&&t!==void 0?t:null)};n.prototype.componentDidLoad=function(){if(this.value){this.selected=true;this.internals.setFormValue(this.value.toString())}};n.prototype.render=function(){return o(e,{key:"81ab7f5b366ae9e842612a276b8efe1d52d21dd0"},o("select",{key:"130119ceb7447ee4f8b80b5a6f7b7ac712c9f347",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&&o("option",{key:"f56c4a89209571e5f57c0fd9edc5a3fb34e62664",value:"",disabled:true,selected:true},this.placeholder)),o("div",{key:"65564368c9fc116b98a0c9159cf3191e03d49193",class:"icon-container"},o("i",{key:"d35fb6bb42e9ed84f5d7d5a2b432c7da03164eab",class:"icon",innerHTML:c})),o("div",{key:"d8515da7da334fbd00ff6df9ee81f8d46cfb6c8c",class:"option-container"},o("slot",{key:"2209933b74c5a1dfab7673eaaaac8e23b8e15a74",onSlotchange:this.onSlotChangeHandler})),o("mds-input-tip",{key:"a794103ca26e4d2312059108448e5d0643edca5d",position:"top",active:this.hasFocus},this.disabled&&o("mds-input-tip-item",{key:"1415ed93d80ad27f2e922ea5c5176f78cf0ffa65",expanded:true,variant:"disabled"}),this.required&&o("mds-input-tip-item",{key:"36807554f81acc5c312835587493b5be0c632157",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 i(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return n}());d.style=u}}}));
+System.register(["./p-39558724.system.js"],(function(n){"use strict";var r,t,o,i,e;return{setters:[function(n){r=n.r;t=n.c;o=n.h;i=n.H;e=n.g}],execute:function(){function s(n){var r,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var i=n.length;for(r=0;r<i;r++)n[r]&&(t=s(n[r]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function a(){for(var n,r,t=0,o="",i=arguments.length;t<i;t++)(n=arguments[t])&&(r=s(n))&&(o&&(o+=" "),o+=r);return o}var c='<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>';var l='@tailwind components;\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host([required]:not([required="false"]):focus-within) .icon {\n  -webkit-transform: translate(0.375rem, 0.375rem);\n  transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n  --mds-input-select-variant-color: var(--variant-primary-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, fill;\n  transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon {\n  fill: rgb(var(--tone-neutral-06));\n  -webkit-transform: translate(0.625rem, 0.5rem);\n  transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n  -webkit-transition-property: background-color, fill;\n  transition-property: background-color, fill;\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--variant-primary-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host( [variant="info"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant="success"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant="warning"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant="error"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n';var u=l;var d=n("mds_input_select",function(){function n(n){var o=this;r(this,n);this.changeEvent=t(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.onInput=function(n){var r=n.target;if(r){o.value=r.value}};this.onBlur=function(){o.hasFocus=false};this.onFocus=function(){o.hasFocus=true};this.emptyOptions=function(){var n;var r=(n=o.host.shadowRoot)===null||n===void 0?void 0:n.querySelector("select");var t=r===null||r===void 0?void 0:r.querySelectorAll("option");if(!t){return}t.forEach((function(n,r){if(!o.placeholder){n.remove()}if(o.placeholder&&r>0){n.remove()}}))};this.onSlotChangeHandler=function(){var n,r,t;var i=(r=(n=o.host.shadowRoot)===null||n===void 0?void 0:n.querySelectorAll("slot")[0])===null||r===void 0?void 0:r.assignedNodes();var e=(t=o.host.shadowRoot)===null||t===void 0?void 0:t.querySelector("select");var s=e===null||e===void 0?void 0:e.querySelectorAll("option");if(!s){return}if(!o.placeholder&&s.length>0){o.emptyOptions()}if(o.placeholder&&s.length>1){o.emptyOptions()}i===null||i===void 0?void 0:i.forEach((function(n){e===null||e===void 0?void 0:e.appendChild(n.cloneNode(true))}));if(o.value){e===null||e===void 0?void 0:e.querySelectorAll("option").forEach((function(n){n.selected=n.value===o.value}))}else if(!o.placeholder){o.value=e===null||e===void 0?void 0:e.querySelectorAll("option")[0].value}};this.selected=undefined;this.hasFocus=false;this.autocomplete=undefined;this.autoFocus=undefined;this.placeholder=undefined;this.name=undefined;this.disabled=false;this.required=false;this.multiple=false;this.size=0;this.value="";this.variant=undefined}n.prototype.valueChanged=function(){var n,r,t;this.selected=this.value!=="";this.changeEvent.emit({value:(n=this.value)===null||n===void 0?void 0:n.toString()});this.internals.setFormValue((t=(r=this.value)===null||r===void 0?void 0:r.toString())!==null&&t!==void 0?t: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 o(i,{key:"4530b7a0bc9da6176b222477f7cf41aceaf380f3"},o("select",{key:"6f190cc6924b5f0da6f9703c10eec1e0c55e3360",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&&o("option",{key:"fca8a6450fb9c1ee9b66efc9b24f7a346673b3c6",value:"",disabled:true,selected:true},this.placeholder)),o("div",{key:"557463d7c2cc90f451fd9d18a9df7745352c29dd",class:"icon-container"},o("i",{key:"3b5cd0ddcd86d9ac2dd16717d3536f7daff4a48c",class:"icon",innerHTML:c})),o("div",{key:"c341322713f8b8e739cb3e5d6a9f1b0a163cfadd",class:"option-container"},o("slot",{key:"bffb6b7b0a0be6f2f006f2776e03021fd5f59964",onSlotchange:this.onSlotChangeHandler})),o("mds-input-tip",{key:"b8af860a3f766e829fc811fd8b3aba9f5e33394b",position:"top",active:this.hasFocus},this.disabled&&o("mds-input-tip-item",{key:"ec17d9e2e3b3baab7d6307fa31853fa01a7f78fb",expanded:true,variant:"disabled"}),this.required&&o("mds-input-tip-item",{key:"459e3ba038297693d650405b7af577d4a44505a8",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 e(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"],disabled:["disabledChanged"]}},enumerable:false,configurable:true});return n}());d.style=u}}}));

package/www/build/p-ec8a0b02.system.js

@@ -1 +1 @@
-var __awaiter=this&&this.__awaiter||function(t,e,n,r){function i(t){return t instanceof n?t:new n((function(e){e(t)}))}return new(n||(n=Promise))((function(n,u){function c(t){try{a(r.next(t))}catch(t){u(t)}}function o(t){try{a(r["throw"](t))}catch(t){u(t)}}function a(t){t.done?n(t.value):i(t.value).then(c,o)}a((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var n={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,c;return c={next:o(0),throw:o(1),return:o(2)},typeof Symbol==="function"&&(c[Symbol.iterator]=function(){return this}),c;function o(t){return function(e){return a([t,e])}}function a(o){if(r)throw new TypeError("Generator is already executing.");while(c&&(c=0,o[0]&&(n=0)),n)try{if(r=1,i&&(u=o[0]&2?i["return"]:o[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,o[1])).done)return u;if(i=0,u)o=[o[0]&2,u.value];switch(o[0]){case 0:case 1:u=o;break;case 4:n.label++;return{value:o[1],done:false};case 5:n.label++;i=o[1];o=[0];continue;case 7:o=n.ops.pop();n.trys.pop();continue;default:if(!(u=n.trys,u=u.length>0&&u[u.length-1])&&(o[0]===6||o[0]===2)){n=0;continue}if(o[0]===3&&(!u||o[1]>u[0]&&o[1]<u[3])){n.label=o[1];break}if(o[0]===6&&n.label<u[1]){n.label=u[1];u=o;break}if(u&&n.label<u[2]){n.label=u[2];n.ops.push(o);break}if(u[2])n.ops.pop();n.trys.pop();continue}o=e.call(t,n)}catch(t){o=[6,t];i=0}finally{r=u=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:true}}};System.register(["./p-39558724.system.js","./p-56ba5cbf.system.js"],(function(t,e){"use strict";var n,r,i;return{setters:[function(e){n=e.p;r=e.b;t("setNonce",e.s)},function(t){i=t.g}],execute:function(){var t=this;var u=function(){var t=e.meta.url;var r={};if(t!==""){r.resourcesUrl=new URL(".",t).href}return n(r)};u().then((function(e){return __awaiter(t,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:return[4,i()];case 1:t.sent();return[2,r([["p-f1804d7b.system",[[65,"mds-input-select",{autocomplete:[513],autoFocus:[516,"auto-focus"],placeholder:[513],name:[513],disabled:[516],required:[516],multiple:[516],size:[514],value:[520],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"]}]]]],e)]}}))}))}))}}}));
+var __awaiter=this&&this.__awaiter||function(e,t,n,r){function i(e){return e instanceof n?e:new n((function(t){t(e)}))}return new(n||(n=Promise))((function(n,u){function a(e){try{o(r.next(e))}catch(e){u(e)}}function c(e){try{o(r["throw"](e))}catch(e){u(e)}}function o(e){e.done?n(e.value):i(e.value).then(a,c)}o((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var n={label:0,sent:function(){if(u[0]&1)throw u[1];return u[1]},trys:[],ops:[]},r,i,u,a;return a={next:c(0),throw:c(1),return:c(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function c(e){return function(t){return o([e,t])}}function o(c){if(r)throw new TypeError("Generator is already executing.");while(a&&(a=0,c[0]&&(n=0)),n)try{if(r=1,i&&(u=c[0]&2?i["return"]:c[0]?i["throw"]||((u=i["return"])&&u.call(i),0):i.next)&&!(u=u.call(i,c[1])).done)return u;if(i=0,u)c=[c[0]&2,u.value];switch(c[0]){case 0:case 1:u=c;break;case 4:n.label++;return{value:c[1],done:false};case 5:n.label++;i=c[1];c=[0];continue;case 7:c=n.ops.pop();n.trys.pop();continue;default:if(!(u=n.trys,u=u.length>0&&u[u.length-1])&&(c[0]===6||c[0]===2)){n=0;continue}if(c[0]===3&&(!u||c[1]>u[0]&&c[1]<u[3])){n.label=c[1];break}if(c[0]===6&&n.label<u[1]){n.label=u[1];u=c;break}if(u&&n.label<u[2]){n.label=u[2];n.ops.push(c);break}if(u[2])n.ops.pop();n.trys.pop();continue}c=t.call(e,n)}catch(e){c=[6,e];i=0}finally{r=u=0}if(c[0]&5)throw c[1];return{value:c[0]?c[1]:void 0,done:true}}};System.register(["./p-39558724.system.js","./p-56ba5cbf.system.js"],(function(e,t){"use strict";var n,r,i;return{setters:[function(t){n=t.p;r=t.b;e("setNonce",t.s)},function(e){i=e.g}],execute:function(){var e=this;var u=function(){var e=t.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return n(r)};u().then((function(t){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,i()];case 1:e.sent();return[2,r([["p-879b97ee.system",[[65,"mds-input-select",{autocomplete:[513],autoFocus:[516,"auto-focus"],placeholder:[513],name:[513],disabled:[516],required:[516],multiple:[516],size:[514],value:[520],variant:[513],selected:[32],hasFocus:[32]},null,{value:["valueChanged"],disabled:["disabledChanged"]}]]]],t)]}}))}))}))}}}));

package/dist/mds-input-select/p-99fd6ce0.entry.js

@@ -1 +0,0 @@
-import{r as n,c as r,h as t,H as o,g as i}from"./p-ecf343d4.js";function e(n){var r,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var i=n.length;for(r=0;r<i;r++)n[r]&&(t=e(n[r]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function s(){for(var n,r,t=0,o="",i=arguments.length;t<i;t++)(n=arguments[t])&&(r=e(n))&&(o&&(o+=" "),o+=r);return o}const a=class{constructor(t){n(this,t),this.changeEvent=r(this,"mdsInputSelectChange",7),t.$hostElement$["s-ei"]?this.internals=t.$hostElement$["s-ei"]:(this.internals=t.$hostElement$.attachInternals(),t.$hostElement$["s-ei"]=this.internals),this.onInput=n=>{const r=n.target;r&&(this.value=r.value)},this.onBlur=()=>{this.hasFocus=!1},this.onFocus=()=>{this.hasFocus=!0},this.emptyOptions=()=>{var n;const r=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelector("select"),t=null==r?void 0:r.querySelectorAll("option");t&&t.forEach(((n,r)=>{this.placeholder||n.remove(),this.placeholder&&r>0&&n.remove()}))},this.onSlotChangeHandler=()=>{var n,r,t;const o=null===(r=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelectorAll("slot")[0])||void 0===r?void 0:r.assignedNodes(),i=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector("select"),e=null==i?void 0:i.querySelectorAll("option");e&&(!this.placeholder&&e.length>0&&this.emptyOptions(),this.placeholder&&e.length>1&&this.emptyOptions(),null==o||o.forEach((n=>{null==i||i.appendChild(n.cloneNode(!0))})),this.value?null==i||i.querySelectorAll("option").forEach((n=>{n.selected=n.value===this.value})):this.placeholder||(this.value=null==i?void 0:i.querySelectorAll("option")[0].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,r,t;this.selected=""!==this.value,this.changeEvent.emit({value:null===(n=this.value)||void 0===n?void 0:n.toString()}),this.internals.setFormValue(null!==(t=null===(r=this.value)||void 0===r?void 0:r.toString())&&void 0!==t?t:null)}componentDidLoad(){this.value&&(this.selected=!0,this.internals.setFormValue(this.value.toString()))}render(){return t(o,{key:"81ab7f5b366ae9e842612a276b8efe1d52d21dd0"},t("select",{key:"130119ceb7447ee4f8b80b5a6f7b7ac712c9f347",class:s("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&&t("option",{key:"f56c4a89209571e5f57c0fd9edc5a3fb34e62664",value:"",disabled:!0,selected:!0},this.placeholder)),t("div",{key:"65564368c9fc116b98a0c9159cf3191e03d49193",class:"icon-container"},t("i",{key:"d35fb6bb42e9ed84f5d7d5a2b432c7da03164eab",class:"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>'})),t("div",{key:"d8515da7da334fbd00ff6df9ee81f8d46cfb6c8c",class:"option-container"},t("slot",{key:"2209933b74c5a1dfab7673eaaaac8e23b8e15a74",onSlotchange:this.onSlotChangeHandler})),t("mds-input-tip",{key:"a794103ca26e4d2312059108448e5d0643edca5d",position:"top",active:this.hasFocus},this.disabled&&t("mds-input-tip-item",{key:"1415ed93d80ad27f2e922ea5c5176f78cf0ffa65",expanded:!0,variant:"disabled"}),this.required&&t("mds-input-tip-item",{key:"36807554f81acc5c312835587493b5be0c632157",expanded:this.hasFocus,variant:""===this.value?"required":"required-success"})))}static get formAssociated(){return!0}get host(){return i(this)}static get watchers(){return{value:["valueChanged"]}}};a.style='@tailwind components;\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host([required]:not([required="false"]):focus-within) .icon {\n  -webkit-transform: translate(0.375rem, 0.375rem);\n  transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n  --mds-input-select-variant-color: var(--variant-primary-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, fill;\n  transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon {\n  fill: rgb(var(--tone-neutral-06));\n  -webkit-transform: translate(0.625rem, 0.5rem);\n  transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n  -webkit-transition-property: background-color, fill;\n  transition-property: background-color, fill;\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--variant-primary-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host( [variant="info"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant="success"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant="warning"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant="error"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n';export{a as mds_input_select}

package/www/build/p-99fd6ce0.entry.js

@@ -1 +0,0 @@
-import{r as n,c as r,h as t,H as o,g as i}from"./p-ecf343d4.js";function e(n){var r,t,o="";if("string"==typeof n||"number"==typeof n)o+=n;else if("object"==typeof n)if(Array.isArray(n)){var i=n.length;for(r=0;r<i;r++)n[r]&&(t=e(n[r]))&&(o&&(o+=" "),o+=t)}else for(t in n)n[t]&&(o&&(o+=" "),o+=t);return o}function s(){for(var n,r,t=0,o="",i=arguments.length;t<i;t++)(n=arguments[t])&&(r=e(n))&&(o&&(o+=" "),o+=r);return o}const a=class{constructor(t){n(this,t),this.changeEvent=r(this,"mdsInputSelectChange",7),t.$hostElement$["s-ei"]?this.internals=t.$hostElement$["s-ei"]:(this.internals=t.$hostElement$.attachInternals(),t.$hostElement$["s-ei"]=this.internals),this.onInput=n=>{const r=n.target;r&&(this.value=r.value)},this.onBlur=()=>{this.hasFocus=!1},this.onFocus=()=>{this.hasFocus=!0},this.emptyOptions=()=>{var n;const r=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelector("select"),t=null==r?void 0:r.querySelectorAll("option");t&&t.forEach(((n,r)=>{this.placeholder||n.remove(),this.placeholder&&r>0&&n.remove()}))},this.onSlotChangeHandler=()=>{var n,r,t;const o=null===(r=null===(n=this.host.shadowRoot)||void 0===n?void 0:n.querySelectorAll("slot")[0])||void 0===r?void 0:r.assignedNodes(),i=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector("select"),e=null==i?void 0:i.querySelectorAll("option");e&&(!this.placeholder&&e.length>0&&this.emptyOptions(),this.placeholder&&e.length>1&&this.emptyOptions(),null==o||o.forEach((n=>{null==i||i.appendChild(n.cloneNode(!0))})),this.value?null==i||i.querySelectorAll("option").forEach((n=>{n.selected=n.value===this.value})):this.placeholder||(this.value=null==i?void 0:i.querySelectorAll("option")[0].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,r,t;this.selected=""!==this.value,this.changeEvent.emit({value:null===(n=this.value)||void 0===n?void 0:n.toString()}),this.internals.setFormValue(null!==(t=null===(r=this.value)||void 0===r?void 0:r.toString())&&void 0!==t?t:null)}componentDidLoad(){this.value&&(this.selected=!0,this.internals.setFormValue(this.value.toString()))}render(){return t(o,{key:"81ab7f5b366ae9e842612a276b8efe1d52d21dd0"},t("select",{key:"130119ceb7447ee4f8b80b5a6f7b7ac712c9f347",class:s("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&&t("option",{key:"f56c4a89209571e5f57c0fd9edc5a3fb34e62664",value:"",disabled:!0,selected:!0},this.placeholder)),t("div",{key:"65564368c9fc116b98a0c9159cf3191e03d49193",class:"icon-container"},t("i",{key:"d35fb6bb42e9ed84f5d7d5a2b432c7da03164eab",class:"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>'})),t("div",{key:"d8515da7da334fbd00ff6df9ee81f8d46cfb6c8c",class:"option-container"},t("slot",{key:"2209933b74c5a1dfab7673eaaaac8e23b8e15a74",onSlotchange:this.onSlotChangeHandler})),t("mds-input-tip",{key:"a794103ca26e4d2312059108448e5d0643edca5d",position:"top",active:this.hasFocus},this.disabled&&t("mds-input-tip-item",{key:"1415ed93d80ad27f2e922ea5c5176f78cf0ffa65",expanded:!0,variant:"disabled"}),this.required&&t("mds-input-tip-item",{key:"36807554f81acc5c312835587493b5be0c632157",expanded:this.hasFocus,variant:""===this.value?"required":"required-success"})))}static get formAssociated(){return!0}get host(){return i(this)}static get watchers(){return{value:["valueChanged"]}}};a.style='@tailwind components;\n@tailwind utilities;\n\n\n:host{\n\n  min-height: 1.5rem;\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  --mds-input-select-variant-color: var(--tone-neutral-01);\n  --mds-input-select-ring: 0 0 0 1px rgb(var(--mds-input-select-variant-color) / 0.1);\n  --mds-input-select-shadow: 0 1px 3px 0 rgb(var(--mds-input-select-variant-color) / 0.1), 0 1px 2px 0 rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n  --mds-input-select-arrow-icon-blur-background-color: transparent;\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color) / 0.5);\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--mds-input-select-variant-color));\n\n  color: rgb(var(--tone-neutral-02));\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n          -ms-user-select: none;\n          user-select: none;\n}\n\n:host([required]:not([required="false"]):focus-within) .icon {\n  -webkit-transform: translate(0.375rem, 0.375rem);\n  transform: translate(0.375rem, 0.375rem);\n}\n\n:host(:hover),\n:host(:focus-within) {\n\n  --mds-input-select-variant-color: var(--variant-primary-03);\n  --mds-input-select-ring: 0 0 0 3px rgb(var(--mds-input-select-variant-color) / 1);\n  --mds-input-select-shadow: 0 4px 6px -1px rgb(var(--mds-input-select-variant-color) / 0.1), 0 2px 4px -1px rgb(var(--mds-input-select-variant-color) / 0.06);\n  --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-hover-background-color);\n  --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-hover-color);\n}\n\n.input{\n\n  font-family: Karla, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif;\n\n  font-size: 1rem;\n\n  line-height: 1.5rem;\n\n  -webkit-font-smoothing: antialiased;\n\n  -moz-osx-font-smoothing: grayscale;\n\n  margin: 0rem;\n\n  min-height: 3rem;\n\n  width: 100%;\n\n  border-radius: 0.5rem;\n\n  padding-top: 0.75rem;\n\n  padding-bottom: 0.75rem;\n\n  padding-left: 1rem;\n\n  padding-right: 3rem;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  -webkit-appearance: none;\n\n     -moz-appearance: none;\n\n          appearance: none;\n  background-color: rgb(var(--tone-neutral));\n  border: 0;\n  -webkit-box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  box-shadow: var(--mds-input-select-ring), var(--mds-input-select-shadow);\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  color: rgb(var(--tone-neutral-05));\n  cursor: pointer;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  -webkit-transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, fill, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, fill;\n  transition-property: background-color, border-color, box-shadow, color, fill, -webkit-box-shadow;\n}\n\n.input:hover,\n.input:focus{\n\n  outline: 2px solid transparent;\n\n  outline-offset: 2px;\n\n  -webkit-transition-duration: 300ms;\n\n  transition-duration: 300ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);\n\n  color: rgb(var(--tone-neutral-03));\n}\n\n:host([value]:not([value=""])) .input {\n  color: rgb(var(--tone-neutral-03));\n}\n\n.input--mds-input-select-selected {\n  color: rgb(var(--tone-neutral-02));\n}\n\n.input:disabled {\n  background-color: rgb(var(--tone-neutral-09));\n  opacity: 1;\n}\n\n:host([disabled]:not([disabled="false"])) {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .input {\n  pointer-events: none;\n}\n\n:host([disabled]:not([disabled="false"])) .icon {\n  fill: rgb(var(--tone-neutral-06));\n  -webkit-transform: translate(0.625rem, 0.5rem);\n  transform: translate(0.625rem, 0.5rem);\n}\n\n.icon-container{\n\n  right: 1rem;\n\n  height: 3rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  color: inherit;\n  display: -ms-flexbox;\n  display: flex;\n  pointer-events: none;\n  position: absolute;\n}\n\n.icon{\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n.icon svg{\n\n  aspect-ratio: 1/1;\n\n  height: 100%;\n\n  width: 100%;\n}\n\n.icon{\n\n  border-radius: 9999px;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  background-color: var(--mds-input-select-arrow-icon-background-color, rgb(var(--variant-primary-09)));\n  fill: var(--mds-input-select-arrow-icon-color, rgb(var(--variant-primary-04)));\n  -webkit-transition-property: background-color, fill;\n  transition-property: background-color, fill;\n}\n\n.option-container {\n  display: none;\n}\n\n@container (max-width: 210px) {\n  :host .tip__content,\n  :host(:focus-within) .tip__content {\n    grid-template-columns: 0fr;\n    opacity: 0;\n  }\n\n  :host .tip {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  :host {\n\n    --mds-input-select-background: rgb(var(--variant-primary-07));\n  }\n}\n\n@tailwind utilities;\n\n:host {\n\n  --mds-input-select-icon-color: var(--variant-primary-03);\n  --mds-input-select-variant-color: 0 0 0;\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--variant-primary-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--variant-primary-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--variant-primary-04));\n}\n\n:host( :hover ),\n:host( :focus-within ) {\n\n  --mds-input-select-variant-color: var(--variant-primary-04);\n}\n\n:host( [variant="info"] ) {\n\n  --mds-input-select-icon-color: var(--status-info-05);\n  --mds-input-select-tip-background: var(--status-info-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-info-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-info-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-info-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-info-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="info"]:hover ),\n:host( [variant="info"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-info-04);\n  --mds-input-select-variant-color: var(--status-info-05);\n}\n\n:host( [variant="success"] ) {\n\n  --mds-input-select-icon-color: var(--status-success-05);\n  --mds-input-select-tip-background: var(--status-success-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-success-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-success-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-success-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-success-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="success"]:hover ),\n:host( [variant="success"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-success-04);\n  --mds-input-select-variant-color: var(--status-success-05);\n}\n\n:host( [variant="warning"] ) {\n\n  --mds-input-select-icon-color: var(--status-warning-05);\n  --mds-input-select-tip-background: var(--status-warning-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-warning-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-warning-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-warning-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-warning-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="warning"]:hover ),\n:host( [variant="warning"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-warning-04);\n  --mds-input-select-variant-color: var(--status-warning-05);\n}\n\n:host( [variant="error"] ) {\n\n  --mds-input-select-icon-color: var(--status-error-05);\n  --mds-input-select-tip-background: var(--status-error-05);\n  --mds-input-select-arrow-icon-blur-background-color: rgb(var(--status-error-09));\n  --mds-input-select-arrow-icon-hover-background-color: rgb(var(--status-error-08));\n  --mds-input-select-arrow-icon-blur-color: rgb(var(--status-error-06));\n  --mds-input-select-arrow-icon-hover-color: rgb(var(--status-error-04));\n  --mds-input-select-variant-color: 0 0 0;\n}\n\n:host( [variant="error"]:hover ),\n:host( [variant="error"]:focus-within ) {\n\n  --mds-input-select-icon-color: var(--status-error-04);\n  --mds-input-select-variant-color: var(--status-error-05);\n}\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .input,\n  .input:hover,\n  .input:focus,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .input,\n    .input:hover,\n    .input:focus,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n    --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n    --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n    --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n    --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-03));\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n      --mds-input-select-arrow-icon-background-color: var(--mds-input-select-arrow-icon-blur-background-color);\n      --mds-input-select-arrow-icon-blur-background-color: rgb(var(--variant-primary-05));\n      --mds-input-select-arrow-icon-blur-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-color: var(--mds-input-select-arrow-icon-blur-color);\n      --mds-input-select-arrow-icon-hover-background-color: rgb(var(--mds-input-select-variant-color));\n      --mds-input-select-arrow-icon-hover-color: rgb(var(--tone-neutral-10));\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-03));\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n  }\n\n  .input {\n    color: rgb(var(--tone-neutral-01));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-input-select-ring: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.6);\n    }\n\n    .input {\n      color: rgb(var(--tone-neutral-01));\n    }\n  }\n}\n\n\n';export{a as mds_input_select}