@rcarls/rc-chip-group 0.5.0

package/dist/rc-chip-group-DKVJOa6j.js

@@ -0,0 +1,364 @@
+import { css as f, LitElement as _, nothing as u, html as m } from "lit";
+import { state as v, query as h, property as l } from "lit/decorators.js";
+import { RovingTabIndexMixin as b, isFocusable as y } from "@rcarls/rc-common";
+const w = f`
+  :host {
+    display: block;
+    min-inline-size: 0;
+    color-scheme: inherit;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  #root {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--rc-chip-group-row-gap, 0) var(--rc-chip-group-column-gap, 0.5rem);
+    min-inline-size: 0;
+    padding-block: var(--rc-chip-group-padding-block, 0);
+  }
+
+  #root[data-mode='scroll'] {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-inline: contain;
+    scroll-padding-inline: var(--rc-chip-group-scroll-padding-inline, 0);
+    scrollbar-width: var(--rc-chip-group-scrollbar-width, none);
+    -webkit-overflow-scrolling: touch;
+  }
+
+  #root[data-mode='scroll']::-webkit-scrollbar {
+    display: var(--rc-chip-group-webkit-scrollbar-display, none);
+  }
+
+  #root[data-measuring] {
+    flex-wrap: wrap;
+    overflow: hidden;
+  }
+
+  #slot-wrap {
+    display: contents;
+  }
+
+  ::slotted(*) {
+    flex: 0 0 auto;
+  }
+
+  #toggle-wrap {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    gap: var(--rc-chip-group-toggle-separator-gap, 0.5rem);
+    order: -1;
+  }
+
+  #toggle-wrap[hidden] {
+    display: none;
+  }
+
+  #toggle {
+    --rc-chip-gap: var(--rc-chip-group-toggle-gap, 0.5rem);
+  }
+
+  #toggle > button {
+    white-space: nowrap;
+  }
+
+  [part='toggle-icon'] {
+    display: block;
+    flex: 0 0 auto;
+    inline-size: var(--rc-chip-group-toggle-icon-size, 1.125rem);
+    block-size: var(--rc-chip-group-toggle-icon-size, 1.125rem);
+  }
+
+  [part='toggle-separator'] {
+    flex: 0 0 auto;
+    inline-size: var(--rc-chip-group-toggle-separator-inline-size, 1px);
+    block-size: var(--rc-chip-group-toggle-separator-block-size, 1.5rem);
+    background: var(--rc-chip-group-toggle-separator-color, currentColor);
+  }
+
+  @media (forced-colors: active) {
+    #root[data-mode='scroll'] {
+      scrollbar-width: auto;
+    }
+
+    [part='toggle-separator'] {
+      background: CanvasText;
+    }
+  }
+`;
+var x = Object.defineProperty, L = Object.getOwnPropertyDescriptor, o = (c, e, t, i) => {
+  for (var s = i > 1 ? void 0 : i ? L(e, t) : e, n = c.length - 1, a; n >= 0; n--)
+    (a = c[n]) && (s = (i ? a(e, t, s) : a(s)) || s);
+  return i && s && x(e, t, s), s;
+};
+const d = class d extends b(_) {
+  constructor() {
+    super(...arguments), this._defaultExpanded = !1, this._expandedInitialized = !1, this._overflowing = !1, this._resizeObserver = null, this._mutationObserver = null, this._authoredVariants = /* @__PURE__ */ new Map(), this.layout = "auto", this.maxRows = 2, this.kind = "generic", this.selection = "none", this.label = "Chip actions", this.showAllLabel = "Show all", this.showLessLabel = "Show less", this._handleKeyDown = (e) => {
+      if (this.kind !== "assist" || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)
+        return;
+      const t = getComputedStyle(this._$root).direction === "rtl";
+      switch (e.key) {
+        case (t ? "ArrowLeft" : "ArrowRight"):
+          e.preventDefault(), this.focusItem(this.nextItem);
+          break;
+        case (t ? "ArrowRight" : "ArrowLeft"):
+          e.preventDefault(), this.focusItem(this.previousItem);
+          break;
+        case "Home":
+          e.preventDefault(), this.focusFirst();
+          break;
+        case "End":
+          e.preventDefault(), this.focusLast();
+          break;
+      }
+    }, this._handleChange = (e) => {
+      if (this._resolvedLayout === "scroll") {
+        this._targetVisibilityFrame !== void 0 && (cancelAnimationFrame(this._targetVisibilityFrame), this._targetVisibilityFrame = void 0), this._pendingScrollLeft = this._$root.scrollLeft;
+        const t = new Set(this._assignedElements());
+        this._pendingScrollTarget = e.composedPath().find(
+          (i) => i instanceof HTMLElement && t.has(i)
+        );
+      }
+      queueMicrotask(() => {
+        this._syncNativeSelection(), this._scheduleMeasure();
+      });
+    }, this._toggleExpanded = () => {
+      const e = this.expanded, t = !e;
+      this._expanded === void 0 && (this._uncontrolledExpanded = t, this.requestUpdate("expanded", e)), this.dispatchEvent(
+        new CustomEvent("rc-chip-group-toggle", {
+          bubbles: !0,
+          composed: !0,
+          detail: { expanded: t }
+        })
+      );
+    };
+  }
+  get expanded() {
+    return this._expanded ?? this._uncontrolledExpanded ?? this._defaultExpanded;
+  }
+  set expanded(e) {
+    const t = this.expanded;
+    this._expanded = e, this._expandedInitialized = !0, this.requestUpdate("expanded", t);
+  }
+  get defaultExpanded() {
+    return this._defaultExpanded;
+  }
+  set defaultExpanded(e) {
+    const t = this._defaultExpanded;
+    this._defaultExpanded = e, !this._expandedInitialized && this._expanded === void 0 && this._uncontrolledExpanded === void 0 && this.requestUpdate("expanded", t), this.requestUpdate("defaultExpanded", t);
+  }
+  connectedCallback() {
+    super.connectedCallback(), typeof ResizeObserver == "function" && (this._resizeObserver ??= new ResizeObserver(() => this._scheduleMeasure()), this._resizeObserver.observe(this)), typeof MutationObserver == "function" && (this._mutationObserver ??= new MutationObserver(() => {
+      this._syncNativeSelection(), this._scheduleMeasure();
+    }), this._mutationObserver.observe(this, {
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["checked", "disabled", "hidden"]
+    }));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._resizeObserver?.disconnect(), this._mutationObserver?.disconnect(), this._measureFrame !== void 0 && (cancelAnimationFrame(this._measureFrame), this._measureFrame = void 0), this._targetVisibilityFrame !== void 0 && (cancelAnimationFrame(this._targetVisibilityFrame), this._targetVisibilityFrame = void 0), this._pendingScrollLeft = void 0, this._pendingScrollTarget = void 0, this._restoreAuthoredVariants();
+  }
+  firstUpdated() {
+    this._syncAssignedItems(), this._observeAssignedItems(), this._scheduleMeasure();
+  }
+  updated(e) {
+    e.has("kind") && (this._syncAssignedItems(), this._$slot.dispatchEvent(new Event("slotchange"))), (e.has("layout") || e.has("maxRows") || e.has("expanded")) && this._scheduleMeasure();
+  }
+  _collectItems(e) {
+    if (this.kind !== "assist")
+      return [];
+    const t = this._$toggle?.querySelector(":scope > button"), i = e.assignedElements().flatMap((s) => {
+      if (s.matches("rc-button, rc-chip")) {
+        const n = s.querySelector(":scope > button");
+        return n ? [n] : [];
+      }
+      return this._isAssistItem(s) ? [s] : [];
+    });
+    return t ? [t, ...i] : i;
+  }
+  _initItems() {
+    super._initItems();
+    const e = this._lastFocused ?? this.firstItem;
+    queueMicrotask(() => {
+      this.kind === "assist" && this.matches(":focus-within") && this.focusItem(e);
+    });
+  }
+  _isAssistItem(e) {
+    return e instanceof HTMLButtonElement || e instanceof HTMLInputElement || e instanceof HTMLSelectElement || e instanceof HTMLTextAreaElement ? !0 : e instanceof HTMLAnchorElement || e instanceof HTMLAreaElement ? e.hasAttribute("href") : y(e);
+  }
+  _handleSlotChange(e) {
+    this._onSlotChange(e), queueMicrotask(() => {
+      this.isConnected && (this._syncAssignedItems(), this._observeAssignedItems(), this._scheduleMeasure());
+    });
+  }
+  _assignedElements() {
+    return this._$slot.assignedElements({ flatten: !0 }).filter((e) => e instanceof HTMLElement);
+  }
+  _syncAssignedItems() {
+    const e = this.kind === "assist" ? "assist" : this.kind === "filter" ? "filter" : null, t = this._assignedElements().filter(
+      (i) => i.localName === "rc-chip"
+    );
+    for (const [i, s] of this._authoredVariants)
+      (!e || !t.includes(i)) && (i.variant = s, this._authoredVariants.delete(i));
+    if (e)
+      for (const i of t)
+        this._authoredVariants.has(i) || this._authoredVariants.set(i, i.variant), i.variant = e;
+    this._syncNativeSelection(), this._validateFilterItems();
+  }
+  _observeAssignedItems() {
+    this._resizeObserver?.disconnect(), this._resizeObserver?.observe(this);
+    for (const e of this._assignedElements())
+      this._resizeObserver?.observe(e);
+  }
+  _syncNativeSelection() {
+    if (this.kind === "filter")
+      for (const e of this._assignedElements())
+        e.localName === "rc-chip" && e.syncNativeSelection();
+  }
+  _restoreAuthoredVariants() {
+    for (const [e, t] of this._authoredVariants)
+      e.variant = t;
+    this._authoredVariants.clear();
+  }
+  _validateFilterItems() {
+    this.kind !== "filter" || this.selection;
+  }
+  _scheduleMeasure() {
+    this._measureFrame !== void 0 || !this.isConnected || (this._measureFrame = requestAnimationFrame(() => {
+      this._measureFrame = void 0, this._measureRows();
+    }));
+  }
+  _measureRows() {
+    if (this.layout !== "auto") {
+      if (this.layout === "scroll" && this._pendingScrollLeft !== void 0) {
+        const a = this._pendingScrollTarget;
+        this._$root.scrollLeft = this._pendingScrollLeft, this._keepTargetVisible(a), this._scheduleTargetVisibility(a);
+      }
+      this._pendingScrollLeft = void 0, this._pendingScrollTarget = void 0, this._overflowing && (this._overflowing = !1);
+      return;
+    }
+    const e = this._assignedElements().filter((a) => !a.hidden), t = this._resolvedLayout === "scroll", i = this._pendingScrollLeft ?? this._$root.scrollLeft;
+    this._$root.toggleAttribute("data-measuring", !0), this._$toggleWrap.hidden = !0;
+    const s = [];
+    for (const a of e) {
+      const p = a.getBoundingClientRect().top;
+      s.some((g) => Math.abs(g - p) < 1) || s.push(p);
+    }
+    this._$root.removeAttribute("data-measuring");
+    const n = s.length > Math.max(1, Math.floor(this.maxRows || 1));
+    if (this._$toggleWrap.hidden = !n, n !== this._overflowing && (this._overflowing = n, this.updateComplete.then(() => {
+      this.kind === "assist" && this._initItems();
+    })), t && this._resolvedLayout === "scroll") {
+      const a = this._pendingScrollTarget;
+      this._$root.scrollLeft = i, this._keepTargetVisible(a), this._scheduleTargetVisibility(a);
+    }
+    this._pendingScrollLeft = void 0, this._pendingScrollTarget = void 0;
+  }
+  _keepTargetVisible(e) {
+    if (!e?.isConnected || !this.contains(e))
+      return;
+    const t = this._$root.getBoundingClientRect(), i = e.getBoundingClientRect(), s = i.left < t.left ? i.left - t.left : i.right > t.right ? i.right - t.right : 0;
+    s !== 0 && (this._$root.scrollLeft += s);
+  }
+  _scheduleTargetVisibility(e) {
+    e && (this._targetVisibilityFrame = requestAnimationFrame(() => {
+      this._targetVisibilityFrame = void 0, this._resolvedLayout === "scroll" && this._keepTargetVisible(e);
+    }));
+  }
+  get _resolvedLayout() {
+    return this.layout === "scroll" || this.layout === "auto" && this._overflowing && !this.expanded ? "scroll" : "wrap";
+  }
+  render() {
+    const e = this.kind === "assist", t = this.layout === "auto" && this._overflowing;
+    return m`
+      <div
+        id="root"
+        part="root"
+        data-mode=${this._resolvedLayout}
+        role=${e ? "toolbar" : u}
+        aria-label=${e ? this.label : u}
+        @keydown=${this._handleKeyDown}
+        @change=${{ handleEvent: this._handleChange, capture: !0 }}
+      >
+        <span id="toggle-wrap" ?hidden=${!t}>
+          <rc-chip id="toggle" part="toggle" variant="assist">
+            <button type="button" ?disabled=${!t} @click=${this._toggleExpanded}>
+              <svg
+                part="toggle-icon"
+                data-rc-chip-icon
+                aria-hidden="true"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  fill="currentColor"
+                  d="M3 17v2h6v-2zM3 5v2h10V5zm10 16v-2h8v-2h-8v-2h-2v6zM7 9v2H3v2h4v2h2V9zm14 4v-2H11v2zm-6-4h2V7h4V5h-4V3h-2z"
+                ></path>
+              </svg>
+              ${this.expanded ? this.showLessLabel : this.showAllLabel}
+            </button>
+          </rc-chip>
+          <span id="toggle-separator" part="toggle-separator" aria-hidden="true"></span>
+        </span>
+        <div id="slot-wrap" @focusin=${this._handleItemFocus}>
+          <slot id="items" @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+d.styles = w;
+let r = d;
+o([
+  v()
+], r.prototype, "_overflowing", 2);
+o([
+  h("#root", !0)
+], r.prototype, "_$root", 2);
+o([
+  h("#items", !0)
+], r.prototype, "_$slot", 2);
+o([
+  h("#toggle", !0)
+], r.prototype, "_$toggle", 2);
+o([
+  h("#toggle-wrap", !0)
+], r.prototype, "_$toggleWrap", 2);
+o([
+  l({ reflect: !0 })
+], r.prototype, "layout", 2);
+o([
+  l({ type: Number, attribute: "max-rows", reflect: !0 })
+], r.prototype, "maxRows", 2);
+o([
+  l({ reflect: !0 })
+], r.prototype, "kind", 2);
+o([
+  l({ reflect: !0 })
+], r.prototype, "selection", 2);
+o([
+  l()
+], r.prototype, "label", 2);
+o([
+  l({ attribute: "show-all-label" })
+], r.prototype, "showAllLabel", 2);
+o([
+  l({ attribute: "show-less-label" })
+], r.prototype, "showLessLabel", 2);
+o([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "expanded", 1);
+o([
+  l({ type: Boolean, attribute: "default-expanded" })
+], r.prototype, "defaultExpanded", 1);
+export {
+  r as R
+};
+//# sourceMappingURL=rc-chip-group-DKVJOa6j.js.map

package/dist/rc-chip-group-DKVJOa6j.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-chip-group-DKVJOa6j.js","sources":["../src/rc-chip-group.styles.ts","../src/rc-chip-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const chipGroupStyles = css`\n  :host {\n    display: block;\n    min-inline-size: 0;\n    color-scheme: inherit;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  #root {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: var(--rc-chip-group-row-gap, 0) var(--rc-chip-group-column-gap, 0.5rem);\n    min-inline-size: 0;\n    padding-block: var(--rc-chip-group-padding-block, 0);\n  }\n\n  #root[data-mode='scroll'] {\n    flex-wrap: nowrap;\n    overflow-x: auto;\n    overflow-y: hidden;\n    overscroll-behavior-inline: contain;\n    scroll-padding-inline: var(--rc-chip-group-scroll-padding-inline, 0);\n    scrollbar-width: var(--rc-chip-group-scrollbar-width, none);\n    -webkit-overflow-scrolling: touch;\n  }\n\n  #root[data-mode='scroll']::-webkit-scrollbar {\n    display: var(--rc-chip-group-webkit-scrollbar-display, none);\n  }\n\n  #root[data-measuring] {\n    flex-wrap: wrap;\n    overflow: hidden;\n  }\n\n  #slot-wrap {\n    display: contents;\n  }\n\n  ::slotted(*) {\n    flex: 0 0 auto;\n  }\n\n  #toggle-wrap {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n    gap: var(--rc-chip-group-toggle-separator-gap, 0.5rem);\n    order: -1;\n  }\n\n  #toggle-wrap[hidden] {\n    display: none;\n  }\n\n  #toggle {\n    --rc-chip-gap: var(--rc-chip-group-toggle-gap, 0.5rem);\n  }\n\n  #toggle > button {\n    white-space: nowrap;\n  }\n\n  [part='toggle-icon'] {\n    display: block;\n    flex: 0 0 auto;\n    inline-size: var(--rc-chip-group-toggle-icon-size, 1.125rem);\n    block-size: var(--rc-chip-group-toggle-icon-size, 1.125rem);\n  }\n\n  [part='toggle-separator'] {\n    flex: 0 0 auto;\n    inline-size: var(--rc-chip-group-toggle-separator-inline-size, 1px);\n    block-size: var(--rc-chip-group-toggle-separator-block-size, 1.5rem);\n    background: var(--rc-chip-group-toggle-separator-color, currentColor);\n  }\n\n  @media (forced-colors: active) {\n    #root[data-mode='scroll'] {\n      scrollbar-width: auto;\n    }\n\n    [part='toggle-separator'] {\n      background: CanvasText;\n    }\n  }\n`;\n\nexport default chipGroupStyles;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { isFocusable, RovingTabIndexMixin } from '@rcarls/rc-common';\nimport type { RCChip } from '@rcarls/rc-chip';\n\nimport chipGroupStyles from './rc-chip-group.styles.js';\n\nexport type RCChipGroupLayout = 'auto' | 'wrap' | 'scroll';\nexport type RCChipGroupKind = 'generic' | 'assist' | 'filter';\nexport type RCChipGroupSelection = 'none' | 'single' | 'multiple';\n\nexport interface RCChipGroupToggleDetail {\n  /** Expanded state requested by the user. */\n  expanded: boolean;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-chip-group': RCChipGroup;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-chip-group-toggle': CustomEvent<RCChipGroupToggleDetail>;\n  }\n}\n\n/**\n * Adaptive chip layout for native controls, `rc-chip`, and arbitrary elements.\n * Natural wrapping is kept while content fits within `max-rows`; overflowing\n * auto groups collapse to one horizontally scrolling row with a leading\n * Show all action.\n *\n * Assist groups expose toolbar semantics and roving arrow-key navigation.\n * Filter groups preserve native radio/checkbox behavior: author a `<fieldset>`\n * around the group, then place one native input in each direct-child chip label.\n * Generic groups are layout-only and do not coordinate their children.\n *\n * @slot - Direct chip or arbitrary-element children.\n *\n * @fires rc-chip-group-toggle - Fired after the user activates Show all or Show less.\n *\n * @csspart root - Flex layout and horizontal scroll container.\n * @csspart toggle - Internal leading disclosure chip.\n * @csspart toggle-icon - MDI tune icon inside the disclosure chip.\n * @csspart toggle-separator - Vertical separator after the disclosure chip.\n *\n * @attr layout - Layout strategy: `auto`, `wrap`, or `scroll`.\n * @attr max-rows - Maximum natural rows before auto layout collapses.\n * @attr kind - Coordination mode: `generic`, `assist`, or `filter`.\n * @attr selection - Filter semantics hint: `none`, `single`, or `multiple`.\n * @attr expanded - Current auto-layout disclosure state. Host writes are silent.\n * @attr default-expanded - Initial uncontrolled disclosure state.\n * @attr label - Accessible label for assist-toolbar semantics.\n * @attr show-all-label - Label for the collapsed overflow action.\n * @attr show-less-label - Label for the expanded overflow action.\n *\n * @cssprop [--rc-chip-group-column-gap=0.5rem] - Inline gap between items.\n * @cssprop [--rc-chip-group-row-gap=0] - Block gap between wrapped rows.\n * @cssprop [--rc-chip-group-padding-block=0] - Group block-axis padding.\n * @cssprop [--rc-chip-group-scroll-padding-inline=0] - Horizontal scroll padding.\n * @cssprop [--rc-chip-group-scrollbar-width=none] - Standards-based scrollbar width.\n * @cssprop [--rc-chip-group-toggle-gap=0.5rem] - Gap between the disclosure icon and label.\n * @cssprop [--rc-chip-group-toggle-separator-gap=0.5rem] - Gap before the disclosure separator.\n * @cssprop [--rc-chip-group-toggle-icon-size=1.125rem] - Disclosure icon size.\n * @cssprop [--rc-chip-group-toggle-separator-block-size=1.5rem] - Separator block size.\n * @cssprop [--rc-chip-group-toggle-separator-inline-size=1px] - Separator thickness.\n * @cssprop [--rc-chip-group-toggle-separator-color=currentColor] - Separator color.\n */\nexport class RCChipGroup extends RovingTabIndexMixin(LitElement) {\n  static override styles = chipGroupStyles;\n\n  private _expanded: boolean | undefined;\n  private _defaultExpanded = false;\n  private _uncontrolledExpanded: boolean | undefined;\n  private _expandedInitialized = false;\n  private _measureFrame: number | undefined;\n  private _targetVisibilityFrame: number | undefined;\n  private _pendingScrollLeft: number | undefined;\n  private _pendingScrollTarget: HTMLElement | undefined;\n\n  @state()\n  private _overflowing = false;\n\n  @query('#root', true)\n  protected _$root!: HTMLDivElement;\n\n  @query('#items', true)\n  private _$slot!: HTMLSlotElement;\n\n  @query('#toggle', true)\n  private _$toggle!: RCChip;\n\n  @query('#toggle-wrap', true)\n  private _$toggleWrap!: HTMLSpanElement;\n\n  private _resizeObserver: ResizeObserver | null = null;\n\n  private _mutationObserver: MutationObserver | null = null;\n  private readonly _authoredVariants = new Map<RCChip, RCChip['variant']>();\n\n  /** Layout strategy. */\n  @property({ reflect: true })\n  layout: RCChipGroupLayout = 'auto';\n\n  /** Maximum natural rows before auto layout collapses to horizontal scrolling. */\n  @property({ type: Number, attribute: 'max-rows', reflect: true })\n  maxRows = 2;\n\n  /** Child coordination mode. */\n  @property({ reflect: true })\n  kind: RCChipGroupKind = 'generic';\n\n  /** Native filter selection hint. */\n  @property({ reflect: true })\n  selection: RCChipGroupSelection = 'none';\n\n  /** Accessible label used when `kind=\"assist\"` exposes toolbar semantics. */\n  @property()\n  label = 'Chip actions';\n\n  /** Collapsed overflow action label. */\n  @property({ attribute: 'show-all-label' })\n  showAllLabel = 'Show all';\n\n  /** Expanded overflow action label. */\n  @property({ attribute: 'show-less-label' })\n  showLessLabel = 'Show less';\n\n  /** Current auto-layout disclosure state. Host writes are silent. */\n  @property({ type: Boolean, reflect: true })\n  get expanded(): boolean {\n    return this._expanded ?? this._uncontrolledExpanded ?? this._defaultExpanded;\n  }\n\n  set expanded(value: boolean | undefined) {\n    const oldValue = this.expanded;\n\n    this._expanded = value;\n    this._expandedInitialized = true;\n    this.requestUpdate('expanded', oldValue);\n  }\n\n  /** Initial uncontrolled disclosure state. */\n  @property({ type: Boolean, attribute: 'default-expanded' })\n  get defaultExpanded(): boolean {\n    return this._defaultExpanded;\n  }\n\n  set defaultExpanded(value: boolean) {\n    const oldValue = this._defaultExpanded;\n\n    this._defaultExpanded = value;\n\n    if (\n      !this._expandedInitialized &&\n      this._expanded === undefined &&\n      this._uncontrolledExpanded === undefined\n    ) {\n      this.requestUpdate('expanded', oldValue);\n    }\n\n    this.requestUpdate('defaultExpanded', oldValue);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    if (typeof ResizeObserver === 'function') {\n      this._resizeObserver ??= new ResizeObserver(() => this._scheduleMeasure());\n      this._resizeObserver.observe(this);\n    }\n\n    if (typeof MutationObserver === 'function') {\n      this._mutationObserver ??= new MutationObserver(() => {\n        this._syncNativeSelection();\n        this._scheduleMeasure();\n      });\n\n      this._mutationObserver.observe(this, {\n        subtree: true,\n        attributes: true,\n        attributeFilter: ['checked', 'disabled', 'hidden'],\n      });\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._resizeObserver?.disconnect();\n    this._mutationObserver?.disconnect();\n\n    if (this._measureFrame !== undefined) {\n      cancelAnimationFrame(this._measureFrame);\n      this._measureFrame = undefined;\n    }\n\n    if (this._targetVisibilityFrame !== undefined) {\n      cancelAnimationFrame(this._targetVisibilityFrame);\n      this._targetVisibilityFrame = undefined;\n    }\n\n    this._pendingScrollLeft = undefined;\n    this._pendingScrollTarget = undefined;\n    this._restoreAuthoredVariants();\n  }\n\n  protected override firstUpdated(): void {\n    this._syncAssignedItems();\n    this._observeAssignedItems();\n    this._scheduleMeasure();\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('kind')) {\n      this._syncAssignedItems();\n      this._$slot.dispatchEvent(new Event('slotchange'));\n    }\n\n    if (changed.has('layout') || changed.has('maxRows') || changed.has('expanded')) {\n      this._scheduleMeasure();\n    }\n  }\n\n  protected override _collectItems($slot: HTMLSlotElement): Element[] {\n    if (this.kind !== 'assist') {\n      return [];\n    }\n\n    const $toggleButton = this._$toggle?.querySelector(':scope > button');\n    const items = $slot.assignedElements().flatMap(($element) => {\n      if ($element.matches('rc-button, rc-chip')) {\n        const $button = $element.querySelector(':scope > button');\n\n        return $button ? [$button] : [];\n      }\n\n      return this._isAssistItem($element) ? [$element] : [];\n    });\n\n    return $toggleButton ? [$toggleButton, ...items] : items;\n  }\n\n  protected override _initItems(): void {\n    super._initItems();\n\n    const $target = this._lastFocused ?? this.firstItem;\n\n    queueMicrotask(() => {\n      if (this.kind === 'assist' && this.matches(':focus-within')) {\n        this.focusItem($target);\n      }\n    });\n  }\n\n  private _isAssistItem($element: Element): boolean {\n    if (\n      $element instanceof HTMLButtonElement ||\n      $element instanceof HTMLInputElement ||\n      $element instanceof HTMLSelectElement ||\n      $element instanceof HTMLTextAreaElement\n    ) {\n      return true;\n    }\n\n    if ($element instanceof HTMLAnchorElement || $element instanceof HTMLAreaElement) {\n      return $element.hasAttribute('href');\n    }\n\n    return isFocusable($element);\n  }\n\n  private readonly _handleKeyDown = (event: KeyboardEvent): void => {\n    if (\n      this.kind !== 'assist' ||\n      event.altKey ||\n      event.ctrlKey ||\n      event.metaKey ||\n      event.shiftKey\n    ) {\n      return;\n    }\n\n    const rtl = getComputedStyle(this._$root).direction === 'rtl';\n\n    switch (event.key) {\n      case rtl ? 'ArrowLeft' : 'ArrowRight':\n        event.preventDefault();\n        this.focusItem(this.nextItem);\n        break;\n      case rtl ? 'ArrowRight' : 'ArrowLeft':\n        event.preventDefault();\n        this.focusItem(this.previousItem);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this.focusFirst();\n        break;\n      case 'End':\n        event.preventDefault();\n        this.focusLast();\n        break;\n    }\n  };\n\n  private _handleSlotChange(event: Event): void {\n    this._onSlotChange(event);\n\n    queueMicrotask(() => {\n      if (!this.isConnected) {\n        return;\n      }\n\n      this._syncAssignedItems();\n      this._observeAssignedItems();\n      this._scheduleMeasure();\n    });\n  }\n\n  private _assignedElements(): HTMLElement[] {\n    return this._$slot\n      .assignedElements({ flatten: true })\n      .filter(($element): $element is HTMLElement => $element instanceof HTMLElement);\n  }\n\n  private _syncAssignedItems(): void {\n    const variant = this.kind === 'assist' ? 'assist' : this.kind === 'filter' ? 'filter' : null;\n    const $assignedChips = this._assignedElements().filter(\n      ($element): $element is RCChip => $element.localName === 'rc-chip',\n    );\n\n    for (const [$chip, authoredVariant] of this._authoredVariants) {\n      if (!variant || !$assignedChips.includes($chip)) {\n        $chip.variant = authoredVariant;\n        this._authoredVariants.delete($chip);\n      }\n    }\n\n    if (variant) {\n      for (const $chip of $assignedChips) {\n        if (!this._authoredVariants.has($chip)) {\n          this._authoredVariants.set($chip, $chip.variant);\n        }\n\n        $chip.variant = variant;\n      }\n    }\n\n    this._syncNativeSelection();\n    this._validateFilterItems();\n  }\n\n  private _observeAssignedItems(): void {\n    this._resizeObserver?.disconnect();\n    this._resizeObserver?.observe(this);\n\n    for (const $element of this._assignedElements()) {\n      this._resizeObserver?.observe($element);\n    }\n  }\n\n  private _syncNativeSelection(): void {\n    if (this.kind !== 'filter') {\n      return;\n    }\n\n    for (const $element of this._assignedElements()) {\n      if ($element.localName !== 'rc-chip') {\n        continue;\n      }\n\n      ($element as RCChip).syncNativeSelection();\n    }\n  }\n\n  private _restoreAuthoredVariants(): void {\n    for (const [$chip, variant] of this._authoredVariants) {\n      $chip.variant = variant;\n    }\n\n    this._authoredVariants.clear();\n  }\n\n  private _validateFilterItems(): void {\n    if (this.kind !== 'filter' || this.selection === 'none' || !import.meta.env.DEV) {\n      return;\n    }\n\n    const expectedType = this.selection === 'single' ? 'radio' : 'checkbox';\n    const invalid = this._assignedElements().filter(($element) => {\n      if ($element.localName !== 'rc-chip') {\n        return false;\n      }\n\n      return !$element.querySelector(`:scope > label > input[type=\"${expectedType}\"]`);\n    });\n\n    if (invalid.length > 0) {\n      console.warn(\n        `[rc-chip-group] selection=\"${this.selection}\" expects each rc-chip to contain a native ${expectedType} input.`,\n        invalid,\n      );\n    }\n  }\n\n  private readonly _handleChange = (event: Event): void => {\n    if (this._resolvedLayout === 'scroll') {\n      if (this._targetVisibilityFrame !== undefined) {\n        cancelAnimationFrame(this._targetVisibilityFrame);\n        this._targetVisibilityFrame = undefined;\n      }\n\n      this._pendingScrollLeft = this._$root.scrollLeft;\n\n      const assigned = new Set(this._assignedElements());\n\n      this._pendingScrollTarget = event\n        .composedPath()\n        .find(\n          ($target): $target is HTMLElement =>\n            $target instanceof HTMLElement && assigned.has($target),\n        );\n    }\n\n    queueMicrotask(() => {\n      this._syncNativeSelection();\n      this._scheduleMeasure();\n    });\n  };\n\n  private readonly _toggleExpanded = (): void => {\n    const oldValue = this.expanded;\n    const requestedExpanded = !oldValue;\n\n    if (this._expanded === undefined) {\n      this._uncontrolledExpanded = requestedExpanded;\n      this.requestUpdate('expanded', oldValue);\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<RCChipGroupToggleDetail>('rc-chip-group-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { expanded: requestedExpanded },\n      }),\n    );\n  };\n\n  private _scheduleMeasure(): void {\n    if (this._measureFrame !== undefined || !this.isConnected) {\n      return;\n    }\n\n    this._measureFrame = requestAnimationFrame(() => {\n      this._measureFrame = undefined;\n      this._measureRows();\n    });\n  }\n\n  private _measureRows(): void {\n    if (this.layout !== 'auto') {\n      if (this.layout === 'scroll' && this._pendingScrollLeft !== undefined) {\n        const $target = this._pendingScrollTarget;\n\n        this._$root.scrollLeft = this._pendingScrollLeft;\n        this._keepTargetVisible($target);\n        this._scheduleTargetVisibility($target);\n      }\n\n      this._pendingScrollLeft = undefined;\n      this._pendingScrollTarget = undefined;\n\n      if (this._overflowing) {\n        this._overflowing = false;\n      }\n\n      return;\n    }\n\n    const items = this._assignedElements().filter(($element) => !$element.hidden);\n    const wasScrolling = this._resolvedLayout === 'scroll';\n    const scrollLeft = this._pendingScrollLeft ?? this._$root.scrollLeft;\n\n    this._$root.toggleAttribute('data-measuring', true);\n    this._$toggleWrap.hidden = true;\n\n    const rowStarts: number[] = [];\n\n    for (const $item of items) {\n      const top = $item.getBoundingClientRect().top;\n\n      if (!rowStarts.some((rowTop) => Math.abs(rowTop - top) < 1)) {\n        rowStarts.push(top);\n      }\n    }\n\n    this._$root.removeAttribute('data-measuring');\n\n    const nextOverflowing = rowStarts.length > Math.max(1, Math.floor(this.maxRows || 1));\n\n    this._$toggleWrap.hidden = !nextOverflowing;\n\n    if (nextOverflowing !== this._overflowing) {\n      this._overflowing = nextOverflowing;\n\n      void this.updateComplete.then(() => {\n        if (this.kind === 'assist') {\n          this._initItems();\n        }\n      });\n    }\n\n    if (wasScrolling && this._resolvedLayout === 'scroll') {\n      const $target = this._pendingScrollTarget;\n\n      this._$root.scrollLeft = scrollLeft;\n      this._keepTargetVisible($target);\n      this._scheduleTargetVisibility($target);\n    }\n\n    this._pendingScrollLeft = undefined;\n    this._pendingScrollTarget = undefined;\n  }\n\n  private _keepTargetVisible($target: HTMLElement | undefined): void {\n    if (!$target?.isConnected || !this.contains($target)) {\n      return;\n    }\n\n    const rootRect = this._$root.getBoundingClientRect();\n    const targetRect = $target.getBoundingClientRect();\n    const delta =\n      targetRect.left < rootRect.left\n        ? targetRect.left - rootRect.left\n        : targetRect.right > rootRect.right\n          ? targetRect.right - rootRect.right\n          : 0;\n\n    if (delta !== 0) {\n      this._$root.scrollLeft += delta;\n    }\n  }\n\n  private _scheduleTargetVisibility($target: HTMLElement | undefined): void {\n    if (!$target) {\n      return;\n    }\n\n    this._targetVisibilityFrame = requestAnimationFrame(() => {\n      this._targetVisibilityFrame = undefined;\n\n      if (this._resolvedLayout === 'scroll') {\n        this._keepTargetVisible($target);\n      }\n    });\n  }\n\n  private get _resolvedLayout(): 'wrap' | 'scroll' {\n    if (this.layout === 'scroll') {\n      return 'scroll';\n    }\n\n    if (this.layout === 'auto' && this._overflowing && !this.expanded) {\n      return 'scroll';\n    }\n\n    return 'wrap';\n  }\n\n  protected override render() {\n    const assist = this.kind === 'assist';\n    const showToggle = this.layout === 'auto' && this._overflowing;\n\n    return html`\n      <div\n        id=\"root\"\n        part=\"root\"\n        data-mode=${this._resolvedLayout}\n        role=${assist ? 'toolbar' : nothing}\n        aria-label=${assist ? this.label : nothing}\n        @keydown=${this._handleKeyDown}\n        @change=${{ handleEvent: this._handleChange, capture: true }}\n      >\n        <span id=\"toggle-wrap\" ?hidden=${!showToggle}>\n          <rc-chip id=\"toggle\" part=\"toggle\" variant=\"assist\">\n            <button type=\"button\" ?disabled=${!showToggle} @click=${this._toggleExpanded}>\n              <svg\n                part=\"toggle-icon\"\n                data-rc-chip-icon\n                aria-hidden=\"true\"\n                focusable=\"false\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  fill=\"currentColor\"\n                  d=\"M3 17v2h6v-2zM3 5v2h10V5zm10 16v-2h8v-2h-8v-2h-2v6zM7 9v2H3v2h4v2h2V9zm14 4v-2H11v2zm-6-4h2V7h4V5h-4V3h-2z\"\n                ></path>\n              </svg>\n              ${this.expanded ? this.showLessLabel : this.showAllLabel}\n            </button>\n          </rc-chip>\n          <span id=\"toggle-separator\" part=\"toggle-separator\" aria-hidden=\"true\"></span>\n        </span>\n        <div id=\"slot-wrap\" @focusin=${this._handleItemFocus}>\n          <slot id=\"items\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default RCChipGroup;\n"],"names":["chipGroupStyles","css","_RCChipGroup","RovingTabIndexMixin","LitElement","event","rtl","assigned","$target","oldValue","requestedExpanded","value","changed","$slot","$toggleButton","items","$element","$button","isFocusable","variant","$assignedChips","$chip","authoredVariant","wasScrolling","scrollLeft","rowStarts","$item","top","rowTop","nextOverflowing","rootRect","targetRect","delta","assist","showToggle","html","nothing","RCChipGroup","__decorateClass","state","query","property"],"mappings":"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"}

package/dist/rc-chip-group-define.js

@@ -0,0 +1,7 @@
+import "@rcarls/rc-chip/define";
+import { R as o } from "./rc-chip-group-DKVJOa6j.js";
+customElements.get("rc-chip-group") || customElements.define("rc-chip-group", o);
+export {
+  o as RCChipGroup
+};
+//# sourceMappingURL=rc-chip-group-define.js.map

package/dist/rc-chip-group-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-chip-group-define.js","sources":["../src/define.ts"],"sourcesContent":["import '@rcarls/rc-chip/define';\nimport { RCChipGroup } from './index.js';\n\ncustomElements.get('rc-chip-group') || customElements.define('rc-chip-group', RCChipGroup);\n\nexport * from './index.js';\n"],"names":["RCChipGroup"],"mappings":";;AAGA,eAAe,IAAI,eAAe,KAAK,eAAe,OAAO,iBAAiBA,CAAW;"}

package/dist/rc-chip-group.js

@@ -0,0 +1,5 @@
+import { R as r } from "./rc-chip-group-DKVJOa6j.js";
+export {
+  r as RCChipGroup
+};
+//# sourceMappingURL=rc-chip-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-chip-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/packages/rc-chip-group/src/define.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/packages/rc-chip-group/src/index.d.ts

@@ -0,0 +1 @@
+export * from './rc-chip-group.js';

package/dist/types/packages/rc-chip-group/src/rc-chip-group.d.ts

@@ -0,0 +1,122 @@
+import { LitElement, PropertyValues } from 'lit';
+export type RCChipGroupLayout = 'auto' | 'wrap' | 'scroll';
+export type RCChipGroupKind = 'generic' | 'assist' | 'filter';
+export type RCChipGroupSelection = 'none' | 'single' | 'multiple';
+export interface RCChipGroupToggleDetail {
+    /** Expanded state requested by the user. */
+    expanded: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-chip-group': RCChipGroup;
+    }
+    interface HTMLElementEventMap {
+        'rc-chip-group-toggle': CustomEvent<RCChipGroupToggleDetail>;
+    }
+}
+declare const RCChipGroup_base: typeof LitElement & (new (...args: any[]) => import('@rcarls/rc-common').RovingTabIndexMixinBase);
+/**
+ * Adaptive chip layout for native controls, `rc-chip`, and arbitrary elements.
+ * Natural wrapping is kept while content fits within `max-rows`; overflowing
+ * auto groups collapse to one horizontally scrolling row with a leading
+ * Show all action.
+ *
+ * Assist groups expose toolbar semantics and roving arrow-key navigation.
+ * Filter groups preserve native radio/checkbox behavior: author a `<fieldset>`
+ * around the group, then place one native input in each direct-child chip label.
+ * Generic groups are layout-only and do not coordinate their children.
+ *
+ * @slot - Direct chip or arbitrary-element children.
+ *
+ * @fires rc-chip-group-toggle - Fired after the user activates Show all or Show less.
+ *
+ * @csspart root - Flex layout and horizontal scroll container.
+ * @csspart toggle - Internal leading disclosure chip.
+ * @csspart toggle-icon - MDI tune icon inside the disclosure chip.
+ * @csspart toggle-separator - Vertical separator after the disclosure chip.
+ *
+ * @attr layout - Layout strategy: `auto`, `wrap`, or `scroll`.
+ * @attr max-rows - Maximum natural rows before auto layout collapses.
+ * @attr kind - Coordination mode: `generic`, `assist`, or `filter`.
+ * @attr selection - Filter semantics hint: `none`, `single`, or `multiple`.
+ * @attr expanded - Current auto-layout disclosure state. Host writes are silent.
+ * @attr default-expanded - Initial uncontrolled disclosure state.
+ * @attr label - Accessible label for assist-toolbar semantics.
+ * @attr show-all-label - Label for the collapsed overflow action.
+ * @attr show-less-label - Label for the expanded overflow action.
+ *
+ * @cssprop [--rc-chip-group-column-gap=0.5rem] - Inline gap between items.
+ * @cssprop [--rc-chip-group-row-gap=0] - Block gap between wrapped rows.
+ * @cssprop [--rc-chip-group-padding-block=0] - Group block-axis padding.
+ * @cssprop [--rc-chip-group-scroll-padding-inline=0] - Horizontal scroll padding.
+ * @cssprop [--rc-chip-group-scrollbar-width=none] - Standards-based scrollbar width.
+ * @cssprop [--rc-chip-group-toggle-gap=0.5rem] - Gap between the disclosure icon and label.
+ * @cssprop [--rc-chip-group-toggle-separator-gap=0.5rem] - Gap before the disclosure separator.
+ * @cssprop [--rc-chip-group-toggle-icon-size=1.125rem] - Disclosure icon size.
+ * @cssprop [--rc-chip-group-toggle-separator-block-size=1.5rem] - Separator block size.
+ * @cssprop [--rc-chip-group-toggle-separator-inline-size=1px] - Separator thickness.
+ * @cssprop [--rc-chip-group-toggle-separator-color=currentColor] - Separator color.
+ */
+export declare class RCChipGroup extends RCChipGroup_base {
+    static styles: import('lit').CSSResult;
+    private _expanded;
+    private _defaultExpanded;
+    private _uncontrolledExpanded;
+    private _expandedInitialized;
+    private _measureFrame;
+    private _targetVisibilityFrame;
+    private _pendingScrollLeft;
+    private _pendingScrollTarget;
+    private _overflowing;
+    protected _$root: HTMLDivElement;
+    private _$slot;
+    private _$toggle;
+    private _$toggleWrap;
+    private _resizeObserver;
+    private _mutationObserver;
+    private readonly _authoredVariants;
+    /** Layout strategy. */
+    layout: RCChipGroupLayout;
+    /** Maximum natural rows before auto layout collapses to horizontal scrolling. */
+    maxRows: number;
+    /** Child coordination mode. */
+    kind: RCChipGroupKind;
+    /** Native filter selection hint. */
+    selection: RCChipGroupSelection;
+    /** Accessible label used when `kind="assist"` exposes toolbar semantics. */
+    label: string;
+    /** Collapsed overflow action label. */
+    showAllLabel: string;
+    /** Expanded overflow action label. */
+    showLessLabel: string;
+    /** Current auto-layout disclosure state. Host writes are silent. */
+    get expanded(): boolean;
+    set expanded(value: boolean | undefined);
+    /** Initial uncontrolled disclosure state. */
+    get defaultExpanded(): boolean;
+    set defaultExpanded(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected _collectItems($slot: HTMLSlotElement): Element[];
+    protected _initItems(): void;
+    private _isAssistItem;
+    private readonly _handleKeyDown;
+    private _handleSlotChange;
+    private _assignedElements;
+    private _syncAssignedItems;
+    private _observeAssignedItems;
+    private _syncNativeSelection;
+    private _restoreAuthoredVariants;
+    private _validateFilterItems;
+    private readonly _handleChange;
+    private readonly _toggleExpanded;
+    private _scheduleMeasure;
+    private _measureRows;
+    private _keepTargetVisible;
+    private _scheduleTargetVisibility;
+    private get _resolvedLayout();
+    protected render(): import('lit').TemplateResult<1>;
+}
+export default RCChipGroup;

package/dist/types/packages/rc-chip-group/src/rc-chip-group.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const chipGroupStyles: import('lit').CSSResult;
+export default chipGroupStyles;

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@rcarls/rc-chip-group",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.5.0",
+  "description": "Adaptive wrapping and scrolling layout for native-backed chips and arbitrary elements.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-chip-group"
+  },
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-chip-group",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-chip-group.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-chip-group/src/index.d.ts",
+        "default": "./dist/rc-chip-group.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-chip-group/src/define.d.ts",
+        "default": "./dist/rc-chip-group-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-chip-group/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-chip-group-define.js"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "scripts": {
+    "build": "tsc && vite build && cem analyze",
+    "cem:analyze": "cem analyze",
+    "preview": "vite preview",
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
+  },
+  "dependencies": {
+    "@rcarls/rc-chip": "0.5.0",
+    "@rcarls/rc-common": "0.5.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "playwright": "^1.56.0",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}