\r\n\t\t\t\t${this.title ? html`${this.title}
` : html``}\r\n\t\t\t\t\r\n\t\t\t\r\n\t\t`;\r\n\t}\r\n}\r\n\r\ndefineElement('mds-dropdown', MdsDropdown);\r\n","import { css } from \"@mds/core\";\r\n\r\nexport const inputCSS = css`\r\n\t/* \t###################################################################### */\r\n\t/**\tComponent tokens\r\n\t\t\t\t Use the design tokens to set these component tokens.\r\n\t\t\t */\r\n\t:host {\r\n\t\t--line-width: 1px;\r\n\t\t--line-style: var(--mds-line-border-base-style);\r\n\t\t--line-color: var(--mds-color-border-input);\r\n\t\t--radius: var(--mds-line-border-base-radius);\r\n\r\n\t\t--label-width: 1fr;\r\n\t\t--input-width: 2fr;\r\n\t\t--text-color: var(--mds-color-text-heading);\r\n\t\t--input-color: var(--mds-color-text-input);\r\n\t\t--placeholder-color: var(--mds-color-text-placeholder);\r\n\t\t--background-color: var(--mds-color-background-input);\r\n\r\n\t\t--padding-vertical: var(--mds-spacing-3);\r\n\t\t--padding-horizontal: var(--mds-spacing-3);\r\n\r\n\t\t--grid-columns: var(--label-width) var(--input-width) auto;\r\n\t\t--grid-rows: repeat(auto-fit, auto);\r\n\r\n\t\t--grid-column: 1 / -1;\r\n\t\t--grid-row: 1;\r\n\t\t--last-row: 3;\r\n\t}\r\n\r\n\t/* \t###################################################################### */\r\n\t/**\tInput host rules\r\n\t\t\t\t This is the main rule set.\r\n\t\t\t */\r\n\t/* :host {\r\n\t} */\r\n\r\n\t.mds-input {\r\n\t\tdisplay: grid;\r\n\t\tgrid-template-columns: var(--grid-columns);\r\n\t\tgrid-template-rows: var(--grid-rows);\r\n\t\tjustify-content: start;\r\n\t\talign-items: center;\r\n\t\tflex-wrap: wrap;\r\n\t\tgap: var(--mds-spacing-2);\r\n\t}\r\n\r\n\t:host(:not([label])) > .mds-input {\r\n\t\tdisplay: flex;\r\n\t}\r\n\r\n\t:host(:not([label])) > .mds-input > * {\r\n\t\tflex: 1 1 auto;\r\n\t}\r\n\r\n\tlabel {\r\n\t\tgrid-column: var(--grid-column);\r\n\t\tgrid-row: var(--grid-row);\r\n\t\tcolor: var(--text-color);\r\n\t}\r\n\r\n\tinput {\r\n\t\tgrid-column: var(--grid-column);\r\n\t\tborder-style: var(--line-style);\r\n\t\tborder-width: var(--line-width);\r\n\t\tborder-color: var(--line-color);\r\n\t\tborder-radius: var(--radius);\r\n\t\tmargin: 0;\r\n\t\tpadding: var(--padding-vertical) var(--padding-horizontal);\r\n\t\tfont-family: inherit;\r\n\t\tfont-size: inherit;\r\n\t\tline-height: 1.42;\r\n\t\tcolor: var(--input-color);\r\n\t\tbackground-color: var(--background-color);\r\n\t}\r\n\r\n\tinput:hover {\r\n\t\t--line-color: var(--mds-color-border-input-hover);\r\n\t}\r\n\r\n\tinput[disabled]:hover {\r\n\t\tcursor: not-allowed;\r\n\t\t--line-color: var(--mds-color-border-input);\r\n\t}\r\n\r\n\tinput[type=\"date\"] {\r\n\t\tline-height: 1.2;\r\n\t}\r\n\r\n\tinput[type=\"file\"] {\r\n\t\tfont-family: var(--mds-typography-font-base-fonts);\r\n\t\tfont-size: calc(\r\n\t\t\tvar(--mds-typography-scale-increment-body) *\r\n\t\t\t\tvar(--mds-typography-font-size) * 1rem\r\n\t\t);\r\n\t\tline-height: 1;\r\n\t}\r\n\r\n\tinput::placeholder {\r\n\t\tcolor: var(--placeholder-color);\r\n\t}\r\n\r\n\t::slotted(*) {\r\n\t\tdisplay: flex;\r\n\t\tgap: var(--mds-spacing-2);\r\n\t\tposition: relative;\r\n\t\tgrid-column: -1;\r\n\t\tgrid-row: 2;\r\n\t\talign-self: end;\r\n\t}\r\n\r\n\t.messages {\r\n\t\tgrid-column: var(--grid-column);\r\n\t\tgrid-row: var(--last-row);\r\n\t\tmax-width: 80ch;\r\n\t}\r\n\r\n\t.messages > * {\r\n\t\tmargin: var(--mds-spacing-2) 0;\r\n\t}\r\n\r\n\t.messages > *:first-child {\r\n\t\tmargin-top: 0;\r\n\t}\r\n\r\n\t.messages > *:last-child {\r\n\t\tmargin-bottom: 0;\r\n\t}\r\n\r\n\t.message {\r\n\t\tcolor: var(--text-color);\r\n\t}\r\n\r\n\t.error {\r\n\t\tcolor: var(--mds-color-feedback-error);\r\n\t}\r\n\r\n\t.error::before {\r\n\t\tpadding-inline-end: var(--mds-spacing-2);\r\n\t\tfont-family: var(--mds-icon-font-base-family);\r\n\t\tcontent: var(--mds-icon-glyphs-base-attention);\r\n\t}\r\n\r\n\t/* \t###################################################################### */\r\n\t/**\tProperties for the input */\r\n\t/* Layout */\r\n\t:host([position=\"left\"]) .mds-input {\r\n\t\t--grid-columns: var(--label-width) var(--input-width);\r\n\t\t--grid-rows: auto auto;\r\n\t}\r\n\t:host([size]) {\r\n\t\t--label-width: auto;\r\n\t\t--input-width: auto;\r\n\t}\r\n\t:host([size]) input[size] {\r\n\t\twidth: var(--input-size);\r\n\t}\r\n\r\n\t@media (min-width: 576px) {\r\n\t\t:host([position=\"left\"]) label {\r\n\t\t\t--grid-column: 1 / 2;\r\n\t\t\t--grid-row: 1;\r\n\t\t}\r\n\r\n\t\t:host([position=\"left\"]) input {\r\n\t\t\t--grid-column: 2 / 3;\r\n\t\t\t--grid-row: 1;\r\n\t\t}\r\n\r\n\t\t:host([position=\"left\"]) .messages {\r\n\t\t\t--grid-column: 2 / 3;\r\n\t\t\t--last-row: 2;\r\n\t\t}\r\n\r\n\t\t:host([position=\"left\"]) ::slotted(*) {\r\n\t\t\tgrid-row: 1;\r\n\t\t}\r\n\t}\r\n\r\n\tinput:only-child {\r\n\t\t--grid-column: 1 / -1;\r\n\t}\r\n\r\n\t/* Appearance */\r\n\t:host([ondark]) {\r\n\t\t--text-color: var(--mds-color-text-link-inverse);\r\n\t}\r\n\r\n\t:host([ondark]) input {\r\n\t\t--line-color: var(--mds-color-border-input-inverse);\r\n\t}\r\n\r\n\t:host([ondark]) input:hover {\r\n\t\t--line-color: var(--mds-color-border-input-inverse-hover);\r\n\t}\r\n\r\n\tinput[type='date'] {\r\n\t\tline-height: 1.2;\r\n\t}\r\n\r\n\t:host([invalid][ondark]) .error {\r\n\t\tcolor: var(--mds-color-feedback-error-inverse);\r\n\t}\r\n\r\n\t:host([invalid]) input {\r\n\t\t--line-color: var(--mds-color-feedback-error);\r\n\t}\r\n\r\n\t:host([invalid][ondark]) input {\r\n\t\t--line-color: var(--mds-color-feedback-error-inverse);\r\n\t}\r\n\r\n\t:host([disabled]) {\r\n\t\t--placeholder-color: var(--mds-color-text-input-disabled);\r\n\t}\r\n\r\n\t:host([disabled]) input {\r\n\t\t--line-color: var(--mds-color-transparent);\t\r\n\t\t--background-color: var(--mds-color-background-input-disabled);\r\n\t}\r\n\r\n\t:host([disabled][ondark]) {\r\n\t\t--placeholder-color: var(--mds-color-text-input-disabled-inverse);\r\n\t}\r\n\r\n\t:host([disabled][ondark]) input {\r\n\t\t--line-color: var(--mds-color-transparent);\r\n\t\t--background-color: var(--mds-color-background-input-disabled-inverse);\r\n\t}\r\n`;\r\n","import {\r\n\tLitElement,\r\n\thtml,\r\n\tifDefined,\r\n\tstyles,\r\n\tcss,\r\n\tinjectDocumentStyles,\r\n\tdefineElement,\r\n} from \"@mds/core\";\r\nimport { inputCSS } from \"./input.styles.js\";\r\n\r\nconst lightDomStyles = css`\r\n\t.mds-body fieldset {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\tborder: none;\r\n\t\tpadding: 0;\r\n\t\tgap: 1rem;\r\n\t}\r\n\t.mds-body fieldset > div {\r\n\t\ttext-align: end;\r\n\t}\r\n`;\r\ninjectDocumentStyles([lightDomStyles], \"mds-input\");\r\n\r\n/**\r\n * Layout Web Component\r\n * @slot - This element has a slot\r\n */\r\nexport class MdsInput extends LitElement {\r\n\tstatic get formAssociated() {\r\n\t\treturn true;\r\n\t}\r\n\r\n\tstatic get styles() {\r\n\t\treturn [...styles, inputCSS];\r\n\t}\r\n\r\n\tstatic get properties() {\r\n\t\treturn {\r\n\t\t\ttype: { type: String, reflect: true },\r\n\t\t\tlabel: { type: String, reflect: true },\r\n\t\t\tid: { type: String, reflect: true },\r\n\t\t\tname: { type: String, reflect: true },\r\n\t\t\tposition: { type: String, reflect: true },\r\n\t\t\tvalue: { type: String, reflect: true },\r\n\t\t\tplaceholder: { type: String, reflect: true },\r\n\t\t\tsize: { type: Number },\r\n\t\t\tpattern: { type: String, reflect: true },\r\n\t\t\terrormessage: { type: String, reflect: true },\r\n\t\t\tmessage: { type: String, reflect: true },\r\n\t\t\tinvalid: { type: Boolean, reflect: true },\r\n\t\t\tdisabled: { type: Boolean, reflect: true },\r\n\t\t\trequired: { type: Boolean, reflect: true },\r\n\t\t\tnative: { type: Boolean, reflect: true },\r\n\t\t\tondark: { type: Boolean, reflect: true },\r\n\t\t};\r\n\t}\r\n\r\n\tconstructor() {\r\n\t\tsuper();\r\n\t\tthis.internals = this.attachInternals();\r\n\r\n\t\tthis.type = \"text\";\r\n\t\tthis.id = undefined;\r\n\t\tthis.name = \"input\";\r\n\t\tthis.position = \"top\";\r\n\t\tthis.label = undefined;\r\n\t\tthis.pattern = undefined;\r\n\t\tthis.placeholder = undefined;\r\n\t\tthis.size = 3;\r\n\t\tthis.message = undefined;\r\n\t\tthis.errormessage = undefined;\r\n\t\tthis.value = \"\";\r\n\t\tthis.invalid = false;\r\n\t\tthis.disabled = false;\r\n\t\tthis.required = false;\r\n\t\tthis.native = false;\r\n\t}\r\n\r\n\tfirstUpdated(_changedProperties) {\r\n\t\tsuper.firstUpdated(_changedProperties);\r\n\t\tthis.internals.setFormValue(this.value);\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn this.__inputTemplate();\r\n\t}\r\n\r\n\t__inputTemplate() {\r\n\t\treturn html`\r\n\t\t\t\r\n\t\t\t\t${this.__labelTemplate()}\r\n\t\t\t\t\r\n\t\t\t\t${this.__getMessages()}\r\n\t\t\t\t\r\n\t\t\t
\r\n\t\t`;\r\n\t}\r\n\r\n\t__getMessages() {\r\n\t\treturn this.message || this.invalid\r\n\t\t\t? html`\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t${this.__messageTemplate()}\r\n\t\t\t\t\t\t${this.__errorMessageTemplate()}\r\n\t\t\t\t\t
\r\n\t\t\t `\r\n\t\t\t: html``;\r\n\t}\r\n\r\n\t__labelTemplate() {\r\n\t\treturn this.label\r\n\t\t\t? html` `\r\n\t\t\t: html``;\r\n\t}\r\n\r\n\t__errorMessageTemplate() {\r\n\t\treturn this.invalid\r\n\t\t\t? html` ${this.errormessage}
`\r\n\t\t\t: html``;\r\n\t}\r\n\r\n\t__messageTemplate() {\r\n\t\treturn this.message\r\n\t\t\t? html` ${this.message}
`\r\n\t\t\t: html``;\r\n\t}\r\n\t__setValidity(event) {\r\n\t\tthis.invalid = !event.target.checkValidity();\r\n\t\tif (!this.errormessage)\r\n\t\t\tthis.errormessage = event.target.validationMessage;\r\n\t\tthis.invalid\r\n\t\t\t? this.internals.setValidity(\r\n\t\t\t\t\tevent.target.validity,\r\n\t\t\t\t\tthis.errormessage\r\n\t\t\t )\r\n\t\t\t: this.internals.setValidity({});\r\n\t}\r\n\r\n\t__changedInput(event) {\r\n\t\tconst isValidTarget = /\\binput\\b/gi.test(event.target.tagName);\r\n\t\tif (this.disabled && !isValidTarget) {\r\n\t\t\tevent.preventDefault();\r\n\t\t\tevent.stopPropagation();\r\n\t\t} else {\r\n\t\t\tconst state = event.target.checked ? \"checked\" : \"\";\r\n\t\t\tthis.checked = !!event.target.checked;\r\n\t\t\tthis.value = event.target.value;\r\n\t\t\tthis.internals.setFormValue(this.value, state);\r\n\t\t}\r\n\t\tthis.native && this.__setValidity(event);\r\n\t}\r\n}\r\ndefineElement(\"mds-input\", MdsInput);\r\n","import { css } from \"@mds/core\";\r\n\r\nexport const layoutCSS = css`\r\n\t@supports (--foo: \"mds\") {\r\n\t\t/* \t###################################################################### */\r\n\t\t/**\tComponent tokens\r\n\t\t\t Use the design tokens to set these component tokens.\r\n\t\t */\r\n\t\t:host {\r\n\t\t\t--display: grid;\r\n\t\t\t--direction: unset;\r\n\t\t\t--background-color: var(--mds-color-background-light);\r\n\t\t\t--rows: 1fr;\r\n\t\t\t--row: 1;\r\n\t\t\t--columns: 1fr;\r\n\t\t\t--column: 1 / -1;\r\n\t\t\t--column-count: auto-fit;\r\n\t\t\t--sub-columns: auto;\r\n\t\t\t--align: start;\r\n\t\t\t--pad-responsive: 1rem;\r\n\t\t\t--pad-responsive-viewport: 0;\r\n\t\t\t--pad-responsive-layout: 0;\r\n\t\t\t--gap: 0;\r\n\t\t\t--offset-start: 0;\r\n\t\t\t--offset-end: 0;\r\n\t\t}\r\n\r\n\t\t/* \t###################################################################### */\r\n\t\t/**\tLayout container rules\r\n\t\t\t This is the main rule set.\r\n\t\t */\r\n\t\t:host {\r\n\t\t\tdisplay: var(--display, grid);\r\n\t\t\tbox-sizing: border-box;\r\n\t\t\tgrid-template-columns: var(--columns);\r\n\t\t\tgrid-template-rows: var(--rows);\r\n\t\t\tgap: var(--pad-responsive);\r\n\t\t\tpadding: var(--pad-responsive-layout) var(--pad-responsive-viewport);\r\n\t\t\tfont-family: var(--mds-typography-font-base-fonts);\r\n\t\t\tfont-size: calc(\r\n\t\t\t\tvar(--mds-typography-scale-increment-body) *\r\n\t\t\t\t\tvar(--mds-typography-font-size) * 1rem\r\n\t\t\t);\r\n\t\t\tline-height: var(--mds-typography-font-height);\r\n\t\t\tfont-weight: var(--mds-typography-font-base-weight-normal);\r\n\t\t\tcolor: var(--mds-color-text-default);\r\n\t\t\t-moz-text-size-adjust: none;\r\n\t\t\t-webkit-text-size-adjust: none;\r\n\t\t\ttext-size-adjust: none;\r\n\t\t\tbackground-color: var(--background-color);\r\n\t\t\tmargin: 0 auto;\r\n\t\t\twidth: 100%;\r\n\t\t\tmax-width: var(--mds-spacing-layout-max);\r\n\t\t}\r\n\r\n\t\t:host([type=\"split\"]) {\r\n\t\t\tpadding-block: var(--pad-responsive-layout);\r\n\t\t\tpadding-inline: 0;\r\n\t\t}\r\n\r\n\t\t:host([type=\"stacked\"]) ::slotted(*) {\r\n\t\t\tmax-width: calc(var(--mds-spacing-layout-content-max) * 0.66);\r\n\t\t}\r\n\r\n\t\t:host([type=\"full\"]) {\r\n\t\t\tpadding: 0;\r\n\t\t}\r\n\r\n\t\t/* \t###################################################################### */\r\n\t\t/**\tSubgrid rules\r\n\t\t\t This is the rule set for slots\r\n\t\t */\r\n\t\t::slotted(*) {\r\n\t\t\tdisplay: var(--display, grid);\r\n\t\t\tflex-direction: var(--direction, unset);\r\n\t\t\talign-items: var(--align);\r\n\t\t\tgrid-template-columns: var(--sub-columns, 1fr);\r\n\t\t\tgrid-template-rows: repeat(auto-fit, 1fr);\r\n\t\t\tgap: var(--pad-responsive);\r\n\t\t\tgrid-column: var(--column);\r\n\t\t\tgrid-row: var(--row);\r\n\t\t}\r\n\r\n\t\t/* \t###################################################################### */\r\n\t\t/**\tProperties for the main layout */\r\n\r\n\t\t:host([zebra=\"even\"]) {\r\n\t\t\t--background-color: var(--mds-color-background-light);\r\n\t\t\t--order: 1;\r\n\t\t\t--justify: start;\r\n\t\t\t--offset-start: var(--pad-responsive);\r\n\t\t\t--offset-end: var(--pad-responsive-viewport);\r\n\t\t}\r\n\t\t:host([zebra=\"odd\"]) {\r\n\t\t\t--background-color: var(--mds-color-background-pale);\r\n\t\t\t--order: 2;\r\n\t\t\t--justify: end;\r\n\t\t\t--offset-start: var(--pad-responsive-viewport);\r\n\t\t\t--offset-end: var(--pad-responsive);\r\n\t\t}\r\n\t\t:host([type=\"asymmetric\"]) {\r\n\t\t\t--columns: 1fr 1fr 1fr;\r\n\t\t}\r\n\r\n\t\t:host([type=\"cards\"]) {\r\n\t\t\t--columns: 1fr;\r\n\t\t\t--column-count: auto-fit;\r\n\t\t\t--sub-columns: repeat(\r\n\t\t\t\tvar(--column-count, auto-fit),\r\n\t\t\t\tminmax(25ch, 1fr)\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\t:host([type=\"stacked\"]) {\r\n\t\t\t--columns: 1fr;\r\n\t\t\t--display: block;\r\n\t\t\t--sub-columns: 1fr;\r\n\t\t}\r\n\r\n\t\t/* \t###################################################################### */\r\n\t\t/**\tProperties for the sub layout */\r\n\t\t/* Header slots */\r\n\t\t::slotted([slot=\"navigation\"]) {\r\n\t\t\t--column: 1 / -1;\r\n\t\t\t--row: 1;\r\n\t\t}\r\n\r\n\t\t/* Header slots */\r\n\t\t::slotted([slot=\"header\"]) {\r\n\t\t\t--column: 1 / -1;\r\n\t\t\t--row: 1;\r\n\t\t}\r\n\r\n\t\t/* Main slots */\r\n\t\t::slotted([slot=\"main\"]) {\r\n\t\t\t--column: 1 / -1;\r\n\t\t\t--row: auto;\r\n\t\t}\r\n\r\n\t\t:host([type*=\"asymmetric\"]) ::slotted([slot=\"main\"]) {\r\n\t\t\t--display: block;\r\n\t\t}\r\n\r\n\t\t:host([type=\"asymmetric\"][sidebar=\"left\"]) ::slotted([slot=\"main\"]) {\r\n\t\t\t--column: 2 / -1;\r\n\t\t}\r\n\r\n\t\t:host([type=\"asymmetric\"][sidebar=\"right\"]) ::slotted([slot=\"main\"]) {\r\n\t\t\t--column: 1 / -2;\r\n\t\t}\r\n\r\n\t\t/* Aside slots */\r\n\t\t::slotted([slot=\"aside\"]) {\r\n\t\t\t--row: auto;\r\n\t\t}\r\n\r\n\t\t:host([type*=\"asymmetric\"]) ::slotted([slot=\"aside\"]) {\r\n\t\t\t--display: block;\r\n\t\t\t--row: 2;\r\n\t\t}\r\n\r\n\t\t:host([type=\"asymmetric\"][sidebar=\"left\"]) ::slotted([slot=\"aside\"]) {\r\n\t\t\t--column: 1 / 2;\r\n\t\t}\r\n\r\n\t\t:host([type=\"asymmetric\"][sidebar=\"right\"]) ::slotted([slot=\"aside\"]) {\r\n\t\t\t--column: -2 / -1;\r\n\t\t}\r\n\r\n\t\t/* navigation slot */\r\n\t\t:host([type=\"full\"]) ::slotted([slot=\"navigation\"]) {\r\n\t\t\t--column: 1 / -1;\r\n\t\t}\r\n\r\n\t\t/* Footer slots */\r\n\t\t::slotted([slot=\"footer\"]) {\r\n\t\t\t--column: 1 / -1;\r\n\t\t\t--row: -1; /* Always the last row */\r\n\t\t}\r\n\t}\r\n`;\r\n","import { css } from '@mds/core';\r\n\r\nexport const layoutResponsiveCSS = css`\r\n\t@supports (--foo: 'mds') {\r\n\r\n\t\t/* \t###################################################################### */\r\n\t\t/**\tProperties for the responsive layout spacing */\r\n\t\t@media not all and (min-width: 576px) {\r\n\t\t\t:host {\r\n\t\t\t\t--display: block;\r\n\t\t\t\t--pad-responsive: var(--mds-spacing-4);\r\n\t\t\t\t--pad-responsive-viewport: var(--mds-spacing-4);\r\n\t\t\t\t--pad-responsive-layout: var(--mds-spacing-4);\r\n\t\t\t}\r\n\t\t}\r\n\t\t@media (min-width: 576px) {\r\n\t\t\t:host {\r\n\t\t\t\t--pad-responsive: var(--mds-spacing-4);\r\n\t\t\t\t--pad-responsive-viewport: var(--mds-spacing-6);\r\n\t\t\t\t--pad-responsive-layout: var(--mds-spacing-6);\r\n\t\t\t}\r\n\t\t}\r\n\t\t@media (min-width: 768px) {\r\n\t\t\t:host {\r\n\t\t\t\t--pad-responsive: var(--mds-spacing-6);\r\n\t\t\t\t--pad-responsive-viewport: var(--mds-spacing-7);\r\n\t\t\t\t--pad-responsive-layout: var(--mds-spacing-8);\r\n\t\t\t}\r\n\t\t}\r\n\t\t@media (min-width: 992px) {\r\n\t\t\t:host {\r\n\t\t\t\t--pad-responsive-viewport: 10%;\r\n\t\t\t\t--pad-responsive-layout: var(--mds-spacing-10);\r\n\t\t\t}\r\n\t\t}\r\n\t\t@media (min-width: 1200px) {\r\n\t\t\t:host{\r\n\t\t\t\t--pad-responsive: var(--mds-spacing-8);\r\n\t\t\t\t--pad-responsive-viewport: 10%;\r\n\t\t\t}\r\n\t\t}\r\n\t\t/* breakpoint based on max layout container width (--mds-spacing-layout-max) */\r\n\t\t@media (min-width: 1910px) {\r\n\t\t\t:host {\r\n\t\t\t\t--pad-responsive-viewport: calc((var(--mds-spacing-layout-max) - var(--mds-spacing-layout-content-max)) / 2);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n`;\r\n","import { LitElement, html, defineElement } from \"@mds/core\";\r\nimport { layoutCSS } from './layout.styles.js';\r\nimport { layoutResponsiveCSS } from './layout-responsive.styles.js';\r\n\r\n/**\r\n * Layout Web Component\r\n * @slot - This element has a slot\r\n */\r\nexport class MdsLayout extends LitElement {\r\n\r\n\tstatic get styles() {\r\n\t\treturn [layoutCSS, layoutResponsiveCSS];\r\n\t}\r\n\r\n\tstatic get properties() {\r\n\t\treturn {\r\n\t\t\ttype: { type: String, reflect: true },\r\n\t\t\tzebra: { type: String, reflect: true },\r\n\t\t\tsidebar: { type: String, reflect: true},\r\n\t\t\tcolumns: { type: Number, reflect: true }\r\n\t\t};\r\n\t}\r\n\tconstructor() {\r\n\t\tsuper();\r\n\t\tthis.type = 'stacked';\r\n\t\tthis.zebra = undefined;\r\n\t\tthis.sidebar = undefined;\r\n\t\tthis.columns = this.columns || 0;\r\n\t}\r\n\trender() {\r\n\t\tif (this.columns) {\r\n\t\t\tthis.shadowRoot.host.setAttribute('style',`--column-count: ${this.columns}`);\r\n\t\t}\r\n\t\treturn html`\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t`;\r\n\t}\r\n}\r\n\r\ndefineElement(\"mds-layout\", MdsLayout);\r\n","import { css } from \"@mds/core\";\r\n\r\nexport const selectCSS = css`\r\n\t/* \t###################################################################### */\r\n\t/**\tComponent tokens\r\n\t\t\t\t Use the design tokens to set these component tokens.\r\n\t\t\t */\r\n\t:host {\r\n\t\t--line-width: 1px;\r\n\t\t--line-style: var(--mds-line-border-base-style);\r\n\t\t--line-color: var(--mds-color-border-select);\r\n\t\t--radius: var(--mds-line-border-base-radius);\r\n\r\n\t\t--label-width: 1fr;\r\n\t\t--select-width: 2fr;\r\n\t\t--select-height: 3rem;\r\n\t\t--select-align: stretch;\r\n\t\t--text-color: var(--mds-color-text-heading);\r\n\t\t--background-color: var(--mds-color-background-input);\r\n\r\n\t\t--padding-vertical: var(--mds-spacing-1);\r\n\t\t--padding-horizontal: var(--mds-spacing-3);\r\n\r\n\t\t--grid-columns: var(--label-width) var(--select-width) auto;\r\n\t\t--grid-rows: repeat(auto-fit, auto);\r\n\r\n\t\t--grid-column: 1 / -1;\r\n\t\t--grid-row: 1;\r\n\r\n\t\t--label-row: 1;\r\n\t\t--label-column: 1 / -1;\r\n\r\n\t\t--select-row: 2;\r\n\t\t--select-column: 1 / -1;\r\n\r\n\t\t--message-row: 3;\r\n\t\t--message-column: 1 / -1;\r\n\r\n\t\t--last-row: 3;\r\n\r\n\t\t--icon-glyph: var(--mds-icon-glyphs-base-chevron-down);\r\n\t}\r\n\r\n\t/* \t###################################################################### */\r\n\t/**\tselect host rules\r\n\t\t\t\t This is the main rule set.\r\n\t\t\t */\r\n\t:host {\r\n\t\t//\toutline-color: transparent !important;\r\n\t\twidth: 100%;\r\n\t}\r\n\r\n\t.mds-select {\r\n\t\tposition: relative;\r\n\t\tdisplay: grid;\r\n\t\tgrid-template-columns: var(--grid-columns);\r\n\t\tgrid-template-rows: var(--grid-rows);\r\n\t\tplace-items: center var(--select-align);\r\n\t\tflex-wrap: wrap;\r\n\t\tgap: var(--mds-spacing-2);\r\n\t\twidth: 100%;\r\n\t}\r\n\t.mds-select::after {\r\n\t\tgrid-column: var(--select-column);\r\n\t\tgrid-row: var(--select-row);\r\n\t\tjustify-self: end;\r\n\t\ttext-align: center;\r\n\t\theight: var(--select-height);\r\n\t\tdisplay: grid;\r\n\t\tplace-content: center;\r\n\t\tfont-family: var(--mds-icon-font-base-family);\r\n\t\tfont-weight: normal;\r\n\t\tcontent: var(--icon-glyph);\r\n\t\tborder-inline-start-width: var(--line-width);\r\n\t\tborder-inline-start-style: var(--line-style);\r\n\t\tborder-inline-start-color: var(--mds-line-border-base-color);\r\n\t\taspect-ratio: 1 / 1;\r\n\t\tbackground-color: var(--mds-color-background-default);\r\n\t\tbackground-clip: content-box;\r\n\t\tcolor: var(--mds-color-text-inverse);\r\n\t\tpointer-events: none;\r\n\t\tz-index: 1;\r\n\t}\r\n\t:host(:not([label])) > .mds-select {\r\n\t\tdisplay: flex;\r\n\t}\r\n\r\n\t:host(:not([label])) > .mds-select > * {\r\n\t\tflex: 1 1 auto;\r\n\t}\r\n\r\n\t.mds-select label {\r\n\t\tgrid-column: var(--label-column);\r\n\t\tgrid-row: var(--label-row);\r\n\t\tcolor: var(--text-color);\r\n\t}\r\n\r\n\t.mds-select select {\r\n\t\tdisplay: inline-block;\r\n\t\tgrid-column: var(--select-column);\r\n\t\tgrid-row: var(--select-row);\r\n\t\tborder-style: var(--line-style);\r\n\t\tborder-width: var(--line-width);\r\n\t\tborder-color: var(--line-color);\r\n\t\tborder-radius: var(--radius);\r\n\t\tmargin: 0;\r\n\t\tpadding:\r\n\t\t\tvar(--padding-vertical)\r\n\t\t\tcalc(var(--padding-horizontal) + var(--select-height))\r\n\t\t\tvar(--padding-vertical)\r\n\t\t\tvar(--padding-horizontal);\r\n\t\tfont-family: inherit;\r\n\t\tfont-size: inherit;\r\n\t\tline-height: 1rem;\r\n\t\tcolor: var(--text-color);\r\n\t\tbackground-color: var(--background-color);\r\n\t\tappearance: none;\r\n\t\t-webkit-appearance: none;\r\n\t\theight: var(--select-height);\r\n\t}\r\n\r\n\t.mds-select select[disabled]:hover {\r\n\t\tcursor: not-allowed;\r\n\t}\r\n\r\n\t.mds-select .messages {\r\n\t\tgrid-column: var(--message-column);\r\n\t\tgrid-row: var(--message-row);\r\n\t\tmax-width: 80ch;\r\n\t}\r\n\r\n\t.mds-select .messages > * {\r\n\t\tmargin: var(--mds-spacing-2) 0;\r\n\t}\r\n\r\n\t.mds-select .messages > *:first-child {\r\n\t\tmargin-top: 0;\r\n\t}\r\n\r\n\t.mds-select .messages > *:last-child {\r\n\t\tmargin-bottom: 0;\r\n\t}\r\n\r\n\t.mds-select .message {\r\n\t\tcolor: var(--text-color);\r\n\t}\r\n\r\n\t.mds-select .error {\r\n\t\tcolor: var(--text-color);\r\n\t}\r\n\r\n\t.error:before {\r\n\t\tpadding-inline-end: var(--mds-spacing-2);\r\n\t\tfont-family: var(--mds-icon-font-base-family);\r\n\t\tcontent: var(--mds-icon-glyphs-base-attention);\r\n\t}\r\n\r\n\t/* \t###################################################################### */\r\n\t/**\tProperties for the select */\r\n\t/* Layout */\r\n\t:host([position=\"left\"]) .mds-select {\r\n\t\t--grid-columns: var(--label-width) var(--select-width);\r\n\t\t--grid-rows: repeat(auto-fill, auto);\r\n\t}\r\n\r\n\t@media (min-width: 576px) {\r\n\t\t:host([position=\"left\"]) {\r\n\t\t\t--label-row: 1;\r\n\t\t\t--label-column: 1 / 2;\r\n\r\n\t\t\t--select-row: 1;\r\n\t\t\t--select-column: 2 / 3;\r\n\r\n\t\t\t--message-row: 2;\r\n\t\t\t--message-column: 2 / 3;\r\n\t\t}\r\n\t}\r\n\r\n\tselect:only-child {\r\n\t\t--grid-column: 1 / -1;\r\n\t}\r\n\r\n\t/* Appearance */\r\n\t:host([ondark]) select {\r\n\t\t--line-color: var(--mds-color-border-input-inverse);\r\n\t}\r\n\r\n\t:host([ondark]) .mds-select::after {\r\n\t\tcolor: var(--mds-color-text-default);\r\n\t\tbackground-color: var(--mds-color-background-subtle);\r\n\t}\r\n\r\n\t:host([ondark]) label {\r\n\t\t--text-color: var(--mds-color-text-inverse);\r\n\t}\r\n\r\n\t:host([ondark]) .message {\r\n\t\t--text-color: var(--mds-color-text-inverse);\r\n\t}\r\n\r\n\t:host([invalid]) .error {\r\n\t\t--text-color: var(--mds-color-feedback-error);\r\n\t}\r\n\r\n\t:host([invalid][ondark]) .error {\r\n\t\t--text-color: var(--mds-color-feedback-error-inverse);\r\n\t}\r\n\r\n\t:host([invalid]) select {\r\n\t\t--line-color: var(--mds-color-feedback-error);\r\n\t}\r\n\r\n\t:host([invalid][ondark]) select {\r\n\t\t--line-color: var(--mds-color-feedback-error-inverse);\r\n\t}\r\n\r\n\t:host([disabled]) select {\r\n\t\t--text-color: var(--mds-color-text-disabled);\r\n\t\t--line-color: var(--mds-color-transparent);\r\n\t\t--background-color: var(--mds-color-background-disabled);\r\n\t}\r\n\r\n\t:host([disabled]) .mds-select::after {\r\n\t\tcolor: var(--mds-color-text-disabled);\r\n\t\tborder-color: var(--mds-color-text-disabled);\r\n\t\tbackground-color: var(--mds-color-transparent);\r\n\t}\r\n\r\n\t:host([disabled][ondark]) select {\r\n\t\t--text-color: var(--mds-color-text-disabled-inverse);\r\n\t\t--line-color: var(--mds-color-transparent);\r\n\t\t--background-color: var(--mds-color-background-disabled-inverse);\r\n\t}\r\n\r\n\t:host([disabled][ondark]) .mds-select::after {\r\n\t\tcolor: var(--mds-color-text-disabled-inverse);\r\n\t\tbackground-color: var(--mds-color-transparentdisabled);\r\n\t\tborder-color: var(--mds-color-text-disabled-inverse);\r\n\t}\r\n`;\r\n","import { LitElement, html, ifDefined, styles, defineElement } from \"@mds/core\";\r\nimport { selectCSS } from \"./select.styles.js\";\r\n\r\n/**\r\n * Layout Web Component\r\n * @slot - This element has a slot\r\n */\r\nexport class MdsSelect extends LitElement {\r\n\tstatic get formAssociated() {\r\n\t\treturn true;\r\n\t}\r\n\r\n\tstatic get styles() {\r\n\t\treturn [...styles, selectCSS];\r\n\t}\r\n\r\n\tstatic get properties() {\r\n\t\treturn {\r\n\t\t\tlabel: { type: String, reflect: true },\r\n\t\t\tariaLabel: { type: String, attribute: \"aria-label\", reflect: true },\r\n\t\t\tid: { type: String, reflect: true },\r\n\t\t\tname: { type: String, reflect: true },\r\n\t\t\tposition: { type: String, reflect: true },\r\n\t\t\tvalue: { type: String, reflect: true },\r\n\t\t\terrormessage: { type: String, reflect: true },\r\n\t\t\tmessage: { type: String, reflect: true },\r\n\t\t\tinvalid: { type: Boolean, reflect: true },\r\n\t\t\tdisabled: { type: Boolean, reflect: true },\r\n\t\t\trequired: { type: Boolean, reflect: true },\r\n\t\t\tnative: { type: Boolean, reflect: true },\r\n\t\t\tondark: { type: Boolean, reflect: true }\r\n\t\t};\r\n\t}\r\n\r\n\tconstructor() {\r\n\t\tsuper();\r\n\t\tthis.internals = this.attachInternals();\r\n\t\tthis.id = \"select\";\r\n\t\tthis.name = \"select\";\r\n\t\tthis.position = \"top\";\r\n\t\tthis.label = undefined;\r\n\t\tthis.ariaLabel = undefined;\r\n\t\tthis.message = undefined;\r\n\t\tthis.errormessage = undefined;\r\n\t\tthis.value = \"\";\r\n\t\tthis.invalid = false;\r\n\t\tthis.disabled = false;\r\n\t\tthis.required = false;\r\n\t\tthis.native = false;\r\n\t\tthis.addEventListener(\"click\", event => {\r\n\t\t\tthis.click();\r\n\t\t});\r\n\t}\r\n\r\n\tfirstUpdated(_changedProperties) {\r\n\t\tsuper.firstUpdated(_changedProperties);\r\n\t\tthis.internals.setFormValue(this.value);\r\n\t}\r\n\r\n\t__getOptions() {\r\n\t\tconst slotContent = [...this.querySelectorAll(\"*\")];\r\n\t\tconst inValidSlotElements = slotContent.some(\r\n\t\t\telm => !/\\boption|optgroup\\b/i.test(elm.tagName)\r\n\t\t);\r\n\t\tif (inValidSlotElements) {\r\n\t\t\tconsole.error(\r\n\t\t\t\t`Select elements may only contain