@rcarls/rc-segmented-button 0.4.0

package/README.md

@@ -0,0 +1,16 @@
+# @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.

package/dist/custom-elements.json

@@ -0,0 +1,410 @@
+{
+  "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": "Gap between segment icon and label content (defers to native label layout when unset).",
+              "name": "--rc-segmented-button-segment-gap"
+            },
+            {
+              "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).",
+              "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-define.js

@@ -0,0 +1,3 @@
+import { R as e } from "./rc-segmented-button-ixogzL_a.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-ixogzL_a.js

@@ -0,0 +1,241 @@
+import { css as b, LitElement as v, html as g } from "lit";
+import { property as o } from "lit/decorators.js";
+const h = b`
+  :host {
+    display: inline-block;
+    color-scheme: inherit;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+`;
+var f = Object.defineProperty, p = Object.getOwnPropertyDescriptor, u = (c, e, t, n) => {
+  for (var s = n > 1 ? void 0 : n ? p(e, t) : e, r = c.length - 1, d; r >= 0; r--)
+    (d = c[r]) && (s = (n ? d(e, t, s) : d(s)) || s);
+  return n && s && f(e, t, s), s;
+};
+const m = `
+@layer rc-base {
+  rc-segmented-button > fieldset {
+    display: var(--_rc-segmented-button-fieldset-display, revert);
+    margin: var(--_rc-segmented-button-fieldset-margin, revert);
+    padding: var(--_rc-segmented-button-fieldset-padding, revert);
+    border: var(--_rc-segmented-button-fieldset-border, revert);
+    border-radius: var(--_rc-segmented-button-fieldset-radius, revert);
+    overflow: var(--_rc-segmented-button-fieldset-overflow, revert);
+  }
+
+  rc-segmented-button[orientation='vertical'] > fieldset {
+    flex-direction: column;
+  }
+
+  rc-segmented-button > fieldset > legend {
+    position: var(--_rc-segmented-button-legend-position, revert);
+    inline-size: var(--_rc-segmented-button-legend-inline-size, revert);
+    block-size: var(--_rc-segmented-button-legend-block-size, revert);
+    margin: var(--_rc-segmented-button-legend-margin, revert);
+    padding: var(--_rc-segmented-button-legend-padding, revert);
+    border: var(--_rc-segmented-button-legend-border, revert);
+    overflow: var(--_rc-segmented-button-legend-overflow, revert);
+    clip: var(--_rc-segmented-button-legend-clip, revert);
+    white-space: var(--_rc-segmented-button-legend-white-space, revert);
+  }
+
+  rc-segmented-button > fieldset > label {
+    display: var(--_rc-segmented-button-segment-display, revert);
+    align-items: center;
+    justify-content: center;
+    gap: var(--rc-segmented-button-segment-gap);
+    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);
+    cursor: var(--_rc-segmented-button-segment-cursor, revert);
+    user-select: var(--_rc-segmented-button-segment-user-select, 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-inline-start: var(--_rc-segmented-button-vertical-border-inline-start, revert);
+    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);
+    cursor: var(--_rc-segmented-button-disabled-cursor, revert);
+  }
+
+  rc-segmented-button > fieldset > label > input[type='radio'] {
+    position: var(--_rc-segmented-button-radio-position, revert);
+    inline-size: var(--_rc-segmented-button-radio-inline-size, revert);
+    block-size: var(--_rc-segmented-button-radio-block-size, revert);
+    margin: var(--_rc-segmented-button-radio-margin, revert);
+    opacity: var(--_rc-segmented-button-radio-opacity, revert);
+    pointer-events: var(--_rc-segmented-button-radio-pointer-events, revert);
+  }
+
+  rc-segmented-button > fieldset > label > [data-rc-segmented-button-selected-icon] {
+    display: none;
+  }
+
+  rc-segmented-button > fieldset > label:has(input[type='radio']:checked) > [data-rc-segmented-button-selected-icon] {
+    display: var(--_rc-segmented-button-selected-icon-display, none);
+    place-items: center;
+  }
+}
+`;
+var i;
+const l = (i = class extends v {
+  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 n = this.value;
+      this._value = t.value, this._valueInitialized = !0, this.requestUpdate("value", n), 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 n = this.orientation === "vertical" ? ["ArrowDown"] : ["ArrowRight", "ArrowDown"], s = this.orientation === "vertical" ? ["ArrowUp"] : ["ArrowLeft", "ArrowUp"], r = this._$enabledRadios(), d = r.indexOf(t);
+      if (d === -1)
+        return;
+      let a;
+      n.includes(e.key) ? a = r[(d + 1) % r.length] : s.includes(e.key) ? a = r[(d - 1 + r.length) % r.length] : e.key === "Home" ? a = r[0] : e.key === "End" && (a = r[r.length - 1]), a && (e.preventDefault(), a.focus(), a.checked = !0, a.dispatchEvent(new Event("change", { bubbles: !0 })));
+    };
+  }
+  static _ensureBaseStyles(e) {
+    if (i._styledRoots.has(e))
+      return;
+    i._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(), i._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 g`<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, n = this.value;
+    for (const s of t)
+      s.checked = s.value === n;
+  }
+  _applyDisabled() {
+    const e = this._$fieldset;
+    e && (this.disabled ? (e.disabled || (this._disabledOwned = !0), e.disabled = !0) : this._disabledOwned && (e.disabled = !1, this._disabledOwned = !1));
+  }
+}, i.styles = h, i._styledRoots = /* @__PURE__ */ new Set(), i);
+u([
+  o({ type: String, reflect: !0 })
+], l.prototype, "value", 1);
+u([
+  o({ type: String, attribute: "default-value" })
+], l.prototype, "defaultValue", 1);
+u([
+  o({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+u([
+  o({ type: String, reflect: !0 })
+], l.prototype, "orientation", 2);
+let w = l;
+export {
+  w as R
+};
+//# sourceMappingURL=rc-segmented-button-ixogzL_a.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rc-segmented-button-ixogzL_a.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  rc-segmented-button > fieldset {\n    display: var(--_rc-segmented-button-fieldset-display, revert);\n    margin: var(--_rc-segmented-button-fieldset-margin, revert);\n    padding: var(--_rc-segmented-button-fieldset-padding, revert);\n    border: var(--_rc-segmented-button-fieldset-border, revert);\n    border-radius: var(--_rc-segmented-button-fieldset-radius, revert);\n    overflow: var(--_rc-segmented-button-fieldset-overflow, revert);\n  }\n\n  rc-segmented-button[orientation='vertical'] > fieldset {\n    flex-direction: column;\n  }\n\n  rc-segmented-button > fieldset > legend {\n    position: var(--_rc-segmented-button-legend-position, revert);\n    inline-size: var(--_rc-segmented-button-legend-inline-size, revert);\n    block-size: var(--_rc-segmented-button-legend-block-size, revert);\n    margin: var(--_rc-segmented-button-legend-margin, revert);\n    padding: var(--_rc-segmented-button-legend-padding, revert);\n    border: var(--_rc-segmented-button-legend-border, revert);\n    overflow: var(--_rc-segmented-button-legend-overflow, revert);\n    clip: var(--_rc-segmented-button-legend-clip, revert);\n    white-space: var(--_rc-segmented-button-legend-white-space, revert);\n  }\n\n  rc-segmented-button > fieldset > label {\n    display: var(--_rc-segmented-button-segment-display, revert);\n    align-items: center;\n    justify-content: center;\n    gap: var(--rc-segmented-button-segment-gap);\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    cursor: var(--_rc-segmented-button-segment-cursor, revert);\n    user-select: var(--_rc-segmented-button-segment-user-select, 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-inline-start: var(--_rc-segmented-button-vertical-border-inline-start, revert);\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    cursor: var(--_rc-segmented-button-disabled-cursor, revert);\n  }\n\n  rc-segmented-button > fieldset > label > input[type='radio'] {\n    position: var(--_rc-segmented-button-radio-position, revert);\n    inline-size: var(--_rc-segmented-button-radio-inline-size, revert);\n    block-size: var(--_rc-segmented-button-radio-block-size, revert);\n    margin: var(--_rc-segmented-button-radio-margin, revert);\n    opacity: var(--_rc-segmented-button-radio-opacity, revert);\n    pointer-events: var(--_rc-segmented-button-radio-pointer-events, revert);\n  }\n\n  rc-segmented-button > fieldset > label > [data-rc-segmented-button-selected-icon] {\n    display: none;\n  }\n\n  rc-segmented-button > fieldset > label:has(input[type='radio']:checked) > [data-rc-segmented-button-selected-icon] {\n    display: var(--_rc-segmented-button-selected-icon-display, none);\n    place-items: center;\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-segment-gap] - Gap between segment icon and label content\n *   (defers to native label layout when unset).\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 */\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.js

@@ -0,0 +1,5 @@
+import { R as o } from "./rc-segmented-button-ixogzL_a.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,94 @@
+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-segment-gap] - Gap between segment icon and label content
+ *   (defers to native label layout when unset).
+ * @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).
+ */
+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.4.0",
+  "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"
+  }
+}