@aceshooting/lyra-ui 2.1.0 → 2.3.0

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

@@ -1,263 +1,5 @@
-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, query } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './export-button.class.js';
+import { LyraExportButton } from './export-button.class.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';
-/**
- * `<lyra-export-button>` — a CSV/JSON download button, single-format or a
- * format-choice menu. First-party invention; consolidates the ad-hoc
- * "export CSV" button pattern common across dashboard UIs.
- *
- * @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 - 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() {
-        super(...arguments);
-        this.rows = [];
-        /** Column allow-list (and CSV header labels) for both export formats. Left
-         *  at its default empty array, both formats fall back to the union of the
-         *  rows' own keys instead (see `effectiveColumns()`), rather than CSV
-         *  degrading to a blank file while only JSON had a fallback. */
-        this.columns = [];
-        this.filename = 'export';
-        this.formats = ['csv'];
-        this.disabled = false;
-        /** Trigger button text, also feeds the format menu's `aria-label` (as
-         *  "`${label} format`") so assistive tech gets an accessible name for it. */
-        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') {
-                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;
-                case 'Tab':
-                    // No preventDefault -- native Tab navigation proceeds untouched, only
-                    // the now-stale open menu closes (mirrors lyra-menu's identical
-                    // Tab handling).
-                    this.closeMenu();
-                    break;
-            }
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.cleanup?.();
-        this.cleanup = undefined;
-        document.removeEventListener('pointerdown', this.onDocPointer);
-        this.open = false;
-    }
-    openMenu() {
-        if (this.open)
-            return;
-        this.open = true;
-    }
-    closeMenu() {
-        if (!this.open)
-            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/Arrow/Home/End 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;
-            // 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.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;
-            }
-        }
-    }
-    /** Falls back to the union of the rows' own keys when `columns` is left at
-     *  its default empty array, so an unconfigured export still produces a
-     *  proper header + data file instead of blank lines. Both `rowsForExport()`
-     *  and the CSV branch of `doExport()` share this same fallback, rather than
-     *  only the JSON path having one. */
-    effectiveColumns() {
-        if (this.columns.length > 0)
-            return this.columns;
-        const keys = new Set();
-        for (const row of this.rows) {
-            for (const key of Object.keys(row))
-                keys.add(key);
-        }
-        return Array.from(keys, (key) => ({ key, label: key }));
-    }
-    /** Applies the same `columns` allow-list CSV exports use, so JSON can't leak fields CSV hides. */
-    rowsForExport() {
-        const keys = this.effectiveColumns().map((c) => c.key);
-        return this.rows.map((row) => {
-            const picked = {};
-            for (const key of keys)
-                picked[key] = row[key];
-            return picked;
-        });
-    }
-    doExport(format) {
-        if (this.disabled)
-            return;
-        this.closeMenu();
-        this.triggerEl?.focus();
-        const ev = this.emit('lyra-export', { format });
-        if (ev.defaultPrevented)
-            return;
-        if (format === 'csv') {
-            downloadBlob(buildCsv(this.rows, this.effectiveColumns()), `${this.filename}.csv`, 'text/csv;charset=utf-8;');
-        }
-        else {
-            downloadBlob(JSON.stringify(this.rowsForExport(), 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}
-        aria-controls=${this.formats.length > 1 ? this.menuId : nothing}
-        @click=${() => this.onTriggerClick()}
-      >
-        ${this.label}
-      </button>
-      ${this.formats.length > 1
-            ? html `<div id=${this.menuId} part="menu" role="menu" aria-label="${this.label} format">
-            ${this.formats.map((f) => html `<button
-                  part="menu-item"
-                  role="menuitem"
-                  type="button"
-                  ?disabled=${this.disabled}
-                  @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);
-__decorate([
-    query('[part="trigger"]')
-], LyraExportButton.prototype, "triggerEl", void 0);
-__decorate([
-    query('[part="menu"]')
-], LyraExportButton.prototype, "menuEl", void 0);
 defineElement('export-button', LyraExportButton);
+//# sourceMappingURL=export-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"export-button.js","sourceRoot":"","sources":["../../../src/components/export-button/export-button.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC"}

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

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=export-button.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"export-button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/export-button/export-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAyFlB,CAAC"}

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

@@ -9,7 +9,7 @@ export const styles = css `
     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: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
     color: var(--lyra-color-text);
@@ -42,15 +42,15 @@ export const styles = css `
        synchronous style pass as the open attribute write. */
     visibility: hidden;
     position: fixed;
-    z-index: 900;
-    min-inline-size: 8rem;
+    z-index: var(--lyra-layer-dropdown);
+    min-inline-size: var(--lyra-size-8rem);
     padding: var(--lyra-space-xs);
     background: var(--lyra-color-surface);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     box-shadow: var(--lyra-shadow);
     opacity: 0;
-    transform: translateY(-4px);
+    transform: translateY(var(--lyra-size-neg-4px));
     transition:
       opacity var(--lyra-transition-fast),
       transform var(--lyra-transition-fast);
@@ -89,3 +89,4 @@ export const styles = css `
     cursor: not-allowed;
   }
 `;
+//# sourceMappingURL=export-button.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"export-button.styles.js","sourceRoot":"","sources":["../../../src/components/export-button/export-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyFxB,CAAC"}

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

@@ -17,3 +17,4 @@
  * extension-only, when the file may well be accepted once dropped.
  */
 export declare function matchesAccept(file: File, accept: string, assumeExtensionMatch?: boolean): boolean;
+//# sourceMappingURL=accept.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accept.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/accept.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,oBAAoB,UAAQ,GAAG,OAAO,CAgB/F"}

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

@@ -35,3 +35,4 @@ export function matchesAccept(file, accept, assumeExtensionMatch = false) {
         return type === p;
     });
 }
+//# sourceMappingURL=accept.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accept.js","sourceRoot":"","sources":["../../../src/components/file-input/accept.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,aAAa,CAAC,IAAU,EAAE,MAAc,EAAE,oBAAoB,GAAG,KAAK;IACpF,MAAM,KAAK,GAAG,MAAM;SACjB,KAAK,CAAC,GAAG,CAAC;SACV,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;SAClC,MAAM,CAAC,OAAO,CAAC,CAAC;IACnB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IAEpC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,WAAW,EAAE,CAAC;IACtC,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;IAE7C,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE;QACtB,IAAI,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC;YAAE,OAAO,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC3F,IAAI,CAAC,KAAK,KAAK;YAAE,OAAO,IAAI,CAAC;QAC7B,IAAI,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7D,OAAO,IAAI,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;AACL,CAAC"}

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

@@ -0,0 +1,66 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface RejectedFile {
+    file: File;
+    reason: 'type' | 'count' | 'size';
+}
+export interface LyraFileInputEventMap {
+    'lyra-files': CustomEvent<{
+        files: File[];
+        rejected: RejectedFile[];
+    }>;
+}
+/**
+ * `<lyra-file-input>` — a drag-drop + click-to-browse file dropzone. Emits
+ * raw `File[]`; parsing (CSV/XLSX/etc.) is left to the host, since that's
+ * where files ultimately get uploaded and processed anyway.
+ *
+ * @customElement lyra-file-input
+ * @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 - The dropzone's root, clickable/focusable container.
+ * @csspart input - The visually-hidden native `<input type="file">`.
+ * @csspart status - The visually-hidden live region announcing drag accept/reject state.
+ */
+export declare class LyraFileInput extends LyraElement<LyraFileInputEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    multiple: boolean;
+    disabled: boolean;
+    accept: string;
+    allowedMimeTypes: string[];
+    forbiddenMimeTypes: string[];
+    maxFileSize: number;
+    label: string;
+    /** Message announced after an accepted selection; `{count}` is replaced by
+     * the number of accepted files. */
+    acceptedMessage: string;
+    /** Message announced after rejected files; `{count}` is replaced by the
+     * number of rejected files. */
+    rejectedMessage: string;
+    private dragState;
+    private resultStatus;
+    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;
+    private statusText;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-file-input': LyraFileInput;
+    }
+}
+//# sourceMappingURL=file-input.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.class.d.ts","sourceRoot":"","sources":["../../../src/components/file-input/file-input.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAO7D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;CACnC;AAED,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,WAAW,CAAC;QAAE,KAAK,EAAE,IAAI,EAAE,CAAC;QAAC,QAAQ,EAAE,YAAY,EAAE,CAAA;KAAE,CAAC,CAAC;CACxE;AACD;;;;;;;;;;;;;GAaG;AACH,qBAAa,aAAc,SAAQ,WAAW,CAAC,qBAAqB,CAAC;IACnE,MAAM,CAAC,MAAM,iCAAwC;IAET,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjD,MAAM,SAAM;IACQ,gBAAgB,EAAE,MAAM,EAAE,CAAM;IAChC,kBAAkB,EAAE,MAAM,EAAE,CAAM;IACV,WAAW,SAAK;IAC5D,KAAK,SAAwC;IACzD;uCACmC;IACU,eAAe,SAA4B;IACxF;mCAC+B;IACc,eAAe,SAA+B;IAElF,OAAO,CAAC,SAAS,CAAwB;IACzC,OAAO,CAAC,YAAY,CAAM;IACN,OAAO,CAAC,OAAO,CAAC,CAAmB;IAEhE,OAAO,CAAC,WAAW,CAAK;IAExB,OAAO,CAAC,SAAS;IAcjB,OAAO,CAAC,QAAQ;IAiBhB,OAAO,CAAC,SAAS;IASjB,oDAAoD;IACpD,UAAU,IAAI,IAAI,CAGjB;IAED,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW,CAMjB;IAEF,OAAO,CAAC,UAAU,CAMhB;IAEF,OAAO,CAAC,WAAW,CAKjB;IAEF,OAAO,CAAC,MAAM,CASZ;IAEF,OAAO,CAAC,aAAa,CAInB;IAEF,OAAO,CAAC,SAAS,CAQf;IAEF,OAAO,CAAC,UAAU;IAMlB,MAAM,IAAI,cAAc,CA8BvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

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

@@ -0,0 +1,227 @@
+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, state, query } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { srOnly } from '../../internal/a11y.js';
+import { styles } from './file-input.styles.js';
+import { matchesAccept } from './accept.js';
+/**
+ * `<lyra-file-input>` — a drag-drop + click-to-browse file dropzone. Emits
+ * raw `File[]`; parsing (CSV/XLSX/etc.) is left to the host, since that's
+ * where files ultimately get uploaded and processed anyway.
+ *
+ * @customElement lyra-file-input
+ * @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 - The dropzone's root, clickable/focusable container.
+ * @csspart input - The visually-hidden native `<input type="file">`.
+ * @csspart status - The visually-hidden live region announcing drag accept/reject state.
+ */
+export class LyraFileInput extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.multiple = false;
+        this.disabled = false;
+        this.accept = '';
+        this.allowedMimeTypes = [];
+        this.forbiddenMimeTypes = [];
+        this.maxFileSize = 0;
+        this.label = 'Drop files here or click to browse';
+        /** Message announced after an accepted selection; `{count}` is replaced by
+         * the number of accepted files. */
+        this.acceptedMessage = '{count} file(s) added.';
+        /** Message announced after rejected files; `{count}` is replaced by the
+         * number of rejected files. */
+        this.rejectedMessage = '{count} file(s) rejected.';
+        this.dragState = 'default';
+        this.resultStatus = '';
+        this.dragCounter = 0;
+        this.onDragEnter = (e) => {
+            e.preventDefault();
+            if (this.disabled)
+                return;
+            this.dragCounter++;
+            const items = e.dataTransfer ? [...e.dataTransfer.items].filter((i) => i.kind === 'file') : [];
+            this.dragState = items.length ? this.previewState(items) : 'default';
+        };
+        this.onDragOver = (e) => {
+            // Always suppress the browser's default drop action (e.g. navigating the
+            // whole page to the dropped file), even while disabled — only the
+            // subsequent classification/emit logic is gated on `disabled`.
+            e.preventDefault();
+            if (this.disabled)
+                return;
+        };
+        this.onDragLeave = (e) => {
+            if (this.disabled)
+                return;
+            e.preventDefault();
+            this.dragCounter = Math.max(0, this.dragCounter - 1);
+            if (this.dragCounter === 0)
+                this.dragState = 'default';
+        };
+        this.onDrop = (e) => {
+            // Same rationale as `onDragOver`: prevent the browser's default drop
+            // action unconditionally, before the `disabled` gate.
+            e.preventDefault();
+            if (this.disabled)
+                return;
+            this.dragCounter = 0;
+            this.dragState = 'default';
+            const files = [...(e.dataTransfer?.files ?? [])];
+            if (files.length)
+                this.emitFiles(files);
+        };
+        this.onInputChange = (e) => {
+            const files = [...(e.target.files ?? [])];
+            e.target.value = '';
+            if (files.length)
+                this.emitFiles(files);
+        };
+        this.onKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
+                // Prevent Space from scrolling the page, matching the `table.ts`
+                // sortable-header/row convention for role-based clickable elements.
+                e.preventDefault();
+                this.openPicker();
+            }
+        };
+    }
+    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';
+        // 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),
+        // so this naturally only takes effect for the real `classify()` call at drop time.
+        if (this.maxFileSize > 0 && file.size > this.maxFileSize)
+            return 'size';
+        return 'ok';
+    }
+    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, isPreview);
+            if (reason === 'ok')
+                files.push(f);
+            else
+                rejected.push({ file: f, reason });
+        }
+        return { files, rejected };
+    }
+    emitFiles(fileList) {
+        const { files, rejected } = this.classify(fileList);
+        const messages = [];
+        if (files.length)
+            messages.push(this.acceptedMessage.replace('{count}', String(files.length)));
+        if (rejected.length)
+            messages.push(this.rejectedMessage.replace('{count}', String(rejected.length)));
+        this.resultStatus = messages.join(' ');
+        this.emit('lyra-files', { files, rejected });
+    }
+    /** Programmatically open the native file picker. */
+    openPicker() {
+        if (this.disabled)
+            return;
+        this.inputEl?.click();
+    }
+    previewState(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 this.resultStatus;
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        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}
+        @dragleave=${this.onDragLeave}
+        @drop=${this.onDrop}
+        @click=${() => !this.disabled && this.openPicker()}
+        @keydown=${this.onKeyDown}
+      >
+        <slot>${this.label}</slot>
+      </div>
+      <div part="status" class="sr-only" role="status" aria-live="polite">${this.statusText()}</div>
+      <input
+        part="input"
+        type="file"
+        tabindex="-1"
+        aria-hidden="true"
+        accept=${this.accept}
+        ?multiple=${this.multiple}
+        ?disabled=${this.disabled}
+        @change=${this.onInputChange}
+      />
+    `;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraFileInput.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraFileInput.prototype, "disabled", void 0);
+__decorate([
+    property()
+], LyraFileInput.prototype, "accept", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraFileInput.prototype, "allowedMimeTypes", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraFileInput.prototype, "forbiddenMimeTypes", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-file-size' })
+], LyraFileInput.prototype, "maxFileSize", void 0);
+__decorate([
+    property()
+], LyraFileInput.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'accepted-message' })
+], LyraFileInput.prototype, "acceptedMessage", void 0);
+__decorate([
+    property({ attribute: 'rejected-message' })
+], LyraFileInput.prototype, "rejectedMessage", void 0);
+__decorate([
+    state()
+], LyraFileInput.prototype, "dragState", void 0);
+__decorate([
+    state()
+], LyraFileInput.prototype, "resultStatus", void 0);
+__decorate([
+    query('input[type="file"]')
+], LyraFileInput.prototype, "inputEl", void 0);
+//# sourceMappingURL=file-input.class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.class.js","sourceRoot":"","sources":["../../../src/components/file-input/file-input.class.ts"],"names":[],"mappings":"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"}