@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","sourceRoot":"","sources":["../../../src/components/combobox/combobox.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,aAAa,CAAC;AACrB,aAAa,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC"}

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

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

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

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

package/dist/components/combobox/combobox.styles.js

@@ -6,8 +6,8 @@ export const styles = css `
   [part='form-control-label'] {
     display: block;
     margin-block-end: var(--lyra-space-xs);
-    font-size: 0.875rem;
-    font-weight: 600;
+    font-size: var(--lyra-font-size-md-sm);
+    font-weight: var(--lyra-font-weight-semibold);
   }
   /* :empty never matches here -- the part always contains a literal slot
      child element regardless of assigned/text content -- so real emptiness
@@ -29,18 +29,18 @@ export const styles = css `
     align-items: center;
     gap: var(--lyra-space-xs);
     inline-size: 100%;
-    min-block-size: 2.5rem;
+    min-block-size: var(--lyra-size-2-5rem);
     padding: var(--lyra-space-xs) var(--lyra-space-s);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
     cursor: text;
   }
   [part='combobox']:focus-within {
     border-color: var(--lyra-color-brand);
-    outline: 2px solid transparent;
+    outline: var(--lyra-border-width-medium) solid transparent;
   }
-  :host([disabled]) [part='combobox'] {
+  :host(:disabled) [part='combobox'] {
     /* was a literal 0.5; now the shared library-wide disabled-state token
        (still 0.5 by default fallback, so no visual change here). */
     opacity: var(--lyra-opacity-disabled);
@@ -51,8 +51,8 @@ export const styles = css `
     display: inline-flex;
     align-items: center;
     gap: var(--lyra-space-xs);
-    padding: 0.1rem 0.4rem;
-    font-size: 0.8125rem;
+    padding: var(--lyra-size-0-1rem) var(--lyra-size-0-4rem);
+    font-size: var(--lyra-font-size-sm);
     background: var(--lyra-color-brand-quiet);
     color: var(--lyra-color-text);
     border-radius: var(--lyra-radius);
@@ -63,13 +63,13 @@ export const styles = css `
     cursor: pointer;
     color: inherit;
     padding: 0;
-    line-height: 1;
-    font-size: 1rem;
+    line-height: var(--lyra-line-height-none);
+    font-size: var(--lyra-font-size-md);
   }
 
   [part='combobox-input'] {
-    flex: 1 1 6ch;
-    min-inline-size: 4ch;
+    flex: 1 1 var(--lyra-size-6ch);
+    min-inline-size: var(--lyra-size-4ch);
     border: none;
     outline: none;
     background: transparent;
@@ -94,9 +94,9 @@ export const styles = css `
        the ceiling, but never grow past what the [part=combobox] row's own
        2.5rem min-block-size has room for once its own block padding is
        subtracted. */
-    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
-    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
-    line-height: 1;
+    min-inline-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-75rem));
+    min-block-size: min(var(--lyra-icon-button-size), var(--lyra-size-1-75rem));
+    line-height: var(--lyra-line-height-none);
   }
   [part='expand-icon'] svg {
     transform: rotate(90deg);
@@ -109,16 +109,16 @@ export const styles = css `
 
   [part='listbox'] {
     position: fixed;
-    z-index: 900;
+    z-index: var(--lyra-layer-dropdown);
     box-sizing: border-box;
-    max-block-size: min(18rem, var(--lyra-positioner-available-block-size, 18rem));
+    max-block-size: min(var(--lyra-size-18rem), var(--lyra-positioner-available-block-size, var(--lyra-size-18rem)));
     overflow-y: auto;
     inline-size: max-content;
-    min-inline-size: min(12rem, var(--lyra-positioner-available-inline-size, 12rem));
-    max-inline-size: min(92vw, 28rem, var(--lyra-positioner-available-inline-size, 100vw));
+    min-inline-size: min(var(--lyra-size-12rem), var(--lyra-positioner-available-inline-size, var(--lyra-size-12rem)));
+    max-inline-size: min(92vw, var(--lyra-size-28rem), var(--lyra-positioner-available-inline-size, 100vw));
     padding: var(--lyra-space-xs);
     background: var(--lyra-color-surface);
-    border: 1px solid var(--lyra-color-border);
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     box-shadow: var(--lyra-shadow);
     /* Closed state: invisible + slightly raised. visibility (not
@@ -126,7 +126,7 @@ export const styles = css `
        and a11y exposure stay off since this part is already position:fixed. */
     visibility: hidden;
     opacity: 0;
-    transform: translateY(-0.25rem);
+    transform: translateY(var(--lyra-size-neg-0-25rem));
     transition:
       opacity var(--lyra-transition-fast),
       transform var(--lyra-transition-fast),
@@ -149,7 +149,7 @@ export const styles = css `
     align-items: start;
     inline-size: 100%;
     padding: var(--lyra-space-xs) var(--lyra-space-s);
-    border: 1px solid transparent;
+    border: var(--lyra-border-width-thin) solid transparent;
     border-radius: var(--lyra-radius);
     background: none;
     color: inherit;
@@ -164,7 +164,7 @@ export const styles = css `
   [part='option'][aria-selected='true'] {
     border-color: var(--lyra-color-brand);
     color: var(--lyra-color-brand);
-    font-weight: 600;
+    font-weight: var(--lyra-font-weight-semibold);
   }
   [part='option'][aria-disabled='true'] {
     /* was a literal 0.4; unified with the rest of the library's single
@@ -173,8 +173,8 @@ export const styles = css `
     cursor: not-allowed;
   }
   [part='option-dot'] {
-    inline-size: 0.5rem;
-    block-size: 0.5rem;
+    inline-size: var(--lyra-size-0-5rem);
+    block-size: var(--lyra-size-0-5rem);
     border-radius: 50%;
     flex: 0 0 auto;
   }
@@ -184,32 +184,32 @@ export const styles = css `
     min-inline-size: 0;
   }
   [part='option-sub'] {
-    font-size: 0.75rem;
+    font-size: var(--lyra-font-size-xs);
     color: var(--lyra-color-text-quiet);
   }
   [part='option-overflow'],
   .loading {
     padding: var(--lyra-space-s) var(--lyra-space-m);
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-text-quiet);
   }
 
   .group-label {
     padding: var(--lyra-space-xs) var(--lyra-space-s) 0;
-    font-size: 0.6875rem;
-    font-weight: 700;
+    font-size: var(--lyra-size-0-6875rem);
+    font-weight: var(--lyra-font-weight-bold);
     text-transform: uppercase;
-    letter-spacing: 0.04em;
+    letter-spacing: var(--lyra-size-0-04em);
     color: var(--lyra-color-text-quiet);
   }
   .empty {
     padding: var(--lyra-space-m);
     color: var(--lyra-color-text-quiet);
-    font-size: 0.875rem;
+    font-size: var(--lyra-font-size-md-sm);
   }
   [part='hint'] {
     margin-block-start: var(--lyra-space-xs);
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-text-quiet);
   }
   /* :empty never matches here -- the part always contains a literal
@@ -221,10 +221,11 @@ export const styles = css `
   }
   [part='error'] {
     margin-block-start: var(--lyra-space-xs);
-    font-size: 0.8125rem;
+    font-size: var(--lyra-font-size-sm);
     color: var(--lyra-color-danger);
   }
   [part='error'][hidden] {
     display: none;
   }
 `;
+//# sourceMappingURL=combobox.styles.js.map

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

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

package/dist/components/combobox/option.class.d.ts

@@ -0,0 +1,44 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-option>` — a selectable option for `<lyra-combobox>`.
+ * Mirrors `<wa-option>`. Acts as the data source; the combobox renders the
+ * interactive rows in its own shadow root and filters/caps them.
+ *
+ * The label is the element's text content (or an explicit `label` attribute).
+ *
+ * @customElement lyra-option
+ */
+export interface LyraOptionEventMap {
+    'lyra-option-change': CustomEvent<undefined>;
+}
+export declare class LyraOption extends LyraElement<LyraOptionEventMap> {
+    static styles: import("lit").CSSResultGroup[];
+    /** The selection key submitted with the form. */
+    value: string;
+    /** Disable selecting this option. */
+    disabled: boolean;
+    /** Whether this option is currently selected (reflected by the combobox). */
+    selected: boolean;
+    /** Optional section header this option belongs under. */
+    group: string;
+    /** Extra text the filter should match beyond the label. */
+    searchText: string;
+    /** Optional secondary line rendered under the label (e.g. a status/date summary). */
+    sub: string;
+    /** Optional color for a small leading status dot (any valid CSS color). */
+    dotColor: string;
+    /** Resolved label: explicit non-empty `label` attribute wins, else trimmed text content. */
+    get label(): string;
+    private labelObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-option': LyraOption;
+    }
+}
+//# sourceMappingURL=option.class.d.ts.map

package/dist/components/combobox/option.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.class.d.ts","sourceRoot":"","sources":["../../../src/components/combobox/option.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D;;;;;;;;GAQG;AACH,MAAM,WAAW,kBAAkB;IACjC,oBAAoB,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAC9C;AACD,qBAAa,UAAW,SAAQ,WAAW,CAAC,kBAAkB,CAAC;IAC7D,MAAM,CAAC,MAAM,iCAOX;IAEF,iDAAiD;IACrC,KAAK,SAAM;IAEvB,qCAAqC;IACR,QAAQ,UAAS;IAE9C,6EAA6E;IACjC,QAAQ,UAAS;IAE7D,yDAAyD;IAC7C,KAAK,SAAM;IAEvB,2DAA2D;IACnB,UAAU,SAAM;IAExD,qFAAqF;IACzE,GAAG,SAAM;IAErB,2EAA2E;IACrC,QAAQ,SAAM;IAEpD,4FAA4F;IAC5F,IAAI,KAAK,IAAI,MAAM,CAGlB;IAED,OAAO,CAAC,aAAa,CAAC,CAAmB;IAEzC,iBAAiB,IAAI,IAAI,CAcxB;IAED,oBAAoB,IAAI,IAAI,CAI3B;IAED,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAgB/C;IAED,MAAM,IAAI,cAAc,CAEvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/combobox/option.class.js

@@ -0,0 +1,101 @@
+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, css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+export class LyraOption extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The selection key submitted with the form. */
+        this.value = '';
+        /** Disable selecting this option. */
+        this.disabled = false;
+        /** Whether this option is currently selected (reflected by the combobox). */
+        this.selected = false;
+        /** Optional section header this option belongs under. */
+        this.group = '';
+        /** Extra text the filter should match beyond the label. */
+        this.searchText = '';
+        /** Optional secondary line rendered under the label (e.g. a status/date summary). */
+        this.sub = '';
+        /** Optional color for a small leading status dot (any valid CSS color). */
+        this.dotColor = '';
+    }
+    static { this.styles = [
+        LyraElement.styles,
+        css `
+      :host {
+        display: none;
+      }
+    `,
+    ]; }
+    /** Resolved label: explicit non-empty `label` attribute wins, else trimmed text content. */
+    get label() {
+        const attr = this.getAttribute('label');
+        return (attr ? attr : (this.textContent ?? '')).trim();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // `label` is derived from either the `label` attribute or `textContent` --
+        // neither is a Lit reactive property, so a direct mutation of either
+        // (e.g. `option.textContent = 'New label'`) needs its own observer to
+        // notify the parent combobox/select that its cached row data is stale.
+        this.labelObserver = new MutationObserver(() => this.emit('lyra-option-change'));
+        this.labelObserver.observe(this, {
+            attributes: true,
+            attributeFilter: ['label'],
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.labelObserver?.disconnect();
+        this.labelObserver = undefined;
+    }
+    updated(changed) {
+        // `selected` is deliberately excluded -- the parent combobox/select
+        // already sets `selected` itself as *part of* rendering the current
+        // selection, so echoing that back as a `lyra-option-change` notification
+        // would trigger a redundant re-render on every selection change, rather
+        // than signal a genuine "this option's own data changed externally".
+        if (changed.has('value') ||
+            changed.has('disabled') ||
+            changed.has('group') ||
+            changed.has('searchText') ||
+            changed.has('sub') ||
+            changed.has('dotColor')) {
+            this.emit('lyra-option-change');
+        }
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+}
+__decorate([
+    property()
+], LyraOption.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], LyraOption.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraOption.prototype, "selected", void 0);
+__decorate([
+    property()
+], LyraOption.prototype, "group", void 0);
+__decorate([
+    property({ attribute: 'search-text' })
+], LyraOption.prototype, "searchText", void 0);
+__decorate([
+    property()
+], LyraOption.prototype, "sub", void 0);
+__decorate([
+    property({ attribute: 'dot-color' })
+], LyraOption.prototype, "dotColor", void 0);
+//# sourceMappingURL=option.class.js.map

package/dist/components/combobox/option.class.js.map

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

package/dist/components/combobox/option.d.ts

@@ -1,40 +1,2 @@
-import { type TemplateResult, type PropertyValues } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-/**
- * `<lyra-option>` — a selectable option for `<lyra-combobox>`.
- * Mirrors `<wa-option>`. Acts as the data source; the combobox renders the
- * interactive rows in its own shadow root and filters/caps them.
- *
- * The label is the element's text content (or an explicit `label` attribute).
- *
- * @customElement lyra-option
- */
-export declare class LyraOption extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** The selection key submitted with the form. */
-    value: string;
-    /** Disable selecting this option. */
-    disabled: boolean;
-    /** Whether this option is currently selected (reflected by the combobox). */
-    selected: boolean;
-    /** Optional section header this option belongs under. */
-    group: string;
-    /** Extra text the filter should match beyond the label. */
-    searchText: string;
-    /** Optional secondary line rendered under the label (e.g. a status/date summary). */
-    sub: string;
-    /** Optional color for a small leading status dot (any valid CSS color). */
-    dotColor: string;
-    /** Resolved label: explicit non-empty `label` attribute wins, else trimmed text content. */
-    get label(): string;
-    private labelObserver?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changed: PropertyValues): void;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-option': LyraOption;
-    }
-}
+export * from './option.class.js';
+//# sourceMappingURL=option.d.ts.map

package/dist/components/combobox/option.d.ts.map

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

package/dist/components/combobox/option.js

@@ -1,111 +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, css } from 'lit';
-import { property } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './option.class.js';
+import { LyraOption } from './option.class.js';
 import { defineElement } from '../../internal/prefix.js';
-/**
- * `<lyra-option>` — a selectable option for `<lyra-combobox>`.
- * Mirrors `<wa-option>`. Acts as the data source; the combobox renders the
- * interactive rows in its own shadow root and filters/caps them.
- *
- * The label is the element's text content (or an explicit `label` attribute).
- *
- * @customElement lyra-option
- */
-export class LyraOption extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** The selection key submitted with the form. */
-        this.value = '';
-        /** Disable selecting this option. */
-        this.disabled = false;
-        /** Whether this option is currently selected (reflected by the combobox). */
-        this.selected = false;
-        /** Optional section header this option belongs under. */
-        this.group = '';
-        /** Extra text the filter should match beyond the label. */
-        this.searchText = '';
-        /** Optional secondary line rendered under the label (e.g. a status/date summary). */
-        this.sub = '';
-        /** Optional color for a small leading status dot (any valid CSS color). */
-        this.dotColor = '';
-    }
-    static { this.styles = [
-        LyraElement.styles,
-        css `
-      :host {
-        display: none;
-      }
-    `,
-    ]; }
-    /** Resolved label: explicit non-empty `label` attribute wins, else trimmed text content. */
-    get label() {
-        const attr = this.getAttribute('label');
-        return (attr ? attr : (this.textContent ?? '')).trim();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        // `label` is derived from either the `label` attribute or `textContent` --
-        // neither is a Lit reactive property, so a direct mutation of either
-        // (e.g. `option.textContent = 'New label'`) needs its own observer to
-        // notify the parent combobox/select that its cached row data is stale.
-        this.labelObserver = new MutationObserver(() => this.emit('lyra-option-change'));
-        this.labelObserver.observe(this, {
-            attributes: true,
-            attributeFilter: ['label'],
-            childList: true,
-            characterData: true,
-            subtree: true,
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.labelObserver?.disconnect();
-        this.labelObserver = undefined;
-    }
-    updated(changed) {
-        // `selected` is deliberately excluded -- the parent combobox/select
-        // already sets `selected` itself as *part of* rendering the current
-        // selection, so echoing that back as a `lyra-option-change` notification
-        // would trigger a redundant re-render on every selection change, rather
-        // than signal a genuine "this option's own data changed externally".
-        if (changed.has('value') ||
-            changed.has('disabled') ||
-            changed.has('group') ||
-            changed.has('searchText') ||
-            changed.has('sub') ||
-            changed.has('dotColor')) {
-            this.emit('lyra-option-change');
-        }
-    }
-    render() {
-        return html `<slot></slot>`;
-    }
-}
-__decorate([
-    property()
-], LyraOption.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean })
-], LyraOption.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraOption.prototype, "selected", void 0);
-__decorate([
-    property()
-], LyraOption.prototype, "group", void 0);
-__decorate([
-    property({ attribute: 'search-text' })
-], LyraOption.prototype, "searchText", void 0);
-__decorate([
-    property()
-], LyraOption.prototype, "sub", void 0);
-__decorate([
-    property({ attribute: 'dot-color' })
-], LyraOption.prototype, "dotColor", void 0);
 defineElement('option', LyraOption);
+//# sourceMappingURL=option.js.map

package/dist/components/combobox/option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option.js","sourceRoot":"","sources":["../../../src/components/combobox/option.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1,54 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export type ContextMeterTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
+export type ContextMeterVariant = 'ring' | 'bar';
+export interface ContextMeterSegment {
+    label: string;
+    /** Absolute quantity (e.g. tokens), not a pre-computed percentage. */
+    value: number;
+    tone?: ContextMeterTone;
+}
+/**
+ * `<lyra-context-meter>` — a segmented occupancy meter (bar or ring) for
+ * showing how a fixed capacity (a model's context window, a token budget,
+ * any consumable quota) is divided across labeled categories. First-party
+ * invention; no equivalent exists in Web Awesome.
+ *
+ * Pure data visualization: it renders `segments`/`total` as given and never
+ * computes token counts, costs, or any other domain-specific estimate
+ * itself — the one exception is the plain arithmetic sum of the segment
+ * values used to build the accessible "X of Y used" summary below.
+ *
+ * @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 label - The visible caption, when `label` is set.
+ */
+export declare class LyraContextMeter extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Occupied segments, each an absolute quantity against `total` — never a percentage. */
+    segments: ContextMeterSegment[];
+    /** The full capacity segments are measured against (e.g. a model's context window size). */
+    total: number;
+    variant: ContextMeterVariant;
+    /** Overall accessible label/caption, e.g. `"128K context window"`. */
+    label: string;
+    /** Sum of segment values, clamped so a negative/NaN entry can't produce a negative total. */
+    private get usedTotal();
+    /** Per-segment ratio of `value` to `total`, clamped to [0,1] and capped so the
+     *  running sum across all segments never overflows past 1 — a `segments` array
+     *  that sums to more than `total` still renders a fully (not over-) filled meter. */
+    private ratios;
+    private get summary();
+    protected willUpdate(): void;
+    private renderBar;
+    private renderRing;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-context-meter': LyraContextMeter;
+    }
+}
+//# sourceMappingURL=context-meter.class.d.ts.map

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

@@ -0,0 +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,6FAA6F;IAC7F,OAAO,KAAK,SAAS,GAEpB;IAED;;yFAEqF;IACrF,OAAO,CAAC,MAAM;IAed,OAAO,KAAK,OAAO,GAUlB;IAED,SAAS,CAAC,UAAU,IAAI,IAAI,CAO3B;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"}