luxen-ui 0.11.0 → 0.11.1

package/cdn/custom-elements.json

@@ -1198,102 +1198,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/close-button/close-button.meta.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "CloseButtonMeta",
-          "cssProperties": [
-            {
-              "description": "Button size.",
-              "name": "--size",
-              "default": "36px"
-            },
-            {
-              "description": "Icon color.",
-              "name": "--icon-color"
-            },
-            {
-              "description": "Icon size.",
-              "name": "--icon-size",
-              "default": "24px"
-            },
-            {
-              "description": "Hover ring color (`ring` appearance only).",
-              "name": "--ring-color"
-            },
-            {
-              "description": "Hover ring thickness (`ring` appearance only).",
-              "name": "--ring-tickness"
-            }
-          ],
-          "attributes": [
-            {
-              "description": "ring | square | circle — Visual appearance (matches the imported appearance CSS).",
-              "name": "data-appearance"
-            },
-            {
-              "description": "Invoker command (typically `close`).",
-              "name": "command"
-            },
-            {
-              "description": "ID of the target element to close.",
-              "name": "commandfor"
-            }
-          ],
-          "summary": "A circular/square icon button that renders an X via CSS mask, for dismissing dialogs and panels.",
-          "examples": [
-            {
-              "title": "Ring appearance",
-              "language": "html",
-              "code": "<button class=\"l-close\" data-appearance=\"ring\" aria-label=\"Close\"></button>"
-            }
-          ],
-          "_cssClasses": [
-            {
-              "name": ".l-close",
-              "description": "Base close button with X icon via CSS mask."
-            }
-          ],
-          "customElement": false,
-          "_native": true,
-          "_nativeTag": "button",
-          "selector": ".l-close",
-          "_attributes": [
-            {
-              "name": "data-appearance",
-              "values": [
-                "ring",
-                "square",
-                "circle"
-              ],
-              "description": "Visual appearance (matches the imported appearance CSS)."
-            },
-            {
-              "name": "command",
-              "description": "Invoker command (typically `close`)."
-            },
-            {
-              "name": "commandfor",
-              "description": "ID of the target element to close."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "CloseButtonMeta",
-          "declaration": {
-            "name": "CloseButtonMeta",
-            "module": "src/html/elements/close-button/close-button.meta.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/checkbox/checkbox.meta.ts",
@@ -1398,6 +1302,102 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/close-button/close-button.meta.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CloseButtonMeta",
+          "cssProperties": [
+            {
+              "description": "Button size.",
+              "name": "--size",
+              "default": "36px"
+            },
+            {
+              "description": "Icon color.",
+              "name": "--icon-color"
+            },
+            {
+              "description": "Icon size.",
+              "name": "--icon-size",
+              "default": "24px"
+            },
+            {
+              "description": "Hover ring color (`ring` appearance only).",
+              "name": "--ring-color"
+            },
+            {
+              "description": "Hover ring thickness (`ring` appearance only).",
+              "name": "--ring-tickness"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "ring | square | circle — Visual appearance (matches the imported appearance CSS).",
+              "name": "data-appearance"
+            },
+            {
+              "description": "Invoker command (typically `close`).",
+              "name": "command"
+            },
+            {
+              "description": "ID of the target element to close.",
+              "name": "commandfor"
+            }
+          ],
+          "summary": "A circular/square icon button that renders an X via CSS mask, for dismissing dialogs and panels.",
+          "examples": [
+            {
+              "title": "Ring appearance",
+              "language": "html",
+              "code": "<button class=\"l-close\" data-appearance=\"ring\" aria-label=\"Close\"></button>"
+            }
+          ],
+          "_cssClasses": [
+            {
+              "name": ".l-close",
+              "description": "Base close button with X icon via CSS mask."
+            }
+          ],
+          "customElement": false,
+          "_native": true,
+          "_nativeTag": "button",
+          "selector": ".l-close",
+          "_attributes": [
+            {
+              "name": "data-appearance",
+              "values": [
+                "ring",
+                "square",
+                "circle"
+              ],
+              "description": "Visual appearance (matches the imported appearance CSS)."
+            },
+            {
+              "name": "command",
+              "description": "Invoker command (typically `close`)."
+            },
+            {
+              "name": "commandfor",
+              "description": "ID of the target element to close."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CloseButtonMeta",
+          "declaration": {
+            "name": "CloseButtonMeta",
+            "module": "src/html/elements/close-button/close-button.meta.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/dialog/dialog.ts",
@@ -5477,6 +5477,28 @@
           "kind": "class",
           "description": "",
           "name": "Tabs",
+          "cssProperties": [
+            {
+              "description": "`line` variant: color of the active underline that slides under the selected tab.",
+              "name": "--indicator-color",
+              "default": "var(--l-color-text-primary)"
+            },
+            {
+              "description": "`line` variant: thickness of the active underline.",
+              "name": "--indicator-thickness",
+              "default": "2px"
+            },
+            {
+              "description": "`line` variant: color of the static bottom border the tabs sit on.",
+              "name": "--track-color",
+              "default": "var(--l-color-border)"
+            },
+            {
+              "description": "`line` variant: thickness of the static bottom border.",
+              "name": "--track-thickness",
+              "default": "1px"
+            }
+          ],
           "members": [
             {
               "kind": "field",

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

@@ -1,4 +1,4 @@
-import{i as e}from"../../chunks/lit.js";import{a as t,t as n}from"../../chunks/lit-html.js";import{LuxenElement as r}from"../../shared/luxen-element.js";import{i,t as a}from"../../chunks/decorate.js";import o from"../../shared/styles/host.styles.js";var s=e(`:host{display:block}:host([disabled]){pointer-events:none;opacity:.5}.item{cursor:pointer;color:var(--l-color-text-primary,CanvasText);white-space:nowrap;text-align:start;border-radius:4px;outline:none;align-items:center;gap:8px;padding:.375rem .5rem;font-size:.875rem;line-height:1.5;display:flex}.item:focus-visible{background:var(--l-color-bg-state-hover)}@media (hover:hover){.item:hover{background:var(--l-color-bg-state-hover)}}.check{flex-shrink:0;width:16px;display:flex}:host(:not([checked])) .check svg{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;display:flex}.label{flex:1}`),c=class extends r{static{this.styles=[o,s]}#e=``;get value(){return this.#e}set value(e){this.#e=e}#t=!1;get disabled(){return this.#t}set disabled(e){this.#t=e}#n=`normal`;get type(){return this.#n}set type(e){this.#n=e}#r=!1;get checked(){return this.#r}set checked(e){this.#r=e}getTextLabel(){return(this.textContent??``).trim()}render(){let e=this.type===`checkbox`;return t`
+import{i as e}from"../../chunks/lit.js";import{a as t,t as n}from"../../chunks/lit-html.js";import{LuxenElement as r}from"../../shared/luxen-element.js";import{i,t as a}from"../../chunks/decorate.js";import o from"../../shared/styles/host.styles.js";var s=e(`:host{display:block}:host([disabled]){pointer-events:none;opacity:.5}.item{box-sizing:border-box;cursor:pointer;min-block-size:36px;color:var(--l-color-text-primary,CanvasText);white-space:nowrap;text-align:start;border-radius:4px;outline:none;align-items:center;gap:8px;padding:.375rem .5rem;font-size:.875rem;line-height:1.5;display:flex}.item:focus-visible{background:var(--l-color-bg-state-hover)}@media (hover:hover){.item:hover{background:var(--l-color-bg-state-hover)}}.check{flex-shrink:0;width:16px;display:flex}:host(:not([checked])) .check svg{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0;display:flex}.label{flex:1}`),c=class extends r{static{this.styles=[o,s]}#e=``;get value(){return this.#e}set value(e){this.#e=e}#t=!1;get disabled(){return this.#t}set disabled(e){this.#t=e}#n=`normal`;get type(){return this.#n}set type(e){this.#n=e}#r=!1;get checked(){return this.#r}set checked(e){this.#r=e}getTextLabel(){return(this.textContent??``).trim()}render(){let e=this.type===`checkbox`;return t`
       <div
         class="item"
         role=${e?`menuitemcheckbox`:`menuitem`}

package/cdn/elements/dropdown-item/dropdown-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.js","names":[],"sources":["../../../src/html/elements/dropdown-item/dropdown-item.css?inline","../../../src/html/elements/dropdown-item/dropdown-item.ts"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0.375rem 0.5rem;\n  cursor: pointer;\n  outline: none;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  color: var(--l-color-text-primary, CanvasText);\n  white-space: nowrap;\n  text-align: start;\n}\n\n.item:focus-visible {\n  background: var(--l-color-bg-state-hover);\n}\n\n@media (hover: hover) {\n  .item:hover {\n    background: var(--l-color-bg-state-hover);\n  }\n}\n\n.check {\n  display: flex;\n  width: 16px;\n  flex-shrink: 0;\n}\n\n:host(:not([checked])) .check svg {\n  visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  display: flex;\n  flex-shrink: 0;\n}\n\n.label {\n  flex: 1;\n}\n","import { html, nothing, unsafeCSS } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport { property } from 'lit/decorators.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport rawStyles from './dropdown-item.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * A menu item for use inside `<l-dropdown>`.\n *\n * @slot - Label text.\n * @slot prefix - Leading content (e.g. icon).\n * @slot suffix - Trailing content.\n *\n * @cssproperty --color - Text color.\n *\n * @customElement l-dropdown-item\n */\nexport class DropdownItem extends LuxenElement {\n  static override styles = [hostStyles, styles];\n\n  /** The value associated with this item. */\n  @property()\n  accessor value = '';\n\n  /** Disables the item. */\n  @property({ type: Boolean, reflect: true })\n  accessor disabled = false;\n\n  /** The type of item: `normal` or `checkbox`. */\n  @property()\n  accessor type: 'normal' | 'checkbox' = 'normal';\n\n  /** Whether the checkbox item is checked. */\n  @property({ type: Boolean, reflect: true })\n  accessor checked = false;\n\n  /** Returns the text label of this item. */\n  getTextLabel(): string {\n    return (this.textContent ?? '').trim();\n  }\n\n  override render() {\n    const isCheckbox = this.type === 'checkbox';\n\n    return html`\n      <div\n        class=\"item\"\n        role=${isCheckbox ? 'menuitemcheckbox' : 'menuitem'}\n        aria-checked=${isCheckbox ? String(this.checked) : nothing}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        tabindex=\"-1\"\n      >\n        ${isCheckbox\n          ? html`\n              <span\n                class=\"check\"\n                aria-hidden=\"true\"\n              >\n                <svg\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            `\n          : html` <slot name=\"prefix\"></slot> `}\n        <span class=\"label\"><slot></slot></span>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"0PCMA,IAAM,EAAS,EAAU,inBAAU,CAatB,EAAb,cAAkC,CAAa,oBACpB,CAAC,EAAY,EAAO,IAI5B,OAAR,OAAA,0CAIW,OAAX,UAAA,6CAI8B,aAA9B,MAAA,yCAIU,OAAV,SAAA,yCAGT,cAAuB,CACrB,OAAQ,KAAK,aAAe,IAAI,MAAM,CAGxC,QAAkB,CAChB,IAAM,EAAa,KAAK,OAAS,WAEjC,MAAO,EAAI;;;eAGA,EAAa,mBAAqB,WAAW;uBACrC,EAAa,OAAO,KAAK,QAAQ,CAAG,EAAQ;wBAC3C,KAAK,SAAW,OAAS,EAAQ;;;UAG/C,EACE,CAAI;;;;;;;;;;;;;;;;;;;;cAqBJ,CAAI,gCAAgC;;;;WArD7C,GAAU,CAAA,CAAA,EAAA,UAAA,QAAA,KAAA,IAIV,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,WAAA,KAAA,IAI1C,GAAU,CAAA,CAAA,EAAA,UAAA,OAAA,KAAA,IAIV,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,UAAA,KAAA"}
+{"version":3,"file":"dropdown-item.js","names":[],"sources":["../../../src/html/elements/dropdown-item/dropdown-item.css?inline","../../../src/html/elements/dropdown-item/dropdown-item.ts"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  box-sizing: border-box;\n  min-block-size: 36px;\n  padding: 0.375rem 0.5rem;\n  cursor: pointer;\n  outline: none;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  color: var(--l-color-text-primary, CanvasText);\n  white-space: nowrap;\n  text-align: start;\n}\n\n.item:focus-visible {\n  background: var(--l-color-bg-state-hover);\n}\n\n@media (hover: hover) {\n  .item:hover {\n    background: var(--l-color-bg-state-hover);\n  }\n}\n\n.check {\n  display: flex;\n  width: 16px;\n  flex-shrink: 0;\n}\n\n:host(:not([checked])) .check svg {\n  visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  display: flex;\n  flex-shrink: 0;\n}\n\n.label {\n  flex: 1;\n}\n","import { html, nothing, unsafeCSS } from 'lit';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport { property } from 'lit/decorators.js';\nimport hostStyles from '../../shared/styles/host.styles.js';\nimport rawStyles from './dropdown-item.css?inline';\n\nconst styles = unsafeCSS(rawStyles);\n\n/**\n * A menu item for use inside `<l-dropdown>`.\n *\n * @slot - Label text.\n * @slot prefix - Leading content (e.g. icon).\n * @slot suffix - Trailing content.\n *\n * @cssproperty --color - Text color.\n *\n * @customElement l-dropdown-item\n */\nexport class DropdownItem extends LuxenElement {\n  static override styles = [hostStyles, styles];\n\n  /** The value associated with this item. */\n  @property()\n  accessor value = '';\n\n  /** Disables the item. */\n  @property({ type: Boolean, reflect: true })\n  accessor disabled = false;\n\n  /** The type of item: `normal` or `checkbox`. */\n  @property()\n  accessor type: 'normal' | 'checkbox' = 'normal';\n\n  /** Whether the checkbox item is checked. */\n  @property({ type: Boolean, reflect: true })\n  accessor checked = false;\n\n  /** Returns the text label of this item. */\n  getTextLabel(): string {\n    return (this.textContent ?? '').trim();\n  }\n\n  override render() {\n    const isCheckbox = this.type === 'checkbox';\n\n    return html`\n      <div\n        class=\"item\"\n        role=${isCheckbox ? 'menuitemcheckbox' : 'menuitem'}\n        aria-checked=${isCheckbox ? String(this.checked) : nothing}\n        aria-disabled=${this.disabled ? 'true' : nothing}\n        tabindex=\"-1\"\n      >\n        ${isCheckbox\n          ? html`\n              <span\n                class=\"check\"\n                aria-hidden=\"true\"\n              >\n                <svg\n                  width=\"16\"\n                  height=\"16\"\n                  viewBox=\"0 0 16 16\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            `\n          : html` <slot name=\"prefix\"></slot> `}\n        <span class=\"label\"><slot></slot></span>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n}\n"],"mappings":"0PCMA,IAAM,EAAS,EAAU,2pBAAU,CAatB,EAAb,cAAkC,CAAa,oBACpB,CAAC,EAAY,EAAO,IAI5B,OAAR,OAAA,0CAIW,OAAX,UAAA,6CAI8B,aAA9B,MAAA,yCAIU,OAAV,SAAA,yCAGT,cAAuB,CACrB,OAAQ,KAAK,aAAe,IAAI,MAAM,CAGxC,QAAkB,CAChB,IAAM,EAAa,KAAK,OAAS,WAEjC,MAAO,EAAI;;;eAGA,EAAa,mBAAqB,WAAW;uBACrC,EAAa,OAAO,KAAK,QAAQ,CAAG,EAAQ;wBAC3C,KAAK,SAAW,OAAS,EAAQ;;;UAG/C,EACE,CAAI;;;;;;;;;;;;;;;;;;;;cAqBJ,CAAI,gCAAgC;;;;WArD7C,GAAU,CAAA,CAAA,EAAA,UAAA,QAAA,KAAA,IAIV,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,WAAA,KAAA,IAI1C,GAAU,CAAA,CAAA,EAAA,UAAA,OAAA,KAAA,IAIV,EAAS,CAAE,KAAM,QAAS,QAAS,GAAM,CAAC,CAAA,CAAA,EAAA,UAAA,UAAA,KAAA"}

package/cdn/elements/tabs/tabs.d.ts

@@ -19,6 +19,11 @@ export type TabsOrientation = 'horizontal' | 'vertical';
  *
  * @event change - Fired when the active tab changes. Detail: `{ 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.
+ *
  * @customElement l-tabs
  */
 export declare class Tabs extends LuxenElement {

package/cdn/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;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAAa,IAAK,SAAQ,YAAY;IAC3B,gBAAgB;IAIzB,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,OAAO,CAAqB;IAEpC,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;IAMjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAW9C,OAAO,CAAC,MAAM;IAoDd,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,QAAQ,CAQd;IAEF,OAAO,CAAC,UAAU,CAkChB;CACH"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,IAAK,SAAQ,YAAY;IAC3B,gBAAgB;IAIzB,OAAO,CAAC,WAAW,CAAoB;IACvC,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,KAAK,CAA2B;IACxC,OAAO,CAAC,OAAO,CAAqB;IAEpC,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;IAMjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAW9C,OAAO,CAAC,MAAM;IAoDd,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IA2BlB,OAAO,CAAC,gBAAgB;IAkBxB,OAAO,CAAC,QAAQ,CAQd;IAEF,OAAO,CAAC,UAAU,CAkChB;CACH"}

package/cdn/elements/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/html/elements/tabs/tabs.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport { uniqueId } from '../../registry.js';\n\nexport type TabsVariant = 'enclosed' | 'line';\nexport type TabsOrientation = 'horizontal' | 'vertical';\n\n/**\n * @summary A tabs component that progressively enhances light DOM markup\n * with ARIA roles, keyboard navigation, and animated indicators.\n *\n * @example\n * ```html\n * <l-tabs variant=\"enclosed\">\n *   <div>\n *     <button>Tab 1</button>\n *     <button>Tab 2</button>\n *   </div>\n *   <div>Content 1</div>\n *   <div>Content 2</div>\n * </l-tabs>\n * ```\n *\n * @event change - Fired when the active tab changes. Detail: `{ index: number, name: string | null }`.\n *\n * @customElement l-tabs\n */\nexport class Tabs extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  private _instanceId = uniqueId('tabs');\n  private _tablistEl: HTMLElement | null = null;\n  private _tabs: HTMLButtonElement[] = [];\n  private _panels: HTMLElement[] = [];\n\n  /** Visual variant. */\n  @property({ reflect: true })\n  variant: TabsVariant = 'line';\n\n  /** Index of the active tab (0-based). */\n  @property({ reflect: true })\n  value = '0';\n\n  /** Stretch tabs to fill container width. */\n  @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n  fullWidth = false;\n\n  /** Tab orientation. */\n  @property({ reflect: true })\n  orientation: TabsOrientation = 'horizontal';\n\n  // --- Lifecycle ---\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Defer setup to let light DOM children parse\n    requestAnimationFrame(() => this._setup());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._teardown();\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('value') && this._tabs.length) {\n      this._selectTab(Number(this.value), false);\n    }\n    if (changed.has('orientation') && this._tablistEl) {\n      this._tablistEl.setAttribute('aria-orientation', this.orientation);\n    }\n  }\n\n  // --- Setup / Teardown ---\n\n  private _setup() {\n    const children = Array.from(this.children) as HTMLElement[];\n    if (children.length < 2) return;\n\n    // First child is the tablist container\n    this._tablistEl = children[0];\n    this._tablistEl.setAttribute('role', 'tablist');\n    this._tablistEl.setAttribute('aria-orientation', this.orientation);\n\n    // Buttons inside tablist become tabs\n    this._tabs = Array.from(this._tablistEl.querySelectorAll('button'));\n\n    // Remaining children become panels\n    this._panels = children.slice(1);\n\n    const activeIndex = Number(this.value) || 0;\n\n    // Enhance tabs\n    for (let i = 0; i < this._tabs.length; i++) {\n      const tab = this._tabs[i];\n      const panel = this._panels[i];\n      const name = tab.getAttribute('name') ?? String(i);\n      const tabId = `${this._instanceId}-tab-${name}`;\n      const panelId = `${this._instanceId}-panel-${name}`;\n\n      tab.setAttribute('role', 'tab');\n      tab.setAttribute('id', tabId);\n      tab.setAttribute('aria-selected', String(i === activeIndex));\n      tab.setAttribute('tabindex', i === activeIndex ? '0' : '-1');\n\n      if (panel) {\n        tab.setAttribute('aria-controls', panelId);\n        panel.setAttribute('role', 'tabpanel');\n        panel.setAttribute('id', panelId);\n        panel.setAttribute('aria-labelledby', tabId);\n        panel.setAttribute('tabindex', '0');\n        if (i !== activeIndex) {\n          panel.hidden = true;\n        } else {\n          panel.hidden = false;\n        }\n      }\n    }\n\n    // Attach listeners\n    this._tablistEl.addEventListener('click', this._onClick);\n    this._tablistEl.addEventListener('keydown', this._onKeyDown);\n\n    // Initial indicator position\n    requestAnimationFrame(() => this._updateIndicator());\n  }\n\n  private _teardown() {\n    this._tablistEl?.removeEventListener('click', this._onClick);\n    this._tablistEl?.removeEventListener('keydown', this._onKeyDown);\n  }\n\n  // --- Tab selection ---\n\n  private _selectTab(index: number, emitEvent = true) {\n    if (index < 0 || index >= this._tabs.length) return;\n\n    for (let i = 0; i < this._tabs.length; i++) {\n      const tab = this._tabs[i];\n      const panel = this._panels[i];\n      const isActive = i === index;\n\n      tab.setAttribute('aria-selected', String(isActive));\n      tab.setAttribute('tabindex', isActive ? '0' : '-1');\n\n      if (panel) {\n        panel.hidden = !isActive;\n      }\n    }\n\n    this.value = String(index);\n    this._updateIndicator();\n\n    if (emitEvent) {\n      const name = this._tabs[index]?.getAttribute('name') ?? null;\n      this.emit('change', { detail: { index, name } });\n    }\n  }\n\n  // --- Indicator ---\n\n  private _updateIndicator() {\n    if (!this._tablistEl) return;\n    const activeTab = this._tabs[Number(this.value)];\n    if (!activeTab) return;\n\n    const isVertical = this.orientation === 'vertical';\n\n    if (isVertical) {\n      this._tablistEl.style.setProperty('--_indicator-top', `${activeTab.offsetTop}px`);\n      this._tablistEl.style.setProperty('--_indicator-height', `${activeTab.offsetHeight}px`);\n    } else {\n      this._tablistEl.style.setProperty('--_indicator-left', `${activeTab.offsetLeft}px`);\n      this._tablistEl.style.setProperty('--_indicator-width', `${activeTab.offsetWidth}px`);\n    }\n  }\n\n  // --- Event handlers ---\n\n  private _onClick = (e: Event) => {\n    const tab = (e.target as HTMLElement).closest<HTMLButtonElement>('[role=\"tab\"]');\n    if (!tab) return;\n    const index = this._tabs.indexOf(tab);\n    if (index >= 0) {\n      this._selectTab(index);\n      tab.focus();\n    }\n  };\n\n  private _onKeyDown = (e: KeyboardEvent) => {\n    const target = e.target as HTMLElement;\n    if (target.getAttribute('role') !== 'tab') return;\n\n    const isHorizontal = this.orientation === 'horizontal';\n    const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n    const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n\n    let index = this._tabs.indexOf(target as HTMLButtonElement);\n\n    switch (e.key) {\n      case nextKey:\n        e.preventDefault();\n        index = (index + 1) % this._tabs.length;\n        this._selectTab(index);\n        this._tabs[index].focus();\n        break;\n      case prevKey:\n        e.preventDefault();\n        index = (index - 1 + this._tabs.length) % this._tabs.length;\n        this._selectTab(index);\n        this._tabs[index].focus();\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._selectTab(0);\n        this._tabs[0].focus();\n        break;\n      case 'End':\n        e.preventDefault();\n        this._selectTab(this._tabs.length - 1);\n        this._tabs[this._tabs.length - 1].focus();\n        break;\n    }\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../../src/html/elements/tabs/tabs.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { LuxenElement } from '../../shared/luxen-element.js';\nimport { uniqueId } from '../../registry.js';\n\nexport type TabsVariant = 'enclosed' | 'line';\nexport type TabsOrientation = 'horizontal' | 'vertical';\n\n/**\n * @summary A tabs component that progressively enhances light DOM markup\n * with ARIA roles, keyboard navigation, and animated indicators.\n *\n * @example\n * ```html\n * <l-tabs variant=\"enclosed\">\n *   <div>\n *     <button>Tab 1</button>\n *     <button>Tab 2</button>\n *   </div>\n *   <div>Content 1</div>\n *   <div>Content 2</div>\n * </l-tabs>\n * ```\n *\n * @event change - Fired when the active tab changes. Detail: `{ index: number, name: string | null }`.\n *\n * @cssproperty [--indicator-color=var(--l-color-text-primary)] - `line` variant: color of the active underline that slides under the selected tab.\n * @cssproperty [--indicator-thickness=2px] - `line` variant: thickness of the active underline.\n * @cssproperty [--track-color=var(--l-color-border)] - `line` variant: color of the static bottom border the tabs sit on.\n * @cssproperty [--track-thickness=1px] - `line` variant: thickness of the static bottom border.\n *\n * @customElement l-tabs\n */\nexport class Tabs extends LuxenElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  private _instanceId = uniqueId('tabs');\n  private _tablistEl: HTMLElement | null = null;\n  private _tabs: HTMLButtonElement[] = [];\n  private _panels: HTMLElement[] = [];\n\n  /** Visual variant. */\n  @property({ reflect: true })\n  variant: TabsVariant = 'line';\n\n  /** Index of the active tab (0-based). */\n  @property({ reflect: true })\n  value = '0';\n\n  /** Stretch tabs to fill container width. */\n  @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n  fullWidth = false;\n\n  /** Tab orientation. */\n  @property({ reflect: true })\n  orientation: TabsOrientation = 'horizontal';\n\n  // --- Lifecycle ---\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Defer setup to let light DOM children parse\n    requestAnimationFrame(() => this._setup());\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._teardown();\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('value') && this._tabs.length) {\n      this._selectTab(Number(this.value), false);\n    }\n    if (changed.has('orientation') && this._tablistEl) {\n      this._tablistEl.setAttribute('aria-orientation', this.orientation);\n    }\n  }\n\n  // --- Setup / Teardown ---\n\n  private _setup() {\n    const children = Array.from(this.children) as HTMLElement[];\n    if (children.length < 2) return;\n\n    // First child is the tablist container\n    this._tablistEl = children[0];\n    this._tablistEl.setAttribute('role', 'tablist');\n    this._tablistEl.setAttribute('aria-orientation', this.orientation);\n\n    // Buttons inside tablist become tabs\n    this._tabs = Array.from(this._tablistEl.querySelectorAll('button'));\n\n    // Remaining children become panels\n    this._panels = children.slice(1);\n\n    const activeIndex = Number(this.value) || 0;\n\n    // Enhance tabs\n    for (let i = 0; i < this._tabs.length; i++) {\n      const tab = this._tabs[i];\n      const panel = this._panels[i];\n      const name = tab.getAttribute('name') ?? String(i);\n      const tabId = `${this._instanceId}-tab-${name}`;\n      const panelId = `${this._instanceId}-panel-${name}`;\n\n      tab.setAttribute('role', 'tab');\n      tab.setAttribute('id', tabId);\n      tab.setAttribute('aria-selected', String(i === activeIndex));\n      tab.setAttribute('tabindex', i === activeIndex ? '0' : '-1');\n\n      if (panel) {\n        tab.setAttribute('aria-controls', panelId);\n        panel.setAttribute('role', 'tabpanel');\n        panel.setAttribute('id', panelId);\n        panel.setAttribute('aria-labelledby', tabId);\n        panel.setAttribute('tabindex', '0');\n        if (i !== activeIndex) {\n          panel.hidden = true;\n        } else {\n          panel.hidden = false;\n        }\n      }\n    }\n\n    // Attach listeners\n    this._tablistEl.addEventListener('click', this._onClick);\n    this._tablistEl.addEventListener('keydown', this._onKeyDown);\n\n    // Initial indicator position\n    requestAnimationFrame(() => this._updateIndicator());\n  }\n\n  private _teardown() {\n    this._tablistEl?.removeEventListener('click', this._onClick);\n    this._tablistEl?.removeEventListener('keydown', this._onKeyDown);\n  }\n\n  // --- Tab selection ---\n\n  private _selectTab(index: number, emitEvent = true) {\n    if (index < 0 || index >= this._tabs.length) return;\n\n    for (let i = 0; i < this._tabs.length; i++) {\n      const tab = this._tabs[i];\n      const panel = this._panels[i];\n      const isActive = i === index;\n\n      tab.setAttribute('aria-selected', String(isActive));\n      tab.setAttribute('tabindex', isActive ? '0' : '-1');\n\n      if (panel) {\n        panel.hidden = !isActive;\n      }\n    }\n\n    this.value = String(index);\n    this._updateIndicator();\n\n    if (emitEvent) {\n      const name = this._tabs[index]?.getAttribute('name') ?? null;\n      this.emit('change', { detail: { index, name } });\n    }\n  }\n\n  // --- Indicator ---\n\n  private _updateIndicator() {\n    if (!this._tablistEl) return;\n    const activeTab = this._tabs[Number(this.value)];\n    if (!activeTab) return;\n\n    const isVertical = this.orientation === 'vertical';\n\n    if (isVertical) {\n      this._tablistEl.style.setProperty('--_indicator-top', `${activeTab.offsetTop}px`);\n      this._tablistEl.style.setProperty('--_indicator-height', `${activeTab.offsetHeight}px`);\n    } else {\n      this._tablistEl.style.setProperty('--_indicator-left', `${activeTab.offsetLeft}px`);\n      this._tablistEl.style.setProperty('--_indicator-width', `${activeTab.offsetWidth}px`);\n    }\n  }\n\n  // --- Event handlers ---\n\n  private _onClick = (e: Event) => {\n    const tab = (e.target as HTMLElement).closest<HTMLButtonElement>('[role=\"tab\"]');\n    if (!tab) return;\n    const index = this._tabs.indexOf(tab);\n    if (index >= 0) {\n      this._selectTab(index);\n      tab.focus();\n    }\n  };\n\n  private _onKeyDown = (e: KeyboardEvent) => {\n    const target = e.target as HTMLElement;\n    if (target.getAttribute('role') !== 'tab') return;\n\n    const isHorizontal = this.orientation === 'horizontal';\n    const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n    const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n\n    let index = this._tabs.indexOf(target as HTMLButtonElement);\n\n    switch (e.key) {\n      case nextKey:\n        e.preventDefault();\n        index = (index + 1) % this._tabs.length;\n        this._selectTab(index);\n        this._tabs[index].focus();\n        break;\n      case prevKey:\n        e.preventDefault();\n        index = (index - 1 + this._tabs.length) % this._tabs.length;\n        this._selectTab(index);\n        this._tabs[index].focus();\n        break;\n      case 'Home':\n        e.preventDefault();\n        this._selectTab(0);\n        this._tabs[0].focus();\n        break;\n      case 'End':\n        e.preventDefault();\n        this._selectTab(this._tabs.length - 1);\n        this._tabs[this._tabs.length - 1].focus();\n        break;\n    }\n  };\n}\n"],"mappings":"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"}

package/cdn/standalone.css

@@ -3771,13 +3771,13 @@ In dark mode, mixes the base color with black (default 15% black).
 
   l-tabs[variant='line'] {
     & [role='tablist'] {
-      border-bottom: 1px solid var(--l-color-border);
+      border-bottom: var(--track-thickness, 1px) solid var(--track-color, var(--l-color-border));
       gap: 0;
 
       &::before {
-        bottom: -1px;
-        height: 2px;
-        background: var(--l-color-text-primary);
+        bottom: calc(-1 * var(--track-thickness, 1px));
+        height: var(--indicator-thickness, 2px);
+        background: var(--indicator-color, var(--l-color-text-primary));
         border-radius: var(--l-radius-full);
       }
     }

package/cdn/standalone.js

@@ -5082,7 +5082,7 @@ __decorate([n$1({ attribute: "min-width" })], Dropdown.prototype, "minWidth", nu
 define("dropdown", Dropdown);
 //#endregion
 //#region src/html/elements/dropdown-item/dropdown-item.ts
-var styles$10 = r$6(":host {\n  display: block;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 0.375rem 0.5rem;\n  cursor: pointer;\n  outline: none;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  color: var(--l-color-text-primary, CanvasText);\n  white-space: nowrap;\n  text-align: start;\n}\n\n.item:focus-visible {\n  background: var(--l-color-bg-state-hover);\n}\n\n@media (hover: hover) {\n  .item:hover {\n    background: var(--l-color-bg-state-hover);\n  }\n}\n\n.check {\n  display: flex;\n  width: 16px;\n  flex-shrink: 0;\n}\n\n:host(:not([checked])) .check svg {\n  visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  display: flex;\n  flex-shrink: 0;\n}\n\n.label {\n  flex: 1;\n}\n");
+var styles$10 = r$6(":host {\n  display: block;\n}\n\n:host([disabled]) {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  box-sizing: border-box;\n  min-block-size: 36px;\n  padding: 0.375rem 0.5rem;\n  cursor: pointer;\n  outline: none;\n  border-radius: 4px;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  color: var(--l-color-text-primary, CanvasText);\n  white-space: nowrap;\n  text-align: start;\n}\n\n.item:focus-visible {\n  background: var(--l-color-bg-state-hover);\n}\n\n@media (hover: hover) {\n  .item:hover {\n    background: var(--l-color-bg-state-hover);\n  }\n}\n\n.check {\n  display: flex;\n  width: 16px;\n  flex-shrink: 0;\n}\n\n:host(:not([checked])) .check svg {\n  visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  display: flex;\n  flex-shrink: 0;\n}\n\n.label {\n  flex: 1;\n}\n");
 /**
 * A menu item for use inside `<l-dropdown>`.
 *
@@ -31486,6 +31486,11 @@ define("sticky-bar", StickyBar);
 *
 * @event change - Fired when the active tab changes. Detail: `{ 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.
+*
 * @customElement l-tabs
 */
 var Tabs = class extends LuxenElement {