luxen-ui 0.18.1 → 0.18.3

package/dist/elements/tabs/tabs.js

@@ -33,12 +33,22 @@ 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.
  * @cssproperty [--track-color=var(--l-color-border)] - `line` variant: color of the static bottom border the tabs sit on.
  * @cssproperty [--track-thickness=1px] - `line` variant: thickness of the static bottom border.
+ * @cssproperty [--hover-color=var(--l-color-bg-state-hover)] - `line` variant: fill of the pill that appears behind a hovered tab label.
+ * @cssproperty [--hover-inset=4px] - `line` variant: block-axis gap between the hover pill and the tab edges, keeping it detached from the bottom border.
  *
  * @customElement l-tabs
  */
@@ -67,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;
@@ -79,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() {
@@ -135,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);
@@ -153,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];
@@ -181,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);
@@ -201,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];
@@ -215,16 +258,65 @@ 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: native `disabled` (unfocusable) and `aria-disabled`
+     * (focusable, so a user can still land on it — navigation must move off it).
+     */
+    _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/metadata/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.18.1",
+  "version": "0.18.3",
   "elements": [
     {
       "name": "alert",
@@ -5325,7 +5325,7 @@
       "events": [
         {
           "name": "change",
-          "description": "Fired when the active tab changes. Bubbles. Properties: `index: number`, `name: string | null`.",
+          "description": "Fired when the active tab changes. Bubbles. Not cancelable. Properties: `index: number`, `name: string | null`.",
           "cancelable": false
         }
       ],
@@ -5353,6 +5353,16 @@
           "name": "--track-thickness",
           "default": "1px",
           "description": "`line` variant: thickness of the static bottom border."
+        },
+        {
+          "name": "--hover-color",
+          "default": "var(--l-color-bg-state-hover)",
+          "description": "`line` variant: fill of the pill that appears behind a hovered tab label."
+        },
+        {
+          "name": "--hover-inset",
+          "default": "4px",
+          "description": "`line` variant: block-axis gap between the hover pill and the tab edges, keeping it detached from the bottom border."
         }
       ],
       "commands": [],
@@ -5361,6 +5371,11 @@
           "title": "Mark the initially-active tab with `aria-selected=\"true\"` so it is styled as",
           "language": "html",
           "code": "selected before the script upgrades the element (progressive enhancement).\n```html\n<l-tabs variant=\"enclosed\">\n  <div>\n    <button aria-selected=\"true\">Tab 1</button>\n    <button>Tab 2</button>\n  </div>\n  <div>Content 1</div>\n  <div>Content 2</div>\n</l-tabs>\n```"
+        },
+        {
+          "title": "A tab button marked `disabled` (or `aria-disabled=\"true\"`) is skipped by",
+          "language": "html",
+          "code": "arrow keys, `Home` and `End`, and cannot be selected by a click or by\n`value` — it still owns its panel, so the tab/panel order is unchanged.\n```html\n<button disabled>Billing</button>\n```"
         }
       ]
     },

package/dist/metadata/tabs.json

@@ -55,7 +55,7 @@
   "events": [
     {
       "name": "change",
-      "description": "Fired when the active tab changes. Bubbles. Properties: `index: number`, `name: string | null`.",
+      "description": "Fired when the active tab changes. Bubbles. Not cancelable. Properties: `index: number`, `name: string | null`.",
       "cancelable": false
     }
   ],
@@ -83,6 +83,16 @@
       "name": "--track-thickness",
       "default": "1px",
       "description": "`line` variant: thickness of the static bottom border."
+    },
+    {
+      "name": "--hover-color",
+      "default": "var(--l-color-bg-state-hover)",
+      "description": "`line` variant: fill of the pill that appears behind a hovered tab label."
+    },
+    {
+      "name": "--hover-inset",
+      "default": "4px",
+      "description": "`line` variant: block-axis gap between the hover pill and the tab edges, keeping it detached from the bottom border."
     }
   ],
   "commands": [],
@@ -91,6 +101,11 @@
       "title": "Mark the initially-active tab with `aria-selected=\"true\"` so it is styled as",
       "language": "html",
       "code": "selected before the script upgrades the element (progressive enhancement).\n```html\n<l-tabs variant=\"enclosed\">\n  <div>\n    <button aria-selected=\"true\">Tab 1</button>\n    <button>Tab 2</button>\n  </div>\n  <div>Content 1</div>\n  <div>Content 2</div>\n</l-tabs>\n```"
+    },
+    {
+      "title": "A tab button marked `disabled` (or `aria-disabled=\"true\"`) is skipped by",
+      "language": "html",
+      "code": "arrow keys, `Home` and `End`, and cannot be selected by a click or by\n`value` — it still owns its panel, so the tab/panel order is unchanged.\n```html\n<button disabled>Billing</button>\n```"
     }
   ]
 }

package/dist/templates/elements/tabs.md

@@ -54,7 +54,7 @@ Add `variant="line"` for a tablist with a sliding underline indicator.
 </l-tabs>
 ```
 
-Restyle the active underline and the static bottom border with `--indicator-color`, `--indicator-thickness`, `--track-color` and `--track-thickness`.
+Hovering a tab reveals a subtle pill behind its label, detached from the bottom border. Restyle it with `--hover-color` (and `--hover-inset` for the gap), along with the active underline and the static bottom border via `--indicator-color`, `--indicator-thickness`, `--track-color` and `--track-thickness`.
 
 ```html
 <l-tabs
@@ -63,6 +63,7 @@ Restyle the active underline and the static bottom border with `--indicator-colo
     --indicator-color: var(--l-color-bg-fill-info-strong);
     --indicator-thickness: 3px;
     --track-color: var(--l-color-divider);
+    --hover-color: var(--l-color-bg-fill-info-soft);
   "
 >
   <div>
@@ -131,6 +132,35 @@ Set `value="1"` to activate a specific tab on load (0-based index).
 </l-tabs>
 ```
 
+### Disabled tab
+
+Add `disabled` to a tab button to take it out of play. It is skipped by arrow keys, `Home` and `End`, it cannot be selected by a click or by `value`, and it never shows the hover pill. Use `aria-disabled="true"` instead if the tab should stay focusable so keyboard users can still discover it.
+
+```html
+<l-tabs variant="line">
+  <div>
+    <button
+      name="account"
+      aria-selected="true"
+    >
+      Account
+    </button>
+    <button name="password">Password</button>
+    <button
+      name="billing"
+      disabled
+    >
+      Billing
+    </button>
+    <button name="notifications">Notifications</button>
+  </div>
+  <div class="p-4 text-sm text-secondary">Make changes to your account here.</div>
+  <div class="p-4 text-sm text-secondary">Change your password here.</div>
+  <div class="p-4 text-sm text-secondary">Upgrade your plan to manage billing.</div>
+  <div class="p-4 text-sm text-secondary">Manage your notification preferences.</div>
+</l-tabs>
+```
+
 ## Accessibility
 
 ### Criteria
@@ -139,6 +169,7 @@ Set `value="1"` to activate a specific tab on load (0-based index).
 - **Linked controls** — Each tab has `aria-controls` pointing to its panel; each panel has `aria-labelledby` pointing back to its tab
 - **Selection state** — Active tab has `aria-selected="true"`; inactive tabs have `aria-selected="false"`
 - **Focus management** — Roving tabindex — active tab has `tabindex="0"`, others `tabindex="-1"`. Panels have `tabindex="0"` for keyboard access
+- **Disabled tabs** — Tabs marked `disabled` or `aria-disabled="true"` are skipped by arrow keys, `Home` and `End`, and never take the roving `tabindex="0"` — so the tablist always keeps a reachable entry point
 - **Hidden content** — Inactive panels use the `hidden` attribute
 - **Motion** — Indicator animation respects `prefers-reduced-motion`
 
@@ -150,12 +181,12 @@ Set `value="1"` to activate a specific tab on load (0-based index).
 
 ### Keyboard interactions
 
-- `ArrowRight` — Moves focus to the next tab and activates it (horizontal orientation)
-- `ArrowLeft` — Moves focus to the previous tab and activates it (horizontal orientation)
-- `ArrowDown` — Moves focus to the next tab and activates it (vertical orientation)
-- `ArrowUp` — Moves focus to the previous tab and activates it (vertical orientation)
-- `Home` — Moves focus to the first tab and activates it
-- `End` — Moves focus to the last tab and activates it
+- `ArrowRight` — Moves focus to the next enabled tab and activates it (horizontal orientation)
+- `ArrowLeft` — Moves focus to the previous enabled tab and activates it (horizontal orientation)
+- `ArrowDown` — Moves focus to the next enabled tab and activates it (vertical orientation)
+- `ArrowUp` — Moves focus to the previous enabled tab and activates it (vertical orientation)
+- `Home` — Moves focus to the first enabled tab and activates it
+- `End` — Moves focus to the last enabled tab and activates it
 - `Tab` — Moves focus out of the tablist to the active panel
 
 ## API reference
@@ -183,7 +214,7 @@ import 'luxen-ui/tabs';
 
 ### Events
 
-- **change** — Fired when the active tab changes. Bubbles. Properties: `index: number`, `name: string | null`.
+- **change** — Fired when the active tab changes. Bubbles. Not cancelable. Properties: `index: number`, `name: string | null`.
 
 ### CSS custom properties
 
@@ -191,3 +222,5 @@ import 'luxen-ui/tabs';
 - `--indicator-thickness` (default: `2px`) — `line` variant: thickness of the active underline.
 - `--track-color` (default: `var(--l-color-border)`) — `line` variant: color of the static bottom border the tabs sit on.
 - `--track-thickness` (default: `1px`) — `line` variant: thickness of the static bottom border.
+- `--hover-color` (default: `var(--l-color-bg-state-hover)`) — `line` variant: fill of the pill that appears behind a hovered tab label.
+- `--hover-inset` (default: `4px`) — `line` variant: block-axis gap between the hover pill and the tab edges, keeping it detached from the bottom border.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxen-ui",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "description": "Modern web components and CSS-first UI library built with Lit. Framework-agnostic, customizable prefix, design tokens.",
   "keywords": [
     "custom-elements",