@aceshooting/lyra-ui 1.2.0 → 2.0.0

package/dist/components/context-meter/context-meter.styles.js

@@ -0,0 +1,120 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    inline-size: 100%;
+  }
+  :host([variant='ring']) {
+    display: inline-block;
+    inline-size: 8em;
+    block-size: 8em;
+  }
+
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+  }
+  :host([variant='ring']) [part='base'] {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  [part='label'] {
+    font-size: 0.75rem;
+    color: var(--lyra-color-text-quiet);
+    font-family: var(--lyra-font);
+  }
+
+  /* --- bar variant ------------------------------------------------- */
+  [part='track'] {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    overflow: hidden;
+    block-size: 0.5rem;
+    border-radius: calc(var(--lyra-radius) * 0.5);
+    /* Quiet neutral fill for the unfilled remainder -- deliberately lighter
+       than a 'neutral'-tone segment (var(--lyra-color-border) at full
+       strength below) so "counted but uncolored" data still reads as
+       visually distinct from "not counted at all". */
+    background: color-mix(in srgb, var(--lyra-color-border) 30%, transparent);
+  }
+  [part='segment'] {
+    display: block;
+    flex: 0 0 auto;
+    block-size: 100%;
+    background: var(--lyra-color-border);
+    transition: flex-basis var(--lyra-transition-base);
+  }
+  /* A hairline seam between adjacent segments -- painted in the surface
+     color rather than as real gap spacing, so two same-tone segments next
+     to each other (e.g. two 'neutral' entries) still read as separate
+     quantities instead of merging into one block. Logical property keeps it
+     RTL-correct without extra math. */
+  [part='segment']:not(:first-of-type) {
+    border-inline-start: 1px solid var(--lyra-color-surface);
+  }
+  [part='segment'][data-tone='brand'] {
+    background: var(--lyra-color-brand);
+  }
+  [part='segment'][data-tone='success'] {
+    background: var(--lyra-color-success);
+  }
+  [part='segment'][data-tone='warning'] {
+    background: var(--lyra-color-warning);
+  }
+  [part='segment'][data-tone='danger'] {
+    background: var(--lyra-color-danger);
+  }
+  [part='segment'][data-tone='neutral'] {
+    background: var(--lyra-color-border);
+  }
+
+  /* --- ring variant -------------------------------------------------- */
+  :host([variant='ring']) svg[part='base'] {
+    display: block;
+    overflow: visible;
+  }
+  :host([variant='ring']) [part='track'] {
+    fill: none;
+    stroke: color-mix(in srgb, var(--lyra-color-border) 30%, transparent);
+  }
+  :host([variant='ring']) [part='segment'] {
+    fill: none;
+    stroke: var(--lyra-color-border);
+    /* Butt (not round) caps -- round caps on tightly-packed segmented arcs
+       bleed past the exact boundary and overlap the next segment's color. */
+    stroke-linecap: butt;
+    transition:
+      stroke-dasharray var(--lyra-transition-base),
+      stroke-dashoffset var(--lyra-transition-base);
+  }
+  :host([variant='ring']) [part='segment'][data-tone='brand'] {
+    stroke: var(--lyra-color-brand);
+  }
+  :host([variant='ring']) [part='segment'][data-tone='success'] {
+    stroke: var(--lyra-color-success);
+  }
+  :host([variant='ring']) [part='segment'][data-tone='warning'] {
+    stroke: var(--lyra-color-warning);
+  }
+  :host([variant='ring']) [part='segment'][data-tone='danger'] {
+    stroke: var(--lyra-color-danger);
+  }
+  :host([variant='ring']) [part='segment'][data-tone='neutral'] {
+    stroke: var(--lyra-color-border);
+  }
+  :host([variant='ring']) [part='label'] {
+    text-anchor: middle;
+    fill: var(--lyra-color-text-quiet);
+    font-size: 0.625rem;
+    text-transform: uppercase;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='segment'] {
+      transition: none !important;
+    }
+  }
+`;

package/dist/components/conversation-item/conversation-item.d.ts

@@ -0,0 +1,128 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface ConversationItemRenameDetail {
+    title: string;
+}
+/**
+ * `<lyra-conversation-item>` — a selectable row representing one chat
+ * session in a history sidebar list. Usable standalone or as the
+ * `renderItem()` payload of a sibling virtualized-list component; this
+ * module has no dependency on that (or any) other component.
+ *
+ * Takes `title`/`excerpt`/`timestamp` as individual primitive props rather
+ * than one opaque bound object, deliberately consistent with how
+ * `<lyra-chat-message>` takes individual props instead of a single
+ * `.message` blob -- every other component in this family follows that
+ * shape, so this one does too even though a single bound `.session` object
+ * would also have been a reasonable design.
+ *
+ * Identifying *which* session a `lyra-select` click/keypress was about: this
+ * reuses the platform's own `id` attribute (every element already has one)
+ * rather than inventing a second, differently-named id-carrying prop --
+ * consumers already have the event's `target`/`currentTarget` (and thus
+ * `.id`), the same reasoning `<lyra-attachment-chip>` documents for its own
+ * identically-shaped choice. `lyra-select` therefore carries no detail
+ * payload at all.
+ *
+ * `role="option"` (not `"button"`) on `[part="option"]`, since this is meant
+ * to live inside a `role="listbox"` history list (that future list
+ * component supplies the listbox/group ancestor `role="option"` requires)
+ * rather than stand in for a single push-button action. Used truly
+ * standalone -- with no listbox/group ancestor -- it's still fully
+ * operable, just technically missing that ARIA parent context; wrap it in a
+ * `role="listbox"` (or `role="group"`) container to satisfy that when
+ * accessibility-auditing a standalone usage.
+ *
+ * `role="option"` (like native `<option>`/`role="button"`) forbids focusable
+ * descendants -- verified against axe-core's `nested-interactive` rule,
+ * which flags it. That's why the rename button and the `actions` slot are
+ * rendered as DOM *siblings* of `[part="option"]` (both inside
+ * `[part="base"]`) rather than nested inside it: `[part="option"]` only ever
+ * contains plain text/`<time>` content. The in-place rename `<input>` is the
+ * same problem one level deeper -- it replaces the title *inside*
+ * `[part="option"]` while renaming -- so `[part="option"]` sheds its
+ * `role`/`tabindex`/`aria-selected`/`aria-label` entirely for the duration
+ * of an edit. This isn't just an ARIA-compliance workaround: a row mid-edit
+ * genuinely isn't a selectable listbox choice at that moment, it's a text
+ * field, so suspending the option semantics is also the more accurate
+ * description of what's on screen.
+ *
+ * Inline rename is a dedicated pencil/edit icon button (not a double-click
+ * on the title) -- double-click has no keyboard/screen-reader equivalent
+ * and would silently swallow the row's own single-click `lyra-select`,
+ * whereas a button is independently focusable, has its own accessible name,
+ * and composes cleanly with click-to-select.
+ *
+ * @customElement lyra-conversation-item
+ * @slot actions - Overflow/icon-button controls (e.g. a future pin/delete
+ * button) rendered at the trailing edge of the row. `lyra-menu` doesn't
+ * exist yet in this phase, so this is a plain slot for whatever a consumer
+ * wants to put there today.
+ * @event lyra-select - The row was activated: a click on `[part="option"]`
+ * (i.e. outside the rename button and the `actions` slot), or Enter/Space
+ * while it's focused -- in both cases only while not currently renaming. No
+ * detail payload -- see the class doc's "Identifying which session" note.
+ * @event lyra-rename - An in-place rename was committed (Enter, or blur
+ * while editing). `detail: { title }`. Does not mutate `title` itself --
+ * this is a controlled component, the same convention
+ * `<lyra-chat-message>` follows by not clearing its own state on retry; the
+ * consumer applies the new title once it's actually persisted. Not fired
+ * when the trimmed draft is empty or unchanged from the original `title`
+ * (that's treated as an implicit cancel).
+ * @csspart base - The outer row wrapper (plain, no ARIA role) laying out `[part="option"]`, the rename button, and `actions`.
+ * @csspart option - The selectable region (`role="option"`, removed while renaming -- see the class doc). Wraps `content` and `timestamp`.
+ * @csspart content - Wrapper around the title and excerpt.
+ * @csspart title - The title text, shown while not renaming.
+ * @csspart title-input - The in-place rename `<input>`, shown only while renaming.
+ * @csspart rename-button - The pencil/edit affordance that starts a rename (only rendered while `editable` and not already renaming).
+ * @csspart excerpt - The last-message preview snippet. Only rendered when `excerpt` is non-empty.
+ * @csspart timestamp - The formatted `timestamp`, rendered in a `<time>` element. Only rendered when `timestamp` is set and valid.
+ * @csspart actions - The wrapper around the `actions` slot.
+ */
+export declare class LyraConversationItem extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The session's display title. */
+    title: string;
+    /** A short preview snippet of the last message. Omit for no excerpt line. */
+    excerpt: string;
+    /** When the session was last active. Accepts a `Date` or anything
+     *  `new Date()` can parse (e.g. an ISO 8601 string); invalid input is
+     *  treated the same as unset (no timestamp rendered) -- mirrors
+     *  `<lyra-chat-message>`'s identical `timestamp` prop. */
+    timestamp?: Date | string;
+    /** Overrides the default absolute-time rendering of `timestamp` -- this
+     *  library has no i18n system of its own, so an overridable formatter is
+     *  the established way to hand locale-sensitive display back to the
+     *  consumer (mirrors `<lyra-chat-message>`'s identical `formatTimestamp`). */
+    formatTimestamp?: (date: Date) => string;
+    /** Whether this is the currently-selected/open session. Drives the
+     *  brand-quiet background treatment. */
+    active: boolean;
+    /** Whether inline-rename is available at all. When `false`, the rename
+     *  button never renders and the row can never enter its editing state. */
+    editable: boolean;
+    private renaming;
+    private draftTitle;
+    private hasActionsSlot;
+    private titleInput?;
+    protected willUpdate(): void;
+    protected updated(changed: PropertyValues): void;
+    private get normalizedTimestamp();
+    private select;
+    private startRename;
+    private commitRename;
+    private cancelRename;
+    private onOptionClick;
+    private onOptionKeyDown;
+    private onRenameButtonClick;
+    private onTitleInputChange;
+    private onTitleInputKeyDown;
+    private onTitleInputBlur;
+    private onActionsSlotChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-conversation-item': LyraConversationItem;
+    }
+}

package/dist/components/conversation-item/conversation-item.js

@@ -0,0 +1,322 @@
+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, query } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { styles } from './conversation-item.styles.js';
+// Mirrors the shared icon set's viewBox/stroke conventions
+// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without adding a
+// pencil/edit 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. Same approach lyra-checkbox's own local
+// checkmark/indeterminate glyphs and lyra-chat-message's local retryIcon()
+// take for the identical reason.
+const ICON_VIEW_BOX = '0 0 24 24';
+const ICON_STROKE_WIDTH = '1.75';
+function pencilIcon() {
+    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="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"></path></svg>
+  `;
+}
+/** `Intl.DateTimeFormat`-based absolute formatter -- clock time ("3:45 PM")
+ *  for a timestamp that falls on the same calendar day as `now`, otherwise a
+ *  calendar date ("Jul 10", or "Jul 10, 2024" once it's not the current
+ *  year). Deliberately not a fuzzy "2 hours ago" relative string -- bucketed
+ *  relative time (grouping a whole history list into "Today"/"Yesterday"/
+ *  "Last 7 days" sections) is a separate, later-phase concern at the list
+ *  level, not this single row's job. `formatTimestamp` overrides this
+ *  entirely, mirroring `<lyra-chat-message>`'s identical override hook. */
+function defaultFormatTimestamp(date, now = new Date()) {
+    const sameDay = date.toDateString() === now.toDateString();
+    if (sameDay) {
+        return new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(date);
+    }
+    const sameYear = date.getFullYear() === now.getFullYear();
+    return new Intl.DateTimeFormat(undefined, sameYear ? { month: 'short', day: 'numeric' } : { month: 'short', day: 'numeric', year: 'numeric' }).format(date);
+}
+/**
+ * `<lyra-conversation-item>` — a selectable row representing one chat
+ * session in a history sidebar list. Usable standalone or as the
+ * `renderItem()` payload of a sibling virtualized-list component; this
+ * module has no dependency on that (or any) other component.
+ *
+ * Takes `title`/`excerpt`/`timestamp` as individual primitive props rather
+ * than one opaque bound object, deliberately consistent with how
+ * `<lyra-chat-message>` takes individual props instead of a single
+ * `.message` blob -- every other component in this family follows that
+ * shape, so this one does too even though a single bound `.session` object
+ * would also have been a reasonable design.
+ *
+ * Identifying *which* session a `lyra-select` click/keypress was about: this
+ * reuses the platform's own `id` attribute (every element already has one)
+ * rather than inventing a second, differently-named id-carrying prop --
+ * consumers already have the event's `target`/`currentTarget` (and thus
+ * `.id`), the same reasoning `<lyra-attachment-chip>` documents for its own
+ * identically-shaped choice. `lyra-select` therefore carries no detail
+ * payload at all.
+ *
+ * `role="option"` (not `"button"`) on `[part="option"]`, since this is meant
+ * to live inside a `role="listbox"` history list (that future list
+ * component supplies the listbox/group ancestor `role="option"` requires)
+ * rather than stand in for a single push-button action. Used truly
+ * standalone -- with no listbox/group ancestor -- it's still fully
+ * operable, just technically missing that ARIA parent context; wrap it in a
+ * `role="listbox"` (or `role="group"`) container to satisfy that when
+ * accessibility-auditing a standalone usage.
+ *
+ * `role="option"` (like native `<option>`/`role="button"`) forbids focusable
+ * descendants -- verified against axe-core's `nested-interactive` rule,
+ * which flags it. That's why the rename button and the `actions` slot are
+ * rendered as DOM *siblings* of `[part="option"]` (both inside
+ * `[part="base"]`) rather than nested inside it: `[part="option"]` only ever
+ * contains plain text/`<time>` content. The in-place rename `<input>` is the
+ * same problem one level deeper -- it replaces the title *inside*
+ * `[part="option"]` while renaming -- so `[part="option"]` sheds its
+ * `role`/`tabindex`/`aria-selected`/`aria-label` entirely for the duration
+ * of an edit. This isn't just an ARIA-compliance workaround: a row mid-edit
+ * genuinely isn't a selectable listbox choice at that moment, it's a text
+ * field, so suspending the option semantics is also the more accurate
+ * description of what's on screen.
+ *
+ * Inline rename is a dedicated pencil/edit icon button (not a double-click
+ * on the title) -- double-click has no keyboard/screen-reader equivalent
+ * and would silently swallow the row's own single-click `lyra-select`,
+ * whereas a button is independently focusable, has its own accessible name,
+ * and composes cleanly with click-to-select.
+ *
+ * @customElement lyra-conversation-item
+ * @slot actions - Overflow/icon-button controls (e.g. a future pin/delete
+ * button) rendered at the trailing edge of the row. `lyra-menu` doesn't
+ * exist yet in this phase, so this is a plain slot for whatever a consumer
+ * wants to put there today.
+ * @event lyra-select - The row was activated: a click on `[part="option"]`
+ * (i.e. outside the rename button and the `actions` slot), or Enter/Space
+ * while it's focused -- in both cases only while not currently renaming. No
+ * detail payload -- see the class doc's "Identifying which session" note.
+ * @event lyra-rename - An in-place rename was committed (Enter, or blur
+ * while editing). `detail: { title }`. Does not mutate `title` itself --
+ * this is a controlled component, the same convention
+ * `<lyra-chat-message>` follows by not clearing its own state on retry; the
+ * consumer applies the new title once it's actually persisted. Not fired
+ * when the trimmed draft is empty or unchanged from the original `title`
+ * (that's treated as an implicit cancel).
+ * @csspart base - The outer row wrapper (plain, no ARIA role) laying out `[part="option"]`, the rename button, and `actions`.
+ * @csspart option - The selectable region (`role="option"`, removed while renaming -- see the class doc). Wraps `content` and `timestamp`.
+ * @csspart content - Wrapper around the title and excerpt.
+ * @csspart title - The title text, shown while not renaming.
+ * @csspart title-input - The in-place rename `<input>`, shown only while renaming.
+ * @csspart rename-button - The pencil/edit affordance that starts a rename (only rendered while `editable` and not already renaming).
+ * @csspart excerpt - The last-message preview snippet. Only rendered when `excerpt` is non-empty.
+ * @csspart timestamp - The formatted `timestamp`, rendered in a `<time>` element. Only rendered when `timestamp` is set and valid.
+ * @csspart actions - The wrapper around the `actions` slot.
+ */
+export class LyraConversationItem extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The session's display title. */
+        this.title = '';
+        /** A short preview snippet of the last message. Omit for no excerpt line. */
+        this.excerpt = '';
+        /** Whether this is the currently-selected/open session. Drives the
+         *  brand-quiet background treatment. */
+        this.active = false;
+        /** Whether inline-rename is available at all. When `false`, the rename
+         *  button never renders and the row can never enter its editing state. */
+        this.editable = true;
+        this.renaming = false;
+        this.draftTitle = '';
+        this.hasActionsSlot = false;
+        this.onOptionClick = () => {
+            // While renaming, `[part="option"]` has no role/selection semantics
+            // (see the class doc) -- a click inside it (e.g. to place the caret in
+            // the input) must not also select the row.
+            if (this.renaming)
+                return;
+            this.select();
+        };
+        this.onOptionKeyDown = (e) => {
+            if (this.renaming)
+                return;
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
+                // Space would otherwise scroll the page, same as lyra-checkbox/lyra-switch.
+                e.preventDefault();
+                this.select();
+            }
+        };
+        this.onRenameButtonClick = () => {
+            // No stopPropagation() needed here: the rename button is a DOM sibling
+            // of `[part="option"]` (see the class doc), not a descendant of it, so
+            // this click was never going to reach onOptionClick's listener anyway.
+            this.startRename();
+        };
+        this.onTitleInputChange = (e) => {
+            this.draftTitle = e.target.value;
+        };
+        this.onTitleInputKeyDown = (e) => {
+            // The input is a descendant of `[part="option"]` (unlike the rename
+            // button/actions slot, which are siblings of it) -- its keydown would
+            // otherwise bubble into onOptionKeyDown above. Stopping it here avoids a
+            // race where commitRename() (called below) has already flipped
+            // `renaming` back to `false` by the time that bubbled event reaches
+            // onOptionKeyDown's own `if (this.renaming) return;` guard, which would
+            // otherwise wrongly let the same Enter keystroke also fire lyra-select.
+            e.stopPropagation();
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                this.commitRename();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                this.cancelRename();
+            }
+        };
+        this.onTitleInputBlur = () => {
+            // If Escape already ended the edit synchronously (cancelRename() runs
+            // before this fires), `renaming` is already false by the time the
+            // now-removed input's blur event reaches here -- skip so Escape can't
+            // also commit.
+            if (!this.renaming)
+                return;
+            this.commitRename();
+        };
+        this.onActionsSlotChange = (e) => {
+            this.hasActionsSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasActionsSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'actions');
+        }
+    }
+    updated(changed) {
+        if (changed.has('renaming') && this.renaming) {
+            // Runs after render, so the input already exists in the DOM.
+            this.titleInput?.focus();
+            this.titleInput?.select();
+        }
+    }
+    get normalizedTimestamp() {
+        if (this.timestamp === undefined)
+            return undefined;
+        const date = this.timestamp instanceof Date ? this.timestamp : new Date(this.timestamp);
+        return Number.isNaN(date.getTime()) ? undefined : date;
+    }
+    select() {
+        this.emit('lyra-select');
+    }
+    startRename() {
+        if (!this.editable || this.renaming)
+            return;
+        this.draftTitle = this.title;
+        this.renaming = true;
+    }
+    commitRename() {
+        this.renaming = false;
+        const next = this.draftTitle.trim();
+        // An empty or unchanged draft has nothing meaningful to commit -- treat
+        // it the same as Escape rather than firing a no-op (or blanking) rename
+        // for the consumer to deal with.
+        if (!next || next === this.title)
+            return;
+        this.emit('lyra-rename', { title: next });
+    }
+    cancelRename() {
+        this.renaming = false;
+    }
+    render() {
+        const ts = this.normalizedTimestamp;
+        const formatter = this.formatTimestamp ?? defaultFormatTimestamp;
+        const displayTitle = this.title || 'Untitled conversation';
+        const showRenameButton = this.editable && !this.renaming;
+        return html `
+      <div part="base">
+        <div
+          part="option"
+          role=${this.renaming ? nothing : 'option'}
+          tabindex=${this.renaming ? nothing : '0'}
+          aria-selected=${this.renaming ? nothing : this.active ? 'true' : 'false'}
+          aria-label=${this.renaming ? nothing : this.getAttribute('aria-label') || displayTitle}
+          @click=${this.onOptionClick}
+          @keydown=${this.onOptionKeyDown}
+        >
+          <div part="content">
+            ${this.renaming
+            ? html `<input
+                  part="title-input"
+                  type="text"
+                  .value=${this.draftTitle}
+                  aria-label="Rename conversation"
+                  @input=${this.onTitleInputChange}
+                  @keydown=${this.onTitleInputKeyDown}
+                  @blur=${this.onTitleInputBlur}
+                />`
+            : html `<span part="title" title=${displayTitle}>${displayTitle}</span>`}
+            ${this.excerpt ? html `<span part="excerpt">${this.excerpt}</span>` : nothing}
+          </div>
+          ${ts ? html `<time part="timestamp" datetime=${ts.toISOString()}>${formatter(ts)}</time>` : nothing}
+        </div>
+        ${showRenameButton
+            ? html `<button
+              part="rename-button"
+              type="button"
+              aria-label=${`Rename ${displayTitle}`}
+              @click=${this.onRenameButtonClick}
+            >
+              ${pencilIcon()}
+            </button>`
+            : nothing}
+        <span part="actions" ?hidden=${!this.hasActionsSlot}>
+          <slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
+        </span>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraConversationItem.prototype, "title", void 0);
+__decorate([
+    property()
+], LyraConversationItem.prototype, "excerpt", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraConversationItem.prototype, "timestamp", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraConversationItem.prototype, "formatTimestamp", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraConversationItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraConversationItem.prototype, "editable", void 0);
+__decorate([
+    state()
+], LyraConversationItem.prototype, "renaming", void 0);
+__decorate([
+    state()
+], LyraConversationItem.prototype, "draftTitle", void 0);
+__decorate([
+    state()
+], LyraConversationItem.prototype, "hasActionsSlot", void 0);
+__decorate([
+    query('[part="title-input"]')
+], LyraConversationItem.prototype, "titleInput", void 0);
+defineElement('conversation-item', LyraConversationItem);

package/dist/components/conversation-item/conversation-item.styles.d.ts

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