@jsekulowicz/ds-components 0.1.0

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

@@ -0,0 +1,92 @@
+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 } from 'lit/decorators.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { selectOptionStyles } from './select-option.styles.js';
+/**
+ * @tag ds-select-option
+ * @summary The row element rendered by `ds-select` and `ds-searchable-select` for each option.
+ * @slot leading - Icon, avatar, or image rendered before the primary text.
+ * @slot default - Primary text.
+ * @slot description - Optional secondary line below the primary text.
+ * @slot trailing - Trailing content (badge, shortcut).
+ * @csspart check - The checkmark icon shown when `selected`.
+ * @event ds-activate - Fires when the option is activated. Detail: `{ value, originalEvent }`.
+ */
+export class DsSelectOption extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.value = '';
+        this.disabled = false;
+        this.selected = false;
+        this.active = false;
+        this.#onClick = (event) => {
+            if (this.disabled) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                return;
+            }
+            this.emit('ds-activate', { detail: { value: this.value, originalEvent: event } });
+        };
+    }
+    static { this.styles = [...DsElement.styles, selectOptionStyles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'option');
+        this.addEventListener('click', this.#onClick);
+    }
+    updated(changed) {
+        if (changed.has('disabled')) {
+            this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+        }
+        if (changed.has('selected')) {
+            this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
+        }
+    }
+    #onClick;
+    render() {
+        return html `<span class="leading"><slot name="leading"></slot></span>
+      <span class="content">
+        <span class="primary"><slot></slot></span>
+        <span class="description"><slot name="description"></slot></span>
+      </span>
+      <span class="trailing">
+        ${this.selected ? this.#renderCheck() : nothing}
+        <slot name="trailing"></slot>
+      </span>`;
+    }
+    #renderCheck() {
+        return html `<svg
+      class="check"
+      part="check"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
+        clip-rule="evenodd"
+      />
+    </svg>`;
+    }
+}
+__decorate([
+    property()
+], DsSelectOption.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsSelectOption.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsSelectOption.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsSelectOption.prototype, "active", void 0);
+//# sourceMappingURL=select-option.js.map

package/dist/atoms/select/select-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-option.js","sourceRoot":"","sources":["../../../src/atoms/select/select-option.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAA4C,MAAM,KAAK,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D;;;;;;;;;GASG;AACH,MAAM,OAAO,cAAe,SAAQ,SAAS;IAA7C;;QAGc,UAAK,GAAG,EAAE,CAAC;QACqB,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QACjB,WAAM,GAAG,KAAK,CAAC;QAiB3D,aAAQ,GAAG,CAAC,KAAiB,EAAQ,EAAE;YACrC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;gBACjC,OAAO;YACT,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QACpF,CAAC,CAAC;IA6BJ,CAAC;aA1DiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,kBAAkB,CAAC,AAA5C,CAA6C;IAO1D,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;QACpE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,CAAC;IAEQ,OAAO,CAAC,OAAuB;QACtC,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACvE,CAAC;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC5B,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACvE,CAAC;IACH,CAAC;IAED,QAAQ,CAON;IAEO,MAAM;QACb,OAAO,IAAI,CAAA;;;;;;UAML,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,OAAO;;cAEzC,CAAC;IACb,CAAC;IAED,YAAY;QACV,OAAO,IAAI,CAAA;;;;;;;;;;;;WAYJ,CAAC;IACV,CAAC;;AAvDW;IAAX,QAAQ,EAAE;6CAAY;AACqB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAgB"}

package/dist/atoms/select/select-option.styles.d.ts

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

package/dist/atoms/select/select-option.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-option.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/select/select-option.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBAiE9B,CAAC"}

package/dist/atoms/select/select-option.styles.js

@@ -0,0 +1,68 @@
+import { css } from 'lit';
+export const selectOptionStyles = css `
+  :host {
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-2);
+    height: 36px; /* must match ITEM_HEIGHT constant in virtual-list.ts */
+    box-sizing: border-box;
+    padding: 0 var(--ds-space-3);
+    cursor: pointer;
+    font-family: var(--ds-font-body);
+    font-size: var(--ds-font-size-sm);
+    color: var(--ds-color-fg);
+  }
+  :host(:hover),
+  :host([active]) {
+    background: var(--ds-color-bg-subtle);
+  }
+  :host([selected]) {
+    background: var(--ds-color-accent-subtle);
+  }
+  :host([selected][active]),
+  :host([selected]:hover) {
+    background: var(--ds-color-bg-subtle);
+  }
+  :host([disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .leading,
+  .trailing {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: var(--ds-color-fg-subtle, var(--ds-color-fg));
+  }
+  .leading:empty,
+  .trailing:empty {
+    display: none;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+  }
+  .primary {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .description {
+    display: block;
+    font-size: var(--ds-font-size-2xs);
+    color: var(--ds-color-fg-subtle, var(--ds-color-fg));
+  }
+  .description:empty {
+    display: none;
+  }
+  .check {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: var(--ds-color-accent);
+  }
+`;
+//# sourceMappingURL=select-option.styles.js.map

package/dist/atoms/select/select-option.styles.js.map

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

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

@@ -0,0 +1,50 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+declare const DsSelect_base: typeof DsElement & (new (...args: any[]) => import("@jsekulowicz/ds-core").FormControlHost & DsElement);
+/**
+ * @tag ds-select
+ * @summary Custom dropdown selector with label, description and validation feedback.
+ * @event ds-change - Fires when selection changes. Detail: `{ value }` or `{ values }` when multiple.
+ * @csspart trigger - The trigger button element.
+ * @csspart listbox - The dropdown listbox container.
+ * @csspart option - Each individual option item.
+ */
+export declare class DsSelect extends DsSelect_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    static shadowRootOptions: ShadowRootInit;
+    options: SelectOption[];
+    placeholder: string;
+    label: string;
+    description: string;
+    error: string;
+    invalid: boolean;
+    multiple: boolean;
+    clearable: boolean;
+    values: string[];
+    maxLines?: number;
+    private _listboxEl?;
+    private _tilesEl?;
+    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);
+    updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/atoms/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1F,OAAO,EAAE,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AAYnE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;;AAED;;;;;;;GAOG;AACH,qBAAa,QAAS,SAAQ,aAA2B;;IACvD,OAAgB,MAAM,4BAAwD;IAC9E,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEyB,OAAO,EAAE,YAAY,EAAE,CAAM;IAC5C,WAAW,SAAM;IACjB,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,KAAK,SAAM;IACqB,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjB,SAAS,UAAS;IACnC,MAAM,EAAE,MAAM,EAAE,CAAM;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B,OAAO,CAAC,UAAU,CAAC,CAAc;IACnC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAkBhD,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,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAYtC,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IA2F5B,MAAM,IAAI,cAAc;CAkElC"}

package/dist/atoms/select/select.js

@@ -0,0 +1,273 @@
+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 } from 'lit/decorators.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.shared.js';
+import { DropdownController } from './dropdown-controller.js';
+import { clearKeydown, dropdownKeydown } from './dropdown-keydown.js';
+import { selectStyles } from './select.styles.js';
+/**
+ * @tag ds-select
+ * @summary Custom dropdown selector with label, description and validation feedback.
+ * @event ds-change - Fires when selection changes. Detail: `{ value }` or `{ values }` when multiple.
+ * @csspart trigger - The trigger button element.
+ * @csspart listbox - The dropdown listbox container.
+ * @csspart option - Each individual option item.
+ */
+export class DsSelect extends FormControlMixin(DsElement) {
+    constructor() {
+        super(...arguments);
+        this.options = [];
+        this.placeholder = '';
+        this.label = '';
+        this.description = '';
+        this.error = '';
+        this.invalid = false;
+        this.multiple = false;
+        this.clearable = false;
+        this.values = [];
+        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 } });
+            },
+        });
+        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.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.emit('ds-change', { detail: { value: '' } });
+            }
+        };
+        this.#onClearKeydown = (event) => clearKeydown(event, this.#clear);
+        this.#onTriggerKeydown = (event) => {
+            if (this.disabled)
+                return;
+            if (event.target.classList.contains('clear-btn'))
+                return;
+            if (dropdownKeydown(event, {
+                controller: this.#dropdown,
+                multiple: this.multiple,
+                options: this.options,
+                values: this.values,
+                selectOption: this.#selectOption,
+            }) === 'handled') {
+                return;
+            }
+            if (!this.#dropdown.open &&
+                (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ')) {
+                event.preventDefault();
+                this.#dropdown.openDropdown();
+            }
+        };
+        this.#renderTiles = () => renderSelectedTiles({
+            values: this.values,
+            focusedTileIndex: this.#dropdown.focusedTileIndex,
+            overflowCount: this.#dropdown.overflowCount,
+            maxLines: this.maxLines,
+            labelFor: (value) => this.options.find((option) => option.value === value)?.label ?? 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;
+            }}
+      >${option.label}</ds-select-option
+    >`;
+        };
+        this.#toggle = () => {
+            if (this.disabled)
+                return;
+            this.#dropdown.toggle();
+        };
+    }
+    static { this.styles = [...DsElement.styles, formFieldStyles, selectStyles]; }
+    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; }
+    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-select>: the `label` property is required for accessibility.');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.#dropdown.close();
+    }
+    #selectOption;
+    #clear;
+    #onClearKeydown;
+    #onTriggerKeydown;
+    #renderTiles;
+    #renderOption;
+    render() {
+        const current = typeof this.value === 'string' ? this.value : '';
+        const selectedOption = this.options.find((option) => option.value === current);
+        const open = this.#dropdown.open;
+        const activeDesc = open && this.#dropdown.focusedIndex >= 0 ? `option-${this.#dropdown.focusedIndex}` : undefined;
+        const hasTiles = this.multiple && this.values.length > 0;
+        const hasClearBtn = (this.clearable || this.required) &&
+            (this.multiple ? this.values.length > 0 : current !== '');
+        return html ` ${renderFieldLabel(this.label, this.required, 'trigger')}
+      <div class="control-wrap">
+        <div
+          id="trigger"
+          class="trigger${this.multiple ? ' trigger-multiple' : ''}"
+          part="trigger"
+          tabindex=${this.disabled ? '-1' : '0'}
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded=${open ? 'true' : 'false'}
+          aria-controls="listbox"
+          aria-label=${ifDefined(this.label || undefined)}
+          aria-activedescendant=${ifDefined(activeDesc)}
+          aria-disabled=${this.disabled ? 'true' : 'false'}
+          @click=${this.#toggle}
+          @keydown=${this.#onTriggerKeydown}
+        >
+          <span class="leading" ?hidden=${!this.#dropdown.hasLeading}>
+            <slot name="leading" @slotchange=${this.#dropdown.onLeadingChange}></slot>
+          </span>
+          ${hasTiles
+            ? this.#renderTiles()
+            : html ` <span class=${selectedOption ? 'trigger-label' : 'trigger-label placeholder'}>
+                ${selectedOption?.label ?? this.placeholder}
+              </span>`}
+          ${hasClearBtn
+            ? renderClearButton((event) => {
+                event.stopPropagation();
+                this.#clear();
+            }, this.#onClearKeydown)
+            : nothing}
+          ${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()}
+            >
+              ${renderVirtualItems(this.options, this.#dropdown.scrollTop, (option, index) => this.#renderOption(option, index, current))}
+            </div>`
+            : nothing}
+      </div>
+      ${renderSubtext(this.description, this.error, this.invalid)}`;
+    }
+    #toggle;
+}
+__decorate([
+    property({ type: Array })
+], DsSelect.prototype, "options", void 0);
+__decorate([
+    property()
+], DsSelect.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], DsSelect.prototype, "label", void 0);
+__decorate([
+    property()
+], DsSelect.prototype, "description", void 0);
+__decorate([
+    property()
+], DsSelect.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsSelect.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsSelect.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsSelect.prototype, "clearable", void 0);
+__decorate([
+    property({ type: Array })
+], DsSelect.prototype, "values", void 0);
+__decorate([
+    property({ type: Number })
+], DsSelect.prototype, "maxLines", void 0);
+__decorate([
+    query('.listbox')
+], DsSelect.prototype, "_listboxEl", void 0);
+__decorate([
+    query('.tiles')
+], DsSelect.prototype, "_tilesEl", void 0);
+//# sourceMappingURL=select.js.map

package/dist/atoms/select/select.js.map

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

package/dist/atoms/select/select.shared.d.ts

@@ -0,0 +1,26 @@
+import { type TemplateResult } from 'lit';
+export declare const TILE_ROW_HEIGHT = 28;
+type TileDirection = 'left' | 'right';
+interface QueueTaskOptions {
+    isQueued: boolean;
+    setQueued: (value: boolean) => void;
+    task: () => void;
+}
+interface TileListTemplateOptions {
+    values: string[];
+    focusedTileIndex: number;
+    overflowCount: number;
+    maxLines?: number;
+    labelFor: (value: string) => string;
+    onRemove: (value: string) => void;
+}
+export declare function getVisibleTileCount(valueCount: number, overflowCount: number): number;
+export declare function getNextTileFocusIndex(currentIndex: number, visibleCount: number, direction: TileDirection): number;
+export declare function clampTileFocusIndex(currentIndex: number, visibleCount: number): number;
+export declare function countOverflowTiles(tilesElement?: HTMLElement, maxLines?: number): number;
+export declare function queueTaskOnce(options: QueueTaskOptions): void;
+export declare function renderSelectedTiles(options: TileListTemplateOptions): TemplateResult;
+export declare function renderClearButton(onClear: (event: Event) => void, onKeydown: (event: KeyboardEvent) => void): TemplateResult;
+export declare function renderChevronDownIcon(): TemplateResult;
+export {};
+//# sourceMappingURL=select.shared.d.ts.map

package/dist/atoms/select/select.shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.shared.d.ts","sourceRoot":"","sources":["../../../src/atoms/select/select.shared.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtC,UAAU,gBAAgB;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,UAAU,uBAAuB;IAC/B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AASD,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,GAAG,MAAM,CAErF;AAED,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,aAAa,GACvB,MAAM,CAKR;AAED,wBAAgB,mBAAmB,CAAC,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,CAKtF;AAED,wBAAgB,kBAAkB,CAAC,YAAY,CAAC,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAMxF;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAS7D;AAqBD,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,uBAAuB,GAAG,cAAc,CAmBpF;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EAC/B,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GACxC,cAAc,CAIhB;AAED,wBAAgB,qBAAqB,IAAI,cAAc,CAQtD"}

package/dist/atoms/select/select.shared.js

@@ -0,0 +1,92 @@
+import { html, nothing } from 'lit';
+export const TILE_ROW_HEIGHT = 28;
+export function getVisibleTileCount(valueCount, overflowCount) {
+    return Math.max(0, valueCount - overflowCount);
+}
+export function getNextTileFocusIndex(currentIndex, visibleCount, direction) {
+    if (direction === 'left') {
+        return currentIndex <= 0 ? visibleCount - 1 : currentIndex - 1;
+    }
+    return currentIndex >= visibleCount - 1 ? -1 : currentIndex + 1;
+}
+export function clampTileFocusIndex(currentIndex, visibleCount) {
+    if (currentIndex < visibleCount) {
+        return currentIndex;
+    }
+    return Math.max(-1, visibleCount - 1);
+}
+export function countOverflowTiles(tilesElement, maxLines) {
+    if (!maxLines || !tilesElement) {
+        return 0;
+    }
+    const tiles = Array.from(tilesElement.querySelectorAll('.tile[data-value]'));
+    return tiles.filter((tile) => tile.offsetTop >= maxLines * TILE_ROW_HEIGHT).length;
+}
+export function queueTaskOnce(options) {
+    if (options.isQueued) {
+        return;
+    }
+    options.setQueued(true);
+    queueMicrotask(() => {
+        options.setQueued(false);
+        options.task();
+    });
+}
+function renderTile(options) {
+    return html ` <span class="tile${options.isFocused ? ' tile-focused' : ''}" data-value=${options.value}>
+    <span class="tile-label">${options.label}</span>
+    <button
+      class="tile-remove"
+      type="button"
+      tabindex="-1"
+      aria-label="Remove ${options.label}"
+      @pointerdown=${(event) => event.preventDefault()}
+      @click=${(event) => {
+        event.stopPropagation();
+        options.onRemove(options.value);
+    }}
+    >
+      ${renderXMarkIcon()}
+    </button>
+  </span>`;
+}
+export function renderSelectedTiles(options) {
+    const style = options.maxLines
+        ? `max-height:${options.maxLines * TILE_ROW_HEIGHT - 4}px;overflow:hidden`
+        : '';
+    return html ` <div class="tiles" style=${style}>
+    ${options.overflowCount > 0
+        ? html ` <span class="tile tile-overflow" aria-label="${options.overflowCount} more selected">
+          +${options.overflowCount}
+        </span>`
+        : nothing}
+    ${options.values.map((value, index) => renderTile({
+        value,
+        label: options.labelFor(value),
+        isFocused: options.focusedTileIndex === index,
+        onRemove: options.onRemove,
+    }))}
+  </div>`;
+}
+export function renderClearButton(onClear, onKeydown) {
+    return html ` <button class="clear-btn" type="button" aria-label="Clear selection" @click=${onClear} @keydown=${onKeydown}>
+    ${renderXMarkIcon()}
+  </button>`;
+}
+export function renderChevronDownIcon() {
+    return html `<svg class="caret" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <path
+      fill-rule="evenodd"
+      d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"
+      clip-rule="evenodd"
+    />
+  </svg>`;
+}
+function renderXMarkIcon() {
+    return html `<svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <path
+      d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
+    />
+  </svg>`;
+}
+//# sourceMappingURL=select.shared.js.map

package/dist/atoms/select/select.shared.js.map

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

package/dist/atoms/select/select.styles.d.ts

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