luxen-ui 0.18.0 → 0.18.2

package/dist/metadata/index.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.18.0",
+  "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/dist/templates/elements/tag.md

@@ -270,6 +270,12 @@ tag.querySelector('input'); // ❌ null — the checkbox is in the shadow root
 tag.getAttribute('aria-pressed'); // ❌ null — it is on the inner button
 ```
 
+Activation goes through the host, so a test runner clicks the chip it resolved by `data-testid` — no reaching into the shadow root, and no custom command.
+
+```js
+tag.click(); // ✅ toggles a selectable chip (does not remove a removable one)
+```
+
 ```css
 /* Style by the reflected attribute; ::part() reaches the inner nodes. */
 l-tag[selected]::part(base) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "luxen-ui",
-  "version": "0.18.0",
+  "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",