@jsekulowicz/ds-components 0.1.0

package/dist/atoms/radio-group/radio-group.js

@@ -0,0 +1,130 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { html, nothing } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { formFieldStyles, renderSubtext } from '../../shared/form-field.js';
+import { radioGroupStyles } from './radio-group.styles.js';
+/**
+ * @tag ds-radio-group
+ * @summary Groups ds-radio buttons with a shared label, name, and validation state.
+ * @slot default - One or more ds-radio elements.
+ * @event ds-change - Fires when the selected radio changes. Detail: `{ value: string }`.
+ */
+export class DsRadioGroup extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.name = '';
+        this.description = '';
+        this.error = '';
+        this.value = '';
+        this.required = false;
+        this.disabled = false;
+        this.invalid = false;
+        this.#onSlotChange = () => {
+            this.#wireRadios(this.value !== '');
+        };
+        this.#wireRadios = (syncChecked) => {
+            this._radios.forEach(radio => {
+                if (this.name)
+                    radio.setAttribute('name', this.name);
+                if (this.required) {
+                    radio.setAttribute('required', '');
+                }
+                else {
+                    radio.removeAttribute('required');
+                }
+                if (this.disabled) {
+                    radio.setAttribute('disabled', '');
+                }
+                else {
+                    radio.removeAttribute('disabled');
+                }
+                if (syncChecked) {
+                    const rv = radio.radioValue ?? radio.getAttribute('radiovalue') ?? '';
+                    if (rv === this.value) {
+                        radio.setAttribute('checked', '');
+                    }
+                    else {
+                        radio.removeAttribute('checked');
+                    }
+                }
+            });
+        };
+        this.#onRadioChange = (event) => {
+            if (event.target === this) {
+                return;
+            }
+            event.stopImmediatePropagation();
+            const { value } = event.detail;
+            this.value = value;
+            this.invalid = false;
+            this.dispatchEvent(new CustomEvent('ds-change', { bubbles: true, composed: true, detail: { value } }));
+        };
+    }
+    static { this.styles = [...DsElement.styles, formFieldStyles, radioGroupStyles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.label) {
+            console.warn('<ds-radio-group>: the `label` property is required for accessibility.');
+        }
+        this.addEventListener('ds-change', this.#onRadioChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('ds-change', this.#onRadioChange);
+    }
+    updated(changed) {
+        this.#wireRadios(changed.has('value'));
+    }
+    #onSlotChange;
+    #wireRadios;
+    #onRadioChange;
+    render() {
+        return html `
+      <fieldset class="fieldset" part="fieldset">
+        <legend class="label" part="legend">
+          ${this.label}
+          ${this.required ? html `<span class="required" aria-hidden="true"> *</span>` : nothing}
+        </legend>
+        <div class="items">
+          <slot @slotchange=${this.#onSlotChange}></slot>
+        </div>
+      </fieldset>
+      ${renderSubtext(this.description, this.error, this.invalid)}
+    `;
+    }
+}
+__decorate([
+    property()
+], DsRadioGroup.prototype, "label", void 0);
+__decorate([
+    property()
+], DsRadioGroup.prototype, "name", void 0);
+__decorate([
+    property()
+], DsRadioGroup.prototype, "description", void 0);
+__decorate([
+    property()
+], DsRadioGroup.prototype, "error", void 0);
+__decorate([
+    property()
+], DsRadioGroup.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsRadioGroup.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsRadioGroup.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsRadioGroup.prototype, "invalid", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'ds-radio' })
+], DsRadioGroup.prototype, "_radios", void 0);
+//# sourceMappingURL=radio-group.js.map

package/dist/atoms/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sourceRoot":"","sources":["../../../src/atoms/radio-group/radio-group.ts"],"names":[],"mappings":"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"}

package/dist/atoms/radio-group/radio-group.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const radioGroupStyles: import("lit").CSSResult;
+//# sourceMappingURL=radio-group.styles.d.ts.map

package/dist/atoms/radio-group/radio-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,yBA2B5B,CAAC"}

package/dist/atoms/radio-group/radio-group.styles.js

@@ -0,0 +1,30 @@
+import { css } from 'lit';
+export const radioGroupStyles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+  .fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+    min-inline-size: 0;
+  }
+  .label {
+    margin-bottom: var(--ds-space-2);
+    padding: 0;
+  }
+  :host([invalid]) .label {
+    color: var(--ds-color-danger);
+  }
+  .items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-space-2);
+  }
+  .description,
+  .error {
+    margin-top: var(--ds-space-1);
+  }
+`;
+//# sourceMappingURL=radio-group.styles.js.map

package/dist/atoms/radio-group/radio-group.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.styles.js","sourceRoot":"","sources":["../../../src/atoms/radio-group/radio-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BlC,CAAC"}

package/dist/atoms/searchable-select/define.d.ts

@@ -0,0 +1,8 @@
+import { DsSearchableSelect } from './searchable-select.js';
+import '../select/define.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-searchable-select': DsSearchableSelect;
+    }
+}
+//# sourceMappingURL=define.d.ts.map

package/dist/atoms/searchable-select/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/atoms/searchable-select/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,qBAAqB,CAAC;AAM7B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/dist/atoms/searchable-select/define.js

@@ -0,0 +1,6 @@
+import { DsSearchableSelect } from './searchable-select.js';
+import '../select/define.js';
+if (!customElements.get('ds-searchable-select')) {
+    customElements.define('ds-searchable-select', DsSearchableSelect);
+}
+//# sourceMappingURL=define.js.map

package/dist/atoms/searchable-select/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/atoms/searchable-select/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,qBAAqB,CAAC;AAE7B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,sBAAsB,EAAE,kBAAkB,CAAC,CAAC;AACpE,CAAC"}

package/dist/atoms/searchable-select/highlight-match.d.ts

@@ -0,0 +1,3 @@
+import { type TemplateResult } from 'lit';
+export declare function highlightMatch(label: string, query: string): TemplateResult;
+//# sourceMappingURL=highlight-match.d.ts.map

package/dist/atoms/searchable-select/highlight-match.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight-match.d.ts","sourceRoot":"","sources":["../../../src/atoms/searchable-select/highlight-match.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,cAAc,CAc3E"}

package/dist/atoms/searchable-select/highlight-match.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+export function highlightMatch(label, query) {
+    if (!query)
+        return html `${label}`;
+    const lower = label.toLowerCase();
+    const q = query.toLowerCase();
+    const parts = [];
+    let pos = 0;
+    let idx;
+    while ((idx = lower.indexOf(q, pos)) !== -1) {
+        if (idx > pos)
+            parts.push(label.slice(pos, idx));
+        parts.push(html `<mark class="match">${label.slice(idx, idx + q.length)}</mark>`);
+        pos = idx + q.length;
+    }
+    if (pos < label.length)
+        parts.push(label.slice(pos));
+    return html `${parts}`;
+}
+//# sourceMappingURL=highlight-match.js.map

package/dist/atoms/searchable-select/highlight-match.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight-match.js","sourceRoot":"","sources":["../../../src/atoms/searchable-select/highlight-match.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAEhD,MAAM,UAAU,cAAc,CAAC,KAAa,EAAE,KAAa;IACzD,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA,GAAG,KAAK,EAAE,CAAC;IAClC,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;IAClC,MAAM,CAAC,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC;IAC9B,MAAM,KAAK,GAAmC,EAAE,CAAC;IACjD,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,IAAI,GAAW,CAAC;IAChB,OAAO,CAAC,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC;QAC5C,IAAI,GAAG,GAAG,GAAG;YAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;QACjD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA,uBAAuB,KAAK,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;QACjF,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC;IACvB,CAAC;IACD,IAAI,GAAG,GAAG,KAAK,CAAC,MAAM;QAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACrD,OAAO,IAAI,CAAA,GAAG,KAAK,EAAE,CAAC;AACxB,CAAC"}

package/dist/atoms/searchable-select/index.d.ts

@@ -0,0 +1,2 @@
+export { DsSearchableSelect } from './searchable-select.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/searchable-select/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/searchable-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/atoms/searchable-select/index.js

@@ -0,0 +1,2 @@
+export { DsSearchableSelect } from './searchable-select.js';
+//# sourceMappingURL=index.js.map

package/dist/atoms/searchable-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/searchable-select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/atoms/searchable-select/searchable-select.d.ts

@@ -0,0 +1,53 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+import type { SelectOption } from '../select/select.js';
+declare const DsSearchableSelect_base: typeof DsElement & (new (...args: any[]) => import("@jsekulowicz/ds-core").FormControlHost & DsElement);
+/**
+ * @tag ds-searchable-select
+ * @summary Combobox with a text search input. Emits ds-search so the consumer can filter options.
+ * @event ds-search - Fires on every keystroke. Detail: `{ query: string }`.
+ * @event ds-change - Fires when selection changes. Detail: `{ value }` or `{ values }` when multiple.
+ * @csspart trigger - The trigger container element.
+ * @csspart listbox - The dropdown listbox container.
+ * @csspart option - Each individual option item.
+ */
+export declare class DsSearchableSelect extends DsSearchableSelect_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static shadowRootOptions: ShadowRootInit;
+    options: SelectOption[];
+    placeholder: string;
+    searchPlaceholder: string;
+    label: string;
+    description: string;
+    error: string;
+    invalid: boolean;
+    multiple: boolean;
+    clearable: boolean;
+    loading: boolean;
+    values: string[];
+    maxLines?: number;
+    private _search;
+    private _labelMap;
+    private _listboxEl?;
+    private _tilesEl?;
+    private _inputEl?;
+    get _open(): boolean;
+    get _focusedIndex(): number;
+    set _focusedIndex(value: number);
+    get _focusedTileIndex(): number;
+    set _focusedTileIndex(value: number);
+    get _scrollTop(): number;
+    set _scrollTop(value: number);
+    get _hasLeading(): boolean;
+    get _overflowCount(): number;
+    get _overflowCheckQueued(): boolean;
+    set _overflowCheckQueued(value: boolean);
+    willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=searchable-select.d.ts.map

package/dist/atoms/searchable-select/searchable-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchable-select.d.ts","sourceRoot":"","sources":["../../../src/atoms/searchable-select/searchable-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1F,OAAO,EAAE,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AAYnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;;AAExD;;;;;;;;GAQG;AACH,qBAAa,kBAAmB,SAAQ,uBAA2B;;IACjE,OAAgB,MAAM,4BAAkE;IACxF,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEyB,OAAO,EAAE,YAAY,EAAE,CAAM;IAC5C,WAAW,SAAM;IACkB,iBAAiB,SAAa;IACjE,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACqB,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,SAAS,UAAS;IAClB,OAAO,UAAS;IACjC,MAAM,EAAE,MAAM,EAAE,CAAM;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAErC,OAAO,CAAC,OAAO,CAAM;IAE9B,OAAO,CAAC,SAAS,CAA6B;IAE3B,OAAO,CAAC,UAAU,CAAC,CAAc;IACnC,OAAO,CAAC,QAAQ,CAAC,CAAc;IACxB,OAAO,CAAC,QAAQ,CAAC,CAAmB;IA0B5D,IAAI,KAAK,IAAI,OAAO,CAAgC;IACpD,IAAI,aAAa,IAAI,MAAM,CAAwC;IACnE,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,EAA0C;IACzE,IAAI,iBAAiB,IAAI,MAAM,CAA4C;IAC3E,IAAI,iBAAiB,CAAC,KAAK,EAAE,MAAM,EAA8C;IACjF,IAAI,UAAU,IAAI,MAAM,CAAqC;IAC7D,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAAuC;IACnE,IAAI,WAAW,IAAI,OAAO,CAAsC;IAChE,IAAI,cAAc,IAAI,MAAM,CAAyC;IACrE,IAAI,oBAAoB,IAAI,OAAO,CAA+C;IAClF,IAAI,oBAAoB,CAAC,KAAK,EAAE,OAAO,EAAiD;IAE/E,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAMzC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAYtC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAqG5B,MAAM,IAAI,cAAc;CAsFlC"}

package/dist/atoms/searchable-select/searchable-select.js

@@ -0,0 +1,338 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 { html, nothing, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { DsElement, FormControlMixin } from '@jsekulowicz/ds-core';
+import { formFieldStyles, renderFieldLabel, renderSubtext } from '../../shared/form-field.js';
+import { renderVirtualItems } from '../../shared/virtual-list.js';
+import { renderChevronDownIcon, renderClearButton, renderSelectedTiles, } from '../select/select.shared.js';
+import { DropdownController } from '../select/dropdown-controller.js';
+import { clearKeydown, dropdownKeydown } from '../select/dropdown-keydown.js';
+import { searchableSelectStyles } from './searchable-select.styles.js';
+import { highlightMatch } from './highlight-match.js';
+/**
+ * @tag ds-searchable-select
+ * @summary Combobox with a text search input. Emits ds-search so the consumer can filter options.
+ * @event ds-search - Fires on every keystroke. Detail: `{ query: string }`.
+ * @event ds-change - Fires when selection changes. Detail: `{ value }` or `{ values }` when multiple.
+ * @csspart trigger - The trigger container element.
+ * @csspart listbox - The dropdown listbox container.
+ * @csspart option - Each individual option item.
+ */
+export class DsSearchableSelect extends FormControlMixin(DsElement) {
+    constructor() {
+        super(...arguments);
+        this.options = [];
+        this.placeholder = '';
+        this.searchPlaceholder = 'Search…';
+        this.label = '';
+        this.description = '';
+        this.error = '';
+        this.invalid = false;
+        this.multiple = false;
+        this.clearable = false;
+        this.loading = false;
+        this.values = [];
+        this._search = '';
+        this._labelMap = new Map();
+        this.#dropdown = new DropdownController(this, {
+            getOptions: () => this.options,
+            getCurrentValue: () => (typeof this.value === 'string' ? this.value : ''),
+            getValues: () => this.values,
+            getMultiple: () => this.multiple,
+            getMaxLines: () => this.maxLines,
+            getTilesEl: () => this._tilesEl,
+            getListboxEl: () => this._listboxEl,
+            applyValues: (next) => {
+                this.values = next;
+                this.value = next.join(',');
+                this.emit('ds-change', { detail: { values: next } });
+            },
+            canOpen: () => !this.loading,
+            onOpen: () => {
+                this._search = '';
+            },
+            onClose: () => {
+                this._search = '';
+                this.emit('ds-search', { detail: { query: '' } });
+            },
+        });
+        this.#onFocus = () => {
+            if (!this.disabled && !this.loading && !this.#dropdown.open)
+                this.#dropdown.openDropdown();
+        };
+        this.#onSearchInput = (event) => {
+            this._search = event.target.value;
+            this.#dropdown.focusedIndex = 0;
+            this.emit('ds-search', { detail: { query: this._search } });
+        };
+        this.#selectOption = (option) => {
+            if (option.disabled)
+                return;
+            if (this.multiple) {
+                const next = this.values.includes(option.value)
+                    ? this.values.filter((v) => v !== option.value)
+                    : [...this.values, option.value];
+                this.values = next;
+                this.value = next.join(',');
+                this._search = '';
+                this.emit('ds-search', { detail: { query: '' } });
+                this.emit('ds-change', { detail: { values: next } });
+            }
+            else {
+                this.value = option.value;
+                this.invalid = this.required && !option.value;
+                this.setValidity(this.invalid ? { valueMissing: true } : {}, this.invalid ? 'Please select an option.' : '');
+                this.emit('ds-change', { detail: { value: option.value } });
+                this.#dropdown.close();
+            }
+        };
+        this.#clear = () => {
+            if (this.multiple) {
+                this.values = [];
+                this.value = '';
+                this.emit('ds-change', { detail: { values: [] } });
+            }
+            else {
+                this.value = '';
+                this._search = '';
+                this.emit('ds-search', { detail: { query: '' } });
+                this.emit('ds-change', { detail: { value: '' } });
+            }
+        };
+        this.#onClearKeydown = (event) => clearKeydown(event, this.#clear);
+        this.#onKeydown = (event) => {
+            if (this.disabled)
+                return;
+            if (dropdownKeydown(event, {
+                controller: this.#dropdown,
+                multiple: this.multiple,
+                options: this.options,
+                values: this.values,
+                selectOption: this.#selectOption,
+                tileArrowLeftGate: () => this._inputEl?.selectionStart === 0,
+            }) === 'handled') {
+                return;
+            }
+            if (!this.#dropdown.open && event.key === 'ArrowDown') {
+                this.#dropdown.openDropdown();
+            }
+        };
+        this.#renderTiles = () => renderSelectedTiles({
+            values: this.values,
+            focusedTileIndex: this.#dropdown.focusedTileIndex,
+            overflowCount: this.#dropdown.overflowCount,
+            maxLines: this.maxLines,
+            labelFor: (value) => this._labelMap.get(value) ?? value,
+            onRemove: this.#dropdown.removeTile,
+        });
+        this.#renderOption = (option, index, current) => {
+            const isSelected = this.multiple
+                ? this.values.includes(option.value)
+                : option.value === current;
+            return html `<ds-select-option
+      id="option-${index}"
+      part="option"
+      .value=${option.value}
+      ?selected=${isSelected}
+      ?active=${this.#dropdown.focusedIndex === index}
+      ?disabled=${option.disabled ?? false}
+      @click=${() => this.#selectOption(option)}
+      @mouseenter=${() => {
+                this.#dropdown.focusedIndex = index;
+            }}
+      >${highlightMatch(option.label, this._search)}</ds-select-option
+    >`;
+        };
+    }
+    static { this.styles = [...DsElement.styles, formFieldStyles, searchableSelectStyles]; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    #dropdown;
+    /* test-facing forwarders to controller state */
+    get _open() { return this.#dropdown.open; }
+    get _focusedIndex() { return this.#dropdown.focusedIndex; }
+    set _focusedIndex(value) { this.#dropdown.focusedIndex = value; }
+    get _focusedTileIndex() { return this.#dropdown.focusedTileIndex; }
+    set _focusedTileIndex(value) { this.#dropdown.focusedTileIndex = value; }
+    get _scrollTop() { return this.#dropdown.scrollTop; }
+    set _scrollTop(value) { this.#dropdown.scrollTop = value; }
+    get _hasLeading() { return this.#dropdown.hasLeading; }
+    get _overflowCount() { return this.#dropdown.overflowCount; }
+    get _overflowCheckQueued() { return this.#dropdown.overflowCheckQueued; }
+    set _overflowCheckQueued(value) { this.#dropdown.overflowCheckQueued = value; }
+    willUpdate(changed) {
+        if (changed.has('options')) {
+            for (const o of this.options)
+                this._labelMap.set(o.value, o.label);
+        }
+    }
+    updated(changed) {
+        if (changed.has('label'))
+            this.setAriaLabel(this.label || null);
+        if (changed.has('description'))
+            this.setAriaDescription(this.description || null);
+        if ((changed.has('values') || changed.has('maxLines') || changed.has('multiple')) &&
+            this.multiple) {
+            this.#dropdown.queueOverflowCheck();
+        }
+        this.#dropdown.syncScrollTop();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.label)
+            console.warn('<ds-searchable-select>: the `label` property is required for accessibility.');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#dropdown.close();
+    }
+    #onFocus;
+    #onSearchInput;
+    #selectOption;
+    #clear;
+    #onClearKeydown;
+    #onKeydown;
+    #renderTiles;
+    #renderOption;
+    render() {
+        const current = typeof this.value === 'string' ? this.value : '';
+        const open = this.#dropdown.open;
+        const hasTiles = this.multiple && this.values.length > 0;
+        const hasClearBtn = (this.clearable || this.required) &&
+            (this.multiple ? this.values.length > 0 : current !== '');
+        const displayValue = open
+            ? this._search
+            : !this.multiple
+                ? (this._labelMap.get(current) ?? '')
+                : '';
+        const activeDesc = open && this.#dropdown.focusedIndex >= 0 ? `option-${this.#dropdown.focusedIndex}` : undefined;
+        return html ` ${renderFieldLabel(this.label, this.required, 'search-input')}
+      <div class="control-wrap">
+        <div
+          class="trigger${this.multiple ? ' trigger-multiple' : ''} ${open ? 'open' : ''}"
+          part="trigger"
+          @click=${() => {
+            if (!this.disabled)
+                this.#dropdown.openDropdown();
+        }}
+        >
+          <span class="leading" ?hidden=${!this.#dropdown.hasLeading}>
+            <slot name="leading" @slotchange=${this.#dropdown.onLeadingChange}></slot>
+          </span>
+          ${hasTiles ? this.#renderTiles() : nothing}
+          <input
+            id="search-input"
+            class="search-input"
+            type="text"
+            role="combobox"
+            aria-haspopup="listbox"
+            aria-expanded=${open ? 'true' : 'false'}
+            aria-controls="listbox"
+            aria-autocomplete="list"
+            aria-activedescendant=${ifDefined(activeDesc)}
+            aria-disabled=${this.disabled ? 'true' : 'false'}
+            .value=${live(displayValue)}
+            placeholder=${open ? this.searchPlaceholder : hasTiles ? '' : this.placeholder}
+            ?readonly=${this.disabled}
+            @focus=${this.#onFocus}
+            @input=${this.#onSearchInput}
+            @keydown=${this.#onKeydown}
+          />
+          ${hasClearBtn
+            ? renderClearButton((event) => {
+                event.stopPropagation();
+                this.#clear();
+            }, this.#onClearKeydown)
+            : nothing}
+          ${this.loading
+            ? html ` <svg class="spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="9"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-dasharray="56.55"
+                  stroke-dashoffset="14.14"
+                />
+              </svg>`
+            : renderChevronDownIcon()}
+        </div>
+        ${open
+            ? html ` <div
+              id="listbox"
+              class="listbox"
+              part="listbox"
+              role="listbox"
+              aria-multiselectable=${this.multiple ? 'true' : 'false'}
+              @scroll=${this.#dropdown.onScroll}
+              @ds-activate=${(event) => event.stopPropagation()}
+            >
+              ${this.options.length === 0
+                ? html `<p class="empty">No results found.</p>`
+                : renderVirtualItems(this.options, this.#dropdown.scrollTop, (option, index) => this.#renderOption(option, index, current))}
+            </div>`
+            : nothing}
+      </div>
+      ${renderSubtext(this.description, this.error, this.invalid)}`;
+    }
+}
+__decorate([
+    property({ type: Array })
+], DsSearchableSelect.prototype, "options", void 0);
+__decorate([
+    property()
+], DsSearchableSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ attribute: 'search-placeholder' })
+], DsSearchableSelect.prototype, "searchPlaceholder", void 0);
+__decorate([
+    property()
+], DsSearchableSelect.prototype, "label", void 0);
+__decorate([
+    property()
+], DsSearchableSelect.prototype, "description", void 0);
+__decorate([
+    property()
+], DsSearchableSelect.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsSearchableSelect.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsSearchableSelect.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsSearchableSelect.prototype, "clearable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsSearchableSelect.prototype, "loading", void 0);
+__decorate([
+    property({ type: Array })
+], DsSearchableSelect.prototype, "values", void 0);
+__decorate([
+    property({ type: Number })
+], DsSearchableSelect.prototype, "maxLines", void 0);
+__decorate([
+    state()
+], DsSearchableSelect.prototype, "_search", void 0);
+__decorate([
+    query('.listbox')
+], DsSearchableSelect.prototype, "_listboxEl", void 0);
+__decorate([
+    query('.tiles')
+], DsSearchableSelect.prototype, "_tilesEl", void 0);
+__decorate([
+    query('.search-input')
+], DsSearchableSelect.prototype, "_inputEl", void 0);
+//# sourceMappingURL=searchable-select.js.map