luxen-ui 0.18.1 → 0.18.2

package/dist/elements/dropdown/dropdown.js

@@ -98,6 +98,13 @@ export class Dropdown extends LuxenElement {
         this._onTriggerClick = (e) => {
             if (this.disabled)
                 return;
+            // The pointerdown that produced this click already light-dismissed the panel:
+            // `open` still reads true, but the panel has left the top layer and the
+            // queued `toggle` owns the close (and its `hide` event). Closing here too
+            // would emit a second one. A keyboard activation never gets here — no
+            // light-dismiss, so the panel is still open.
+            if (this.open && !this._panelEl?.matches(':popover-open'))
+                return;
             this.toggle();
             // Space/Enter on a native button dispatches click with detail=0; focus the
             // first item so the menu is keyboard-navigable immediately on open.
@@ -108,7 +115,20 @@ export class Dropdown extends LuxenElement {
         this._onTriggerKeyDown = (e) => {
             if (this.disabled)
                 return;
-            if (e.key === 'ArrowDown') {
+            if (e.key === 'Escape') {
+                // A pointer-opened menu leaves focus on the trigger, so `_onPanelKeyDown`
+                // never sees the key. The platform's popover light-dismiss normally covers
+                // that, but it runs as a close request the page can suppress — any
+                // `preventDefault()` on the Escape keydown (a common app-level shortcut
+                // handler) leaves the menu stuck open. Close it here, and preventDefault
+                // so the close request doesn't race our animated hide.
+                if (!this.open)
+                    return;
+                e.preventDefault();
+                this.hide();
+                // Focus is already on the trigger — nothing to restore.
+            }
+            else if (e.key === 'ArrowDown') {
                 e.preventDefault();
                 this.show();
                 requestAnimationFrame(() => this._focusFirstItem());
@@ -220,13 +240,35 @@ export class Dropdown extends LuxenElement {
             clearTimeout(this._hoverTimer);
             this._hoverItem = null;
         };
-        /** Sync `open` when popover="auto" light-dismiss fires. */
+        /**
+         * Route `popover="auto"` light-dismiss through the same close path as every
+         * other user-driven close (trigger click, Escape, item selection), so the
+         * cancelable `hide` event fires for it too. Assigning `open` here directly
+         * would skip it and desync anything a consumer syncs on `hide`.
+         *
+         * Driving `open` as a property or attribute still closes the menu with only
+         * `after-hide` — `l-dialog` mediates that path from `updated()`, this element
+         * does not. A gap worth closing on its own.
+         *
+         * The platform makes a popover's close non-cancelable (`beforetoggle` is only
+         * cancelable when opening), so a vetoed `hide` is honored by putting the panel
+         * back. `toggle` is the right hook for that: it is queued after the hide has
+         * actually been applied, whereas during `beforetoggle` the panel is still
+         * `:popover-open` and `showPopover()` would be a no-op the pending hide undoes.
+         */
         this._onToggle = (e) => {
             const toggleEvent = e;
-            if (toggleEvent.newState === 'closed' && this.open) {
+            // Our own close path flips `open` before hiding the popover, so this guard
+            // keeps it from emitting a second `hide` for the same close.
+            if (toggleEvent.newState !== 'closed' || !this.open)
+                return;
+            if (this.dispatchEvent(new HideEvent())) {
                 this.open = false;
-                this._triggerEl?.setAttribute('aria-expanded', 'false');
+                return;
             }
+            const panel = this._panelEl;
+            if (panel?.isConnected)
+                panel.showPopover();
         };
     }
     /** Whether the dropdown is open. */

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

@@ -34,6 +34,8 @@ interface TabsEventMap {
  * @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
  */

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;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/elements/tabs/tabs.js

@@ -39,6 +39,8 @@ export class TabsChangeEvent extends Event {
  * @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
  */

package/dist/metadata/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.18.1",
+  "version": "0.18.2",
   "elements": [
     {
       "name": "alert",
@@ -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": [],

package/dist/metadata/tabs.json

@@ -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": [],

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>
@@ -191,3 +192,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.2",
   "description": "Modern web components and CSS-first UI library built with Lit. Framework-agnostic, customizable prefix, design tokens.",
   "keywords": [
     "custom-elements",