@aceshooting/lyra-ui 2.1.0 → 2.2.0

package/dist/components/checkbox/checkbox.js

@@ -1,353 +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, svg, nothing } from 'lit';
-import { state } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './checkbox.class.js';
+import { LyraCheckbox } from './checkbox.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { AnchoredValidityController, VALIDITY_ANCHOR } from '../../internal/anchored-validity.js';
-import { styles } from './checkbox.styles.js';
-// Mirrors the shared icon set's viewBox/stroke conventions
-// (internal/icons.ts's chevronIcon()/closeIcon()/etc.) without importing
-// that module — it's off limits here — so the glyph still reads as part of
-// the same visual language as the rest of the library's inline icons.
-const GLYPH_VIEW_BOX = '0 0 24 24';
-const GLYPH_STROKE_WIDTH = '1.75';
-function checkmarkGlyph() {
-    return svg `
-    <svg
-      part="checkmark"
-      width="1em"
-      height="1em"
-      viewBox=${GLYPH_VIEW_BOX}
-      fill="none"
-      stroke="currentColor"
-      stroke-width=${GLYPH_STROKE_WIDTH}
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-      focusable="false"
-    ><polyline points="5 12.5 10 17.5 19 6.5"></polyline></svg>
-  `;
-}
-/** The indeterminate/mixed-state dash — takes priority over the checkmark. */
-function indeterminateGlyph() {
-    return svg `
-    <svg
-      part="checkmark"
-      width="1em"
-      height="1em"
-      viewBox=${GLYPH_VIEW_BOX}
-      fill="none"
-      stroke="currentColor"
-      stroke-width=${GLYPH_STROKE_WIDTH}
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-      focusable="false"
-    ><line x1="5" y1="12" x2="19" y2="12"></line></svg>
-  `;
-}
-/**
- * `<lyra-checkbox>` — a boolean form control. Structurally the same idea as
- * `<lyra-switch>` (form-associated via `ElementInternals`, click and
- * Space/Enter both toggle) but with checkbox semantics: `role="checkbox"` +
- * an `aria-checked` that can also be `"mixed"`, and a visual box/checkmark
- * instead of a track/thumb.
- *
- * `checked` is not a plain string, so this attaches `ElementInternals`
- * directly and implements its own `updateValidity()` rather than using the
- * `FormAssociated` mixin — see `<lyra-combobox>` for the same
- * direct-`ElementInternals` shape with a non-string value.
- *
- * @customElement lyra-checkbox
- * @slot - Label text, rendered next to the box. Clicking it toggles the
- * checkbox, the same as clicking a native checkbox's associated `<label>`.
- * If left empty, set `aria-label` on the host so the control still has an
- * accessible name.
- * @event lyra-change - The user toggled the checkbox (click or Space/Enter).
- * `detail: { checked }`. Not fired for a programmatic `.checked` assignment.
- * @csspart base - The whole interactive control (`role="checkbox"`); wraps the box and label.
- * @csspart box - The small square that shows the checkmark/indeterminate dash.
- * @csspart checkmark - The checkmark (or indeterminate dash) glyph inside the box.
- * @csspart label - The wrapper around the default slot.
- */
-export class LyraCheckbox extends LyraElement {
-    static { this.styles = [LyraElement.styles, styles]; }
-    static { this.formAssociated = true; }
-    static { this.properties = {
-        checked: { type: Boolean, reflect: true, noAccessor: true },
-        indeterminate: { type: Boolean, reflect: true, noAccessor: true },
-        disabled: { type: Boolean, reflect: true, noAccessor: true },
-        name: { reflect: true, noAccessor: true },
-        required: { type: Boolean, reflect: true, noAccessor: true },
-        value: { noAccessor: true },
-    }; }
-    /** Whether the control is disabled explicitly or by an ancestor fieldset. */
-    get effectiveDisabled() {
-        return this.disabled || this._fieldsetDisabled;
-    }
-    get checked() {
-        return this._checked;
-    }
-    set checked(next) {
-        const old = this._checked;
-        this._checked = Boolean(next);
-        this.syncFormState();
-        this.requestUpdate('checked', old);
-    }
-    get indeterminate() {
-        return this._indeterminate;
-    }
-    set indeterminate(next) {
-        const old = this._indeterminate;
-        this._indeterminate = Boolean(next);
-        this.syncFormState();
-        this.requestUpdate('indeterminate', old);
-    }
-    get disabled() {
-        return this._disabled;
-    }
-    set disabled(next) {
-        const old = this._disabled;
-        this._disabled = Boolean(next);
-        this.toggleAttribute('disabled', this._disabled);
-        this.requestUpdate('disabled', old);
-    }
-    /** The form submission key, reflected synchronously for native form APIs. */
-    get name() {
-        return this._name;
-    }
-    set name(next) {
-        const old = this._name;
-        this._name = next ?? '';
-        if (this._name) {
-            this.setAttribute('name', this._name);
-        }
-        else {
-            this.removeAttribute('name');
-        }
-        this.requestUpdate('name', old);
-    }
-    get required() {
-        return this._required;
-    }
-    set required(next) {
-        const old = this._required;
-        this._required = Boolean(next);
-        this.toggleAttribute('required', this._required);
-        this.updateValidity();
-        this.requestUpdate('required', old);
-    }
-    get value() {
-        return this._value;
-    }
-    set value(next) {
-        const old = this._value;
-        this._value = next ?? 'on';
-        this.syncFormState();
-        this.requestUpdate('value', old);
-    }
-    constructor() {
-        super();
-        // Visual-only mixed state, matching native `<input type="checkbox">`
-        // semantics: it does not affect `checked`'s own value, and a user
-        // interaction (click/keyboard) clears it back to `false`, exactly like the
-        // native control does.
-        // Tracks whether the default slot carries any real (non-whitespace)
-        // content, so the label wrapper — and the gap next to the box — can
-        // collapse to nothing for an icon-only/aria-label-only checkbox instead of
-        // leaving a stray empty gap. See lyra-switch's identical field for why
-        // `assignedNodes` (not `assignedElements`) is checked — the common case is
-        // a bare slotted text label, e.g. `<lyra-checkbox>Accept terms</lyra-checkbox>`.
-        this.hasLabelSlot = false;
-        // Set on the control's first `blur`; gates the `data-invalid`/`aria-invalid`
-        // reflection below so validity styling never flashes on first render,
-        // mirroring `<lyra-combobox>`/`<lyra-select>`'s identical `touched` field.
-        this.touched = false;
-        // What `form.reset()` restores to — captured once from the declarative
-        // `checked` content attribute at first connect. A pre-connect `.checked`
-        // property assignment changes live state but not the reset default, matching
-        // native `checked`/`defaultChecked` semantics. `checked` reflects, so unlike `FormAssociated`'s
-        // non-reflecting `value` this can't be captured from
-        // `attributeChangedCallback` alone — that would also fire (and wrongly
-        // redefine the default) every time the property setter reflects a later
-        // user toggle back into the attribute. Guarding with a one-shot flag
-        // instead mirrors `<lyra-combobox>`'s `_defaultCaptured`/`_defaultSelected`
-        // and `<lyra-switch>`'s identical `_defaultChecked`.
-        this._defaultChecked = false;
-        this._defaultCaptured = false;
-        this._fieldsetDisabled = false;
-        this._name = '';
-        this._checked = false;
-        this._indeterminate = false;
-        this._disabled = false;
-        this._required = false;
-        this._value = 'on';
-        this.onClick = () => {
-            this.toggle();
-        };
-        this.onKeyDown = (e) => {
-            if (this.effectiveDisabled)
-                return;
-            // Space/Enter both activate, matching lyra-switch's onKeyDown (and
-            // lyra-table's sortable-header/row convention) for role-based clickable
-            // elements — bound to keydown, not keyup/native click-forwarding.
-            if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'Enter') {
-                // Space would otherwise scroll the page, same as a native checkbox.
-                e.preventDefault();
-                this.toggle();
-            }
-        };
-        this.onSlotChange = () => {
-            this.recomputeHasLabelSlot();
-        };
-        this.onBlur = () => {
-            this.touched = true;
-            this.reflectInvalid();
-        };
-        this.internals = this.attachInternals();
-        this.validityController = new AnchoredValidityController(this, this.internals, () => this[VALIDITY_ANCHOR]());
-        this.syncFormState();
-    }
-    get form() {
-        return this.internals.form;
-    }
-    get labels() {
-        return this.internals.labels;
-    }
-    get validity() {
-        return this.internals.validity;
-    }
-    get validationMessage() {
-        return this.internals.validationMessage;
-    }
-    get willValidate() {
-        return this.internals.willValidate;
-    }
-    /** @internal */
-    [VALIDITY_ANCHOR]() {
-        return this.renderRoot?.querySelector('[part="base"]') ?? null;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (!this._defaultCaptured) {
-            this._defaultCaptured = true;
-            this._defaultChecked = this.hasAttribute('checked');
-        }
-        this.updateValidity();
-        this.labelObserver = new MutationObserver(() => this.recomputeHasLabelSlot());
-        this.labelObserver.observe(this, { childList: true, subtree: true, characterData: true });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.labelObserver?.disconnect();
-        this.labelObserver = undefined;
-    }
-    willUpdate() {
-        // Seed `hasLabelSlot` from the light-DOM children synchronously before
-        // the very first render (same `!hasUpdated` guard as combobox/date-input's
-        // `hasHintSlot` etc.) so declaratively-provided label text doesn't flash
-        // hidden for one frame while waiting on the first `slotchange` event.
-        if (!this.hasUpdated) {
-            this.hasLabelSlot = Array.from(this.childNodes).some((n) => (n.textContent ?? '').trim().length > 0);
-        }
-    }
-    updateValidity() {
-        if (this.required && !this.checked) {
-            this.validityController.setValidity({ valueMissing: true }, 'Please check this box if you want to continue.');
-        }
-        else {
-            this.validityController.setValidity({});
-        }
-        this.reflectInvalid();
-    }
-    // Keeps `data-invalid` (styling hook) in lockstep with `aria-invalid`
-    // (rendered from the same expression in `render()`) any time validity
-    // could have changed, rather than waiting on Lit's async `updated()` --
-    // consistent with this component's already-synchronous
-    // `syncFormState()`/setter shape.
-    reflectInvalid() {
-        this.toggleAttribute('data-invalid', this.touched && !this.internals.validity.valid);
-    }
-    syncFormState() {
-        // A native checkbox submits its `value` content attribute (default
-        // "on") only while checked, and contributes nothing at all — not even
-        // an empty string — while unchecked.
-        const state = `${this.checked ? 'checked' : 'unchecked'}${this.indeterminate ? '/indeterminate' : ''}`;
-        this.internals.setFormValue(this.checked ? this.value : null, state);
-        this.updateValidity();
-    }
-    formResetCallback() {
-        this.checked = this._defaultChecked;
-    }
-    formStateRestoreCallback(state, _mode) {
-        const oldChecked = this._checked;
-        const oldIndeterminate = this._indeterminate;
-        this._checked = state === 'checked' || state === 'checked/indeterminate';
-        this._indeterminate = state === 'checked/indeterminate' || state === 'unchecked/indeterminate';
-        this.syncFormState();
-        this.requestUpdate('checked', oldChecked);
-        this.requestUpdate('indeterminate', oldIndeterminate);
-    }
-    formDisabledCallback(disabled) {
-        this._fieldsetDisabled = disabled;
-        this.requestUpdate();
-    }
-    checkValidity() {
-        return this.internals.checkValidity();
-    }
-    reportValidity() {
-        return this.internals.reportValidity();
-    }
-    toggle() {
-        if (this.effectiveDisabled)
-            return;
-        this.checked = !this.checked;
-        this.indeterminate = false;
-        this.emit('lyra-change', { checked: this.checked });
-    }
-    // Shared by `onSlotChange` (the "set of distributed nodes changed" case)
-    // and `labelObserver` (the "an already-slotted node mutated in place"
-    // case) so both paths agree on what counts as real label content.
-    recomputeHasLabelSlot() {
-        const slot = this.renderRoot.querySelector('slot');
-        if (!slot)
-            return;
-        const nodes = slot.assignedNodes({ flatten: true });
-        this.hasLabelSlot = nodes.some((n) => (n.textContent ?? '').trim().length > 0);
-    }
-    render() {
-        const mixed = this.indeterminate;
-        return html `
-      <span
-        part="base"
-        role="checkbox"
-        tabindex=${this.effectiveDisabled ? '-1' : '0'}
-        aria-checked=${mixed ? 'mixed' : this.checked ? 'true' : 'false'}
-        aria-required=${this.required ? 'true' : nothing}
-        aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
-        aria-disabled=${this.effectiveDisabled ? 'true' : nothing}
-        aria-label=${this.getAttribute('aria-label') || nothing}
-        @click=${this.onClick}
-        @keydown=${this.onKeyDown}
-        @blur=${this.onBlur}
-      >
-        <span part="box"> ${mixed ? indeterminateGlyph() : this.checked ? checkmarkGlyph() : nothing} </span>
-        <span part="label" ?hidden=${!this.hasLabelSlot}>
-          <slot @slotchange=${this.onSlotChange}></slot>
-        </span>
-      </span>
-    `;
-    }
-}
-__decorate([
-    state()
-], LyraCheckbox.prototype, "hasLabelSlot", void 0);
-__decorate([
-    state()
-], LyraCheckbox.prototype, "touched", void 0);
 defineElement('checkbox', LyraCheckbox);
+//# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox/checkbox.js.map

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

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

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

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

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

package/dist/components/checkbox/checkbox.styles.js

@@ -30,9 +30,9 @@ export const styles = css `
        (--lyra-icon-button-size capped at 1.75rem) — a real touch target
        without ballooning to the full 2.5rem meant for standalone
        icon-only buttons. */
-    min-inline-size: min(var(--lyra-icon-button-size), 1.75rem);
-    min-block-size: min(var(--lyra-icon-button-size), 1.75rem);
-    border: 1px solid var(--lyra-color-border);
+    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));
+    border: var(--lyra-border-width-thin) solid var(--lyra-color-border);
     border-radius: calc(var(--lyra-radius) * 0.6);
     background: var(--lyra-color-surface);
     color: var(--lyra-color-on-brand);
@@ -65,7 +65,7 @@ export const styles = css `
      "[hidden] { display: none }" rule needs no author-side override to
      take effect when hasLabelSlot is false. */
   [part='label'] {
-    font-size: 0.875rem;
+    font-size: var(--lyra-font-size-md-sm);
     color: var(--lyra-color-text);
   }
 
@@ -75,3 +75,4 @@ export const styles = css `
     }
   }
 `;
+//# sourceMappingURL=checkbox.styles.js.map

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

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

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

@@ -0,0 +1,57 @@
+import { type TemplateResult } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+export interface ChipGroupOverflowToggleDetail {
+    expanded: boolean;
+}
+/**
+ * `<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 declare class LyraChipGroup extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Maximum number of direct children shown before the rest collapse behind
+     *  a "+N" indicator. Unset (the default) means no limit — every child is
+     *  always shown. */
+    maxVisible?: number;
+    private childCount;
+    /** Whether the excess (beyond `max-visible`) children are currently
+     *  revealed. Meaningless (and never rendered) while there's no overflow. */
+    private expanded;
+    protected willUpdate(): void;
+    firstUpdated(): void;
+    protected updated(): void;
+    private get hasOverflow();
+    private syncChildVisibility;
+    private onSlotChange;
+    private onToggleOverflow;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-chip-group': LyraChipGroup;
+    }
+}
+//# sourceMappingURL=chip-group.class.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip-group.class.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip-group.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG7D,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,iCAAgC;IAE7C;;wBAEoB;IACkC,UAAU,CAAC,EAAE,MAAM,CAAC;IAKjE,OAAO,CAAC,UAAU,CAAK;IAEhC;gFAC4E;IACnE,OAAO,CAAC,QAAQ,CAAS;IAElC,SAAS,CAAC,UAAU,IAAI,IAAI,CAY3B;IAED,YAAY,IAAI,IAAI,CAanB;IAED,SAAS,CAAC,OAAO,IAAI,IAAI,CAExB;IAED,OAAO,KAAK,WAAW,GAGtB;IAED,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,gBAAgB,CAGtB;IAEF,MAAM,IAAI,cAAc,CAoBvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

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

@@ -0,0 +1,129 @@
+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 { 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);
+//# sourceMappingURL=chip-group.class.js.map

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

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

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

@@ -1,56 +1,2 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-export interface ChipGroupOverflowToggleDetail {
-    expanded: boolean;
-}
-/**
- * `<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 declare class LyraChipGroup extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** Maximum number of direct children shown before the rest collapse behind
-     *  a "+N" indicator. Unset (the default) means no limit — every child is
-     *  always shown. */
-    maxVisible?: number;
-    private childCount;
-    /** Whether the excess (beyond `max-visible`) children are currently
-     *  revealed. Meaningless (and never rendered) while there's no overflow. */
-    private expanded;
-    protected willUpdate(): void;
-    firstUpdated(): void;
-    protected updated(): void;
-    private get hasOverflow();
-    private syncChildVisibility;
-    private onSlotChange;
-    private onToggleOverflow;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-chip-group': LyraChipGroup;
-    }
-}
+export * from './chip-group.class.js';
+//# sourceMappingURL=chip-group.d.ts.map

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

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