@aceshooting/lyra-ui 3.7.0 → 3.9.0

package/dist/components/compare-panel/compare-panel.styles.js

@@ -0,0 +1,97 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    container-type: inline-size;
+    --lyra-compare-panel-max-height: var(--lyra-size-24rem);
+  }
+
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-m);
+    color: var(--lyra-color-text);
+  }
+
+  [part='prompt'] {
+    padding: var(--lyra-space-s) var(--lyra-space-m);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface-raised);
+  }
+  [part='prompt'][hidden] {
+    display: none;
+  }
+
+  [part='panes'] {
+    display: flex;
+    gap: var(--lyra-space-m);
+    align-items: stretch;
+  }
+
+  [part='pane-a'],
+  [part='pane-b'] {
+    flex: 1 1 0;
+    min-inline-size: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    padding: var(--lyra-space-m);
+    max-block-size: var(--lyra-compare-panel-max-height);
+    overflow-y: auto;
+  }
+  [part='pane-a']:focus-visible,
+  [part='pane-b']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: calc(-1 * var(--lyra-focus-ring-width));
+  }
+
+  [part='pane-header'] {
+    font-weight: var(--lyra-font-weight-semibold);
+    font-size: var(--lyra-font-size-xs);
+    color: var(--lyra-color-text-quiet);
+    text-transform: uppercase;
+    letter-spacing: var(--lyra-size-0-02em);
+  }
+
+  [part='vote-bar'] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--lyra-space-s);
+  }
+
+  [part='vote-button'] {
+    font: inherit;
+    font-size: var(--lyra-font-size-sm);
+    border-radius: var(--lyra-radius-pill);
+    padding: var(--lyra-space-xs) var(--lyra-space-m);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+    cursor: pointer;
+    transition: background-color var(--lyra-transition-fast), border-color var(--lyra-transition-fast);
+  }
+  [part='vote-button'][data-selected] {
+    background: var(--lyra-color-brand-quiet);
+    border-color: var(--lyra-color-brand);
+    color: var(--lyra-color-brand);
+    font-weight: var(--lyra-font-weight-semibold);
+  }
+  [part='vote-button']:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+  [part='vote-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+
+  @container (max-width: 639.98px) {
+    [part='panes'] {
+      flex-direction: column;
+    }
+  }
+`;
+//# sourceMappingURL=compare-panel.styles.js.map

package/dist/components/compare-panel/compare-panel.styles.js.map

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

package/dist/components/confirm-bar/confirm-bar.class.d.ts

@@ -0,0 +1,81 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import '../details/details.class.js';
+import '../json-viewer/json-viewer.class.js';
+import '../live-region/live-region.class.js';
+export type ConfirmBarDecision = 'approved' | 'denied' | null;
+export type ConfirmBarTone = 'neutral' | 'danger';
+export interface LyraConfirmBarEventMap {
+    'lyra-approve': CustomEvent<{
+        args: unknown;
+    }>;
+    'lyra-deny': CustomEvent<undefined>;
+}
+/**
+ * `<lyra-confirm-bar>` — an inline, non-modal approve/deny block for one proposed action: the
+ * in-flow sibling of `<lyra-tool-approval-dialog>` for confirmations that should sit in the
+ * transcript instead of hijacking focus. Same `lyra-approve`/`lyra-deny` event shapes as the dialog,
+ * and the same `toolApprovalHeading`/`toolApprovalArgsLabel`/`deny`/`approve` localization keys, so
+ * the two always translate in lockstep.
+ *
+ * Non-modal by contract: no focus trap, no scroll lock, no Escape/backdrop semantics, and it never
+ * steals focus when it appears in the transcript. DOM and tab order put Deny before Approve (the
+ * dialog's safe-action-first rationale). On activation, focus moves synchronously to `[part="status"]`
+ * (an always-rendered, `tabindex="-1"` element) *before* the Deny/Approve buttons unmount, so focus
+ * never has a gap where it would otherwise fall back to `<body>`.
+ *
+ * No argument editing (escalate to `<lyra-tool-approval-dialog>`'s `editable` when edit-before-approve
+ * matters); no blocking/modality guarantee (a user can scroll past); no decision persistence or
+ * "remember choice" logic (the `footer` slot + host own that).
+ *
+ * @customElement lyra-confirm-bar
+ * @slot - Supplementary body content between the heading and the actions (e.g. a `lyra-diff-view` of
+ *   the proposed change).
+ * @slot footer - Extra content at the start of the action row (e.g. a "remember this choice"
+ *   checkbox), mirroring `lyra-tool-approval-dialog`'s own `footer` slot.
+ * @event lyra-approve - `detail: { args }` (the `args` prop as-is; no editing in the bar) — identical
+ *   shape to `lyra-tool-approval-dialog`.
+ * @event lyra-deny - No detail, identical to the dialog.
+ * @csspart base - The root (`role="group"`).
+ * @csspart heading - The heading.
+ * @csspart tool-name - The tool-name span within the heading. Only rendered when `heading` is unset.
+ * @csspart body - The default-slot wrapper.
+ * @csspart args - The `lyra-details` + `lyra-json-viewer` wrapper. Only rendered when `args` is
+ *   defined.
+ * @csspart footer - The action row.
+ * @csspart deny-button - Named identically to the dialog's part.
+ * @csspart approve-button - Named identically to the dialog's part.
+ * @csspart status - The decided-state text. Always present in the DOM (`tabindex="-1"`) so focus has
+ *   a stable, synchronous landing spot on activation.
+ */
+export declare class LyraConfirmBar extends LyraElement<LyraConfirmBarEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** Drives the default heading through the existing dialog keys. */
+    toolName: string;
+    /** Free-form heading override for non-tool proposals. Wins over `toolName` when set. */
+    heading: string;
+    /** Shown read-only inside a collapsed `lyra-details` + `lyra-json-viewer` when defined. */
+    args: unknown;
+    /** Decided state. Set by the component on activation *and* host-writable (an externally-resolved
+     *  decision -- timeout, another reviewer -- renders identically but emits nothing). */
+    decision: ConfirmBarDecision;
+    /** Token-mapped emphasis for destructive proposals. */
+    tone: ConfirmBarTone;
+    private statusEl?;
+    private liveRegion?;
+    private hasBodySlot;
+    private readonly headingId;
+    protected willUpdate(changed: PropertyValues): void;
+    private onBodySlotChange;
+    private decide;
+    protected updated(changed: PropertyValues): void;
+    private renderHeading;
+    private statusText;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-confirm-bar': LyraConfirmBar;
+    }
+}
+//# sourceMappingURL=confirm-bar.class.d.ts.map

package/dist/components/confirm-bar/confirm-bar.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-bar.class.d.ts","sourceRoot":"","sources":["../../../src/components/confirm-bar/confirm-bar.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAA0B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3G,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,OAAO,6BAA6B,CAAC;AACrC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qCAAqC,CAAC;AAI7C,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,QAAQ,GAAG,IAAI,CAAC;AAC9D,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC;AAElD,MAAM,WAAW,sBAAsB;IACrC,cAAc,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAC/C,WAAW,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CACrC;AA2BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBAAa,cAAe,SAAQ,WAAW,CAAC,sBAAsB,CAAC;IACrE,MAAM,CAAC,MAAM,iCAAgC;IAE7C,mEAAmE;IAC7B,QAAQ,SAAM;IAEpD,wFAAwF;IAC5E,OAAO,SAAM;IAEzB,2FAA2F;IAC3D,IAAI,EAAE,OAAO,CAAa;IAE1D;2FACuF;IAC1D,QAAQ,EAAE,kBAAkB,CAAQ;IAEjE,uDAAuD;IAC1B,IAAI,EAAE,cAAc,CAAa;IAEpC,OAAO,CAAC,QAAQ,CAAC,CAAc;IAC9B,OAAO,CAAC,UAAU,CAAC,CAAiB;IAKtD,OAAO,CAAC,WAAW,CAAS;IAErC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;IAE3D,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAKlD;IAED,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,MAAM;IAcd,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAK/C;IAED,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,UAAU;IAIlB,MAAM,IAAI,cAAc,CAgCvB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/confirm-bar/confirm-bar.class.js

@@ -0,0 +1,193 @@
+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, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { nextId } from '../../internal/a11y.js';
+import '../details/details.class.js';
+import '../json-viewer/json-viewer.class.js';
+import '../live-region/live-region.class.js';
+import { styles } from './confirm-bar.styles.js';
+const ICON_VIEW_BOX = '0 0 24 24';
+const ICON_STROKE_WIDTH = '1.75';
+// Mirrors the shared icon set's viewBox/stroke conventions without adding approved/denied glyphs
+// to that module, so these one-off icons still read as part of the same visual language as the
+// rest of the library's inline icons.
+function approvedIcon() {
+    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">
+      <circle cx="12" cy="12" r="9"></circle>
+      <polyline points="8 12.5 11 15.5 16 9.5"></polyline>
+    </svg>
+  `;
+}
+function deniedIcon() {
+    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">
+      <circle cx="12" cy="12" r="9"></circle>
+      <line x1="9" y1="9" x2="15" y2="15"></line>
+      <line x1="15" y1="9" x2="9" y2="15"></line>
+    </svg>
+  `;
+}
+/**
+ * `<lyra-confirm-bar>` — an inline, non-modal approve/deny block for one proposed action: the
+ * in-flow sibling of `<lyra-tool-approval-dialog>` for confirmations that should sit in the
+ * transcript instead of hijacking focus. Same `lyra-approve`/`lyra-deny` event shapes as the dialog,
+ * and the same `toolApprovalHeading`/`toolApprovalArgsLabel`/`deny`/`approve` localization keys, so
+ * the two always translate in lockstep.
+ *
+ * Non-modal by contract: no focus trap, no scroll lock, no Escape/backdrop semantics, and it never
+ * steals focus when it appears in the transcript. DOM and tab order put Deny before Approve (the
+ * dialog's safe-action-first rationale). On activation, focus moves synchronously to `[part="status"]`
+ * (an always-rendered, `tabindex="-1"` element) *before* the Deny/Approve buttons unmount, so focus
+ * never has a gap where it would otherwise fall back to `<body>`.
+ *
+ * No argument editing (escalate to `<lyra-tool-approval-dialog>`'s `editable` when edit-before-approve
+ * matters); no blocking/modality guarantee (a user can scroll past); no decision persistence or
+ * "remember choice" logic (the `footer` slot + host own that).
+ *
+ * @customElement lyra-confirm-bar
+ * @slot - Supplementary body content between the heading and the actions (e.g. a `lyra-diff-view` of
+ *   the proposed change).
+ * @slot footer - Extra content at the start of the action row (e.g. a "remember this choice"
+ *   checkbox), mirroring `lyra-tool-approval-dialog`'s own `footer` slot.
+ * @event lyra-approve - `detail: { args }` (the `args` prop as-is; no editing in the bar) — identical
+ *   shape to `lyra-tool-approval-dialog`.
+ * @event lyra-deny - No detail, identical to the dialog.
+ * @csspart base - The root (`role="group"`).
+ * @csspart heading - The heading.
+ * @csspart tool-name - The tool-name span within the heading. Only rendered when `heading` is unset.
+ * @csspart body - The default-slot wrapper.
+ * @csspart args - The `lyra-details` + `lyra-json-viewer` wrapper. Only rendered when `args` is
+ *   defined.
+ * @csspart footer - The action row.
+ * @csspart deny-button - Named identically to the dialog's part.
+ * @csspart approve-button - Named identically to the dialog's part.
+ * @csspart status - The decided-state text. Always present in the DOM (`tabindex="-1"`) so focus has
+ *   a stable, synchronous landing spot on activation.
+ */
+export class LyraConfirmBar extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Drives the default heading through the existing dialog keys. */
+        this.toolName = '';
+        /** Free-form heading override for non-tool proposals. Wins over `toolName` when set. */
+        this.heading = '';
+        /** Shown read-only inside a collapsed `lyra-details` + `lyra-json-viewer` when defined. */
+        this.args = undefined;
+        /** Decided state. Set by the component on activation *and* host-writable (an externally-resolved
+         *  decision -- timeout, another reviewer -- renders identically but emits nothing). */
+        this.decision = null;
+        /** Token-mapped emphasis for destructive proposals. */
+        this.tone = 'neutral';
+        // `[part='body']:empty` never matches because the part always contains a literal `<slot>`
+        // child (CSS `:empty` only ignores text/comment nodes) -- same fix `lyra-details`/`lyra-empty`/
+        // `lyra-avatar`/`lyra-stat` already established. Track real slot assignment in JS instead.
+        this.hasBodySlot = false;
+        this.headingId = nextId('confirm-bar-heading');
+        this.onBodySlotChange = (e) => {
+            this.hasBodySlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate(changed) {
+        if (!this.hasUpdated) {
+            this.hasBodySlot = Array.from(this.children).some((el) => !el.hasAttribute('slot'));
+        }
+        void changed;
+    }
+    decide(next) {
+        if (this.decision != null)
+            return;
+        // Synchronous, before the emit/property-set below trigger the re-render that removes the
+        // Deny/Approve buttons -- [part="status"] is always present in the DOM, so this never leaves a
+        // gap where focus would otherwise fall back to <body>.
+        this.statusEl?.focus();
+        if (next === 'approved') {
+            this.emit('lyra-approve', { args: this.args });
+        }
+        else {
+            this.emit('lyra-deny');
+        }
+        this.decision = next;
+    }
+    updated(changed) {
+        if (changed.has('decision') && this.decision != null) {
+            const key = this.decision === 'approved' ? 'confirmApprovedAnnounce' : 'confirmDeniedAnnounce';
+            this.liveRegion?.announce(this.localize(key), { force: true });
+        }
+    }
+    renderHeading() {
+        if (this.heading)
+            return html `${this.heading}`;
+        const toolName = this.toolName || this.localize('toolApprovalGenericTool');
+        const [before, after] = this.localize('toolApprovalHeading').split('{tool}');
+        return html `${before}<span part="tool-name">${toolName}</span>${after ?? ''}`;
+    }
+    statusText() {
+        return this.decision === 'approved' ? this.localize('confirmApproved') : this.localize('confirmDenied');
+    }
+    render() {
+        const decided = this.decision != null;
+        return html `
+      <div part="base" role="group" aria-labelledby=${this.headingId}>
+        <div part="heading" id=${this.headingId}>${this.renderHeading()}</div>
+        <div part="body" ?hidden=${!this.hasBodySlot}><slot @slotchange=${this.onBodySlotChange}></slot></div>
+        ${this.args !== undefined
+            ? html `<lyra-details part="args" summary=${this.localize('toolApprovalArgsLabel')}>
+              <lyra-json-viewer .data=${this.args}></lyra-json-viewer>
+            </lyra-details>`
+            : nothing}
+        <div part="footer">
+          <slot name="footer"></slot>
+          ${decided
+            ? nothing
+            : html `
+                <button part="deny-button" type="button" @click=${() => this.decide('denied')}>
+                  ${this.localize('deny')}
+                </button>
+                <button part="approve-button" type="button" @click=${() => this.decide('approved')}>
+                  ${this.localize('approve')}
+                </button>
+              `}
+        </div>
+        <div part="status" tabindex="-1">
+          ${decided
+            ? html `${this.decision === 'approved' ? approvedIcon() : deniedIcon()}<span>${this.statusText()}</span>`
+            : nothing}
+        </div>
+        <lyra-live-region mode="polite"></lyra-live-region>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: 'tool-name' })
+], LyraConfirmBar.prototype, "toolName", void 0);
+__decorate([
+    property()
+], LyraConfirmBar.prototype, "heading", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraConfirmBar.prototype, "args", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraConfirmBar.prototype, "decision", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraConfirmBar.prototype, "tone", void 0);
+__decorate([
+    query('[part="status"]')
+], LyraConfirmBar.prototype, "statusEl", void 0);
+__decorate([
+    query('lyra-live-region')
+], LyraConfirmBar.prototype, "liveRegion", void 0);
+__decorate([
+    state()
+], LyraConfirmBar.prototype, "hasBodySlot", void 0);
+//# sourceMappingURL=confirm-bar.class.js.map

package/dist/components/confirm-bar/confirm-bar.class.js.map

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

package/dist/components/confirm-bar/confirm-bar.d.ts

@@ -0,0 +1,5 @@
+export * from './confirm-bar.class.js';
+import '../details/details.js';
+import '../json-viewer/json-viewer.js';
+import '../live-region/live-region.js';
+//# sourceMappingURL=confirm-bar.d.ts.map

package/dist/components/confirm-bar/confirm-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-bar.d.ts","sourceRoot":"","sources":["../../../src/components/confirm-bar/confirm-bar.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AAGvC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC"}

package/dist/components/confirm-bar/confirm-bar.js

@@ -0,0 +1,8 @@
+export * from './confirm-bar.class.js';
+import { LyraConfirmBar } from './confirm-bar.class.js';
+import { defineElement } from '../../internal/prefix.js';
+import '../details/details.js';
+import '../json-viewer/json-viewer.js';
+import '../live-region/live-region.js';
+defineElement('confirm-bar', LyraConfirmBar);
+//# sourceMappingURL=confirm-bar.js.map

package/dist/components/confirm-bar/confirm-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"confirm-bar.js","sourceRoot":"","sources":["../../../src/components/confirm-bar/confirm-bar.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,aAAa,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC"}

package/dist/components/confirm-bar/confirm-bar.styles.d.ts

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

package/dist/components/confirm-bar/confirm-bar.styles.d.ts.map

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

package/dist/components/confirm-bar/confirm-bar.styles.js

@@ -0,0 +1,96 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    /* Makes the host a query container so the @container rule below reacts to the bar's own
+       allocated width (a chat transcript, a split pane, a narrow dialog) instead of the
+       viewport's. */
+    container-type: inline-size;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-s);
+    padding: var(--lyra-space-m);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+  }
+  :host([tone='danger']) [part='base'] {
+    border-color: var(--lyra-color-danger);
+  }
+  [part='heading'] {
+    font-weight: var(--lyra-font-weight-semibold);
+    color: var(--lyra-color-text);
+  }
+  [part='tool-name'] {
+    font-family: var(--lyra-font-mono);
+  }
+  [part='args'] {
+    font-size: var(--lyra-font-size-sm);
+  }
+  [part='footer'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--lyra-space-s);
+  }
+  [part='deny-button'],
+  [part='approve-button'] {
+    padding-inline: var(--lyra-space-m);
+    padding-block: var(--lyra-space-xs);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    color: var(--lyra-color-text);
+    font: inherit;
+    cursor: pointer;
+  }
+  [part='approve-button'] {
+    border-color: var(--lyra-color-brand);
+    background: var(--lyra-color-brand);
+    color: var(--lyra-color-surface);
+  }
+  :host([tone='danger']) [part='approve-button'] {
+    border-color: var(--lyra-color-danger);
+    background: var(--lyra-color-danger);
+  }
+  [part='deny-button']:focus-visible,
+  [part='approve-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='status'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+    color: var(--lyra-color-text-quiet);
+    font-size: var(--lyra-font-size-sm);
+  }
+  [part='status']:empty {
+    display: none;
+  }
+  :host([decision='approved']) [part='status'] {
+    color: var(--lyra-color-success);
+  }
+  :host([decision='denied']) [part='status'] {
+    color: var(--lyra-color-danger);
+  }
+  [part='status']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  @container (max-width: 20rem) {
+    [part='footer'] {
+      justify-content: stretch;
+    }
+    [part='deny-button'],
+    [part='approve-button'] {
+      flex: 1 1 0;
+    }
+  }
+`;
+//# sourceMappingURL=confirm-bar.styles.js.map

package/dist/components/confirm-bar/confirm-bar.styles.js.map

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

package/dist/components/context-meter/context-meter.class.d.ts

@@ -7,6 +7,8 @@ export interface ContextMeterSegment {
     /** Absolute quantity (e.g. tokens), not a pre-computed percentage. */
     value: number;
     tone?: ContextMeterTone;
+    /** Optional arbitrary CSS color. When set, it takes precedence over `tone`. */
+    color?: string;
 }
 /**
  * `<lyra-context-meter>` — a segmented occupancy meter (bar or ring) for
@@ -22,7 +24,8 @@ export interface ContextMeterSegment {
  * @customElement lyra-context-meter
  * @csspart base - The component's root wrapper (a `<div>` for `bar`, an `<svg>` for `ring`).
  * @csspart track - The unfilled/empty capacity track.
- * @csspart segment - One occupied segment. Carries `data-tone` for styling.
+ * @csspart segment - One occupied segment. Carries `data-tone` for styling and
+ *   `--lyra-context-meter-segment-color` when `color` is set.
  * @csspart label - The visible caption, when `label` is set.
  */
 export declare class LyraContextMeter extends LyraElement {
@@ -51,6 +54,10 @@ export declare class LyraContextMeter extends LyraElement {
     private get clampedUsedTotal();
     private get summary();
     protected willUpdate(): void;
+    /** Hover/`<title>` text for one segment. Templated so a locale controls
+     *  where the count sits relative to the label, not just the words. */
+    private segmentTitle;
+    private segmentColor;
     private renderBar;
     private renderRing;
     render(): TemplateResult;

package/dist/components/context-meter/context-meter.class.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context-meter.class.d.ts","sourceRoot":"","sources":["../../../src/components/context-meter/context-meter.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAA0B,MAAM,KAAK,CAAC;AAGtF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,KAAK,CAAC;AAEjD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAuBD;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;IAC/C,MAAM,CAAC,MAAM,iCAAgC;IAE7C,yFAAyF;IACzD,QAAQ,EAAE,mBAAmB,EAAE,CAAM;IAErE,4FAA4F;IAChE,KAAK,SAAK;IAET,OAAO,EAAE,mBAAmB,CAAS;IAElE,sEAAsE;IAC1D,KAAK,SAAM;IAEvB,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,iBAAiB,CAAuB;IAEhD,6FAA6F;IAC7F,OAAO,KAAK,SAAS,GAEpB;IAED;;yFAEqF;IACrF,OAAO,CAAC,MAAM;IAed;;;;;6BAKyB;IACzB,OAAO,KAAK,gBAAgB,GAI3B;IAED,OAAO,KAAK,OAAO,GAWlB;IAED,SAAS,CAAC,UAAU,IAAI,IAAI,CAqB3B;IAED,OAAO,CAAC,SAAS;IAqBjB,OAAO,CAAC,UAAU;IA8BlB,MAAM,IAAI,cAAc,CAEvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"context-meter.class.d.ts","sourceRoot":"","sources":["../../../src/components/context-meter/context-meter.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAA0B,MAAM,KAAK,CAAC;AAGtF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAK7D,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,KAAK,CAAC;AAEjD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuBD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,gBAAiB,SAAQ,WAAW;IAC/C,MAAM,CAAC,MAAM,iCAAgC;IAE7C,yFAAyF;IACzD,QAAQ,EAAE,mBAAmB,EAAE,CAAM;IAErE,4FAA4F;IAChE,KAAK,SAAK;IAET,OAAO,EAAE,mBAAmB,CAAS;IAElE,sEAAsE;IAC1D,KAAK,SAAM;IAEvB,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,iBAAiB,CAAuB;IAEhD,6FAA6F;IAC7F,OAAO,KAAK,SAAS,GAEpB;IAED;;yFAEqF;IACrF,OAAO,CAAC,MAAM;IAed;;;;;6BAKyB;IACzB,OAAO,KAAK,gBAAgB,GAI3B;IAED,OAAO,KAAK,OAAO,GAWlB;IAED,SAAS,CAAC,UAAU,IAAI,IAAI,CAqB3B;IAED;0EACsE;IACtE,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IA0BjB,OAAO,CAAC,UAAU;IAmClB,MAAM,IAAI,cAAc,CAEvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}

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

@@ -9,6 +9,7 @@ import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { LyraElement } from '../../internal/lyra-element.js';
 import { finiteNumber } from '../../internal/numbers.js';
+import { sanitizeSwatchColor } from '../../internal/safe-css.js';
 import { styles } from './context-meter.styles.js';
 // Ring geometry: RADIUS/CENTER match lyra-gauge's radial numbers, so both
 // components' rings sit on the same circle within their viewBox. STROKE is
@@ -36,7 +37,8 @@ function formatCount(n, locale) {
  * @customElement lyra-context-meter
  * @csspart base - The component's root wrapper (a `<div>` for `bar`, an `<svg>` for `ring`).
  * @csspart track - The unfilled/empty capacity track.
- * @csspart segment - One occupied segment. Carries `data-tone` for styling.
+ * @csspart segment - One occupied segment. Carries `data-tone` for styling and
+ *   `--lyra-context-meter-segment-color` when `color` is set.
  * @csspart label - The visible caption, when `label` is set.
  */
 export class LyraContextMeter extends LyraElement {
@@ -121,6 +123,17 @@ export class LyraContextMeter extends LyraElement {
         else
             this.removeAttribute('aria-valuemax');
     }
+    /** Hover/`<title>` text for one segment. Templated so a locale controls
+     *  where the count sits relative to the label, not just the words. */
+    segmentTitle(segment) {
+        return this.localize('contextMeterSegmentLabel', undefined, {
+            label: segment.label,
+            count: formatCount(segment.value, this.effectiveLocale),
+        });
+    }
+    segmentColor(segment) {
+        return segment.color ? sanitizeSwatchColor(segment.color) : undefined;
+    }
     renderBar() {
         const ratios = this.ratios();
         return html `
@@ -131,8 +144,13 @@ export class LyraContextMeter extends LyraElement {
               <span
                 part="segment"
                 data-tone=${segment.tone ?? 'neutral'}
-                title=${`${segment.label}: ${formatCount(segment.value, this.effectiveLocale)}`}
-                style=${styleMap({ flexBasis: `${(ratio * 100).toFixed(4)}%` })}
+                title=${this.segmentTitle(segment)}
+                style=${styleMap({
+            flexBasis: `${(ratio * 100).toFixed(4)}%`,
+            ...(this.segmentColor(segment)
+                ? { '--lyra-context-meter-segment-color': this.segmentColor(segment) }
+                : {}),
+        })}
               ></span>
             `)}
         </div>
@@ -150,6 +168,9 @@ export class LyraContextMeter extends LyraElement {
         <circle
           part="segment"
           data-tone=${segment.tone ?? 'neutral'}
+          style=${styleMap(this.segmentColor(segment)
+                ? { '--lyra-context-meter-segment-color': this.segmentColor(segment) }
+                : {})}
           cx=${CENTER}
           cy=${CENTER}
           r=${RADIUS}
@@ -157,7 +178,7 @@ export class LyraContextMeter extends LyraElement {
           stroke-dasharray=${`${segLen} ${CIRCUMFERENCE - segLen}`}
           stroke-dashoffset=${dashoffset}
           transform="rotate(-90 ${CENTER} ${CENTER})"
-        ><title>${`${segment.label}: ${formatCount(segment.value, this.effectiveLocale)}`}</title></circle>
+        ><title>${this.segmentTitle(segment)}</title></circle>
       `;
         });
         return html `