luxen-ui 0.18.2 → 0.19.0

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_variant_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_checkPlacement_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';
@@ -28,7 +28,7 @@ const styles = unsafeCSS(rawStyles);
  * A menu item for use inside `<l-dropdown>`.
  *
  * @slot - Label text.
- * @slot prefix - Leading content (e.g. icon).
+ * @slot prefix - Leading content (e.g. icon). A `type="checkbox"` item ignores it unless `check-placement="end"` frees the leading column.
  * @slot suffix - Trailing content.
  * @slot submenu - Nested `l-dropdown-item` elements rendered in a submenu panel anchored to this item. Drop an `<hr>` between them for a separator.
  *
@@ -54,6 +54,7 @@ export class DropdownItem extends LuxenElement {
         _DropdownItem_variant_accessor_storage.set(this, undefined);
         _DropdownItem_checked_accessor_storage.set(this, false);
         _DropdownItem_submenuOpen_accessor_storage.set(this, false);
+        _DropdownItem_checkPlacement_accessor_storage.set(this, 'start');
         _DropdownItem__hasSubmenu_accessor_storage.set(this, false);
         this._onSubmenuSlotChange = (e) => {
             const slot = e.target;
@@ -80,6 +81,14 @@ export class DropdownItem extends LuxenElement {
     /** Whether this item's submenu is open. Managed by the parent `l-dropdown`. */
     get submenuOpen() { return __classPrivateFieldGet(this, _DropdownItem_submenuOpen_accessor_storage, "f"); }
     set submenuOpen(value) { __classPrivateFieldSet(this, _DropdownItem_submenuOpen_accessor_storage, value, "f"); }
+    /**
+     * Which side of a `type="checkbox"` item carries the check mark. `start` (the
+     * default) puts it in the leading column, where it takes the place of any
+     * `prefix`. `end` moves it to the trailing edge, freeing that column so the
+     * item can show its own icon alongside the state.
+     */
+    get checkPlacement() { return __classPrivateFieldGet(this, _DropdownItem_checkPlacement_accessor_storage, "f"); }
+    set checkPlacement(value) { __classPrivateFieldSet(this, _DropdownItem_checkPlacement_accessor_storage, value, "f"); }
     get _hasSubmenu() { return __classPrivateFieldGet(this, _DropdownItem__hasSubmenu_accessor_storage, "f"); }
     set _hasSubmenu(value) { __classPrivateFieldSet(this, _DropdownItem__hasSubmenu_accessor_storage, value, "f"); }
     /** Whether this item has nested `slot="submenu"` items. */
@@ -169,8 +178,32 @@ export class DropdownItem extends LuxenElement {
                 panel.hidePopover();
         }
     }
+    _renderCheck() {
+        return html `
+      <span
+        class="check"
+        aria-hidden="true"
+      >
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+        >
+          <path
+            d="M3.5 8.5L6.5 11.5L12.5 4.5"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </span>
+    `;
+    }
     render() {
         const isCheckbox = this.type === 'checkbox';
+        const leadingCheck = isCheckbox && this.checkPlacement === 'start';
         return html `
       <div
         class="item"
@@ -182,35 +215,22 @@ export class DropdownItem extends LuxenElement {
         aria-controls=${this._hasSubmenu ? 'submenu' : nothing}
         tabindex="-1"
       >
-        ${isCheckbox
-            ? html `
-              <span
-                class="check"
-                aria-hidden="true"
-              >
-                <svg
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none"
-                >
-                  <path
-                    d="M3.5 8.5L6.5 11.5L12.5 4.5"
-                    stroke="currentColor"
-                    stroke-width="1.5"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                </svg>
-              </span>
-            `
-            : html ` <slot name="prefix"></slot> `}
+        <!-- The check owns the leading column by default, which is why a
+             checkbox item has no room for a prefix there. Moving it to the
+             trailing edge frees that column, so an item can carry its own icon
+             and still show whether it is on — a theme row with a sun/moon, a
+             Show-grid row with a grid glyph. The aria-checked above is what
+             assistive tech reads, and it is unaffected by where the mark sits.
+             (No backticks in this comment: it lives inside a template literal.) -->
+        ${leadingCheck ? this._renderCheck() : nothing}
+        ${leadingCheck ? nothing : html `<slot name="prefix"></slot>`}
         <span
           class="label"
           id="label"
           ><slot></slot
         ></span>
         <slot name="suffix"></slot>
+        ${isCheckbox && this.checkPlacement === 'end' ? this._renderCheck() : nothing}
         ${this._hasSubmenu
             ? html `<span
               class="submenu-indicator"
@@ -234,7 +254,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_variant_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_checkPlacement_accessor_storage = new WeakMap(), _DropdownItem__hasSubmenu_accessor_storage = new WeakMap();
 DropdownItem.styles = [hostStyles, styles];
 __decorate([
     property()
@@ -254,6 +274,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'submenu-open' })
 ], DropdownItem.prototype, "submenuOpen", null);
+__decorate([
+    property({ reflect: true, attribute: 'check-placement' })
+], DropdownItem.prototype, "checkPlacement", null);
 __decorate([
     state()
 ], DropdownItem.prototype, "_hasSubmenu", null);

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

@@ -40,6 +40,8 @@ export declare class SegmentedControl extends LuxenFormAssociatedElement {
     private _setupTimer;
     private _buttons;
     private _resizeObserver;
+    /** Segments the consumer authored `aria-disabled` on — never ours to clear. */
+    private _authoredDisabled;
     /** 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. */

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

@@ -1 +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"}
+{"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;IACtD,+EAA+E;IAC/E,OAAO,CAAC,iBAAiB,CAAoC;IAE7D,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;IAyDd,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;IAiB3B,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

@@ -47,6 +47,8 @@ export class SegmentedControl extends LuxenFormAssociatedElement {
         this._setupTimer = 0;
         this._buttons = [];
         this._resizeObserver = null;
+        /** Segments the consumer authored `aria-disabled` on — never ours to clear. */
+        this._authoredDisabled = new WeakSet();
         /** 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. */
@@ -181,6 +183,11 @@ export class SegmentedControl extends LuxenFormAssociatedElement {
             btn.setAttribute('role', 'radio');
             btn.setAttribute('aria-checked', String(i === activeIndex));
             btn.setAttribute('tabindex', i === activeIndex ? '0' : '-1');
+            // Record an authored `aria-disabled` before the host-level state is
+            // mirrored onto the segments: `_applyDisabledState()` clears that mirror
+            // whenever the control is enabled, and must not take this one with it.
+            if (btn.getAttribute('aria-disabled') === 'true')
+                this._authoredDisabled.add(btn);
             // 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() === '') {
@@ -278,7 +285,10 @@ export class SegmentedControl extends LuxenFormAssociatedElement {
                 btn.setAttribute('tabindex', '-1');
             }
             else {
-                btn.removeAttribute('aria-disabled');
+                // Only clear the mirror this method set: a segment the consumer marked
+                // `aria-disabled` stays disabled when the control is re-enabled.
+                if (!this._authoredDisabled.has(btn))
+                    btn.removeAttribute('aria-disabled');
                 // Restore the roving tabindex (only the selected segment is tabbable).
                 btn.setAttribute('tabindex', btn.getAttribute('aria-checked') === 'true' ? '0' : '-1');
             }

package/dist/elements/tabs/tabs.d.ts

@@ -28,7 +28,15 @@ interface TabsEventMap {
  * </l-tabs>
  * ```
  *
- * @event change - Fired when the active tab changes. Bubbles. Properties: `index: number`, `name: string | null`.
+ * @example
+ * A tab button marked `disabled` (or `aria-disabled="true"`) is skipped by
+ * arrow keys, `Home` and `End`, and cannot be selected by a click or by
+ * `value` — it still owns its panel, so the tab/panel order is unchanged.
+ * ```html
+ * <button disabled>Billing</button>
+ * ```
+ *
+ * @event change - Fired when the active tab changes. Bubbles. Not cancelable. Properties: `index: number`, `name: string | null`.
  *
  * @cssproperty [--indicator-color=var(--l-color-text-primary)] - `line` variant: color of the active underline that slides under the selected tab.
  * @cssproperty [--indicator-thickness=2px] - `line` variant: thickness of the active underline.
@@ -64,6 +72,25 @@ export declare class Tabs extends LuxenElement {
     private _setup;
     private _teardown;
     private _selectTab;
+    /**
+     * Both spellings count, and they behave identically here. `aria-disabled`
+     * leaves the button focusable in principle, but a roving tabindex hands
+     * `tabindex="0"` to the selected tab only — so a tab that can never be
+     * selected is never in the tab sequence either, and the arrow keys skip it
+     * like a native one. It is the escape hatch for consumers who cannot set the
+     * native attribute (a framework binding, a non-`button` element), not a
+     * "reachable but inert" variant.
+     */
+    private _isDisabled;
+    private _isSelectable;
+    /** Index of the currently selected tab, read back from the DOM. */
+    private _activeIndex;
+    /** Resolve the initial selection from `value`, falling back to the first enabled tab. */
+    private _resolveActiveIndex;
+    /** Index of the next enabled tab from `from`, moving by `dir`, wrapping. */
+    private _nextEnabled;
+    /** Index of the first (`dir` 1) or last (`dir` -1) enabled tab. */
+    private _edgeEnabled;
     private _updateIndicator;
     private _onClick;
     private _onKeyDown;

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tabs/tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAG7D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AAExD,gEAAgE;AAChE,qBAAa,eAAgB,SAAQ,KAAK;IACxC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;gBACjB,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAK/C;AAED,UAAU,YAAY;IACpB,MAAM,EAAE,eAAe,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,qBAAa,IAAK,SAAQ,YAAY;IAC3B,gBAAgB;IAIzB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,eAAe,CAA+B;IAEtD,sBAAsB;IAEtB,OAAO,EAAE,WAAW,CAAU;IAE9B,yCAAyC;IAEzC,KAAK,SAAO;IAEZ,4CAA4C;IAE5C,SAAS,UAAS;IAElB,uBAAuB;IAEvB,WAAW,EAAE,eAAe,CAAgB;IAInC,iBAAiB;IAUjB,oBAAoB;IAM7B,mFAAmF;IACnF,OAAO,CAAC,SAAS;IAOR,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAW9C,OAAO,CAAC,MAAM;IA0Dd,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,QAAQ,CAQd;IAEF,OAAO,CAAC,UAAU,CAkChB;CACH;AA8BD,MAAM,WAAW,IAAI;IACnB,gBAAgB,CAAC,CAAC,SAAS,MAAM,YAAY,EAC3C,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,EACnD,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,YAAY,EAC9C,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,EACnD,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"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/html/elements/tabs/tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAG7D,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,MAAM,CAAC;AAC9C,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,UAAU,CAAC;AAExD,gEAAgE;AAChE,qBAAa,eAAgB,SAAQ,KAAK;IACxC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;gBACjB,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI;CAK/C;AAED,UAAU,YAAY;IACpB,MAAM,EAAE,eAAe,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AAEH,qBAAa,IAAK,SAAQ,YAAY;IAC3B,gBAAgB;IAIzB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,eAAe,CAA+B;IAEtD,sBAAsB;IAEtB,OAAO,EAAE,WAAW,CAAU;IAE9B,yCAAyC;IAEzC,KAAK,SAAO;IAEZ,4CAA4C;IAE5C,SAAS,UAAS;IAElB,uBAAuB;IAEvB,WAAW,EAAE,eAAe,CAAgB;IAInC,iBAAiB;IAUjB,oBAAoB;IAM7B,mFAAmF;IACnF,OAAO,CAAC,SAAS;IAOR,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAuB9C,OAAO,CAAC,MAAM;IAgEd,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,UAAU;IAmClB;;;;;;;;OAQG;IACH,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,aAAa;IASrB,mEAAmE;IACnE,OAAO,CAAC,YAAY;IAKpB,yFAAyF;IACzF,OAAO,CAAC,mBAAmB;IAS3B,4EAA4E;IAC5E,OAAO,CAAC,YAAY;IASpB,mEAAmE;IACnE,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,UAAU,CAqChB;CACH;AA8BD,MAAM,WAAW,IAAI;IACnB,gBAAgB,CAAC,CAAC,SAAS,MAAM,YAAY,EAC3C,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,EACnD,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,YAAY,EAC9C,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,EACnD,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/tabs/tabs.js

@@ -33,7 +33,15 @@ export class TabsChangeEvent extends Event {
  * </l-tabs>
  * ```
  *
- * @event change - Fired when the active tab changes. Bubbles. Properties: `index: number`, `name: string | null`.
+ * @example
+ * A tab button marked `disabled` (or `aria-disabled="true"`) is skipped by
+ * arrow keys, `Home` and `End`, and cannot be selected by a click or by
+ * `value` — it still owns its panel, so the tab/panel order is unchanged.
+ * ```html
+ * <button disabled>Billing</button>
+ * ```
+ *
+ * @event change - Fired when the active tab changes. Bubbles. Not cancelable. Properties: `index: number`, `name: string | null`.
  *
  * @cssproperty [--indicator-color=var(--l-color-text-primary)] - `line` variant: color of the active underline that slides under the selected tab.
  * @cssproperty [--indicator-thickness=2px] - `line` variant: thickness of the active underline.
@@ -69,10 +77,13 @@ export class Tabs extends LuxenElement {
             if (!tab)
                 return;
             const index = this._tabs.indexOf(tab);
-            if (index >= 0) {
-                this._selectTab(index);
-                tab.focus();
-            }
+            // A native `disabled` button dispatches no click at all, but an
+            // `aria-disabled` one does — `_selectTab` refuses it, and focus must not
+            // follow either.
+            if (index < 0 || this._isDisabled(tab))
+                return;
+            this._selectTab(index);
+            tab.focus();
         };
         this._onKeyDown = (e) => {
             const target = e.target;
@@ -81,31 +92,35 @@ export class Tabs extends LuxenElement {
             const isHorizontal = this.orientation === 'horizontal';
             const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
             const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
-            let index = this._tabs.indexOf(target);
+            const current = this._tabs.indexOf(target);
+            if (current < 0)
+                return;
+            // Every move lands on an enabled tab: selection follows focus here
+            // (automatic activation), so a disabled target would split the two apart.
+            let index;
             switch (e.key) {
                 case nextKey:
-                    e.preventDefault();
-                    index = (index + 1) % this._tabs.length;
-                    this._selectTab(index);
-                    this._tabs[index].focus();
+                    index = this._nextEnabled(current, 1);
                     break;
                 case prevKey:
-                    e.preventDefault();
-                    index = (index - 1 + this._tabs.length) % this._tabs.length;
-                    this._selectTab(index);
-                    this._tabs[index].focus();
+                    index = this._nextEnabled(current, -1);
                     break;
                 case 'Home':
-                    e.preventDefault();
-                    this._selectTab(0);
-                    this._tabs[0].focus();
+                    index = this._edgeEnabled(1);
                     break;
                 case 'End':
-                    e.preventDefault();
-                    this._selectTab(this._tabs.length - 1);
-                    this._tabs[this._tabs.length - 1].focus();
+                    index = this._edgeEnabled(-1);
                     break;
+                default:
+                    return;
             }
+            e.preventDefault();
+            // Only reachable when every tab is disabled — then there is nowhere to go
+            // and focus must not be dragged onto a disabled tab.
+            if (!this._isSelectable(index))
+                return;
+            this._selectTab(index);
+            this._tabs[index].focus();
         };
     }
     createRenderRoot() {
@@ -137,7 +152,20 @@ export class Tabs extends LuxenElement {
     }
     updated(changed) {
         if (changed.has('value') && this._tabs.length) {
-            this._selectTab(Number(this.value), false);
+            const requested = Number(this.value);
+            if (this._isSelectable(requested)) {
+                this._selectTab(requested, false);
+            }
+            else {
+                // The target is disabled or out of range, so the selection stays put —
+                // and `value` must not keep claiming a tab that was never selected.
+                // Reverting here would schedule an update from within an update, so
+                // defer it (same reason as a vetoed dialog `show`).
+                const current = this._activeIndex();
+                queueMicrotask(() => {
+                    this.value = String(current);
+                });
+            }
         }
         if (changed.has('orientation') && this._tablistEl) {
             this._tablistEl.setAttribute('aria-orientation', this.orientation);
@@ -155,9 +183,11 @@ export class Tabs extends LuxenElement {
         this._tablistEl.setAttribute('aria-orientation', this.orientation);
         // Buttons inside tablist become tabs
         this._tabs = Array.from(this._tablistEl.querySelectorAll('button'));
-        // Remaining children become panels
+        // Remaining children become panels. Disabled buttons stay in `_tabs` so the
+        // tab↔panel pairing keeps following DOM order — they are filtered out at
+        // navigation time, not here.
         this._panels = children.slice(1);
-        const activeIndex = Number(this.value) || 0;
+        const activeIndex = this._resolveActiveIndex();
         // Enhance tabs
         for (let i = 0; i < this._tabs.length; i++) {
             const tab = this._tabs[i];
@@ -183,6 +213,10 @@ export class Tabs extends LuxenElement {
                 }
             }
         }
+        // `value` may have pointed at a disabled tab: canonicalize it to the tab
+        // that is actually selected.
+        if (Number(this.value) !== activeIndex)
+            this.value = String(activeIndex);
         // Attach listeners
         this._tablistEl.addEventListener('click', this._onClick);
         this._tablistEl.addEventListener('keydown', this._onKeyDown);
@@ -203,8 +237,15 @@ export class Tabs extends LuxenElement {
     }
     // --- Tab selection ---
     _selectTab(index, emitEvent = true) {
-        if (index < 0 || index >= this._tabs.length)
+        // A disabled tab is never selectable: it cannot take focus, so selecting it
+        // would move the roving tabindex entry point onto an unfocusable button and
+        // drop the whole tablist out of the tab sequence (WCAG 2.1.1).
+        if (!this._isSelectable(index))
             return;
+        // Whether this is an actual change — re-selecting the current tab must not
+        // re-fire `change` (the event is documented as firing when the active tab
+        // changes, and this matches native `change` on radios / `<select>`).
+        const changed = this._tabs[index].getAttribute('aria-selected') !== 'true';
         for (let i = 0; i < this._tabs.length; i++) {
             const tab = this._tabs[i];
             const panel = this._panels[i];
@@ -217,16 +258,70 @@ export class Tabs extends LuxenElement {
         }
         this.value = String(index);
         this._updateIndicator();
-        if (emitEvent) {
+        if (emitEvent && changed) {
             const name = this._tabs[index]?.getAttribute('name') ?? null;
             this.dispatchEvent(new TabsChangeEvent(index, name));
         }
     }
+    // --- Disabled tabs ---
+    /**
+     * Both spellings count, and they behave identically here. `aria-disabled`
+     * leaves the button focusable in principle, but a roving tabindex hands
+     * `tabindex="0"` to the selected tab only — so a tab that can never be
+     * selected is never in the tab sequence either, and the arrow keys skip it
+     * like a native one. It is the escape hatch for consumers who cannot set the
+     * native attribute (a framework binding, a non-`button` element), not a
+     * "reachable but inert" variant.
+     */
+    _isDisabled(tab) {
+        return tab.disabled || tab.getAttribute('aria-disabled') === 'true';
+    }
+    _isSelectable(index) {
+        return (Number.isInteger(index) &&
+            index >= 0 &&
+            index < this._tabs.length &&
+            !this._isDisabled(this._tabs[index]));
+    }
+    /** Index of the currently selected tab, read back from the DOM. */
+    _activeIndex() {
+        const i = this._tabs.findIndex((t) => t.getAttribute('aria-selected') === 'true');
+        return i >= 0 ? i : 0;
+    }
+    /** Resolve the initial selection from `value`, falling back to the first enabled tab. */
+    _resolveActiveIndex() {
+        const requested = Number(this.value) || 0;
+        if (this._isSelectable(requested))
+            return requested;
+        const firstEnabled = this._tabs.findIndex((t) => !this._isDisabled(t));
+        // Every tab disabled: nothing is focusable anyway, so index 0 is as good as
+        // any and the tablist is simply unreachable — which is what was asked for.
+        return firstEnabled >= 0 ? firstEnabled : 0;
+    }
+    /** Index of the next enabled tab from `from`, moving by `dir`, wrapping. */
+    _nextEnabled(from, dir) {
+        const len = this._tabs.length;
+        for (let step = 1; step <= len; step++) {
+            const i = (from + dir * step + len * step) % len;
+            if (!this._isDisabled(this._tabs[i]))
+                return i;
+        }
+        return from;
+    }
+    /** Index of the first (`dir` 1) or last (`dir` -1) enabled tab. */
+    _edgeEnabled(dir) {
+        const len = this._tabs.length;
+        const start = dir === 1 ? 0 : len - 1;
+        for (let i = start; i >= 0 && i < len; i += dir) {
+            if (!this._isDisabled(this._tabs[i]))
+                return i;
+        }
+        return start;
+    }
     // --- Indicator ---
     _updateIndicator() {
         if (!this._tablistEl)
             return;
-        const activeTab = this._tabs[Number(this.value)];
+        const activeTab = this._tabs[this._activeIndex()];
         if (!activeTab)
             return;
         const isVertical = this.orientation === 'vertical';

package/dist/index.d.ts

@@ -4,6 +4,8 @@ export * from './events/index.js';
 export { define } from './define.js';
 export { setPrefix, getPrefix, tagName, cls } from './registry.js';
 export type { ElementBaseName } from './registry.js';
+export { colorScheme } from './color-scheme.js';
+export type { ColorScheme, ColorSchemeConfig, ColorSchemeListener } from './color-scheme.js';
 export { defineConfig } from './config.js';
 export type { LuxenConfig, LuxenEmitTypesConfig } from './config.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/html/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/html/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,2CAA2C,CAAC;AACvF,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACnE,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAC7F,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -3,4 +3,5 @@ export { LuxenFormAssociatedElement } from './shared/luxen-form-associated-eleme
 export * from './events/index.js';
 export { define } from './define.js';
 export { setPrefix, getPrefix, tagName, cls } from './registry.js';
+export { colorScheme } from './color-scheme.js';
 export { defineConfig } from './config.js';

package/dist/metadata/color-scheme-icon.json

@@ -0,0 +1,66 @@
+{
+  "name": "color-scheme-icon",
+  "displayName": "Color scheme icon",
+  "type": "shadow",
+  "isCustomElement": true,
+  "tag": "l-color-scheme-icon",
+  "nativeTag": null,
+  "selector": "l-color-scheme-icon",
+  "subItemOf": null,
+  "summary": "A sun that morphs into a moon. Purely presentational: it shows a\ncolor scheme, it does not choose or store one.\n\nThe two glyphs are a single shape — the disc grows, a mask slides in to carve\nthe crescent, and the rays retract in a ripple — so the change reads as one\nobject turning rather than two icons swapping. That is why this is authored\nSVG rather than an `<l-icon>`: an Iconify icon is opaque, and you cannot grow\none into another or animate a mask inside it.\n\nUse it wherever a scheme needs a glyph and the surrounding element is already\nthe control — a `menuitemcheckbox` row, a button, a legend. With no `scheme`\nit follows the page's scheme from `luxen-ui/color-scheme`, so it needs no\nwiring; set `scheme` to pin it.",
+  "status": "stable",
+  "appearances": [],
+  "import": {
+    "css": null,
+    "js": "luxen-ui/color-scheme-icon"
+  },
+  "properties": [
+    {
+      "name": "scheme",
+      "attribute": "scheme",
+      "type": "ColorScheme | undefined",
+      "default": null,
+      "reflects": true,
+      "description": "Which glyph to show. Leave it unset and the icon follows the page's scheme\n(`colorScheme.current` — a stored override, else the OS preference), so it\nstays in step with every other control without wiring. Set it to pin the\nglyph, for a legend or a preview that must not move."
+    },
+    {
+      "name": "label",
+      "attribute": "label",
+      "type": "string | undefined",
+      "default": null,
+      "reflects": false,
+      "description": "Accessible label. When set, the glyph becomes meaningful (`role=\"img\"`);\nwhen absent it is decorative and hidden from assistive tech — the right\ndefault inside a row or button that already carries the name."
+    }
+  ],
+  "attributes": [],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "cssClasses": [],
+  "cssParts": [
+    {
+      "name": "base",
+      "description": "The root `<svg>`, for overriding the morph's timing or tilt."
+    }
+  ],
+  "cssProperties": [
+    {
+      "name": "--size",
+      "default": "1em",
+      "description": "Width and height of the glyph."
+    },
+    {
+      "name": "--color",
+      "default": "currentColor",
+      "description": "Glyph color."
+    }
+  ],
+  "commands": [],
+  "examples": [
+    {
+      "title": "In a menu row, where the row is the control",
+      "language": "html",
+      "code": "```html\n<l-dropdown-item type=\"checkbox\" checked>\n<l-color-scheme-icon slot=\"prefix\" scheme=\"dark\"></l-color-scheme-icon>\nDark theme\n</l-dropdown-item>\n```"
+    }
+  ]
+}

package/dist/metadata/dropdown-item.json

@@ -63,6 +63,14 @@
       "reflects": true,
       "description": "Whether this item's submenu is open. Managed by the parent `l-dropdown`."
     },
+    {
+      "name": "checkPlacement",
+      "attribute": "check-placement",
+      "type": "'start' | 'end'",
+      "default": "'start'",
+      "reflects": true,
+      "description": "Which side of a `type=\"checkbox\"` item carries the check mark. `start` (the\ndefault) puts it in the leading column, where it takes the place of any\n`prefix`. `end` moves it to the trailing edge, freeing that column so the\nitem can show its own icon alongside the state."
+    },
     {
       "name": "hasSubmenu",
       "attribute": null,
@@ -114,7 +122,7 @@
     },
     {
       "name": "prefix",
-      "description": "Leading content (e.g. icon)."
+      "description": "Leading content (e.g. icon). A `type=\"checkbox\"` item ignores it unless `check-placement=\"end\"` frees the leading column."
     },
     {
       "name": "suffix",