@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/attachment-trigger/attachment-trigger.class.js

@@ -0,0 +1,278 @@
+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, svg } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { chevronIcon } from '../../internal/icons.js';
+import { styles } from './attachment-trigger.styles.js';
+import '../menu/menu.class.js';
+import '../menu/menu-item.class.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding these
+// one-off glyphs to that module -- it's off limits here -- so they still
+// read as part of the same visual language as the rest of the library's
+// inline icons. Same approach as lyra-attachment-chip's local fileGlyph()/
+// retryIcon() and lyra-checkbox's local checkmarkGlyph().
+const ICON_VIEW_BOX = '0 0 24 24';
+const ICON_STROKE_WIDTH = '1.75';
+function icon(paths) {
+    return svg `
+    <svg
+      width="1em"
+      height="1em"
+      viewBox=${ICON_VIEW_BOX}
+      fill="none"
+      stroke="currentColor"
+      stroke-width=${ICON_STROKE_WIDTH}
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+      focusable="false"
+    >${paths}</svg>
+  `;
+}
+/** A paperclip glyph -- the generic "attach" affordance, used for the
+ *  `files` capability and as the multi-capability menu's own trigger icon
+ *  (the one glyph a user recognizes regardless of which capabilities the
+ *  menu underneath actually offers). */
+function paperclipIcon() {
+    return icon(svg `
+    <path d="M21.44 11.05 12.25 20.24a5.5 5.5 0 0 1-7.78-7.78l9.19-9.19a3.5 3.5 0 0 1 4.95 4.95l-9.2 9.19a1.5 1.5 0 0 1-2.12-2.12l8.49-8.48"></path>
+  `);
+}
+/** A picture-frame glyph for the `image` capability. */
+function imageIcon() {
+    return icon(svg `
+    <rect x="3" y="3" width="18" height="18" rx="2"></rect>
+    <circle cx="8.5" cy="8.5" r="1.5"></circle>
+    <polyline points="21 15 16 10 5 21"></polyline>
+  `);
+}
+/** A camera-body glyph for the `camera` capability. */
+function cameraIcon() {
+    return icon(svg `
+    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2Z"></path>
+    <circle cx="12" cy="13" r="4"></circle>
+  `);
+}
+const CAPABILITY_META = {
+    files: { icon: paperclipIcon, triggerLabel: 'Attach files', menuLabel: 'Upload files' },
+    image: { icon: imageIcon, triggerLabel: 'Attach an image', menuLabel: 'Upload a photo' },
+    camera: { icon: cameraIcon, triggerLabel: 'Use camera', menuLabel: 'Take a photo' },
+};
+/**
+ * `<lyra-attachment-trigger>` — a compact attach affordance designed for a
+ * chat composer's leading slot (see `<lyra-chat-composer>`'s own `leading`
+ * slot, which this drops straight into, though this component has no code
+ * dependency on it). Its shape adapts to how many attachment `capabilities`
+ * are configured:
+ *  - Exactly one capability: a single plain icon button ([part='trigger']).
+ *    Activating it performs that capability's action directly.
+ *  - More than one: a small anchored menu ([part='menu'], composed from
+ *    `<lyra-menu>`/`<lyra-menu-item>`) listing each capability as a row.
+ *
+ * Two of the three capabilities (`files`, `image`) are file-picker-backed:
+ * activating them opens a hidden native `<input type="file">` via a
+ * synthetic `.click()`, and the resulting selection is re-emitted as
+ * `lyra-pick`. `accept` is shared across both — `image` defaults it to
+ * `'image/*'` unless the `accept` prop overrides it, `files` always uses
+ * `accept` as-is (empty means "any file type", matching a bare native
+ * `<input type="file">` with no `accept` attribute).
+ *
+ * **`camera` is scope-limited by design.** This component does not
+ * implement any camera capture UI itself — no `getUserMedia`, no
+ * `<input capture>` — because that's entirely a host/browser concern with
+ * no single right answer (a desktop web app, a mobile PWA, and a native
+ * wrapper all want different things here). Activating the `camera`
+ * capability only fires `lyra-camera-request`; the host owns everything
+ * from that point on (opening its own capture UI, then presumably handing
+ * the resulting `File` back to something like `<lyra-attachment-chip>`).
+ *
+ * @customElement lyra-attachment-trigger
+ * @event lyra-pick - A file-backed capability's hidden file input produced a
+ * real selection. `detail: { capability: 'files' | 'image', files }` — a
+ * real `FileList` (not a plain array), matching the native input's own
+ * `.files` shape, but an independent snapshot rather than that same live
+ * object — see `onInputChange`'s own doc for why a live reference would be
+ * unsafe to hand out here.
+ * @event lyra-camera-request - The `camera` capability was activated. No
+ * detail payload — see the class doc's scope note; the host implements the
+ * actual capture flow.
+ * @csspart trigger - The single-capability icon button. Only rendered when `capabilities.length === 1`.
+ * @csspart menu - The `<lyra-menu>` wrapper. Only rendered when `capabilities.length > 1`.
+ * @csspart menu-trigger - The multi-capability button slotted into `<lyra-menu>`'s own `trigger` slot. Only rendered when `capabilities.length > 1`.
+ * @csspart expand-icon - The disclosure chevron inside the multi-capability trigger button. Only rendered when `capabilities.length > 1`.
+ * @csspart hidden-input - The internal native `<input type="file">` that actually opens the OS file
+ *   picker. Hidden (`display: none`) by default; exposed as a part only so a consumer can override
+ *   that with `::part(hidden-input)` in the unlikely case their integration needs to.
+ *
+ * `triggerLabel` lets a host override the single-capability trigger button's
+ * `aria-label` (i18n) — see that property's own doc for exactly what it
+ * does and doesn't affect.
+ */
+export class LyraAttachmentTrigger extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Which attachment capabilities to offer, in display order. A single
+         *  entry renders a plain button; more than one renders a menu. */
+        this.capabilities = ['files'];
+        /** Native-file-input-style accept string (e.g. `'image/*'` or
+         *  `'.pdf,.docx'`), forwarded to the hidden file input for the
+         *  `files`/`image` capabilities — see the class doc for how each uses it. */
+        this.accept = '';
+        /** Forwarded to the hidden file input's own `multiple` attribute. */
+        this.multiple = true;
+        this.disabled = false;
+        // Which file-backed capability the hidden input's next 'change' event
+        // belongs to -- set synchronously right before the synthetic .click(), so
+        // one shared <input> can serve both 'files' and 'image' (each wanting a
+        // different `accept`) without needing two separate hidden inputs.
+        this.pendingCapability = 'files';
+        this.onTriggerClick = () => {
+            this.activateCapability(this.capabilities[0]);
+        };
+        this.onMenuSelect = (e) => {
+            this.activateCapability(e.detail.value);
+        };
+        this.onInputChange = (e) => {
+            const input = e.target;
+            const selected = input.files;
+            if (selected && selected.length > 0) {
+                // `input.files` is a *live* view of the input's own current
+                // selection, not a frozen snapshot -- clearing `.value` below (so
+                // re-picking the exact same file still fires another 'change' next
+                // time) mutates this very object back to empty in place. A listener
+                // that reads `detail.files` synchronously (a plain `addEventListener`
+                // callback) would never notice, but anything that reads it even one
+                // microtask later (an `async` handler, a queued upload) would see an
+                // empty list. Rehoming the selected files into a fresh `DataTransfer`
+                // produces an independent `FileList` — still the real `FileList` type
+                // the `lyra-pick` contract promises, just no longer tied to this
+                // input's own live state.
+                const snapshot = new DataTransfer();
+                for (const file of selected)
+                    snapshot.items.add(file);
+                this.emit('lyra-pick', {
+                    capability: this.pendingCapability,
+                    files: snapshot.files,
+                });
+            }
+            // Clearing `.value` (not just leaving the stale selection in place)
+            // means re-picking the exact same file still fires another 'change'
+            // event next time, matching <lyra-file-input>'s identical reset.
+            input.value = '';
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    get hasFileCapability() {
+        return this.capabilities.includes('files') || this.capabilities.includes('image');
+    }
+    effectiveAccept(capability) {
+        return capability === 'image' ? this.accept || 'image/*' : this.accept;
+    }
+    activateCapability(capability) {
+        if (this.disabled)
+            return;
+        if (capability === 'camera') {
+            this.emit('lyra-camera-request');
+            return;
+        }
+        this.pendingCapability = capability;
+        const input = this.inputEl;
+        if (!input)
+            return;
+        input.accept = this.effectiveAccept(capability);
+        input.click();
+    }
+    renderHiddenInput() {
+        return html `
+      <input
+        part="hidden-input"
+        type="file"
+        tabindex="-1"
+        aria-hidden="true"
+        ?multiple=${this.multiple}
+        ?disabled=${this.disabled}
+        @change=${this.onInputChange}
+      />
+    `;
+    }
+    renderSingleTrigger(capability) {
+        const meta = CAPABILITY_META[capability];
+        return html `
+      <button
+        part="trigger"
+        class="trigger-button"
+        type="button"
+        aria-label=${this.triggerLabel ?? meta.triggerLabel}
+        title=${this.triggerTitle ?? nothing}
+        ?disabled=${this.disabled}
+        @click=${this.onTriggerClick}
+      >
+        ${meta.icon()}
+      </button>
+    `;
+    }
+    renderMenu() {
+        return html `
+      <lyra-menu part="menu" label="Add attachment" @lyra-menu-select=${this.onMenuSelect}>
+        <button
+          slot="trigger"
+          part="menu-trigger"
+          class="trigger-button"
+          type="button"
+          aria-label="Add attachment"
+          title=${this.triggerTitle ?? nothing}
+          ?disabled=${this.disabled}
+        >
+          ${paperclipIcon()}
+          <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
+        </button>
+        ${this.capabilities.map((capability) => {
+            const meta = CAPABILITY_META[capability];
+            return html `
+            <lyra-menu-item value=${capability}>
+              <span slot="icon">${meta.icon()}</span>
+              ${meta.menuLabel}
+            </lyra-menu-item>
+          `;
+        })}
+      </lyra-menu>
+    `;
+    }
+    render() {
+        const single = this.capabilities.length === 1;
+        const multi = this.capabilities.length > 1;
+        return html `
+      ${single ? this.renderSingleTrigger(this.capabilities[0]) : nothing}
+      ${multi ? this.renderMenu() : nothing}
+      ${this.hasFileCapability ? this.renderHiddenInput() : nothing}
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraAttachmentTrigger.prototype, "capabilities", void 0);
+__decorate([
+    property()
+], LyraAttachmentTrigger.prototype, "accept", void 0);
+__decorate([
+    property({ attribute: 'trigger-label' })
+], LyraAttachmentTrigger.prototype, "triggerLabel", void 0);
+__decorate([
+    property({ attribute: 'trigger-title' })
+], LyraAttachmentTrigger.prototype, "triggerTitle", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraAttachmentTrigger.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraAttachmentTrigger.prototype, "disabled", void 0);
+__decorate([
+    query('input[type="file"]')
+], LyraAttachmentTrigger.prototype, "inputEl", void 0);
+//# sourceMappingURL=attachment-trigger.class.js.map

package/dist/components/attachment-trigger/attachment-trigger.class.js.map

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

package/dist/components/attachment-trigger/attachment-trigger.d.ts

@@ -1,96 +1,4 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-import '../menu/menu.js';
-import '../menu/menu-item.js';
-export type AttachmentCapability = 'files' | 'image' | 'camera';
-/** The two capabilities that resolve to a real file selection (as opposed
- *  to `camera`, which never touches a file input -- see the class doc). */
-export type FileBackedCapability = Exclude<AttachmentCapability, 'camera'>;
-export interface AttachmentPickDetail {
-    capability: FileBackedCapability;
-    files: FileList;
-}
-/**
- * `<lyra-attachment-trigger>` — a compact attach affordance designed for a
- * chat composer's leading slot (see `<lyra-chat-composer>`'s own `leading`
- * slot, which this drops straight into, though this component has no code
- * dependency on it). Its shape adapts to how many attachment `capabilities`
- * are configured:
- *  - Exactly one capability: a single plain icon button ([part='trigger']).
- *    Activating it performs that capability's action directly.
- *  - More than one: a small anchored menu ([part='menu'], composed from
- *    `<lyra-menu>`/`<lyra-menu-item>`) listing each capability as a row.
- *
- * Two of the three capabilities (`files`, `image`) are file-picker-backed:
- * activating them opens a hidden native `<input type="file">` via a
- * synthetic `.click()`, and the resulting selection is re-emitted as
- * `lyra-pick`. `accept` is shared across both — `image` defaults it to
- * `'image/*'` unless the `accept` prop overrides it, `files` always uses
- * `accept` as-is (empty means "any file type", matching a bare native
- * `<input type="file">` with no `accept` attribute).
- *
- * **`camera` is scope-limited by design.** This component does not
- * implement any camera capture UI itself — no `getUserMedia`, no
- * `<input capture>` — because that's entirely a host/browser concern with
- * no single right answer (a desktop web app, a mobile PWA, and a native
- * wrapper all want different things here). Activating the `camera`
- * capability only fires `lyra-camera-request`; the host owns everything
- * from that point on (opening its own capture UI, then presumably handing
- * the resulting `File` back to something like `<lyra-attachment-chip>`).
- *
- * @customElement lyra-attachment-trigger
- * @event lyra-pick - A file-backed capability's hidden file input produced a
- * real selection. `detail: { capability: 'files' | 'image', files }` — a
- * real `FileList` (not a plain array), matching the native input's own
- * `.files` shape, but an independent snapshot rather than that same live
- * object — see `onInputChange`'s own doc for why a live reference would be
- * unsafe to hand out here.
- * @event lyra-camera-request - The `camera` capability was activated. No
- * detail payload — see the class doc's scope note; the host implements the
- * actual capture flow.
- * @csspart trigger - The single-capability icon button. Only rendered when `capabilities.length === 1`.
- * @csspart menu - The `<lyra-menu>` wrapper. Only rendered when `capabilities.length > 1`.
- * @csspart menu-trigger - The multi-capability button slotted into `<lyra-menu>`'s own `trigger` slot. Only rendered when `capabilities.length > 1`.
- * @csspart expand-icon - The disclosure chevron inside the multi-capability trigger button. Only rendered when `capabilities.length > 1`.
- *
- * `triggerLabel` lets a host override the single-capability trigger button's
- * `aria-label` (i18n) — see that property's own doc for exactly what it
- * does and doesn't affect.
- */
-export declare class LyraAttachmentTrigger extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** Which attachment capabilities to offer, in display order. A single
-     *  entry renders a plain button; more than one renders a menu. */
-    capabilities: AttachmentCapability[];
-    /** Native-file-input-style accept string (e.g. `'image/*'` or
-     *  `'.pdf,.docx'`), forwarded to the hidden file input for the
-     *  `files`/`image` capabilities — see the class doc for how each uses it. */
-    accept: string;
-    /** Overrides the single-capability trigger button's `aria-label`, which
-     *  otherwise comes from `CAPABILITY_META[capability].triggerLabel` (e.g.
-     *  `'Attach files'`). Set this to localize the accessible name; leave it
-     *  unset to keep the built-in English default. Only affects the
-     *  single-capability button ([part='trigger']) — the multi-capability
-     *  menu's own trigger keeps its fixed `'Add attachment'` label regardless. */
-    triggerLabel?: string;
-    /** Forwarded to the hidden file input's own `multiple` attribute. */
-    multiple: boolean;
-    disabled: boolean;
-    private inputEl?;
-    private pendingCapability;
-    private get hasFileCapability();
-    private effectiveAccept;
-    private activateCapability;
-    private onTriggerClick;
-    private onMenuSelect;
-    private onInputChange;
-    private renderHiddenInput;
-    private renderSingleTrigger;
-    private renderMenu;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-attachment-trigger': LyraAttachmentTrigger;
-    }
-}
+export * from './attachment-trigger.class.js';
+import "../menu/menu-item.js";
+import "../menu/menu.js";
+//# sourceMappingURL=attachment-trigger.d.ts.map

package/dist/components/attachment-trigger/attachment-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment-trigger.d.ts","sourceRoot":"","sources":["../../../src/components/attachment-trigger/attachment-trigger.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC;AAG9C,OAAO,sBAAsB,CAAC;AAC9B,OAAO,iBAAiB,CAAC"}

package/dist/components/attachment-trigger/attachment-trigger.js

@@ -1,270 +1,7 @@
-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, svg } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './attachment-trigger.class.js';
+import { LyraAttachmentTrigger } from './attachment-trigger.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { chevronIcon } from '../../internal/icons.js';
-import { styles } from './attachment-trigger.styles.js';
-import '../menu/menu.js';
-import '../menu/menu-item.js';
-// Mirrors the shared icon set's viewBox/stroke conventions
-// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding these
-// one-off glyphs to that module -- it's off limits here -- so they still
-// read as part of the same visual language as the rest of the library's
-// inline icons. Same approach as lyra-attachment-chip's local fileGlyph()/
-// retryIcon() and lyra-checkbox's local checkmarkGlyph().
-const ICON_VIEW_BOX = '0 0 24 24';
-const ICON_STROKE_WIDTH = '1.75';
-function icon(paths) {
-    return svg `
-    <svg
-      width="1em"
-      height="1em"
-      viewBox=${ICON_VIEW_BOX}
-      fill="none"
-      stroke="currentColor"
-      stroke-width=${ICON_STROKE_WIDTH}
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-      focusable="false"
-    >${paths}</svg>
-  `;
-}
-/** A paperclip glyph -- the generic "attach" affordance, used for the
- *  `files` capability and as the multi-capability menu's own trigger icon
- *  (the one glyph a user recognizes regardless of which capabilities the
- *  menu underneath actually offers). */
-function paperclipIcon() {
-    return icon(svg `
-    <path d="M21.44 11.05 12.25 20.24a5.5 5.5 0 0 1-7.78-7.78l9.19-9.19a3.5 3.5 0 0 1 4.95 4.95l-9.2 9.19a1.5 1.5 0 0 1-2.12-2.12l8.49-8.48"></path>
-  `);
-}
-/** A picture-frame glyph for the `image` capability. */
-function imageIcon() {
-    return icon(svg `
-    <rect x="3" y="3" width="18" height="18" rx="2"></rect>
-    <circle cx="8.5" cy="8.5" r="1.5"></circle>
-    <polyline points="21 15 16 10 5 21"></polyline>
-  `);
-}
-/** A camera-body glyph for the `camera` capability. */
-function cameraIcon() {
-    return icon(svg `
-    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2Z"></path>
-    <circle cx="12" cy="13" r="4"></circle>
-  `);
-}
-const CAPABILITY_META = {
-    files: { icon: paperclipIcon, triggerLabel: 'Attach files', menuLabel: 'Upload files' },
-    image: { icon: imageIcon, triggerLabel: 'Attach an image', menuLabel: 'Upload a photo' },
-    camera: { icon: cameraIcon, triggerLabel: 'Use camera', menuLabel: 'Take a photo' },
-};
-/**
- * `<lyra-attachment-trigger>` — a compact attach affordance designed for a
- * chat composer's leading slot (see `<lyra-chat-composer>`'s own `leading`
- * slot, which this drops straight into, though this component has no code
- * dependency on it). Its shape adapts to how many attachment `capabilities`
- * are configured:
- *  - Exactly one capability: a single plain icon button ([part='trigger']).
- *    Activating it performs that capability's action directly.
- *  - More than one: a small anchored menu ([part='menu'], composed from
- *    `<lyra-menu>`/`<lyra-menu-item>`) listing each capability as a row.
- *
- * Two of the three capabilities (`files`, `image`) are file-picker-backed:
- * activating them opens a hidden native `<input type="file">` via a
- * synthetic `.click()`, and the resulting selection is re-emitted as
- * `lyra-pick`. `accept` is shared across both — `image` defaults it to
- * `'image/*'` unless the `accept` prop overrides it, `files` always uses
- * `accept` as-is (empty means "any file type", matching a bare native
- * `<input type="file">` with no `accept` attribute).
- *
- * **`camera` is scope-limited by design.** This component does not
- * implement any camera capture UI itself — no `getUserMedia`, no
- * `<input capture>` — because that's entirely a host/browser concern with
- * no single right answer (a desktop web app, a mobile PWA, and a native
- * wrapper all want different things here). Activating the `camera`
- * capability only fires `lyra-camera-request`; the host owns everything
- * from that point on (opening its own capture UI, then presumably handing
- * the resulting `File` back to something like `<lyra-attachment-chip>`).
- *
- * @customElement lyra-attachment-trigger
- * @event lyra-pick - A file-backed capability's hidden file input produced a
- * real selection. `detail: { capability: 'files' | 'image', files }` — a
- * real `FileList` (not a plain array), matching the native input's own
- * `.files` shape, but an independent snapshot rather than that same live
- * object — see `onInputChange`'s own doc for why a live reference would be
- * unsafe to hand out here.
- * @event lyra-camera-request - The `camera` capability was activated. No
- * detail payload — see the class doc's scope note; the host implements the
- * actual capture flow.
- * @csspart trigger - The single-capability icon button. Only rendered when `capabilities.length === 1`.
- * @csspart menu - The `<lyra-menu>` wrapper. Only rendered when `capabilities.length > 1`.
- * @csspart menu-trigger - The multi-capability button slotted into `<lyra-menu>`'s own `trigger` slot. Only rendered when `capabilities.length > 1`.
- * @csspart expand-icon - The disclosure chevron inside the multi-capability trigger button. Only rendered when `capabilities.length > 1`.
- *
- * `triggerLabel` lets a host override the single-capability trigger button's
- * `aria-label` (i18n) — see that property's own doc for exactly what it
- * does and doesn't affect.
- */
-export class LyraAttachmentTrigger extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** Which attachment capabilities to offer, in display order. A single
-         *  entry renders a plain button; more than one renders a menu. */
-        this.capabilities = ['files'];
-        /** Native-file-input-style accept string (e.g. `'image/*'` or
-         *  `'.pdf,.docx'`), forwarded to the hidden file input for the
-         *  `files`/`image` capabilities — see the class doc for how each uses it. */
-        this.accept = '';
-        /** Forwarded to the hidden file input's own `multiple` attribute. */
-        this.multiple = true;
-        this.disabled = false;
-        // Which file-backed capability the hidden input's next 'change' event
-        // belongs to -- set synchronously right before the synthetic .click(), so
-        // one shared <input> can serve both 'files' and 'image' (each wanting a
-        // different `accept`) without needing two separate hidden inputs.
-        this.pendingCapability = 'files';
-        this.onTriggerClick = () => {
-            this.activateCapability(this.capabilities[0]);
-        };
-        this.onMenuSelect = (e) => {
-            this.activateCapability(e.detail.value);
-        };
-        this.onInputChange = (e) => {
-            const input = e.target;
-            const selected = input.files;
-            if (selected && selected.length > 0) {
-                // `input.files` is a *live* view of the input's own current
-                // selection, not a frozen snapshot -- clearing `.value` below (so
-                // re-picking the exact same file still fires another 'change' next
-                // time) mutates this very object back to empty in place. A listener
-                // that reads `detail.files` synchronously (a plain `addEventListener`
-                // callback) would never notice, but anything that reads it even one
-                // microtask later (an `async` handler, a queued upload) would see an
-                // empty list. Rehoming the selected files into a fresh `DataTransfer`
-                // produces an independent `FileList` — still the real `FileList` type
-                // the `lyra-pick` contract promises, just no longer tied to this
-                // input's own live state.
-                const snapshot = new DataTransfer();
-                for (const file of selected)
-                    snapshot.items.add(file);
-                this.emit('lyra-pick', {
-                    capability: this.pendingCapability,
-                    files: snapshot.files,
-                });
-            }
-            // Clearing `.value` (not just leaving the stale selection in place)
-            // means re-picking the exact same file still fires another 'change'
-            // event next time, matching <lyra-file-input>'s identical reset.
-            input.value = '';
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    get hasFileCapability() {
-        return this.capabilities.includes('files') || this.capabilities.includes('image');
-    }
-    effectiveAccept(capability) {
-        return capability === 'image' ? this.accept || 'image/*' : this.accept;
-    }
-    activateCapability(capability) {
-        if (this.disabled)
-            return;
-        if (capability === 'camera') {
-            this.emit('lyra-camera-request');
-            return;
-        }
-        this.pendingCapability = capability;
-        const input = this.inputEl;
-        if (!input)
-            return;
-        input.accept = this.effectiveAccept(capability);
-        input.click();
-    }
-    renderHiddenInput() {
-        return html `
-      <input
-        type="file"
-        tabindex="-1"
-        aria-hidden="true"
-        ?multiple=${this.multiple}
-        ?disabled=${this.disabled}
-        @change=${this.onInputChange}
-      />
-    `;
-    }
-    renderSingleTrigger(capability) {
-        const meta = CAPABILITY_META[capability];
-        return html `
-      <button
-        part="trigger"
-        class="trigger-button"
-        type="button"
-        aria-label=${this.triggerLabel ?? meta.triggerLabel}
-        ?disabled=${this.disabled}
-        @click=${this.onTriggerClick}
-      >
-        ${meta.icon()}
-      </button>
-    `;
-    }
-    renderMenu() {
-        return html `
-      <lyra-menu part="menu" label="Add attachment" @lyra-menu-select=${this.onMenuSelect}>
-        <button
-          slot="trigger"
-          part="menu-trigger"
-          class="trigger-button"
-          type="button"
-          aria-label="Add attachment"
-          ?disabled=${this.disabled}
-        >
-          ${paperclipIcon()}
-          <span part="expand-icon" aria-hidden="true">${chevronIcon()}</span>
-        </button>
-        ${this.capabilities.map((capability) => {
-            const meta = CAPABILITY_META[capability];
-            return html `
-            <lyra-menu-item value=${capability}>
-              <span slot="icon">${meta.icon()}</span>
-              ${meta.menuLabel}
-            </lyra-menu-item>
-          `;
-        })}
-      </lyra-menu>
-    `;
-    }
-    render() {
-        const single = this.capabilities.length === 1;
-        const multi = this.capabilities.length > 1;
-        return html `
-      ${single ? this.renderSingleTrigger(this.capabilities[0]) : nothing}
-      ${multi ? this.renderMenu() : nothing}
-      ${this.hasFileCapability ? this.renderHiddenInput() : nothing}
-    `;
-    }
-}
-__decorate([
-    property({ attribute: false })
-], LyraAttachmentTrigger.prototype, "capabilities", void 0);
-__decorate([
-    property()
-], LyraAttachmentTrigger.prototype, "accept", void 0);
-__decorate([
-    property({ attribute: 'trigger-label' })
-], LyraAttachmentTrigger.prototype, "triggerLabel", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraAttachmentTrigger.prototype, "multiple", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraAttachmentTrigger.prototype, "disabled", void 0);
-__decorate([
-    query('input[type="file"]')
-], LyraAttachmentTrigger.prototype, "inputEl", void 0);
+import "../menu/menu-item.js";
+import "../menu/menu.js";
 defineElement('attachment-trigger', LyraAttachmentTrigger);
+//# sourceMappingURL=attachment-trigger.js.map