@aceshooting/lyra-ui 0.1.5 → 1.0.1

package/dist/components/combobox/combobox.js

@@ -62,6 +62,8 @@ export class LyraCombobox extends LyraElement {
         this.maxOptionsVisible = 3;
         this.emptyText = 'No results';
         this.filter = null;
+        this.source = null;
+        this.maxRender = 200;
         this.query = '';
         this.activeIndex = -1;
         this.options = [];
@@ -78,7 +80,17 @@ export class LyraCombobox extends LyraElement {
         this.hasHintSlot = false;
         this.hasErrorSlot = false;
         this.hasLabelSlot = false;
+        this.loading = false;
+        this.asyncRows = [];
+        this.sourceToken = 0;
+        this._selectedLabelCache = new Map();
+        // Rebuilt once per render (in render(), before renderRows()) from the
+        // currently-visible row set -- backs the delegated listbox click/mousedown
+        // handlers' data-value lookup below, instead of each option row closing
+        // over its own row object.
+        this._rowsByValue = new Map();
         this.listId = nextId('combobox-list');
+        this.inputId = nextId('combobox-input');
         this._selected = [];
         // What `form.reset()` restores to. Captured exactly once, from whatever
         // `<lyra-option selected>` markup was present the first time slotted
@@ -121,6 +133,8 @@ export class LyraCombobox extends LyraElement {
             this.query = e.target.value;
             this.activeIndex = -1;
             this.show();
+            if (this.source)
+                this.runSource(this.query);
             this.emit('input');
         };
         this.onInputBlur = () => {
@@ -136,22 +150,24 @@ export class LyraCombobox extends LyraElement {
             this.hasLabelSlot = e.target.assignedElements({ flatten: true }).length > 0;
         };
         this.onKeyDown = (e) => {
-            const opts = this.filtered.filter((o) => !o.disabled);
+            const navigable = this.renderedRows.rows.filter((r) => !r.disabled);
             switch (e.key) {
                 case 'ArrowDown':
                     e.preventDefault();
                     if (!this.open)
                         return this.show();
-                    this.activeIndex = Math.min(opts.length - 1, this.activeIndex + 1);
+                    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':
-                    if (this.open && this.activeIndex >= 0 && opts[this.activeIndex]) {
+                    if (this.open && this.activeIndex >= 0 && navigable[this.activeIndex]) {
                         e.preventDefault();
-                        this.pick(opts[this.activeIndex]);
+                        this.pickRow(navigable[this.activeIndex]);
                     }
                     break;
                 case 'Escape':
@@ -169,7 +185,7 @@ export class LyraCombobox extends LyraElement {
                 case 'End':
                     if (this.open) {
                         e.preventDefault();
-                        this.activeIndex = opts.length - 1;
+                        this.activeIndex = navigable.length - 1;
                     }
                     break;
                 case 'Backspace':
@@ -188,6 +204,22 @@ export class LyraCombobox extends LyraElement {
             this.renderRoot.querySelector('[part="combobox-input"]')?.focus();
             this.show();
         };
+        // 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 into `_rowsByValue`.
+        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 row = this._rowsByValue.get(value);
+            if (row)
+                this.pickRow(row);
+        };
         this.internals = this.attachInternals();
     }
     connectedCallback() {
@@ -257,7 +289,36 @@ export class LyraCombobox extends LyraElement {
             o.selected = sel.has(o.value);
     }
     labelFor(value) {
-        return this.options.find((o) => o.value === value)?.label ?? value;
+        return this._selectedLabelCache.get(value) ?? this.options.find((o) => o.value === value)?.label ?? value;
+    }
+    /** The current row set in a source-agnostic shape, before capping. */
+    get effectiveRows() {
+        if (this.source)
+            return this.asyncRows;
+        return this.filtered.map((o) => ({
+            value: o.value,
+            label: o.label,
+            sub: o.sub || undefined,
+            dotColor: o.dotColor || undefined,
+            group: o.group || undefined,
+            disabled: o.disabled,
+        }));
+    }
+    /** `effectiveRows` capped to `maxRender`, always keeping the current selection visible. */
+    get renderedRows() {
+        const all = this.effectiveRows;
+        if (all.length <= this.maxRender)
+            return { rows: all, overflow: 0 };
+        const capped = all.slice(0, this.maxRender);
+        const cappedValues = new Set(capped.map((r) => r.value));
+        for (const v of this._selected) {
+            if (!cappedValues.has(v)) {
+                const selectedRow = all.find((r) => r.value === v);
+                if (selectedRow)
+                    capped.push(selectedRow);
+            }
+        }
+        return { rows: capped, overflow: all.length - capped.length };
     }
     get filtered() {
         const q = this.query.trim().toLowerCase();
@@ -298,6 +359,12 @@ export class LyraCombobox extends LyraElement {
                 const listbox = this.renderRoot.querySelector('[part="listbox"]');
                 if (anchor && listbox)
                     this.cleanup = place(anchor, listbox);
+                // Reacting to the `open` property itself (not just inside show())
+                // means this fires however `open` became true — via show()'s own
+                // user-interaction paths, or a consumer/test setting `el.open = true`
+                // directly, which bypasses show() entirely.
+                if (this.source && this.asyncRows.length === 0)
+                    this.runSource(this.query);
             }
         }
         if (changed.has('required'))
@@ -306,17 +373,18 @@ export class LyraCombobox extends LyraElement {
             this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
         }
     }
-    pick(option) {
-        if (option.disabled)
+    pickRow(row) {
+        if (row.disabled)
             return;
+        this._selectedLabelCache.set(row.value, row.label);
         if (this.multiple) {
             const set = new Set(this._selected);
-            set.has(option.value) ? set.delete(option.value) : set.add(option.value);
+            set.has(row.value) ? set.delete(row.value) : set.add(row.value);
             this.value = [...set];
             this.query = '';
         }
         else {
-            this.value = option.value;
+            this.value = row.value;
             this.query = '';
             this.hide();
         }
@@ -333,38 +401,61 @@ export class LyraCombobox extends LyraElement {
         this.emit('lyra-clear');
         this.emit('change');
     }
-    renderRows(filtered, activeId) {
-        const rows = [];
+    runSource(query) {
+        if (!this.source)
+            return;
+        clearTimeout(this.sourceTimer);
+        this.sourceTimer = setTimeout(() => {
+            const token = ++this.sourceToken;
+            this.loading = true;
+            this.source(query)
+                .then((rows) => {
+                if (token !== this.sourceToken || !this.isConnected)
+                    return;
+                this.asyncRows = rows;
+            })
+                .finally(() => {
+                if (token === this.sourceToken)
+                    this.loading = false;
+            });
+        }, 200);
+    }
+    renderRows(rows, activeId) {
+        const out = [];
         let currentGroup;
-        let optIndex = 0;
-        filtered.forEach((o) => {
+        const selectedSet = new Set(this._selected);
+        rows.forEach((o, i) => {
             if (o.group !== currentGroup) {
                 currentGroup = o.group;
                 if (currentGroup)
-                    rows.push(html `<div class="group-label">${currentGroup}</div>`);
+                    out.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
+            const id = `${this.listId}-opt-${i}`;
+            const selected = selectedSet.has(o.value);
+            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}
-          @mousedown=${(e) => e.preventDefault()}
-          @click=${() => this.pick(o)}
         >
-          <span>${o.label}</span>
+          ${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 rows;
+        return out;
     }
     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 { rows, overflow } = this.renderedRows;
+        this._rowsByValue = new Map(rows.map((r) => [r.value, r]));
+        const navigable = rows.filter((r) => !r.disabled);
+        const active = this.activeIndex >= 0 ? navigable[this.activeIndex] : undefined;
+        const activeId = active ? `${this.listId}-opt-${rows.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;
@@ -373,7 +464,7 @@ export class LyraCombobox extends LyraElement {
         const hasLabel = this.hasLabelSlot || this.label.length > 0;
         return html `
       <div part="form-control">
-        <label part="form-control-label" ?hidden=${!hasLabel}>
+        <label part="form-control-label" for=${this.inputId} ?hidden=${!hasLabel}>
           ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>
         </label>
         <div part="combobox" @mousedown=${this.onComboMouseDown}>
@@ -394,6 +485,7 @@ export class LyraCombobox extends LyraElement {
             ${extra > 0 ? html `<span part="tag">+${extra}</span>` : ''}
           </div>
           <input
+            id=${this.inputId}
             part="combobox-input"
             role="combobox"
             aria-label=${this.label || this.placeholder || 'Combobox'}
@@ -425,10 +517,22 @@ export class LyraCombobox extends LyraElement {
             : ''}
           <span part="expand-icon" aria-hidden="true">${chevronIcon()}</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
+          part="listbox"
+          id=${this.listId}
+          role="listbox"
+          aria-multiselectable=${this.multiple ? 'true' : 'false'}
+          @mousedown=${this.onListboxMouseDown}
+          @click=${this.onListboxClick}
+        >
+          ${this.loading
+            ? html `<div class="loading">Loading…</div>`
+            : rows.length === 0
+                ? html `<div class="empty">${this.emptyText}</div>`
+                : html `${this.renderRows(rows, activeId)}
+                  ${overflow > 0
+                    ? html `<div part="option-overflow">+${overflow} more — refine your search</div>`
+                    : ''}`}
         </div>
         <div part="error" ?hidden=${!hasError}>
           ${this.errorText}<slot name="error" @slotchange=${this.onErrorSlotChange}></slot>
@@ -480,6 +584,12 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], LyraCombobox.prototype, "filter", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraCombobox.prototype, "source", void 0);
+__decorate([
+    property({ attribute: 'max-render', type: Number })
+], LyraCombobox.prototype, "maxRender", void 0);
 __decorate([
     state()
 ], LyraCombobox.prototype, "query", void 0);
@@ -501,4 +611,10 @@ __decorate([
 __decorate([
     state()
 ], LyraCombobox.prototype, "hasLabelSlot", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "loading", void 0);
+__decorate([
+    state()
+], LyraCombobox.prototype, "asyncRows", void 0);
 defineElement('combobox', LyraCombobox);

package/dist/components/combobox/combobox.styles.js

@@ -172,6 +172,27 @@ export const styles = css `
     opacity: var(--lyra-opacity-disabled);
     cursor: not-allowed;
   }
+  [part='option-dot'] {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-radius: 50%;
+    flex: 0 0 auto;
+  }
+  [part='option-label'] {
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+  }
+  [part='option-sub'] {
+    font-size: 0.75rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='option-overflow'],
+  .loading {
+    padding: var(--lyra-space-s) var(--lyra-space-m);
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+  }
 
   .group-label {
     padding: var(--lyra-space-xs) var(--lyra-space-s) 0;

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

@@ -21,6 +21,10 @@ export declare class LyraOption extends LyraElement {
     group: string;
     /** Extra text the filter should match beyond the label. */
     searchText: string;
+    /** Optional secondary line rendered under the label (e.g. a status/date summary). */
+    sub: string;
+    /** Optional color for a small leading status dot (any valid CSS color). */
+    dotColor: string;
     /** Resolved label: explicit non-empty `label` attribute wins, else trimmed text content. */
     get label(): string;
     render(): TemplateResult;

package/dist/components/combobox/option.js

@@ -30,6 +30,10 @@ export class LyraOption extends LyraElement {
         this.group = '';
         /** Extra text the filter should match beyond the label. */
         this.searchText = '';
+        /** Optional secondary line rendered under the label (e.g. a status/date summary). */
+        this.sub = '';
+        /** Optional color for a small leading status dot (any valid CSS color). */
+        this.dotColor = '';
     }
     static { this.styles = [
         LyraElement.styles,
@@ -63,4 +67,10 @@ __decorate([
 __decorate([
     property({ attribute: 'search-text' })
 ], LyraOption.prototype, "searchText", void 0);
+__decorate([
+    property()
+], LyraOption.prototype, "sub", void 0);
+__decorate([
+    property({ attribute: 'dot-color' })
+], LyraOption.prototype, "dotColor", void 0);
 defineElement('option', LyraOption);

package/dist/components/date-picker/calendar-core.d.ts

@@ -16,5 +16,9 @@ export declare function monthMatrix(year: number, month: number, firstDayOfWeek?
 export declare function weekdayLabels(firstDayOfWeek?: number, format?: WeekdayFormat, locale?: string): string[];
 /** Localized "Month YYYY" title. */
 export declare function monthTitle(year: number, month: number, locale?: string): string;
-/** Resolve a `first-day-of-week` attribute (name or 'auto') to a 0–6 index. */
-export declare function resolveFirstDayOfWeek(value: string): number;
+/**
+ * Resolve a `first-day-of-week` attribute (name or 'auto') to a 0–6 index.
+ * `'auto'` derives the answer from `locale` via `Intl.Locale`'s week-info
+ * when the runtime supports it, falling back to Sunday otherwise.
+ */
+export declare function resolveFirstDayOfWeek(value: string, locale?: string): number;

package/dist/components/date-picker/calendar-core.js

@@ -63,9 +63,28 @@ export function monthTitle(year, month, locale) {
     return new Intl.DateTimeFormat(locale || undefined, { month: 'long', year: 'numeric' }).format(new Date(year, month, 1));
 }
 const FDOW = { sun: 0, mon: 1, tue: 2, wed: 3, thu: 4, fri: 5, sat: 6 };
-/** Resolve a `first-day-of-week` attribute (name or 'auto') to a 0–6 index. */
-export function resolveFirstDayOfWeek(value) {
-    if (!value || value === 'auto')
-        return 0;
+/** Locale-derived first day of week (0=Sunday … 6=Saturday), or null if unsupported. */
+function localeFirstDayOfWeek(locale) {
+    try {
+        const l = new Intl.Locale(locale);
+        const firstDay = l.weekInfo?.firstDay ?? l.getWeekInfo?.().firstDay;
+        if (!firstDay)
+            return null;
+        return firstDay % 7; // ISO 1-7 (Mon-Sun) -> 0-6 (Sun-Sat)
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Resolve a `first-day-of-week` attribute (name or 'auto') to a 0–6 index.
+ * `'auto'` derives the answer from `locale` via `Intl.Locale`'s week-info
+ * when the runtime supports it, falling back to Sunday otherwise.
+ */
+export function resolveFirstDayOfWeek(value, locale) {
+    if (!value || value === 'auto') {
+        const derived = locale ? localeFirstDayOfWeek(locale) : null;
+        return derived ?? 0;
+    }
     return FDOW[value.toLowerCase()] ?? 0;
 }

package/dist/components/date-picker/date-input.d.ts

@@ -36,6 +36,7 @@ export declare class LyraDateInput extends LyraDateInput_base {
     firstDayOfWeek: string;
     weekdayFormat: WeekdayFormat;
     private cleanupFn?;
+    private inputId;
     private touched;
     private hasHintSlot;
     private hasErrorSlot;

package/dist/components/date-picker/date-input.js

@@ -10,6 +10,7 @@ import { LyraElement } from '../../internal/lyra-element.js';
 import { FormAssociated } from '../../internal/form-associated.js';
 import { defineElement } from '../../internal/prefix.js';
 import { place } from '../../internal/positioner.js';
+import { nextId } from '../../internal/a11y.js';
 import { closeIcon, calendarIcon } from '../../internal/icons.js';
 import { parseISO, formatISO } from './calendar-core.js';
 import { styles } from './date-input.styles.js';
@@ -48,6 +49,7 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
         this.months = 1;
         this.firstDayOfWeek = 'auto';
         this.weekdayFormat = 'short';
+        this.inputId = nextId('date-input');
         // Set on the date input's first `blur`; gates the `data-invalid`
         // reflection below so validity styling never flashes on first render.
         this.touched = false;
@@ -66,8 +68,11 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
                 this.hide();
         };
         this.onInputChange = (e) => {
-            const raw = e.target.value.trim();
+            const target = e.target;
+            const raw = target.value.trim();
             if (!raw) {
+                // The mixin's value setter recomputes validity (updateValidity()),
+                // which clears any stale badInput state along the way.
                 this.value = '';
                 this.emit('input');
                 this.emit('change');
@@ -79,6 +84,15 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
                 this.emit('input');
                 this.emit('change');
             }
+            else {
+                // Unparseable text: don't silently keep the committed value while the
+                // field still shows garbage -- revert the displayed text back to the
+                // last valid commit and flag the constraint-validation state (mirrors
+                // how `required` is already wired via internals.setValidity(), see
+                // form-associated.ts).
+                target.value = this.displayText;
+                this.internals.setValidity({ badInput: true }, 'Enter a valid date');
+            }
         };
         this.onInputKey = (e) => {
             if (e.altKey && e.key === 'ArrowDown') {
@@ -176,11 +190,12 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
         const hasLabel = this.hasLabelSlot || this.label.length > 0;
         return html `
       <div part="form-control">
-        <label part="form-control-label" ?hidden=${!hasLabel}>
+        <label part="form-control-label" for=${this.inputId} ?hidden=${!hasLabel}>
           ${this.label}<slot name="label" @slotchange=${this.onLabelSlotChange}></slot>
         </label>
         <div part="input-wrapper">
           <input
+            id=${this.inputId}
             part="input"
             type="text"
             aria-label=${this.label || this.placeholder || 'Date'}
@@ -223,6 +238,8 @@ export class LyraDateInput extends FormAssociated(LyraElement) {
             .max=${this.max}
             .months=${this.months}
             .locale=${this.locale}
+            .disabled=${this.disabled}
+            .readonly=${this.readonly}
             first-day-of-week=${this.firstDayOfWeek}
             weekday-format=${this.weekdayFormat}
             @change=${this.onPickerChange}

package/dist/components/date-picker/date-picker.js

@@ -102,9 +102,11 @@ export class LyraDatePicker extends LyraElement {
         }
     }
     get fdow() {
-        return resolveFirstDayOfWeek(this.firstDayOfWeek);
+        return resolveFirstDayOfWeek(this.firstDayOfWeek, this.locale);
     }
     isDisabled(d) {
+        if (this.disabled || this.readonly)
+            return true;
         const min = parseISO(this.min);
         const max = parseISO(this.max);
         if (min && d < min)
@@ -135,7 +137,7 @@ export class LyraDatePicker extends LyraElement {
             this.emit('change');
     }
     selectDate(date) {
-        if (this.disabled || this.readonly || this.isDisabled(date))
+        if (this.isDisabled(date))
             return;
         this.focusedDate = date;
         if (this.mode === 'range') {

package/dist/components/date-picker/date-picker.styles.js

@@ -4,6 +4,10 @@ export const styles = css `
     display: inline-block;
     --lyra-cell-size: 2.25rem;
   }
+  :host([disabled]) {
+    opacity: var(--lyra-opacity-disabled);
+    pointer-events: none;
+  }
   [part='base'] {
     display: flex;
     gap: var(--lyra-space-l);
@@ -94,7 +98,7 @@ export const styles = css `
   [part~='day-range-start'],
   [part~='day-range-end'] {
     background: var(--lyra-color-brand);
-    color: #fff;
+    color: var(--lyra-color-on-brand);
   }
   [part~='day']:disabled {
     color: var(--lyra-color-text-quiet);

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

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/empty/empty.stories.js

@@ -0,0 +1,14 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Empty',
+    component: 'lyra-empty',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `
+    <lyra-empty heading="No results" description="Try a different search.">
+      <span slot="actions"><button>Reset</button></span>
+    </lyra-empty>
+  `,
+};

package/dist/components/export-button/export-button.js

@@ -54,13 +54,11 @@ export class LyraExportButton extends LyraElement {
         if (this.open)
             return;
         this.open = true;
-        document.addEventListener('pointerdown', this.onDocPointer);
     }
     closeMenu() {
         if (!this.open)
             return;
         this.open = false;
-        document.removeEventListener('pointerdown', this.onDocPointer);
     }
     firstUpdated() {
         // Single delegated listener catches Escape from the trigger button or
@@ -71,11 +69,18 @@ export class LyraExportButton extends LyraElement {
         if (changed.has('open')) {
             this.cleanup?.();
             this.cleanup = undefined;
+            // Reacting to the `open` property itself (not just inside
+            // openMenu()) means this fires however `open` became true -- via
+            // openMenu()'s own click path, or a consumer/test setting
+            // `el.open = true` directly (valid API on a `reflect: true`
+            // property), which bypasses openMenu() entirely.
+            document.removeEventListener('pointerdown', this.onDocPointer);
             if (this.open) {
                 const anchor = this.renderRoot.querySelector('[part="trigger"]');
                 const menu = this.renderRoot.querySelector('[part="menu"]');
                 if (anchor && menu)
                     this.cleanup = place(anchor, menu);
+                document.addEventListener('pointerdown', this.onDocPointer);
             }
         }
     }

package/dist/components/export-button/export-button.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const SingleFormat: Story;
+export declare const MultiFormatMenu: Story;

package/dist/components/export-button/export-button.stories.js

@@ -0,0 +1,32 @@
+import { html } from 'lit';
+const rows = [
+    { id: 'a', name: 'Alpha', score: 92 },
+    { id: 'b', name: 'Beta', score: 81 },
+    { id: 'c', name: 'Gamma', score: 76 },
+];
+const columns = [
+    { key: 'id', label: 'ID' },
+    { key: 'name', label: 'Name' },
+    { key: 'score', label: 'Score' },
+];
+const meta = {
+    title: 'ExportButton',
+    component: 'lyra-export-button',
+    tags: ['autodocs'],
+};
+export default meta;
+export const SingleFormat = {
+    render: () => html `
+    <lyra-export-button filename="demo" .rows=${rows} .columns=${columns}></lyra-export-button>
+  `,
+};
+export const MultiFormatMenu = {
+    render: () => html `
+    <lyra-export-button
+      filename="demo"
+      .rows=${rows}
+      .columns=${columns}
+      .formats=${['csv', 'json']}
+    ></lyra-export-button>
+  `,
+};

package/dist/components/file-input/file-input.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;

package/dist/components/file-input/file-input.stories.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+const meta = {
+    title: 'FileInput',
+    component: 'lyra-file-input',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `<lyra-file-input multiple accept=".csv,.xlsx"></lyra-file-input>`,
+};