@aceshooting/lyra-ui 2.1.0 → 2.2.0

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

@@ -1,130 +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, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './chip-group.class.js';
+import { LyraChipGroup } from './chip-group.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { styles } from './chip-group.styles.js';
-/**
- * `<lyra-chip-group>` — a flex-wrap container for a set of `<lyra-chip>`
- * children (plain light-DOM composition — direct children are the chips,
- * the same shape `<lyra-split>`'s panels / `<lyra-source-list>`'s cards
- * take — no `.items` array prop).
- *
- * `max-visible` is entirely optional. When unset, every child is always
- * shown and this component does nothing beyond flex-wrap layout. When set
- * and the group has more chip children than that, the excess children are
- * hidden (via their own `hidden` property — CSS alone can't parameterize
- * `:nth-child` on a runtime prop, so this reaches into the light DOM the
- * same way `<lyra-split>` sets each panel's inline `flex`/`order`) and a
- * "+N" overflow-indicator pill takes their place. Clicking it is a toggle:
- * it reveals the rest (and relabels itself "Show less"); clicking again
- * re-collapses back to `max-visible`. `lyra-overflow-toggle` fires only from
- * that click — i.e. only when `max-visible` is actually causing an overflow
- * state — never as a side effect of `max-visible`/children changing on
- * their own.
- *
- * @customElement lyra-chip-group
- * @slot - `<lyra-chip>` elements (or any content, though the chip pairing is
- * the intended usage).
- * @event lyra-overflow-toggle - The overflow indicator was activated,
- * revealing or re-collapsing the excess children. `detail: { expanded }`.
- * @csspart base - The flex-wrap container (holds both the slot and the overflow indicator).
- * @csspart overflow-indicator - The "+N" / "Show less" toggle button. Only rendered while `max-visible` is actively causing an overflow.
- */
-export class LyraChipGroup extends LyraElement {
-    constructor() {
-        super(...arguments);
-        // Tracks the default slot's assigned-element count, the same
-        // connectedCallback/willUpdate + slotchange convention `<lyra-split>`'s
-        // `panelCount`/`<lyra-source-list>`'s `slottedCount` already establish.
-        this.childCount = 0;
-        /** Whether the excess (beyond `max-visible`) children are currently
-         *  revealed. Meaningless (and never rendered) while there's no overflow. */
-        this.expanded = false;
-        this.onSlotChange = (e) => {
-            this.childCount = e.target.assignedElements({ flatten: true }).length;
-        };
-        this.onToggleOverflow = () => {
-            this.expanded = !this.expanded;
-            this.emit('lyra-overflow-toggle', { expanded: this.expanded });
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    willUpdate() {
-        if (!this.hasUpdated) {
-            this.childCount = this.children.length;
-        }
-        // max-visible/children can change out from under an already-expanded
-        // group (e.g. the consumer raises max-visible past the current count) —
-        // silently resync rather than leaving `expanded` stuck true with nothing
-        // left for it to mean. This never fires the event: only an actual click
-        // on the indicator does (see the class doc). Corrected here (not in
-        // `updated()`) so it folds into the update already in progress instead
-        // of scheduling a second one.
-        if (this.expanded && !this.hasOverflow)
-            this.expanded = false;
-    }
-    firstUpdated() {
-        // Fallback reconciliation for slot-forwarding / engines that don't fire
-        // `slotchange` for content present at parse time — same idiom as
-        // `<lyra-source-list>`'s identical `firstUpdated`. This can't move to
-        // `willUpdate` (the `<slot>` doesn't exist in the shadow DOM until after
-        // the first render), so when it actually corrects `childCount` (the
-        // slot-forwarding case, where `this.children.length` under-counts) it
-        // unavoidably schedules a second update pass — `updated()` (below) always
-        // runs right after this and already recomputes visibility from this same
-        // corrected count, so there's nothing left for an explicit call here to
-        // do.
-        const slot = this.shadowRoot.querySelector('slot');
-        this.childCount = slot.assignedElements({ flatten: true }).length;
-    }
-    updated() {
-        this.syncChildVisibility();
-    }
-    get hasOverflow() {
-        const max = this.maxVisible;
-        return max != null && Number.isFinite(max) && max >= 0 && this.childCount > max;
-    }
-    syncChildVisibility() {
-        const max = this.maxVisible;
-        const overflowing = this.hasOverflow;
-        Array.from(this.children).forEach((child, i) => {
-            child.hidden = overflowing && !this.expanded && i >= max;
-        });
-    }
-    render() {
-        const overflowing = this.hasOverflow;
-        const hiddenCount = overflowing ? this.childCount - this.maxVisible : 0;
-        return html `
-      <div part="base">
-        <slot @slotchange=${this.onSlotChange}></slot>
-        ${overflowing
-            ? html `<button
-              part="overflow-indicator"
-              type="button"
-              aria-expanded=${this.expanded ? 'true' : 'false'}
-              aria-label=${this.expanded ? 'Show less' : `Show ${hiddenCount} more`}
-              @click=${this.onToggleOverflow}
-            >
-              ${this.expanded ? 'Show less' : `+${hiddenCount}`}
-            </button>`
-            : nothing}
-      </div>
-    `;
-    }
-}
-__decorate([
-    property({ type: Number, attribute: 'max-visible' })
-], LyraChipGroup.prototype, "maxVisible", void 0);
-__decorate([
-    state()
-], LyraChipGroup.prototype, "childCount", void 0);
-__decorate([
-    state()
-], LyraChipGroup.prototype, "expanded", void 0);
 defineElement('chip-group', LyraChipGroup);
+//# sourceMappingURL=chip-group.js.map

package/dist/components/chip/chip-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-group.js","sourceRoot":"","sources":["../../../src/components/chip/chip-group.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC"}

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

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

package/dist/components/chip/chip-group.styles.d.ts.map

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

package/dist/components/chip/chip-group.styles.js

@@ -18,15 +18,15 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     box-sizing: border-box;
-    padding: 0.25rem var(--lyra-space-s);
-    border: 1px dashed var(--lyra-color-border);
-    border-radius: 999px;
+    padding: var(--lyra-size-0-25rem) var(--lyra-space-s);
+    border: var(--lyra-border-width-thin) dashed var(--lyra-color-border);
+    border-radius: var(--lyra-radius-pill);
     background: var(--lyra-color-surface);
     color: var(--lyra-color-text-quiet);
     font: inherit;
-    font-size: 0.8125rem;
-    font-weight: 600;
-    line-height: 1.3;
+    font-size: var(--lyra-font-size-sm);
+    font-weight: var(--lyra-font-weight-semibold);
+    line-height: var(--lyra-line-height-snug);
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     transition:
@@ -55,3 +55,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=chip-group.styles.js.map

package/dist/components/chip/chip-group.styles.js.map

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

package/dist/components/chip/chip.class.d.ts

@@ -0,0 +1,65 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type ChipTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
+export interface ChipRemoveDetail {
+    value?: string;
+}
+/**
+ * `<lyra-chip>` — a small, content-agnostic pill for a short label: a tag, an
+ * active-filter/scope indicator, etc. Distinct from `<lyra-attachment-chip>`
+ * (specifically file-shaped, with a thumbnail/size/upload-progress) — this
+ * one carries no domain assumptions at all, just a label and an optional
+ * leading icon/dot.
+ *
+ * `tone` tints the whole pill using the same loud-color-on-quiet-tint
+ * convention `<lyra-tool-call-chip>`/`<lyra-citation-badge>` already
+ * establish for status coloring: background is the tone's `-quiet` tint,
+ * text/icon is the tone's loud color. `neutral` (the default) has no
+ * dedicated token pair of its own, so it falls back to a plain
+ * bordered-surface look — the same "no signal" treatment
+ * `<lyra-citation-badge>`'s `default` status and `<lyra-tool-call-chip>`'s
+ * `pending` status already use.
+ *
+ * This is a controlled component: clicking the remove (×) button only fires
+ * `lyra-remove` — the chip never removes itself from the DOM on its own
+ * interaction, the same contract `<lyra-attachment-chip>`/
+ * `<lyra-conversation-item>` already follow. A consumer owns the underlying
+ * list and decides whether/how the click actually removes anything.
+ *
+ * @customElement lyra-chip
+ * @slot - The chip's label content.
+ * @slot icon - Optional leading icon or status dot. Nothing is reserved for
+ * it (no extra gap) when left empty.
+ * @event lyra-remove - The remove (×) button was activated (click, or
+ * Enter/Space while focused — native `<button>` behavior). `detail: { value }`
+ * — `value` is `undefined` when the `value` prop was never set. Only
+ * rendered while `removable`.
+ * @csspart base - The pill's root container.
+ * @csspart icon - Wrapper around the `icon` slot. Hidden entirely while empty.
+ * @csspart label - Wrapper around the default slot.
+ * @csspart remove-button - The remove (×) affordance, only rendered while `removable`.
+ */
+export declare class LyraChip extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Status/emphasis color. `neutral` (the default) reads as plain/unstyled. */
+    tone: ChipTone;
+    /** Shows the remove (×) button. */
+    removable: boolean;
+    /** Opaque consumer bookkeeping value — never read, validated, or rendered
+     *  by this component itself, only ever echoed back verbatim (including
+     *  `undefined` if never set) in `lyra-remove`'s detail. */
+    value?: string;
+    private hasIconSlot;
+    protected willUpdate(): void;
+    private onIconSlotChange;
+    private get labelText();
+    private get accessibleRemoveLabel();
+    private onRemoveClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-chip': LyraChip;
+    }
+}
+//# sourceMappingURL=chip.class.d.ts.map

package/dist/components/chip/chip.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.class.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE9E,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBAAa,QAAS,SAAQ,WAAW;IACvC,MAAM,CAAC,MAAM,iCAAgC;IAE7C,8EAA8E;IACjD,IAAI,EAAE,QAAQ,CAAa;IAExD,mCAAmC;IACS,SAAS,UAAS;IAE9D;;+DAE2D;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IAMlB,OAAO,CAAC,WAAW,CAAS;IAErC,SAAS,CAAC,UAAU,IAAI,IAAI,CAI3B;IAED,OAAO,CAAC,gBAAgB,CAEtB;IAWF,OAAO,KAAK,SAAS,GAUpB;IAED,OAAO,KAAK,qBAAqB,GAGhC;IAED,OAAO,CAAC,aAAa,CAEnB;IAEF,MAAM,IAAI,cAAc,CAcvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/chip/chip.class.js

@@ -0,0 +1,121 @@
+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 } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { closeIcon } from '../../internal/icons.js';
+import { styles } from './chip.styles.js';
+/**
+ * `<lyra-chip>` — a small, content-agnostic pill for a short label: a tag, an
+ * active-filter/scope indicator, etc. Distinct from `<lyra-attachment-chip>`
+ * (specifically file-shaped, with a thumbnail/size/upload-progress) — this
+ * one carries no domain assumptions at all, just a label and an optional
+ * leading icon/dot.
+ *
+ * `tone` tints the whole pill using the same loud-color-on-quiet-tint
+ * convention `<lyra-tool-call-chip>`/`<lyra-citation-badge>` already
+ * establish for status coloring: background is the tone's `-quiet` tint,
+ * text/icon is the tone's loud color. `neutral` (the default) has no
+ * dedicated token pair of its own, so it falls back to a plain
+ * bordered-surface look — the same "no signal" treatment
+ * `<lyra-citation-badge>`'s `default` status and `<lyra-tool-call-chip>`'s
+ * `pending` status already use.
+ *
+ * This is a controlled component: clicking the remove (×) button only fires
+ * `lyra-remove` — the chip never removes itself from the DOM on its own
+ * interaction, the same contract `<lyra-attachment-chip>`/
+ * `<lyra-conversation-item>` already follow. A consumer owns the underlying
+ * list and decides whether/how the click actually removes anything.
+ *
+ * @customElement lyra-chip
+ * @slot - The chip's label content.
+ * @slot icon - Optional leading icon or status dot. Nothing is reserved for
+ * it (no extra gap) when left empty.
+ * @event lyra-remove - The remove (×) button was activated (click, or
+ * Enter/Space while focused — native `<button>` behavior). `detail: { value }`
+ * — `value` is `undefined` when the `value` prop was never set. Only
+ * rendered while `removable`.
+ * @csspart base - The pill's root container.
+ * @csspart icon - Wrapper around the `icon` slot. Hidden entirely while empty.
+ * @csspart label - Wrapper around the default slot.
+ * @csspart remove-button - The remove (×) affordance, only rendered while `removable`.
+ */
+export class LyraChip extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Status/emphasis color. `neutral` (the default) reads as plain/unstyled. */
+        this.tone = 'neutral';
+        /** Shows the remove (×) button. */
+        this.removable = false;
+        // A `[part]` always contains a literal `<slot>` child regardless of
+        // assigned content, so `:empty` never matches — real emptiness is tracked
+        // in JS instead, the same fix `<lyra-stat>`'s `hasIcon`/
+        // `<lyra-tool-call-chip>`'s `hasDetailSlot` etc. already establish.
+        this.hasIconSlot = false;
+        this.onIconSlotChange = (e) => {
+            this.hasIconSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.onRemoveClick = () => {
+            this.emit('lyra-remove', { value: this.value });
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate() {
+        if (!this.hasUpdated) {
+            this.hasIconSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'icon');
+        }
+    }
+    // Only the default slot's own content counts toward the remove button's
+    // accessible name — text incidentally living inside the (decorative)
+    // `icon` slot shouldn't leak into "Remove {text}". Restricting to Text and
+    // Element nodes also excludes Comment nodes: when a consumer interpolates
+    // the label via a lit-html expression (`html\`<lyra-chip>${label}</lyra-chip>\``,
+    // the ordinary way a data-driven label gets bound) rather than a static
+    // string, lit-html inserts a marker Comment node alongside the Text node in
+    // the light DOM. That comment's own (non-empty) data is internal
+    // bookkeeping, not label content, so it must never reach `textContent`.
+    get labelText() {
+        return Array.from(this.childNodes)
+            .filter((n) => (n.nodeType === Node.TEXT_NODE || n instanceof Element) &&
+            !(n instanceof Element && n.getAttribute('slot') === 'icon'))
+            .map((n) => n.textContent ?? '')
+            .join('')
+            .trim();
+    }
+    get accessibleRemoveLabel() {
+        const text = this.labelText;
+        return text ? `Remove ${text}` : 'Remove';
+    }
+    render() {
+        return html `
+      <span part="base">
+        <span part="icon" aria-hidden="true" ?hidden=${!this.hasIconSlot}>
+          <slot name="icon" @slotchange=${this.onIconSlotChange}></slot>
+        </span>
+        <span part="label"><slot></slot></span>
+        ${this.removable
+            ? html `<button part="remove-button" type="button" aria-label=${this.accessibleRemoveLabel} @click=${this.onRemoveClick}>
+              ${closeIcon()}
+            </button>`
+            : nothing}
+      </span>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], LyraChip.prototype, "tone", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraChip.prototype, "removable", void 0);
+__decorate([
+    property()
+], LyraChip.prototype, "value", void 0);
+__decorate([
+    state()
+], LyraChip.prototype, "hasIconSlot", void 0);
+//# sourceMappingURL=chip.class.js.map

package/dist/components/chip/chip.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.class.js","sourceRoot":"","sources":["../../../src/components/chip/chip.class.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAQ1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAAzC;;QAGE,8EAA8E;QACjD,SAAI,GAAa,SAAS,CAAC;QAExD,mCAAmC;QACS,cAAS,GAAG,KAAK,CAAC;QAO9D,oEAAoE;QACpE,0EAA0E;QAC1E,yDAAyD;QACzD,oEAAoE;QACnD,gBAAW,GAAG,KAAK,CAAC;QAQ7B,qBAAgB,GAAG,CAAC,CAAQ,EAAQ,EAAE;YAC5C,IAAI,CAAC,WAAW,GAAI,CAAC,CAAC,MAA0B,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;QAClG,CAAC,CAAC;QA4BM,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,CAAC,IAAI,CAAmB,aAAa,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;QACpE,CAAC,CAAC;IAiBJ,CAAC;aA1EQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;IAmBnC,UAAU;QAClB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACrB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,CAAC;QAChG,CAAC;IACH,CAAC;IAMD,wEAAwE;IACxE,qEAAqE;IACrE,2EAA2E;IAC3E,0EAA0E;IAC1E,kFAAkF;IAClF,wEAAwE;IACxE,4EAA4E;IAC5E,iEAAiE;IACjE,wEAAwE;IACxE,IAAY,SAAS;QACnB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC;aAC/B,MAAM,CACL,CAAC,CAAC,EAAuB,EAAE,CACzB,CAAC,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,OAAO,CAAC;YACvD,CAAC,CAAC,CAAC,YAAY,OAAO,IAAI,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,MAAM,CAAC,CAC/D;aACA,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,IAAI,EAAE,CAAC;aAC/B,IAAI,CAAC,EAAE,CAAC;aACR,IAAI,EAAE,CAAC;IACZ,CAAC;IAED,IAAY,qBAAqB;QAC/B,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC;QAC5B,OAAO,IAAI,CAAC,CAAC,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC5C,CAAC;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;uDAEwC,CAAC,IAAI,CAAC,WAAW;0CAC9B,IAAI,CAAC,gBAAgB;;;UAGrD,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA,yDAAyD,IAAI,CAAC,qBAAqB,WAAW,IAAI,CAAC,aAAa;gBAChH,SAAS,EAAE;sBACL;YACZ,CAAC,CAAC,OAAO;;KAEd,CAAC;IACJ,CAAC;CACF;AAvE8B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA4B;AAGZ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAmB;AAKlD;IAAX,QAAQ,EAAE;uCAAgB;AAMV;IAAhB,KAAK,EAAE;6CAA6B"}

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

@@ -1,64 +1,2 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-export type ChipTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
-export interface ChipRemoveDetail {
-    value?: string;
-}
-/**
- * `<lyra-chip>` — a small, content-agnostic pill for a short label: a tag, an
- * active-filter/scope indicator, etc. Distinct from `<lyra-attachment-chip>`
- * (specifically file-shaped, with a thumbnail/size/upload-progress) — this
- * one carries no domain assumptions at all, just a label and an optional
- * leading icon/dot.
- *
- * `tone` tints the whole pill using the same loud-color-on-quiet-tint
- * convention `<lyra-tool-call-chip>`/`<lyra-citation-badge>` already
- * establish for status coloring: background is the tone's `-quiet` tint,
- * text/icon is the tone's loud color. `neutral` (the default) has no
- * dedicated token pair of its own, so it falls back to a plain
- * bordered-surface look — the same "no signal" treatment
- * `<lyra-citation-badge>`'s `default` status and `<lyra-tool-call-chip>`'s
- * `pending` status already use.
- *
- * This is a controlled component: clicking the remove (×) button only fires
- * `lyra-remove` — the chip never removes itself from the DOM on its own
- * interaction, the same contract `<lyra-attachment-chip>`/
- * `<lyra-conversation-item>` already follow. A consumer owns the underlying
- * list and decides whether/how the click actually removes anything.
- *
- * @customElement lyra-chip
- * @slot - The chip's label content.
- * @slot icon - Optional leading icon or status dot. Nothing is reserved for
- * it (no extra gap) when left empty.
- * @event lyra-remove - The remove (×) button was activated (click, or
- * Enter/Space while focused — native `<button>` behavior). `detail: { value }`
- * — `value` is `undefined` when the `value` prop was never set. Only
- * rendered while `removable`.
- * @csspart base - The pill's root container.
- * @csspart icon - Wrapper around the `icon` slot. Hidden entirely while empty.
- * @csspart label - Wrapper around the default slot.
- * @csspart remove-button - The remove (×) affordance, only rendered while `removable`.
- */
-export declare class LyraChip extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** Status/emphasis color. `neutral` (the default) reads as plain/unstyled. */
-    tone: ChipTone;
-    /** Shows the remove (×) button. */
-    removable: boolean;
-    /** Opaque consumer bookkeeping value — never read, validated, or rendered
-     *  by this component itself, only ever echoed back verbatim (including
-     *  `undefined` if never set) in `lyra-remove`'s detail. */
-    value?: string;
-    private hasIconSlot;
-    protected willUpdate(): void;
-    private onIconSlotChange;
-    private get labelText();
-    private get accessibleRemoveLabel();
-    private onRemoveClick;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-chip': LyraChip;
-    }
-}
+export * from './chip.class.js';
+//# sourceMappingURL=chip.d.ts.map

package/dist/components/chip/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/components/chip/chip.js

@@ -1,122 +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, state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './chip.class.js';
+import { LyraChip } from './chip.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { closeIcon } from '../../internal/icons.js';
-import { styles } from './chip.styles.js';
-/**
- * `<lyra-chip>` — a small, content-agnostic pill for a short label: a tag, an
- * active-filter/scope indicator, etc. Distinct from `<lyra-attachment-chip>`
- * (specifically file-shaped, with a thumbnail/size/upload-progress) — this
- * one carries no domain assumptions at all, just a label and an optional
- * leading icon/dot.
- *
- * `tone` tints the whole pill using the same loud-color-on-quiet-tint
- * convention `<lyra-tool-call-chip>`/`<lyra-citation-badge>` already
- * establish for status coloring: background is the tone's `-quiet` tint,
- * text/icon is the tone's loud color. `neutral` (the default) has no
- * dedicated token pair of its own, so it falls back to a plain
- * bordered-surface look — the same "no signal" treatment
- * `<lyra-citation-badge>`'s `default` status and `<lyra-tool-call-chip>`'s
- * `pending` status already use.
- *
- * This is a controlled component: clicking the remove (×) button only fires
- * `lyra-remove` — the chip never removes itself from the DOM on its own
- * interaction, the same contract `<lyra-attachment-chip>`/
- * `<lyra-conversation-item>` already follow. A consumer owns the underlying
- * list and decides whether/how the click actually removes anything.
- *
- * @customElement lyra-chip
- * @slot - The chip's label content.
- * @slot icon - Optional leading icon or status dot. Nothing is reserved for
- * it (no extra gap) when left empty.
- * @event lyra-remove - The remove (×) button was activated (click, or
- * Enter/Space while focused — native `<button>` behavior). `detail: { value }`
- * — `value` is `undefined` when the `value` prop was never set. Only
- * rendered while `removable`.
- * @csspart base - The pill's root container.
- * @csspart icon - Wrapper around the `icon` slot. Hidden entirely while empty.
- * @csspart label - Wrapper around the default slot.
- * @csspart remove-button - The remove (×) affordance, only rendered while `removable`.
- */
-export class LyraChip extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** Status/emphasis color. `neutral` (the default) reads as plain/unstyled. */
-        this.tone = 'neutral';
-        /** Shows the remove (×) button. */
-        this.removable = false;
-        // A `[part]` always contains a literal `<slot>` child regardless of
-        // assigned content, so `:empty` never matches — real emptiness is tracked
-        // in JS instead, the same fix `<lyra-stat>`'s `hasIcon`/
-        // `<lyra-tool-call-chip>`'s `hasDetailSlot` etc. already establish.
-        this.hasIconSlot = false;
-        this.onIconSlotChange = (e) => {
-            this.hasIconSlot = e.target.assignedElements({ flatten: true }).length > 0;
-        };
-        this.onRemoveClick = () => {
-            this.emit('lyra-remove', { value: this.value });
-        };
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    willUpdate() {
-        if (!this.hasUpdated) {
-            this.hasIconSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'icon');
-        }
-    }
-    // Only the default slot's own content counts toward the remove button's
-    // accessible name — text incidentally living inside the (decorative)
-    // `icon` slot shouldn't leak into "Remove {text}". Restricting to Text and
-    // Element nodes also excludes Comment nodes: when a consumer interpolates
-    // the label via a lit-html expression (`html\`<lyra-chip>${label}</lyra-chip>\``,
-    // the ordinary way a data-driven label gets bound) rather than a static
-    // string, lit-html inserts a marker Comment node alongside the Text node in
-    // the light DOM. That comment's own (non-empty) data is internal
-    // bookkeeping, not label content, so it must never reach `textContent`.
-    get labelText() {
-        return Array.from(this.childNodes)
-            .filter((n) => (n.nodeType === Node.TEXT_NODE || n instanceof Element) &&
-            !(n instanceof Element && n.getAttribute('slot') === 'icon'))
-            .map((n) => n.textContent ?? '')
-            .join('')
-            .trim();
-    }
-    get accessibleRemoveLabel() {
-        const text = this.labelText;
-        return text ? `Remove ${text}` : 'Remove';
-    }
-    render() {
-        return html `
-      <span part="base">
-        <span part="icon" aria-hidden="true" ?hidden=${!this.hasIconSlot}>
-          <slot name="icon" @slotchange=${this.onIconSlotChange}></slot>
-        </span>
-        <span part="label"><slot></slot></span>
-        ${this.removable
-            ? html `<button part="remove-button" type="button" aria-label=${this.accessibleRemoveLabel} @click=${this.onRemoveClick}>
-              ${closeIcon()}
-            </button>`
-            : nothing}
-      </span>
-    `;
-    }
-}
-__decorate([
-    property({ reflect: true })
-], LyraChip.prototype, "tone", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraChip.prototype, "removable", void 0);
-__decorate([
-    property()
-], LyraChip.prototype, "value", void 0);
-__decorate([
-    state()
-], LyraChip.prototype, "hasIconSlot", void 0);
 defineElement('chip', LyraChip);
+//# sourceMappingURL=chip.js.map

package/dist/components/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip/chip.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC"}

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

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

package/dist/components/chip/chip.styles.d.ts.map

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

package/dist/components/chip/chip.styles.js

@@ -43,15 +43,15 @@ export const styles = css `
     gap: var(--lyra-space-xs);
     max-inline-size: 100%;
     box-sizing: border-box;
-    padding: 0.25rem var(--lyra-space-s);
-    border: 1px solid var(--lyra-chip-border);
-    border-radius: 999px;
+    padding: var(--lyra-size-0-25rem) var(--lyra-space-s);
+    border: var(--lyra-border-width-thin) solid var(--lyra-chip-border);
+    border-radius: var(--lyra-radius-pill);
     background: var(--lyra-chip-bg);
     color: var(--lyra-chip-accent);
     font: inherit;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    line-height: 1.3;
+    font-size: var(--lyra-font-size-sm);
+    font-weight: var(--lyra-font-weight-medium);
+    line-height: var(--lyra-line-height-snug);
   }
 
   [part='icon'] {
@@ -83,15 +83,15 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: min(var(--lyra-icon-button-size), 1.25rem);
-    min-block-size: min(var(--lyra-icon-button-size), 1.25rem);
-    margin-inline-end: -0.15rem;
+    min-inline-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-25rem));
+    min-block-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-25rem));
+    margin-inline-end: var(--lyra-size-neg-0-15rem);
     padding: 0;
     border: none;
-    border-radius: 999px;
+    border-radius: var(--lyra-radius-pill);
     background: transparent;
     color: inherit;
-    font-size: 0.75em;
+    font-size: var(--lyra-size-0-75em);
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
     transition: background-color var(--lyra-transition-fast);
@@ -113,3 +113,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=chip.styles.js.map

package/dist/components/chip/chip.styles.js.map

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