@aceshooting/lyra-ui 1.0.1 → 1.2.0

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

@@ -11,7 +11,9 @@ export type ExportFormat = 'csv' | 'json';
  * @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
+ * @csspart trigger - The button that triggers the export (or opens the format menu).
+ * @csspart menu - The format-choice menu, shown when more than one format is configured.
+ * @csspart menu-item - A single format option inside the menu.
  */
 export declare class LyraExportButton extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -22,14 +24,26 @@ export declare class LyraExportButton extends LyraElement {
     disabled: boolean;
     label: string;
     open: boolean;
+    private triggerEl?;
+    private menuEl?;
+    private readonly menuId;
     private cleanup?;
+    /** Which menu item to focus the next time `open` flips true; reset after use. */
+    private pendingMenuFocusIndex;
     disconnectedCallback(): void;
     private onDocPointer;
     private openMenu;
     private closeMenu;
+    private menuItemEls;
+    /** Focuses the menu item at `index` (clamped), if the menu is already open and rendered. */
+    private focusMenuItem;
+    /** Opens the menu (if closed) and focuses `index`, or moves focus there directly if already open. */
+    private focusMenuItemOnOpen;
     private onKeyDown;
     protected firstUpdated(): void;
     protected updated(changed: PropertyValues): void;
+    /** Applies the same `columns` allow-list CSV exports use, so JSON can't leak fields CSV hides. */
+    private rowsForExport;
     private doExport;
     private onTriggerClick;
     render(): TemplateResult;

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

@@ -5,10 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, query } 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 { buildCsv, downloadBlob } from './csv.js';
 import { styles } from './export-button.styles.js';
 /**
@@ -20,7 +21,9 @@ import { styles } from './export-button.styles.js';
  * @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
+ * @csspart trigger - The button that triggers the export (or opens the format menu).
+ * @csspart menu - The format-choice menu, shown when more than one format is configured.
+ * @csspart menu-item - A single format option inside the menu.
  */
 export class LyraExportButton extends LyraElement {
     constructor() {
@@ -32,15 +35,47 @@ export class LyraExportButton extends LyraElement {
         this.disabled = false;
         this.label = 'Export';
         this.open = false;
+        this.menuId = nextId('export-menu');
+        /** Which menu item to focus the next time `open` flips true; reset after use. */
+        this.pendingMenuFocusIndex = 0;
         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();
+            if (e.key === 'Escape') {
+                if (this.open) {
+                    e.preventDefault();
+                    this.closeMenu();
+                    this.triggerEl?.focus();
+                }
+                return;
+            }
+            if (this.formats.length <= 1 || this.disabled)
+                return;
+            const items = this.menuItemEls();
+            const currentIndex = items.indexOf(e.target);
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    this.focusMenuItemOnOpen(currentIndex === -1 ? 0 : currentIndex + 1);
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    this.focusMenuItemOnOpen(currentIndex === -1 ? items.length - 1 : currentIndex - 1);
+                    break;
+                case 'Home':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.focusMenuItem(0);
+                    }
+                    break;
+                case 'End':
+                    if (this.open) {
+                        e.preventDefault();
+                        this.focusMenuItem(items.length - 1);
+                    }
+                    break;
             }
         };
     }
@@ -60,9 +95,29 @@ export class LyraExportButton extends LyraElement {
             return;
         this.open = false;
     }
+    menuItemEls() {
+        return Array.from(this.renderRoot.querySelectorAll('[part="menu-item"]'));
+    }
+    /** Focuses the menu item at `index` (clamped), if the menu is already open and rendered. */
+    focusMenuItem(index) {
+        const items = this.menuItemEls();
+        if (items.length === 0)
+            return;
+        items[Math.max(0, Math.min(items.length - 1, index))]?.focus();
+    }
+    /** Opens the menu (if closed) and focuses `index`, or moves focus there directly if already open. */
+    focusMenuItemOnOpen(index) {
+        if (this.open) {
+            this.focusMenuItem(index);
+        }
+        else {
+            this.pendingMenuFocusIndex = index;
+            this.openMenu();
+        }
+    }
     firstUpdated() {
-        // Single delegated listener catches Escape from the trigger button or
-        // any menu-item inside this shadow root.
+        // Single delegated listener catches Escape/Arrow/Home/End from the
+        // trigger button or any menu-item inside this shadow root.
         this.renderRoot.addEventListener('keydown', this.onKeyDown);
     }
     updated(changed) {
@@ -76,16 +131,31 @@ export class LyraExportButton extends LyraElement {
             // 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"]');
+                const anchor = this.triggerEl;
+                const menu = this.menuEl;
                 if (anchor && menu)
                     this.cleanup = place(anchor, menu);
                 document.addEventListener('pointerdown', this.onDocPointer);
+                this.focusMenuItem(this.pendingMenuFocusIndex);
+                this.pendingMenuFocusIndex = 0;
             }
         }
     }
+    /** Applies the same `columns` allow-list CSV exports use, so JSON can't leak fields CSV hides. */
+    rowsForExport() {
+        if (this.columns.length === 0)
+            return this.rows;
+        const keys = this.columns.map((c) => c.key);
+        return this.rows.map((row) => {
+            const picked = {};
+            for (const key of keys)
+                picked[key] = row[key];
+            return picked;
+        });
+    }
     doExport(format) {
         this.closeMenu();
+        this.triggerEl?.focus();
         const ev = this.emit('lyra-export', { format });
         if (ev.defaultPrevented)
             return;
@@ -93,7 +163,7 @@ export class LyraExportButton extends LyraElement {
             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');
+            downloadBlob(JSON.stringify(this.rowsForExport(), null, 2), `${this.filename}.json`, 'application/json');
         }
         this.emit('lyra-export-complete', { format });
     }
@@ -113,12 +183,13 @@ export class LyraExportButton extends LyraElement {
         ?disabled=${this.disabled}
         aria-haspopup=${this.formats.length > 1 ? 'menu' : nothing}
         aria-expanded=${this.formats.length > 1 ? (this.open ? 'true' : 'false') : nothing}
+        aria-controls=${this.formats.length > 1 ? this.menuId : nothing}
         @click=${() => this.onTriggerClick()}
       >
         ${this.label}
       </button>
       ${this.formats.length > 1
-            ? html `<div part="menu" role="menu">
+            ? html `<div id=${this.menuId} part="menu" role="menu">
             ${this.formats.map((f) => html `<button
                   part="menu-item"
                   role="menuitem"
@@ -153,4 +224,10 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraExportButton.prototype, "open", void 0);
+__decorate([
+    query('[part="trigger"]')
+], LyraExportButton.prototype, "triggerEl", void 0);
+__decorate([
+    query('[part="menu"]')
+], LyraExportButton.prototype, "menuEl", void 0);
 defineElement('export-button', LyraExportButton);

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

@@ -4,3 +4,4 @@ export default meta;
 type Story = StoryObj;
 export declare const SingleFormat: Story;
 export declare const MultiFormatMenu: Story;
+export declare const Disabled: Story;

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

@@ -30,3 +30,8 @@ export const MultiFormatMenu = {
     ></lyra-export-button>
   `,
 };
+export const Disabled = {
+    render: () => html `
+    <lyra-export-button filename="demo" .rows=${rows} .columns=${columns} disabled></lyra-export-button>
+  `,
+};

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

@@ -30,7 +30,16 @@ export const styles = css `
   [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. */
+       and a11y exposure stay off since this part is already position:fixed.
+       visibility deliberately isn't in the transition list below: a
+       transitioned property's computed value only settles to its new
+       target after the UA has run an actual style-change/rendering pass,
+       which lags behind a same-tick attribute write (e.g. updated()
+       synchronously focusing the first menu item right after flipping
+       open) -- that item would still resolve as visibility: hidden (and
+       so silently fail to focus) at the moment .focus() is called. Leaving
+       visibility untransitioned makes it apply immediately, in the same
+       synchronous style pass as the open attribute write. */
     visibility: hidden;
     position: fixed;
     z-index: 900;
@@ -44,8 +53,7 @@ export const styles = css `
     transform: translateY(-4px);
     transition:
       opacity var(--lyra-transition-fast),
-      transform var(--lyra-transition-fast),
-      visibility var(--lyra-transition-fast);
+      transform var(--lyra-transition-fast);
   }
   :host([open]) [part='menu'] {
     visibility: visible;

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

@@ -8,6 +8,12 @@
  * `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.
+ * patterns (`.csv`) can't be evaluated pre-drop. By default an unresolved
+ * extension pattern counts as no match, since that's the correct behavior
+ * once real `File` objects are available at drop time. Pass
+ * `assumeExtensionMatch: true` to instead treat an unresolved extension
+ * pattern as a possible match — this is what dragenter preview uses so it
+ * doesn't render a false "reject" state for accept lists that are
+ * extension-only, when the file may well be accepted once dropped.
  */
-export declare function matchesAccept(file: File, accept: string): boolean;
+export declare function matchesAccept(file: File, accept: string, assumeExtensionMatch?: boolean): boolean;

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

@@ -8,9 +8,15 @@
  * `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.
+ * patterns (`.csv`) can't be evaluated pre-drop. By default an unresolved
+ * extension pattern counts as no match, since that's the correct behavior
+ * once real `File` objects are available at drop time. Pass
+ * `assumeExtensionMatch: true` to instead treat an unresolved extension
+ * pattern as a possible match — this is what dragenter preview uses so it
+ * doesn't render a false "reject" state for accept lists that are
+ * extension-only, when the file may well be accepted once dropped.
  */
-export function matchesAccept(file, accept) {
+export function matchesAccept(file, accept, assumeExtensionMatch = false) {
     const parts = accept
         .split(',')
         .map((s) => s.trim().toLowerCase())
@@ -21,7 +27,7 @@ export function matchesAccept(file, accept) {
     const type = (file.type || '').toLowerCase();
     return parts.some((p) => {
         if (p.startsWith('.'))
-            return name !== undefined && name.endsWith(p);
+            return name === undefined ? assumeExtensionMatch : 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

@@ -10,9 +10,11 @@ export interface RejectedFile {
  * where files ultimately get uploaded and processed anyway.
  *
  * @customElement lyra-file-input
- * @slot - Custom drop-zone content, overrides the `label` attribute.
+ * @slot - Custom drop-zone content, overrides the `label` attribute. The
+ * accessible name always comes from `label`, so icon-only slot content
+ * remains announced correctly.
  * @event lyra-files - `detail: { files, rejected }`, fired on drop and manual selection.
- * @csspart base, input
+ * @csspart base, input, status
  */
 export declare class LyraFileInput extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -38,6 +40,7 @@ export declare class LyraFileInput extends LyraElement {
     private onDrop;
     private onInputChange;
     private onKeyDown;
+    private statusText;
     render(): TemplateResult;
 }
 declare global {

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

@@ -8,6 +8,7 @@ import { html, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { defineElement } from '../../internal/prefix.js';
+import { srOnly } from '../../internal/a11y.js';
 import { styles } from './file-input.styles.js';
 import { matchesAccept } from './accept.js';
 /**
@@ -16,9 +17,11 @@ import { matchesAccept } from './accept.js';
  * where files ultimately get uploaded and processed anyway.
  *
  * @customElement lyra-file-input
- * @slot - Custom drop-zone content, overrides the `label` attribute.
+ * @slot - Custom drop-zone content, overrides the `label` attribute. The
+ * accessible name always comes from `label`, so icon-only slot content
+ * remains announced correctly.
  * @event lyra-files - `detail: { files, rejected }`, fired on drop and manual selection.
- * @csspart base, input
+ * @csspart base, input, status
  */
 export class LyraFileInput extends LyraElement {
     constructor() {
@@ -80,13 +83,16 @@ export class LyraFileInput extends LyraElement {
             }
         };
     }
-    static { this.styles = [LyraElement.styles, styles]; }
-    isAllowed(file) {
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
+    isAllowed(file, isPreview = false) {
         if (this.forbiddenMimeTypes.includes(file.type))
             return 'type';
         if (this.allowedMimeTypes.length > 0 && !this.allowedMimeTypes.includes(file.type))
             return 'type';
-        if (this.accept && !matchesAccept(file, this.accept))
+        // During dragenter preview, `accept` extension patterns can't be evaluated (no
+        // `.name` yet) — treat them as a possible match rather than a guaranteed reject,
+        // so the preview doesn't flag a file that will in fact be accepted on drop.
+        if (this.accept && !matchesAccept(file, this.accept, isPreview))
             return 'type';
         // `file.size` is `undefined` on the synthetic `DataTransferItem`-cast objects
         // used during dragenter preview (real sizes aren't available until drop),
@@ -95,14 +101,14 @@ export class LyraFileInput extends LyraElement {
             return 'size';
         return 'ok';
     }
-    classify(fileList) {
+    classify(fileList, isPreview = false) {
         if (!this.multiple && fileList.length > 1) {
             return { files: [], rejected: fileList.map((file) => ({ file, reason: 'count' })) };
         }
         const files = [];
         const rejected = [];
         for (const f of fileList) {
-            const reason = this.isAllowed(f);
+            const reason = this.isAllowed(f, isPreview);
             if (reason === 'ok')
                 files.push(f);
             else
@@ -119,9 +125,16 @@ export class LyraFileInput extends LyraElement {
         this.inputEl?.click();
     }
     previewState(fileList) {
-        const { rejected } = this.classify(fileList);
+        const { rejected } = this.classify(fileList, true);
         return rejected.length > 0 ? 'reject' : 'accept';
     }
+    statusText() {
+        if (this.dragState === 'accept')
+            return 'Release to add the file.';
+        if (this.dragState === 'reject')
+            return 'This file type is not accepted.';
+        return '';
+    }
     render() {
         return html `
       <div
@@ -129,6 +142,7 @@ export class LyraFileInput extends LyraElement {
         role="button"
         tabindex=${this.disabled ? '-1' : '0'}
         aria-disabled=${this.disabled ? 'true' : nothing}
+        aria-label=${this.label}
         data-drag-state=${this.dragState}
         @dragenter=${this.onDragEnter}
         @dragover=${this.onDragOver}
@@ -139,6 +153,7 @@ export class LyraFileInput extends LyraElement {
       >
         <slot>${this.label}</slot>
       </div>
+      <div part="status" class="sr-only" role="status" aria-live="polite">${this.statusText()}</div>
       <input
         part="input"
         type="file"

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

@@ -3,3 +3,5 @@ declare const meta: Meta;
 export default meta;
 type Story = StoryObj;
 export declare const Default: Story;
+export declare const CustomSlotContent: Story;
+export declare const Disabled: Story;

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

@@ -8,3 +8,12 @@ export default meta;
 export const Default = {
     render: () => html `<lyra-file-input multiple accept=".csv,.xlsx"></lyra-file-input>`,
 };
+export const CustomSlotContent = {
+    render: () => html `<lyra-file-input multiple accept=".csv,.xlsx" label="Upload spreadsheets">
+      <strong>Drag spreadsheets here</strong>
+      <span>or click to browse (.csv, .xlsx)</span>
+    </lyra-file-input>`,
+};
+export const Disabled = {
+    render: () => html `<lyra-file-input disabled accept=".csv,.xlsx"></lyra-file-input>`,
+};

package/dist/components/flag/flag.d.ts

@@ -1,17 +1,48 @@
 import { type TemplateResult, type PropertyValues } from 'lit';
 import { LyraElement } from '../../internal/lyra-element.js';
 import '../skeleton/skeleton.js';
+type FlagUrlResolver = (code: string, options?: {
+    variant?: 'detailed';
+}) => Promise<string | undefined>;
+/**
+ * Resolves the optional peer dependency `@aceshooting/lyra-flags`'s `flagUrl`
+ * via the given importer (a real dynamic import by default). Uncached and
+ * dependency-injectable — unlike `loadFlagUrlResolver()` below — so the
+ * caught-error warning path is directly testable without needing to
+ * actually uninstall the package.
+ */
+export declare function loadFlagUrl(importFlags?: () => Promise<{
+    flagUrl: FlagUrlResolver;
+}>): Promise<FlagUrlResolver | null>;
 /**
  * `<lyra-flag>` — a country/language flag.
  *
  * Flag images are shipped by the optional peer package `@aceshooting/lyra-flags`,
  * not bundled into lyra-ui itself, so importing the core library pulls zero flag
  * weight. Give it a `country` (ISO 3166-1 alpha-2) or a `language` tag (mapped to
- * a representative country).
+ * a representative country). While that peer package's `flagUrl()` resolves (or
+ * if it isn't installed), the host carries `aria-busy="true"` and a skeleton
+ * placeholder renders in its place.
+ *
+ * **Bundle-size note:** `country`/`language` resolve through the peer package's
+ * `flagUrl(code)`, which is itself genuinely code-split per flag (see that
+ * package's docs) — using `<lyra-flag country="fr">` anywhere in an app ships
+ * only the flags actually requested at runtime, not all 249. If you already
+ * have a flag's URL at build time (e.g. from your own literal
+ * `import frUrl from '@aceshooting/lyra-flags/flags/fr.svg?url'`), pass it as
+ * `src` instead to skip the peer-package round trip (and its loading-skeleton
+ * flash) entirely.
+ *
+ * A handful of flags (e.g. `es`, `pt` — any whose design includes a detailed coat of
+ * arms/seal/emblem) ship a second, full-detail source SVG alongside the default icon-optimized
+ * one; set `detailed` to request it (e.g. for a hero-scale display where the extra illustrative
+ * detail is actually visible). A no-op for every other code — see `detailed`'s own doc.
  *
  * @customElement lyra-flag
  * @example <lyra-flag country="fr"></lyra-flag>
  * @example <lyra-flag language="en" label="English"></lyra-flag>
+ * @example <lyra-flag src=${frUrl} label="French"></lyra-flag>
+ * @example <lyra-flag country="es" detailed></lyra-flag>
  * @csspart image - The underlying <img>.
  */
 export declare class LyraFlag extends LyraElement {
@@ -20,13 +51,47 @@ export declare class LyraFlag extends LyraElement {
     country?: string;
     /** BCP-47-ish language tag (e.g. `en`, `en-US`) resolved to a country flag. */
     language?: string;
-    /** Accessible label / `alt` text. Defaults to the uppercase code. */
+    /**
+     * A pre-resolved flag image URL — takes precedence over `country`/`language`
+     * and skips the `@aceshooting/lyra-flags` peer-package lookup (and its
+     * loading-skeleton round trip) entirely. See the class doc: mainly useful to
+     * avoid even the small per-flag async hop when you already have the URL at
+     * build time. `label` is effectively required alongside `src` — there's no
+     * `country`/`language` to derive a fallback `alt` from.
+     */
+    src?: string;
+    /**
+     * Accessible label / `alt` text. Defaults to a localized, human-readable
+     * region name derived from the *resolved country code* via
+     * `Intl.DisplayNames` (e.g. `"United Kingdom"`) — for a `language`-only
+     * element (e.g. `language="en"`) that's the mapped country's display name,
+     * not the language tag itself. Falls back to the bare uppercase code if
+     * `Intl.DisplayNames` can't resolve it. Has no default when only `src` is
+     * given (no country/language to derive one from).
+     */
     label?: string;
     /** Render as a circular flag. */
     round: boolean;
-    private src?;
+    /**
+     * Requests the pristine, full-detail source SVG instead of the default icon-optimized one —
+     * only meaningful for the minority of `country`/`language` codes whose source art was large
+     * enough to need optimizing (e.g. `es`, `pt`, a national coat of arms/seal/emblem); for every
+     * other code this is a safe no-op (the default and detailed variants are the same file). Has no
+     * effect when `src` is set — a pre-resolved URL is used as-is regardless. Intended for rendering
+     * a flag larger than icon scale (e.g. a hero display) where the extra illustrative detail is
+     * actually visible.
+     */
+    detailed: boolean;
+    private resolvedSrc?;
     /** True while the lazy-loaded `@aceshooting/lyra-flags` peer resolver is in flight. */
     private loading;
+    /**
+     * Bumped on every `willUpdate` pass; captured by each in-flight resolver
+     * `.then()` so a resolution for a `country`/`language` that's since changed
+     * (or been cleared) can recognize itself as stale and no-op instead of
+     * overwriting newer state.
+     */
+    private resolveToken;
     private get code();
     protected willUpdate(changed: PropertyValues<this>): void;
     protected updated(): void;
@@ -37,3 +102,4 @@ declare global {
         'lyra-flag': LyraFlag;
     }
 }
+export {};