luxen-ui 0.25.0 → 0.26.0

package/dist/metadata/switch.json

@@ -17,10 +17,10 @@
   "properties": [],
   "attributes": [
     {
-      "name": "role",
+      "name": "aria-invalid",
       "data": false,
       "values": [],
-      "description": "Must be `switch`. Promotes the native checkbox to a switch for assistive tech and triggers the switch skin / inline field layout."
+      "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
     },
     {
       "name": "checked",
@@ -41,10 +41,10 @@
       "description": "Marks the switch as required for form submission."
     },
     {
-      "name": "aria-invalid",
+      "name": "role",
       "data": false,
       "values": [],
-      "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
+      "description": "Must be `switch`. Promotes the native checkbox to a switch for assistive tech and triggers the switch skin / inline field layout."
     }
   ],
   "events": [],
@@ -58,15 +58,15 @@
   ],
   "cssParts": [],
   "cssProperties": [
-    {
-      "name": "--size",
-      "default": "1.25em",
-      "description": "Track height; the whole control scales from it."
-    },
     {
       "name": "--accent",
       "default": "var(--l-form-control-activated-color)",
       "description": "Track fill when on."
+    },
+    {
+      "name": "--size",
+      "default": "1.25em",
+      "description": "Track height; the whole control scales from it."
     }
   ],
   "commands": [],

package/dist/metadata/table.json

@@ -0,0 +1,88 @@
+{
+  "name": "table",
+  "displayName": "Table",
+  "type": "native",
+  "isCustomElement": false,
+  "tag": null,
+  "nativeTag": "table",
+  "selector": ".l-table",
+  "subItemOf": null,
+  "summary": "Tables display data in rows and columns, so it is easy to scan and compare.",
+  "status": "stable",
+  "appearances": [],
+  "import": {
+    "css": "luxen-ui/css/table",
+    "js": null
+  },
+  "properties": [],
+  "attributes": [
+    {
+      "name": "aria-sort",
+      "data": false,
+      "values": [
+        "ascending",
+        "descending"
+      ],
+      "description": "On the sorted column's `<th>`, which holds a `<button>` (or a link, when the server sorts): shows the direction. A disabled button marks a column the current query cannot sort by; an `.l-button` in a header is another action and keeps its own look."
+    },
+    {
+      "name": "data-align",
+      "data": true,
+      "values": [
+        "start",
+        "center",
+        "end"
+      ],
+      "description": "On a column's `<th>` and `<td>`s: aligns the column. Use `end` for figures; digits are tabular across the table, so they line up. A sort button in an `end` header puts its glyph before the label, keeping the label flush with the figures."
+    },
+    {
+      "name": "data-size",
+      "data": true,
+      "values": [
+        "sm",
+        "lg"
+      ],
+      "description": "Row height, on the control size scale: a control of the same size fits a row. Defaults to the medium size."
+    }
+  ],
+  "events": [],
+  "methods": [],
+  "slots": [],
+  "cssClasses": [
+    {
+      "name": ".l-table",
+      "description": "Applied to the `<table>`. Name it with a `<caption>` (visible or `.l-visually-hidden`) or `aria-label`; head the columns with `<th scope=\"col\">` and each row with the `<th scope=\"row\">` that identifies it."
+    }
+  ],
+  "cssParts": [],
+  "cssProperties": [
+    {
+      "name": "--background-color",
+      "default": "var(--l-color-surface)",
+      "description": "Background of the table. The sticky header repeats it, so it stays opaque over the rows scrolling under it."
+    },
+    {
+      "name": "--border-color",
+      "default": "var(--l-color-divider)",
+      "description": "Rules between rows. The stronger rules under the header and above the totals use `--l-color-border`."
+    },
+    {
+      "name": "--row-height",
+      "default": "calc(var(--l-size-control-md) + 2 * var(--l-spacing-1))",
+      "description": "Minimum row height; content taller than it grows the row."
+    }
+  ],
+  "commands": [],
+  "examples": [
+    {
+      "title": "Basic",
+      "language": "html",
+      "code": "<table class=\"l-table\">\n<caption>Products</caption>\n<thead>\n<tr>\n<th scope=\"col\">SKU</th>\n<th scope=\"col\">Name</th>\n<th scope=\"col\" data-align=\"end\">In stock</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<th scope=\"row\">SKU-1042</th>\n<td>Desk lamp</td>\n<td data-align=\"end\">4,210</td>\n</tr>\n</tbody>\n</table>"
+    },
+    {
+      "title": "Sortable",
+      "language": "html",
+      "code": "<table class=\"l-table\">\n<caption>Products</caption>\n<thead>\n<tr>\n<th scope=\"col\" aria-sort=\"ascending\"><button type=\"button\">SKU</button></th>\n<th scope=\"col\"><button type=\"button\">Name</button></th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<th scope=\"row\">SKU-1042</th>\n<td>Desk lamp</td>\n</tr>\n</tbody>\n</table>"
+    }
+  ]
+}

package/dist/metadata/tabs.json

@@ -18,22 +18,6 @@
     "js": "luxen-ui/tabs"
   },
   "properties": [
-    {
-      "name": "variant",
-      "attribute": "variant",
-      "type": "TabsVariant",
-      "default": "'line'",
-      "reflects": true,
-      "description": "Visual variant."
-    },
-    {
-      "name": "value",
-      "attribute": "value",
-      "type": "string",
-      "default": "'0'",
-      "reflects": true,
-      "description": "Index of the active tab (0-based)."
-    },
     {
       "name": "fullWidth",
       "attribute": "full-width",
@@ -49,6 +33,22 @@
       "default": "'horizontal'",
       "reflects": true,
       "description": "Tab orientation."
+    },
+    {
+      "name": "value",
+      "attribute": "value",
+      "type": "string",
+      "default": "'0'",
+      "reflects": true,
+      "description": "Index of the active tab (0-based)."
+    },
+    {
+      "name": "variant",
+      "attribute": "variant",
+      "type": "TabsVariant",
+      "default": "'line'",
+      "reflects": true,
+      "description": "Visual variant."
     }
   ],
   "attributes": [],
@@ -64,6 +64,16 @@
   "cssClasses": [],
   "cssParts": [],
   "cssProperties": [
+    {
+      "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."
+    },
     {
       "name": "--indicator-color",
       "default": "var(--l-color-text-primary)",
@@ -83,16 +93,6 @@
       "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/tag.json

@@ -16,12 +16,20 @@
   },
   "properties": [
     {
-      "name": "size",
-      "attribute": "size",
-      "type": "TagSize",
-      "default": "'md'",
+      "name": "control",
+      "attribute": "control",
+      "type": "TagControl",
+      "default": "'none'",
       "reflects": true,
-      "description": "Tag size: `sm`, `md` (default), or `lg`."
+      "description": "What drives the selection: `none` (default) makes the chip itself a toggle\nbutton; `checkbox` renders a checkbox inside and makes the chip its label —\nthe right choice for a multi-select facet. Implies `selectable`."
+    },
+    {
+      "name": "disabled",
+      "attribute": "disabled",
+      "type": "boolean",
+      "default": "false",
+      "reflects": true,
+      "description": "Disable the tag — dims it and blocks selection and removal."
     },
     {
       "name": "removable",
@@ -48,33 +56,25 @@
       "description": "Whether the tag is selected. Reflected, so `[selected]` is styleable."
     },
     {
-      "name": "control",
-      "attribute": "control",
-      "type": "TagControl",
-      "default": "'none'",
-      "reflects": true,
-      "description": "What drives the selection: `none` (default) makes the chip itself a toggle\nbutton; `checkbox` renders a checkbox inside and makes the chip its label —\nthe right choice for a multi-select facet. Implies `selectable`."
-    },
-    {
-      "name": "disabled",
-      "attribute": "disabled",
-      "type": "boolean",
-      "default": "false",
+      "name": "size",
+      "attribute": "size",
+      "type": "TagSize",
+      "default": "'md'",
       "reflects": true,
-      "description": "Disable the tag — dims it and blocks selection and removal."
+      "description": "Tag size: `sm`, `md` (default), or `lg`."
     }
   ],
   "attributes": [],
   "events": [
-    {
-      "name": "remove",
-      "description": "Fired when the user removes the tag (× click or Backspace/Delete). Cancelable; if not prevented the tag removes itself. Not composed, does not bubble.",
-      "cancelable": true
-    },
     {
       "name": "change",
       "description": "Fired when a `selectable` tag is toggled. Not cancelable — like the platform's own `change`, and like `l-segmented-control`. Bubbles. Properties: `selected: boolean`. The chip is uncontrolled: it applies the new state before dispatching, so a host that vetoes a toggle (a \"max 3 filters\" rule, an async guard) sets `selected` back in the listener — the revert lands in the same render and is never painted.",
       "cancelable": false
+    },
+    {
+      "name": "remove",
+      "description": "Fired when the user removes the tag (× click or Backspace/Delete). Cancelable; if not prevented the tag removes itself. Not composed, does not bubble.",
+      "cancelable": true
     }
   ],
   "methods": [],
@@ -98,29 +98,24 @@
       "name": "base",
       "description": "The chip container."
     },
-    {
-      "name": "content",
-      "description": "The label wrapper."
-    },
-    {
-      "name": "toggle",
-      "description": "The toggle button rendered by `selectable` (not with `control=\"checkbox\"`)."
-    },
     {
       "name": "checkbox",
       "description": "The native checkbox rendered by `control=\"checkbox\"`."
     },
+    {
+      "name": "content",
+      "description": "The label wrapper."
+    },
     {
       "name": "remove",
       "description": "The remove button — a full-height segment at the end of the chip."
+    },
+    {
+      "name": "toggle",
+      "description": "The toggle button rendered by `selectable` (not with `control=\"checkbox\"`)."
     }
   ],
   "cssProperties": [
-    {
-      "name": "--text-color",
-      "default": null,
-      "description": "Label color."
-    },
     {
       "name": "--background-color",
       "default": null,
@@ -132,39 +127,44 @@
       "description": "Chip border, and the rule that splits off the remove button. Defaults to a tint of `--text-color`; setting it pins the line in every state, so a token-based theme keeps its own value on hover."
     },
     {
-      "name": "--selected-text-color",
+      "name": "--border-radius",
       "default": null,
-      "description": "Label, border, and checkbox accent when selected. Defaults to the library's form-control accent, lightened in dark mode."
+      "description": "Corner radius. Defaults to a full pill."
     },
     {
-      "name": "--selected-background-color",
+      "name": "--font-size",
       "default": null,
-      "description": "Chip fill when selected. Defaults to a tint of `--selected-text-color`."
+      "description": "Label size. Defaults to the `size` step — 12px, or 14px at `size=\"lg\"`. Set it with `--height` to land between the two steps in a dense filter panel."
     },
     {
-      "name": "--selected-border-color",
+      "name": "--height",
       "default": null,
-      "description": "Chip border when selected. Defaults to a 45% tint of `--selected-text-color`. Selection replaces the line the same way it replaces the fill and the ink, so a chip themed with `--border-color` still gets its emphasis step; set this to theme that step too."
+      "description": "Chip height. Defaults to the `size` step (a selectable chip is taller, to keep a comfortable target)."
     },
     {
-      "name": "--height",
+      "name": "--padding-inline",
       "default": null,
-      "description": "Chip height. Defaults to the `size` step (a selectable chip is taller, to keep a comfortable target)."
+      "description": "Horizontal padding. Defaults to the `size` step."
     },
     {
-      "name": "--font-size",
+      "name": "--selected-background-color",
       "default": null,
-      "description": "Label size. Defaults to the `size` step — 12px, or 14px at `size=\"lg\"`. Set it with `--height` to land between the two steps in a dense filter panel."
+      "description": "Chip fill when selected. Defaults to a tint of `--selected-text-color`."
     },
     {
-      "name": "--padding-inline",
+      "name": "--selected-border-color",
       "default": null,
-      "description": "Horizontal padding. Defaults to the `size` step."
+      "description": "Chip border when selected. Defaults to a 45% tint of `--selected-text-color`. Selection replaces the line the same way it replaces the fill and the ink, so a chip themed with `--border-color` still gets its emphasis step; set this to theme that step too."
     },
     {
-      "name": "--border-radius",
+      "name": "--selected-text-color",
       "default": null,
-      "description": "Corner radius. Defaults to a full pill."
+      "description": "Label, border, and checkbox accent when selected. Defaults to the library's form-control accent, lightened in dark mode."
+    },
+    {
+      "name": "--text-color",
+      "default": null,
+      "description": "Label color."
     }
   ],
   "commands": [],

package/dist/metadata/textarea.json

@@ -17,10 +17,21 @@
   "properties": [],
   "attributes": [
     {
-      "name": "rows",
+      "name": "aria-invalid",
       "data": false,
       "values": [],
-      "description": "Number of visible text lines — sets the initial height."
+      "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
+    },
+    {
+      "name": "data-resize",
+      "data": true,
+      "values": [
+        "vertical",
+        "none",
+        "both",
+        "auto"
+      ],
+      "description": "User resize handle. Defaults to `vertical`. `auto` grows the box with its content via `field-sizing` (progressive: falls back to the `rows` height where unsupported)."
     },
     {
       "name": "data-size",
@@ -35,33 +46,22 @@
       "description": "Single-line min-height on the shared `--l-size-control-*` scale (default `md`). Affects only the control, not the label or hint/error."
     },
     {
-      "name": "data-resize",
-      "data": true,
-      "values": [
-        "vertical",
-        "none",
-        "both",
-        "auto"
-      ],
-      "description": "User resize handle. Defaults to `vertical`. `auto` grows the box with its content via `field-sizing` (progressive: falls back to the `rows` height where unsupported)."
-    },
-    {
-      "name": "placeholder",
+      "name": "disabled",
       "data": false,
       "values": [],
-      "description": "Native placeholder text."
+      "description": "Disables the textarea."
     },
     {
-      "name": "disabled",
+      "name": "maxlength",
       "data": false,
       "values": [],
-      "description": "Disables the textarea."
+      "description": "Native maximum character count."
     },
     {
-      "name": "required",
+      "name": "placeholder",
       "data": false,
       "values": [],
-      "description": "Marks the textarea as required for form submission."
+      "description": "Native placeholder text."
     },
     {
       "name": "readonly",
@@ -70,16 +70,16 @@
       "description": "Makes the textarea read-only."
     },
     {
-      "name": "maxlength",
+      "name": "required",
       "data": false,
       "values": [],
-      "description": "Native maximum character count."
+      "description": "Marks the textarea as required for form submission."
     },
     {
-      "name": "aria-invalid",
+      "name": "rows",
       "data": false,
       "values": [],
-      "description": "Set to `true` to force the invalid style (otherwise applied via `:user-invalid`). `l-form-field` manages this automatically."
+      "description": "Number of visible text lines — sets the initial height."
     }
   ],
   "events": [],
@@ -93,15 +93,15 @@
   ],
   "cssParts": [],
   "cssProperties": [
-    {
-      "name": "--height",
-      "default": "var(--l-form-control-height)",
-      "description": "Single-line min-height; `rows` grows the control from here."
-    },
     {
       "name": "--border-radius",
       "default": "var(--l-form-control-border-radius)",
       "description": "Control border radius."
+    },
+    {
+      "name": "--height",
+      "default": "var(--l-form-control-height)",
+      "description": "Single-line min-height; `rows` grows the control from here."
     }
   ],
   "commands": [],

package/dist/metadata/toast.json

@@ -15,14 +15,6 @@
     "js": "luxen-ui/toast"
   },
   "properties": [
-    {
-      "name": "placement",
-      "attribute": "placement",
-      "type": "ToastPlacement",
-      "default": "'top-end'",
-      "reflects": true,
-      "description": "Position of the toast stack on the screen."
-    },
     {
       "name": "duration",
       "attribute": "duration",
@@ -31,6 +23,14 @@
       "reflects": true,
       "description": "Default auto-dismiss delay in milliseconds. 0 disables auto-dismiss."
     },
+    {
+      "name": "placement",
+      "attribute": "placement",
+      "type": "ToastPlacement",
+      "default": "'top-end'",
+      "reflects": true,
+      "description": "Position of the toast stack on the screen."
+    },
     {
       "name": "variant",
       "attribute": "variant",
@@ -82,14 +82,14 @@
       "name": ".l-toast-accent",
       "description": "The left accent bar, colored by variant."
     },
-    {
-      "name": ".l-toast-icon",
-      "description": "The leading icon, colored by variant (replaces the accent bar)."
-    },
     {
       "name": ".l-toast-content",
       "description": "The content column wrapping the heading and message."
     },
+    {
+      "name": ".l-toast-icon",
+      "description": "The leading icon, colored by variant (replaces the accent bar)."
+    },
     {
       "name": ".l-toast-timer",
       "description": "The countdown progress bar (for timed toasts)."
@@ -103,9 +103,9 @@
       "description": "Gap between stacked toast items."
     },
     {
-      "name": "--width",
+      "name": "--hide-duration",
       "default": null,
-      "description": "Width of the toast stack."
+      "description": "Duration of the hide animation."
     },
     {
       "name": "--show-duration",
@@ -113,9 +113,9 @@
       "description": "Duration of the show animation."
     },
     {
-      "name": "--hide-duration",
+      "name": "--width",
       "default": null,
-      "description": "Duration of the hide animation."
+      "description": "Width of the toast stack."
     }
   ],
   "commands": [],