@aceshooting/lyra-ui 1.0.1 → 1.1.0

package/dist/components/select/select.js

@@ -0,0 +1,516 @@
+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 } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { place } from '../../internal/positioner.js';
+import { nextId } from '../../internal/a11y.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { styles } from './select.styles.js';
+import { LyraOption } from '../combobox/option.js';
+import '../combobox/option.js';
+/**
+ * `<lyra-select>` — a plain closed-list dropdown: a direct `<lyra-*>`
+ * counterpart to `<wa-select>`/`<wa-option>`. Trigger is a button (not a text
+ * input) -- click/Enter/Space/ArrowDown opens it, there's no typing-to-filter.
+ * A printable keypress instead jumps (or, while closed, directly selects) the
+ * next option whose label starts with what's been typed, like a native
+ * `<select>`'s type-ahead.
+ *
+ * Options are `<lyra-option value>` children, the same element `<lyra-combobox>`
+ * uses. Unlike `lyra-combobox` this is single-select only, with no filter/
+ * source/with-clear/max-options-visible/empty-text/max-render/multiple surface
+ * -- see `<lyra-combobox>` for the filterable/multi-select case.
+ *
+ * Reuses `lyra-combobox`'s popup positioning (`internal/positioner.js`) and
+ * click-outside/Escape/Home/End/Arrow-key listbox navigation patterns,
+ * adapted to a trigger button that keeps DOM focus throughout (the listbox's
+ * "active" row is conveyed via `aria-activedescendant`, never actual focus),
+ * matching the WAI-ARIA "select-only combobox" pattern.
+ *
+ * @customElement lyra-select
+ * @slot - `<lyra-option>` elements.
+ * @slot label - Custom label content.
+ * @slot hint - Custom hint content.
+ * @slot error - Custom error content.
+ * @event change - The selection changed.
+ * @event input - Fired alongside `change` on every selection change (native
+ *   `<select>` doesn't meaningfully distinguish the two either).
+ * @event lyra-show - The listbox opened.
+ * @event lyra-hide - The listbox closed.
+ * @csspart form-control - The outer wrapper around label, trigger, listbox, error and hint.
+ * @csspart form-control-label - The `<label>` element.
+ * @csspart trigger - The trigger button (positioning anchor).
+ * @csspart listbox - The options popover.
+ * @csspart option - An option row.
+ * @csspart option-dot - An option row's leading status dot (when `dot-color` is set).
+ * @csspart option-label - An option row's label/sub wrapper.
+ * @csspart option-sub - An option row's secondary line (when `sub` is set).
+ * @csspart expand-icon - The dropdown indicator.
+ * @csspart error - The error message.
+ * @csspart hint - The hint message.
+ */
+export class LyraSelect extends LyraElement {
+    static { this.formAssociated = true; }
+    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.properties = {
+        value: { noAccessor: true },
+    }; }
+    constructor() {
+        super();
+        this.placeholder = '';
+        this.disabled = false;
+        this.required = false;
+        this.name = '';
+        this.label = '';
+        this.hint = '';
+        this.errorText = '';
+        this.open = false;
+        this.activeIndex = -1;
+        this.options = [];
+        // Set on the trigger button's first `blur`; gates the `data-invalid`
+        // reflection below so validity styling never flashes on first render.
+        this.touched = false;
+        // `[part]:empty` never matches -- the part always contains a literal
+        // `<slot>` child element regardless of assigned content -- so real
+        // emptiness is tracked in JS instead (same fix as lyra-combobox's
+        // hasHintSlot/hasErrorSlot/hasLabelSlot) and reflected via `hidden`.
+        this.hasHintSlot = false;
+        this.hasErrorSlot = false;
+        this.hasLabelSlot = false;
+        this.listId = nextId('select-list');
+        this.triggerId = nextId('select-trigger');
+        this._isFirstUpdate = true;
+        this._selected = '';
+        // What `form.reset()` restores to. Captured exactly once, from whatever
+        // `<lyra-option selected>` markup was present the first time slotted
+        // options are collected (mirrors native `<select><option selected>`) --
+        // never from the `value` setter, so a user picking an option (even the
+        // very first pick on an initially-unselected select) can't itself become
+        // the reset default. See lyra-combobox's identical `_defaultSelected`.
+        this._defaultSelected = '';
+        this._defaultCaptured = false;
+        // Standard listbox type-ahead: printable keystrokes accumulate into this
+        // buffer and reset ~500ms after the last one, so "b" then "a" narrows to
+        // "ba" instead of restarting the search on every keystroke.
+        this.typeAheadBuffer = '';
+        this.collectOptions = (e) => {
+            const slot = e.target;
+            const previous = new Set(this.options);
+            this.options = slot
+                .assignedElements({ flatten: true })
+                .filter((el) => el instanceof LyraOption);
+            if (!this._defaultCaptured) {
+                this._defaultCaptured = true;
+                // Seed the initial selection -- and the reset default -- from
+                // declarative `<lyra-option selected>` markup, mirroring native
+                // `<select><option selected>`. Only the *first* declared-selected
+                // option matters when several declare it, mirroring lyra-combobox's
+                // single-mode behavior. This is the only place `_defaultSelected` is
+                // set; picking an option later (the `value` setter) never redefines
+                // the reset default.
+                const declared = this.options.filter((o) => o.selected).map((o) => o.value);
+                this._defaultSelected = declared[0] ?? '';
+                if (declared.length) {
+                    this.value = declared[0];
+                    return; // `value=`'s setter already called reflectSelected()
+                }
+            }
+            else {
+                // Options slotted in after the first pass (e.g. a lazily-populated
+                // list appended post-connect) still declare selection the same way a
+                // native `<select><option selected>` would -- seed the newest one
+                // into the live selection instead of letting reflectSelected() below
+                // strip its `selected` attribute back off.
+                const newlySelected = this.options.filter((o) => !previous.has(o) && o.selected).map((o) => o.value);
+                if (newlySelected.length) {
+                    this.value = newlySelected[newlySelected.length - 1];
+                    return; // `value=`'s setter already called reflectSelected()
+                }
+            }
+            this.reflectSelected();
+        };
+        this.onDocPointer = (e) => {
+            if (!e.composedPath().includes(this))
+                this.hide();
+        };
+        this.onTriggerClick = () => {
+            if (this.disabled)
+                return;
+            this.open ? this.hide() : this.show();
+        };
+        this.onTriggerBlur = () => {
+            this.touched = true;
+            // A mouse click outside the element is already handled by
+            // onDocPointer/hide(), but that leaves keyboard users with no way to
+            // dismiss the listbox short of Escape -- tabbing focus away from the
+            // trigger should close it too, the same as lyra-combobox's input blur.
+            this.hide();
+        };
+        this.onHintSlotChange = (e) => {
+            this.hasHintSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onErrorSlotChange = (e) => {
+            this.hasErrorSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onLabelSlotChange = (e) => {
+            this.hasLabelSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onKeyDown = (e) => {
+            const navigable = this.options.filter((o) => !o.disabled);
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.min(navigable.length - 1, this.activeIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.max(0, this.activeIndex - 1);
+                    break;
+                case 'Enter':
+                case ' ':
+                    // When closed, let the button's native Enter/Space activation fire
+                    // its own `click` handler (onTriggerClick) to open -- only intercept
+                    // here to commit/dismiss while already open, so that synthesized
+                    // click doesn't also re-toggle it shut.
+                    if (this.open) {
+                        e.preventDefault();
+                        if (this.activeIndex >= 0 && navigable[this.activeIndex]) {
+                            this.selectOption(navigable[this.activeIndex]);
+                        }
+                        else {
+                            this.hide();
+                        }
+                    }
+                    break;
+                case 'Escape':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.hide();
+                    }
+                    break;
+                case 'Home':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = 0;
+                    }
+                    break;
+                case 'End':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.activeIndex = navigable.length - 1;
+                    }
+                    break;
+                default:
+                    if (e.key.length === 1 && !e.altKey && !e.ctrlKey && !e.metaKey) {
+                        this.typeAhead(e.key);
+                    }
+                    break;
+            }
+        };
+        // Delegated onto [part="listbox"] (see render()) rather than one closure
+        // pair allocated per option per render -- resolves the target row via
+        // closest('[part="option"]') + a data-value lookup, mirroring lyra-combobox.
+        this.onListboxMouseDown = (e) => {
+            if (e.target.closest('[part="option"]'))
+                e.preventDefault();
+        };
+        this.onListboxClick = (e) => {
+            const optionEl = e.target.closest('[part="option"]');
+            const value = optionEl?.dataset.value;
+            if (value === undefined)
+                return;
+            const option = this.options.find((o) => o.value === value);
+            if (option)
+                this.selectOption(option);
+        };
+        this.internals = this.attachInternals();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateValidity();
+    }
+    willUpdate() {
+        // `hasUpdated` flips to `true` before `updated()` even sees its first
+        // call, so it can't distinguish "just mounted" from "just changed" there
+        // -- capture that distinction here, while it's still reliable, for
+        // `updated()`'s `open`-handling below to consult.
+        this._isFirstUpdate = !this.hasUpdated;
+        if (!this.hasUpdated) {
+            this.hasHintSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'hint');
+            this.hasErrorSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'error');
+            this.hasLabelSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'label');
+        }
+    }
+    /** The selected value: a single string (empty when nothing is selected). */
+    get value() {
+        return this._selected;
+    }
+    set value(next) {
+        const old = this._selected;
+        this._selected = next ?? '';
+        this.syncFormValue();
+        this.reflectSelected();
+        this.updateValidity();
+        this.requestUpdate('value', old);
+    }
+    updateValidity() {
+        if (this.required && !this._selected) {
+            this.internals.setValidity({ valueMissing: true }, 'Please select an option.');
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    syncFormValue() {
+        this.internals.setFormValue(this._selected);
+    }
+    formResetCallback() {
+        this.value = this._defaultSelected;
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanup?.();
+        clearTimeout(this.typeAheadTimer);
+        document.removeEventListener('pointerdown', this.onDocPointer);
+    }
+    reflectSelected() {
+        for (const o of this.options)
+            o.selected = o.value === this._selected;
+    }
+    show() {
+        if (this.open || this.disabled)
+            return;
+        this.open = true;
+    }
+    hide() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.activeIndex = -1;
+    }
+    updated(changed) {
+        if (changed.has('open')) {
+            this.cleanup?.();
+            this.cleanup = undefined;
+            // All `open`-driven side effects (positioning, the click-outside
+            // listener, and the lyra-show/lyra-hide events) live here rather than
+            // in show()/hide() so they fire however `open` became true -- via
+            // show()/hide()'s own user-interaction paths, or a consumer/test
+            // setting `el.open` directly, which bypasses both entirely.
+            if (this.open) {
+                document.addEventListener('pointerdown', this.onDocPointer);
+                // Don't announce a "show" transition for markup that's simply
+                // rendering open for the first time (e.g. `<lyra-select open>`) --
+                // only for an actual closed-to-open transition.
+                if (!this._isFirstUpdate)
+                    this.emit('lyra-show');
+                const anchor = this.renderRoot.querySelector('[part="trigger"]');
+                const listbox = this.renderRoot.querySelector('[part="listbox"]');
+                if (anchor && listbox)
+                    this.cleanup = place(anchor, listbox);
+            }
+            else {
+                document.removeEventListener('pointerdown', this.onDocPointer);
+                if (!this._isFirstUpdate)
+                    this.emit('lyra-hide');
+            }
+        }
+        if (changed.has('required'))
+            this.updateValidity();
+        if (changed.has('touched') || changed.has('required') || changed.has('value')) {
+            this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
+        }
+    }
+    selectOption(option) {
+        if (option.disabled)
+            return;
+        this.value = option.value;
+        this.hide();
+        this.emit('input');
+        this.emit('change');
+    }
+    /**
+     * Standard listbox type-ahead: moves to the next non-disabled option whose
+     * label starts with the accumulated buffer, cycling from just after the
+     * "current" option (the active row while open, the selected value while
+     * closed). While open this only moves `activeIndex` (a highlight, matching
+     * Arrow-key nav -- Enter/click still commits it); while closed there's no
+     * highlight to show, so it commits immediately, matching a native
+     * `<select>`'s closed-state type-ahead.
+     */
+    typeAhead(char) {
+        clearTimeout(this.typeAheadTimer);
+        this.typeAheadBuffer += char.toLowerCase();
+        this.typeAheadTimer = setTimeout(() => {
+            this.typeAheadBuffer = '';
+        }, 500);
+        const navigable = this.options.filter((o) => !o.disabled);
+        if (!navigable.length)
+            return;
+        const currentValue = this.open ? navigable[this.activeIndex]?.value : this._selected;
+        const currentIndex = navigable.findIndex((o) => o.value === currentValue);
+        const n = navigable.length;
+        for (let step = 1; step <= n; step++) {
+            const idx = (currentIndex + step + n) % n;
+            const candidate = navigable[idx];
+            if (candidate.label.toLowerCase().startsWith(this.typeAheadBuffer)) {
+                if (this.open) {
+                    this.activeIndex = idx;
+                }
+                else {
+                    this.selectOption(candidate);
+                }
+                return;
+            }
+        }
+    }
+    renderRows(options, activeId) {
+        const out = [];
+        let currentGroup;
+        options.forEach((o, i) => {
+            if (o.group !== currentGroup) {
+                currentGroup = o.group;
+                if (currentGroup)
+                    out.push(html `<div class="group-label">${currentGroup}</div>`);
+            }
+            const id = `${this.listId}-opt-${i}`;
+            const selected = o.value === this._selected;
+            out.push(html `<div
+          part="option"
+          id=${id}
+          role="option"
+          data-value=${o.value}
+          aria-selected=${selected ? 'true' : 'false'}
+          aria-disabled=${o.disabled ? 'true' : 'false'}
+          ?data-active=${id === activeId}
+        >
+          ${o.dotColor ? html `<span part="option-dot" style=${`background:${o.dotColor}`}></span>` : ''}
+          <span part="option-label">
+            <span>${o.label}</span>
+            ${o.sub ? html `<span part="option-sub">${o.sub}</span>` : ''}
+          </span>
+        </div>`);
+        });
+        return out;
+    }
+    render() {
+        const options = this.options;
+        const navigable = options.filter((o) => !o.disabled);
+        const active = this.activeIndex >= 0 ? navigable[this.activeIndex] : undefined;
+        const activeId = active ? `${this.listId}-opt-${options.indexOf(active)}` : '';
+        const selectedLabel = this._selected
+            ? (options.find((o) => o.value === this._selected)?.label ?? this._selected)
+            : '';
+        const hasValue = this._selected.length > 0;
+        const hasHint = this.hasHintSlot || this.hint.length > 0;
+        const hasError = this.hasErrorSlot || this.errorText.length > 0;
+        const hasLabel = this.hasLabelSlot || this.label.length > 0;
+        return html `
+      <div part="form-control">
+        <label part="form-control-label" for=${this.triggerId} ?hidden=${!hasLabel}>
+          ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>
+        </label>
+        <button
+          id=${this.triggerId}
+          part="trigger"
+          type="button"
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded=${this.open ? 'true' : 'false'}
+          aria-controls=${this.listId}
+          aria-activedescendant=${activeId}
+          aria-label=${this.label || this.placeholder || 'Select'}
+          aria-required=${this.required ? 'true' : 'false'}
+          aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
+          ?disabled=${this.disabled}
+          @click=${this.onTriggerClick}
+          @keydown=${this.onKeyDown}
+          @blur=${this.onTriggerBlur}
+        >
+          <span class="trigger-label" ?data-placeholder=${!hasValue}
+            >${hasValue ? selectedLabel : this.placeholder}</span
+          >
+          <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
+        </button>
+        <div
+          part="listbox"
+          id=${this.listId}
+          role="listbox"
+          @mousedown=${this.onListboxMouseDown}
+          @click=${this.onListboxClick}
+        >
+          ${this.renderRows(options, activeId)}
+        </div>
+        <div part="error" ?hidden=${!hasError}>
+          ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
+        </div>
+        <div part="hint" ?hidden=${!hasHint}>
+          ${this.hint}<slot name="hint" @slotchange=${this.onHintSlotChange}></slot>
+        </div>
+      </div>
+      <slot @slotchange=${this.collectOptions} hidden></slot>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraSelect.prototype, "required", void 0);
+__decorate([
+    property()
+], LyraSelect.prototype, "name", void 0);
+__decorate([
+    property()
+], LyraSelect.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraSelect.prototype, "hint", void 0);
+__decorate([
+    property({ attribute: 'error-text' })
+], LyraSelect.prototype, "errorText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraSelect.prototype, "open", void 0);
+__decorate([
+    state()
+], LyraSelect.prototype, "activeIndex", void 0);
+__decorate([
+    state()
+], LyraSelect.prototype, "options", void 0);
+__decorate([
+    state()
+], LyraSelect.prototype, "touched", void 0);
+__decorate([
+    state()
+], LyraSelect.prototype, "hasHintSlot", void 0);
+__decorate([
+    state()
+], LyraSelect.prototype, "hasErrorSlot", void 0);
+__decorate([
+    state()
+], LyraSelect.prototype, "hasLabelSlot", void 0);
+defineElement('select', LyraSelect);

package/dist/components/select/select.stories.d.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+/** `<lyra-option selected>` seeds the initial value, mirroring `<option selected>`. */
+export declare const PreSelectedValue: Story;
+/**
+ * Rows come from `<lyra-option>` children plus `group` (section headers),
+ * `sub` (a secondary line), and `dot-color` (a leading status dot) — same
+ * rich-row support as `<lyra-combobox>`.
+ */
+export declare const RichRows: Story;
+export declare const Disabled: Story;
+/**
+ * `required` blocks form submission while empty; `error-text` renders a
+ * validation message alongside the shared `hint`.
+ */
+export declare const RequiredWithValidation: Story;

package/dist/components/select/select.stories.js

@@ -0,0 +1,75 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Select',
+    component: 'lyra-select',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `
+    <lyra-select label="Fruit" placeholder="Pick one…" style="max-width: 20rem">
+      <lyra-option value="a">Apple</lyra-option>
+      <lyra-option value="b">Banana</lyra-option>
+      <lyra-option value="c">Cherry</lyra-option>
+      <lyra-option value="d">Date</lyra-option>
+    </lyra-select>
+  `,
+};
+/** `<lyra-option selected>` seeds the initial value, mirroring `<option selected>`. */
+export const PreSelectedValue = {
+    render: () => html `
+    <lyra-select label="Fruit" style="max-width: 20rem">
+      <lyra-option value="a">Apple</lyra-option>
+      <lyra-option value="b" selected>Banana</lyra-option>
+      <lyra-option value="c">Cherry</lyra-option>
+      <lyra-option value="d">Date</lyra-option>
+    </lyra-select>
+  `,
+};
+/**
+ * Rows come from `<lyra-option>` children plus `group` (section headers),
+ * `sub` (a secondary line), and `dot-color` (a leading status dot) — same
+ * rich-row support as `<lyra-combobox>`.
+ */
+export const RichRows = {
+    render: () => html `
+    <lyra-select label="Inverter" placeholder="Pick one…" style="max-width: 22rem">
+      <lyra-option value="inv-1" group="Building A" sub="Running" dot-color="var(--lyra-color-success)">
+        Inverter 1
+      </lyra-option>
+      <lyra-option value="inv-2" group="Building A" sub="Idle" dot-color="var(--lyra-color-text-quiet)">
+        Inverter 2
+      </lyra-option>
+      <lyra-option value="inv-3" group="Building B" sub="Fault" dot-color="var(--lyra-color-danger)">
+        Inverter 3
+      </lyra-option>
+    </lyra-select>
+  `,
+};
+export const Disabled = {
+    render: () => html `
+    <lyra-select label="Disabled" disabled placeholder="Can't touch this" style="max-width: 20rem">
+      <lyra-option value="a">Apple</lyra-option>
+      <lyra-option value="b">Banana</lyra-option>
+    </lyra-select>
+  `,
+};
+/**
+ * `required` blocks form submission while empty; `error-text` renders a
+ * validation message alongside the shared `hint`.
+ */
+export const RequiredWithValidation = {
+    render: () => html `
+    <form style="display: flex; flex-direction: column; gap: 1.5rem; max-width: 22rem">
+      <lyra-select label="Required" required hint="Pick your favorite">
+        <lyra-option value="a">Apple</lyra-option>
+        <lyra-option value="b">Banana</lyra-option>
+      </lyra-select>
+      <lyra-select label="Invalid" required error-text="Selection required">
+        <lyra-option value="a">Apple</lyra-option>
+        <lyra-option value="b">Banana</lyra-option>
+      </lyra-select>
+      <button type="submit">Submit</button>
+    </form>
+  `,
+};

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;