@aceshooting/lyra-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aceshooting
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,98 @@
+# Lyra UI
+
+Free, clean-room [Lit](https://lit.dev) web components — a companion to
+[Web Awesome](https://webawesome.com) that provides open-source equivalents of several
+Web Awesome **Pro** components, plus a few extras. Token-compatible with Web Awesome, so
+the components look native inside a WA app, and fully usable standalone.
+
+> **Independent project.** Not affiliated with or endorsed by Web Awesome. Component APIs
+> intentionally mirror Web Awesome's public API (attributes, slots, events, CSS parts) so
+> migration is a prefix rename — but every implementation here is original (clean-room).
+
+## Install
+
+```bash
+npm install @aceshooting/lyra-ui
+# peer: Lit is bundled; Floating UI ships with the positioned components
+# optional peer: @aceshooting/lyra-flags, only needed for <lyra-flag>
+```
+
+## Usage
+
+Import just what you use (tree-shakeable, granular entry points):
+
+```js
+import '@aceshooting/lyra-ui/components/combobox/combobox.js';
+import '@aceshooting/lyra-ui/components/combobox/option.js';
+```
+
+```html
+<lyra-combobox label="Fruit" with-clear>
+  <lyra-option value="a">Apple</lyra-option>
+  <lyra-option value="b">Banana</lyra-option>
+</lyra-combobox>
+```
+
+…or pull the whole library:
+
+```js
+import '@aceshooting/lyra-ui';
+```
+
+Imperative toast (a drop-in for `react-hot-toast`):
+
+```js
+import { toast } from '@aceshooting/lyra-ui';
+toast({ message: 'Saved', variant: 'success' });
+```
+
+## Migrating from Web Awesome Pro
+
+Everything a consumer touches is mirrored 1:1 — only the prefix differs:
+
+```
+<wa-combobox value="x" multiple with-clear>  →  <lyra-combobox value="x" multiple with-clear>
+<wa-date-input value="2026-07-15">           →  <lyra-date-input value="2026-07-15">
+```
+
+## Theming
+
+Components read Web Awesome's `--wa-*` design tokens (with `--lyra-*` fallbacks). Inside a
+WA app they inherit your theme automatically; standalone, they use sensible defaults.
+
+## Components
+
+**v1 (this release)**
+
+| Component | Mirrors | Notes |
+|-----------|---------|-------|
+| `<lyra-combobox>` + `<lyra-option>` | `wa-combobox` | Filterable single/multi select, form-associated |
+| `<lyra-date-picker>` | `wa-date-picker` | Inline calendar, single + range |
+| `<lyra-date-input>` | `wa-date-input` | Date field + calendar popover, form-associated |
+| `<lyra-toast>` + `<lyra-toast-item>` + `toast()` | `wa-toast` / `wa-toast-item` | Stacking notifications |
+| `<lyra-sparkline>` | `wa-sparkline` | Zero-dependency inline SVG |
+| `<lyra-flag>` | — (extra) | Country/language flags for i18n pickers — needs the optional peer `@aceshooting/lyra-flags` |
+
+**Roadmap** (survey-driven, see `docs/superpowers/specs/` at the repo root)
+
+- **Dashboard atoms:** `lyra-table`, `lyra-stat`, `lyra-empty`, `lyra-skeleton`, `lyra-gauge`, `lyra-export-button`, `lyra-split`
+- **Temporal + graph:** `lyra-time-range` + `lyra-playback`, `lyra-heatmap`, `lyra-graph`, `lyra-tree`
+- **Charts** (mirror `wa-chart` family + box-plot/histogram; `chart.js` optional peer dep)
+- **Bigger tracks:** `lyra-map` (maplibre), `lyra-file-input`
+
+## Development
+
+Run from the repo root (this package is part of a pnpm workspace):
+
+```bash
+pnpm install
+pnpm test        # @web/test-runner + Playwright (Chromium) + axe a11y
+pnpm lint        # tsc --noEmit
+pnpm build       # tsc → dist/ (ESM + .d.ts)
+pnpm manifest    # custom-elements.json
+pnpm docs        # Vite playground, demos this package + lyra-flags together
+```
+
+## License
+
+[MIT](./LICENSE) © 2026 Aceshooting

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,90 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { LyraOption } from './option.js';
+import './option.js';
+export type OptionFilter = (option: LyraOption, query: string) => boolean;
+/**
+ * `<lyra-combobox>` — a filterable single/multi select that combines a text
+ * input with a listbox. Mirrors the core `<wa-combobox>` API under `lyra-`.
+ *
+ * Options are `<lyra-option value>` children. Emits native-style `change`/`input`
+ * (like Web Awesome) plus `lyra-show`/`lyra-hide`/`lyra-clear`.
+ *
+ * @customElement lyra-combobox
+ * @slot - `<lyra-option>` elements.
+ * @slot label - Custom label content.
+ * @slot hint - Custom hint content.
+ * @event change - The selection changed.
+ * @event input - The user typed in the filter or changed the selection.
+ * @event lyra-show - The listbox opened.
+ * @event lyra-hide - The listbox closed.
+ * @event lyra-clear - The value was cleared.
+ * @csspart combobox - The input container (positioning anchor).
+ * @csspart combobox-input - The text input.
+ * @csspart listbox - The options popover.
+ * @csspart option - An option row.
+ * @csspart tags - The multi-select tag container.
+ * @csspart tag - An individual selected tag.
+ * @csspart clear-button - The clear button.
+ * @csspart expand-icon - The dropdown indicator.
+ */
+export declare class LyraCombobox extends LyraElement {
+    static formAssociated: boolean;
+    static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        value: {
+            noAccessor: boolean;
+        };
+    };
+    multiple: boolean;
+    placeholder: string;
+    disabled: boolean;
+    required: boolean;
+    name: string;
+    label: string;
+    hint: string;
+    open: boolean;
+    withClear: boolean;
+    maxOptionsVisible: number;
+    emptyText: string;
+    filter: OptionFilter | null;
+    private query;
+    private activeIndex;
+    private options;
+    private internals;
+    private listId;
+    private cleanup?;
+    private _selected;
+    constructor();
+    /** The selected value(s): a string in single mode, a string[] in `multiple` mode. */
+    get value(): string | string[];
+    set value(next: string | string[]);
+    private syncFormValue;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    disconnectedCallback(): void;
+    private collectOptions;
+    private reflectSelected;
+    private labelFor;
+    private get filtered();
+    private get displayValue();
+    private show;
+    private hide;
+    private onDocPointer;
+    protected updated(changed: PropertyValues): void;
+    private pick;
+    private removeValue;
+    private clear;
+    private onInput;
+    private onKeyDown;
+    private onComboMouseDown;
+    private renderRows;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-combobox': LyraCombobox;
+    }
+}

package/dist/components/combobox/combobox.js

@@ -0,0 +1,398 @@
+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 { styles } from './combobox.styles.js';
+import { LyraOption } from './option.js';
+import './option.js';
+/**
+ * `<lyra-combobox>` — a filterable single/multi select that combines a text
+ * input with a listbox. Mirrors the core `<wa-combobox>` API under `lyra-`.
+ *
+ * Options are `<lyra-option value>` children. Emits native-style `change`/`input`
+ * (like Web Awesome) plus `lyra-show`/`lyra-hide`/`lyra-clear`.
+ *
+ * @customElement lyra-combobox
+ * @slot - `<lyra-option>` elements.
+ * @slot label - Custom label content.
+ * @slot hint - Custom hint content.
+ * @event change - The selection changed.
+ * @event input - The user typed in the filter or changed the selection.
+ * @event lyra-show - The listbox opened.
+ * @event lyra-hide - The listbox closed.
+ * @event lyra-clear - The value was cleared.
+ * @csspart combobox - The input container (positioning anchor).
+ * @csspart combobox-input - The text input.
+ * @csspart listbox - The options popover.
+ * @csspart option - An option row.
+ * @csspart tags - The multi-select tag container.
+ * @csspart tag - An individual selected tag.
+ * @csspart clear-button - The clear button.
+ * @csspart expand-icon - The dropdown indicator.
+ */
+export class LyraCombobox extends LyraElement {
+    static { this.formAssociated = true; }
+    static { this.styles = [LyraElement.styles, styles]; }
+    static { this.properties = {
+        value: { noAccessor: true },
+    }; }
+    constructor() {
+        super();
+        this.multiple = false;
+        this.placeholder = '';
+        this.disabled = false;
+        this.required = false;
+        this.name = '';
+        this.label = '';
+        this.hint = '';
+        this.open = false;
+        this.withClear = false;
+        this.maxOptionsVisible = 3;
+        this.emptyText = 'No results';
+        this.filter = null;
+        this.query = '';
+        this.activeIndex = -1;
+        this.options = [];
+        this.listId = nextId('combobox-list');
+        this._selected = [];
+        this.collectOptions = (e) => {
+            const slot = e.target;
+            this.options = slot
+                .assignedElements({ flatten: true })
+                .filter((el) => el instanceof LyraOption);
+            this.reflectSelected();
+        };
+        this.onDocPointer = (e) => {
+            if (!e.composedPath().includes(this))
+                this.hide();
+        };
+        this.onInput = (e) => {
+            this.query = e.target.value;
+            this.activeIndex = -1;
+            this.show();
+            this.emit('input');
+        };
+        this.onKeyDown = (e) => {
+            const opts = this.filtered.filter((o) => !o.disabled);
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (!this.open)
+                        return this.show();
+                    this.activeIndex = Math.min(opts.length - 1, this.activeIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    this.activeIndex = Math.max(0, this.activeIndex - 1);
+                    break;
+                case 'Enter':
+                    if (this.open && this.activeIndex >= 0 && opts[this.activeIndex]) {
+                        e.preventDefault();
+                        this.pick(opts[this.activeIndex]);
+                    }
+                    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 = opts.length - 1;
+                    }
+                    break;
+                case 'Backspace':
+                    if (this.multiple && !this.query && this._selected.length) {
+                        this.removeValue(this._selected[this._selected.length - 1]);
+                    }
+                    break;
+            }
+        };
+        this.onComboMouseDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.target.closest('button'))
+                return;
+            e.preventDefault();
+            this.renderRoot.querySelector('[part="combobox-input"]')?.focus();
+            this.show();
+        };
+        this.internals = this.attachInternals();
+    }
+    /** The selected value(s): a string in single mode, a string[] in `multiple` mode. */
+    get value() {
+        return this.multiple ? [...this._selected] : (this._selected[0] ?? '');
+    }
+    set value(next) {
+        const old = this._selected;
+        this._selected = Array.isArray(next) ? [...next] : next ? [next] : [];
+        this.syncFormValue();
+        this.reflectSelected();
+        this.requestUpdate('value', old);
+    }
+    syncFormValue() {
+        if (this.multiple) {
+            const fd = new FormData();
+            const key = this.name || 'value';
+            for (const v of this._selected)
+                fd.append(key, v);
+            this.internals.setFormValue(fd);
+        }
+        else {
+            this.internals.setFormValue(this._selected[0] ?? '');
+        }
+    }
+    formResetCallback() {
+        this.value = [];
+        this.query = '';
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    checkValidity() {
+        return this.internals.checkValidity();
+    }
+    reportValidity() {
+        return this.internals.reportValidity();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanup?.();
+        document.removeEventListener('pointerdown', this.onDocPointer);
+    }
+    reflectSelected() {
+        const sel = new Set(this._selected);
+        for (const o of this.options)
+            o.selected = sel.has(o.value);
+    }
+    labelFor(value) {
+        return this.options.find((o) => o.value === value)?.label ?? value;
+    }
+    get filtered() {
+        const q = this.query.trim().toLowerCase();
+        const selectedLabel = !this.multiple ? (this.labelFor(this._selected[0] ?? '') ?? '') : '';
+        const effective = q && q === selectedLabel.toLowerCase() ? '' : q;
+        if (!effective)
+            return this.options;
+        const fn = this.filter ??
+            ((o, query) => o.label.toLowerCase().includes(query) || o.searchText.toLowerCase().includes(query));
+        return this.options.filter((o) => fn(o, effective));
+    }
+    get displayValue() {
+        if (this.multiple || this.open)
+            return this.query;
+        return this._selected[0] ? this.labelFor(this._selected[0]) : '';
+    }
+    show() {
+        if (this.open || this.disabled)
+            return;
+        this.open = true;
+        this.emit('lyra-show');
+        document.addEventListener('pointerdown', this.onDocPointer);
+    }
+    hide() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.activeIndex = -1;
+        this.emit('lyra-hide');
+        document.removeEventListener('pointerdown', this.onDocPointer);
+    }
+    updated(changed) {
+        if (changed.has('open')) {
+            this.cleanup?.();
+            this.cleanup = undefined;
+            if (this.open) {
+                const anchor = this.renderRoot.querySelector('[part="combobox"]');
+                const listbox = this.renderRoot.querySelector('[part="listbox"]');
+                if (anchor && listbox)
+                    this.cleanup = place(anchor, listbox);
+            }
+        }
+    }
+    pick(option) {
+        if (option.disabled)
+            return;
+        if (this.multiple) {
+            const set = new Set(this._selected);
+            set.has(option.value) ? set.delete(option.value) : set.add(option.value);
+            this.value = [...set];
+            this.query = '';
+        }
+        else {
+            this.value = option.value;
+            this.query = '';
+            this.hide();
+        }
+        this.emit('input');
+        this.emit('change');
+    }
+    removeValue(value) {
+        this.value = this._selected.filter((v) => v !== value);
+        this.emit('change');
+    }
+    clear() {
+        this.value = [];
+        this.query = '';
+        this.emit('lyra-clear');
+        this.emit('change');
+    }
+    renderRows(filtered, activeId) {
+        const rows = [];
+        let currentGroup;
+        let optIndex = 0;
+        filtered.forEach((o) => {
+            if (o.group !== currentGroup) {
+                currentGroup = o.group;
+                if (currentGroup)
+                    rows.push(html `<div class="group-label">${currentGroup}</div>`);
+            }
+            const id = `${this.listId}-opt-${optIndex++}`;
+            const selected = this._selected.includes(o.value);
+            rows.push(html `<div
+          part="option"
+          id=${id}
+          role="option"
+          aria-selected=${selected ? 'true' : 'false'}
+          aria-disabled=${o.disabled ? 'true' : 'false'}
+          ?data-active=${id === activeId}
+          @mousedown=${(e) => e.preventDefault()}
+          @click=${() => this.pick(o)}
+        >
+          <span>${o.label}</span>
+        </div>`);
+        });
+        return rows;
+    }
+    render() {
+        const filtered = this.filtered;
+        const activeOpts = filtered.filter((o) => !o.disabled);
+        const active = this.activeIndex >= 0 ? activeOpts[this.activeIndex] : undefined;
+        const activeId = active ? `${this.listId}-opt-${filtered.indexOf(active)}` : '';
+        const shownTags = this.multiple ? this._selected.slice(0, this.maxOptionsVisible) : [];
+        const extra = this.multiple ? this._selected.length - shownTags.length : 0;
+        const hasValue = this._selected.length > 0;
+        return html `
+      <div part="form-control">
+        <label part="form-control-label">${this.label}<slot name="label"></slot></label>
+        <div part="combobox" @mousedown=${this.onComboMouseDown}>
+          <div part="tags" style="display:contents">
+            ${shownTags.map((v) => html `<span part="tag"
+                >${this.labelFor(v)}<button
+                  part="tag__remove-button"
+                  type="button"
+                  aria-label="Remove ${this.labelFor(v)}"
+                  @click=${(e) => {
+            e.stopPropagation();
+            this.removeValue(v);
+        }}
+                >
+                  &times;</button
+                ></span
+              >`)}
+            ${extra > 0 ? html `<span part="tag">+${extra}</span>` : ''}
+          </div>
+          <input
+            part="combobox-input"
+            role="combobox"
+            aria-label=${this.label || this.placeholder || 'Combobox'}
+            aria-expanded=${this.open ? 'true' : 'false'}
+            aria-controls=${this.listId}
+            aria-activedescendant=${activeId}
+            aria-autocomplete="list"
+            autocomplete="off"
+            .value=${this.displayValue}
+            placeholder=${hasValue && !this.multiple ? '' : this.placeholder}
+            ?disabled=${this.disabled}
+            @input=${this.onInput}
+            @keydown=${this.onKeyDown}
+            @focus=${() => this.show()}
+          />
+          ${this.withClear && hasValue
+            ? html `<button
+                part="clear-button"
+                type="button"
+                aria-label="Clear"
+                @click=${(e) => {
+                e.stopPropagation();
+                this.clear();
+            }}
+              >
+                &times;
+              </button>`
+            : ''}
+          <span part="expand-icon" aria-hidden="true">▾</span>
+        </div>
+        <div part="listbox" id=${this.listId} role="listbox" aria-multiselectable=${this.multiple ? 'true' : 'false'}>
+          ${filtered.length === 0
+            ? html `<div class="empty">${this.emptyText}</div>`
+            : this.renderRows(filtered, activeId)}
+        </div>
+        <div part="hint">${this.hint}<slot name="hint"></slot></div>
+      </div>
+      <slot @slotchange=${this.collectOptions} hidden></slot>
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCombobox.prototype, "multiple", void 0);
+__decorate([
+    property()
+], LyraCombobox.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCombobox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCombobox.prototype, "required", void 0);
+__decorate([
+    property()
+], LyraCombobox.prototype, "name", void 0);
+__decorate([
+    property()
+], LyraCombobox.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraCombobox.prototype, "hint", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraCombobox.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'with-clear' })
+], LyraCombobox.prototype, "withClear", void 0);
+__decorate([
+    property({ attribute: 'max-options-visible', type: Number })
+], LyraCombobox.prototype, "maxOptionsVisible", void 0);
+__decorate([
+    property({ attribute: 'empty-text' })
+], LyraCombobox.prototype, "emptyText", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraCombobox.prototype, "filter", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "query", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "activeIndex", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "options", void 0);
+defineElement('combobox', LyraCombobox);

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

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