@aceshooting/lyra-ui 0.1.1 → 0.1.3

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

@@ -9,9 +9,19 @@ export const styles = css `
     font-size: 0.875rem;
     font-weight: 600;
   }
-  [part='form-control-label']:empty {
+  /* :empty never matches here -- the part always contains a literal slot
+     child element regardless of assigned/text content -- so real emptiness
+     is tracked in JS (hasLabelSlot) and reflected via the hidden attribute
+     instead (same fix as [part='hint']/[part='error'] below). Without this,
+     the required-asterisk ::after below (which attaches to this box)
+     renders a stray ' *' with nothing before it whenever label is unset. */
+  [part='form-control-label'][hidden] {
     display: none;
   }
+  :host([required]) [part='form-control-label']::after {
+    content: ' *';
+    color: var(--lyra-color-danger);
+  }
   [part='input-wrapper'] {
     display: flex;
     align-items: center;
@@ -26,7 +36,8 @@ export const styles = css `
     border-color: var(--lyra-color-brand);
   }
   :host([disabled]) [part='input-wrapper'] {
-    opacity: 0.5;
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
   }
   [part='input'] {
     flex: 1 1 auto;
@@ -40,28 +51,69 @@ export const styles = css `
   [part='clear-button'],
   [part='expand-button'] {
     flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     border: none;
     background: none;
     cursor: pointer;
     color: var(--lyra-color-text-quiet);
-    padding: 0 var(--lyra-space-xs);
+    padding: var(--lyra-space-xs);
+    /* Real touch target in *both* dimensions (WCAG 2.2 SC 2.5.8 needs
+       24x24 CSS px, not just height — a design-review fix that only set
+       min-block-size left these buttons 24px tall but narrower than that).
+       The row has no explicit min-block-size of its own (unlike combobox's
+       [part=combobox]), so it can grow to fit the full touch target. */
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
     line-height: 1;
     font-size: 1rem;
   }
+  [part='clear-button']:focus-visible,
+  [part='expand-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
   [part='popup'] {
-    display: none;
     position: fixed;
     z-index: 900;
+    max-inline-size: min(92vw, 28rem);
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(-0.25rem);
+    transition:
+      opacity var(--lyra-transition-fast),
+      transform var(--lyra-transition-fast),
+      visibility var(--lyra-transition-fast);
   }
   :host([open]) [part='popup'] {
-    display: block;
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='popup'] {
+      transition: none !important;
+    }
   }
   [part='hint'] {
     margin-block-start: var(--lyra-space-xs);
     font-size: 0.8125rem;
     color: var(--lyra-color-text-quiet);
   }
-  [part='hint']:empty {
+  /* :empty never matches here -- the part always contains a literal
+     slot child element regardless of assigned/text content -- so real
+     emptiness is tracked in JS (hasHintSlot/hasErrorSlot) and reflected via
+     the hidden attribute instead (same fix as lyra-stat's icon/caption). */
+  [part='hint'][hidden] {
+    display: none;
+  }
+  [part='error'] {
+    margin-block-start: var(--lyra-space-xs);
+    font-size: 0.8125rem;
+    color: var(--lyra-color-danger);
+  }
+  [part='error'][hidden] {
     display: none;
   }
 `;

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

@@ -8,6 +8,7 @@ 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 { chevronIcon } from '../../internal/icons.js';
 import { styles } from './date-picker.styles.js';
 import { monthMatrix, weekdayLabels, monthTitle, formatISO, parseISO, isSameDay, addMonths, resolveFirstDayOfWeek, } from './calendar-core.js';
 /**
@@ -241,12 +242,14 @@ export class LyraDatePicker extends LyraElement {
       <div part="header">
         ${isFirst
             ? html `<button part="previous" type="button" aria-label="Previous month" @click=${() => this.nav(-1)}>
-              ‹
+              ${chevronIcon()}
             </button>`
             : html `<span></span>`}
         <div part="title">${monthTitle(year, month, this.locale)}</div>
         ${isLast
-            ? html `<button part="next" type="button" aria-label="Next month" @click=${() => this.nav(1)}>›</button>`
+            ? html `<button part="next" type="button" aria-label="Next month" @click=${() => this.nav(1)}>
+              ${chevronIcon()}
+            </button>`
             : html `<span></span>`}
       </div>
       <div part="weekdays">${labels.map((l) => html `<span part="weekday">${l}</span>`)}</div>

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

@@ -38,6 +38,9 @@ export const styles = css `
   [part='next']:hover {
     background: var(--lyra-color-brand-quiet);
   }
+  [part='previous'] svg {
+    transform: rotate(180deg);
+  }
   [part='weekdays'] {
     display: grid;
     grid-template-columns: repeat(7, var(--lyra-cell-size));
@@ -71,6 +74,10 @@ export const styles = css `
   [part~='day-outside'] {
     color: var(--lyra-color-text-quiet);
   }
+  [part~='day-outside'][part~='day-range-inner'],
+  [part~='day-outside'][part~='day-range-inner']:hover {
+    color: var(--lyra-color-text);
+  }
   [part='day-placeholder'] {
     inline-size: var(--lyra-cell-size);
     block-size: var(--lyra-cell-size);
@@ -95,7 +102,7 @@ export const styles = css `
     cursor: not-allowed;
   }
   [part~='day']:focus-visible {
-    outline: 2px solid var(--lyra-color-brand);
-    outline-offset: 1px;
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
   }
 `;

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

@@ -17,6 +17,7 @@ export declare class LyraEmpty extends LyraElement {
     description: string;
     private hasIcon;
     private hasActions;
+    protected willUpdate(): void;
     firstUpdated(): void;
     private checkIconSlot;
     private checkActionsSlot;

package/dist/components/empty/empty.js

@@ -38,9 +38,21 @@ export class LyraEmpty extends LyraElement {
         };
     }
     static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        // Set from light-DOM children before the first render so the initial
+        // paint is already correct — setting `hasIcon`/`hasActions` from
+        // `firstUpdated` (after the update completes) would schedule a second,
+        // wasted update (Lit's dev-mode "change-in-update" warning).
+        if (!this.hasUpdated) {
+            this.hasIcon = Array.from(this.children).some((el) => !el.hasAttribute('slot'));
+            this.hasActions = Array.from(this.children).some((el) => el.getAttribute('slot') === 'actions');
+        }
+    }
     firstUpdated() {
-        // `slotchange` isn't guaranteed to fire for content already present at
-        // parse/upgrade time in every browser, so do an initial check here too.
+        // Fallback reconciliation against the fully-resolved slot assignment
+        // (handles slot-forwarding and any browser where `slotchange` doesn't
+        // fire for content present at parse/upgrade time). A no-op in the
+        // common case since `willUpdate` already set the correct value above.
         this.checkIconSlot(this.shadowRoot.querySelector('slot:not([name])'));
         this.checkActionsSlot(this.shadowRoot.querySelector('slot[name="actions"]'));
     }

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

@@ -0,0 +1,10 @@
+/** Escapes a CSV field: quotes as needed, guards against formula injection. */
+export declare function escapeCsvField(value: unknown): string;
+export interface CsvColumn {
+    key: string;
+    label: string;
+}
+/** Builds a CRLF-joined CSV string with a header row. */
+export declare function buildCsv(rows: Record<string, unknown>[], columns: CsvColumn[]): string;
+/** Triggers a browser download of `content` as `filename`. */
+export declare function downloadBlob(content: string, filename: string, mime: string): void;

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

@@ -0,0 +1,28 @@
+const UNSAFE_LEADING = /^[=+\-@\t\r]/;
+const NEEDS_QUOTING = /[",\n]/;
+/** Escapes a CSV field: quotes as needed, guards against formula injection. */
+export function escapeCsvField(value) {
+    let s = value == null ? '' : String(value);
+    if (UNSAFE_LEADING.test(s))
+        s = `'${s}`;
+    if (NEEDS_QUOTING.test(s))
+        s = `"${s.replace(/"/g, '""')}"`;
+    return s;
+}
+/** Builds a CRLF-joined CSV string with a header row. */
+export function buildCsv(rows, columns) {
+    const header = columns.map((c) => escapeCsvField(c.label)).join(',');
+    const body = rows.map((row) => columns.map((c) => escapeCsvField(row[c.key])).join(','));
+    return [header, ...body].join('\r\n');
+}
+/** Triggers a browser download of `content` as `filename`. */
+export function downloadBlob(content, filename, mime) {
+    const blob = new Blob([content], { type: mime });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = filename;
+    a.click();
+    // Deferred revoke: Safari can cancel the download if the URL is revoked immediately.
+    setTimeout(() => URL.revokeObjectURL(url), 5000);
+}

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

@@ -0,0 +1,41 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { type CsvColumn } from './csv.js';
+export type ExportFormat = 'csv' | 'json';
+/**
+ * `<lyra-export-button>` — a CSV/JSON download button, single-format or a
+ * format-choice menu. First-party invention; consolidates ad-hoc "export CSV"
+ * buttons duplicated across surveyed repos.
+ *
+ * @customElement lyra-export-button
+ * @event lyra-export - `detail: { format }`, cancelable — call `preventDefault()`
+ *   to substitute the built-in client-side download with a server-generated one.
+ * @event lyra-export-complete - Fired after a non-cancelled download completes.
+ * @csspart trigger, menu, menu-item
+ */
+export declare class LyraExportButton extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    rows: Record<string, unknown>[];
+    columns: CsvColumn[];
+    filename: string;
+    formats: ExportFormat[];
+    disabled: boolean;
+    label: string;
+    open: boolean;
+    private cleanup?;
+    disconnectedCallback(): void;
+    private onDocPointer;
+    private openMenu;
+    private closeMenu;
+    private onKeyDown;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues): void;
+    private doExport;
+    private onTriggerClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-export-button': LyraExportButton;
+    }
+}

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

@@ -0,0 +1,151 @@
+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 { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { place } from '../../internal/positioner.js';
+import { buildCsv, downloadBlob } from './csv.js';
+import { styles } from './export-button.styles.js';
+/**
+ * `<lyra-export-button>` — a CSV/JSON download button, single-format or a
+ * format-choice menu. First-party invention; consolidates ad-hoc "export CSV"
+ * buttons duplicated across surveyed repos.
+ *
+ * @customElement lyra-export-button
+ * @event lyra-export - `detail: { format }`, cancelable — call `preventDefault()`
+ *   to substitute the built-in client-side download with a server-generated one.
+ * @event lyra-export-complete - Fired after a non-cancelled download completes.
+ * @csspart trigger, menu, menu-item
+ */
+export class LyraExportButton extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.rows = [];
+        this.columns = [];
+        this.filename = 'export';
+        this.formats = ['csv'];
+        this.disabled = false;
+        this.label = 'Export';
+        this.open = false;
+        this.onDocPointer = (e) => {
+            if (!e.composedPath().includes(this))
+                this.closeMenu();
+        };
+        this.onKeyDown = (e) => {
+            if (e.key === 'Escape' && this.open) {
+                e.preventDefault();
+                this.closeMenu();
+                this.renderRoot.querySelector('[part="trigger"]')?.focus();
+            }
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanup?.();
+        document.removeEventListener('pointerdown', this.onDocPointer);
+    }
+    openMenu() {
+        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
+        // any menu-item inside this shadow root.
+        this.renderRoot.addEventListener('keydown', this.onKeyDown);
+    }
+    updated(changed) {
+        if (changed.has('open')) {
+            this.cleanup?.();
+            this.cleanup = undefined;
+            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);
+            }
+        }
+    }
+    doExport(format) {
+        this.closeMenu();
+        const ev = this.emit('lyra-export', { format });
+        if (ev.defaultPrevented)
+            return;
+        if (format === 'csv') {
+            downloadBlob(buildCsv(this.rows, this.columns), `${this.filename}.csv`, 'text/csv;charset=utf-8;');
+        }
+        else {
+            downloadBlob(JSON.stringify(this.rows, null, 2), `${this.filename}.json`, 'application/json');
+        }
+        this.emit('lyra-export-complete', { format });
+    }
+    onTriggerClick() {
+        if (this.disabled)
+            return;
+        if (this.formats.length <= 1)
+            this.doExport(this.formats[0] ?? 'csv');
+        else
+            this.open ? this.closeMenu() : this.openMenu();
+    }
+    render() {
+        return html `
+      <button
+        part="trigger"
+        type="button"
+        ?disabled=${this.disabled}
+        aria-haspopup=${this.formats.length > 1 ? 'menu' : nothing}
+        aria-expanded=${this.formats.length > 1 ? (this.open ? 'true' : 'false') : nothing}
+        @click=${() => this.onTriggerClick()}
+      >
+        ${this.label}
+      </button>
+      ${this.formats.length > 1
+            ? html `<div part="menu" role="menu">
+            ${this.formats.map((f) => html `<button
+                  part="menu-item"
+                  role="menuitem"
+                  type="button"
+                  @click=${() => this.doExport(f)}
+                >
+                  ${f.toUpperCase()}
+                </button>`)}
+          </div>`
+            : nothing}
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraExportButton.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraExportButton.prototype, "columns", void 0);
+__decorate([
+    property()
+], LyraExportButton.prototype, "filename", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraExportButton.prototype, "formats", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraExportButton.prototype, "disabled", void 0);
+__decorate([
+    property()
+], LyraExportButton.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraExportButton.prototype, "open", void 0);
+defineElement('export-button', LyraExportButton);

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

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

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

@@ -0,0 +1,79 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-block;
+    position: relative;
+  }
+  [part='trigger'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    padding: var(--lyra-space-xs) var(--lyra-space-m);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+    font: inherit;
+    cursor: pointer;
+  }
+  [part='trigger']:hover:not(:disabled) {
+    border-color: var(--lyra-color-brand);
+  }
+  [part='trigger']:disabled {
+    opacity: var(--lyra-opacity-disabled);
+    cursor: not-allowed;
+  }
+  [part='trigger']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='menu'] {
+    /* Closed state: invisible + slightly raised. visibility (not
+       display:none) so opacity/transform can actually transition; hit-testing
+       and a11y exposure stay off since this part is already position:fixed. */
+    visibility: hidden;
+    position: fixed;
+    z-index: 900;
+    min-inline-size: 8rem;
+    padding: var(--lyra-space-xs);
+    background: var(--lyra-color-surface);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    box-shadow: var(--lyra-shadow);
+    opacity: 0;
+    transform: translateY(-4px);
+    transition:
+      opacity var(--lyra-transition-fast),
+      transform var(--lyra-transition-fast),
+      visibility var(--lyra-transition-fast);
+  }
+  :host([open]) [part='menu'] {
+    visibility: visible;
+    opacity: 1;
+    transform: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [part='menu'] {
+      transition: none;
+    }
+  }
+  [part='menu-item'] {
+    display: block;
+    inline-size: 100%;
+    text-align: start;
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    border: none;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    border-radius: var(--lyra-radius);
+  }
+  [part='menu-item']:hover {
+    background: var(--lyra-color-brand-quiet);
+  }
+  [part='menu-item']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+`;

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

@@ -0,0 +1,14 @@
+/**
+ * Parses a native-`accept`-style string (`".csv,.xlsx"`, `"text/csv"`,
+ * `"image/*"`, or any mix, comma-separated) and reports whether `file`
+ * matches it — the same three forms the browser's own file picker accepts,
+ * now also enforced on the drag-drop path (2026-07-10 audit,
+ * "map-file-input" §lyra-file-input, High: previously `accept` only
+ * constrained the native picker dialog and had no effect on drop).
+ *
+ * `file` may be a `DataTransferItem` cast as `File` (the dragenter-preview
+ * call site, before the drop payload has real `File` objects) - unlike
+ * `File`, `DataTransferItem` has no `.name`, only `.type`, so extension
+ * patterns (`.csv`) can't be evaluated pre-drop and never match.
+ */
+export declare function matchesAccept(file: File, accept: string): boolean;

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

@@ -0,0 +1,30 @@
+/**
+ * Parses a native-`accept`-style string (`".csv,.xlsx"`, `"text/csv"`,
+ * `"image/*"`, or any mix, comma-separated) and reports whether `file`
+ * matches it — the same three forms the browser's own file picker accepts,
+ * now also enforced on the drag-drop path (2026-07-10 audit,
+ * "map-file-input" §lyra-file-input, High: previously `accept` only
+ * constrained the native picker dialog and had no effect on drop).
+ *
+ * `file` may be a `DataTransferItem` cast as `File` (the dragenter-preview
+ * call site, before the drop payload has real `File` objects) - unlike
+ * `File`, `DataTransferItem` has no `.name`, only `.type`, so extension
+ * patterns (`.csv`) can't be evaluated pre-drop and never match.
+ */
+export function matchesAccept(file, accept) {
+    const parts = accept
+        .split(',')
+        .map((s) => s.trim().toLowerCase())
+        .filter(Boolean);
+    if (parts.length === 0)
+        return true;
+    const name = file.name?.toLowerCase();
+    const type = (file.type || '').toLowerCase();
+    return parts.some((p) => {
+        if (p.startsWith('.'))
+            return name !== undefined && name.endsWith(p);
+        if (p.endsWith('/*'))
+            return type.startsWith(p.slice(0, -1));
+        return type === p;
+    });
+}

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

@@ -0,0 +1,47 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface RejectedFile {
+    file: File;
+    reason: 'type' | 'count' | 'size';
+}
+/**
+ * `<lyra-file-input>` — a drag-drop + click-to-browse file dropzone. Emits
+ * raw `File[]`; parsing (CSV/XLSX/etc.) is left to the host, matching every
+ * surveyed upload seed (all of which upload raw files to a backend).
+ *
+ * @customElement lyra-file-input
+ * @slot - Custom drop-zone content, overrides the `label` attribute.
+ * @event lyra-files - `detail: { files, rejected }`, fired on drop and manual selection.
+ * @csspart base, input
+ */
+export declare class LyraFileInput extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    multiple: boolean;
+    disabled: boolean;
+    accept: string;
+    allowedMimeTypes: string[];
+    forbiddenMimeTypes: string[];
+    maxFileSize: number;
+    label: string;
+    private dragState;
+    private inputEl?;
+    private dragCounter;
+    private isAllowed;
+    private classify;
+    private emitFiles;
+    /** Programmatically open the native file picker. */
+    openPicker(): void;
+    private previewState;
+    private onDragEnter;
+    private onDragOver;
+    private onDragLeave;
+    private onDrop;
+    private onInputChange;
+    private onKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-file-input': LyraFileInput;
+    }
+}