luxen-ui 0.14.0 → 0.15.0

package/cdn/custom-elements.json

@@ -172,181 +172,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/avatar/avatar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Avatar",
-          "cssProperties": [
-            {
-              "description": "Box size (any length). Set it inline (e.g. `style=\"--size: 20px\"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token.",
-              "name": "--size",
-              "default": "40px"
-            },
-            {
-              "description": "Background fill color for initials and the default icon.",
-              "name": "--color"
-            },
-            {
-              "description": "Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice).",
-              "name": "--text-color"
-            },
-            {
-              "description": "Set to `circle` for a fully circular avatar (default is a rounded square).",
-              "name": "--appearance"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color.",
-              "name": "base"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
-              "attribute": "src"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Name used as the accessible label and to derive the initials fallback.",
-              "attribute": "name"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "default": "'md'",
-              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "badge",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Count shown in the corner badge. `0` hides the badge.",
-              "attribute": "badge"
-            },
-            {
-              "kind": "field",
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Render as a `<button>` with focus ring and hover states.",
-              "attribute": "interactive",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
-              "fieldName": "src"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Name used as the accessible label and to derive the initials fallback.",
-              "fieldName": "name"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "default": "'md'",
-              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
-              "fieldName": "size"
-            },
-            {
-              "name": "badge",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "Count shown in the corner badge. `0` hides the badge.",
-              "fieldName": "badge"
-            },
-            {
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Render as a `<button>` with focus ring and hover states.",
-              "fieldName": "interactive"
-            }
-          ],
-          "superclass": {
-            "name": "LuxenElement",
-            "module": "/src/html/shared/luxen-element.js"
-          },
-          "tagName": "l-avatar",
-          "customElement": true,
-          "summary": "An avatar component for displaying user images, initials, or a default icon.",
-          "_cssClasses": [
-            {
-              "name": ".l-avatar-group",
-              "description": "Flex wrapper that overlaps a row of stacked avatars."
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Avatar",
-          "declaration": {
-            "name": "Avatar",
-            "module": "src/html/elements/avatar/avatar.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/avatar/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/html/elements/avatar/avatar.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/alert-dialog/alert-dialog.ts",
@@ -827,6 +652,181 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/avatar/avatar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Avatar",
+          "cssProperties": [
+            {
+              "description": "Box size (any length). Set it inline (e.g. `style=\"--size: 20px\"`) for an arbitrary size beyond the `size` token scale; the font then follows proportionally. The `size` attribute sets it to the matching token.",
+              "name": "--size",
+              "default": "40px"
+            },
+            {
+              "description": "Background fill color for initials and the default icon.",
+              "name": "--color"
+            },
+            {
+              "description": "Initials/icon color over `--color`. Defaults to an auto-derived readable color; set it to enforce a specific brand color (overrides the automatic choice).",
+              "name": "--text-color"
+            },
+            {
+              "description": "Set to `circle` for a fully circular avatar (default is a rounded square).",
+              "name": "--appearance"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The avatar container that paints `--color`; style it (e.g. `color`) to override the auto-derived text color.",
+              "name": "base"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
+              "attribute": "src"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name used as the accessible label and to derive the initials fallback.",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'md'",
+              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "badge",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Count shown in the corner badge. `0` hides the badge.",
+              "attribute": "badge"
+            },
+            {
+              "kind": "field",
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Render as a `<button>` with focus ring and hover states.",
+              "attribute": "interactive",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Image URL. Falls back to initials (then the default icon) if it fails to load.",
+              "fieldName": "src"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name used as the accessible label and to derive the initials fallback.",
+              "fieldName": "name"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'md'",
+              "description": "Avatar size: `xs`, `sm`, `md` (default), `lg`, or `xl`.",
+              "fieldName": "size"
+            },
+            {
+              "name": "badge",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Count shown in the corner badge. `0` hides the badge.",
+              "fieldName": "badge"
+            },
+            {
+              "name": "interactive",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Render as a `<button>` with focus ring and hover states.",
+              "fieldName": "interactive"
+            }
+          ],
+          "superclass": {
+            "name": "LuxenElement",
+            "module": "/src/html/shared/luxen-element.js"
+          },
+          "tagName": "l-avatar",
+          "customElement": true,
+          "summary": "An avatar component for displaying user images, initials, or a default icon.",
+          "_cssClasses": [
+            {
+              "name": ".l-avatar-group",
+              "description": "Flex wrapper that overlaps a row of stacked avatars."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Avatar",
+          "declaration": {
+            "name": "Avatar",
+            "module": "src/html/elements/avatar/avatar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/avatar/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/avatar/avatar.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/badge/badge.ts",
@@ -1032,97 +1032,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/button-group/button-group.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "ButtonGroup",
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Accessible label announced for the group. Not displayed on screen.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "ButtonGroupOrientation"
-              },
-              "default": "'horizontal'",
-              "description": "Layout direction of the buttons. Visual only (drives the CSS via the\nreflected attribute): ARIA 1.2 does not allow `aria-orientation` on\n`role=\"group\"`, so no ARIA attribute is set.",
-              "attribute": "orientation",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Accessible label announced for the group. Not displayed on screen.",
-              "fieldName": "label"
-            },
-            {
-              "name": "orientation",
-              "type": {
-                "text": "ButtonGroupOrientation"
-              },
-              "default": "'horizontal'",
-              "description": "Layout direction of the buttons. Visual only (drives the CSS via the\nreflected attribute): ARIA 1.2 does not allow `aria-orientation` on\n`role=\"group\"`, so no ARIA attribute is set.",
-              "fieldName": "orientation"
-            }
-          ],
-          "superclass": {
-            "name": "LuxenElement",
-            "module": "/src/html/shared/luxen-element.js"
-          },
-          "tagName": "l-button-group",
-          "customElement": true,
-          "summary": "Visually joins related `.l-button` elements into a single segmented\ncontrol. The joined appearance is pure CSS; this element adds the group\nsemantics (`role=\"group\"`, `aria-label`).",
-          "examples": [
-            {
-              "language": "html",
-              "code": "<l-button-group label=\"Alignment\">\n  <button class=\"l-button\">Left</button>\n  <button class=\"l-button\">Center</button>\n  <button class=\"l-button\">Right</button>\n</l-button-group>"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ButtonGroup",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "src/html/elements/button-group/button-group.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/html/elements/button-group/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "module": "src/html/elements/button-group/button-group.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/button/button.meta.ts",
@@ -1246,21 +1155,97 @@
               "description": "Visual variant. Default is the secondary style."
             },
             {
-              "name": "data-size",
-              "values": [
-                "sm",
-                "lg",
-                "xl"
-              ],
-              "description": "Control size. Default is md."
-            },
+              "name": "data-size",
+              "values": [
+                "sm",
+                "lg",
+                "xl"
+              ],
+              "description": "Control size. Default is md."
+            },
+            {
+              "name": "data-icon-only",
+              "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child."
+            },
+            {
+              "name": "data-press-effect",
+              "description": "Press effect (scale + translate on active)."
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonMeta",
+          "declaration": {
+            "name": "ButtonMeta",
+            "module": "src/html/elements/button/button.meta.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/button-group/button-group.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonGroup",
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Accessible label announced for the group. Not displayed on screen.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "ButtonGroupOrientation"
+              },
+              "default": "'horizontal'",
+              "description": "Layout direction of the buttons. Visual only (drives the CSS via the\nreflected attribute): ARIA 1.2 does not allow `aria-orientation` on\n`role=\"group\"`, so no ARIA attribute is set.",
+              "attribute": "orientation",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "name": "data-icon-only",
-              "description": "Icon-only mode (square button, width equals height). Auto-detected for a single icon child."
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Accessible label announced for the group. Not displayed on screen.",
+              "fieldName": "label"
             },
             {
-              "name": "data-press-effect",
-              "description": "Press effect (scale + translate on active)."
+              "name": "orientation",
+              "type": {
+                "text": "ButtonGroupOrientation"
+              },
+              "default": "'horizontal'",
+              "description": "Layout direction of the buttons. Visual only (drives the CSS via the\nreflected attribute): ARIA 1.2 does not allow `aria-orientation` on\n`role=\"group\"`, so no ARIA attribute is set.",
+              "fieldName": "orientation"
+            }
+          ],
+          "superclass": {
+            "name": "LuxenElement",
+            "module": "/src/html/shared/luxen-element.js"
+          },
+          "tagName": "l-button-group",
+          "customElement": true,
+          "summary": "Visually joins related `.l-button` elements into a single segmented\ncontrol. The joined appearance is pure CSS; this element adds the group\nsemantics (`role=\"group\"`, `aria-label`).",
+          "examples": [
+            {
+              "language": "html",
+              "code": "<l-button-group label=\"Alignment\">\n  <button class=\"l-button\">Left</button>\n  <button class=\"l-button\">Center</button>\n  <button class=\"l-button\">Right</button>\n</l-button-group>"
             }
           ]
         }
@@ -1268,10 +1253,25 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ButtonMeta",
+          "name": "ButtonGroup",
           "declaration": {
-            "name": "ButtonMeta",
-            "module": "src/html/elements/button/button.meta.ts"
+            "name": "ButtonGroup",
+            "module": "src/html/elements/button-group/button-group.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/button-group/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/button-group/button-group.js"
           }
         }
       ]
@@ -6031,125 +6031,351 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/html/elements/select/select.meta.ts",
+      "path": "src/html/elements/select/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/select/select.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/select/select.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "SelectMeta",
+          "description": "Fired when the selection changes. Bubbles; not composed.",
+          "name": "SelectChangeEvent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | string[]"
+              },
+              "readonly": true,
+              "description": "The selected value (single mode) or values (multiple mode).",
+              "default": "value"
+            }
+          ],
+          "superclass": {
+            "name": "Event",
+            "module": "src/html/elements/select/select.ts"
+          }
+        },
+        {
+          "kind": "class",
+          "description": "Fired as the user types in the search box. Bubbles; not composed.",
+          "name": "SelectInputEvent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "readonly": true,
+              "description": "The current query text.",
+              "default": "value"
+            }
+          ],
+          "superclass": {
+            "name": "Event",
+            "module": "src/html/elements/select/select.ts"
+          }
+        },
+        {
+          "kind": "class",
+          "description": "A button-triggered, searchable select. A trigger shows the current selection,\nopening a popover with a search box and a `role=\"listbox\"` of options authored\nas a native `<datalist>` of `<option>` — the same authoring surface as\n`l-combobox` and the native `.l-select`. Form-associated.",
+          "name": "Select",
           "cssProperties": [
             {
-              "description": "Control height (set via `data-size` or directly).",
-              "name": "--height",
-              "default": "var(--l-form-control-height)"
+              "description": "Control height. Defaults to the form-control height.",
+              "name": "--height"
             },
             {
-              "description": "Trigger border radius.",
-              "name": "--border-radius",
-              "default": "var(--l-form-control-border-radius)"
+              "description": "Trigger + panel radius.",
+              "name": "--border-radius"
+            },
+            {
+              "description": "Panel background.",
+              "name": "--background"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The host wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The button that opens the listbox.",
+              "name": "trigger"
+            },
+            {
+              "description": "The selection display inside the trigger.",
+              "name": "value"
+            },
+            {
+              "description": "The trigger chevron.",
+              "name": "chevron"
+            },
+            {
+              "description": "The clear button.",
+              "name": "clear"
+            },
+            {
+              "description": "The floating popover panel.",
+              "name": "panel"
+            },
+            {
+              "description": "The search input.",
+              "name": "search"
+            },
+            {
+              "description": "The options container.",
+              "name": "listbox"
+            },
+            {
+              "description": "Each option row.",
+              "name": "option"
+            },
+            {
+              "description": "The \"no results\" message.",
+              "name": "empty"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder shown in the trigger when nothing is selected.",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the trigger.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "SelectSize"
+              },
+              "default": "'md'",
+              "description": "Control size.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "searchable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show a filter box inside the popover (opt-in, for long lists).",
+              "attribute": "searchable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "withClear",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show a button to clear the value.",
+              "attribute": "with-clear",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "Placement"
+              },
+              "default": "'bottom-start'",
+              "description": "Panel placement relative to the trigger.",
+              "attribute": "placement"
+            },
+            {
+              "kind": "field",
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allow selecting multiple values — renders chips and submits one entry per value.",
+              "attribute": "multiple",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "filter",
+              "type": {
+                "text": "SelectFilter"
+              },
+              "default": "defaultFilter",
+              "description": "Override the option filter. `(item, query) => boolean`."
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | string[]"
+              },
+              "description": "The selected value (single mode) or array of values (multiple mode)."
+            },
+            {
+              "kind": "field",
+              "name": "validationTarget",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "description": "Chevron color.",
-              "name": "--caret-color",
-              "default": "var(--l-form-control-placeholder-color)"
+              "kind": "method",
+              "name": "show"
             },
             {
-              "description": "Chevron mask image; override with any `url()` to re-skin.",
-              "name": "--caret-icon",
-              "default": "mdi:chevron-down"
+              "kind": "method",
+              "name": "hide",
+              "parameters": [
+                {
+                  "name": "{ focusTrigger = true }",
+                  "default": "{}"
+                }
+              ]
             }
           ],
           "events": [
             {
               "name": "change",
-              "description": "Fires when an option is selected.",
+              "description": "Fired when the selection changes. Bubbles. Not cancelable. Properties: `value: string | string[]`.",
               "cancelable": false
             },
             {
               "name": "input",
-              "description": "Fires when the value changes.",
+              "description": "Fired as the user types in the search box. Bubbles. Not cancelable. Properties: `value: string` (the query).",
               "cancelable": false
-            }
-          ],
-          "attributes": [
-            {
-              "description": "xs | sm | md | lg | xl — Control height on the shared `--l-size-control-*` scale (default `md`).",
-              "name": "data-size"
             },
             {
-              "description": "Disables the select.",
-              "name": "disabled"
-            },
-            {
-              "description": "Marks the field as required.",
-              "name": "required"
+              "name": "show",
+              "description": "Fired before the listbox opens. Cancelable.",
+              "cancelable": true
             },
             {
-              "description": "Allows multiple selections.",
-              "name": "multiple"
+              "name": "hide",
+              "description": "Fired before the listbox closes. Cancelable.",
+              "cancelable": true
             }
           ],
-          "summary": "A styled native `<select>` using the customizable `base-select` appearance.",
-          "examples": [
+          "attributes": [
             {
-              "title": "Basic",
-              "language": "html",
-              "code": "<select class=\"l-select\">\n<option class=\"l-select-item\">One</option>\n<option class=\"l-select-item\">Two</option>\n</select>"
-            }
-          ],
-          "_cssClasses": [
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder shown in the trigger when nothing is selected.",
+              "fieldName": "placeholder"
+            },
             {
-              "name": ".l-select",
-              "description": "Base select element with `appearance: base-select`."
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Accessible label for the trigger.",
+              "fieldName": "label"
             },
             {
-              "name": ".l-select-item",
-              "description": "Option styling with checkmark indicator."
+              "name": "size",
+              "type": {
+                "text": "SelectSize"
+              },
+              "default": "'md'",
+              "description": "Control size.",
+              "fieldName": "size"
             },
             {
-              "name": ".l-select-item-media",
-              "description": "Leading image/icon inside a rich option."
+              "name": "searchable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show a filter box inside the popover (opt-in, for long lists).",
+              "fieldName": "searchable"
             },
             {
-              "name": ".l-select-item-text",
-              "description": "Column wrapper stacking title + description."
+              "name": "with-clear",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show a button to clear the value.",
+              "fieldName": "withClear"
             },
             {
-              "name": ".l-select-item-title",
-              "description": "Primary label of a rich option."
+              "name": "placement",
+              "type": {
+                "text": "Placement"
+              },
+              "default": "'bottom-start'",
+              "description": "Panel placement relative to the trigger.",
+              "fieldName": "placement"
             },
             {
-              "name": ".l-select-item-description",
-              "description": "Secondary line of a rich option (hidden in the trigger)."
+              "name": "multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allow selecting multiple values — renders chips and submits one entry per value.",
+              "fieldName": "multiple"
             }
           ],
-          "customElement": false,
-          "_native": true,
-          "_nativeTag": "select",
-          "selector": ".l-select",
-          "_attributes": [
-            {
-              "name": "data-size",
-              "values": [
-                "xs",
-                "sm",
-                "md",
-                "lg",
-                "xl"
-              ],
-              "description": "Control height on the shared `--l-size-control-*` scale (default `md`)."
-            },
-            {
-              "name": "disabled",
-              "description": "Disables the select."
-            },
-            {
-              "name": "required",
-              "description": "Marks the field as required."
-            },
+          "superclass": {
+            "name": "LuxenFormAssociatedElement",
+            "module": "/src/html/shared/luxen-form-associated-element.js"
+          },
+          "tagName": "l-select",
+          "customElement": true,
+          "summary": "A searchable select with a button trigger and a popover listbox.",
+          "examples": [
             {
-              "name": "multiple",
-              "description": "Allows multiple selections."
+              "language": "html",
+              "code": "<l-select label=\"Country\" name=\"country\" placeholder=\"Select a country…\">\n  <datalist>\n    <option value=\"us\">United States</option>\n    <option value=\"fr\" selected>France</option>\n  </datalist>\n</l-select>"
             }
           ]
         }
@@ -6157,10 +6383,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "SelectMeta",
+          "name": "SelectChangeEvent",
+          "declaration": {
+            "name": "SelectChangeEvent",
+            "module": "src/html/elements/select/select.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SelectInputEvent",
           "declaration": {
-            "name": "SelectMeta",
-            "module": "src/html/elements/select/select.meta.ts"
+            "name": "SelectInputEvent",
+            "module": "src/html/elements/select/select.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Select",
+          "declaration": {
+            "name": "Select",
+            "module": "src/html/elements/select/select.ts"
           }
         }
       ]
@@ -8181,8 +8423,9 @@
           "summary": "A tabs component that progressively enhances light DOM markup\nwith ARIA roles, keyboard navigation, and animated indicators.",
           "examples": [
             {
+              "title": "Mark the initially-active tab with `aria-selected=\"true\"` so it is styled as",
               "language": "html",
-              "code": "<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>"
+              "code": "selected before the script upgrades the element (progressive enhancement).\n```html\n<l-tabs variant=\"enclosed\">\n  <div>\n    <button aria-selected=\"true\">Tab 1</button>\n    <button>Tab 2</button>\n  </div>\n  <div>Content 1</div>\n  <div>Content 2</div>\n</l-tabs>\n```"
             }
           ]
         }
@@ -8206,6 +8449,181 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/tag/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "module": "src/html/elements/tag/tag.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/html/elements/tag/tag.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Fired when the user asks to remove the tag — clicking the × button, or\npressing Backspace/Delete while it is focused. Cancelable: call\n`preventDefault()` to keep the tag (the controlling host then manages the\nlist itself); otherwise the tag removes itself from the DOM. Does not bubble.",
+          "name": "TagRemoveEvent",
+          "superclass": {
+            "name": "Event",
+            "module": "src/html/elements/tag/tag.ts"
+          }
+        },
+        {
+          "kind": "class",
+          "description": "A compact chip for tokens, filters, and multi-select values. Shadow DOM so its\nstyles are self-contained and it renders correctly **anywhere**, including\ninside another element's shadow root (e.g. the `<l-select>` multi-select\ntrigger).",
+          "name": "Tag",
+          "cssProperties": [
+            {
+              "description": "Corner radius. Defaults to a full pill.",
+              "name": "--border-radius"
+            },
+            {
+              "description": "Chip background.",
+              "name": "--background"
+            },
+            {
+              "description": "Text color.",
+              "name": "--color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The chip container.",
+              "name": "base"
+            },
+            {
+              "description": "The label wrapper.",
+              "name": "content"
+            },
+            {
+              "description": "The remove button.",
+              "name": "remove"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The tag label.",
+              "name": ""
+            },
+            {
+              "description": "Leading content, e.g. an `<l-icon>` or `<l-avatar>`.",
+              "name": "prefix"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "TagSize"
+              },
+              "default": "'md'",
+              "description": "Tag size: `sm`, `md` (default), or `lg`.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "removable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show a remove button (and enable Backspace/Delete removal).",
+              "attribute": "removable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disable the tag — dims it and blocks removal.",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "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
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "TagSize"
+              },
+              "default": "'md'",
+              "description": "Tag size: `sm`, `md` (default), or `lg`.",
+              "fieldName": "size"
+            },
+            {
+              "name": "removable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show a remove button (and enable Backspace/Delete removal).",
+              "fieldName": "removable"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disable the tag — dims it and blocks removal.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LuxenElement",
+            "module": "/src/html/shared/luxen-element.js"
+          },
+          "tagName": "l-tag",
+          "customElement": true,
+          "summary": "A compact, optionally removable chip.",
+          "examples": [
+            {
+              "language": "html",
+              "code": "<l-tag removable>Design</l-tag>"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TagRemoveEvent",
+          "declaration": {
+            "name": "TagRemoveEvent",
+            "module": "src/html/elements/tag/tag.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Tag",
+          "declaration": {
+            "name": "Tag",
+            "module": "src/html/elements/tag/tag.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/html/elements/textarea/textarea.meta.ts",
@@ -8774,7 +9192,8 @@
               },
               "default": "''",
               "description": "The HTML id of the element triggering the tooltip.",
-              "attribute": "for"
+              "attribute": "for",
+              "reflects": true
             },
             {
               "kind": "field",