luxen-ui 0.17.0 → 0.18.0

package/cdn/custom-elements.json

@@ -172,6 +172,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/alert-dialog/alert-dialog.ts",
@@ -652,181 +827,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/badge/badge.ts",
@@ -3750,6 +3750,17 @@
               "description": "The type of item: `normal` or `checkbox`.",
               "attribute": "type"
             },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'destructive' | undefined"
+              },
+              "default": "undefined",
+              "description": "Visual variant. `destructive` marks a delete-style action in red.",
+              "attribute": "variant",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "checked",
@@ -3813,6 +3824,15 @@
             }
           ],
           "attributes": [
+            {
+              "description": "Visual variant. `destructive` marks a delete-style action in red.",
+              "name": "variant",
+              "type": {
+                "text": "'destructive' | undefined"
+              },
+              "default": "undefined",
+              "fieldName": "variant"
+            },
             {
               "name": "value",
               "type": {
@@ -3864,7 +3884,13 @@
             "module": "/src/html/shared/luxen-element.js"
           },
           "tagName": "l-dropdown-item",
-          "customElement": true
+          "customElement": true,
+          "_attributes": [
+            {
+              "name": "variant",
+              "description": "destructive — Renders the item as a destructive action (red), for delete-style entries."
+            }
+          ]
         }
       ],
       "exports": [
@@ -5251,6 +5277,10 @@
               "description": "Color of the editor frame border.",
               "name": "--border-color"
             },
+            {
+              "description": "Color of the editor frame border while the editable area has focus.",
+              "name": "--border-color-focus"
+            },
             {
               "description": "Width of the editor frame border.",
               "name": "--border-width"
@@ -8701,13 +8731,45 @@
         },
         {
           "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).",
+          "description": "Fired when a `selectable` tag is toggled. Bubbles; not composed.",
+          "name": "TagChangeEvent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "readonly": true,
+              "default": "selected"
+            }
+          ],
+          "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).\n\nAdd `selectable` to turn the chip into a filter control: the tag itself\nbecomes a toggle button (`aria-pressed`), and re-activating a selected tag\ndeselects it — the affordance a radio group cannot offer, so a facet always\nhas a way back to \"all\". Add `control=\"checkbox\"` for a multi-select axis and\nthe library's own checkbox rides inside, with the chip as its label.",
           "name": "Tag",
           "cssProperties": [
             {
               "description": "Corner radius. Defaults to a full pill.",
               "name": "--border-radius"
             },
+            {
+              "description": "Chip height. Defaults to the `size` step (a selectable chip is taller, to keep a comfortable target).",
+              "name": "--height"
+            },
+            {
+              "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": "--font-size"
+            },
+            {
+              "description": "Horizontal padding. Defaults to the `size` step.",
+              "name": "--padding-inline"
+            },
             {
               "description": "Chip background.",
               "name": "--background"
@@ -8715,6 +8777,14 @@
             {
               "description": "Text color.",
               "name": "--color"
+            },
+            {
+              "description": "Text, border, and checkbox accent when selected. Defaults to the library's form-control accent, lightened in dark mode.",
+              "name": "--selected-color"
+            },
+            {
+              "description": "Chip background when selected. Defaults to a tint of `--selected-color`.",
+              "name": "--selected-background"
             }
           ],
           "cssParts": [
@@ -8726,6 +8796,14 @@
               "description": "The label wrapper.",
               "name": "content"
             },
+            {
+              "description": "The toggle button rendered by `selectable` (not with `control=\"checkbox\"`).",
+              "name": "toggle"
+            },
+            {
+              "description": "The native checkbox rendered by `control=\"checkbox\"`.",
+              "name": "checkbox"
+            },
             {
               "description": "The remove button.",
               "name": "remove"
@@ -8739,6 +8817,10 @@
             {
               "description": "Leading content, e.g. an `<l-icon>` or `<l-avatar>`.",
               "name": "prefix"
+            },
+            {
+              "description": "Trailing content, e.g. a result count. Gets the chip's own gutter, so no margin is needed.",
+              "name": "suffix"
             }
           ],
           "members": [
@@ -8764,6 +8846,39 @@
               "attribute": "removable",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "selectable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Make the tag a filter control the user can toggle on and off.",
+              "attribute": "selectable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the tag is selected. Reflected, so `[selected]` is styleable.",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "control",
+              "type": {
+                "text": "TagControl"
+              },
+              "default": "'none'",
+              "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`.",
+              "attribute": "control",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -8771,7 +8886,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disable the tag — dims it and blocks removal.",
+              "description": "Disable the tag — dims it and blocks selection and removal.",
               "attribute": "disabled",
               "reflects": true
             }
@@ -8781,6 +8896,11 @@
               "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
             }
           ],
           "attributes": [
@@ -8802,13 +8922,40 @@
               "description": "Show a remove button (and enable Backspace/Delete removal).",
               "fieldName": "removable"
             },
+            {
+              "name": "selectable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Make the tag a filter control the user can toggle on and off.",
+              "fieldName": "selectable"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the tag is selected. Reflected, so `[selected]` is styleable.",
+              "fieldName": "selected"
+            },
+            {
+              "name": "control",
+              "type": {
+                "text": "TagControl"
+              },
+              "default": "'none'",
+              "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`.",
+              "fieldName": "control"
+            },
             {
               "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disable the tag — dims it and blocks removal.",
+              "description": "Disable the tag — dims it and blocks selection and removal.",
               "fieldName": "disabled"
             }
           ],
@@ -8818,11 +8965,11 @@
           },
           "tagName": "l-tag",
           "customElement": true,
-          "summary": "A compact, optionally removable chip.",
+          "summary": "A compact, optionally removable or selectable chip.",
           "examples": [
             {
               "language": "html",
-              "code": "<l-tag removable>Design</l-tag>"
+              "code": "<l-tag removable>Design</l-tag>\n<l-tag selectable selected>A3</l-tag>\n<l-tag selectable control=\"checkbox\">Color <span slot=\"suffix\">79</span></l-tag>"
             }
           ]
         }
@@ -8836,6 +8983,14 @@
             "module": "src/html/elements/tag/tag.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "TagChangeEvent",
+          "declaration": {
+            "name": "TagChangeEvent",
+            "module": "src/html/elements/tag/tag.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "Tag",

package/cdn/elements/alert/alert.d.ts

@@ -55,9 +55,4 @@ export declare class Alert extends LuxenElement {
     private _dismiss;
     private _animateOut;
 }
-declare global {
-    interface HTMLElementTagNameMap {
-        'l-alert': Alert;
-    }
-}
 //# sourceMappingURL=alert.d.ts.map

package/cdn/elements/alert/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/html/elements/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAK7D,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAWrE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,KAAM,SAAQ,YAAY;IAC5B,gBAAgB;IAIzB,uFAAuF;IAEvF,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,oFAAoF;IAEpF,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,sCAAsC;IAEtC,WAAW,UAAS;IAEpB,iEAAiE;IAEjE,WAAW,UAAS;IAEpB,OAAO,CAAC,SAAS,CAAgC;IACjD,OAAO,CAAC,aAAa,CAAC,CAAgC;IAKtD,OAAO,CAAC,SAAS,CAA4C;IAEpD,iBAAiB;IAKjB,oBAAoB;IAMpB,OAAO,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC;IAI/C,mFAAmF;IACnF,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,SAAS;IAsBjB;;;;;OAKG;IACH,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,QAAQ,CAQd;IAEF,OAAO,CAAC,WAAW;CA4BpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,KAAK,CAAC;KAClB;CACF"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/html/elements/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAK7D,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAWrE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,KAAM,SAAQ,YAAY;IAC5B,gBAAgB;IAIzB,uFAAuF;IAEvF,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,oFAAoF;IAEpF,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,sCAAsC;IAEtC,WAAW,UAAS;IAEpB,iEAAiE;IAEjE,WAAW,UAAS;IAEpB,OAAO,CAAC,SAAS,CAAgC;IACjD,OAAO,CAAC,aAAa,CAAC,CAAgC;IAKtD,OAAO,CAAC,SAAS,CAA4C;IAEpD,iBAAiB;IAKjB,oBAAoB;IAMpB,OAAO,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC;IAI/C,mFAAmF;IACnF,OAAO,CAAC,KAAK;IASb,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,SAAS;IAsBjB;;;;;OAKG;IACH,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,QAAQ,CAQd;IAEF,OAAO,CAAC,WAAW;CA4BpB"}