@rcarls/rc-chip 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,112 @@
 # @rcarls/rc-chip
 
+## 0.7.0
+
+### Minor Changes
+
+- 079e025: Standardize component styling contracts for the breaking 0.7 release.
+
+  BREAKING CHANGE: Rename the Markdown editor's `--rme-*` properties to
+  `--rc-markdown-editor-*`, `--rc-app-bar-background` to `--rc-app-bar-bg`,
+  `--rc-textarea-radius` to `--rc-textarea-border-radius`, the transfer-list
+  `--rc-transfer-list-panel-*` properties to `--rc-transfer-list-listbox-*`,
+  `--rc-chip-group-webkit-scrollbar-display` to
+  `--rc-chip-group-scrollbar-display`, and `--rc-text` to `--rc-field-text`.
+  Compatibility aliases are intentionally not provided.
+
+  BREAKING CHANGE: Replace `--rc-select-chip-padding-inline` and
+  `--rc-combobox-chip-padding-inline` with explicit `*-padding-inline-start` and
+  `*-padding-inline-end` tokens. Generated removable chips now reserve the full
+  remove target and its edge offset, so their indicator cannot overlap label text.
+
+  Add canonical app-bar elevation, transfer-list listbox radius, and textarea
+  line-action tokens. Add logical `rc-chip` inline-padding properties so themes
+  can implement Material's icon-aware spacing without overriding authored child
+  styles. Make `rc-field` consume the shared semantic token layer,
+  and place the `rc-chip` and `rc-search-bar` light-DOM structural styles in the
+  `rc-base` cascade layer so normal consumer rules override them.
+
+  Prevent decorative, `aria-hidden` trailing list content from intercepting a
+  whole-row action target, and keep segmented-list item geometry from leaking
+  into nested standard lists.
+
+  Remove unused Material navigation-rail toggle tokens and obsolete list-item
+  theme tokens. Register the segmented-button private theme seam and enforce
+  token ownership, documentation, removed-name, selector-budget, and cascade
+  layer contracts through the component architecture audit.
+
+### Patch Changes
+
+- 3d050f1: Keep wrapped chip rows evenly spaced. Readonly chips in an `rc-chip-group`
+  keep the touch-target block size, so expanded rows share the disclosure
+  toggle's pitch. `rc-combobox` and `rc-select` return the chip touch-target
+  overlap tokens as row gap, so interior chip rows no longer collapse onto each
+  other inside a field. Material combobox and select input chips drop their
+  extra block padding to render at the 2rem chip height.
+- 5c006de: Ship component CSS minified. Package builds now run the CSS in Lit `css` styles
+  and light-DOM structural styles through Lightning CSS, removing comments and
+  whitespace while keeping source maps that resolve to each template. Rendered
+  styles are unchanged.
+
+  `@rcarls/rc-common` adds `cssText`, an identity tag that marks a plain CSS
+  string for minification. `rc-chip`, `rc-disclosure`, and `rc-accordion` now
+  depend on `@rcarls/rc-common` for it.
+
+- Updated dependencies [e3dfa59]
+- Updated dependencies [50d5610]
+- Updated dependencies [9ee769c]
+- Updated dependencies [1179f24]
+- Updated dependencies [595fe37]
+- Updated dependencies [38cd00c]
+- Updated dependencies [5c006de]
+- Updated dependencies [a6553ff]
+- Updated dependencies [2205478]
+- Updated dependencies [4341311]
+- Updated dependencies [899bb5e]
+- Updated dependencies [25fcfe0]
+- Updated dependencies [51f6403]
+- Updated dependencies [9caca6b]
+- Updated dependencies [b764a3c]
+- Updated dependencies [54d9ead]
+- Updated dependencies [b9175e9]
+- Updated dependencies [c8b762b]
+- Updated dependencies [55e1e7f]
+- Updated dependencies [f1ca82d]
+- Updated dependencies [b87f27b]
+- Updated dependencies [32ebead]
+- Updated dependencies [bfefedd]
+- Updated dependencies [c130173]
+- Updated dependencies [11680b6]
+- Updated dependencies [223d36c]
+- Updated dependencies [7b91a44]
+- Updated dependencies [aa04ead]
+- Updated dependencies [ac65b5b]
+- Updated dependencies [afcfef8]
+- Updated dependencies [11ef1ad]
+  - @rcarls/rc-common@0.7.0
+
+## 0.6.0
+
+### Minor Changes
+
+- ffcbf11: Add adaptive chip-group layouts, native-backed filter chips, and shared
+  input-chip rendering. Native-backed chips preserve controlled host state,
+  follow form resets when uncontrolled, and accept native link actions. Groups
+  restore author-owned chip variants when coordination ends. Keep search input
+  chrome inside the search surface and align contextual icon sizes with Material 3.
+- 0a462c5: Add `--rc-chip-touch-target-overlap-block-start` and `-block-end`, zero by
+  default. A theme or consumer sets one to let a chip's accessible
+  touch-target inflation on that side overlap into whatever sits just
+  outside the host, such as a height-constrained field's own block padding
+  (a multi-select value area in `rc-search-bar` or `rc-combobox`, say),
+  instead of also reserving layout space there. The block-axis counterpart
+  to `@rcarls/rc-button`'s, `@rcarls/rc-menu-button`'s, and
+  `@rcarls/rc-adaptive-menu`'s own inline-axis touch-target overlap tokens.
+
+### Patch Changes
+
+- 7adbd76: Keep development diagnostics concise and prevent expected test fixtures from emitting noisy warnings.
+
 ## 0.5.0
 
 ## 0.4.2

package/README.md

@@ -1,6 +1,6 @@
 # @rcarls/rc-chip
 
-Chip wrapper for native button-based actions, filters, and inputs.
+Chip wrapper for native actions, links, filters, and inputs.
 
 ```html
 <rc-chip variant="filter">
@@ -11,6 +11,20 @@ Chip wrapper for native button-based actions, filters, and inputs.
 The native button remains connected for keyboard behavior and progressive enhancement.
 Native tap highlighting is suppressed because the component's clipped state layer
 provides hover, focus, and pressed feedback within the chip shape.
+Structural styles for the native child are installed in the `rc-base` cascade
+layer, so normal author rules outside a layer remain the final styling authority.
+
+Themes may use `--rc-chip-padding-inline-start` and
+`--rc-chip-padding-inline-end` for icon-aware logical padding. Both fall back
+to `--rc-chip-padding-inline`, so existing symmetric padding remains compatible.
+
+Navigation chips preserve the same native-link behavior:
+
+```html
+<rc-chip>
+  <a href="/recipes">Recipes</a>
+</rc-chip>
+```
 
 Use `rc-toolbar` when a group of interactive chips should form one tab stop
 with arrow-key navigation. Import `@rcarls/rc-toolbar/define` separately when

package/dist/custom-elements.json

@@ -62,7 +62,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Chip wrapper that preserves a direct native `<button>` child for interactive\nchips and accepts a direct `[data-rc-chip-label]` child for read-only chips.",
+          "description": "Chip wrapper that preserves a direct native `<button>` child for action chips,\na direct `<a href>` for navigation chips, or a direct `<label>` containing a\nnative checkbox/radio for filter chips. Read-only chips accept a direct\n`[data-rc-chip-label]` child.",
           "name": "RCChip",
           "cssProperties": [
             {
@@ -74,6 +74,21 @@
               "description": "Minimum chip block size (defers to native button/anchor sizing when unset).",
               "name": "--rc-chip-block-size"
             },
+            {
+              "description": "Minimum interactive touch target size.",
+              "name": "--rc-chip-touch-target-block-size",
+              "default": "3rem"
+            },
+            {
+              "description": "Zero by default. A theme or consumer sets this on a chip that sits at a real block-axis leading edge (no neighbor on that side), such as inside a height-constrained field, to let its touch-target inflation overlap into whatever sits just outside the host instead of also reserving layout space there.",
+              "name": "--rc-chip-touch-target-overlap-block-start",
+              "default": "0px"
+            },
+            {
+              "description": "The block-axis trailing-edge counterpart to `--rc-chip-touch-target-overlap-block-start`.",
+              "name": "--rc-chip-touch-target-overlap-block-end",
+              "default": "0px"
+            },
             {
               "description": "Block-axis padding of the slotted button, anchor, or label (defers to native padding when unset).",
               "name": "--rc-chip-padding-block"
@@ -82,6 +97,16 @@
               "description": "Inline-axis padding of the slotted button, anchor, or label (defers to native padding when unset).",
               "name": "--rc-chip-padding-inline"
             },
+            {
+              "description": "Logical leading padding of the slotted button, anchor, or label.",
+              "name": "--rc-chip-padding-inline-start",
+              "default": "var(--rc-chip-padding-inline)"
+            },
+            {
+              "description": "Logical trailing padding of the slotted button, anchor, or label.",
+              "name": "--rc-chip-padding-inline-end",
+              "default": "var(--rc-chip-padding-inline)"
+            },
             {
               "description": "Border of the slotted button, anchor, or label (defers to native border when unset).",
               "name": "--rc-chip-border"
@@ -188,7 +213,7 @@
             {
               "description": "Override for removable chip content end padding.",
               "name": "--rc-chip-removable-padding-inline-end",
-              "default": "calc(var(--rc-chip-remove-target-size, 1.5rem) - var(--rc-chip-gap, 0px))"
+              "default": "calc(var(--rc-chip-remove-target-size, 1.5rem) + var(--rc-chip-remove-offset-inline, 0.125rem))"
             }
           ],
           "cssParts": [
@@ -203,7 +228,7 @@
           ],
           "slots": [
             {
-              "description": "A direct native `<button>` child, or `[data-rc-chip-label]` when `readonly`.",
+              "description": "A direct native `<button>` child, `<a href>`, native-backed filter `<label>`, or `[data-rc-chip-label]` when `readonly`.",
               "name": ""
             },
             {
@@ -212,6 +237,33 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "_styledRoots",
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "new WeakSet<Document | ShadowRoot>()"
+            },
+            {
+              "kind": "method",
+              "name": "_ensureBaseStyles",
+              "privacy": "private",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "Document | ShadowRoot"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "_selected",
@@ -229,6 +281,14 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_uncontrolledSelected",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_selectedInitialized",
@@ -249,7 +309,25 @@
             },
             {
               "kind": "field",
-              "name": "_buttonObserver",
+              "name": "_$input",
+              "type": {
+                "text": "HTMLInputElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_$form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_controlObserver",
               "type": {
                 "text": "MutationObserver | null"
               },
@@ -283,6 +361,15 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_lastChildWarning",
+              "type": {
+                "text": "string | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -364,7 +451,19 @@
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "deferInitialSelectionUpdate",
+                  "default": "false"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_handleNativeChange",
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "field",
@@ -392,6 +491,32 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "_syncCheckedState",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncCheckedFromNative",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_handleFormReset",
+              "privacy": "private",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "_syncPressedState",

package/dist/rc-chip-D2kF8iCM.js

@@ -0,0 +1,185 @@
+import { css as p, LitElement as u, html as h } from "lit";
+import { property as l } from "lit/decorators.js";
+import { cssText as b } from "@rcarls/rc-common";
+const v = p`:host{min-block-size:var(--rc-chip-touch-target-block-size,3rem);color-scheme:inherit;vertical-align:middle;place-items:center;margin-block-start:calc(-1 * var(--rc-chip-touch-target-overlap-block-start,0px));margin-block-end:calc(-1 * var(--rc-chip-touch-target-overlap-block-end,0px));display:inline-grid;position:relative}:host([readonly]){min-block-size:var(--_rc-chip-group-readonly-min-block-size,var(--rc-chip-block-size,auto))}:host([hidden]){display:none}::slotted(button),::slotted(a),::slotted(label),::slotted([data-rc-chip-label]){justify-content:center;align-items:center;gap:var(--rc-chip-gap,0px);min-block-size:var(--rc-chip-block-size);padding-block:var(--rc-chip-padding-block,revert);border:var(--rc-chip-border,revert);border-radius:var(--rc-chip-radius,revert);background:var(--rc-chip-bg,revert);color:var(--rc-chip-color,revert);font:var(--rc-chip-font,revert);text-decoration:var(--rc-chip-text-decoration,revert);white-space:nowrap;-webkit-tap-highlight-color:transparent;padding-inline-start:var(--rc-chip-padding-inline-start,var(--rc-chip-padding-inline,revert));padding-inline-end:var(--rc-chip-padding-inline-end,var(--rc-chip-padding-inline,revert));display:inline-flex}:host([selected]) ::slotted(button),:host([selected]) ::slotted(a),:host([selected]) ::slotted(label),:host([selected]) ::slotted([data-rc-chip-label]){border-color:var(--rc-chip-selected-border-color,revert);background:var(--rc-chip-selected-bg,revert);color:var(--rc-chip-selected-color,revert)}:host([disabled]) ::slotted(button){opacity:var(--rc-chip-disabled-opacity,revert)}:host(:focus-within) ::slotted(button),:host(:focus-within) ::slotted(a),:host(:focus-within) ::slotted(label){outline:var(--rc-chip-focus-ring,revert);outline-offset:var(--rc-chip-focus-ring-offset,revert)}[part=state-layer]{pointer-events:none;z-index:2;block-size:var(--rc-chip-block-size,100%);border-radius:var(--rc-chip-radius,0);background:var(--rc-chip-state-layer-color,currentColor);opacity:0;transition:opacity var(--rc-chip-state-layer-transition-duration,var(--rc-motion-effects-duration-fast,80ms)) var(--rc-chip-state-layer-transition-easing,var(--rc-motion-effects-easing-fast,ease-out));position:absolute;inset-block-start:50%;inset-inline:0;translate:0 -50%}:host([selected]) [part=state-layer]{background:var(--rc-chip-selected-state-layer-color,var(--rc-chip-state-layer-color,currentColor))}@media (hover:hover){:host(:not([disabled],[readonly]):hover) [part=state-layer]{opacity:var(--rc-chip-hover-state-layer-opacity,.08)}}:host(:not([disabled],[readonly]):focus-within) [part=state-layer]{opacity:var(--rc-chip-focus-state-layer-opacity,.12)}:host(:not([disabled],[readonly]):active) [part=state-layer]{opacity:var(--rc-chip-pressed-state-layer-opacity,.12)}[part=remove]{z-index:3;pointer-events:none;min-inline-size:var(--rc-chip-remove-target-size,1.5rem);min-block-size:var(--rc-chip-remove-target-size,1.5rem);border-radius:var(--rc-chip-remove-radius,9999px);color:inherit;font:inherit;background:0 0;border:0;place-items:center;display:none;position:absolute;inset-block-start:50%;inset-inline-end:var(--rc-chip-remove-offset-inline,.125rem);translate:0 -50%}:host([removable]) [part=remove]{display:inline-grid}::slotted([slot=remove-icon]){font-size:var(--rc-chip-remove-icon-size,smaller)!important}:host([removable]) ::slotted(button),:host([removable]) ::slotted(a),:host([removable]) ::slotted(label),:host([removable]) ::slotted([data-rc-chip-label]){padding-inline-end:var(--rc-chip-removable-padding-inline-end,calc(var(--rc-chip-remove-target-size,1.5rem) + var(--rc-chip-remove-offset-inline,.125rem)))}@media (forced-colors:active){[part=state-layer]{display:none}::slotted(button),::slotted(a),::slotted(label),::slotted([data-rc-chip-label]){color:buttontext;background:buttonface;border-color:buttonborder}:host([selected]) ::slotted(button),:host([selected]) ::slotted(a),:host([selected]) ::slotted(label),:host([selected]) ::slotted([data-rc-chip-label]){color:highlighttext;background:highlight;border-color:highlight}}`;
+var f = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, n = (d, e, t, r) => {
+  for (var i = r > 1 ? void 0 : r ? _(e, t) : e, a = d.length - 1, o; a >= 0; a--)
+    (o = d[a]) && (i = (r ? o(e, t, i) : o(i)) || i);
+  return r && i && f(e, t, i), i;
+};
+const y = /* @__PURE__ */ new Set(["checkbox", "menuitemcheckbox", "menuitemradio", "radio", "switch"]), m = b`@layer rc-base{rc-chip>:is(button,a,label,[data-rc-chip-label]){box-sizing:border-box;justify-content:center;align-items:center;gap:var(--rc-chip-gap,0px);min-block-size:var(--rc-chip-block-size,revert);padding-block:var(--rc-chip-padding-block,revert);border:var(--rc-chip-border,revert);border-radius:var(--rc-chip-radius,revert);background:var(--rc-chip-bg,revert);color:var(--rc-chip-color,revert);font:var(--rc-chip-font,revert);text-decoration:var(--rc-chip-text-decoration,revert);white-space:nowrap;-webkit-tap-highlight-color:transparent;margin:0;padding-inline-start:var(--rc-chip-padding-inline-start,var(--rc-chip-padding-inline,revert));padding-inline-end:var(--rc-chip-padding-inline-end,var(--rc-chip-padding-inline,revert));display:inline-flex;position:relative}rc-chip:not([readonly])>:is(button,a,label):before{content:"";z-index:1;inset-block:calc((var(--rc-chip-touch-target-block-size,3rem) - max(100%, var(--rc-chip-block-size,0px))) / -2);border-radius:inherit;position:absolute;inset-inline:0}rc-chip[selected]>:is(button,a,label,[data-rc-chip-label]),rc-chip>label:has(>input:is([type=checkbox],[type=radio]):checked){border-color:var(--rc-chip-selected-border-color,revert);background:var(--rc-chip-selected-bg,revert);color:var(--rc-chip-selected-color,revert)}rc-chip[disabled]>:is(button,label),rc-chip>label:has(>input:is([type=checkbox],[type=radio]):disabled){opacity:var(--rc-chip-disabled-opacity,revert)}rc-chip>:is(button,a):focus-visible,rc-chip>label:has(>input:is([type=checkbox],[type=radio]):focus-visible){outline:var(--rc-chip-focus-ring,revert);outline-offset:var(--rc-chip-focus-ring-offset,revert)}rc-chip>label>input:is([type=checkbox],[type=radio]){clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}rc-chip[removable]>:is(button,a,label,[data-rc-chip-label]){padding-inline-end:var(--rc-chip-removable-padding-inline-end,calc(var(--rc-chip-remove-target-size,1.5rem) + var(--rc-chip-remove-offset-inline,.125rem)))}@media (forced-colors:active){rc-chip>:is(button,a,label,[data-rc-chip-label]){color:buttontext;background:buttonface;border-color:buttonborder}rc-chip[selected]>:is(button,a,label,[data-rc-chip-label]),rc-chip>label:has(>input:is([type=checkbox],[type=radio]):checked){color:highlighttext;background:highlight;border-color:highlight}}}`;
+var s;
+const c = (s = class extends u {
+  constructor() {
+    super(...arguments), this._defaultSelected = !1, this._selectedInitialized = !1, this._$button = null, this._$input = null, this._$form = null, this._controlObserver = null, this._disabledOwned = !1, this._pressedOwned = !1, this._slotMicrotaskQueued = !1, this._lastChildWarning = null, this.variant = "assist", this.disabled = !1, this.readonly = !1, this.removable = !1, this._handleNativeChange = () => {
+      const e = this._$input;
+      if (!e || this.disabled || this.readonly)
+        return;
+      const t = this.selected, r = e.checked;
+      this._selected === void 0 ? (this._uncontrolledSelected = r, this._selectedInitialized = !0, this.requestUpdate("selected", t)) : this._syncCheckedState(), this.dispatchEvent(
+        new CustomEvent("rc-chip-change", {
+          bubbles: !0,
+          composed: !0,
+          detail: { selected: r }
+        })
+      );
+    }, this._handleButtonClick = () => {
+      if (this.disabled || this.readonly)
+        return;
+      if (this.removable) {
+        this._dispatchRemove();
+        return;
+      }
+      if (this.variant !== "filter")
+        return;
+      const e = this._$button?.getAttribute("aria-haspopup");
+      if (e && e !== "false")
+        return;
+      const t = this.selected, r = !t;
+      this._selected === void 0 && (this._uncontrolledSelected = r, this._selectedInitialized = !0, this._syncPressedState(), this.requestUpdate("selected", t)), this.dispatchEvent(
+        new CustomEvent("rc-chip-change", {
+          bubbles: !0,
+          composed: !0,
+          detail: { selected: r }
+        })
+      );
+    }, this._handleFormReset = () => {
+      queueMicrotask(() => this._syncCheckedFromNative());
+    };
+  }
+  static _ensureBaseStyles(e) {
+    if (s._styledRoots.has(e))
+      return;
+    s._styledRoots.add(e);
+    const t = (e instanceof Document ? e : e.ownerDocument).createElement("style");
+    t.setAttribute("data-rc-light-dom-base", "rc-chip"), t.textContent = m, e instanceof Document ? e.head.append(t) : e.append(t);
+  }
+  get selected() {
+    return this._selected ?? this._uncontrolledSelected ?? this._defaultSelected;
+  }
+  set selected(e) {
+    const t = this.selected;
+    this._selected = e, this._selectedInitialized = !0, this._syncCheckedState(), this._syncPressedState(), this.requestUpdate("selected", t);
+  }
+  get defaultSelected() {
+    return this._defaultSelected;
+  }
+  set defaultSelected(e) {
+    const t = this._defaultSelected;
+    this._defaultSelected = e, !this._selectedInitialized && this._selected === void 0 && this._uncontrolledSelected === void 0 && (this._syncPressedState(), this.requestUpdate("selected", t)), this.requestUpdate("defaultSelected", t);
+  }
+  connectedCallback() {
+    super.connectedCallback(), s._ensureBaseStyles(this.getRootNode());
+  }
+  disconnectedCallback() {
+    this._$button?.removeEventListener("click", this._handleButtonClick), this._$input?.removeEventListener("change", this._handleNativeChange), this._$form?.removeEventListener("reset", this._handleFormReset), this._controlObserver?.disconnect(), this._controlObserver = null, super.disconnectedCallback();
+  }
+  /** Synchronizes uncontrolled filter state from the direct native input. @internal */
+  syncNativeSelection() {
+    this._syncCheckedFromNative();
+  }
+  firstUpdated() {
+    this._syncSlottedButton(!0);
+  }
+  updated(e) {
+    (e.has("disabled") || e.has("readonly")) && this._syncDisabled(), (e.has("variant") || e.has("selected") || e.has("readonly") || e.has("removable")) && this._syncPressedState(), e.has("selected") && this._syncCheckedState();
+  }
+  render() {
+    return h`
+      <slot @slotchange=${this._handleSlotChange}></slot>
+      <span part="state-layer" aria-hidden="true"></span>
+      ${this.removable ? h`
+            <span part="remove" aria-hidden="true">
+              <slot name="remove-icon">×</slot>
+            </span>
+          ` : ""}
+    `;
+  }
+  _handleSlotChange() {
+    this._slotMicrotaskQueued || (this._slotMicrotaskQueued = !0, queueMicrotask(() => {
+      this._slotMicrotaskQueued = !1, this.isConnected && this._syncSlottedButton();
+    }));
+  }
+  _syncSlottedButton(e = !1) {
+    const t = this.querySelector(":scope > button");
+    this.querySelector(":scope > a[href]");
+    const i = this.querySelector(":scope > label")?.querySelector(
+      ':scope > input:is([type="checkbox"], [type="radio"])'
+    ) ?? null;
+    if (t === this._$button && i === this._$input) {
+      this._syncDisabled(), this._syncCheckedState(), this._syncPressedState();
+      return;
+    }
+    if (this._$button?.removeEventListener("click", this._handleButtonClick), this._$input?.removeEventListener("change", this._handleNativeChange), this._$form?.removeEventListener("reset", this._handleFormReset), this._controlObserver?.disconnect(), this._controlObserver = null, this._$button = t, this._$input = i, this._$form = i?.form ?? null, this._disabledOwned = !1, this._pressedOwned = !1, t && t.addEventListener("click", this._handleButtonClick), i) {
+      if (this._selected === void 0 && this._uncontrolledSelected === void 0) {
+        const o = this.selected;
+        this._uncontrolledSelected = i.checked, this._selectedInitialized = !0, e ? queueMicrotask(() => this.requestUpdate("selected", o)) : this.requestUpdate("selected", o);
+      } else
+        this._syncCheckedState();
+      i.addEventListener("change", this._handleNativeChange), this._$form?.addEventListener("reset", this._handleFormReset);
+    }
+    const a = i ?? t;
+    a && (this._controlObserver = new MutationObserver(() => {
+      this._syncDisabled(), this._syncCheckedFromNative(), this._syncPressedState();
+    }), this._controlObserver.observe(a, {
+      attributeFilter: ["aria-pressed", "role", "disabled", "checked"]
+    })), this._syncDisabled(), this._syncCheckedState(), this._syncPressedState();
+  }
+  _dispatchRemove() {
+    this.dispatchEvent(
+      new CustomEvent("rc-chip-remove", {
+        bubbles: !0,
+        composed: !0,
+        detail: { chip: this }
+      })
+    );
+  }
+  _syncDisabled() {
+    const e = this._$input ?? this._$button;
+    e && (this.disabled || this.readonly ? (e.disabled || (this._disabledOwned = !0), e.disabled = !0) : this._disabledOwned && (e.disabled = !1, this._disabledOwned = !1));
+  }
+  _syncCheckedState() {
+    const e = this._$input;
+    e && e.checked !== this.selected && (e.checked = this.selected);
+  }
+  _syncCheckedFromNative() {
+    const e = this._$input;
+    if (!e || e.checked === this.selected)
+      return;
+    const t = this.selected;
+    this._selected === void 0 ? (this._uncontrolledSelected = e.checked, this._selectedInitialized = !0, this.requestUpdate("selected", t)) : this._syncCheckedState();
+  }
+  _syncPressedState() {
+    const e = this._$button;
+    if (!e)
+      return;
+    const t = e.getAttribute("role"), r = e.hasAttribute("aria-pressed") && !this._pressedOwned || (t ? y.has(t) : !1);
+    if (!this.readonly && !this.removable && this.variant === "filter" && !r) {
+      const i = this.selected ? "true" : "false";
+      e.getAttribute("aria-pressed") !== i && e.setAttribute("aria-pressed", i), this._pressedOwned = !0;
+    } else this._pressedOwned && (e.removeAttribute("aria-pressed"), this._pressedOwned = !1);
+  }
+}, s.styles = v, s._styledRoots = /* @__PURE__ */ new WeakSet(), s);
+n([
+  l({ type: String, reflect: !0 })
+], c.prototype, "variant", 2);
+n([
+  l({ type: Boolean, reflect: !0 })
+], c.prototype, "selected", 1);
+n([
+  l({ type: Boolean, attribute: "default-selected" })
+], c.prototype, "defaultSelected", 1);
+n([
+  l({ type: Boolean, reflect: !0 })
+], c.prototype, "disabled", 2);
+n([
+  l({ type: Boolean, reflect: !0 })
+], c.prototype, "readonly", 2);
+n([
+  l({ type: Boolean, reflect: !0 })
+], c.prototype, "removable", 2);
+let x = c;
+export {
+  x as R
+};
+//# sourceMappingURL=rc-chip-D2kF8iCM.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-chip-D2kF8iCM.js","sources":["../src/rc-chip.styles.ts","../src/rc-chip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const chipStyles = css`\n  :host {\n    display: inline-grid;\n    position: relative;\n    place-items: center;\n    min-block-size: var(--rc-chip-touch-target-block-size, 3rem);\n    color-scheme: inherit;\n    vertical-align: middle;\n    /*\n     * Zero by default. Unlike rc-button's touch-target inflation (opt-in via\n     * icon-only), a chip's accessible touch-target minimum applies\n     * unconditionally, so it's a common fit inside a height-constrained\n     * field -- rc-search-bar's or rc-combobox's multi-select value area, say\n     * -- where 3rem per chip would force the field taller than its own\n     * content needs. A theme or consumer sets one of these on a chip that\n     * sits at a real block-axis edge (no neighbor on that side within the\n     * field) to let the touch target overlap into the field's own block\n     * padding instead of also reserving layout space there. The same\n     * pattern as rc-button's, rc-menu-button's, and rc-adaptive-menu's own\n     * touch-target overlap tokens, but on the block axis: a chip's own\n     * touch-target inflation is vertical, not horizontal.\n     */\n    margin-block-start: calc(-1 * var(--rc-chip-touch-target-overlap-block-start, 0px));\n    margin-block-end: calc(-1 * var(--rc-chip-touch-target-overlap-block-end, 0px));\n  }\n\n  :host([readonly]) {\n    min-block-size: var(--_rc-chip-group-readonly-min-block-size, var(--rc-chip-block-size, auto));\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted(label),\n  ::slotted([data-rc-chip-label]) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--rc-chip-gap, 0px);\n    min-block-size: var(--rc-chip-block-size);\n    padding-block: var(--rc-chip-padding-block, revert);\n    padding-inline-start: var(\n      --rc-chip-padding-inline-start,\n      var(--rc-chip-padding-inline, revert)\n    );\n    padding-inline-end: var(--rc-chip-padding-inline-end, var(--rc-chip-padding-inline, revert));\n    border: var(--rc-chip-border, revert);\n    border-radius: var(--rc-chip-radius, revert);\n    background: var(--rc-chip-bg, revert);\n    color: var(--rc-chip-color, revert);\n    font: var(--rc-chip-font, revert);\n    text-decoration: var(--rc-chip-text-decoration, revert);\n    white-space: nowrap;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([selected]) ::slotted(button),\n  :host([selected]) ::slotted(a),\n  :host([selected]) ::slotted(label),\n  :host([selected]) ::slotted([data-rc-chip-label]) {\n    border-color: var(--rc-chip-selected-border-color, revert);\n    background: var(--rc-chip-selected-bg, revert);\n    color: var(--rc-chip-selected-color, revert);\n  }\n\n  :host([disabled]) ::slotted(button) {\n    opacity: var(--rc-chip-disabled-opacity, revert);\n  }\n\n  :host(:focus-within) ::slotted(button),\n  :host(:focus-within) ::slotted(a),\n  :host(:focus-within) ::slotted(label) {\n    outline: var(--rc-chip-focus-ring, revert);\n    outline-offset: var(--rc-chip-focus-ring-offset, revert);\n  }\n\n  [part='state-layer'] {\n    pointer-events: none;\n    position: absolute;\n    z-index: 2;\n    inset-inline: 0;\n    inset-block-start: 50%;\n    block-size: var(--rc-chip-block-size, 100%);\n    translate: 0 -50%;\n    border-radius: var(--rc-chip-radius, 0);\n    background: var(--rc-chip-state-layer-color, currentColor);\n    opacity: 0;\n    transition: opacity\n      var(--rc-chip-state-layer-transition-duration, var(--rc-motion-effects-duration-fast, 80ms))\n      var(--rc-chip-state-layer-transition-easing, var(--rc-motion-effects-easing-fast, ease-out));\n  }\n\n  :host([selected]) [part='state-layer'] {\n    background: var(\n      --rc-chip-selected-state-layer-color,\n      var(--rc-chip-state-layer-color, currentColor)\n    );\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled], [readonly]):hover) [part='state-layer'] {\n      opacity: var(--rc-chip-hover-state-layer-opacity, 0.08);\n    }\n  }\n\n  :host(:not([disabled], [readonly]):focus-within) [part='state-layer'] {\n    opacity: var(--rc-chip-focus-state-layer-opacity, 0.12);\n  }\n\n  :host(:not([disabled], [readonly]):active) [part='state-layer'] {\n    opacity: var(--rc-chip-pressed-state-layer-opacity, 0.12);\n  }\n\n  [part='remove'] {\n    position: absolute;\n    z-index: 3;\n    pointer-events: none;\n    inset-block-start: 50%;\n    inset-inline-end: var(--rc-chip-remove-offset-inline, 0.125rem);\n    display: none;\n    place-items: center;\n    min-inline-size: var(--rc-chip-remove-target-size, 1.5rem);\n    min-block-size: var(--rc-chip-remove-target-size, 1.5rem);\n    translate: 0 -50%;\n    border: 0;\n    border-radius: var(--rc-chip-remove-radius, 9999px);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n  }\n\n  :host([removable]) [part='remove'] {\n    display: inline-grid;\n  }\n\n  ::slotted([slot='remove-icon']) {\n    /* Keep icon-font utility classes from overriding the chip's compact icon size. */\n    font-size: var(--rc-chip-remove-icon-size, smaller) !important;\n  }\n\n  :host([removable]) ::slotted(button),\n  :host([removable]) ::slotted(a),\n  :host([removable]) ::slotted(label),\n  :host([removable]) ::slotted([data-rc-chip-label]) {\n    padding-inline-end: var(\n      --rc-chip-removable-padding-inline-end,\n      calc(\n        var(--rc-chip-remove-target-size, 1.5rem) + var(--rc-chip-remove-offset-inline, 0.125rem)\n      )\n    );\n  }\n\n  @media (forced-colors: active) {\n    [part='state-layer'] {\n      display: none;\n    }\n\n    ::slotted(button),\n    ::slotted(a),\n    ::slotted(label),\n    ::slotted([data-rc-chip-label]) {\n      border-color: ButtonBorder;\n      background: ButtonFace;\n      color: ButtonText;\n    }\n\n    :host([selected]) ::slotted(button),\n    :host([selected]) ::slotted(a),\n    :host([selected]) ::slotted(label),\n    :host([selected]) ::slotted([data-rc-chip-label]) {\n      border-color: Highlight;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n`;\n\nexport default chipStyles;\n","import { LitElement, html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { cssText } from '@rcarls/rc-common';\n\nimport chipStyles from './rc-chip.styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-chip': RCChip;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-chip-change': CustomEvent<RCChipChangeDetail>;\n    'rc-chip-remove': CustomEvent<RCChipRemoveDetail>;\n  }\n}\n\nconst TOGGLE_ROLES = new Set(['checkbox', 'menuitemcheckbox', 'menuitemradio', 'radio', 'switch']);\n\nconst LIGHT_DOM_CSS = cssText`\n@layer rc-base {\n  rc-chip > :is(button, a, label, [data-rc-chip-label]) {\n    position: relative;\n    display: inline-flex;\n    box-sizing: border-box;\n    align-items: center;\n    justify-content: center;\n    gap: var(--rc-chip-gap, 0px);\n    min-block-size: var(--rc-chip-block-size, revert);\n    margin: 0;\n    padding-block: var(--rc-chip-padding-block, revert);\n    padding-inline-start: var(\n      --rc-chip-padding-inline-start,\n      var(--rc-chip-padding-inline, revert)\n    );\n    padding-inline-end: var(--rc-chip-padding-inline-end, var(--rc-chip-padding-inline, revert));\n    border: var(--rc-chip-border, revert);\n    border-radius: var(--rc-chip-radius, revert);\n    background: var(--rc-chip-bg, revert);\n    color: var(--rc-chip-color, revert);\n    font: var(--rc-chip-font, revert);\n    text-decoration: var(--rc-chip-text-decoration, revert);\n    white-space: nowrap;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  rc-chip:not([readonly]) > :is(button, a, label)::before {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    inset-block: calc(\n      (var(--rc-chip-touch-target-block-size, 3rem) - max(100%, var(--rc-chip-block-size, 0px))) /\n        -2\n    );\n    inset-inline: 0;\n    border-radius: inherit;\n  }\n\n  rc-chip[selected] > :is(button, a, label, [data-rc-chip-label]),\n  rc-chip > label:has(> input:is([type='checkbox'], [type='radio']):checked) {\n    border-color: var(--rc-chip-selected-border-color, revert);\n    background: var(--rc-chip-selected-bg, revert);\n    color: var(--rc-chip-selected-color, revert);\n  }\n\n  rc-chip[disabled] > :is(button, label),\n  rc-chip > label:has(> input:is([type='checkbox'], [type='radio']):disabled) {\n    opacity: var(--rc-chip-disabled-opacity, revert);\n  }\n\n  rc-chip > :is(button, a):focus-visible,\n  rc-chip > label:has(> input:is([type='checkbox'], [type='radio']):focus-visible) {\n    outline: var(--rc-chip-focus-ring, revert);\n    outline-offset: var(--rc-chip-focus-ring-offset, revert);\n  }\n\n  rc-chip > label > input:is([type='checkbox'], [type='radio']) {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    margin: -1px;\n    padding: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n\n  rc-chip[removable] > :is(button, a, label, [data-rc-chip-label]) {\n    padding-inline-end: var(\n      --rc-chip-removable-padding-inline-end,\n      calc(\n        var(--rc-chip-remove-target-size, 1.5rem) +\n          var(--rc-chip-remove-offset-inline, 0.125rem)\n      )\n    );\n  }\n\n  @media (forced-colors: active) {\n    rc-chip > :is(button, a, label, [data-rc-chip-label]) {\n      border-color: ButtonBorder;\n      background: ButtonFace;\n      color: ButtonText;\n    }\n\n    rc-chip[selected] > :is(button, a, label, [data-rc-chip-label]),\n    rc-chip > label:has(> input:is([type='checkbox'], [type='radio']):checked) {\n      border-color: Highlight;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n`;\n\n/** Supported chip variants. */\nexport type RCChipVariant = 'assist' | 'filter' | 'input' | 'suggestion';\n\n/** Detail payload for `rc-chip-change`. */\nexport interface RCChipChangeDetail {\n  /** Selected state after user interaction. */\n  selected: boolean;\n}\n\n/** Detail payload for `rc-chip-remove`. */\nexport interface RCChipRemoveDetail {\n  /** The host chip requesting removal. */\n  chip: RCChip;\n}\n\n/**\n * Chip wrapper that preserves a direct native `<button>` child for action chips,\n * a direct `<a href>` for navigation chips, or a direct `<label>` containing a\n * native checkbox/radio for filter chips. Read-only chips accept a direct\n * `[data-rc-chip-label]` child.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-chip rc-chip docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ WAI-ARIA button pattern}\n *\n * @slot - A direct native `<button>` child, `<a href>`, native-backed filter\n *   `<label>`, or `[data-rc-chip-label]` when `readonly`.\n * @slot remove-icon - Optional presentational remove icon.\n *\n * @fires rc-chip-change - Fired when a user toggles a filter chip.\n * @fires rc-chip-remove - Fired when a user activates a removable chip's native button.\n *\n * @csspart state-layer - Overlay layer for hover, focus, pressed, ripple, or design-system effects.\n * @csspart remove - Presentational trailing remove indicator.\n *\n * @cssprop [--rc-chip-gap=0px] - Gap between the slotted button/anchor/label's content.\n * @cssprop [--rc-chip-block-size] - Minimum chip block size (defers to native button/anchor\n *   sizing when unset).\n * @cssprop [--rc-chip-touch-target-block-size=3rem] - Minimum interactive touch target size.\n * @cssprop [--rc-chip-touch-target-overlap-block-start=0px] - Zero by default. A theme or\n *   consumer sets this on a chip that sits at a real block-axis leading edge (no neighbor on\n *   that side), such as inside a height-constrained field, to let its touch-target inflation\n *   overlap into whatever sits just outside the host instead of also reserving layout space\n *   there.\n * @cssprop [--rc-chip-touch-target-overlap-block-end=0px] - The block-axis trailing-edge\n *   counterpart to `--rc-chip-touch-target-overlap-block-start`.\n * @cssprop [--rc-chip-padding-block] - Block-axis padding of the slotted button, anchor, or\n *   label (defers to native padding when unset).\n * @cssprop [--rc-chip-padding-inline] - Inline-axis padding of the slotted button, anchor, or\n *   label (defers to native padding when unset).\n * @cssprop [--rc-chip-padding-inline-start=var(--rc-chip-padding-inline)] - Logical leading\n *   padding of the slotted button, anchor, or label.\n * @cssprop [--rc-chip-padding-inline-end=var(--rc-chip-padding-inline)] - Logical trailing\n *   padding of the slotted button, anchor, or label.\n * @cssprop [--rc-chip-border] - Border of the slotted button, anchor, or label (defers to\n *   native border when unset).\n * @cssprop [--rc-chip-radius] - Border radius of the slotted button/anchor/label and the\n *   state-layer overlay (defers to native border-radius when unset; the state-layer overlay\n *   falls back to 0).\n * @cssprop [--rc-chip-bg] - Background of the slotted button, anchor, or label (defers to\n *   native background when unset).\n * @cssprop [--rc-chip-color] - Text color of the slotted button, anchor, or label (defers to\n *   native color when unset).\n * @cssprop [--rc-chip-font] - Font shorthand for the slotted button, anchor, or label (defers\n *   to native font when unset).\n * @cssprop [--rc-chip-text-decoration] - Text decoration for the slotted anchor (defers to\n *   native text-decoration when unset).\n * @cssprop [--rc-chip-selected-border-color] - Border color when `selected` (defers to native\n *   styling when unset).\n * @cssprop [--rc-chip-selected-bg] - Background when `selected` (defers to native styling when\n *   unset).\n * @cssprop [--rc-chip-selected-color] - Text color when `selected` (defers to native styling\n *   when unset).\n * @cssprop [--rc-chip-disabled-opacity] - Opacity of the slotted button when `disabled` (defers\n *   to native disabled styling when unset).\n * @cssprop [--rc-chip-focus-ring] - Outline shown while focus-within (defers to native focus\n *   styling when unset).\n * @cssprop [--rc-chip-focus-ring-offset] - Outline offset while focus-within (defers to native\n *   focus styling when unset).\n * @cssprop [--rc-chip-state-layer-color=currentColor] - Hover/focus/pressed state-layer color.\n * @cssprop [--rc-chip-selected-state-layer-color=var(--rc-chip-state-layer-color, currentColor)] - Selected chip state-layer color.\n * @cssprop [--rc-chip-hover-state-layer-opacity=0.08] - Hover state-layer opacity.\n * @cssprop [--rc-chip-focus-state-layer-opacity=0.12] - Focus state-layer opacity.\n * @cssprop [--rc-chip-pressed-state-layer-opacity=0.12] - Pressed state-layer opacity.\n * @cssprop [--rc-chip-state-layer-transition-duration=var(--rc-motion-effects-duration-fast,80ms)] - State-layer effects duration.\n * @cssprop [--rc-chip-state-layer-transition-easing=var(--rc-motion-effects-easing-fast,ease-out)] - State-layer effects easing.\n * @cssprop [--rc-chip-remove-offset-inline=0.125rem] - Inline offset of the remove indicator\n *   from the chip edge.\n * @cssprop [--rc-chip-remove-target-size=1.5rem] - Minimum inline and block size of the remove\n *   indicator's hit target.\n * @cssprop [--rc-chip-remove-radius=9999px] - Border radius of the remove indicator.\n * @cssprop [--rc-chip-remove-icon-size=smaller] - Font size for a slotted remove icon.\n * @cssprop [--rc-chip-removable-padding-inline-end=calc(var(--rc-chip-remove-target-size, 1.5rem) + var(--rc-chip-remove-offset-inline, 0.125rem))] - Override for removable chip content end padding.\n *\n * @attr variant - Chip variant: `assist`, `filter`, `input`, or `suggestion`.\n * @attr selected - Declarative selected state for filter/input chips.\n * @attr default-selected - Initial selected state for uncontrolled usage.\n * @attr disabled - Mirrors disabled state to the native child button.\n * @attr readonly - Marks the chip as non-interactive display content.\n * @attr removable - Shows a trailing remove affordance.\n */\nexport class RCChip extends LitElement {\n  static override styles = chipStyles;\n\n  private static readonly _styledRoots = new WeakSet<Document | ShadowRoot>();\n\n  private static _ensureBaseStyles(root: Document | ShadowRoot): void {\n    if (RCChip._styledRoots.has(root)) {\n      return;\n    }\n\n    RCChip._styledRoots.add(root);\n\n    const $style = (root instanceof Document ? root : root.ownerDocument).createElement('style');\n\n    $style.setAttribute('data-rc-light-dom-base', 'rc-chip');\n    $style.textContent = LIGHT_DOM_CSS;\n\n    if (root instanceof Document) {\n      root.head.append($style);\n    } else {\n      root.append($style);\n    }\n  }\n\n  private _selected: boolean | undefined;\n  private _defaultSelected = false;\n  private _uncontrolledSelected: boolean | undefined;\n  private _selectedInitialized = false;\n  private _$button: HTMLButtonElement | null = null;\n  private _$input: HTMLInputElement | null = null;\n  private _$form: HTMLFormElement | null = null;\n  private _controlObserver: MutationObserver | null = null;\n  private _disabledOwned = false;\n  private _pressedOwned = false;\n  private _slotMicrotaskQueued = false;\n  private _lastChildWarning: string | null = null;\n\n  /** Chip variant. */\n  @property({ type: String, reflect: true })\n  variant: RCChipVariant = 'assist';\n\n  /** Current selected state. Host writes are silent. */\n  @property({ type: Boolean, reflect: true })\n  get selected(): boolean {\n    return this._selected ?? this._uncontrolledSelected ?? this._defaultSelected;\n  }\n\n  set selected(value: boolean | undefined) {\n    const oldValue = this.selected;\n\n    this._selected = value;\n    this._selectedInitialized = true;\n    this._syncCheckedState();\n    this._syncPressedState();\n    this.requestUpdate('selected', oldValue);\n  }\n\n  /** Initial selected state for uncontrolled usage. */\n  @property({ type: Boolean, attribute: 'default-selected' })\n  get defaultSelected(): boolean {\n    return this._defaultSelected;\n  }\n\n  set defaultSelected(value: boolean) {\n    const oldValue = this._defaultSelected;\n\n    this._defaultSelected = value;\n\n    if (\n      !this._selectedInitialized &&\n      this._selected === undefined &&\n      this._uncontrolledSelected === undefined\n    ) {\n      this._syncPressedState();\n      this.requestUpdate('selected', oldValue);\n    }\n\n    this.requestUpdate('defaultSelected', oldValue);\n  }\n\n  /** Mirror disabled state to the native child button. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Mark this chip as non-interactive display content. */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /** Show a trailing remove affordance. */\n  @property({ type: Boolean, reflect: true })\n  removable = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    RCChip._ensureBaseStyles(this.getRootNode() as Document | ShadowRoot);\n  }\n\n  override disconnectedCallback(): void {\n    this._$button?.removeEventListener('click', this._handleButtonClick);\n    this._$input?.removeEventListener('change', this._handleNativeChange);\n    this._$form?.removeEventListener('reset', this._handleFormReset);\n    this._controlObserver?.disconnect();\n    this._controlObserver = null;\n    super.disconnectedCallback();\n  }\n\n  /** Synchronizes uncontrolled filter state from the direct native input. @internal */\n  syncNativeSelection(): void {\n    this._syncCheckedFromNative();\n  }\n\n  protected override firstUpdated(): void {\n    this._syncSlottedButton(true);\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('disabled') || changed.has('readonly')) {\n      this._syncDisabled();\n    }\n\n    if (\n      changed.has('variant') ||\n      changed.has('selected') ||\n      changed.has('readonly') ||\n      changed.has('removable')\n    ) {\n      this._syncPressedState();\n    }\n\n    if (changed.has('selected')) {\n      this._syncCheckedState();\n    }\n  }\n\n  protected override render() {\n    return html`\n      <slot @slotchange=${this._handleSlotChange}></slot>\n      <span part=\"state-layer\" aria-hidden=\"true\"></span>\n      ${this.removable\n        ? html`\n            <span part=\"remove\" aria-hidden=\"true\">\n              <slot name=\"remove-icon\">×</slot>\n            </span>\n          `\n        : ''}\n    `;\n  }\n\n  private _handleSlotChange(): void {\n    if (this._slotMicrotaskQueued) {\n      return;\n    }\n\n    this._slotMicrotaskQueued = true;\n\n    queueMicrotask(() => {\n      this._slotMicrotaskQueued = false;\n\n      if (this.isConnected) {\n        this._syncSlottedButton();\n      }\n    });\n  }\n\n  private _syncSlottedButton(deferInitialSelectionUpdate = false): void {\n    const $nextButton = this.querySelector<HTMLButtonElement>(':scope > button');\n    const $anchor = this.querySelector<HTMLAnchorElement>(':scope > a[href]');\n    const $label = this.querySelector<HTMLLabelElement>(':scope > label');\n    const $nextInput =\n      $label?.querySelector<HTMLInputElement>(\n        ':scope > input:is([type=\"checkbox\"], [type=\"radio\"])',\n      ) ?? null;\n\n    if (import.meta.env.DEV) {\n      let childWarning: string | null = null;\n\n      if (!$nextButton && !$anchor && !$label && !this.readonly) {\n        childWarning =\n          '[rc-chip] No supported direct child found. Place a native <button>, <a href>, or a <label> containing a direct checkbox/radio inside <rc-chip>, or use readonly with a [data-rc-chip-label] child.';\n      } else if ($label && !$nextInput && !this.readonly) {\n        childWarning =\n          '[rc-chip] A direct child <label> must contain a direct <input type=\"checkbox\"> or <input type=\"radio\">.';\n      }\n\n      if (childWarning && childWarning !== this._lastChildWarning) {\n        console.warn(childWarning);\n      }\n\n      this._lastChildWarning = childWarning;\n    }\n\n    if ($nextButton === this._$button && $nextInput === this._$input) {\n      this._syncDisabled();\n      this._syncCheckedState();\n      this._syncPressedState();\n\n      return;\n    }\n\n    this._$button?.removeEventListener('click', this._handleButtonClick);\n    this._$input?.removeEventListener('change', this._handleNativeChange);\n    this._$form?.removeEventListener('reset', this._handleFormReset);\n    this._controlObserver?.disconnect();\n    this._controlObserver = null;\n    this._$button = $nextButton;\n    this._$input = $nextInput;\n    this._$form = $nextInput?.form ?? null;\n    this._disabledOwned = false;\n    this._pressedOwned = false;\n\n    if ($nextButton) {\n      $nextButton.addEventListener('click', this._handleButtonClick);\n    }\n\n    if ($nextInput) {\n      if (this._selected === undefined && this._uncontrolledSelected === undefined) {\n        const oldValue = this.selected;\n\n        this._uncontrolledSelected = $nextInput.checked;\n        this._selectedInitialized = true;\n\n        if (deferInitialSelectionUpdate) {\n          queueMicrotask(() => this.requestUpdate('selected', oldValue));\n        } else {\n          this.requestUpdate('selected', oldValue);\n        }\n      } else {\n        this._syncCheckedState();\n      }\n\n      $nextInput.addEventListener('change', this._handleNativeChange);\n      this._$form?.addEventListener('reset', this._handleFormReset);\n    }\n\n    const $observedControl = $nextInput ?? $nextButton;\n\n    if ($observedControl) {\n      this._controlObserver = new MutationObserver(() => {\n        this._syncDisabled();\n        this._syncCheckedFromNative();\n        this._syncPressedState();\n      });\n\n      this._controlObserver.observe($observedControl, {\n        attributeFilter: ['aria-pressed', 'role', 'disabled', 'checked'],\n      });\n    }\n\n    this._syncDisabled();\n    this._syncCheckedState();\n    this._syncPressedState();\n  }\n\n  private readonly _handleNativeChange = (): void => {\n    const $input = this._$input;\n\n    if (!$input || this.disabled || this.readonly) {\n      return;\n    }\n\n    const oldValue = this.selected;\n    const requestedSelected = $input.checked;\n\n    if (this._selected === undefined) {\n      this._uncontrolledSelected = requestedSelected;\n      this._selectedInitialized = true;\n      this.requestUpdate('selected', oldValue);\n    } else {\n      this._syncCheckedState();\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<RCChipChangeDetail>('rc-chip-change', {\n        bubbles: true,\n        composed: true,\n        detail: { selected: requestedSelected },\n      }),\n    );\n  };\n\n  private readonly _handleButtonClick = (): void => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (this.removable) {\n      this._dispatchRemove();\n\n      return;\n    }\n\n    if (this.variant !== 'filter') {\n      return;\n    }\n\n    // Menu-backed filter chips expose filter affordance, but their menu owns\n    // the eventual selected state. Preserve that author-controlled behavior.\n    const hasPopup = this._$button?.getAttribute('aria-haspopup');\n\n    if (hasPopup && hasPopup !== 'false') {\n      return;\n    }\n\n    const oldValue = this.selected;\n    const requestedSelected = !oldValue;\n\n    if (this._selected === undefined) {\n      this._uncontrolledSelected = requestedSelected;\n      this._selectedInitialized = true;\n      this._syncPressedState();\n      this.requestUpdate('selected', oldValue);\n    }\n\n    this.dispatchEvent(\n      new CustomEvent<RCChipChangeDetail>('rc-chip-change', {\n        bubbles: true,\n        composed: true,\n        detail: { selected: requestedSelected },\n      }),\n    );\n  };\n\n  private _dispatchRemove(): void {\n    this.dispatchEvent(\n      new CustomEvent<RCChipRemoveDetail>('rc-chip-remove', {\n        bubbles: true,\n        composed: true,\n        detail: { chip: this },\n      }),\n    );\n  }\n\n  private _syncDisabled(): void {\n    const $control = this._$input ?? this._$button;\n\n    if (!$control) {\n      return;\n    }\n\n    if (this.disabled || this.readonly) {\n      if (!$control.disabled) {\n        this._disabledOwned = true;\n      }\n\n      $control.disabled = true;\n    } else if (this._disabledOwned) {\n      $control.disabled = false;\n      this._disabledOwned = false;\n    }\n  }\n\n  private _syncCheckedState(): void {\n    const $input = this._$input;\n\n    if ($input && $input.checked !== this.selected) {\n      $input.checked = this.selected;\n    }\n  }\n\n  private _syncCheckedFromNative(): void {\n    const $input = this._$input;\n\n    if (!$input || $input.checked === this.selected) {\n      return;\n    }\n\n    const oldValue = this.selected;\n\n    if (this._selected === undefined) {\n      this._uncontrolledSelected = $input.checked;\n      this._selectedInitialized = true;\n      this.requestUpdate('selected', oldValue);\n    } else {\n      this._syncCheckedState();\n    }\n  }\n\n  private readonly _handleFormReset = (): void => {\n    queueMicrotask(() => this._syncCheckedFromNative());\n  };\n\n  private _syncPressedState(): void {\n    const $button = this._$button;\n\n    if (!$button) {\n      return;\n    }\n\n    const role = $button.getAttribute('role');\n    const authorOwnsState =\n      ($button.hasAttribute('aria-pressed') && !this._pressedOwned) ||\n      (role ? TOGGLE_ROLES.has(role) : false);\n\n    if (!this.readonly && !this.removable && this.variant === 'filter' && !authorOwnsState) {\n      const pressed = this.selected ? 'true' : 'false';\n\n      if ($button.getAttribute('aria-pressed') !== pressed) {\n        $button.setAttribute('aria-pressed', pressed);\n      }\n\n      this._pressedOwned = true;\n    } else if (this._pressedOwned) {\n      $button.removeAttribute('aria-pressed');\n      this._pressedOwned = false;\n    }\n  }\n}\n\nexport default RCChip;\n"],"names":["chipStyles","css","TOGGLE_ROLES","LIGHT_DOM_CSS","cssText","_RCChip","_a","LitElement","$input","oldValue","requestedSelected","hasPopup","root","$style","value","changed","html","deferInitialSelectionUpdate","$nextButton","$nextInput","$observedControl","$control","$button","role","authorOwnsState","pressed","__decorateClass","property","RCChip"],"mappings":"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"}

package/dist/rc-chip-define.js

@@ -1,3 +1,3 @@
-import { R as e } from "./rc-chip-Do50B5yx.js";
+import { R as e } from "./rc-chip-D2kF8iCM.js";
 customElements.get("rc-chip") || customElements.define("rc-chip", e);
 //# sourceMappingURL=rc-chip-define.js.map

package/dist/rc-chip.js

@@ -1,4 +1,4 @@
-import { R as r } from "./rc-chip-Do50B5yx.js";
+import { R as r } from "./rc-chip-D2kF8iCM.js";
 export {
   r as RCChip
 };

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

@@ -21,13 +21,16 @@ export interface RCChipRemoveDetail {
     chip: RCChip;
 }
 /**
- * Chip wrapper that preserves a direct native `<button>` child for interactive
- * chips and accepts a direct `[data-rc-chip-label]` child for read-only chips.
+ * Chip wrapper that preserves a direct native `<button>` child for action chips,
+ * a direct `<a href>` for navigation chips, or a direct `<label>` containing a
+ * native checkbox/radio for filter chips. Read-only chips accept a direct
+ * `[data-rc-chip-label]` child.
  *
  * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-chip rc-chip docs}
  * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ WAI-ARIA button pattern}
  *
- * @slot - A direct native `<button>` child, or `[data-rc-chip-label]` when `readonly`.
+ * @slot - A direct native `<button>` child, `<a href>`, native-backed filter
+ *   `<label>`, or `[data-rc-chip-label]` when `readonly`.
  * @slot remove-icon - Optional presentational remove icon.
  *
  * @fires rc-chip-change - Fired when a user toggles a filter chip.
@@ -39,10 +42,22 @@ export interface RCChipRemoveDetail {
  * @cssprop [--rc-chip-gap=0px] - Gap between the slotted button/anchor/label's content.
  * @cssprop [--rc-chip-block-size] - Minimum chip block size (defers to native button/anchor
  *   sizing when unset).
+ * @cssprop [--rc-chip-touch-target-block-size=3rem] - Minimum interactive touch target size.
+ * @cssprop [--rc-chip-touch-target-overlap-block-start=0px] - Zero by default. A theme or
+ *   consumer sets this on a chip that sits at a real block-axis leading edge (no neighbor on
+ *   that side), such as inside a height-constrained field, to let its touch-target inflation
+ *   overlap into whatever sits just outside the host instead of also reserving layout space
+ *   there.
+ * @cssprop [--rc-chip-touch-target-overlap-block-end=0px] - The block-axis trailing-edge
+ *   counterpart to `--rc-chip-touch-target-overlap-block-start`.
  * @cssprop [--rc-chip-padding-block] - Block-axis padding of the slotted button, anchor, or
  *   label (defers to native padding when unset).
  * @cssprop [--rc-chip-padding-inline] - Inline-axis padding of the slotted button, anchor, or
  *   label (defers to native padding when unset).
+ * @cssprop [--rc-chip-padding-inline-start=var(--rc-chip-padding-inline)] - Logical leading
+ *   padding of the slotted button, anchor, or label.
+ * @cssprop [--rc-chip-padding-inline-end=var(--rc-chip-padding-inline)] - Logical trailing
+ *   padding of the slotted button, anchor, or label.
  * @cssprop [--rc-chip-border] - Border of the slotted button, anchor, or label (defers to
  *   native border when unset).
  * @cssprop [--rc-chip-radius] - Border radius of the slotted button/anchor/label and the
@@ -81,7 +96,7 @@ export interface RCChipRemoveDetail {
  *   indicator's hit target.
  * @cssprop [--rc-chip-remove-radius=9999px] - Border radius of the remove indicator.
  * @cssprop [--rc-chip-remove-icon-size=smaller] - Font size for a slotted remove icon.
- * @cssprop [--rc-chip-removable-padding-inline-end=calc(var(--rc-chip-remove-target-size, 1.5rem) - var(--rc-chip-gap, 0px))] - Override for removable chip content end padding.
+ * @cssprop [--rc-chip-removable-padding-inline-end=calc(var(--rc-chip-remove-target-size, 1.5rem) + var(--rc-chip-remove-offset-inline, 0.125rem))] - Override for removable chip content end padding.
  *
  * @attr variant - Chip variant: `assist`, `filter`, `input`, or `suggestion`.
  * @attr selected - Declarative selected state for filter/input chips.
@@ -92,14 +107,20 @@ export interface RCChipRemoveDetail {
  */
 export declare class RCChip extends LitElement {
     static styles: import('lit').CSSResult;
+    private static readonly _styledRoots;
+    private static _ensureBaseStyles;
     private _selected;
     private _defaultSelected;
+    private _uncontrolledSelected;
     private _selectedInitialized;
     private _$button;
-    private _buttonObserver;
+    private _$input;
+    private _$form;
+    private _controlObserver;
     private _disabledOwned;
     private _pressedOwned;
     private _slotMicrotaskQueued;
+    private _lastChildWarning;
     /** Chip variant. */
     variant: RCChipVariant;
     /** Current selected state. Host writes are silent. */
@@ -114,15 +135,22 @@ export declare class RCChip extends LitElement {
     readonly: boolean;
     /** Show a trailing remove affordance. */
     removable: boolean;
+    connectedCallback(): void;
     disconnectedCallback(): void;
+    /** Synchronizes uncontrolled filter state from the direct native input. @internal */
+    syncNativeSelection(): void;
     protected firstUpdated(): void;
     protected updated(changed: PropertyValues<this>): void;
-    protected render(): import('lit').TemplateResult<1>;
+    protected render(): import('lit-html').TemplateResult<1>;
     private _handleSlotChange;
     private _syncSlottedButton;
+    private readonly _handleNativeChange;
     private readonly _handleButtonClick;
     private _dispatchRemove;
     private _syncDisabled;
+    private _syncCheckedState;
+    private _syncCheckedFromNative;
+    private readonly _handleFormReset;
     private _syncPressedState;
 }
 export default RCChip;

package/package.json

@@ -3,8 +3,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.0",
-  "description": "Chip wrapper for native button-based actions, filters, and inputs.",
+  "version": "0.7.0",
+  "description": "Chip wrapper for native actions, links, filters, and inputs.",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
@@ -44,6 +44,9 @@
     "test:browser:chrome": "vitest --run --project=chromium",
     "test:browser:firefox": "vitest --run --project=firefox"
   },
+  "dependencies": {
+    "@rcarls/rc-common": "0.7.0"
+  },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.11.0",
     "@vitest/browser-playwright": "4.1.5",

package/dist/rc-chip-Do50B5yx.js

@@ -1,267 +0,0 @@
-import { css as p, LitElement as u, html as h } from "lit";
-import { property as a } from "lit/decorators.js";
-const b = p`
-  :host {
-    display: inline-grid;
-    position: relative;
-    color-scheme: inherit;
-    vertical-align: middle;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  ::slotted(button),
-  ::slotted(a),
-  ::slotted([data-rc-chip-label]) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--rc-chip-gap, 0px);
-    min-block-size: var(--rc-chip-block-size);
-    padding-block: var(--rc-chip-padding-block, revert);
-    padding-inline: var(--rc-chip-padding-inline, revert);
-    border: var(--rc-chip-border, revert);
-    border-radius: var(--rc-chip-radius, revert);
-    background: var(--rc-chip-bg, revert);
-    color: var(--rc-chip-color, revert);
-    font: var(--rc-chip-font, revert);
-    text-decoration: var(--rc-chip-text-decoration, revert);
-    white-space: nowrap;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  :host([selected]) ::slotted(button),
-  :host([selected]) ::slotted(a),
-  :host([selected]) ::slotted([data-rc-chip-label]) {
-    border-color: var(--rc-chip-selected-border-color, revert);
-    background: var(--rc-chip-selected-bg, revert);
-    color: var(--rc-chip-selected-color, revert);
-  }
-
-  :host([disabled]) ::slotted(button) {
-    opacity: var(--rc-chip-disabled-opacity, revert);
-  }
-
-  :host(:focus-within) ::slotted(button),
-  :host(:focus-within) ::slotted(a) {
-    outline: var(--rc-chip-focus-ring, revert);
-    outline-offset: var(--rc-chip-focus-ring-offset, revert);
-  }
-
-  [part='state-layer'] {
-    pointer-events: none;
-    position: absolute;
-    inset: 0;
-    border-radius: var(--rc-chip-radius, 0);
-    background: var(--rc-chip-state-layer-color, currentColor);
-    opacity: 0;
-    transition: opacity
-      var(--rc-chip-state-layer-transition-duration, var(--rc-motion-effects-duration-fast, 80ms))
-      var(--rc-chip-state-layer-transition-easing, var(--rc-motion-effects-easing-fast, ease-out));
-  }
-
-  :host([selected]) [part='state-layer'] {
-    background: var(
-      --rc-chip-selected-state-layer-color,
-      var(--rc-chip-state-layer-color, currentColor)
-    );
-  }
-
-  @media (hover: hover) {
-    :host(:not([disabled], [readonly]):hover) [part='state-layer'] {
-      opacity: var(--rc-chip-hover-state-layer-opacity, 0.08);
-    }
-  }
-
-  :host(:not([disabled], [readonly]):focus-within) [part='state-layer'] {
-    opacity: var(--rc-chip-focus-state-layer-opacity, 0.12);
-  }
-
-  :host(:not([disabled], [readonly]):active) [part='state-layer'] {
-    opacity: var(--rc-chip-pressed-state-layer-opacity, 0.12);
-  }
-
-  [part='remove'] {
-    position: absolute;
-    pointer-events: none;
-    inset-block: 0;
-    inset-inline-end: var(--rc-chip-remove-offset-inline, 0.125rem);
-    display: none;
-    place-items: center;
-    min-inline-size: var(--rc-chip-remove-target-size, 1.5rem);
-    min-block-size: var(--rc-chip-remove-target-size, 1.5rem);
-    margin: auto 0;
-    border: 0;
-    border-radius: var(--rc-chip-remove-radius, 9999px);
-    background: transparent;
-    color: inherit;
-    font: inherit;
-  }
-
-  :host([removable]) [part='remove'] {
-    display: inline-grid;
-  }
-
-  ::slotted([slot='remove-icon']) {
-    /* Keep icon-font utility classes from overriding the chip's compact icon size. */
-    font-size: var(--rc-chip-remove-icon-size, smaller) !important;
-  }
-
-  :host([removable]) ::slotted(button),
-  :host([removable]) ::slotted(a),
-  :host([removable]) ::slotted([data-rc-chip-label]) {
-    padding-inline-end: var(
-      --rc-chip-removable-padding-inline-end,
-      calc(var(--rc-chip-remove-target-size, 1.5rem) - var(--rc-chip-gap, 0px))
-    );
-  }
-
-  @media (forced-colors: active) {
-    [part='state-layer'] {
-      display: none;
-    }
-
-    ::slotted(button),
-    ::slotted(a),
-    ::slotted([data-rc-chip-label]) {
-      border-color: ButtonBorder;
-      background: ButtonFace;
-      color: ButtonText;
-    }
-
-    :host([selected]) ::slotted(button),
-    :host([selected]) ::slotted(a),
-    :host([selected]) ::slotted([data-rc-chip-label]) {
-      border-color: Highlight;
-      background: Highlight;
-      color: HighlightText;
-    }
-  }
-`;
-var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (d, e, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? f(e, t) : e, l = d.length - 1, c; l >= 0; l--)
-    (c = d[l]) && (s = (i ? c(e, t, s) : c(s)) || s);
-  return i && s && v(e, t, s), s;
-};
-const y = /* @__PURE__ */ new Set(["checkbox", "menuitemcheckbox", "menuitemradio", "radio", "switch"]), n = class n extends u {
-  constructor() {
-    super(...arguments), this._defaultSelected = !1, this._selectedInitialized = !1, this._$button = null, this._buttonObserver = null, this._disabledOwned = !1, this._pressedOwned = !1, this._slotMicrotaskQueued = !1, this.variant = "assist", this.disabled = !1, this.readonly = !1, this.removable = !1, this._handleButtonClick = () => {
-      if (this.disabled || this.readonly)
-        return;
-      if (this.removable) {
-        this._dispatchRemove();
-        return;
-      }
-      if (this.variant !== "filter")
-        return;
-      const e = this.selected;
-      this._selected = !this.selected, this._selectedInitialized = !0, this._syncPressedState(), this.requestUpdate("selected", e), this.dispatchEvent(
-        new CustomEvent("rc-chip-change", {
-          bubbles: !0,
-          composed: !0,
-          detail: { selected: this.selected }
-        })
-      );
-    };
-  }
-  get selected() {
-    return this._selected ?? this._defaultSelected;
-  }
-  set selected(e) {
-    const t = this.selected;
-    this._selected = e, this._selectedInitialized = !0, this._syncPressedState(), this.requestUpdate("selected", t);
-  }
-  get defaultSelected() {
-    return this._defaultSelected;
-  }
-  set defaultSelected(e) {
-    const t = this._defaultSelected;
-    this._defaultSelected = e, !this._selectedInitialized && this._selected === void 0 && (this._syncPressedState(), this.requestUpdate("selected", t)), this.requestUpdate("defaultSelected", t);
-  }
-  disconnectedCallback() {
-    this._$button?.removeEventListener("click", this._handleButtonClick), this._buttonObserver?.disconnect(), this._buttonObserver = null, super.disconnectedCallback();
-  }
-  firstUpdated() {
-    this._syncSlottedButton();
-  }
-  updated(e) {
-    (e.has("disabled") || e.has("readonly")) && this._syncDisabled(), (e.has("variant") || e.has("selected") || e.has("readonly") || e.has("removable")) && this._syncPressedState();
-  }
-  render() {
-    return h`
-      <slot @slotchange=${this._handleSlotChange}></slot>
-      <span part="state-layer" aria-hidden="true"></span>
-      ${this.removable ? h`
-            <span part="remove" aria-hidden="true">
-              <slot name="remove-icon">×</slot>
-            </span>
-          ` : ""}
-    `;
-  }
-  _handleSlotChange() {
-    this._slotMicrotaskQueued || (this._slotMicrotaskQueued = !0, queueMicrotask(() => {
-      this._slotMicrotaskQueued = !1, this.isConnected && this._syncSlottedButton();
-    }));
-  }
-  _syncSlottedButton() {
-    const e = this.querySelector(":scope > button");
-    if (!e && this.readonly, e === this._$button) {
-      this._syncDisabled(), this._syncPressedState();
-      return;
-    }
-    this._$button?.removeEventListener("click", this._handleButtonClick), this._buttonObserver?.disconnect(), this._buttonObserver = null, this._$button = e, this._disabledOwned = !1, this._pressedOwned = !1, e && (e.addEventListener("click", this._handleButtonClick), this._buttonObserver = new MutationObserver(() => {
-      this._syncDisabled(), this._syncPressedState();
-    }), this._buttonObserver.observe(e, {
-      attributeFilter: ["aria-pressed", "role", "disabled"]
-    })), this._syncDisabled(), this._syncPressedState();
-  }
-  _dispatchRemove() {
-    this.dispatchEvent(
-      new CustomEvent("rc-chip-remove", {
-        bubbles: !0,
-        composed: !0,
-        detail: { chip: this }
-      })
-    );
-  }
-  _syncDisabled() {
-    const e = this._$button;
-    e && (this.disabled || this.readonly ? (e.disabled || (this._disabledOwned = !0), e.disabled = !0) : this._disabledOwned && (e.disabled = !1, this._disabledOwned = !1));
-  }
-  _syncPressedState() {
-    const e = this._$button;
-    if (!e)
-      return;
-    const t = e.getAttribute("role"), i = e.hasAttribute("aria-pressed") && !this._pressedOwned || (t ? y.has(t) : !1);
-    if (!this.readonly && !this.removable && this.variant === "filter" && !i) {
-      const s = this.selected ? "true" : "false";
-      e.getAttribute("aria-pressed") !== s && e.setAttribute("aria-pressed", s), this._pressedOwned = !0;
-    } else this._pressedOwned && (e.removeAttribute("aria-pressed"), this._pressedOwned = !1);
-  }
-};
-n.styles = b;
-let r = n;
-o([
-  a({ type: String, reflect: !0 })
-], r.prototype, "variant", 2);
-o([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "selected", 1);
-o([
-  a({ type: Boolean, attribute: "default-selected" })
-], r.prototype, "defaultSelected", 1);
-o([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-o([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "readonly", 2);
-o([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "removable", 2);
-export {
-  r as R
-};
-//# sourceMappingURL=rc-chip-Do50B5yx.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"rc-chip-Do50B5yx.js","sources":["../src/rc-chip.styles.ts","../src/rc-chip.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const chipStyles = css`\n  :host {\n    display: inline-grid;\n    position: relative;\n    color-scheme: inherit;\n    vertical-align: middle;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  ::slotted(button),\n  ::slotted(a),\n  ::slotted([data-rc-chip-label]) {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--rc-chip-gap, 0px);\n    min-block-size: var(--rc-chip-block-size);\n    padding-block: var(--rc-chip-padding-block, revert);\n    padding-inline: var(--rc-chip-padding-inline, revert);\n    border: var(--rc-chip-border, revert);\n    border-radius: var(--rc-chip-radius, revert);\n    background: var(--rc-chip-bg, revert);\n    color: var(--rc-chip-color, revert);\n    font: var(--rc-chip-font, revert);\n    text-decoration: var(--rc-chip-text-decoration, revert);\n    white-space: nowrap;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([selected]) ::slotted(button),\n  :host([selected]) ::slotted(a),\n  :host([selected]) ::slotted([data-rc-chip-label]) {\n    border-color: var(--rc-chip-selected-border-color, revert);\n    background: var(--rc-chip-selected-bg, revert);\n    color: var(--rc-chip-selected-color, revert);\n  }\n\n  :host([disabled]) ::slotted(button) {\n    opacity: var(--rc-chip-disabled-opacity, revert);\n  }\n\n  :host(:focus-within) ::slotted(button),\n  :host(:focus-within) ::slotted(a) {\n    outline: var(--rc-chip-focus-ring, revert);\n    outline-offset: var(--rc-chip-focus-ring-offset, revert);\n  }\n\n  [part='state-layer'] {\n    pointer-events: none;\n    position: absolute;\n    inset: 0;\n    border-radius: var(--rc-chip-radius, 0);\n    background: var(--rc-chip-state-layer-color, currentColor);\n    opacity: 0;\n    transition: opacity\n      var(--rc-chip-state-layer-transition-duration, var(--rc-motion-effects-duration-fast, 80ms))\n      var(--rc-chip-state-layer-transition-easing, var(--rc-motion-effects-easing-fast, ease-out));\n  }\n\n  :host([selected]) [part='state-layer'] {\n    background: var(\n      --rc-chip-selected-state-layer-color,\n      var(--rc-chip-state-layer-color, currentColor)\n    );\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled], [readonly]):hover) [part='state-layer'] {\n      opacity: var(--rc-chip-hover-state-layer-opacity, 0.08);\n    }\n  }\n\n  :host(:not([disabled], [readonly]):focus-within) [part='state-layer'] {\n    opacity: var(--rc-chip-focus-state-layer-opacity, 0.12);\n  }\n\n  :host(:not([disabled], [readonly]):active) [part='state-layer'] {\n    opacity: var(--rc-chip-pressed-state-layer-opacity, 0.12);\n  }\n\n  [part='remove'] {\n    position: absolute;\n    pointer-events: none;\n    inset-block: 0;\n    inset-inline-end: var(--rc-chip-remove-offset-inline, 0.125rem);\n    display: none;\n    place-items: center;\n    min-inline-size: var(--rc-chip-remove-target-size, 1.5rem);\n    min-block-size: var(--rc-chip-remove-target-size, 1.5rem);\n    margin: auto 0;\n    border: 0;\n    border-radius: var(--rc-chip-remove-radius, 9999px);\n    background: transparent;\n    color: inherit;\n    font: inherit;\n  }\n\n  :host([removable]) [part='remove'] {\n    display: inline-grid;\n  }\n\n  ::slotted([slot='remove-icon']) {\n    /* Keep icon-font utility classes from overriding the chip's compact icon size. */\n    font-size: var(--rc-chip-remove-icon-size, smaller) !important;\n  }\n\n  :host([removable]) ::slotted(button),\n  :host([removable]) ::slotted(a),\n  :host([removable]) ::slotted([data-rc-chip-label]) {\n    padding-inline-end: var(\n      --rc-chip-removable-padding-inline-end,\n      calc(var(--rc-chip-remove-target-size, 1.5rem) - var(--rc-chip-gap, 0px))\n    );\n  }\n\n  @media (forced-colors: active) {\n    [part='state-layer'] {\n      display: none;\n    }\n\n    ::slotted(button),\n    ::slotted(a),\n    ::slotted([data-rc-chip-label]) {\n      border-color: ButtonBorder;\n      background: ButtonFace;\n      color: ButtonText;\n    }\n\n    :host([selected]) ::slotted(button),\n    :host([selected]) ::slotted(a),\n    :host([selected]) ::slotted([data-rc-chip-label]) {\n      border-color: Highlight;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n`;\n\nexport default chipStyles;\n","import { LitElement, html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport chipStyles from './rc-chip.styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-chip': RCChip;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-chip-change': CustomEvent<RCChipChangeDetail>;\n    'rc-chip-remove': CustomEvent<RCChipRemoveDetail>;\n  }\n}\n\nconst TOGGLE_ROLES = new Set(['checkbox', 'menuitemcheckbox', 'menuitemradio', 'radio', 'switch']);\n\n/** Supported chip variants. */\nexport type RCChipVariant = 'assist' | 'filter' | 'input' | 'suggestion';\n\n/** Detail payload for `rc-chip-change`. */\nexport interface RCChipChangeDetail {\n  /** Selected state after user interaction. */\n  selected: boolean;\n}\n\n/** Detail payload for `rc-chip-remove`. */\nexport interface RCChipRemoveDetail {\n  /** The host chip requesting removal. */\n  chip: RCChip;\n}\n\n/**\n * Chip wrapper that preserves a direct native `<button>` child for interactive\n * chips and accepts a direct `[data-rc-chip-label]` child for read-only chips.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-chip rc-chip docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/button/ WAI-ARIA button pattern}\n *\n * @slot - A direct native `<button>` child, or `[data-rc-chip-label]` when `readonly`.\n * @slot remove-icon - Optional presentational remove icon.\n *\n * @fires rc-chip-change - Fired when a user toggles a filter chip.\n * @fires rc-chip-remove - Fired when a user activates a removable chip's native button.\n *\n * @csspart state-layer - Overlay layer for hover, focus, pressed, ripple, or design-system effects.\n * @csspart remove - Presentational trailing remove indicator.\n *\n * @cssprop [--rc-chip-gap=0px] - Gap between the slotted button/anchor/label's content.\n * @cssprop [--rc-chip-block-size] - Minimum chip block size (defers to native button/anchor\n *   sizing when unset).\n * @cssprop [--rc-chip-padding-block] - Block-axis padding of the slotted button, anchor, or\n *   label (defers to native padding when unset).\n * @cssprop [--rc-chip-padding-inline] - Inline-axis padding of the slotted button, anchor, or\n *   label (defers to native padding when unset).\n * @cssprop [--rc-chip-border] - Border of the slotted button, anchor, or label (defers to\n *   native border when unset).\n * @cssprop [--rc-chip-radius] - Border radius of the slotted button/anchor/label and the\n *   state-layer overlay (defers to native border-radius when unset; the state-layer overlay\n *   falls back to 0).\n * @cssprop [--rc-chip-bg] - Background of the slotted button, anchor, or label (defers to\n *   native background when unset).\n * @cssprop [--rc-chip-color] - Text color of the slotted button, anchor, or label (defers to\n *   native color when unset).\n * @cssprop [--rc-chip-font] - Font shorthand for the slotted button, anchor, or label (defers\n *   to native font when unset).\n * @cssprop [--rc-chip-text-decoration] - Text decoration for the slotted anchor (defers to\n *   native text-decoration when unset).\n * @cssprop [--rc-chip-selected-border-color] - Border color when `selected` (defers to native\n *   styling when unset).\n * @cssprop [--rc-chip-selected-bg] - Background when `selected` (defers to native styling when\n *   unset).\n * @cssprop [--rc-chip-selected-color] - Text color when `selected` (defers to native styling\n *   when unset).\n * @cssprop [--rc-chip-disabled-opacity] - Opacity of the slotted button when `disabled` (defers\n *   to native disabled styling when unset).\n * @cssprop [--rc-chip-focus-ring] - Outline shown while focus-within (defers to native focus\n *   styling when unset).\n * @cssprop [--rc-chip-focus-ring-offset] - Outline offset while focus-within (defers to native\n *   focus styling when unset).\n * @cssprop [--rc-chip-state-layer-color=currentColor] - Hover/focus/pressed state-layer color.\n * @cssprop [--rc-chip-selected-state-layer-color=var(--rc-chip-state-layer-color, currentColor)] - Selected chip state-layer color.\n * @cssprop [--rc-chip-hover-state-layer-opacity=0.08] - Hover state-layer opacity.\n * @cssprop [--rc-chip-focus-state-layer-opacity=0.12] - Focus state-layer opacity.\n * @cssprop [--rc-chip-pressed-state-layer-opacity=0.12] - Pressed state-layer opacity.\n * @cssprop [--rc-chip-state-layer-transition-duration=var(--rc-motion-effects-duration-fast,80ms)] - State-layer effects duration.\n * @cssprop [--rc-chip-state-layer-transition-easing=var(--rc-motion-effects-easing-fast,ease-out)] - State-layer effects easing.\n * @cssprop [--rc-chip-remove-offset-inline=0.125rem] - Inline offset of the remove indicator\n *   from the chip edge.\n * @cssprop [--rc-chip-remove-target-size=1.5rem] - Minimum inline and block size of the remove\n *   indicator's hit target.\n * @cssprop [--rc-chip-remove-radius=9999px] - Border radius of the remove indicator.\n * @cssprop [--rc-chip-remove-icon-size=smaller] - Font size for a slotted remove icon.\n * @cssprop [--rc-chip-removable-padding-inline-end=calc(var(--rc-chip-remove-target-size, 1.5rem) - var(--rc-chip-gap, 0px))] - Override for removable chip content end padding.\n *\n * @attr variant - Chip variant: `assist`, `filter`, `input`, or `suggestion`.\n * @attr selected - Declarative selected state for filter/input chips.\n * @attr default-selected - Initial selected state for uncontrolled usage.\n * @attr disabled - Mirrors disabled state to the native child button.\n * @attr readonly - Marks the chip as non-interactive display content.\n * @attr removable - Shows a trailing remove affordance.\n */\nexport class RCChip extends LitElement {\n  static override styles = chipStyles;\n\n  private _selected: boolean | undefined;\n  private _defaultSelected = false;\n  private _selectedInitialized = false;\n  private _$button: HTMLButtonElement | null = null;\n  private _buttonObserver: MutationObserver | null = null;\n  private _disabledOwned = false;\n  private _pressedOwned = false;\n  private _slotMicrotaskQueued = false;\n\n  /** Chip variant. */\n  @property({ type: String, reflect: true })\n  variant: RCChipVariant = 'assist';\n\n  /** Current selected state. Host writes are silent. */\n  @property({ type: Boolean, reflect: true })\n  get selected(): boolean {\n    return this._selected ?? this._defaultSelected;\n  }\n\n  set selected(value: boolean | undefined) {\n    const oldValue = this.selected;\n\n    this._selected = value;\n    this._selectedInitialized = true;\n    this._syncPressedState();\n    this.requestUpdate('selected', oldValue);\n  }\n\n  /** Initial selected state for uncontrolled usage. */\n  @property({ type: Boolean, attribute: 'default-selected' })\n  get defaultSelected(): boolean {\n    return this._defaultSelected;\n  }\n\n  set defaultSelected(value: boolean) {\n    const oldValue = this._defaultSelected;\n\n    this._defaultSelected = value;\n\n    if (!this._selectedInitialized && this._selected === undefined) {\n      this._syncPressedState();\n      this.requestUpdate('selected', oldValue);\n    }\n\n    this.requestUpdate('defaultSelected', oldValue);\n  }\n\n  /** Mirror disabled state to the native child button. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Mark this chip as non-interactive display content. */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /** Show a trailing remove affordance. */\n  @property({ type: Boolean, reflect: true })\n  removable = false;\n\n  override disconnectedCallback(): void {\n    this._$button?.removeEventListener('click', this._handleButtonClick);\n    this._buttonObserver?.disconnect();\n    this._buttonObserver = null;\n    super.disconnectedCallback();\n  }\n\n  protected override firstUpdated(): void {\n    this._syncSlottedButton();\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('disabled') || changed.has('readonly')) {\n      this._syncDisabled();\n    }\n\n    if (\n      changed.has('variant') ||\n      changed.has('selected') ||\n      changed.has('readonly') ||\n      changed.has('removable')\n    ) {\n      this._syncPressedState();\n    }\n  }\n\n  protected override render() {\n    return html`\n      <slot @slotchange=${this._handleSlotChange}></slot>\n      <span part=\"state-layer\" aria-hidden=\"true\"></span>\n      ${this.removable\n        ? html`\n            <span part=\"remove\" aria-hidden=\"true\">\n              <slot name=\"remove-icon\">×</slot>\n            </span>\n          `\n        : ''}\n    `;\n  }\n\n  private _handleSlotChange(): void {\n    if (this._slotMicrotaskQueued) {\n      return;\n    }\n\n    this._slotMicrotaskQueued = true;\n\n    queueMicrotask(() => {\n      this._slotMicrotaskQueued = false;\n\n      if (this.isConnected) {\n        this._syncSlottedButton();\n      }\n    });\n  }\n\n  private _syncSlottedButton(): void {\n    const $nextButton = this.querySelector<HTMLButtonElement>(':scope > button');\n\n    if (!$nextButton && !this.readonly && import.meta.env.DEV) {\n      console.warn(\n        '[rc-chip] No direct child <button> found. Place a native <button> inside <rc-chip>, or use readonly with a [data-rc-chip-label] child.',\n        this,\n      );\n    }\n\n    if ($nextButton === this._$button) {\n      this._syncDisabled();\n      this._syncPressedState();\n\n      return;\n    }\n\n    this._$button?.removeEventListener('click', this._handleButtonClick);\n    this._buttonObserver?.disconnect();\n    this._buttonObserver = null;\n    this._$button = $nextButton;\n    this._disabledOwned = false;\n    this._pressedOwned = false;\n\n    if ($nextButton) {\n      $nextButton.addEventListener('click', this._handleButtonClick);\n\n      this._buttonObserver = new MutationObserver(() => {\n        this._syncDisabled();\n        this._syncPressedState();\n      });\n\n      this._buttonObserver.observe($nextButton, {\n        attributeFilter: ['aria-pressed', 'role', 'disabled'],\n      });\n    }\n\n    this._syncDisabled();\n    this._syncPressedState();\n  }\n\n  private readonly _handleButtonClick = (): void => {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (this.removable) {\n      this._dispatchRemove();\n\n      return;\n    }\n\n    if (this.variant !== 'filter') {\n      return;\n    }\n\n    const oldValue = this.selected;\n\n    this._selected = !this.selected;\n    this._selectedInitialized = true;\n    this._syncPressedState();\n    this.requestUpdate('selected', oldValue);\n\n    this.dispatchEvent(\n      new CustomEvent<RCChipChangeDetail>('rc-chip-change', {\n        bubbles: true,\n        composed: true,\n        detail: { selected: this.selected },\n      }),\n    );\n  };\n\n  private _dispatchRemove(): void {\n    this.dispatchEvent(\n      new CustomEvent<RCChipRemoveDetail>('rc-chip-remove', {\n        bubbles: true,\n        composed: true,\n        detail: { chip: this },\n      }),\n    );\n  }\n\n  private _syncDisabled(): void {\n    const $button = this._$button;\n\n    if (!$button) {\n      return;\n    }\n\n    if (this.disabled || this.readonly) {\n      if (!$button.disabled) {\n        this._disabledOwned = true;\n      }\n\n      $button.disabled = true;\n    } else if (this._disabledOwned) {\n      $button.disabled = false;\n      this._disabledOwned = false;\n    }\n  }\n\n  private _syncPressedState(): void {\n    const $button = this._$button;\n\n    if (!$button) {\n      return;\n    }\n\n    const role = $button.getAttribute('role');\n    const authorOwnsState =\n      ($button.hasAttribute('aria-pressed') && !this._pressedOwned) ||\n      (role ? TOGGLE_ROLES.has(role) : false);\n\n    if (!this.readonly && !this.removable && this.variant === 'filter' && !authorOwnsState) {\n      const pressed = this.selected ? 'true' : 'false';\n\n      if ($button.getAttribute('aria-pressed') !== pressed) {\n        $button.setAttribute('aria-pressed', pressed);\n      }\n\n      this._pressedOwned = true;\n    } else if (this._pressedOwned) {\n      $button.removeAttribute('aria-pressed');\n      this._pressedOwned = false;\n    }\n  }\n}\n\nexport default RCChip;\n"],"names":["chipStyles","css","TOGGLE_ROLES","_RCChip","LitElement","oldValue","value","changed","html","$nextButton","$button","role","authorOwnsState","pressed","RCChip","__decorateClass","property"],"mappings":"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"}