@aceshooting/lyra-ui 1.2.0 → 2.0.0

package/dist/components/app-rail/app-rail.styles.js

@@ -0,0 +1,125 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    /* Component-specific sizing -- not shared design tokens, so a consumer
+       can retheme any of them without a raw literal leaking into the public
+       API (same rationale as lyra-dialog's --lyra-dialog-overlay-color and
+       lyra-widget's --lyra-widget-overlay-color). */
+    --lyra-app-rail-width: 15rem;
+    --lyra-app-rail-icon-width: 4rem;
+    --lyra-app-rail-mobile-width: 18rem;
+    --lyra-app-rail-overlay-color: rgb(0 0 0 / 0.5);
+  }
+
+  [part='toggle'] {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+    cursor: pointer;
+  }
+  :host([mode='mobile']) [part='toggle'] {
+    display: inline-flex;
+  }
+  [part='toggle']:hover {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  [part='toggle']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+
+  [part='backdrop'] {
+    position: fixed;
+    inset: 0;
+    z-index: 999;
+    background: var(--lyra-app-rail-overlay-color);
+  }
+
+  /* [part="base"]/[part="panel"] are the SAME element -- this
+     component promotes it in place for the mobile overlay (mirrors
+     lyra-widget's fullscreen mode) rather than duplicating the slotted nav
+     content into a second element, which slot projection can't do anyway
+     (a light-DOM node can only be assigned to one <slot> at a time). Its
+     part attribute switches between the two names per render, so the two
+     rulesets below are always mutually exclusive on it. */
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    inline-size: var(--lyra-app-rail-width);
+    block-size: 100%;
+    border-inline-end: 1px solid var(--lyra-color-border);
+    background: var(--lyra-color-surface);
+    overflow-y: auto;
+    transition: inline-size var(--lyra-transition-base);
+  }
+  :host([mode='icon-only']) [part='base'] {
+    inline-size: var(--lyra-app-rail-icon-width);
+  }
+
+  [part='panel'] {
+    position: fixed;
+    inset-block: 0;
+    inset-inline-start: 0;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    inline-size: min(var(--lyra-app-rail-mobile-width), 85vw);
+    background: var(--lyra-color-surface);
+    box-shadow: var(--lyra-shadow);
+    overflow-y: auto;
+    transform: translateX(-100%);
+    transition: transform var(--lyra-transition-base);
+  }
+  /* translateX is a physical transform -- CSS logical properties don't cover
+     it -- so the offscreen direction is flipped explicitly for RTL via
+     :dir() rather than needing internal/rtl.ts's JS helper (that helper is
+     for pointer/keyboard math that can't be expressed in CSS at all; this
+     can). */
+  :host(:dir(rtl)) [part='panel'] {
+    transform: translateX(100%);
+  }
+  :host([mode='mobile'][open]) [part='panel'] {
+    transform: translateX(0);
+  }
+
+  [part='header'] {
+    padding: var(--lyra-space-m);
+    border-block-end: 1px solid var(--lyra-color-border);
+  }
+  [part='header'][hidden] {
+    display: none;
+  }
+  [part='footer'] {
+    padding: var(--lyra-space-m);
+    border-block-start: 1px solid var(--lyra-color-border);
+  }
+  [part='footer'][hidden] {
+    display: none;
+  }
+  [part='nav'] {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: var(--lyra-space-s);
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+  }
+  :host([mode='icon-only']) [part='nav'] {
+    align-items: center;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='base'],
+    [part='panel'] {
+      transition: none !important;
+    }
+  }
+`;

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

@@ -0,0 +1,114 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type AttachmentChipStatus = 'pending' | 'uploading' | 'error' | 'done';
+export interface AttachmentChipIdDetail {
+    id: string;
+}
+/**
+ * `512` -> `"512 B"`; `2415919` -> `"2.3 MB"`. Whole bytes never get a
+ * decimal (there's no meaningful fraction of a byte); every unit past that
+ * gets exactly one decimal place. Returns `""` for a negative/non-finite
+ * input so a missing/unknown size renders nothing instead of `"NaN B"`.
+ */
+export declare function formatFileSize(bytes: number): string;
+/**
+ * `<lyra-attachment-chip>` — a compact chip representing one file queued for
+ * (or already part of) a chat message: a composer's pre-send attachment
+ * tray, or a sent message's `attachments` slot (see `<lyra-chat-message>`).
+ *
+ * Two independent ways to populate it, matching the two points in a message's
+ * lifecycle this is used at:
+ *  - Set `file` to a real `File` (fresh from a picker/drop) — `name`, `size`,
+ *    `mime-type` and the image thumbnail are all auto-derived from it.
+ *  - Set the plain `name`/`size`/`mime-type`/`thumbnail-src` props instead,
+ *    for reconstructing a chip from server-persisted attachment metadata
+ *    (e.g. after a page reload, when no real `File` object exists any more).
+ *
+ * `file` always wins when both are present — see each accessor's own doc.
+ * The image thumbnail for a real `File` is a lazily-created (only once the
+ * thumbnail is actually about to render, not eagerly on assignment)
+ * `URL.createObjectURL()` blob URL, revoked automatically once `file`
+ * changes away from the object it was created for, and on disconnect — this
+ * component never leaks a blob URL.
+ *
+ * Identifying *which* attachment a `lyra-remove`/`lyra-retry` event is about:
+ * this deliberately reuses the platform's own `id`/`id` attribute (every
+ * element already has one; there's no need to shadow it with a second,
+ * differently-named Lit property, unlike e.g. `<lyra-tool-call-chip>`'s
+ * `call-id` which identifies a *call*, a concept distinct from the chip
+ * element itself). Set `id="..."` when you have a stable server-side
+ * attachment id. When `id` is left unset and `file` is set, a stable id is
+ * derived from `` `${file.name}:${file.size}:${file.lastModified}` `` — stable
+ * across re-renders of the *same* `File` object without requiring the
+ * consumer to invent one. When neither is available, a generated internal id
+ * is used as a last resort so the event always has *some* id.
+ *
+ * @customElement lyra-attachment-chip
+ * @event lyra-remove - The user activated the remove (×) button. `detail: { id }`. Only rendered while `removable`.
+ * @event lyra-retry - The user activated the retry button. `detail: { id }`. Only rendered while `status="error"`.
+ * @csspart base - The chip's root container.
+ * @csspart thumbnail - The leading image thumbnail / generic file glyph.
+ * @csspart meta - Wrapper around `name` and `size`.
+ * @csspart name - The filename (ellipsis-truncated via CSS; the untruncated name is always available via the native `title` tooltip).
+ * @csspart size - The human-readable formatted file size. Hidden when no size is known.
+ * @csspart status-text - The visible text twin of the status accent color — carries the state in text, not just color. Empty/hidden for `pending`/`done`.
+ * @csspart progress - The numeric upload progress bar (`role="progressbar"`), shown only while `status="uploading"` and `progress` is a meaningful (>0) number.
+ * @csspart progress-fill - The filled portion of `progress`.
+ * @csspart spinner - The indeterminate upload spinner, shown instead of `progress` while `status="uploading"` and `progress` is unset/0.
+ * @csspart retry-button - The retry affordance, only rendered while `status="error"`.
+ * @csspart remove-button - The remove (×) affordance, only rendered while `removable`.
+ */
+export declare class LyraAttachmentChip extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** A real `File`, e.g. fresh from `<lyra-file-input>`'s `lyra-files` event.
+     *  When set, `name`/`size`/`mime-type`/the image thumbnail are all derived
+     *  from it, taking precedence over the independent props below. */
+    file?: File;
+    /** Filename, used only while `file` is unset. */
+    name: string;
+    /** File size in bytes, used only while `file` is unset. */
+    size: number;
+    /** MIME type, used only while `file` is unset. */
+    mimeType: string;
+    /** Thumbnail image URL, used only while `file` is unset (a real `File`'s
+     *  thumbnail always comes from a generated object URL instead — see the
+     *  class doc). Unlike the other independent props this one has no
+     *  `file`-derived equivalent to defer to for a non-image file; it's simply
+     *  rendered whenever present. */
+    thumbnailSrc: string;
+    /** Lifecycle state — drives the accent tint and which of `progress`/`spinner`/`retry-button` renders. */
+    status: AttachmentChipStatus;
+    /** Upload completion, 0-100. Only meaningful while `status="uploading"`;
+     *  a value of 0 (the default) or `NaN` falls back to the indeterminate spinner. */
+    progress: number;
+    /** Shows the remove (×) button. */
+    removable: boolean;
+    private objectUrl?;
+    private objectUrlFile?;
+    private readonly fallbackId;
+    private get effectiveName();
+    private get effectiveSize();
+    private get effectiveMimeType();
+    private get resolvedId();
+    private get hasNumericProgress();
+    private get clampedProgress();
+    /** Returns (creating or reusing as needed) the object URL for `file`'s
+     *  image thumbnail. Only ever called from `render()`, i.e. only once a
+     *  thumbnail is actually about to be painted -- never eagerly from a
+     *  `file`/`willUpdate`/`updated` property-change hook -- so a `file` that's
+     *  reassigned several times before the next paint never creates URLs that
+     *  are immediately thrown away unused. */
+    private ensureObjectUrl;
+    private revokeObjectUrl;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private onRemoveClick;
+    private onRetryClick;
+    private renderThumbnail;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-attachment-chip': LyraAttachmentChip;
+    }
+}

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

@@ -0,0 +1,312 @@
+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, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { nextId } from '../../internal/a11y.js';
+import { closeIcon } from '../../internal/icons.js';
+import { styles } from './attachment-chip.styles.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding a
+// generic-file glyph to that module -- it's off limits here -- so this one-off
+// icon still reads as part of the same visual language as the rest of the
+// library's inline icons. `closeIcon()` itself already exists there and is
+// imported directly rather than duplicated (see `<lyra-toast-item>`'s /
+// `<lyra-widget>`'s identical import for the same remove/dismiss glyph).
+const ICON_VIEW_BOX = '0 0 24 24';
+const ICON_STROKE_WIDTH = '1.75';
+/** A generic "document" glyph, used as the thumbnail for any non-image file. */
+function fileGlyph() {
+    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"
+    ><path d="M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
+  `;
+}
+// Same shape as `<lyra-chat-message>`'s local `retryIcon()` -- duplicated
+// rather than imported (these are two independent, separately-consumable
+// components) but kept visually identical so a retry affordance reads the
+// same wherever it shows up in the library.
+function retryIcon() {
+    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"
+    ><polyline points="1 4 1 10 7 10"></polyline><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path></svg>
+  `;
+}
+const BYTE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
+/**
+ * `512` -> `"512 B"`; `2415919` -> `"2.3 MB"`. Whole bytes never get a
+ * decimal (there's no meaningful fraction of a byte); every unit past that
+ * gets exactly one decimal place. Returns `""` for a negative/non-finite
+ * input so a missing/unknown size renders nothing instead of `"NaN B"`.
+ */
+export function formatFileSize(bytes) {
+    if (!Number.isFinite(bytes) || bytes < 0)
+        return '';
+    if (bytes < 1024)
+        return `${Math.round(bytes)} B`;
+    let value = bytes;
+    let unitIndex = 0;
+    while (value >= 1024 && unitIndex < BYTE_UNITS.length - 1) {
+        value /= 1024;
+        unitIndex++;
+    }
+    return `${value.toFixed(1)} ${BYTE_UNITS[unitIndex]}`;
+}
+/** Visible (not just color-coded) text for every non-resting status --
+ *  `'pending'`/`'done'` render nothing here, they're resting states. */
+function statusText(status, progress) {
+    if (status === 'error')
+        return 'Upload failed';
+    if (status === 'uploading') {
+        return Number.isFinite(progress) && progress > 0 ? `Uploading ${Math.round(Math.min(100, progress))}%` : 'Uploading…';
+    }
+    return '';
+}
+/**
+ * `<lyra-attachment-chip>` — a compact chip representing one file queued for
+ * (or already part of) a chat message: a composer's pre-send attachment
+ * tray, or a sent message's `attachments` slot (see `<lyra-chat-message>`).
+ *
+ * Two independent ways to populate it, matching the two points in a message's
+ * lifecycle this is used at:
+ *  - Set `file` to a real `File` (fresh from a picker/drop) — `name`, `size`,
+ *    `mime-type` and the image thumbnail are all auto-derived from it.
+ *  - Set the plain `name`/`size`/`mime-type`/`thumbnail-src` props instead,
+ *    for reconstructing a chip from server-persisted attachment metadata
+ *    (e.g. after a page reload, when no real `File` object exists any more).
+ *
+ * `file` always wins when both are present — see each accessor's own doc.
+ * The image thumbnail for a real `File` is a lazily-created (only once the
+ * thumbnail is actually about to render, not eagerly on assignment)
+ * `URL.createObjectURL()` blob URL, revoked automatically once `file`
+ * changes away from the object it was created for, and on disconnect — this
+ * component never leaks a blob URL.
+ *
+ * Identifying *which* attachment a `lyra-remove`/`lyra-retry` event is about:
+ * this deliberately reuses the platform's own `id`/`id` attribute (every
+ * element already has one; there's no need to shadow it with a second,
+ * differently-named Lit property, unlike e.g. `<lyra-tool-call-chip>`'s
+ * `call-id` which identifies a *call*, a concept distinct from the chip
+ * element itself). Set `id="..."` when you have a stable server-side
+ * attachment id. When `id` is left unset and `file` is set, a stable id is
+ * derived from `` `${file.name}:${file.size}:${file.lastModified}` `` — stable
+ * across re-renders of the *same* `File` object without requiring the
+ * consumer to invent one. When neither is available, a generated internal id
+ * is used as a last resort so the event always has *some* id.
+ *
+ * @customElement lyra-attachment-chip
+ * @event lyra-remove - The user activated the remove (×) button. `detail: { id }`. Only rendered while `removable`.
+ * @event lyra-retry - The user activated the retry button. `detail: { id }`. Only rendered while `status="error"`.
+ * @csspart base - The chip's root container.
+ * @csspart thumbnail - The leading image thumbnail / generic file glyph.
+ * @csspart meta - Wrapper around `name` and `size`.
+ * @csspart name - The filename (ellipsis-truncated via CSS; the untruncated name is always available via the native `title` tooltip).
+ * @csspart size - The human-readable formatted file size. Hidden when no size is known.
+ * @csspart status-text - The visible text twin of the status accent color — carries the state in text, not just color. Empty/hidden for `pending`/`done`.
+ * @csspart progress - The numeric upload progress bar (`role="progressbar"`), shown only while `status="uploading"` and `progress` is a meaningful (>0) number.
+ * @csspart progress-fill - The filled portion of `progress`.
+ * @csspart spinner - The indeterminate upload spinner, shown instead of `progress` while `status="uploading"` and `progress` is unset/0.
+ * @csspart retry-button - The retry affordance, only rendered while `status="error"`.
+ * @csspart remove-button - The remove (×) affordance, only rendered while `removable`.
+ */
+export class LyraAttachmentChip extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Filename, used only while `file` is unset. */
+        this.name = '';
+        /** File size in bytes, used only while `file` is unset. */
+        this.size = 0;
+        /** MIME type, used only while `file` is unset. */
+        this.mimeType = '';
+        /** Thumbnail image URL, used only while `file` is unset (a real `File`'s
+         *  thumbnail always comes from a generated object URL instead — see the
+         *  class doc). Unlike the other independent props this one has no
+         *  `file`-derived equivalent to defer to for a non-image file; it's simply
+         *  rendered whenever present. */
+        this.thumbnailSrc = '';
+        /** Lifecycle state — drives the accent tint and which of `progress`/`spinner`/`retry-button` renders. */
+        this.status = 'pending';
+        /** Upload completion, 0-100. Only meaningful while `status="uploading"`;
+         *  a value of 0 (the default) or `NaN` falls back to the indeterminate spinner. */
+        this.progress = 0;
+        /** Shows the remove (×) button. */
+        this.removable = true;
+        // Last-resort id, generated once per instance -- see the class doc's
+        // "Identifying which attachment..." section.
+        this.fallbackId = nextId('attachment-chip');
+        this.onRemoveClick = () => {
+            this.emit('lyra-remove', { id: this.resolvedId });
+        };
+        this.onRetryClick = () => {
+            this.emit('lyra-retry', { id: this.resolvedId });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    get effectiveName() {
+        return this.file ? this.file.name : this.name;
+    }
+    get effectiveSize() {
+        return this.file ? this.file.size : this.size;
+    }
+    get effectiveMimeType() {
+        return this.file ? this.file.type : this.mimeType;
+    }
+    get resolvedId() {
+        if (this.id)
+            return this.id;
+        if (this.file)
+            return `${this.file.name}:${this.file.size}:${this.file.lastModified}`;
+        return this.fallbackId;
+    }
+    get hasNumericProgress() {
+        return this.status === 'uploading' && Number.isFinite(this.progress) && this.progress > 0;
+    }
+    get clampedProgress() {
+        return Math.min(100, Math.max(0, this.progress));
+    }
+    /** Returns (creating or reusing as needed) the object URL for `file`'s
+     *  image thumbnail. Only ever called from `render()`, i.e. only once a
+     *  thumbnail is actually about to be painted -- never eagerly from a
+     *  `file`/`willUpdate`/`updated` property-change hook -- so a `file` that's
+     *  reassigned several times before the next paint never creates URLs that
+     *  are immediately thrown away unused. */
+    ensureObjectUrl(file) {
+        if (this.objectUrlFile === file && this.objectUrl)
+            return this.objectUrl;
+        this.revokeObjectUrl();
+        this.objectUrl = URL.createObjectURL(file);
+        this.objectUrlFile = file;
+        return this.objectUrl;
+    }
+    revokeObjectUrl() {
+        if (this.objectUrl)
+            URL.revokeObjectURL(this.objectUrl);
+        this.objectUrl = undefined;
+        this.objectUrlFile = undefined;
+    }
+    updated(changed) {
+        // `file` changed to a different object (including to `undefined`) since
+        // the URL currently held was created -- it no longer represents anything
+        // this chip still shows, so revoke it now rather than waiting for a
+        // render that may never again call `ensureObjectUrl()` (e.g. the new
+        // `file` isn't an image, or is unset).
+        if (changed.has('file') && this.objectUrlFile && this.objectUrlFile !== this.file) {
+            this.revokeObjectUrl();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.revokeObjectUrl();
+    }
+    renderThumbnail() {
+        if (this.file) {
+            return this.effectiveMimeType.startsWith('image/')
+                ? html `<img src=${this.ensureObjectUrl(this.file)} alt="" />`
+                : html `${fileGlyph()}`;
+        }
+        // No `file`: `thumbnail-src` is used whenever present, regardless of
+        // `mime-type` -- a server-generated preview thumbnail (e.g. a rendered
+        // first page of a PDF) is itself always an image, independent of the
+        // *source* file's own MIME type.
+        return this.thumbnailSrc ? html `<img src=${this.thumbnailSrc} alt="" />` : html `${fileGlyph()}`;
+    }
+    render() {
+        const name = this.effectiveName;
+        const displayName = name || 'Untitled file';
+        // A `0`-byte size reads the same as "unknown" here (there's no prop to
+        // distinguish a genuinely empty file from a size that was simply never
+        // supplied) -- hide the part entirely rather than show a literal "0 B".
+        const sizeText = this.effectiveSize > 0 ? formatFileSize(this.effectiveSize) : '';
+        const text = statusText(this.status, this.progress);
+        const uploading = this.status === 'uploading';
+        return html `
+      <div part="base">
+        <span part="thumbnail" aria-hidden="true">${this.renderThumbnail()}</span>
+        <span part="meta">
+          <span part="name" title=${name || 'Untitled file'}>${displayName}</span>
+          <span part="size" ?hidden=${!sizeText}>${sizeText || nothing}</span>
+          <span part="status-text" ?hidden=${!text}>${text || nothing}</span>
+        </span>
+        ${uploading
+            ? this.hasNumericProgress
+                ? html `
+                <div
+                  part="progress"
+                  role="progressbar"
+                  aria-valuenow=${Math.round(this.clampedProgress)}
+                  aria-valuemin="0"
+                  aria-valuemax="100"
+                  aria-label=${`Uploading ${displayName}`}
+                >
+                  <div part="progress-fill" style=${`inline-size:${this.clampedProgress}%`}></div>
+                </div>
+              `
+                : html `<span part="spinner" role="status" aria-label=${`Uploading ${displayName}`}></span>`
+            : nothing}
+        ${this.status === 'error'
+            ? html `<button part="retry-button" type="button" aria-label=${`Retry ${displayName}`} @click=${this.onRetryClick}>
+              ${retryIcon()}
+            </button>`
+            : nothing}
+        ${this.removable
+            ? html `<button part="remove-button" type="button" aria-label=${`Remove ${displayName}`} @click=${this.onRemoveClick}>
+              ${closeIcon()}
+            </button>`
+            : nothing}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraAttachmentChip.prototype, "file", void 0);
+__decorate([
+    property()
+], LyraAttachmentChip.prototype, "name", void 0);
+__decorate([
+    property({ type: Number })
+], LyraAttachmentChip.prototype, "size", void 0);
+__decorate([
+    property({ attribute: 'mime-type' })
+], LyraAttachmentChip.prototype, "mimeType", void 0);
+__decorate([
+    property({ attribute: 'thumbnail-src' })
+], LyraAttachmentChip.prototype, "thumbnailSrc", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraAttachmentChip.prototype, "status", void 0);
+__decorate([
+    property({ type: Number })
+], LyraAttachmentChip.prototype, "progress", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraAttachmentChip.prototype, "removable", void 0);
+__decorate([
+    state()
+], LyraAttachmentChip.prototype, "objectUrl", void 0);
+defineElement('attachment-chip', LyraAttachmentChip);

package/dist/components/attachment-chip/attachment-chip.styles.d.ts

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