@politiet/sheriff-web-components 2.5.1 → 2.6.1

package/dist/sds-select/sds-select.js

@@ -4,321 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, nothing } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
-import { styles } from './sds-select.styles';
-import { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';
+import { SDSSelectComponent } from './sds-select.component';
 import '../sds-alert/sds-alert';
 import '../sds-icon/sds-icon';
-let SDSSelect = class SDSSelect extends SDSEventDispatcherMixin(LitElement) {
-    constructor() {
-        super();
-        this.disabled = false;
-        this.required = false;
-        this.readOnly = false;
-        this.size = 'md';
-        this._defaultValue = null;
-        this._pendingLightDomSync = false;
-        /**
-         * Called whenever light DOM children change (options/optgroups/hr added/removed).
-         * slotchange won't fire for in-place mutations, so we also use a MutationObserver.
-         */
-        this._handleSlotChange = () => {
-            if (this.value == null) {
-                const selectedValue = this.getLightDomSelectedValue();
-                if (selectedValue != null) {
-                    this.value = selectedValue;
-                }
-            }
-            this._scheduleLightDomSync();
-        };
-        // Event handlers
-        this._handleChange = (event) => {
-            event.stopImmediatePropagation();
-            if (!(event.target instanceof HTMLSelectElement))
-                return;
-            if (this.disabled || this.readOnly) {
-                event.target.value = this.value ?? '';
-                return;
-            }
-            this.value = event.target.value;
-            this._setFormValue(this.value);
-            this.updateValidity();
-            this.dispatchSheriffEvent('input');
-            this.dispatchSheriffEvent('change');
-        };
-        this._handleFocus = (event) => {
-            event.stopImmediatePropagation();
-            this.dispatchSheriffEvent('focus');
-        };
-        this._handleBlur = (event) => {
-            event.stopImmediatePropagation();
-            this.updateValidity();
-            this.dispatchSheriffEvent('blur');
-        };
-        this._handleKeyDown = (event) => {
-            if (!this.readOnly)
-                return;
-            const keysThatChange = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', ' ', 'Enter']);
-            if (keysThatChange.has(event.key)) {
-                event.preventDefault();
-                event.stopImmediatePropagation();
-            }
-        };
-        this.internals = this.attachInternals();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.value == null) {
-            const selected = Array.from(this.querySelectorAll('option')).find((option) => option.hasAttribute('selected') || option.defaultSelected);
-            if (selected) {
-                this.value = selected.value;
-            }
-        }
-        this._startObservingLightDom();
-    }
-    disconnectedCallback() {
-        this._stopObservingLightDom();
-        super.disconnectedCallback();
-    }
-    firstUpdated() {
-        // Let the native <select> decide first (covers <option selected>)
-        const controlValue = this.control?.value ?? '';
-        // Resolution order:
-        // 1. value (controlled)
-        // 2. default-value
-        // 3. native control value
-        this.value = this.value ?? this.defaultValue ?? controlValue;
-        // Sync native control
-        this.control.value = this.value ?? '';
-        // Store default for form reset
-        this._defaultValue = this.value ?? null;
-        this.internals.setFormValue(this._defaultValue);
-        this.updateValidity();
-    }
-    updated(changed) {
-        if (!this.control)
-            return;
-        if (changed.has('value')) {
-            this.control.value = this.value ?? '';
-            this._setFormValue(this.value);
-            this.updateValidity();
-        }
-    }
-    _setFormValue(value) {
-        this.internals.setFormValue(value == null ? null : value);
-    }
-    _scheduleLightDomSync() {
-        if (this._pendingLightDomSync)
-            return;
-        this._pendingLightDomSync = true;
-        queueMicrotask(() => {
-            this._pendingLightDomSync = false;
-            // If light DOM indicates a selected option, treat it as source of truth.
-            const selectedFromLightDom = this.getLightDomSelectedValue();
-            if (selectedFromLightDom !== undefined && selectedFromLightDom !== this.value) {
-                this.value = selectedFromLightDom;
-            }
-            this.requestUpdate();
-            this.updateComplete.then(() => {
-                if (!this.control)
-                    return;
-                this.control.value = this.value ?? '';
-                this._setFormValue(this.value);
-                this.updateValidity();
-            });
-        });
-    }
-    _startObservingLightDom() {
-        if (this._lightDomObserver)
-            return;
-        this._lightDomObserver = new MutationObserver((mutations) => {
-            for (const m of mutations) {
-                if (m.type === 'childList') {
-                    this._scheduleLightDomSync();
-                    return;
-                }
-                if (m.type === 'characterData') {
-                    this._scheduleLightDomSync();
-                    return;
-                }
-                if (m.type === 'attributes') {
-                    const target = m.target;
-                    if (!(target instanceof HTMLElement))
-                        continue;
-                    const tag = target.tagName;
-                    if (tag === 'OPTION' || tag === 'OPTGROUP' || tag === 'HR') {
-                        this._scheduleLightDomSync();
-                        return;
-                    }
-                }
-            }
-        });
-        this._lightDomObserver.observe(this, {
-            subtree: true,
-            childList: true,
-            attributes: true,
-            characterData: true,
-        });
-    }
-    _stopObservingLightDom() {
-        this._lightDomObserver?.disconnect();
-        this._lightDomObserver = undefined;
-        this._pendingLightDomSync = false;
-    }
-    updateValidity() {
-        if (!this.control)
-            return;
-        if (this.control.checkValidity()) {
-            this.internals.setValidity({});
-        }
-        else {
-            this.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);
-        }
-    }
-    getLightDomSelectedValue() {
-        // First selected option wins (matches typical native parsing behavior for single-select)
-        const selected = Array.from(this.querySelectorAll('option')).find((option) => option.hasAttribute('selected') || option.defaultSelected);
-        return selected?.value;
-    }
-    // Form-associated lifecycle
-    formResetCallback() {
-        this.internals.setFormValue(this._defaultValue);
-        const newValue = this._defaultValue ?? '';
-        if (this.control) {
-            this.control.value = newValue;
-        }
-        this.value = this._defaultValue ?? '';
-        this.updateValidity();
-    }
-    // Public methods
-    focus() {
-        if (!this.disabled && !this.readOnly && this.control)
-            this.control.focus();
-    }
-    blur() {
-        if (!this.disabled && !this.readOnly && this.control)
-            this.control.blur();
-    }
-    click() {
-        if (!this.disabled && !this.readOnly && this.control)
-            this.control.click();
-    }
-    // Rendering helpers: mirror light DOM structure into the internal <select>
-    renderFromLightDom() {
-        const nodes = this.children ?? [];
-        const children = Array.from(nodes).filter((node) => node instanceof HTMLElement);
-        return children.map((node) => {
-            switch (node.tagName) {
-                case 'OPTION':
-                    return this.renderOption(node);
-                case 'OPTGROUP':
-                    return this.renderOptgroup(node);
-                case 'HR':
-                    return html `<hr />`;
-                default:
-                    return nothing;
-            }
-        });
-    }
-    renderOption(option) {
-        const attrValue = option.getAttribute('value');
-        const optionValueForSelect = option.value;
-        const isSelected = this.value != null && optionValueForSelect === this.value;
-        return html ` <option value=${ifDefined(attrValue === null ? undefined : attrValue)} ?disabled=${option.disabled} .selected=${isSelected}>${option.text}</option> `;
-    }
-    renderOptgroup(group) {
-        const options = Array.from(group.querySelectorAll('option'));
-        return html ` <optgroup label=${ifDefined(group.label || undefined)} ?disabled=${group.disabled}>${options.map((opt) => this.renderOption(opt))}</optgroup> `;
-    }
-    // Render
-    // Hidden slot: holds light DOM <option>/<optgroup>/<hr> and triggers slotchange
-    render() {
-        const selectClasses = {
-            'sds-select': true,
-            'sds-select--error': Boolean(this.errorMessage),
-        };
-        return html `
-			<div class="${classMap(selectClasses)}">
-				${this.label
-            ? html ` <label for="select" class="sds-select__label"> ${this.readOnly ? html `<sds-icon name="lock-material-filled" size="m"></sds-icon>` : nothing} ${this.label} </label> `
-            : nothing}
-				${this.helpText ? html `<p class="sds-select__help-text">${this.helpText}</p>` : nothing}
-
-				<div hidden>
-					<slot @slotchange=${this._handleSlotChange}></slot>
-				</div>
-
-				<select
-					id="select"
-					class="sds-select__control"
-					name=${ifDefined(this.name)}
-					?disabled=${this.disabled}
-					?required=${this.required}
-					aria-readonly=${ifDefined(this.readOnly)}
-					aria-invalid=${this.errorMessage ? 'true' : 'false'}
-					@keydown=${this._handleKeyDown}
-					@change=${this._handleChange}
-					@focus=${this._handleFocus}
-					@blur=${this._handleBlur}
-				>
-					${this.renderFromLightDom()}
-				</select>
-
-				${this.errorMessage
-            ? html `
-							<sds-alert variant="secondary" data-palette="danger">
-								<p slot="message">${this.errorMessage}</p>
-							</sds-alert>
-						`
-            : nothing}
-			</div>
-		`;
-    }
+let SDSSelect = class SDSSelect extends SDSSelectComponent {
 };
-// Styling
-SDSSelect.styles = [styles];
-SDSSelect.formAssociated = true;
-SDSSelect.shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    property({ type: String, reflect: true })
-], SDSSelect.prototype, "name", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSSelect.prototype, "label", void 0);
-__decorate([
-    property({ type: String, attribute: false })
-], SDSSelect.prototype, "value", void 0);
-__decorate([
-    property({ type: String, attribute: 'default-value' })
-], SDSSelect.prototype, "defaultValue", void 0);
-__decorate([
-    property({ type: String, attribute: 'help-text', reflect: true })
-], SDSSelect.prototype, "helpText", void 0);
-__decorate([
-    property({ type: String, attribute: 'error-message', reflect: true })
-], SDSSelect.prototype, "errorMessage", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SDSSelect.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SDSSelect.prototype, "required", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'readonly', reflect: true })
-], SDSSelect.prototype, "readOnly", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], SDSSelect.prototype, "size", void 0);
-__decorate([
-    query('#select')
-], SDSSelect.prototype, "control", void 0);
 SDSSelect = __decorate([
     guardedCustomElement('sds-select')
 ], SDSSelect);

package/dist/sds-select/sds-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-select.js","sourceRoot":"","sources":["../../src/sds-select/sds-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-select.styles';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\n\nimport '../sds-alert/sds-alert';\nimport '../sds-icon/sds-icon';\nimport { SDS_SIZES } from '../types';\n\ntype SelectSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSSelectProps {\n\t'error-message'?: string;\n\t'help-text'?: string;\n\tdisabled?: boolean;\n\tlabel?: string;\n\tname?: string;\n\trequired?: boolean;\n\treadonly?: boolean;\n\tsize?: SelectSize;\n\tvalue?: string;\n\t'default-value'?: string;\n}\n\n@guardedCustomElement('sds-select')\nexport class SDSSelect extends SDSEventDispatcherMixin(LitElement) {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t// Props\n\t@property({ type: String, reflect: true }) name?: SDSSelectProps['name'];\n\t@property({ type: String, reflect: true }) label?: SDSSelectProps['label'];\n\t@property({ type: String, attribute: false }) value?: SDSSelectProps['value'];\n\t@property({ type: String, attribute: 'default-value' }) defaultValue?: SDSSelectProps['default-value'];\n\t@property({ type: String, attribute: 'help-text', reflect: true }) helpText?: SDSSelectProps['help-text'];\n\t@property({ type: String, attribute: 'error-message', reflect: true }) errorMessage?: SDSSelectProps['error-message'];\n\t@property({ type: Boolean, reflect: true }) disabled: SDSSelectProps['disabled'] = false;\n\t@property({ type: Boolean, reflect: true }) required: SDSSelectProps['required'] = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: SDSSelectProps['readonly'] = false;\n\t@property({ type: String, reflect: true }) size: SDSSelectProps['size'] = 'md';\n\n\t@query('#select') private control!: HTMLSelectElement;\n\n\tprivate _defaultValue: string | null = null;\n\n\t// Observe in-place mutations to existing <option>/<optgroup> (text/attrs)\n\tprivate _lightDomObserver?: MutationObserver;\n\tprivate _pendingLightDomSync = false;\n\n\tstatic override shadowRootOptions: ShadowRootInit = {\n\t\t...LitElement.shadowRootOptions,\n\t\tdelegatesFocus: true,\n\t};\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\n\t\tif (this.value == null) {\n\t\t\tconst selected = Array.from(this.querySelectorAll('option')).find((option) => option.hasAttribute('selected') || option.defaultSelected);\n\n\t\t\tif (selected) {\n\t\t\t\tthis.value = selected.value;\n\t\t\t}\n\t\t}\n\n\t\tthis._startObservingLightDom();\n\t}\n\n\toverride disconnectedCallback(): void {\n\t\tthis._stopObservingLightDom();\n\t\tsuper.disconnectedCallback();\n\t}\n\n\toverride firstUpdated() {\n\t\t// Let the native <select> decide first (covers <option selected>)\n\t\tconst controlValue = this.control?.value ?? '';\n\n\t\t// Resolution order:\n\t\t// 1. value (controlled)\n\t\t// 2. default-value\n\t\t// 3. native control value\n\t\tthis.value = this.value ?? this.defaultValue ?? controlValue;\n\n\t\t// Sync native control\n\t\tthis.control.value = this.value ?? '';\n\n\t\t// Store default for form reset\n\t\tthis._defaultValue = this.value ?? null;\n\n\t\tthis.internals.setFormValue(this._defaultValue);\n\t\tthis.updateValidity();\n\t}\n\n\toverride updated(changed: Map<PropertyKey, unknown>) {\n\t\tif (!this.control) return;\n\n\t\tif (changed.has('value')) {\n\t\t\tthis.control.value = this.value ?? '';\n\t\t\tthis._setFormValue(this.value);\n\t\t\tthis.updateValidity();\n\t\t}\n\t}\n\n\tprivate _setFormValue(value: string | undefined) {\n\t\tthis.internals.setFormValue(value == null ? null : value);\n\t}\n\n\tprivate _scheduleLightDomSync() {\n\t\tif (this._pendingLightDomSync) return;\n\t\tthis._pendingLightDomSync = true;\n\n\t\tqueueMicrotask(() => {\n\t\t\tthis._pendingLightDomSync = false;\n\n\t\t\t// If light DOM indicates a selected option, treat it as source of truth.\n\t\t\tconst selectedFromLightDom = this.getLightDomSelectedValue();\n\t\t\tif (selectedFromLightDom !== undefined && selectedFromLightDom !== this.value) {\n\t\t\t\tthis.value = selectedFromLightDom;\n\t\t\t}\n\n\t\t\tthis.requestUpdate();\n\n\t\t\tthis.updateComplete.then(() => {\n\t\t\t\tif (!this.control) return;\n\n\t\t\t\tthis.control.value = this.value ?? '';\n\n\t\t\t\tthis._setFormValue(this.value);\n\t\t\t\tthis.updateValidity();\n\t\t\t});\n\t\t});\n\t}\n\n\tprivate _startObservingLightDom() {\n\t\tif (this._lightDomObserver) return;\n\n\t\tthis._lightDomObserver = new MutationObserver((mutations) => {\n\t\t\tfor (const m of mutations) {\n\t\t\t\tif (m.type === 'childList') {\n\t\t\t\t\tthis._scheduleLightDomSync();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif (m.type === 'characterData') {\n\t\t\t\t\tthis._scheduleLightDomSync();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif (m.type === 'attributes') {\n\t\t\t\t\tconst target = m.target;\n\t\t\t\t\tif (!(target instanceof HTMLElement)) continue;\n\n\t\t\t\t\tconst tag = target.tagName;\n\t\t\t\t\tif (tag === 'OPTION' || tag === 'OPTGROUP' || tag === 'HR') {\n\t\t\t\t\t\tthis._scheduleLightDomSync();\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tthis._lightDomObserver.observe(this, {\n\t\t\tsubtree: true,\n\t\t\tchildList: true,\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t});\n\t}\n\n\tprivate _stopObservingLightDom() {\n\t\tthis._lightDomObserver?.disconnect();\n\t\tthis._lightDomObserver = undefined;\n\t\tthis._pendingLightDomSync = false;\n\t}\n\n\t/**\n\t * Called whenever light DOM children change (options/optgroups/hr added/removed).\n\t * slotchange won't fire for in-place mutations, so we also use a MutationObserver.\n\t */\n\tprivate readonly _handleSlotChange = () => {\n\t\tif (this.value == null) {\n\t\t\tconst selectedValue = this.getLightDomSelectedValue();\n\t\t\tif (selectedValue != null) {\n\t\t\t\tthis.value = selectedValue;\n\t\t\t}\n\t\t}\n\n\t\tthis._scheduleLightDomSync();\n\t};\n\n\tprivate updateValidity() {\n\t\tif (!this.control) return;\n\n\t\tif (this.control.checkValidity()) {\n\t\t\tthis.internals.setValidity({});\n\t\t} else {\n\t\t\tthis.internals.setValidity({ customError: true }, this.control.validationMessage, this.control);\n\t\t}\n\t}\n\n\tprivate getLightDomSelectedValue(): string | undefined {\n\t\t// First selected option wins (matches typical native parsing behavior for single-select)\n\t\tconst selected = Array.from(this.querySelectorAll('option')).find((option) => option.hasAttribute('selected') || option.defaultSelected);\n\t\treturn selected?.value;\n\t}\n\n\t// Form-associated lifecycle\n\tformResetCallback() {\n\t\tthis.internals.setFormValue(this._defaultValue);\n\n\t\tconst newValue = this._defaultValue ?? '';\n\t\tif (this.control) {\n\t\t\tthis.control.value = newValue;\n\t\t}\n\t\tthis.value = this._defaultValue ?? '';\n\n\t\tthis.updateValidity();\n\t}\n\n\t// Event handlers\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\n\t\tif (!(event.target instanceof HTMLSelectElement)) return;\n\n\t\tif (this.disabled || this.readOnly) {\n\t\t\tevent.target.value = this.value ?? '';\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = event.target.value;\n\n\t\tthis._setFormValue(this.value);\n\t\tthis.updateValidity();\n\n\t\tthis.dispatchSheriffEvent('input');\n\t\tthis.dispatchSheriffEvent('change');\n\t};\n\n\tprivate readonly _handleFocus = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchSheriffEvent('focus');\n\t};\n\n\tprivate readonly _handleBlur = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.updateValidity();\n\t\tthis.dispatchSheriffEvent('blur');\n\t};\n\n\tprivate readonly _handleKeyDown = (event: KeyboardEvent) => {\n\t\tif (!this.readOnly) return;\n\n\t\tconst keysThatChange = new Set(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', ' ', 'Enter']);\n\n\t\tif (keysThatChange.has(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopImmediatePropagation();\n\t\t}\n\t};\n\n\t// Public methods\n\tpublic override focus(): void {\n\t\tif (!this.disabled && !this.readOnly && this.control) this.control.focus();\n\t}\n\n\tpublic override blur(): void {\n\t\tif (!this.disabled && !this.readOnly && this.control) this.control.blur();\n\t}\n\n\tpublic override click(): void {\n\t\tif (!this.disabled && !this.readOnly && this.control) this.control.click();\n\t}\n\n\t// Rendering helpers: mirror light DOM structure into the internal <select>\n\tprivate renderFromLightDom() {\n\t\tconst nodes = this.children ?? [];\n\t\tconst children: HTMLElement[] = Array.from(nodes).filter((node): node is HTMLElement => node instanceof HTMLElement);\n\n\t\treturn children.map((node) => {\n\t\t\tswitch (node.tagName) {\n\t\t\t\tcase 'OPTION':\n\t\t\t\t\treturn this.renderOption(node as HTMLOptionElement);\n\t\t\t\tcase 'OPTGROUP':\n\t\t\t\t\treturn this.renderOptgroup(node as HTMLOptGroupElement);\n\t\t\t\tcase 'HR':\n\t\t\t\t\treturn html`<hr />`;\n\t\t\t\tdefault:\n\t\t\t\t\treturn nothing;\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate renderOption(option: HTMLOptionElement) {\n\t\tconst attrValue = option.getAttribute('value');\n\t\tconst optionValueForSelect = option.value;\n\t\tconst isSelected = this.value != null && optionValueForSelect === this.value;\n\n\t\treturn html` <option value=${ifDefined(attrValue === null ? undefined : attrValue)} ?disabled=${option.disabled} .selected=${isSelected}>${option.text}</option> `;\n\t}\n\n\tprivate renderOptgroup(group: HTMLOptGroupElement) {\n\t\tconst options = Array.from(group.querySelectorAll('option'));\n\n\t\treturn html` <optgroup label=${ifDefined(group.label || undefined)} ?disabled=${group.disabled}>${options.map((opt) => this.renderOption(opt))}</optgroup> `;\n\t}\n\n\t// Render\n\t// Hidden slot: holds light DOM <option>/<optgroup>/<hr> and triggers slotchange\n\toverride render() {\n\t\tconst selectClasses = {\n\t\t\t'sds-select': true,\n\t\t\t'sds-select--error': Boolean(this.errorMessage),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(selectClasses)}\">\n\t\t\t\t${this.label\n\t\t\t\t\t? html` <label for=\"select\" class=\"sds-select__label\"> ${this.readOnly ? html`<sds-icon name=\"lock-material-filled\" size=\"m\"></sds-icon>` : nothing} ${this.label} </label> `\n\t\t\t\t\t: nothing}\n\t\t\t\t${this.helpText ? html`<p class=\"sds-select__help-text\">${this.helpText}</p>` : nothing}\n\n\t\t\t\t<div hidden>\n\t\t\t\t\t<slot @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t</div>\n\n\t\t\t\t<select\n\t\t\t\t\tid=\"select\"\n\t\t\t\t\tclass=\"sds-select__control\"\n\t\t\t\t\tname=${ifDefined(this.name)}\n\t\t\t\t\t?disabled=${this.disabled}\n\t\t\t\t\t?required=${this.required}\n\t\t\t\t\taria-readonly=${ifDefined(this.readOnly)}\n\t\t\t\t\taria-invalid=${this.errorMessage ? 'true' : 'false'}\n\t\t\t\t\t@keydown=${this._handleKeyDown}\n\t\t\t\t\t@change=${this._handleChange}\n\t\t\t\t\t@focus=${this._handleFocus}\n\t\t\t\t\t@blur=${this._handleBlur}\n\t\t\t\t>\n\t\t\t\t\t${this.renderFromLightDom()}\n\t\t\t\t</select>\n\n\t\t\t\t${this.errorMessage\n\t\t\t\t\t? html`\n\t\t\t\t\t\t\t<sds-alert variant=\"secondary\" data-palette=\"danger\">\n\t\t\t\t\t\t\t\t<p slot=\"message\">${this.errorMessage}</p>\n\t\t\t\t\t\t\t</sds-alert>\n\t\t\t\t\t\t`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-select': SDSSelect;\n\t}\n}\n"]}
+{"version":3,"file":"sds-select.js","sourceRoot":"","sources":["../../src/sds-select/sds-select.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,OAAO,wBAAwB,CAAC;AAChC,OAAO,sBAAsB,CAAC;AAGvB,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,kBAAkB;CAAG,CAAA;AAAvC,SAAS;IADrB,oBAAoB,CAAC,YAAY,CAAC;GACtB,SAAS,CAA8B","sourcesContent":["import { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { SDSSelectComponent } from './sds-select.component';\n\nimport '../sds-alert/sds-alert';\nimport '../sds-icon/sds-icon';\n\n@guardedCustomElement('sds-select')\nexport class SDSSelect extends SDSSelectComponent {}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-select': SDSSelect;\n\t}\n}\n"]}

package/dist/sds-select/sds-select.styles.js

@@ -130,7 +130,7 @@ export const styles = css `
 		gap: var(--sds-spacing-3xs);
 	}
 
-	:host([disabled]) .sds-select__control {
+	:host(:disabled) .sds-select__control {
 		opacity: var(--_sds-select-disabled-opacity);
 		cursor: not-allowed;
 	}

package/dist/sds-select/sds-select.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-select.styles.js","sourceRoot":"","sources":["../../src/sds-select/sds-select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-select-background-color: var(--sds-select-background-color, var(--sds-color-background-default, var(--sds-color-neutral-background-default)));\n\t\t--_sds-select-text-color: var(--sds-select-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-select-border-color: var(--sds-select-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-select-border-width: var(--sds-select-border-width, var(--sds-border-sm));\n\t\t--_sds-select-border-radius: var(--sds-select-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-select-font-family: var(--sds-select-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-select-font-size: var(--sds-select-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-select-font-weight: var(--sds-select-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-select-line-height: var(--sds-select-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-select-min-height: var(--sds-select-height, var(--sds-components-button-md));\n\n\t\t--_sds-select-gap: var(--sds-select-gap, var(--sds-spacing-3xs));\n\t\t--_sds-select-padding-block: var(--sds-select-padding-block, 0);\n\t\t--_sds-select-padding-inline: var(--sds-select-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-select-padding-icon-inline-end: var(--sds-spacing-lg);\n\n\t\t--_sds-select-disabled-opacity: var(--sds-select-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-select-max-width: var(--sds-select-max-width, var(--sds-typography-max-line-width, 60ch));\n\t\t--_sds-select-width: var(--sds-select-width, fit-content);\n\n\t\t--_sds-select-label-text-color: var(--sds-select-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-select-label-font-size: var(--sds-select-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-select-label-font-weight: var(--sds-select-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-select-label-line-height: var(--sds-select-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-select-helptext-text-color: var(--sds-select-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-select-helptext-font-size: var(--sds-select-helptext-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-select-helptext-font-weight: var(--sds-select-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-select-helptext-line-height: var(--sds-select-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-select-focus-color: var(--sds-select-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-select-focus-inner-color: var(--sds-select-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-select-focus-spacing: var(--sds-select-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\t--_sds-select-error-border-color: var(--sds-select-error-border-color, var(--sds-color-alert-danger-border-default, var(--sds-color-neutral-border-strong)));\n\t\t--_sds-select-error-text-color: var(--sds-select-error-text-color, var(--sds-color-alert-danger-text-default, var(--sds-color-neutral-text-default)));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-select {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-select-gap);\n\t\tfont-family: var(--_sds-select-font-family);\n\t}\n\n\t.sds-select__label {\n\t\tcolor: var(--_sds-select-label-text-color);\n\t\tfont-size: var(--_sds-select-label-font-size);\n\t\tfont-weight: var(--_sds-select-label-font-weight);\n\t\tline-height: var(--_sds-select-label-line-height);\n\t}\n\n\t.sds-select__label:has(sds-icon) {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: var(--_sds-select-gap);\n\t}\n\n\t.sds-select__help-text {\n\t\tcolor: var(--_sds-select-helptext-text-color);\n\t\tfont-size: var(--_sds-select-helptext-font-size);\n\t\tfont-weight: var(--_sds-select-helptext-font-weight);\n\t\tline-height: var(--_sds-select-helptext-line-height);\n\t\tmargin: 0;\n\t}\n\n\t.sds-select__control {\n\t\tbox-sizing: border-box;\n\t\twidth: var(--_sds-select-width);\n\t\tmax-width: var(--_sds-select-max-width);\n\n\t\tcolor: var(--_sds-select-text-color);\n\t\tbackground-color: var(--_sds-select-background-color);\n\n\t\tpadding-block: var(--_sds-select-padding-block);\n\t\tpadding-inline-start: var(--_sds-select-padding-inline);\n\t\tpadding-inline-end: var(--_sds-select-padding-icon-inline-end);\n\n\t\tline-height: var(--_sds-select-line-height);\n\t\tfont-size: var(--_sds-select-font-size);\n\t\tfont-weight: var(--_sds-select-font-weight);\n\t\tfont-family: var(--_sds-select-font-family);\n\n\t\tmin-height: var(--_sds-select-min-height);\n\t\tborder-radius: var(--_sds-select-border-radius);\n\t\tborder: var(--_sds-select-border-width) solid var(--_sds-select-border-color);\n\t\tappearance: none;\n\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 32 32'%3E%3Cpath d='M16 20.5 8 12.5 9.867 10.633 16 16.767 22.133 10.633 24 12.5Z'/%3E%3C/svg%3E\");\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 2rem;\n\t\tbackground-position: top 50% right var(--sds-spacing-3xs);\n\n\t\t&:hover {\n\t\t\t--_sds-select-border-color: var(--sds-select-border-color, var(--sds-color-border-strong, var(--sds-color-neutral-border-strong)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-select-focus-inner-color);\n\t\t\toutline: var(--_sds-select-focus-spacing) solid var(--_sds-select-focus-color);\n\t\t\toutline-offset: var(--_sds-select-focus-spacing);\n\t\t}\n\n\t\t&:open {\n\t\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 32 32'%3E%3Cpath d='m16 11.5 8 8-1.867 1.867L16 15.233l-6.133 6.134L8 19.5z'/%3E%3C/svg%3E\");\n\t\t}\n\t}\n\n\t.sds-select--error .sds-select__control {\n\t\tborder-color: var(--_sds-select-error-border-color);\n\t}\n\n\t.sds-select__error {\n\t\tcolor: var(--_sds-select-error-text-color);\n\t\tfont-size: var(--_sds-select-helptext-font-size);\n\t\tline-height: var(--_sds-select-helptext-line-height);\n\t\tmargin: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--sds-spacing-3xs);\n\t}\n\n\t:host([disabled]) .sds-select__control {\n\t\topacity: var(--_sds-select-disabled-opacity);\n\t\tcursor: not-allowed;\n\t}\n\n\t.sds-select__icon {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tinset-inline-end: var(--_sds-select-padding-inline);\n\t\ttransform: translateY(-50%);\n\t\twidth: var(--sds-components-icon-md, 1rem);\n\t\theight: var(--sds-components-icon-md, 1rem);\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\tmask: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.47 6.47a.75.75 0 0 1 1.06 0L8 8.94l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 0 1 0-1.06z' fill='black'/%3E%3C/svg%3E\")\n\t\t\tno-repeat center / contain;\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-select-background-color: var(--sds-select-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\n\t\t& .sds-select__control {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-select-min-height: var(--sds-select-height, var(--sds-components-button-sm));\n\t\t--_sds-select-font-size: var(--sds-select-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-select-line-height: var(--sds-select-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-select-label-font-size: var(--sds-select-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-select-label-line-height: var(--sds-select-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-select-helptext-font-size: var(--sds-select-helptext-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-select-helptext-line-height: var(--sds-select-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-select-min-height: var(--sds-select-height, var(--sds-components-button-lg));\n\t\t--_sds-select-font-size: var(--sds-select-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-select-line-height: var(--sds-select-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-select-label-font-size: var(--sds-select-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-select-label-line-height: var(--sds-select-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-select-helptext-font-size: var(--sds-select-helptext-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-select-helptext-line-height: var(--sds-select-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}
+{"version":3,"file":"sds-select.styles.js","sourceRoot":"","sources":["../../src/sds-select/sds-select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-select-background-color: var(--sds-select-background-color, var(--sds-color-background-default, var(--sds-color-neutral-background-default)));\n\t\t--_sds-select-text-color: var(--sds-select-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-select-border-color: var(--sds-select-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-select-border-width: var(--sds-select-border-width, var(--sds-border-sm));\n\t\t--_sds-select-border-radius: var(--sds-select-border-radius, var(--sds-radius-sm));\n\n\t\t--_sds-select-font-family: var(--sds-select-font-family, var(--sds-typography-font-family-roboto));\n\t\t--_sds-select-font-size: var(--sds-select-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-select-font-weight: var(--sds-select-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-select-line-height: var(--sds-select-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-select-min-height: var(--sds-select-height, var(--sds-components-button-md));\n\n\t\t--_sds-select-gap: var(--sds-select-gap, var(--sds-spacing-3xs));\n\t\t--_sds-select-padding-block: var(--sds-select-padding-block, 0);\n\t\t--_sds-select-padding-inline: var(--sds-select-padding-inline, var(--sds-spacing-xs));\n\t\t--_sds-select-padding-icon-inline-end: var(--sds-spacing-lg);\n\n\t\t--_sds-select-disabled-opacity: var(--sds-select-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\t\t--_sds-select-max-width: var(--sds-select-max-width, var(--sds-typography-max-line-width, 60ch));\n\t\t--_sds-select-width: var(--sds-select-width, fit-content);\n\n\t\t--_sds-select-label-text-color: var(--sds-select-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\t\t--_sds-select-label-font-size: var(--sds-select-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-select-label-font-weight: var(--sds-select-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-select-label-line-height: var(--sds-select-label-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-select-helptext-text-color: var(--sds-select-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-select-helptext-font-size: var(--sds-select-helptext-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-select-helptext-font-weight: var(--sds-select-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-select-helptext-line-height: var(--sds-select-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-select-focus-color: var(--sds-select-focus-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-select-focus-inner-color: var(--sds-select-focus-inner-color, var(--sds-color-states-focus-inner));\n\t\t--_sds-select-focus-spacing: var(--sds-select-focus-spacing, var(--sds-color-states-focus-spacing));\n\n\t\t--_sds-select-error-border-color: var(--sds-select-error-border-color, var(--sds-color-alert-danger-border-default, var(--sds-color-neutral-border-strong)));\n\t\t--_sds-select-error-text-color: var(--sds-select-error-text-color, var(--sds-color-alert-danger-text-default, var(--sds-color-neutral-text-default)));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t\ttext-align: start;\n\t}\n\n\t.sds-select {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-select-gap);\n\t\tfont-family: var(--_sds-select-font-family);\n\t}\n\n\t.sds-select__label {\n\t\tcolor: var(--_sds-select-label-text-color);\n\t\tfont-size: var(--_sds-select-label-font-size);\n\t\tfont-weight: var(--_sds-select-label-font-weight);\n\t\tline-height: var(--_sds-select-label-line-height);\n\t}\n\n\t.sds-select__label:has(sds-icon) {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: var(--_sds-select-gap);\n\t}\n\n\t.sds-select__help-text {\n\t\tcolor: var(--_sds-select-helptext-text-color);\n\t\tfont-size: var(--_sds-select-helptext-font-size);\n\t\tfont-weight: var(--_sds-select-helptext-font-weight);\n\t\tline-height: var(--_sds-select-helptext-line-height);\n\t\tmargin: 0;\n\t}\n\n\t.sds-select__control {\n\t\tbox-sizing: border-box;\n\t\twidth: var(--_sds-select-width);\n\t\tmax-width: var(--_sds-select-max-width);\n\n\t\tcolor: var(--_sds-select-text-color);\n\t\tbackground-color: var(--_sds-select-background-color);\n\n\t\tpadding-block: var(--_sds-select-padding-block);\n\t\tpadding-inline-start: var(--_sds-select-padding-inline);\n\t\tpadding-inline-end: var(--_sds-select-padding-icon-inline-end);\n\n\t\tline-height: var(--_sds-select-line-height);\n\t\tfont-size: var(--_sds-select-font-size);\n\t\tfont-weight: var(--_sds-select-font-weight);\n\t\tfont-family: var(--_sds-select-font-family);\n\n\t\tmin-height: var(--_sds-select-min-height);\n\t\tborder-radius: var(--_sds-select-border-radius);\n\t\tborder: var(--_sds-select-border-width) solid var(--_sds-select-border-color);\n\t\tappearance: none;\n\n\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 32 32'%3E%3Cpath d='M16 20.5 8 12.5 9.867 10.633 16 16.767 22.133 10.633 24 12.5Z'/%3E%3C/svg%3E\");\n\t\tbackground-repeat: no-repeat;\n\t\tbackground-size: 2rem;\n\t\tbackground-position: top 50% right var(--sds-spacing-3xs);\n\n\t\t&:hover {\n\t\t\t--_sds-select-border-color: var(--sds-select-border-color, var(--sds-color-border-strong, var(--sds-color-neutral-border-strong)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-select-focus-inner-color);\n\t\t\toutline: var(--_sds-select-focus-spacing) solid var(--_sds-select-focus-color);\n\t\t\toutline-offset: var(--_sds-select-focus-spacing);\n\t\t}\n\n\t\t&:open {\n\t\t\tbackground-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 32 32'%3E%3Cpath d='m16 11.5 8 8-1.867 1.867L16 15.233l-6.133 6.134L8 19.5z'/%3E%3C/svg%3E\");\n\t\t}\n\t}\n\n\t.sds-select--error .sds-select__control {\n\t\tborder-color: var(--_sds-select-error-border-color);\n\t}\n\n\t.sds-select__error {\n\t\tcolor: var(--_sds-select-error-text-color);\n\t\tfont-size: var(--_sds-select-helptext-font-size);\n\t\tline-height: var(--_sds-select-helptext-line-height);\n\t\tmargin: 0;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: var(--sds-spacing-3xs);\n\t}\n\n\t:host(:disabled) .sds-select__control {\n\t\topacity: var(--_sds-select-disabled-opacity);\n\t\tcursor: not-allowed;\n\t}\n\n\t.sds-select__icon {\n\t\tposition: absolute;\n\t\ttop: 50%;\n\t\tinset-inline-end: var(--_sds-select-padding-inline);\n\t\ttransform: translateY(-50%);\n\t\twidth: var(--sds-components-icon-md, 1rem);\n\t\theight: var(--sds-components-icon-md, 1rem);\n\t\tpointer-events: none;\n\t\tbackground-color: currentColor;\n\t\tmask: url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.47 6.47a.75.75 0 0 1 1.06 0L8 8.94l2.47-2.47a.75.75 0 1 1 1.06 1.06l-3 3a.75.75 0 0 1-1.06 0l-3-3a.75.75 0 0 1 0-1.06z' fill='black'/%3E%3C/svg%3E\")\n\t\t\tno-repeat center / contain;\n\t}\n\n\t:host([readonly]) {\n\t\t--_sds-select-background-color: var(--sds-select-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));\n\n\t\t& .sds-select__control {\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-select-min-height: var(--sds-select-height, var(--sds-components-button-sm));\n\t\t--_sds-select-font-size: var(--sds-select-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-select-line-height: var(--sds-select-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-select-label-font-size: var(--sds-select-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-select-label-line-height: var(--sds-select-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-select-helptext-font-size: var(--sds-select-helptext-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-select-helptext-line-height: var(--sds-select-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-select-min-height: var(--sds-select-height, var(--sds-components-button-lg));\n\t\t--_sds-select-font-size: var(--sds-select-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-select-line-height: var(--sds-select-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-select-label-font-size: var(--sds-select-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-select-label-line-height: var(--sds-select-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-select-helptext-font-size: var(--sds-select-helptext-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-select-helptext-line-height: var(--sds-select-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n`;\n"]}

package/dist/sds-stepper/sds-stepper.d.ts

@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 export interface SDSStepperProps {
     orientation?: 'horizontal' | 'vertical';
 }
-declare const SDSStepper_base: (new (...args: any[]) => import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface) & typeof LitElement;
+declare const SDSStepper_base: import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & typeof LitElement;
 export declare class SDSStepper extends SDSStepper_base {
     static styles: import("lit").CSSResult[];
     readonly internals: ElementInternals;
@@ -12,7 +12,6 @@ export declare class SDSStepper extends SDSStepper_base {
     private readonly _setActiveStep;
     private readonly _handleChildClick;
     getActiveStep(): number;
-    role: string;
     connectedCallback(): void;
     goToStep(index: number): void;
     private _applyStepNumbers;

package/dist/sds-stepper/sds-stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-stepper.d.ts","sourceRoot":"","sources":["../../src/sds-stepper/sds-stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,MAAM,WAAW,eAAe;IAC/B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACxC;;AAED,qBACa,UAAW,SAAQ,eAAmC;IAClE,OAAgB,MAAM,4BAAY;IAClC,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAED,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAgB;IAGtG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAoB;;IAO1C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAI7B;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAahC;IAEK,aAAa,IAAI,MAAM;IAId,IAAI,SAAa;IAExB,iBAAiB;IAOnB,QAAQ,CAAC,KAAK,EAAE,MAAM;IAO7B,OAAO,CAAC,iBAAiB;IAMhB,YAAY;IAYZ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;IAED,UAAU,kBAAkB;QAC3B,MAAM,EAAE,WAAW,CAAC;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACvC;CACD"}
+{"version":3,"file":"sds-stepper.d.ts","sourceRoot":"","sources":["../../src/sds-stepper/sds-stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,MAAM,WAAW,eAAe;IAC/B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACxC;;AAED,qBACa,UAAW,SAAQ,eAAmC;IAClE,OAAgB,MAAM,4BAAY;IAClC,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAED,WAAW,EAAE,eAAe,CAAC,aAAa,CAAC,CAAgB;IAGtG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAoB;;IAQ1C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAI7B;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAehC;IAEK,aAAa,IAAI,MAAM;IAIrB,iBAAiB;IAOnB,QAAQ,CAAC,KAAK,EAAE,MAAM;IAO7B,OAAO,CAAC,iBAAiB;IAMhB,YAAY;IAYZ,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;IAED,UAAU,kBAAkB;QAC3B,MAAM,EAAE,WAAW,CAAC;YAAE,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACvC;CACD"}

package/dist/sds-stepper/sds-stepper.js

@@ -8,7 +8,6 @@ import { LitElement, html } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
 import { guardedCustomElement } from '../utils/guarded-custom-element';
 import { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';
-import { SDSStepperStep } from '../sds-stepper-step/sds-stepper-step';
 import { styles } from './sds-stepper.styles';
 let SDSStepper = class SDSStepper extends SDSEventDispatcherMixin(LitElement) {
     constructor() {
@@ -22,7 +21,7 @@ let SDSStepper = class SDSStepper extends SDSEventDispatcherMixin(LitElement) {
         this._handleChildClick = (event) => {
             event.preventDefault();
             event.stopImmediatePropagation();
-            const step = event.composedPath().find((n) => n instanceof SDSStepperStep);
+            const step = event.composedPath().find((step) => step instanceof Element && step.tagName.toLowerCase() === 'sds-stepper-step');
             if (!step)
                 return;
             const index = this.steps.indexOf(step);
@@ -31,8 +30,8 @@ let SDSStepper = class SDSStepper extends SDSEventDispatcherMixin(LitElement) {
             this._setActiveStep(this.steps, index);
             this.dispatchSheriffEvent('change', { index });
         };
-        this.role = 'tablist';
         this.internals = this.attachInternals();
+        this.internals.role = 'tablist';
     }
     getActiveStep() {
         return this.steps.findIndex((step) => step.active);

package/dist/sds-stepper/sds-stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-stepper.js","sourceRoot":"","sources":["../../src/sds-stepper/sds-stepper.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\nimport { SDSStepperStep } from '../sds-stepper-step/sds-stepper-step';\nimport { styles } from './sds-stepper.styles';\n\nexport interface SDSStepperProps {\n\torientation?: 'horizontal' | 'vertical';\n}\n\n@guardedCustomElement('sds-stepper')\nexport class SDSStepper extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: String, reflect: true }) orientation: SDSStepperProps['orientation'] = 'horizontal';\n\n\t@queryAssignedElements({ selector: 'sds-stepper-step', flatten: true })\n\tprivate readonly steps!: SDSStepperStep[];\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t}\n\n\tprivate readonly _setActiveStep = (steps: SDSStepperStep[], activeIndex: number): void => {\n\t\tsteps.forEach((step, index) => {\n\t\t\tstep.active = index === activeIndex;\n\t\t});\n\t};\n\n\tprivate readonly _handleChildClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tconst step: SDSStepperStep | undefined = event.composedPath().find((n): n is SDSStepperStep => n instanceof SDSStepperStep);\n\n\t\tif (!step) return;\n\n\t\tconst index = this.steps.indexOf(step);\n\t\tif (index === -1) return;\n\n\t\tthis._setActiveStep(this.steps, index);\n\t\tthis.dispatchSheriffEvent('change', { index });\n\t};\n\n\tpublic getActiveStep(): number {\n\t\treturn this.steps.findIndex((step) => step.active);\n\t}\n\n\tpublic override role = 'tablist';\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tif (!this.hasAttribute('aria-label')) {\n\t\t\tthis.ariaLabel = 'Steg';\n\t\t}\n\t}\n\n\tpublic goToStep(index: number) {\n\t\tif (index < 0 || index >= this.steps.length) return;\n\n\t\tthis._setActiveStep(this.steps, index);\n\t\tthis.dispatchSheriffEvent('change', { index });\n\t}\n\n\tprivate _applyStepNumbers() {\n\t\tthis.steps.forEach((step, i) => {\n\t\t\tstep.style.setProperty('--sds-stepper-step-counter-content', `\"${i + 1}\"`);\n\t\t});\n\t}\n\n\toverride firstUpdated() {\n\t\tconst userAgent: string = navigator.userAgent;\n\n\t\tconst isSafari: boolean = /safari/i.test(userAgent) && !/chrome/i.test(userAgent) && !/crios/i.test(userAgent) && !/edgios/i.test(userAgent) && !/fxios/i.test(userAgent);\n\n\t\tif (isSafari) {\n\t\t\tconst slot = this.shadowRoot!.querySelector('slot') as HTMLSlotElement;\n\t\t\tslot.addEventListener('slotchange', () => this._applyStepNumbers());\n\t\t\tthis._applyStepNumbers();\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`<slot @_sds-step-clicked=\"${this._handleChildClick}\"></slot>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-stepper': SDSStepper;\n\t}\n\n\tinterface SDSStepperEventMap {\n\t\tchange: CustomEvent<{ index: number }>;\n\t}\n}\n"]}
+{"version":3,"file":"sds-stepper.js","sourceRoot":"","sources":["../../src/sds-stepper/sds-stepper.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { SDSEventDispatcherMixin } from '../mixins/sds-event-dispatcher-mixin';\nimport type { SDSStepperStep } from '../sds-stepper-step/sds-stepper-step';\nimport { styles } from './sds-stepper.styles';\n\nexport interface SDSStepperProps {\n\torientation?: 'horizontal' | 'vertical';\n}\n\n@guardedCustomElement('sds-stepper')\nexport class SDSStepper extends SDSEventDispatcherMixin(LitElement) {\n\tstatic override styles = [styles];\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: String, reflect: true }) orientation: SDSStepperProps['orientation'] = 'horizontal';\n\n\t@queryAssignedElements({ selector: 'sds-stepper-step', flatten: true })\n\tprivate readonly steps!: SDSStepperStep[];\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.internals.role = 'tablist';\n\t}\n\n\tprivate readonly _setActiveStep = (steps: SDSStepperStep[], activeIndex: number): void => {\n\t\tsteps.forEach((step, index) => {\n\t\t\tstep.active = index === activeIndex;\n\t\t});\n\t};\n\n\tprivate readonly _handleChildClick = (event: MouseEvent) => {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\n\t\tconst step: SDSStepperStep | undefined = event.composedPath().find((step): step is SDSStepperStep =>\n\t\t\tstep instanceof Element && step.tagName.toLowerCase() === 'sds-stepper-step'\n\t\t);\n\n\t\tif (!step) return;\n\n\t\tconst index = this.steps.indexOf(step);\n\t\tif (index === -1) return;\n\n\t\tthis._setActiveStep(this.steps, index);\n\t\tthis.dispatchSheriffEvent('change', { index });\n\t};\n\n\tpublic getActiveStep(): number {\n\t\treturn this.steps.findIndex((step) => step.active);\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tif (!this.hasAttribute('aria-label')) {\n\t\t\tthis.ariaLabel = 'Steg';\n\t\t}\n\t}\n\n\tpublic goToStep(index: number) {\n\t\tif (index < 0 || index >= this.steps.length) return;\n\n\t\tthis._setActiveStep(this.steps, index);\n\t\tthis.dispatchSheriffEvent('change', { index });\n\t}\n\n\tprivate _applyStepNumbers() {\n\t\tthis.steps.forEach((step, i) => {\n\t\t\tstep.style.setProperty('--sds-stepper-step-counter-content', `\"${i + 1}\"`);\n\t\t});\n\t}\n\n\toverride firstUpdated() {\n\t\tconst userAgent: string = navigator.userAgent;\n\n\t\tconst isSafari: boolean = /safari/i.test(userAgent) && !/chrome/i.test(userAgent) && !/crios/i.test(userAgent) && !/edgios/i.test(userAgent) && !/fxios/i.test(userAgent);\n\n\t\tif (isSafari) {\n\t\t\tconst slot = this.shadowRoot!.querySelector('slot') as HTMLSlotElement;\n\t\t\tslot.addEventListener('slotchange', () => this._applyStepNumbers());\n\t\t\tthis._applyStepNumbers();\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`<slot @_sds-step-clicked=\"${this._handleChildClick}\"></slot>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-stepper': SDSStepper;\n\t}\n\n\tinterface SDSStepperEventMap {\n\t\tchange: CustomEvent<{ index: number }>;\n\t}\n}\n"]}

package/dist/sds-stepper/sds-stepper.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-stepper.styles.d.ts","sourceRoot":"","sources":["../../src/sds-stepper/sds-stepper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkClB,CAAC"}
+{"version":3,"file":"sds-stepper.styles.d.ts","sourceRoot":"","sources":["../../src/sds-stepper/sds-stepper.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmClB,CAAC"}

package/dist/sds-stepper/sds-stepper.styles.js

@@ -7,7 +7,7 @@ export const styles = css `
 		align-items: flex-start;
 		text-align: center;
 
-		--sds-stepper-circle-size: 32px;
+		--sds-stepper-circle-size: 28px;
 	}
 
 	:host([orientation='vertical']) {
@@ -22,6 +22,7 @@ export const styles = css `
 
 		--sds-stepper-step-counter-grid-area: circle / 1;
 		--sds-stepper-step-label-grid-area: auto;
+		--sds-stepper-step-label-padding-inline: 0;
 
 		--sds-stepper-step-divider-before-visibility: hidden;
 		--sds-stepper-step-divider-width: 1px;

package/dist/sds-stepper/sds-stepper.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-stepper.styles.js","sourceRoot":"","sources":["../../src/sds-stepper/sds-stepper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tcounter-reset: stepper;\n\t\talign-items: flex-start;\n\t\ttext-align: center;\n\n\t\t--sds-stepper-circle-size: 32px;\n\t}\n\n\t:host([orientation='vertical']) {\n\t\tflex-direction: column;\n\n\t\t--sds-stepper-step-grid-template-rows: [line-1] auto [step-start] var(--sds-stepper-circle-size) [line-2 step-end] auto;\n\t\t--sds-stepper-step-grid-template-columns: var(--sds-stepper-circle-size) auto;\n\n\t\t--sds-stepper-step-step-grid-area: 2/1/-1/-1;\n\t\t--sds-stepper-step-step-grid-template-columns: [circle] var(--sds-stepper-circle-size) [content] auto;\n\t\t--sds-stepper-step-step-margin: 0 0 var(--sds-stepper-circle-size) 0;\n\n\t\t--sds-stepper-step-counter-grid-area: circle / 1;\n\t\t--sds-stepper-step-label-grid-area: auto;\n\n\t\t--sds-stepper-step-divider-before-visibility: hidden;\n\t\t--sds-stepper-step-divider-width: 1px;\n\t\t--sds-stepper-step-divider-height: 100%;\n\t\t--sds-stepper-step-divider-min-height: 1rem;\n\t\t--sds-stepper-step-divider-grid-row: line-2;\n\t\t--sds-stepper-step-divider-after-grid-column: 1;\n\t\t--sds-stepper-step-divider-before-display: none;\n\n\t\t--sds-stepper-step-step-gap: 0 var(--sds-spacing-3xs);\n\t}\n`;\n"]}
+{"version":3,"file":"sds-stepper.styles.js","sourceRoot":"","sources":["../../src/sds-stepper/sds-stepper.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tcounter-reset: stepper;\n\t\talign-items: flex-start;\n\t\ttext-align: center;\n\n\t\t--sds-stepper-circle-size: 28px;\n\t}\n\n\t:host([orientation='vertical']) {\n\t\tflex-direction: column;\n\n\t\t--sds-stepper-step-grid-template-rows: [line-1] auto [step-start] var(--sds-stepper-circle-size) [line-2 step-end] auto;\n\t\t--sds-stepper-step-grid-template-columns: var(--sds-stepper-circle-size) auto;\n\n\t\t--sds-stepper-step-step-grid-area: 2/1/-1/-1;\n\t\t--sds-stepper-step-step-grid-template-columns: [circle] var(--sds-stepper-circle-size) [content] auto;\n\t\t--sds-stepper-step-step-margin: 0 0 var(--sds-stepper-circle-size) 0;\n\n\t\t--sds-stepper-step-counter-grid-area: circle / 1;\n\t\t--sds-stepper-step-label-grid-area: auto;\n\t\t--sds-stepper-step-label-padding-inline: 0;\n\n\t\t--sds-stepper-step-divider-before-visibility: hidden;\n\t\t--sds-stepper-step-divider-width: 1px;\n\t\t--sds-stepper-step-divider-height: 100%;\n\t\t--sds-stepper-step-divider-min-height: 1rem;\n\t\t--sds-stepper-step-divider-grid-row: line-2;\n\t\t--sds-stepper-step-divider-after-grid-column: 1;\n\t\t--sds-stepper-step-divider-before-display: none;\n\n\t\t--sds-stepper-step-step-gap: 0 var(--sds-spacing-3xs);\n\t}\n`;\n"]}

package/dist/sds-stepper-step/sds-stepper-step.d.ts

@@ -4,7 +4,7 @@ export interface SDSStepperStepProps {
     interactive?: boolean;
     active?: boolean;
 }
-declare const SDSStepperStep_base: (new (...args: any[]) => import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface) & typeof LitElement;
+declare const SDSStepperStep_base: import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & typeof LitElement;
 export declare class SDSStepperStep extends SDSStepperStep_base {
     static styles: import("lit").CSSResult[];
     readonly internals: ElementInternals;

package/dist/sds-stepper-step/sds-stepper-step.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-stepper-step.styles.d.ts","sourceRoot":"","sources":["../../src/sds-stepper-step/sds-stepper-step.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAkQlB,CAAC"}
+{"version":3,"file":"sds-stepper-step.styles.d.ts","sourceRoot":"","sources":["../../src/sds-stepper-step/sds-stepper-step.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAoQlB,CAAC"}

package/dist/sds-stepper-step/sds-stepper-step.styles.js

@@ -2,9 +2,10 @@ import { css } from 'lit';
 export const styles = css `
 	:host {
 		/* Sizing */
-		--_sds-stepper-step-circle-size: var(--sds-stepper-circle-size, 32px);
+		--_sds-stepper-step-circle-size: var(--sds-stepper-circle-size, 28px);
 		--_sds-stepper-step-border-width: var(--sds-stepper-step-border-width, 2px);
 		--_sds-stepper-step-radius: var(--sds-stepper-step-radius, var(--sds-radius-sm));
+		--_sds-stepper-step-gap: var(--sds-stepper-step-gap, var(--sds-spacing-3xs));
 
 		/* Layout */
 		--_sds-stepper-step-grid-template-rows: var(--sds-stepper-step-grid-template-rows, var(--_sds-stepper-step-circle-size) auto);
@@ -39,7 +40,8 @@ export const styles = css `
 		--_sds-stepper-step-label-text-underline-offset: var(--sds-stepper-step-label-text-underline-offset, var(--sds-typography-link-text-underline-offset));
 		--_sds-stepper-step-label-max-width: var(--sds-stepper-step-label-max-width, 24ch);
 		--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
-		--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, var(--sds-typography-link-text-decoration));
+		--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, none);
+		--_sds-stepper-step-label-padding-inline: var(--sds-stepper-step-label-padding-inline, var(--sds-spacing-3xs));
 
 		/* Counter */
 		--_sds-stepper-step-counter-grid-area: var(--sds-stepper-step-counter-grid-area, circle / 2);
@@ -73,7 +75,7 @@ export const styles = css `
 		display: grid;
 		grid-template-columns: var(--_sds-stepper-step-grid-template-columns);
 		grid-template-rows: var(--_sds-stepper-step-grid-template-rows);
-		gap: var(--sds-spacing-xs);
+		gap: var(--_sds-stepper-step-gap);
 		justify-items: flex-start;
 		flex: 100%;
 		padding-block-start: var(--_sds-stepper-step-border-width);
@@ -141,6 +143,7 @@ export const styles = css `
 		min-width: fit-content;
 		max-width: var(--_sds-stepper-step-label-max-width);
 		text-align: left;
+		padding-inline: var(--_sds-stepper-step-label-padding-inline);
 
 		color: var(--_sds-stepper-step-label-text-color);
 		font-family: var(--sds-typography-font-family);
@@ -208,7 +211,7 @@ export const styles = css `
 		--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
 		--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-main-action-contrast-default));
 		--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, none);
-		--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
+		--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
 
 		pointer-events: none;
 	}
@@ -216,7 +219,6 @@ export const styles = css `
 	:host(:not([active])) .sds-stepper-step__step:hover {
 		--_sds-stepper-step-label-text-color: var(--sds-stepper-step-label-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
 		--_sds-stepper-step-label-text-decoration: var(--sds-stepper-step-label-text-decoration, var(--sds-typography-link-text-decoration));
-		--_sds-stepper-step-label-text-decoration-thickness: var(--sds-stepper-step-label-text-decoration-thickness, calc(var(--sds-typography-link-text-decoration-thickness) + 1px));
 		--_sds-stepper-step-counter-background-color: var(--sds-stepper-step-counter-background-color, var(--sds-color-action-contrast-subtle, var(--sds-color-main-action-contrast-subtle)));
 		--_sds-stepper-step-counter-border-color: var(--sds-stepper-step-counter-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
 		--_sds-stepper-step-counter-text-color: var(--sds-stepper-step-counter-text-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));