luxen-ui 0.16.2 → 0.17.0

package/dist/custom-elements.json

@@ -6041,6 +6041,216 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/segmented-control/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/segmented-control/segmented-control.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/segmented-control/segmented-control.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Fired when the selected segment changes. Bubbles; not composed.",
+          "name": "SegmentChangeEvent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true,
+              "default": "value"
+            },
+            {
+              "kind": "field",
+              "name": "index",
+              "type": {
+                "text": "number"
+              },
+              "readonly": true,
+              "default": "index"
+            }
+          ],
+          "superclass": {
+            "name": "Event",
+            "module": "src/html/elements/segmented-control/segmented-control.ts"
+          }
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SegmentedControl",
+          "cssProperties": [
+            {
+              "description": "Background of the sliding pill behind the selected segment.",
+              "name": "--indicator-color",
+              "default": "var(--l-color-surface)"
+            },
+            {
+              "description": "Corner radius of the track.",
+              "name": "--border-radius",
+              "default": "var(--l-radius-lg)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Value of the selected segment (its `value` attribute, else its index).",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "SegmentedControlSize"
+              },
+              "default": "'md'",
+              "description": "Control height, aligned with buttons and form controls at the same size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Accessible label announced for the group. Not displayed on screen.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stretch segments to fill the container width.",
+              "attribute": "full-width",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "mode",
+                  "type": {
+                    "text": "'restore' | 'autocomplete'"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "description": "Fired when the selected segment changes. Not cancelable. Bubbles. Properties: `value: string`, `index: number`.",
+              "cancelable": false
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Value of the selected segment (its `value` attribute, else its index).",
+              "fieldName": "value"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "SegmentedControlSize"
+              },
+              "default": "'md'",
+              "description": "Control height, aligned with buttons and form controls at the same size.",
+              "fieldName": "size"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Accessible label announced for the group. Not displayed on screen.",
+              "fieldName": "label"
+            },
+            {
+              "name": "full-width",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Stretch segments to fill the container width.",
+              "fieldName": "fullWidth"
+            }
+          ],
+          "superclass": {
+            "name": "LuxenFormAssociatedElement",
+            "module": "/src/html/shared/luxen-form-associated-element.js"
+          },
+          "tagName": "l-segmented-control",
+          "customElement": true,
+          "summary": "A single-select segmented control: a compact, mutually-exclusive\nswitch between a few options (radio-group semantics with a sliding pill).\nProgressively enhances light-DOM `<button>`s so it works before JS runs.\nForm-associated: give it a `name` and its selected `value` is submitted with\nthe form (and restored on reset), like a native radio group.",
+          "examples": [
+            {
+              "title": "Mark the initially-selected segment with `aria-checked=\"true\"` (or set",
+              "language": "html",
+              "code": "`value` to its `value` attribute) so it is styled before the script upgrades\nthe element.\n```html\n<l-segmented-control label=\"Metric\" value=\"cost\">\n  <button value=\"volume\">Volume</button>\n  <button value=\"cost\" aria-checked=\"true\">Cost</button>\n</l-segmented-control>\n```"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SegmentChangeEvent",
+          "declaration": {
+            "name": "SegmentChangeEvent",
+            "module": "src/html/elements/segmented-control/segmented-control.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SegmentedControl",
+          "declaration": {
+            "name": "SegmentedControl",
+            "module": "src/html/elements/segmented-control/segmented-control.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/select/index.ts",

package/dist/elements/avatar/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAqB7D;;;;;;;;;;;;GAYG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,qFAAqF;IAErF,GAAG,SAAM;IAET,6EAA6E;IAE7E,IAAI,SAAM;IAEV,8DAA8D;IAE9D,IAAI,SAAQ;IAEZ,4DAA4D;IAE5D,KAAK,SAAK;IAEV,+DAA+D;IAE/D,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAOjB,OAAO;IAgBP,OAAO,KAAK,IAAI,GAEf;IAED,MAAM;IAkCN,OAAO,CAAC,QAAQ,CAEd;CACH"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/html/elements/avatar/avatar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AA0C7D;;;;;;;;;;;;GAYG;AACH,qBAAa,MAAO,SAAQ,YAAY;IACtC,MAAM,CAAC,MAAM,4BAAwB;IAErC,qFAAqF;IAErF,GAAG,SAAM;IAET,6EAA6E;IAE7E,IAAI,SAAM;IAEV,8DAA8D;IAE9D,IAAI,SAAQ;IAEZ,4DAA4D;IAE5D,KAAK,SAAK;IAEV,+DAA+D;IAE/D,WAAW,UAAS;IAEX,OAAO,CAAC,SAAS,CAAS;IAEnC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxC,iBAAiB;IAOjB,OAAO;IAgBP,OAAO,KAAK,IAAI,GAEf;IAED,MAAM;IAkCN,OAAO,CAAC,QAAQ,CAEd;CACH"}

package/dist/elements/avatar/avatar.js

@@ -11,13 +11,33 @@ import { property, state } from 'lit/decorators.js';
 import hostStyles from '../../shared/styles/host.styles.js';
 import rawStyles from './avatar.css?inline';
 const styles = unsafeCSS(rawStyles);
-function getInitials(name) {
-    return name
-        .match(/(\b\S)?/g)
-        .join('')
-        .match(/(^\S|\S$)?/g)
-        .join('')
-        .toUpperCase();
+/**
+ * Extracts up to two uppercase initials from a name: the first letter of the
+ * first word, plus the first letter of the last word when there is more than one.
+ *
+ * Splits on whitespace rather than relying on a `\b`/`\w` regex, which only
+ * recognises ASCII and mangles accented or non-ASCII names.
+ *
+ * @param name - The name to extract initials from. Defaults to an empty string.
+ * @return The uppercased initials, or an empty string when `name` is blank.
+ *
+ * @example getInitials('John Doe')            // 'JD'
+ * @example getInitials('Markus Nösterer')     // 'MN'  (accents preserved)
+ * @example getInitials('Cher')                // 'C'   (single word → one initial)
+ * @example getInitials('  John   Doe  ')      // 'JD'  (extra whitespace ignored)
+ * @example getInitials('')                    // ''
+ */
+function getInitials(name = '') {
+    const words = name.normalize('NFC').trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return '';
+    // Spreading iterates by code point, so an accented letter (or an astral
+    // character like an emoji) is taken whole instead of a broken half.
+    // oxlint-disable-next-line typescript/no-misused-spread -- code-point-safe first char is the intent
+    const firstLetter = (word) => [...word][0];
+    const first = firstLetter(words[0]);
+    const last = words.length > 1 ? firstLetter(words[words.length - 1]) : '';
+    return (first + last).toUpperCase();
 }
 const defaultIcon = svg `<svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
   <path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />

package/dist/elements/segmented-control/index.d.ts

@@ -0,0 +1,2 @@
+export * from './segmented-control.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/segmented-control/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/html/elements/segmented-control/index.ts"],"names":[],"mappings":"AAEA,cAAc,wBAAwB,CAAC"}

package/dist/elements/segmented-control/index.js

@@ -0,0 +1,4 @@
+import { define } from '../../define.js';
+import { SegmentedControl } from './segmented-control.js';
+export * from './segmented-control.js';
+define('segmented-control', SegmentedControl);

package/dist/elements/segmented-control/segmented-control.d.ts

@@ -0,0 +1,80 @@
+import { LuxenFormAssociatedElement } from '../../shared/luxen-form-associated-element.js';
+export type SegmentedControlSize = 'sm' | 'md' | 'lg' | 'xl';
+/** Fired when the selected segment changes. Bubbles; not composed. */
+export declare class SegmentChangeEvent extends Event {
+    readonly value: string;
+    readonly index: number;
+    constructor(value: string, index: number);
+}
+interface SegmentedControlEventMap {
+    change: SegmentChangeEvent;
+}
+/**
+ * @summary A single-select segmented control: a compact, mutually-exclusive
+ * switch between a few options (radio-group semantics with a sliding pill).
+ * Progressively enhances light-DOM `<button>`s so it works before JS runs.
+ * Form-associated: give it a `name` and its selected `value` is submitted with
+ * the form (and restored on reset), like a native radio group.
+ *
+ * @example
+ * Mark the initially-selected segment with `aria-checked="true"` (or set
+ * `value` to its `value` attribute) so it is styled before the script upgrades
+ * the element.
+ * ```html
+ * <l-segmented-control label="Metric" value="cost">
+ *   <button value="volume">Volume</button>
+ *   <button value="cost" aria-checked="true">Cost</button>
+ * </l-segmented-control>
+ * ```
+ *
+ * @event change - Fired when the selected segment changes. Not cancelable. Bubbles. Properties: `value: string`, `index: number`.
+ *
+ * @cssproperty [--indicator-color=var(--l-color-surface)] - Background of the sliding pill behind the selected segment.
+ * @cssproperty [--border-radius=var(--l-radius-lg)] - Corner radius of the track.
+ *
+ * @customElement l-segmented-control
+ */
+export declare class SegmentedControl extends LuxenFormAssociatedElement {
+    createRenderRoot(): this;
+    private _initialized;
+    private _setupTimer;
+    private _buttons;
+    private _resizeObserver;
+    /** Value of the selected segment (its `value` attribute, else its index). */
+    value: string;
+    /** Control height, aligned with buttons and form controls at the same size. */
+    size: SegmentedControlSize;
+    /** Accessible label announced for the group. Not displayed on screen. */
+    label?: string;
+    /** Stretch segments to fill the container width. */
+    fullWidth: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @returns true when setup ran or was already done; false to schedule a retry. */
+    private _trySetup;
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string, mode: 'restore' | 'autocomplete'): void;
+    private _setup;
+    private _teardown;
+    /** Resolve the selected index from `value`, else an authored `aria-checked`, else 0. */
+    private _resolveActiveIndex;
+    private _syncValueFromIndex;
+    private _select;
+    /** Index of the next non-disabled segment from `from`, moving by `dir`, wrapping. */
+    private _nextEnabled;
+    private _isDisabled;
+    /** Reflect the host `disabled` state onto the segments (aria + tab order). */
+    private _applyDisabledState;
+    private _updateIndicator;
+    private _onClick;
+    private _onKeyDown;
+}
+export interface SegmentedControl {
+    addEventListener<K extends keyof SegmentedControlEventMap>(type: K, listener: (this: SegmentedControl, ev: SegmentedControlEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof SegmentedControlEventMap>(type: K, listener: (this: SegmentedControl, ev: SegmentedControlEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export {};
+//# sourceMappingURL=segmented-control.d.ts.map

package/dist/elements/segmented-control/segmented-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/html/elements/segmented-control/segmented-control.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAE3F,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7D,sEAAsE;AACtE,qBAAa,kBAAmB,SAAQ,KAAK;IAC3C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;gBACX,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;CAKzC;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,kBAAkB,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,qBAAa,gBAAiB,SAAQ,0BAA0B;IACrD,gBAAgB;IAIzB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,eAAe,CAA+B;IAEtD,6EAA6E;IAE7E,KAAK,SAAM;IAEX,+EAA+E;IAE/E,IAAI,EAAE,oBAAoB,CAAQ;IAElC,yEAAyE;IAEzE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oDAAoD;IAEpD,SAAS,UAAS;IAIT,iBAAiB;IAUjB,oBAAoB;IAM7B,mFAAmF;IACnF,OAAO,CAAC,SAAS;IAOR,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAsBrC,iBAAiB;IAMjB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,cAAc;IAOjF,OAAO,CAAC,MAAM;IAoDd,OAAO,CAAC,SAAS;IAUjB,wFAAwF;IACxF,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,OAAO;IAuBf,qFAAqF;IACrF,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,WAAW;IAInB,8EAA8E;IAC9E,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,QAAQ,CAQd;IAKF,OAAO,CAAC,UAAU,CAkChB;CACH;AAQD,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EACvD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,mBAAmB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EAC1D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IACR,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT"}

package/dist/elements/segmented-control/segmented-control.js

@@ -0,0 +1,307 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { property } from 'lit/decorators.js';
+import { LuxenFormAssociatedElement } from '../../shared/luxen-form-associated-element.js';
+/** Fired when the selected segment changes. Bubbles; not composed. */
+export class SegmentChangeEvent extends Event {
+    constructor(value, index) {
+        super('change', { bubbles: true, composed: false, cancelable: false });
+        this.value = value;
+        this.index = index;
+    }
+}
+/**
+ * @summary A single-select segmented control: a compact, mutually-exclusive
+ * switch between a few options (radio-group semantics with a sliding pill).
+ * Progressively enhances light-DOM `<button>`s so it works before JS runs.
+ * Form-associated: give it a `name` and its selected `value` is submitted with
+ * the form (and restored on reset), like a native radio group.
+ *
+ * @example
+ * Mark the initially-selected segment with `aria-checked="true"` (or set
+ * `value` to its `value` attribute) so it is styled before the script upgrades
+ * the element.
+ * ```html
+ * <l-segmented-control label="Metric" value="cost">
+ *   <button value="volume">Volume</button>
+ *   <button value="cost" aria-checked="true">Cost</button>
+ * </l-segmented-control>
+ * ```
+ *
+ * @event change - Fired when the selected segment changes. Not cancelable. Bubbles. Properties: `value: string`, `index: number`.
+ *
+ * @cssproperty [--indicator-color=var(--l-color-surface)] - Background of the sliding pill behind the selected segment.
+ * @cssproperty [--border-radius=var(--l-radius-lg)] - Corner radius of the track.
+ *
+ * @customElement l-segmented-control
+ */
+// oxlint-disable-next-line typescript/no-unsafe-declaration-merging -- typed addEventListener overloads merged below; no uninitialized properties.
+export class SegmentedControl extends LuxenFormAssociatedElement {
+    constructor() {
+        super(...arguments);
+        this._initialized = false;
+        this._setupTimer = 0;
+        this._buttons = [];
+        this._resizeObserver = null;
+        /** Value of the selected segment (its `value` attribute, else its index). */
+        this.value = '';
+        /** Control height, aligned with buttons and form controls at the same size. */
+        this.size = 'md';
+        /** Stretch segments to fill the container width. */
+        this.fullWidth = false;
+        // --- Event handlers ---
+        this._onClick = (e) => {
+            if (this.disabled)
+                return;
+            const btn = e.target.closest('button');
+            if (!btn)
+                return;
+            const index = this._buttons.indexOf(btn);
+            if (index < 0 || this._isDisabled(btn))
+                return;
+            this._select(index);
+            btn.focus();
+        };
+        // Typed `Event` (not `KeyboardEvent`): the listener is attached to `this`,
+        // whose merged addEventListener overloads (see the interface below) fall back
+        // to the platform `EventListener` signature for non-map events like `keydown`.
+        this._onKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            const ke = e;
+            const target = e.target;
+            if (target.getAttribute('role') !== 'radio')
+                return;
+            const current = this._buttons.indexOf(target);
+            if (current < 0)
+                return;
+            let next = current;
+            switch (ke.key) {
+                case 'ArrowRight':
+                case 'ArrowDown':
+                    next = this._nextEnabled(current, 1);
+                    break;
+                case 'ArrowLeft':
+                case 'ArrowUp':
+                    next = this._nextEnabled(current, -1);
+                    break;
+                case 'Home':
+                    next = this._nextEnabled(-1, 1);
+                    break;
+                case 'End':
+                    next = this._nextEnabled(this._buttons.length, -1);
+                    break;
+                case ' ':
+                    // Space (re)selects the focused segment (APG radio group).
+                    break;
+                default:
+                    return;
+            }
+            e.preventDefault();
+            this._select(next);
+            this._buttons[next].focus();
+        };
+    }
+    createRenderRoot() {
+        return this;
+    }
+    // --- Lifecycle ---
+    connectedCallback() {
+        super.connectedCallback();
+        // Children may not be parsed yet when the element upgrades mid-parse: try
+        // synchronously, then retry once on a macrotask. setTimeout, not rAF — rAF
+        // is suspended in hidden documents, so the element would stay inert there.
+        if (!this._trySetup()) {
+            this._setupTimer = window.setTimeout(() => this._trySetup(), 0);
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearTimeout(this._setupTimer);
+        this._teardown();
+    }
+    /** @returns true when setup ran or was already done; false to schedule a retry. */
+    _trySetup() {
+        if (this._initialized || !this.isConnected)
+            return true;
+        if (this.querySelectorAll('button').length < 2)
+            return false;
+        this._setup();
+        return true;
+    }
+    updated(changed) {
+        if (!this._initialized)
+            return;
+        if (changed.has('value')) {
+            this._select(this._resolveActiveIndex(), false);
+        }
+        if (changed.has('size')) {
+            this._updateIndicator();
+        }
+        if (changed.has('label')) {
+            if (this.label) {
+                this.setAttribute('aria-label', this.label);
+            }
+            else {
+                this.removeAttribute('aria-label');
+            }
+        }
+        if (changed.has('disabled')) {
+            this._applyDisabledState();
+        }
+    }
+    // --- Form lifecycle ---
+    formResetCallback() {
+        // Restoring `value` re-selects the default segment via `updated()`.
+        this.value = this._defaultFormValue;
+        super.formResetCallback();
+    }
+    formStateRestoreCallback(state, mode) {
+        this.value = state;
+        super.formStateRestoreCallback(state, mode);
+    }
+    // --- Setup / Teardown ---
+    _setup() {
+        this._buttons = Array.from(this.querySelectorAll('button'));
+        if (this._buttons.length < 2)
+            return;
+        this._initialized = true;
+        this.setAttribute('role', 'radiogroup');
+        if (this.label)
+            this.setAttribute('aria-label', this.label);
+        const activeIndex = this._resolveActiveIndex();
+        for (let i = 0; i < this._buttons.length; i++) {
+            const btn = this._buttons[i];
+            // Force type=button so a segment never submits the enclosing form.
+            btn.type = 'button';
+            btn.setAttribute('role', 'radio');
+            btn.setAttribute('aria-checked', String(i === activeIndex));
+            btn.setAttribute('tabindex', i === activeIndex ? '0' : '-1');
+            // A segment with no visible text is icon-only: square it and require an
+            // accessible name (the icon itself is decorative to assistive tech).
+            if ((btn.textContent ?? '').trim() === '') {
+                btn.setAttribute('data-icon-only', '');
+                if (!btn.hasAttribute('aria-label') && !btn.hasAttribute('aria-labelledby')) {
+                    // eslint-disable-next-line no-console
+                    console.warn(`<${this.localName}>: icon-only segment #${i} has no accessible name; add aria-label.`);
+                }
+            }
+        }
+        this.addEventListener('click', this._onClick);
+        this.addEventListener('keydown', this._onKeyDown);
+        // Reflect a whole-control `disabled` onto the segments (aria + tab order).
+        this._applyDisabledState();
+        // Canonicalize `value` to the active segment now that roles are set, and
+        // seed the form value (the value a form reset restores to).
+        this._syncValueFromIndex(activeIndex);
+        this._defaultFormValue = this.value;
+        this._syncFormValue(this.value);
+        // Initial pill position. Synchronous first (offset reads force layout),
+        // then a ResizeObserver keeps it correct across hidden→visible transitions
+        // and size changes — rAF is suspended in hidden documents, so it must not
+        // be the only scheduling mechanism.
+        this._updateIndicator();
+        this._resizeObserver = new ResizeObserver(() => this._updateIndicator());
+        this._resizeObserver.observe(this);
+    }
+    _teardown() {
+        this.removeEventListener('click', this._onClick);
+        this.removeEventListener('keydown', this._onKeyDown);
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+        this._initialized = false;
+    }
+    // --- Selection ---
+    /** Resolve the selected index from `value`, else an authored `aria-checked`, else 0. */
+    _resolveActiveIndex() {
+        const { _buttons } = this;
+        if (this.value !== '') {
+            const byValue = _buttons.findIndex((b) => (b.getAttribute('value') ?? '') === this.value);
+            if (byValue >= 0)
+                return byValue;
+            const asIndex = Number(this.value);
+            if (Number.isInteger(asIndex) && asIndex >= 0 && asIndex < _buttons.length)
+                return asIndex;
+        }
+        const checked = _buttons.findIndex((b) => b.getAttribute('aria-checked') === 'true');
+        if (checked >= 0)
+            return checked;
+        // No explicit selection: default to the first enabled segment (else 0).
+        const firstEnabled = _buttons.findIndex((b) => !this._isDisabled(b));
+        return firstEnabled >= 0 ? firstEnabled : 0;
+    }
+    _syncValueFromIndex(index) {
+        this.value = this._buttons[index]?.getAttribute('value') ?? String(index);
+    }
+    _select(index, emitEvent = true) {
+        if (index < 0 || index >= this._buttons.length)
+            return;
+        // Whether this is an actual change — re-selecting the current segment must
+        // not re-fire `change` (matches native radio / `<select>`).
+        const changed = this._buttons[index].getAttribute('aria-checked') !== 'true';
+        for (let i = 0; i < this._buttons.length; i++) {
+            const isActive = i === index;
+            this._buttons[i].setAttribute('aria-checked', String(isActive));
+            // Disabled control keeps every segment out of the tab order.
+            this._buttons[i].setAttribute('tabindex', isActive && !this.disabled ? '0' : '-1');
+        }
+        this._syncValueFromIndex(index);
+        this._syncFormValue(this.value);
+        this._updateIndicator();
+        if (emitEvent && changed) {
+            this.hasInteracted = true;
+            this.dispatchEvent(new SegmentChangeEvent(this.value, index));
+        }
+    }
+    /** Index of the next non-disabled segment from `from`, moving by `dir`, wrapping. */
+    _nextEnabled(from, dir) {
+        const len = this._buttons.length;
+        for (let step = 1; step <= len; step++) {
+            const i = (from + dir * step + len * step) % len;
+            if (!this._isDisabled(this._buttons[i]))
+                return i;
+        }
+        return from;
+    }
+    _isDisabled(btn) {
+        return btn.disabled || btn.getAttribute('aria-disabled') === 'true';
+    }
+    /** Reflect the host `disabled` state onto the segments (aria + tab order). */
+    _applyDisabledState() {
+        for (const btn of this._buttons) {
+            if (this.disabled) {
+                btn.setAttribute('aria-disabled', 'true');
+                btn.setAttribute('tabindex', '-1');
+            }
+            else {
+                btn.removeAttribute('aria-disabled');
+                // Restore the roving tabindex (only the selected segment is tabbable).
+                btn.setAttribute('tabindex', btn.getAttribute('aria-checked') === 'true' ? '0' : '-1');
+            }
+        }
+    }
+    // --- Indicator ---
+    _updateIndicator() {
+        const active = this._buttons.find((b) => b.getAttribute('aria-checked') === 'true');
+        if (!active)
+            return;
+        this.style.setProperty('--_indicator-left', `${active.offsetLeft}px`);
+        this.style.setProperty('--_indicator-width', `${active.offsetWidth}px`);
+    }
+}
+__decorate([
+    property({ reflect: true })
+], SegmentedControl.prototype, "value", void 0);
+__decorate([
+    property({ reflect: true })
+], SegmentedControl.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], SegmentedControl.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], SegmentedControl.prototype, "fullWidth", void 0);