luxen-ui 0.24.0 → 0.26.0

package/dist/metadata/tooltip.json

@@ -15,22 +15,6 @@
     "js": "luxen-ui/tooltip"
   },
   "properties": [
-    {
-      "name": "for",
-      "attribute": "for",
-      "type": "string",
-      "default": "''",
-      "reflects": true,
-      "description": "The HTML id of the element triggering the tooltip."
-    },
-    {
-      "name": "placement",
-      "attribute": "placement",
-      "type": "Placement",
-      "default": "'top'",
-      "reflects": false,
-      "description": "The preferred placement of the tooltip."
-    },
     {
       "name": "distance",
       "attribute": "distance",
@@ -40,12 +24,12 @@
       "description": "The distance in pixels from the target element."
     },
     {
-      "name": "showDelay",
-      "attribute": "show-delay",
-      "type": "number",
-      "default": "0",
-      "reflects": false,
-      "description": "Milliseconds the pointer must dwell on the trigger before the tooltip\nshows. Applies to `hover` only — focus shows immediately."
+      "name": "for",
+      "attribute": "for",
+      "type": "string",
+      "default": "''",
+      "reflects": true,
+      "description": "The HTML id of the element triggering the tooltip."
     },
     {
       "name": "hideDelay",
@@ -64,12 +48,20 @@
       "description": "Whether or not the tooltip is visible."
     },
     {
-      "name": "withoutArrow",
-      "attribute": "without-arrow",
-      "type": "boolean",
-      "default": "false",
-      "reflects": true,
-      "description": "Hide the directional arrow."
+      "name": "placement",
+      "attribute": "placement",
+      "type": "Placement",
+      "default": "'top'",
+      "reflects": false,
+      "description": "The preferred placement of the tooltip."
+    },
+    {
+      "name": "showDelay",
+      "attribute": "show-delay",
+      "type": "number",
+      "default": "0",
+      "reflects": false,
+      "description": "Milliseconds the pointer must dwell on the trigger before the tooltip\nshows. Applies to `hover` only — focus shows immediately."
     },
     {
       "name": "trigger",
@@ -78,6 +70,14 @@
       "default": "'hover focus'",
       "reflects": false,
       "description": "Space-separated list of trigger modes: `hover`, `focus`, `click`, `manual`."
+    },
+    {
+      "name": "withoutArrow",
+      "attribute": "without-arrow",
+      "type": "boolean",
+      "default": "false",
+      "reflects": true,
+      "description": "Hide the directional arrow."
     }
   ],
   "attributes": [],
@@ -96,16 +96,16 @@
       "description": ""
     },
     {
-      "name": "toggle",
+      "name": "reposition",
       "params": [],
       "returns": null,
-      "description": ""
+      "description": "Recompute the position against the current trigger. Use it when you move\nthe anchor yourself and the tooltip has to follow. No-op when closed;\nhides if the anchor is gone."
     },
     {
-      "name": "reposition",
+      "name": "toggle",
       "params": [],
       "returns": null,
-      "description": "Recompute the position against the current trigger. Use it when you move\nthe anchor yourself and the tooltip has to follow. No-op when closed;\nhides if the anchor is gone."
+      "description": ""
     }
   ],
   "slots": [
@@ -116,50 +116,50 @@
   ],
   "cssClasses": [],
   "cssParts": [
-    {
-      "name": "body",
-      "description": "The tooltip popover container."
-    },
     {
       "name": "arrow",
       "description": "The directional arrow element."
+    },
+    {
+      "name": "body",
+      "description": "The tooltip popover container."
     }
   ],
   "cssProperties": [
     {
-      "name": "--background-color",
-      "default": null,
-      "description": "Background color for this tooltip instance. Defaults to the global `--l-tooltip-background-color` token (a neutral inverse surface, dark in light mode / light in dark mode) — override that token to re-skin every tooltip at once."
+      "name": "--arrow-size",
+      "default": "6px",
+      "description": "Arrow size."
     },
     {
-      "name": "--text-color",
+      "name": "--background-color",
       "default": null,
-      "description": "Text color. If unset, auto-derived from `--background-color` luminance."
+      "description": "Background color for this tooltip instance. Defaults to the global `--l-tooltip-background-color` token (a neutral inverse surface, dark in light mode / light in dark mode) — override that token to re-skin every tooltip at once."
     },
     {
       "name": "--border-radius",
       "default": "4px",
       "description": "Border radius."
     },
+    {
+      "name": "--hide-duration",
+      "default": "150ms",
+      "description": "Hide animation duration."
+    },
     {
       "name": "--max-width",
       "default": "180px",
       "description": "Maximum width."
     },
-    {
-      "name": "--arrow-size",
-      "default": "6px",
-      "description": "Arrow size."
-    },
     {
       "name": "--show-duration",
       "default": "150ms",
       "description": "Show animation duration."
     },
     {
-      "name": "--hide-duration",
-      "default": "150ms",
-      "description": "Hide animation duration."
+      "name": "--text-color",
+      "default": null,
+      "description": "Text color. If unset, auto-derived from `--background-color` luminance."
     }
   ],
   "commands": [],

package/dist/metadata/tree-item.json

@@ -15,6 +15,22 @@
     "js": "luxen-ui/tree-item"
   },
   "properties": [
+    {
+      "name": "depth",
+      "attribute": null,
+      "type": "number",
+      "default": null,
+      "reflects": false,
+      "description": "Set by `<l-tree>`: depth of the item in the tree (0 = root)."
+    },
+    {
+      "name": "disabled",
+      "attribute": "disabled",
+      "type": "boolean",
+      "default": "false",
+      "reflects": true,
+      "description": "Whether the item is disabled."
+    },
     {
       "name": "expanded",
       "attribute": "expanded",
@@ -24,12 +40,12 @@
       "description": "Whether the item is expanded."
     },
     {
-      "name": "selected",
-      "attribute": "selected",
+      "name": "hasChildren",
+      "attribute": null,
       "type": "boolean",
-      "default": "false",
-      "reflects": true,
-      "description": "Whether the item is selected."
+      "default": null,
+      "reflects": false,
+      "description": "Whether this item has nested tree-item children."
     },
     {
       "name": "indeterminate",
@@ -39,14 +55,6 @@
       "reflects": true,
       "description": "Whether the checkbox is indeterminate (some descendants selected). Managed by\n`<l-tree>` in cascade mode; set it yourself with `independent`."
     },
-    {
-      "name": "disabled",
-      "attribute": "disabled",
-      "type": "boolean",
-      "default": "false",
-      "reflects": true,
-      "description": "Whether the item is disabled."
-    },
     {
       "name": "lazy",
       "attribute": "lazy",
@@ -64,40 +72,32 @@
       "description": "Whether the item is currently loading (shows a spinner)."
     },
     {
-      "name": "showCheckbox",
-      "attribute": null,
+      "name": "selected",
+      "attribute": "selected",
       "type": "boolean",
-      "default": null,
-      "reflects": false,
-      "description": "Set by `<l-tree>`: whether a checkbox is shown."
-    },
-    {
-      "name": "depth",
-      "attribute": null,
-      "type": "number",
-      "default": null,
-      "reflects": false,
-      "description": "Set by `<l-tree>`: depth of the item in the tree (0 = root)."
+      "default": "false",
+      "reflects": true,
+      "description": "Whether the item is selected."
     },
     {
-      "name": "hasChildren",
+      "name": "showCheckbox",
       "attribute": null,
       "type": "boolean",
       "default": null,
       "reflects": false,
-      "description": "Whether this item has nested tree-item children."
+      "description": "Set by `<l-tree>`: whether a checkbox is shown."
     }
   ],
   "attributes": [],
   "events": [
     {
-      "name": "expand",
-      "description": "Fired when the item is expanded.",
+      "name": "collapse",
+      "description": "Fired when the item is collapsed.",
       "cancelable": false
     },
     {
-      "name": "collapse",
-      "description": "Fired when the item is collapsed.",
+      "name": "expand",
+      "description": "Fired when the item is expanded.",
       "cancelable": false
     },
     {
@@ -107,25 +107,6 @@
     }
   ],
   "methods": [
-    {
-      "name": "setPosition",
-      "params": [
-        {
-          "name": "level",
-          "type": "number"
-        },
-        {
-          "name": "posInSet",
-          "type": "number"
-        },
-        {
-          "name": "setSize",
-          "type": "number"
-        }
-      ],
-      "returns": null,
-      "description": "Set by `<l-tree>`: ARIA position within the tree. `level` is 1-based depth,\n`posInSet`/`setSize` describe the item's rank among its siblings. These let\nscreen readers announce \"level 2, 3 of 5\" even when `lazy` children keep the\nfull set out of the DOM."
-    },
     {
       "name": "getChildrenItems",
       "params": [
@@ -137,6 +118,12 @@
       "returns": "TreeItem[]",
       "description": "Returns the child `<l-tree-item>` elements directly under this one."
     },
+    {
+      "name": "getTextLabel",
+      "params": [],
+      "returns": "string",
+      "description": "Returns the text label of this item."
+    },
     {
       "name": "isLeaf",
       "params": [],
@@ -144,10 +131,23 @@
       "description": "Returns true if this item has no expandable children."
     },
     {
-      "name": "getTextLabel",
-      "params": [],
-      "returns": "string",
-      "description": "Returns the text label of this item."
+      "name": "setPosition",
+      "params": [
+        {
+          "name": "level",
+          "type": "number"
+        },
+        {
+          "name": "posInSet",
+          "type": "number"
+        },
+        {
+          "name": "setSize",
+          "type": "number"
+        }
+      ],
+      "returns": null,
+      "description": "Set by `<l-tree>`: ARIA position within the tree. `level` is 1-based depth,\n`posInSet`/`setSize` describe the item's rank among its siblings. These let\nscreen readers announce \"level 2, 3 of 5\" even when `lazy` children keep the\nfull set out of the DOM."
     },
     {
       "name": "toggle",
@@ -162,24 +162,24 @@
       "description": "Label content (kept to a single row)."
     },
     {
-      "name": "prefix",
-      "description": "Leading content before the label (e.g. icon)."
+      "name": "collapse-icon",
+      "description": "Icon shown when the item is expanded."
     },
     {
-      "name": "suffix",
-      "description": "Trailing content."
+      "name": "content",
+      "description": "Block content that belongs to the item but not to its header row (e.g. comment body, action bar). Hidden when a branch is collapsed."
     },
     {
       "name": "expand-icon",
       "description": "Icon shown when the item is collapsed."
     },
     {
-      "name": "collapse-icon",
-      "description": "Icon shown when the item is expanded."
+      "name": "prefix",
+      "description": "Leading content before the label (e.g. icon)."
     },
     {
-      "name": "content",
-      "description": "Block content that belongs to the item but not to its header row (e.g. comment body, action bar). Hidden when a branch is collapsed."
+      "name": "suffix",
+      "description": "Trailing content."
     }
   ],
   "cssClasses": [],
@@ -189,28 +189,28 @@
       "description": "The item row."
     },
     {
-      "name": "expand-button",
-      "description": "The chevron toggle area."
+      "name": "branch",
+      "description": "Wrapper around the content and children slots; carries the indent guide."
     },
     {
       "name": "checkbox",
       "description": "The native checkbox input."
     },
     {
-      "name": "label",
-      "description": "The label container."
-    },
-    {
-      "name": "branch",
-      "description": "Wrapper around the content and children slots; carries the indent guide."
+      "name": "children",
+      "description": "The nested items container."
     },
     {
       "name": "content",
       "description": "The content slot wrapper (block area between the row and the children)."
     },
     {
-      "name": "children",
-      "description": "The nested items container."
+      "name": "expand-button",
+      "description": "The chevron toggle area."
+    },
+    {
+      "name": "label",
+      "description": "The label container."
     }
   ],
   "cssProperties": [],

package/dist/metadata/tree.json

@@ -15,14 +15,6 @@
     "js": "luxen-ui/tree"
   },
   "properties": [
-    {
-      "name": "selection",
-      "attribute": "selection",
-      "type": "TreeSelection",
-      "default": "'single'",
-      "reflects": true,
-      "description": "Selection behaviour:\n- `single` (default): at most one item selected via `aria-selected`.\n- `multiple`: any number of items selected. Checkboxes are rendered.\n- `leaf`: only leaf items can be selected (single). Branches just toggle.\n- `none`: purely navigable, no selection state."
-    },
     {
       "name": "independent",
       "attribute": "independent",
@@ -30,6 +22,14 @@
       "default": "false",
       "reflects": true,
       "description": "When set with `selection=\"multiple\"`, parent and children selection are decoupled:\ntoggling a parent does NOT toggle its descendants and vice versa.\nWithout it, selection cascades both ways and branches may become indeterminate.\n\nIn independent mode the tree never writes `indeterminate`: the consumer owns\nit (e.g. to show a partial state computed from rows not in the DOM). On\nleaving the cascade, the tree clears only the flags its cascade wrote."
+    },
+    {
+      "name": "selection",
+      "attribute": "selection",
+      "type": "TreeSelection",
+      "default": "'single'",
+      "reflects": true,
+      "description": "Selection behaviour:\n- `single` (default): at most one item selected via `aria-selected`.\n- `multiple`: any number of items selected. Checkboxes are rendered.\n- `leaf`: only leaf items can be selected (single). Branches just toggle.\n- `none`: purely navigable, no selection state."
     }
   ],
   "attributes": [],
@@ -41,6 +41,18 @@
     }
   ],
   "methods": [
+    {
+      "name": "collapseAll",
+      "params": [],
+      "returns": null,
+      "description": "Collapses every item."
+    },
+    {
+      "name": "expandAll",
+      "params": [],
+      "returns": null,
+      "description": "Expands every item that has children."
+    },
     {
       "name": "getAllItems",
       "params": [
@@ -57,18 +69,6 @@
       "params": [],
       "returns": "TreeItem[]",
       "description": "Returns currently selected items."
-    },
-    {
-      "name": "expandAll",
-      "params": [],
-      "returns": null,
-      "description": "Expands every item that has children."
-    },
-    {
-      "name": "collapseAll",
-      "params": [],
-      "returns": null,
-      "description": "Collapses every item."
     }
   ],
   "slots": [
@@ -86,14 +86,14 @@
   ],
   "cssProperties": [
     {
-      "name": "--indent-size",
-      "default": "1rem",
-      "description": "Horizontal indent per depth level."
+      "name": "--chevron-size",
+      "default": "1.125rem",
+      "description": "Size of the expand/collapse chevron box."
     },
     {
-      "name": "--indent-guide-width",
-      "default": "1px",
-      "description": "Thickness of the vertical guide line between a parent and its children. Set to `0` to hide guides."
+      "name": "--indent-guide-color",
+      "default": null,
+      "description": "Color of the guide line."
     },
     {
       "name": "--indent-guide-style",
@@ -101,9 +101,19 @@
       "description": "Line style of the guide (`solid`, `dashed`, `dotted`, `double`…)."
     },
     {
-      "name": "--indent-guide-color",
-      "default": null,
-      "description": "Color of the guide line."
+      "name": "--indent-guide-width",
+      "default": "1px",
+      "description": "Thickness of the vertical guide line between a parent and its children. Set to `0` to hide guides."
+    },
+    {
+      "name": "--indent-size",
+      "default": "1rem",
+      "description": "Horizontal indent per depth level."
+    },
+    {
+      "name": "--item-gap",
+      "default": "0.375rem",
+      "description": "Horizontal gap between chevron, prefix, label and suffix on the row; also drives the content slot left indent."
     },
     {
       "name": "--row-height",
@@ -114,16 +124,6 @@
       "name": "--row-padding-inline",
       "default": "0.25rem",
       "description": "Inner inline padding of the row; also drives the content slot left indent and the indent guide column."
-    },
-    {
-      "name": "--chevron-size",
-      "default": "1.125rem",
-      "description": "Size of the expand/collapse chevron box."
-    },
-    {
-      "name": "--item-gap",
-      "default": "0.375rem",
-      "description": "Horizontal gap between chevron, prefix, label and suffix on the row; also drives the content slot left indent."
     }
   ],
   "commands": [],

package/dist/shared/controllers/listbox-nav.d.ts

@@ -32,6 +32,13 @@ export declare class ListboxNavController implements ReactiveController {
     private config;
     /** Index of the active option, or `-1` when none is active. */
     activeIndex: number;
+    /**
+     * Whether the keyboard (not the pointer) last moved the active option. DOM
+     * focus stays on the input, so `:focus-visible` cannot tell: hosts render it
+     * on the listbox (`data-nav="keyboard"`) and the active option then draws the
+     * focus ring, while a pointer-driven one keeps the plain hover tint.
+     */
+    keyboard: boolean;
     constructor(host: ReactiveControllerHost, config: ListboxNavConfig);
     hostConnected(): void;
     /** The DOM id for the option at `index` (matches the rendered option `id`). */

package/dist/shared/controllers/listbox-nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"listbox-nav.d.ts","sourceRoot":"","sources":["../../../src/html/shared/controllers/listbox-nav.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,SAAS,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB,4EAA4E;IAC5E,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,6CAA6C;IAC7C,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,+EAA+E;IAC/E,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,oEAAoE;IACpE,iBAAiB,EAAE,MAAM,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CACpE;AAED;;;;;;;;;GASG;AACH,qBAAa,oBAAqB,YAAW,kBAAkB;IAC7D,OAAO,CAAC,IAAI,CAAyB;IACrC,OAAO,CAAC,MAAM,CAAmB;IAEjC,+DAA+D;IAC/D,WAAW,SAAM;IAEjB,YAAY,IAAI,EAAE,sBAAsB,EAAE,MAAM,EAAE,gBAAgB,EAIjE;IAED,aAAa,SAAK;IAElB,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE9B;IAED,6EAA6E;IAC7E,IAAI,gBAAgB,IAAI,MAAM,GAAG,SAAS,CAIzC;IAED,+BAA+B;IAC/B,KAAK,SAIJ;IAED,8EAA8E;IAC9E,SAAS,CAAC,KAAK,EAAE,MAAM,QAItB;IAED,6EAA6E;IAC7E,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,QAOhB;IAED;;;;;;;OAOG;IACH,QAAQ,CAAC,aAAa,MAAO,YAAY,UAQvC;IAEF;;;OAGG;IACH,QAAQ,CAAC,cAAc,MAAO,YAAY,UAGxC;IAEF;;;;OAIG;IACH,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAanC;IAED,OAAO,CAAC,KAAK;IAmBb,OAAO,CAAC,qBAAqB;CAI9B"}
+{"version":3,"file":"listbox-nav.d.ts","sourceRoot":"","sources":["../../../src/html/shared/controllers/listbox-nav.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEtE;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,SAAS,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,MAAM,CAAC;IACvB,4EAA4E;IAC5E,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,6CAA6C;IAC7C,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,+EAA+E;IAC/E,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,oEAAoE;IACpE,iBAAiB,EAAE,MAAM,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CACpE;AAED;;;;;;;;;GASG;AACH,qBAAa,oBAAqB,YAAW,kBAAkB;IAC7D,OAAO,CAAC,IAAI,CAAyB;IACrC,OAAO,CAAC,MAAM,CAAmB;IAEjC,+DAA+D;IAC/D,WAAW,SAAM;IAEjB;;;;;OAKG;IACH,QAAQ,UAAS;IAEjB,YAAY,IAAI,EAAE,sBAAsB,EAAE,MAAM,EAAE,gBAAgB,EAIjE;IAED,aAAa,SAAK;IAElB,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAE9B;IAED,6EAA6E;IAC7E,IAAI,gBAAgB,IAAI,MAAM,GAAG,SAAS,CAIzC;IAED,+BAA+B;IAC/B,KAAK,SAIJ;IAED,8EAA8E;IAC9E,SAAS,CAAC,KAAK,EAAE,MAAM,QAItB;IAED,6EAA6E;IAC7E,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,QAQhB;IAED;;;;;;;OAOG;IACH,QAAQ,CAAC,aAAa,MAAO,YAAY,UAYvC;IAEF;;;OAGG;IACH,QAAQ,CAAC,cAAc,MAAO,YAAY,UAGxC;IAEF;;;;OAIG;IACH,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAanC;IAED,OAAO,CAAC,KAAK;IAmBb,OAAO,CAAC,qBAAqB;CAI9B"}

package/dist/shared/controllers/listbox-nav.js

@@ -12,6 +12,13 @@ export class ListboxNavController {
     constructor(host, config) {
         /** Index of the active option, or `-1` when none is active. */
         this.activeIndex = -1;
+        /**
+         * Whether the keyboard (not the pointer) last moved the active option. DOM
+         * focus stays on the input, so `:focus-visible` cannot tell: hosts render it
+         * on the listbox (`data-nav="keyboard"`) and the active option then draws the
+         * focus ring, while a pointer-driven one keeps the plain hover tint.
+         */
+        this.keyboard = false;
         /**
          * Bind on the `role="listbox"` as `@pointermove`: the option under the mouse
          * becomes the active one, so hover and keyboard share a single highlight (and
@@ -26,6 +33,10 @@ export class ListboxNavController {
             const row = e.target.closest('[role="option"]');
             if (!row)
                 return;
+            if (this.keyboard) {
+                this.keyboard = false;
+                this.host.requestUpdate();
+            }
             const index = Array.prototype.indexOf.call(this.config.getOptionElements() ?? [], row);
             if (index < 0)
                 return;
@@ -74,6 +85,7 @@ export class ListboxNavController {
     }
     /** Move the active option by `diff`, opening the listbox first if closed. */
     move(diff) {
+        this.keyboard = true;
         if (!this.config.isOpen()) {
             this.config.open();
             // Land on the first (Down) or last (Up) option — APG.

package/dist/shared/styles/button-core.css

@@ -88,8 +88,8 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--l-focus-ring);
-    outline-offset: 2px;
+    outline: var(--l-focus-ring-width) solid var(--l-focus-ring-color);
+    outline-offset: var(--l-focus-ring-offset);
   }
 }
 

package/dist/shared/styles/checkbox-appearance.css

@@ -71,8 +71,8 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--l-focus-ring);
-      outline-offset: 2px;
+      outline: var(--l-focus-ring-width) solid var(--l-focus-ring-color);
+      outline-offset: var(--l-focus-ring-offset);
     }
 
     /* High contrast: the checked fill is forced to Canvas, hiding the accent and