@rcarls/rc-segmented-button 0.0.0-next-20260921045401

package/CHANGELOG.md

@@ -0,0 +1,80 @@
+# @rcarls/rc-segmented-button
+
+## 0.0.0-next-20260921045401
+
+### Minor Changes
+
+- fef89dc: Move the segmented appearance into the component behind one switch.
+
+  Turning the native fieldset into a segmented control took 27 `--_rc-*`
+  declarations that every theme had to restate, 23 of them byte-identical. Two of
+  those blocks were accessibility recipes rather than taste: the visually hidden
+  legend that keeps the group's accessible name, and the hidden but focusable
+  radio. A theme that got either wrong removed the accessible name or made the
+  control unreachable by keyboard.
+
+  The component now owns the recipe and a theme sets
+  `--rc-segmented-button-appearance: segmented`. Four genuine theme choices become
+  public properties: `--rc-segmented-button-cursor`,
+  `--rc-segmented-button-disabled-cursor`,
+  `--rc-segmented-button-vertical-divider`, and
+  `--rc-segmented-button-selected-icon-display`.
+
+  Unset, the fieldset, legend, and radios keep their browser appearance, as
+  before. The switch is read with a style container query (Chrome 111, Safari 18,
+  Firefox 128); where that is unsupported the recipe does not apply and the
+  control falls back to the same native appearance.
+
+  To migrate a theme, replace its `--_rc-segmented-button-*` block with the single
+  `--rc-segmented-button-appearance: segmented` declaration, plus any of the four
+  public properties whose value differs from the default.
+
+### Patch Changes
+
+- fb54f77: Keep the selected segment visible in forced-colors mode.
+
+  Forced colors replaces the background a theme selects a segment with, which left
+  selection legible only through the optional selected-icon slot. The base styles
+  now restate the selected segment in `Highlight` and `HighlightText`, matching the
+  `rc-chip` treatment, so selection survives in every theme whether or not the icon
+  slot is used.
+
+## 0.6.0
+
+## 0.5.0
+
+### Minor Changes
+
+- 7c68235: Fix two spacing bugs in the optional selected-icon (checkmark) pattern:
+  `--rc-segmented-button-segment-gap` had no fallback value, so there was no
+  gap at all between the checkmark and the label text; and the checkmark
+  slot was `display: none` when unchecked (zero width, zero gap consumed),
+  so a segment's width visibly grew when it became selected.
+
+  The selected-icon slot now always reserves its width (new
+  `--rc-segmented-button-selected-icon-size`, default `1.25em`), toggling
+  only `visibility` between checked/unchecked states, with a matching
+  pure-CSS mirror spacer on the opposite side (RTL-safe via logical
+  `inline-size`) so the label text stays centered instead of leaning toward
+  the now-always-reserved leading icon slot. Segment width is now constant
+  regardless of selection state. `--rc-segmented-button-segment-gap`
+  defaults to `0.5em`. Both changes are backward compatible for consumers
+  not using the selected-icon slot at all.
+
+## 0.4.2
+
+## 0.4.1
+
+## 0.4.0
+
+### Minor Changes
+
+- 193ef66: Add the rc-segmented-button package for native radio group enhancement.
+
+### Patch Changes
+
+- 55e8ab5: Preserve UA-like control and surface styling until an optional theme supplies decorative tokens.
+  Restore themed button hover and pressed state layers, including a pointer-origin Material ripple.
+- d918392: Document all 14 `rc-segmented-button` CSS custom properties in the generated
+  API reference, including which ones defer to native fieldset/label/radio
+  styling when unset.

package/README.md

@@ -0,0 +1,43 @@
+# @rcarls/rc-segmented-button
+
+Segmented button group backed by native radio inputs.
+
+```html
+<rc-segmented-button>
+  <fieldset>
+    <legend>Text size</legend>
+    <label><input type="radio" name="size" value="small" /> Small</label>
+    <label><input type="radio" name="size" value="medium" checked /> Medium</label>
+    <label><input type="radio" name="size" value="large" /> Large</label>
+  </fieldset>
+</rc-segmented-button>
+```
+
+The fieldset, legend, labels, and radios remain in light DOM for forms and no-JavaScript fallback.
+
+## Segmented appearance
+
+Unstyled, the fieldset, legend, and radios keep their browser appearance. Set
+`--rc-segmented-button-appearance: segmented` to turn on the component's own
+recipe: a flat fieldset, a visually hidden legend, and radios that stay
+focusable and in the accessibility tree while being invisible. The packaged
+themes set it for you.
+
+```css
+.my-theme rc-segmented-button {
+  --rc-segmented-button-appearance: segmented;
+}
+```
+
+### Browser support
+
+That switch is read with a CSS style container query, which has narrower support
+than the rest of this package: Chrome 111, Safari 18, and Firefox 128. Everything
+else here, including the component's behavior, keyboard handling, and form
+participation, works wherever custom elements do.
+
+Where style queries are unsupported the recipe simply does not apply and the
+control falls back to the native fieldset and radio appearance, which stays
+fully usable and accessible. Nothing breaks; it looks like plain radio buttons.
+If that fallback is not acceptable for your audience, write the segment layout
+in your own CSS instead of using the switch.

package/dist/custom-elements.json

@@ -0,0 +1,439 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-segmented-button",
+          "declaration": {
+            "name": "RCSegmentedButton",
+            "module": "/src/rc-segmented-button.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCSegmentedButton",
+          "declaration": {
+            "name": "default",
+            "module": "./rc-segmented-button.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RCSegmentedButtonChangeDetail",
+          "declaration": {
+            "name": "RCSegmentedButtonChangeDetail",
+            "module": "./rc-segmented-button.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-segmented-button.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Segmented button group that enhances a direct native `<fieldset>` of radio inputs.",
+          "name": "RCSegmentedButton",
+          "cssProperties": [
+            {
+              "description": "Set to `segmented` to turn on the component's segmented recipe: a flat fieldset, a visually hidden legend, and hidden but focusable radios. Unset, the fieldset, legend, and radios keep their browser appearance.",
+              "name": "--rc-segmented-button-appearance"
+            },
+            {
+              "description": "Segment cursor once the segmented recipe is on.",
+              "name": "--rc-segmented-button-cursor",
+              "default": "pointer"
+            },
+            {
+              "description": "Segment cursor when its radio is disabled, or when the host is `disabled`, once the segmented recipe is on.",
+              "name": "--rc-segmented-button-disabled-cursor",
+              "default": "not-allowed"
+            },
+            {
+              "description": "Border on the inline-start edge of adjacent segments in vertical orientation (defaults to the segment border).",
+              "name": "--rc-segmented-button-vertical-divider"
+            },
+            {
+              "description": "Display of the selected-icon slot. Set to `none` for a theme that shows selection without a tick.",
+              "name": "--rc-segmented-button-selected-icon-display",
+              "default": "inline-grid"
+            },
+            {
+              "description": "Gap between segment icon and label content.",
+              "name": "--rc-segmented-button-segment-gap",
+              "default": "0.5em"
+            },
+            {
+              "description": "Reserved inline-size of the selected-icon slot (and its opposite-side mirror spacer) — constant regardless of checked state, so segment width doesn't change on selection.",
+              "name": "--rc-segmented-button-selected-icon-size",
+              "default": "1.25em"
+            },
+            {
+              "description": "Minimum segment block size (defers to native label layout when unset).",
+              "name": "--rc-segmented-button-segment-min-block-size"
+            },
+            {
+              "description": "Segment block-axis padding (defers to native label padding when unset).",
+              "name": "--rc-segmented-button-segment-padding-block",
+              "default": "revert"
+            },
+            {
+              "description": "Segment inline-axis padding (defers to native label padding when unset).",
+              "name": "--rc-segmented-button-segment-padding-inline",
+              "default": "revert"
+            },
+            {
+              "description": "Segment border (defers to native label border when unset).",
+              "name": "--rc-segmented-button-border",
+              "default": "revert"
+            },
+            {
+              "description": "Segment text color (defers to native label color when unset).",
+              "name": "--rc-segmented-button-color",
+              "default": "revert"
+            },
+            {
+              "description": "Segment background (defers to native label background when unset).",
+              "name": "--rc-segmented-button-bg",
+              "default": "revert"
+            },
+            {
+              "description": "Rounded corner radius on the first and last segments (defers to native label styling when unset).",
+              "name": "--rc-segmented-button-radius",
+              "default": "revert"
+            },
+            {
+              "description": "Border between adjacent segments (defers to native label styling when unset).",
+              "name": "--rc-segmented-button-divider",
+              "default": "revert"
+            },
+            {
+              "description": "Segment text color when its radio is checked (defers to native label color when unset).",
+              "name": "--rc-segmented-button-selected-color",
+              "default": "revert"
+            },
+            {
+              "description": "Segment background when its radio is checked (defers to native label background when unset).",
+              "name": "--rc-segmented-button-selected-bg",
+              "default": "revert"
+            },
+            {
+              "description": "Segment outline when its radio is focus-visible (defers to native focus styling when unset).",
+              "name": "--rc-segmented-button-focus-ring",
+              "default": "revert"
+            },
+            {
+              "description": "Segment outline offset when its radio is focus-visible (defers to native focus styling when unset).",
+              "name": "--rc-segmented-button-focus-ring-offset",
+              "default": "revert"
+            },
+            {
+              "description": "Segment opacity when its radio is disabled, or when the host is `disabled` (defers to native disabled styling when unset). Under `forced-colors: active` the selected segment is restated in system colors (`Highlight` / `HighlightText`), so a selected state stays visible even when a theme paints selection with a background the forced palette replaces, and even when the optional selected-icon slot is not used.",
+              "name": "--rc-segmented-button-disabled-opacity",
+              "default": "revert"
+            }
+          ],
+          "slots": [
+            {
+              "description": "A direct `<fieldset>` containing native radio inputs and labels.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_styledRoots",
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "new Set<Document | ShadowRoot>()"
+            },
+            {
+              "kind": "method",
+              "name": "_ensureBaseStyles",
+              "privacy": "private",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "root",
+                  "type": {
+                    "text": "Document | ShadowRoot"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_value",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "_valueInitialized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_$fieldset",
+              "type": {
+                "text": "HTMLFieldSetElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_disabledOwned",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_slotMicrotaskQueued",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "description": "Current selected radio value. Host writes are silent.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "defaultValue",
+              "type": {
+                "text": "string"
+              },
+              "description": "Initial selected value for uncontrolled usage.",
+              "attribute": "default-value"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Mirror disabled state to the native fieldset.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "description": "Keyboard orientation.",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "_handleSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncFieldset",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncInitialValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_$radios",
+              "type": {
+                "text": "HTMLInputElement[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_$enabledRadios",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLInputElement[]"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_handleChange",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_handleKeyDown",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_applyValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_writeDefault",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_applyDisabled",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired after user interaction changes the selected value.",
+              "name": "rc-segmented-button-change"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Current selected radio value. Host writes are silent.",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "value"
+            },
+            {
+              "description": "Initial selected value for uncontrolled usage.",
+              "name": "default-value",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "defaultValue"
+            },
+            {
+              "description": "Mirror disabled state to the native fieldset.",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "description": "Keyboard orientation.",
+              "name": "orientation",
+              "type": {
+                "text": "'horizontal' | 'vertical'"
+              },
+              "default": "'horizontal'",
+              "fieldName": "orientation"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-segmented-button",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCSegmentedButton",
+          "declaration": {
+            "name": "RCSegmentedButton",
+            "module": "src/rc-segmented-button.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCSegmentedButton",
+            "module": "src/rc-segmented-button.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/rc-segmented-button-BHU4o-Pr.js

@@ -0,0 +1,309 @@
+import { css as h, LitElement as b, html as p } from "lit";
+import { property as o } from "lit/decorators.js";
+const g = h`
+  :host {
+    display: inline-block;
+    color-scheme: inherit;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+`;
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (u, e, t, r) => {
+  for (var i = r > 1 ? void 0 : r ? v(e, t) : e, s = u.length - 1, l; s >= 0; s--)
+    (l = u[s]) && (i = (r ? l(e, t, i) : l(i)) || i);
+  return r && i && f(e, t, i), i;
+};
+const m = `
+@layer rc-base {
+  /*
+   * The segmented appearance, behind one switch a theme sets.
+   *
+   * Everything here is structure rather than paint, and two of the blocks are
+   * accessibility recipes rather than taste: the legend stays in the
+   * accessibility tree while being visually hidden, and each radio stays
+   * focusable and hit-testable through its label while being invisible. A
+   * theme that reached for display:none on either would remove the group's
+   * accessible name or make the control unreachable by keyboard, so the
+   * component owns both rather than restating them per theme.
+   *
+   * Gating on a style query keeps the documented unthemed contract: with the
+   * property unset the fieldset, legend, and radios keep their browser
+   * appearance. Where style queries are unsupported the recipe simply does not
+   * apply, which lands on that same native appearance.
+   */
+  @container style(--rc-segmented-button-appearance: segmented) {
+    rc-segmented-button > fieldset {
+      display: inline-flex;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      overflow: visible;
+    }
+
+    rc-segmented-button > fieldset > legend {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      margin: -1px;
+      padding: 0;
+      border: 0;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+    }
+
+    rc-segmented-button > fieldset > label {
+      display: inline-flex;
+      cursor: var(--rc-segmented-button-cursor, pointer);
+      user-select: none;
+    }
+
+    rc-segmented-button > fieldset > label:has(input[type='radio']:disabled),
+    rc-segmented-button[disabled] > fieldset > label {
+      cursor: var(--rc-segmented-button-disabled-cursor, not-allowed);
+    }
+
+    rc-segmented-button[orientation='vertical'] > fieldset > label + label {
+      border-inline-start: var(
+        --rc-segmented-button-vertical-divider,
+        var(--rc-segmented-button-border, revert)
+      );
+    }
+
+    rc-segmented-button > fieldset > label > input[type='radio'] {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      margin: 0;
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  rc-segmented-button[orientation='vertical'] > fieldset {
+    flex-direction: column;
+  }
+
+  rc-segmented-button > fieldset > label {
+    align-items: center;
+    justify-content: center;
+    gap: var(--rc-segmented-button-segment-gap, 0.5em);
+    min-block-size: var(--rc-segmented-button-segment-min-block-size);
+    padding-block: var(--rc-segmented-button-segment-padding-block, revert);
+    padding-inline: var(--rc-segmented-button-segment-padding-inline, revert);
+    border: var(--rc-segmented-button-border, revert);
+    color: var(--rc-segmented-button-color, revert);
+    background: var(--rc-segmented-button-bg, revert);
+  }
+
+  rc-segmented-button > fieldset > label:first-of-type {
+    border-start-start-radius: var(--rc-segmented-button-radius, revert);
+    border-end-start-radius: var(--rc-segmented-button-radius, revert);
+  }
+
+  rc-segmented-button > fieldset > label:last-of-type {
+    border-start-end-radius: var(--rc-segmented-button-radius, revert);
+    border-end-end-radius: var(--rc-segmented-button-radius, revert);
+  }
+
+  rc-segmented-button > fieldset > label + label {
+    border-inline-start: var(--rc-segmented-button-divider, revert);
+  }
+
+  rc-segmented-button[orientation='vertical'] > fieldset > label + label {
+    border-block-start: var(--rc-segmented-button-divider, revert);
+  }
+
+  rc-segmented-button[orientation='vertical'] > fieldset > label:first-of-type {
+    border-start-start-radius: var(--rc-segmented-button-radius, revert);
+    border-start-end-radius: var(--rc-segmented-button-radius, revert);
+    border-end-start-radius: 0;
+  }
+
+  rc-segmented-button[orientation='vertical'] > fieldset > label:last-of-type {
+    border-start-end-radius: 0;
+    border-end-start-radius: var(--rc-segmented-button-radius, revert);
+    border-end-end-radius: var(--rc-segmented-button-radius, revert);
+  }
+
+  rc-segmented-button > fieldset > label:has(input[type='radio']:checked) {
+    color: var(--rc-segmented-button-selected-color, revert);
+    background: var(--rc-segmented-button-selected-bg, revert);
+  }
+
+  rc-segmented-button > fieldset > label:has(input[type='radio']:focus-visible) {
+    outline: var(--rc-segmented-button-focus-ring, revert);
+    outline-offset: var(--rc-segmented-button-focus-ring-offset, revert);
+  }
+
+  rc-segmented-button > fieldset > label:has(input[type='radio']:disabled),
+  rc-segmented-button[disabled] > fieldset > label {
+    opacity: var(--rc-segmented-button-disabled-opacity, revert);
+  }
+
+  /* Always reserved (never display:none) so a segment's width doesn't
+     change between checked/unchecked — only visibility toggles. A fixed
+     inline-size keeps the reserved width deterministic regardless of the
+     icon's own intrinsic size. */
+  rc-segmented-button > fieldset > label > [data-rc-segmented-button-selected-icon] {
+    display: var(--rc-segmented-button-selected-icon-display, inline-grid);
+    inline-size: var(--rc-segmented-button-selected-icon-size, 1.25em);
+    place-items: center;
+    visibility: hidden;
+  }
+
+  rc-segmented-button > fieldset > label:has(input[type='radio']:checked) > [data-rc-segmented-button-selected-icon] {
+    visibility: visible;
+  }
+
+  /* Mirrors the selected-icon slot's reserved width on the opposite side,
+     so the label text stays centered instead of leaning toward the
+     always-reserved leading icon slot. Logical inline-size + scoping via
+     :has() (only labels that opt into the checkmark pattern get a mirror)
+     keeps this RTL-correct and backward compatible for consumers not
+     using the selected-icon slot at all. */
+  rc-segmented-button > fieldset > label:has([data-rc-segmented-button-selected-icon])::after {
+    content: '';
+    inline-size: var(--rc-segmented-button-selected-icon-size, 1.25em);
+    visibility: hidden;
+  }
+
+  /* Forced colors replaces the palette a theme selects a segment with, so the
+     selected state has to be restated in system colors here. Without it the
+     only surviving indicator is the optional selected-icon slot, which a theme
+     is free to switch off, and a theme that does leaves the control with no
+     visible selection at all. Mirrors the rc-chip treatment. */
+  @media (forced-colors: active) {
+    rc-segmented-button > fieldset > label {
+      border-color: ButtonBorder;
+      background: ButtonFace;
+      color: ButtonText;
+    }
+
+    rc-segmented-button > fieldset > label:has(input[type='radio']:checked) {
+      border-color: Highlight;
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}
+`;
+var n;
+const d = (n = class extends b {
+  constructor() {
+    super(...arguments), this._value = "", this._defaultValue = "", this._valueInitialized = !1, this._$fieldset = null, this._disabledOwned = !1, this._slotMicrotaskQueued = !1, this.disabled = !1, this.orientation = "horizontal", this._handleChange = (e) => {
+      const t = e.target;
+      if (!(t instanceof HTMLInputElement) || t.type !== "radio" || !t.checked)
+        return;
+      const r = this.value;
+      this._value = t.value, this._valueInitialized = !0, this.requestUpdate("value", r), this.dispatchEvent(
+        new CustomEvent("rc-segmented-button-change", {
+          bubbles: !0,
+          composed: !0,
+          detail: { value: this.value }
+        })
+      );
+    }, this._handleKeyDown = (e) => {
+      const t = e.target;
+      if (!(t instanceof HTMLInputElement) || t.type !== "radio" || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)
+        return;
+      const r = this.orientation === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], i = this.orientation === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"], s = this._$enabledRadios(), l = s.indexOf(t);
+      if (l === -1)
+        return;
+      let a;
+      r.includes(e.key) ? a = s[(l + 1) % s.length] : i.includes(e.key) ? a = s[(l - 1 + s.length) % s.length] : e.key === "Home" ? a = s[0] : e.key === "End" && (a = s[s.length - 1]), a && (e.preventDefault(), a.focus(), a.checked = !0, a.dispatchEvent(new Event("change", { bubbles: !0 })));
+    };
+  }
+  static _ensureBaseStyles(e) {
+    if (n._styledRoots.has(e))
+      return;
+    n._styledRoots.add(e);
+    const t = document.createElement("style");
+    t.setAttribute("data-rc-light-dom-base", "rc-segmented-button"), t.textContent = m, e instanceof Document ? e.head.append(t) : e.append(t);
+  }
+  get value() {
+    return this._value || this._defaultValue;
+  }
+  set value(e) {
+    const t = this.value;
+    this._value = e ?? "", this._valueInitialized = !0, this._applyValue(!1), this.requestUpdate("value", t);
+  }
+  get defaultValue() {
+    return this._defaultValue;
+  }
+  set defaultValue(e) {
+    const t = this._defaultValue;
+    this._defaultValue = e, !this._valueInitialized && !this._value && (this._applyValue(!1), this.requestUpdate("value", t)), this.requestUpdate("defaultValue", t);
+  }
+  connectedCallback() {
+    super.connectedCallback(), n._ensureBaseStyles(this.getRootNode());
+  }
+  disconnectedCallback() {
+    this._$fieldset?.removeEventListener("change", this._handleChange), this._$fieldset?.removeEventListener("keydown", this._handleKeyDown), super.disconnectedCallback();
+  }
+  firstUpdated() {
+    this._syncFieldset();
+  }
+  updated(e) {
+    e.has("disabled") && this._applyDisabled();
+  }
+  render() {
+    return p`<slot @slotchange=${this._handleSlotChange}></slot>`;
+  }
+  _handleSlotChange() {
+    this._slotMicrotaskQueued || (this._slotMicrotaskQueued = !0, queueMicrotask(() => {
+      this._slotMicrotaskQueued = !1, this.isConnected && this._syncFieldset();
+    }));
+  }
+  _syncFieldset() {
+    const e = this.querySelector(":scope > fieldset");
+    if (e === this._$fieldset) {
+      this._syncInitialValue(), this._applyValue(!1), this._applyDisabled();
+      return;
+    }
+    this._$fieldset?.removeEventListener("change", this._handleChange), this._$fieldset?.removeEventListener("keydown", this._handleKeyDown), this._$fieldset = e, this._disabledOwned = !1, e && (e.addEventListener("change", this._handleChange), e.addEventListener("keydown", this._handleKeyDown)), this._syncInitialValue(), this._applyValue(!1), this._applyDisabled();
+  }
+  _syncInitialValue() {
+    if (this._valueInitialized || this._value)
+      return;
+    const e = this._$radios.find((t) => t.checked);
+    e && (this._value = e.value, this._defaultValue = e.defaultChecked ? e.value : this._defaultValue);
+  }
+  get _$radios() {
+    return this._$fieldset ? Array.from(
+      this._$fieldset.querySelectorAll(':scope input[type="radio"]')
+    ) : [];
+  }
+  _$enabledRadios() {
+    return this._$radios.filter((e) => !e.disabled && !this.disabled);
+  }
+  _applyValue(e) {
+    const t = this._$radios, r = this.value;
+    for (const i of t)
+      i.checked = i.value === r;
+  }
+  _applyDisabled() {
+    const e = this._$fieldset;
+    e && (this.disabled ? (e.disabled || (this._disabledOwned = !0), e.disabled = !0) : this._disabledOwned && (e.disabled = !1, this._disabledOwned = !1));
+  }
+}, n.styles = g, n._styledRoots = /* @__PURE__ */ new Set(), n);
+c([
+  o({ type: String, reflect: !0 })
+], d.prototype, "value", 1);
+c([
+  o({ type: String, attribute: "default-value" })
+], d.prototype, "defaultValue", 1);
+c([
+  o({ type: Boolean, reflect: !0 })
+], d.prototype, "disabled", 2);
+c([
+  o({ type: String, reflect: !0 })
+], d.prototype, "orientation", 2);
+let w = d;
+export {
+  w as R
+};
+//# sourceMappingURL=rc-segmented-button-BHU4o-Pr.js.map

package/dist/rc-segmented-button-BHU4o-Pr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-segmented-button-BHU4o-Pr.js","sources":["../src/rc-segmented-button.styles.ts","../src/rc-segmented-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const segmentedButtonStyles = css`\n  :host {\n    display: inline-block;\n    color-scheme: inherit;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n`;\n\nexport default segmentedButtonStyles;\n","import { LitElement, html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport segmentedButtonStyles from './rc-segmented-button.styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-segmented-button': RCSegmentedButton;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-segmented-button-change': CustomEvent<RCSegmentedButtonChangeDetail>;\n  }\n}\n\nconst LIGHT_DOM_CSS = `\n@layer rc-base {\n  /*\n   * The segmented appearance, behind one switch a theme sets.\n   *\n   * Everything here is structure rather than paint, and two of the blocks are\n   * accessibility recipes rather than taste: the legend stays in the\n   * accessibility tree while being visually hidden, and each radio stays\n   * focusable and hit-testable through its label while being invisible. A\n   * theme that reached for display:none on either would remove the group's\n   * accessible name or make the control unreachable by keyboard, so the\n   * component owns both rather than restating them per theme.\n   *\n   * Gating on a style query keeps the documented unthemed contract: with the\n   * property unset the fieldset, legend, and radios keep their browser\n   * appearance. Where style queries are unsupported the recipe simply does not\n   * apply, which lands on that same native appearance.\n   */\n  @container style(--rc-segmented-button-appearance: segmented) {\n    rc-segmented-button > fieldset {\n      display: inline-flex;\n      margin: 0;\n      padding: 0;\n      border: 0;\n      border-radius: 0;\n      overflow: visible;\n    }\n\n    rc-segmented-button > fieldset > legend {\n      position: absolute;\n      inline-size: 1px;\n      block-size: 1px;\n      margin: -1px;\n      padding: 0;\n      border: 0;\n      overflow: hidden;\n      clip: rect(0 0 0 0);\n      white-space: nowrap;\n    }\n\n    rc-segmented-button > fieldset > label {\n      display: inline-flex;\n      cursor: var(--rc-segmented-button-cursor, pointer);\n      user-select: none;\n    }\n\n    rc-segmented-button > fieldset > label:has(input[type='radio']:disabled),\n    rc-segmented-button[disabled] > fieldset > label {\n      cursor: var(--rc-segmented-button-disabled-cursor, not-allowed);\n    }\n\n    rc-segmented-button[orientation='vertical'] > fieldset > label + label {\n      border-inline-start: var(\n        --rc-segmented-button-vertical-divider,\n        var(--rc-segmented-button-border, revert)\n      );\n    }\n\n    rc-segmented-button > fieldset > label > input[type='radio'] {\n      position: absolute;\n      inline-size: 1px;\n      block-size: 1px;\n      margin: 0;\n      opacity: 0;\n      pointer-events: none;\n    }\n  }\n\n  rc-segmented-button[orientation='vertical'] > fieldset {\n    flex-direction: column;\n  }\n\n  rc-segmented-button > fieldset > label {\n    align-items: center;\n    justify-content: center;\n    gap: var(--rc-segmented-button-segment-gap, 0.5em);\n    min-block-size: var(--rc-segmented-button-segment-min-block-size);\n    padding-block: var(--rc-segmented-button-segment-padding-block, revert);\n    padding-inline: var(--rc-segmented-button-segment-padding-inline, revert);\n    border: var(--rc-segmented-button-border, revert);\n    color: var(--rc-segmented-button-color, revert);\n    background: var(--rc-segmented-button-bg, revert);\n  }\n\n  rc-segmented-button > fieldset > label:first-of-type {\n    border-start-start-radius: var(--rc-segmented-button-radius, revert);\n    border-end-start-radius: var(--rc-segmented-button-radius, revert);\n  }\n\n  rc-segmented-button > fieldset > label:last-of-type {\n    border-start-end-radius: var(--rc-segmented-button-radius, revert);\n    border-end-end-radius: var(--rc-segmented-button-radius, revert);\n  }\n\n  rc-segmented-button > fieldset > label + label {\n    border-inline-start: var(--rc-segmented-button-divider, revert);\n  }\n\n  rc-segmented-button[orientation='vertical'] > fieldset > label + label {\n    border-block-start: var(--rc-segmented-button-divider, revert);\n  }\n\n  rc-segmented-button[orientation='vertical'] > fieldset > label:first-of-type {\n    border-start-start-radius: var(--rc-segmented-button-radius, revert);\n    border-start-end-radius: var(--rc-segmented-button-radius, revert);\n    border-end-start-radius: 0;\n  }\n\n  rc-segmented-button[orientation='vertical'] > fieldset > label:last-of-type {\n    border-start-end-radius: 0;\n    border-end-start-radius: var(--rc-segmented-button-radius, revert);\n    border-end-end-radius: var(--rc-segmented-button-radius, revert);\n  }\n\n  rc-segmented-button > fieldset > label:has(input[type='radio']:checked) {\n    color: var(--rc-segmented-button-selected-color, revert);\n    background: var(--rc-segmented-button-selected-bg, revert);\n  }\n\n  rc-segmented-button > fieldset > label:has(input[type='radio']:focus-visible) {\n    outline: var(--rc-segmented-button-focus-ring, revert);\n    outline-offset: var(--rc-segmented-button-focus-ring-offset, revert);\n  }\n\n  rc-segmented-button > fieldset > label:has(input[type='radio']:disabled),\n  rc-segmented-button[disabled] > fieldset > label {\n    opacity: var(--rc-segmented-button-disabled-opacity, revert);\n  }\n\n  /* Always reserved (never display:none) so a segment's width doesn't\n     change between checked/unchecked — only visibility toggles. A fixed\n     inline-size keeps the reserved width deterministic regardless of the\n     icon's own intrinsic size. */\n  rc-segmented-button > fieldset > label > [data-rc-segmented-button-selected-icon] {\n    display: var(--rc-segmented-button-selected-icon-display, inline-grid);\n    inline-size: var(--rc-segmented-button-selected-icon-size, 1.25em);\n    place-items: center;\n    visibility: hidden;\n  }\n\n  rc-segmented-button > fieldset > label:has(input[type='radio']:checked) > [data-rc-segmented-button-selected-icon] {\n    visibility: visible;\n  }\n\n  /* Mirrors the selected-icon slot's reserved width on the opposite side,\n     so the label text stays centered instead of leaning toward the\n     always-reserved leading icon slot. Logical inline-size + scoping via\n     :has() (only labels that opt into the checkmark pattern get a mirror)\n     keeps this RTL-correct and backward compatible for consumers not\n     using the selected-icon slot at all. */\n  rc-segmented-button > fieldset > label:has([data-rc-segmented-button-selected-icon])::after {\n    content: '';\n    inline-size: var(--rc-segmented-button-selected-icon-size, 1.25em);\n    visibility: hidden;\n  }\n\n  /* Forced colors replaces the palette a theme selects a segment with, so the\n     selected state has to be restated in system colors here. Without it the\n     only surviving indicator is the optional selected-icon slot, which a theme\n     is free to switch off, and a theme that does leaves the control with no\n     visible selection at all. Mirrors the rc-chip treatment. */\n  @media (forced-colors: active) {\n    rc-segmented-button > fieldset > label {\n      border-color: ButtonBorder;\n      background: ButtonFace;\n      color: ButtonText;\n    }\n\n    rc-segmented-button > fieldset > label:has(input[type='radio']:checked) {\n      border-color: Highlight;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n`;\n\n/** Detail payload for `rc-segmented-button-change`. */\nexport interface RCSegmentedButtonChangeDetail {\n  /** Current selected radio value after user interaction. */\n  value: string;\n}\n\n/**\n * Segmented button group that enhances a direct native `<fieldset>` of radio inputs.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-segmented-button rc-segmented-button docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/radio/ WAI-ARIA radio group pattern}\n *\n * @slot - A direct `<fieldset>` containing native radio inputs and labels.\n *\n * @fires rc-segmented-button-change - Fired after user interaction changes the selected value.\n *\n * @attr value - Current selected radio value. Host writes are silent.\n * @attr default-value - Initial selected value for uncontrolled usage.\n * @attr disabled - Mirrors disabled state to the native fieldset.\n * @attr orientation - Keyboard orientation: `horizontal` or `vertical`.\n *\n * @cssprop [--rc-segmented-button-appearance] - Set to `segmented` to turn on the component's\n *   segmented recipe: a flat fieldset, a visually hidden legend, and hidden but focusable radios.\n *   Unset, the fieldset, legend, and radios keep their browser appearance.\n * @cssprop [--rc-segmented-button-cursor=pointer] - Segment cursor once the segmented recipe is on.\n * @cssprop [--rc-segmented-button-disabled-cursor=not-allowed] - Segment cursor when its radio is\n *   disabled, or when the host is `disabled`, once the segmented recipe is on.\n * @cssprop [--rc-segmented-button-vertical-divider] - Border on the inline-start edge of adjacent\n *   segments in vertical orientation (defaults to the segment border).\n * @cssprop [--rc-segmented-button-selected-icon-display=inline-grid] - Display of the selected-icon\n *   slot. Set to `none` for a theme that shows selection without a tick.\n * @cssprop [--rc-segmented-button-segment-gap=0.5em] - Gap between segment icon and label content.\n * @cssprop [--rc-segmented-button-selected-icon-size=1.25em] - Reserved inline-size of the\n *   selected-icon slot (and its opposite-side mirror spacer) — constant regardless of checked\n *   state, so segment width doesn't change on selection.\n * @cssprop [--rc-segmented-button-segment-min-block-size] - Minimum segment block size (defers\n *   to native label layout when unset).\n * @cssprop [--rc-segmented-button-segment-padding-block=revert] - Segment block-axis padding\n *   (defers to native label padding when unset).\n * @cssprop [--rc-segmented-button-segment-padding-inline=revert] - Segment inline-axis padding\n *   (defers to native label padding when unset).\n * @cssprop [--rc-segmented-button-border=revert] - Segment border (defers to native label border\n *   when unset).\n * @cssprop [--rc-segmented-button-color=revert] - Segment text color (defers to native label\n *   color when unset).\n * @cssprop [--rc-segmented-button-bg=revert] - Segment background (defers to native label\n *   background when unset).\n * @cssprop [--rc-segmented-button-radius=revert] - Rounded corner radius on the first and last\n *   segments (defers to native label styling when unset).\n * @cssprop [--rc-segmented-button-divider=revert] - Border between adjacent segments (defers to\n *   native label styling when unset).\n * @cssprop [--rc-segmented-button-selected-color=revert] - Segment text color when its radio is\n *   checked (defers to native label color when unset).\n * @cssprop [--rc-segmented-button-selected-bg=revert] - Segment background when its radio is\n *   checked (defers to native label background when unset).\n * @cssprop [--rc-segmented-button-focus-ring=revert] - Segment outline when its radio is\n *   focus-visible (defers to native focus styling when unset).\n * @cssprop [--rc-segmented-button-focus-ring-offset=revert] - Segment outline offset when its\n *   radio is focus-visible (defers to native focus styling when unset).\n * @cssprop [--rc-segmented-button-disabled-opacity=revert] - Segment opacity when its radio is\n *   disabled, or when the host is `disabled` (defers to native disabled styling when unset).\n *\n * Under `forced-colors: active` the selected segment is restated in system colors\n * (`Highlight` / `HighlightText`), so a selected state stays visible even when a theme\n * paints selection with a background the forced palette replaces, and even when the\n * optional selected-icon slot is not used.\n */\nexport class RCSegmentedButton extends LitElement {\n  static override styles = segmentedButtonStyles;\n\n  private static readonly _styledRoots = new Set<Document | ShadowRoot>();\n\n  private static _ensureBaseStyles(root: Document | ShadowRoot): void {\n    if (RCSegmentedButton._styledRoots.has(root)) {\n      return;\n    }\n\n    RCSegmentedButton._styledRoots.add(root);\n\n    const style = document.createElement('style');\n\n    style.setAttribute('data-rc-light-dom-base', 'rc-segmented-button');\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 _value = '';\n  private _defaultValue = '';\n  private _valueInitialized = false;\n  private _$fieldset: HTMLFieldSetElement | null = null;\n  private _disabledOwned = false;\n  private _slotMicrotaskQueued = false;\n\n  /** Current selected radio value. Host writes are silent. */\n  @property({ type: String, reflect: true })\n  get value(): string {\n    return this._value || this._defaultValue;\n  }\n\n  set value(value: string | undefined) {\n    const oldValue = this.value;\n\n    this._value = value ?? '';\n    this._valueInitialized = true;\n    this._applyValue(false);\n    this.requestUpdate('value', oldValue);\n  }\n\n  /** Initial selected value for uncontrolled usage. */\n  @property({ type: String, attribute: 'default-value' })\n  get defaultValue(): string {\n    return this._defaultValue;\n  }\n\n  set defaultValue(value: string) {\n    const oldValue = this._defaultValue;\n\n    this._defaultValue = value;\n\n    if (!this._valueInitialized && !this._value) {\n      this._applyValue(false);\n      this.requestUpdate('value', oldValue);\n    }\n\n    this.requestUpdate('defaultValue', oldValue);\n  }\n\n  /** Mirror disabled state to the native fieldset. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Keyboard orientation. */\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    RCSegmentedButton._ensureBaseStyles(this.getRootNode() as Document | ShadowRoot);\n  }\n\n  override disconnectedCallback(): void {\n    this._$fieldset?.removeEventListener('change', this._handleChange);\n    this._$fieldset?.removeEventListener('keydown', this._handleKeyDown);\n    super.disconnectedCallback();\n  }\n\n  protected override firstUpdated(): void {\n    this._syncFieldset();\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('disabled')) {\n      this._applyDisabled();\n    }\n  }\n\n  protected override render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\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._syncFieldset();\n      }\n    });\n  }\n\n  private _syncFieldset(): void {\n    const $nextFieldset = this.querySelector<HTMLFieldSetElement>(':scope > fieldset');\n\n    if (!$nextFieldset && import.meta.env.DEV) {\n      console.warn(\n        '[rc-segmented-button] No direct child <fieldset> found. Place native radio inputs inside a fieldset.',\n        this,\n      );\n    }\n\n    if ($nextFieldset === this._$fieldset) {\n      this._syncInitialValue();\n      this._applyValue(false);\n      this._applyDisabled();\n\n      return;\n    }\n\n    this._$fieldset?.removeEventListener('change', this._handleChange);\n    this._$fieldset?.removeEventListener('keydown', this._handleKeyDown);\n    this._$fieldset = $nextFieldset;\n    this._disabledOwned = false;\n\n    if ($nextFieldset) {\n      $nextFieldset.addEventListener('change', this._handleChange);\n      $nextFieldset.addEventListener('keydown', this._handleKeyDown);\n    }\n\n    this._syncInitialValue();\n    this._applyValue(false);\n    this._applyDisabled();\n  }\n\n  private _syncInitialValue(): void {\n    if (this._valueInitialized || this._value) {\n      return;\n    }\n\n    const $checked = this._$radios.find(($radio) => $radio.checked);\n\n    if ($checked) {\n      this._value = $checked.value;\n      this._defaultValue = $checked.defaultChecked ? $checked.value : this._defaultValue;\n    }\n  }\n\n  private get _$radios(): HTMLInputElement[] {\n    if (!this._$fieldset) {\n      return [];\n    }\n\n    return Array.from(\n      this._$fieldset.querySelectorAll<HTMLInputElement>(':scope input[type=\"radio\"]'),\n    );\n  }\n\n  private _$enabledRadios(): HTMLInputElement[] {\n    return this._$radios.filter(($radio) => !$radio.disabled && !this.disabled);\n  }\n\n  private readonly _handleChange = (event: Event): void => {\n    const $target = event.target;\n\n    if (!($target instanceof HTMLInputElement) || $target.type !== 'radio' || !$target.checked) {\n      return;\n    }\n\n    const oldValue = this.value;\n\n    this._value = $target.value;\n    this._valueInitialized = true;\n    this.requestUpdate('value', oldValue);\n\n    this.dispatchEvent(\n      new CustomEvent<RCSegmentedButtonChangeDetail>('rc-segmented-button-change', {\n        bubbles: true,\n        composed: true,\n        detail: { value: this.value },\n      }),\n    );\n  };\n\n  private readonly _handleKeyDown = (event: KeyboardEvent): void => {\n    const $target = event.target;\n\n    if (!($target instanceof HTMLInputElement) || $target.type !== 'radio') {\n      return;\n    }\n\n    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {\n      return;\n    }\n\n    const forwardKeys =\n      this.orientation === 'vertical' ? ['ArrowDown'] : ['ArrowRight', 'ArrowDown'];\n    const backwardKeys = this.orientation === 'vertical' ? ['ArrowUp'] : ['ArrowLeft', 'ArrowUp'];\n    const $radios = this._$enabledRadios();\n    const currentIndex = $radios.indexOf($target);\n\n    if (currentIndex === -1) {\n      return;\n    }\n\n    let $next: HTMLInputElement | undefined;\n\n    if (forwardKeys.includes(event.key)) {\n      $next = $radios[(currentIndex + 1) % $radios.length];\n    } else if (backwardKeys.includes(event.key)) {\n      $next = $radios[(currentIndex - 1 + $radios.length) % $radios.length];\n    } else if (event.key === 'Home') {\n      $next = $radios[0];\n    } else if (event.key === 'End') {\n      $next = $radios[$radios.length - 1];\n    }\n\n    if (!$next) {\n      return;\n    }\n\n    event.preventDefault();\n    $next.focus();\n    $next.checked = true;\n    $next.dispatchEvent(new Event('change', { bubbles: true }));\n  };\n\n  private _applyValue(_writeDefault: boolean): void {\n    const $radios = this._$radios;\n    const value = this.value;\n\n    for (const $radio of $radios) {\n      $radio.checked = $radio.value === value;\n    }\n  }\n\n  private _applyDisabled(): void {\n    const $fieldset = this._$fieldset;\n\n    if (!$fieldset) {\n      return;\n    }\n\n    if (this.disabled) {\n      if (!$fieldset.disabled) {\n        this._disabledOwned = true;\n      }\n\n      $fieldset.disabled = true;\n    } else if (this._disabledOwned) {\n      $fieldset.disabled = false;\n      this._disabledOwned = false;\n    }\n  }\n}\n\nexport default RCSegmentedButton;\n"],"names":["segmentedButtonStyles","css","LIGHT_DOM_CSS","_RCSegmentedButton","_a","LitElement","event","$target","oldValue","forwardKeys","backwardKeys","$radios","currentIndex","$next","root","style","value","changed","html","$nextFieldset","$checked","$radio","_writeDefault","$fieldset","__decorateClass","property","RCSegmentedButton"],"mappings":"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"}

package/dist/rc-segmented-button-define.js

@@ -0,0 +1,3 @@
+import { R as e } from "./rc-segmented-button-BHU4o-Pr.js";
+customElements.get("rc-segmented-button") || customElements.define("rc-segmented-button", e);
+//# sourceMappingURL=rc-segmented-button-define.js.map

package/dist/rc-segmented-button-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-segmented-button-define.js","sources":["../src/define.ts"],"sourcesContent":["import RCSegmentedButton from './rc-segmented-button.js';\n\ncustomElements.get('rc-segmented-button') ||\n  customElements.define('rc-segmented-button', RCSegmentedButton);\n"],"names":["RCSegmentedButton"],"mappings":";AAEA,eAAe,IAAI,qBAAqB,KACtC,eAAe,OAAO,uBAAuBA,CAAiB;"}

package/dist/rc-segmented-button.js

@@ -0,0 +1,5 @@
+import { R as o } from "./rc-segmented-button-BHU4o-Pr.js";
+export {
+  o as RCSegmentedButton
+};
+//# sourceMappingURL=rc-segmented-button.js.map

package/dist/rc-segmented-button.js.map

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

package/dist/types/packages/rc-segmented-button/src/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/packages/rc-segmented-button/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RCSegmentedButton } from './rc-segmented-button.js';
+export type { RCSegmentedButtonChangeDetail } from './rc-segmented-button.js';

package/dist/types/packages/rc-segmented-button/src/rc-segmented-button.d.ts

@@ -0,0 +1,111 @@
+import { LitElement, PropertyValues } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-segmented-button': RCSegmentedButton;
+    }
+    interface HTMLElementEventMap {
+        'rc-segmented-button-change': CustomEvent<RCSegmentedButtonChangeDetail>;
+    }
+}
+/** Detail payload for `rc-segmented-button-change`. */
+export interface RCSegmentedButtonChangeDetail {
+    /** Current selected radio value after user interaction. */
+    value: string;
+}
+/**
+ * Segmented button group that enhances a direct native `<fieldset>` of radio inputs.
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-segmented-button rc-segmented-button docs}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/radio/ WAI-ARIA radio group pattern}
+ *
+ * @slot - A direct `<fieldset>` containing native radio inputs and labels.
+ *
+ * @fires rc-segmented-button-change - Fired after user interaction changes the selected value.
+ *
+ * @attr value - Current selected radio value. Host writes are silent.
+ * @attr default-value - Initial selected value for uncontrolled usage.
+ * @attr disabled - Mirrors disabled state to the native fieldset.
+ * @attr orientation - Keyboard orientation: `horizontal` or `vertical`.
+ *
+ * @cssprop [--rc-segmented-button-appearance] - Set to `segmented` to turn on the component's
+ *   segmented recipe: a flat fieldset, a visually hidden legend, and hidden but focusable radios.
+ *   Unset, the fieldset, legend, and radios keep their browser appearance.
+ * @cssprop [--rc-segmented-button-cursor=pointer] - Segment cursor once the segmented recipe is on.
+ * @cssprop [--rc-segmented-button-disabled-cursor=not-allowed] - Segment cursor when its radio is
+ *   disabled, or when the host is `disabled`, once the segmented recipe is on.
+ * @cssprop [--rc-segmented-button-vertical-divider] - Border on the inline-start edge of adjacent
+ *   segments in vertical orientation (defaults to the segment border).
+ * @cssprop [--rc-segmented-button-selected-icon-display=inline-grid] - Display of the selected-icon
+ *   slot. Set to `none` for a theme that shows selection without a tick.
+ * @cssprop [--rc-segmented-button-segment-gap=0.5em] - Gap between segment icon and label content.
+ * @cssprop [--rc-segmented-button-selected-icon-size=1.25em] - Reserved inline-size of the
+ *   selected-icon slot (and its opposite-side mirror spacer) — constant regardless of checked
+ *   state, so segment width doesn't change on selection.
+ * @cssprop [--rc-segmented-button-segment-min-block-size] - Minimum segment block size (defers
+ *   to native label layout when unset).
+ * @cssprop [--rc-segmented-button-segment-padding-block=revert] - Segment block-axis padding
+ *   (defers to native label padding when unset).
+ * @cssprop [--rc-segmented-button-segment-padding-inline=revert] - Segment inline-axis padding
+ *   (defers to native label padding when unset).
+ * @cssprop [--rc-segmented-button-border=revert] - Segment border (defers to native label border
+ *   when unset).
+ * @cssprop [--rc-segmented-button-color=revert] - Segment text color (defers to native label
+ *   color when unset).
+ * @cssprop [--rc-segmented-button-bg=revert] - Segment background (defers to native label
+ *   background when unset).
+ * @cssprop [--rc-segmented-button-radius=revert] - Rounded corner radius on the first and last
+ *   segments (defers to native label styling when unset).
+ * @cssprop [--rc-segmented-button-divider=revert] - Border between adjacent segments (defers to
+ *   native label styling when unset).
+ * @cssprop [--rc-segmented-button-selected-color=revert] - Segment text color when its radio is
+ *   checked (defers to native label color when unset).
+ * @cssprop [--rc-segmented-button-selected-bg=revert] - Segment background when its radio is
+ *   checked (defers to native label background when unset).
+ * @cssprop [--rc-segmented-button-focus-ring=revert] - Segment outline when its radio is
+ *   focus-visible (defers to native focus styling when unset).
+ * @cssprop [--rc-segmented-button-focus-ring-offset=revert] - Segment outline offset when its
+ *   radio is focus-visible (defers to native focus styling when unset).
+ * @cssprop [--rc-segmented-button-disabled-opacity=revert] - Segment opacity when its radio is
+ *   disabled, or when the host is `disabled` (defers to native disabled styling when unset).
+ *
+ * Under `forced-colors: active` the selected segment is restated in system colors
+ * (`Highlight` / `HighlightText`), so a selected state stays visible even when a theme
+ * paints selection with a background the forced palette replaces, and even when the
+ * optional selected-icon slot is not used.
+ */
+export declare class RCSegmentedButton extends LitElement {
+    static styles: import('lit').CSSResult;
+    private static readonly _styledRoots;
+    private static _ensureBaseStyles;
+    private _value;
+    private _defaultValue;
+    private _valueInitialized;
+    private _$fieldset;
+    private _disabledOwned;
+    private _slotMicrotaskQueued;
+    /** Current selected radio value. Host writes are silent. */
+    get value(): string;
+    set value(value: string | undefined);
+    /** Initial selected value for uncontrolled usage. */
+    get defaultValue(): string;
+    set defaultValue(value: string);
+    /** Mirror disabled state to the native fieldset. */
+    disabled: boolean;
+    /** Keyboard orientation. */
+    orientation: 'horizontal' | 'vertical';
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): import('lit').TemplateResult<1>;
+    private _handleSlotChange;
+    private _syncFieldset;
+    private _syncInitialValue;
+    private get _$radios();
+    private _$enabledRadios;
+    private readonly _handleChange;
+    private readonly _handleKeyDown;
+    private _applyValue;
+    private _applyDisabled;
+}
+export default RCSegmentedButton;

package/dist/types/packages/rc-segmented-button/src/rc-segmented-button.styles.d.ts

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

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@rcarls/rc-segmented-button",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.0.0-next-20260921045401",
+  "description": "Segmented button group backed by native radio inputs.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-segmented-button"
+  },
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-segmented-button",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-segmented-button.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-segmented-button/src/index.d.ts",
+        "default": "./dist/rc-segmented-button.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-segmented-button/src/define.d.ts",
+        "default": "./dist/rc-segmented-button-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-segmented-button/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-segmented-button-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"
+  },
+  "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"
+  }
+}