luxen-ui 0.16.2 → 0.17.1

package/dist/elements/dropdown-item/dropdown-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown-item/dropdown-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAU7D;;;;;;;;;;;;;GAaG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,gBAAgB,CAIrB;IAEH,2CAA2C;IAE3C,QAAQ,CAAC,KAAK,SAAM;IAEpB,yBAAyB;IAEzB,QAAQ,CAAC,QAAQ,UAAS;IAE1B,gDAAgD;IAEhD,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEhD,4CAA4C;IAE5C,QAAQ,CAAC,OAAO,UAAS;IAEzB,+EAA+E;IAE/E,QAAQ,CAAC,WAAW,UAAS;IAG7B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAS;IAErC,2DAA2D;IAC3D,IAAI,UAAU,IAAI,OAAO,CAExB;IAEQ,iBAAiB;IAU1B,OAAO,KAAK,UAAU,GAErB;IAED,2EAA2E;IAC3E,YAAY,IAAI,MAAM;IAUtB,uFAAuF;IACvF,eAAe,IAAI,YAAY,EAAE;IAQjC,oEAAoE;IACpE,WAAW;IAKX,4EAA4E;IAC5E,YAAY;IAKH,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAM9C,OAAO,CAAC,YAAY;YAKN,wBAAwB;IA2BtC,OAAO,CAAC,oBAAoB,CAK1B;IAEO,MAAM;CAiEhB"}
+{"version":3,"file":"dropdown-item.d.ts","sourceRoot":"","sources":["../../../src/html/elements/dropdown-item/dropdown-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAU7D;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAa,SAAQ,YAAY;IAC5C,OAAgB,MAAM,4BAAwB;IAE9C,OAAO,CAAC,gBAAgB,CAIrB;IAEH,2CAA2C;IAE3C,QAAQ,CAAC,KAAK,SAAM;IAEpB,yBAAyB;IAEzB,QAAQ,CAAC,QAAQ,UAAS;IAE1B,gDAAgD;IAEhD,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEhD,wEAAwE;IAExE,QAAQ,CAAC,OAAO,EAAE,aAAa,GAAG,SAAS,CAAa;IAExD,4CAA4C;IAE5C,QAAQ,CAAC,OAAO,UAAS;IAEzB,+EAA+E;IAE/E,QAAQ,CAAC,WAAW,UAAS;IAG7B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAS;IAErC,2DAA2D;IAC3D,IAAI,UAAU,IAAI,OAAO,CAExB;IAEQ,iBAAiB;IAU1B,OAAO,KAAK,UAAU,GAErB;IAED,2EAA2E;IAC3E,YAAY,IAAI,MAAM;IAUtB,uFAAuF;IACvF,eAAe,IAAI,YAAY,EAAE;IAQjC,oEAAoE;IACpE,WAAW;IAKX,4EAA4E;IAC5E,YAAY;IAKH,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAM9C,OAAO,CAAC,YAAY;YAKN,wBAAwB;IA2BtC,OAAO,CAAC,oBAAoB,CAK1B;IAEO,MAAM;CAiEhB"}

package/dist/elements/dropdown-item/dropdown-item.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _DropdownItem_value_accessor_storage, _DropdownItem_disabled_accessor_storage, _DropdownItem_type_accessor_storage, _DropdownItem_checked_accessor_storage, _DropdownItem_submenuOpen_accessor_storage, _DropdownItem__hasSubmenu_accessor_storage;
+var _DropdownItem_value_accessor_storage, _DropdownItem_disabled_accessor_storage, _DropdownItem_type_accessor_storage, _DropdownItem_variant_accessor_storage, _DropdownItem_checked_accessor_storage, _DropdownItem_submenuOpen_accessor_storage, _DropdownItem__hasSubmenu_accessor_storage;
 import { html, nothing, unsafeCSS } from 'lit';
 import { LuxenElement } from '../../shared/luxen-element.js';
 import { property, state } from 'lit/decorators.js';
@@ -36,6 +36,8 @@ const styles = unsafeCSS(rawStyles);
  *
  * @cssproperty --color - Text color.
  *
+ * @attribute variant - destructive — Renders the item as a destructive action (red), for delete-style entries.
+ *
  * @customElement l-dropdown-item
  */
 export class DropdownItem extends LuxenElement {
@@ -49,6 +51,7 @@ export class DropdownItem extends LuxenElement {
         _DropdownItem_value_accessor_storage.set(this, '');
         _DropdownItem_disabled_accessor_storage.set(this, false);
         _DropdownItem_type_accessor_storage.set(this, 'normal');
+        _DropdownItem_variant_accessor_storage.set(this, undefined);
         _DropdownItem_checked_accessor_storage.set(this, false);
         _DropdownItem_submenuOpen_accessor_storage.set(this, false);
         _DropdownItem__hasSubmenu_accessor_storage.set(this, false);
@@ -68,6 +71,9 @@ export class DropdownItem extends LuxenElement {
     /** The type of item: `normal` or `checkbox`. */
     get type() { return __classPrivateFieldGet(this, _DropdownItem_type_accessor_storage, "f"); }
     set type(value) { __classPrivateFieldSet(this, _DropdownItem_type_accessor_storage, value, "f"); }
+    /** Visual variant. `destructive` marks a delete-style action in red. */
+    get variant() { return __classPrivateFieldGet(this, _DropdownItem_variant_accessor_storage, "f"); }
+    set variant(value) { __classPrivateFieldSet(this, _DropdownItem_variant_accessor_storage, value, "f"); }
     /** Whether the checkbox item is checked. */
     get checked() { return __classPrivateFieldGet(this, _DropdownItem_checked_accessor_storage, "f"); }
     set checked(value) { __classPrivateFieldSet(this, _DropdownItem_checked_accessor_storage, value, "f"); }
@@ -228,7 +234,7 @@ export class DropdownItem extends LuxenElement {
     `;
     }
 }
-_DropdownItem_value_accessor_storage = new WeakMap(), _DropdownItem_disabled_accessor_storage = new WeakMap(), _DropdownItem_type_accessor_storage = new WeakMap(), _DropdownItem_checked_accessor_storage = new WeakMap(), _DropdownItem_submenuOpen_accessor_storage = new WeakMap(), _DropdownItem__hasSubmenu_accessor_storage = new WeakMap();
+_DropdownItem_value_accessor_storage = new WeakMap(), _DropdownItem_disabled_accessor_storage = new WeakMap(), _DropdownItem_type_accessor_storage = new WeakMap(), _DropdownItem_variant_accessor_storage = new WeakMap(), _DropdownItem_checked_accessor_storage = new WeakMap(), _DropdownItem_submenuOpen_accessor_storage = new WeakMap(), _DropdownItem__hasSubmenu_accessor_storage = new WeakMap();
 DropdownItem.styles = [hostStyles, styles];
 __decorate([
     property()
@@ -239,6 +245,9 @@ __decorate([
 __decorate([
     property()
 ], DropdownItem.prototype, "type", null);
+__decorate([
+    property({ reflect: true })
+], DropdownItem.prototype, "variant", null);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], DropdownItem.prototype, "checked", null);

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);

package/dist/metadata/dropdown-item.json

@@ -39,6 +39,14 @@
       "reflects": false,
       "description": "The type of item: `normal` or `checkbox`."
     },
+    {
+      "name": "variant",
+      "attribute": "variant",
+      "type": "'destructive' | undefined",
+      "default": "undefined",
+      "reflects": true,
+      "description": "Visual variant. `destructive` marks a delete-style action in red."
+    },
     {
       "name": "checked",
       "attribute": "checked",
@@ -64,7 +72,14 @@
       "description": "Whether this item has nested `slot=\"submenu\"` items."
     }
   ],
-  "attributes": [],
+  "attributes": [
+    {
+      "name": "variant",
+      "data": false,
+      "values": [],
+      "description": "destructive — Renders the item as a destructive action (red), for delete-style entries."
+    }
+  ],
   "events": [],
   "methods": [
     {

package/dist/metadata/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.16.2",
+  "version": "0.17.1",
   "elements": [
     {
       "name": "alert",
@@ -2289,6 +2289,14 @@
           "reflects": false,
           "description": "The type of item: `normal` or `checkbox`."
         },
+        {
+          "name": "variant",
+          "attribute": "variant",
+          "type": "'destructive' | undefined",
+          "default": "undefined",
+          "reflects": true,
+          "description": "Visual variant. `destructive` marks a delete-style action in red."
+        },
         {
           "name": "checked",
           "attribute": "checked",
@@ -2314,7 +2322,14 @@
           "description": "Whether this item has nested `slot=\"submenu\"` items."
         }
       ],
-      "attributes": [],
+      "attributes": [
+        {
+          "name": "variant",
+          "data": false,
+          "values": [],
+          "description": "destructive — Renders the item as a destructive action (red), for delete-style entries."
+        }
+      ],
       "events": [],
       "methods": [
         {
@@ -3837,6 +3852,111 @@
       "commands": [],
       "examples": []
     },
+    {
+      "name": "segmented-control",
+      "displayName": "Segmented control",
+      "type": "progressive",
+      "isCustomElement": true,
+      "tag": "l-segmented-control",
+      "nativeTag": null,
+      "selector": "l-segmented-control",
+      "subItemOf": null,
+      "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.",
+      "status": "stable",
+      "appearances": [],
+      "import": {
+        "css": "luxen-ui/css/segmented-control",
+        "js": "luxen-ui/segmented-control"
+      },
+      "properties": [
+        {
+          "name": "value",
+          "attribute": "value",
+          "type": "string",
+          "default": "''",
+          "reflects": true,
+          "description": "Value of the selected segment (its `value` attribute, else its index)."
+        },
+        {
+          "name": "size",
+          "attribute": "size",
+          "type": "SegmentedControlSize",
+          "default": "'md'",
+          "reflects": true,
+          "description": "Control height, aligned with buttons and form controls at the same size."
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "type": "string | undefined",
+          "default": null,
+          "reflects": true,
+          "description": "Accessible label announced for the group. Not displayed on screen."
+        },
+        {
+          "name": "fullWidth",
+          "attribute": "full-width",
+          "type": "boolean",
+          "default": "false",
+          "reflects": true,
+          "description": "Stretch segments to fill the container width."
+        }
+      ],
+      "attributes": [],
+      "events": [
+        {
+          "name": "change",
+          "description": "Fired when the selected segment changes. Not cancelable. Bubbles. Properties: `value: string`, `index: number`.",
+          "cancelable": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "formResetCallback",
+          "params": [],
+          "returns": null,
+          "description": ""
+        },
+        {
+          "name": "formStateRestoreCallback",
+          "params": [
+            {
+              "name": "state",
+              "type": "string"
+            },
+            {
+              "name": "mode",
+              "type": "'restore' | 'autocomplete'"
+            }
+          ],
+          "returns": null,
+          "description": ""
+        }
+      ],
+      "slots": [],
+      "cssClasses": [],
+      "cssParts": [],
+      "cssProperties": [
+        {
+          "name": "--indicator-color",
+          "default": "var(--l-color-surface)",
+          "description": "Background of the sliding pill behind the selected segment."
+        },
+        {
+          "name": "--border-radius",
+          "default": "var(--l-radius-lg)",
+          "description": "Corner radius of the track."
+        }
+      ],
+      "commands": [],
+      "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```"
+        }
+      ]
+    },
     {
       "name": "select",
       "displayName": "Select",