@lmvz-ds/components 0.18.2 → 0.20.0

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-05-18T08:47:43",
+  "timestamp": "2026-05-20T12:42:52",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.4",
@@ -261,7 +261,7 @@
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "Native button type forwarded to the internal `<button>` element.\nUse `submit` to trigger form submission.",
           "docsTags": [
             {
               "name": "default",
@@ -507,16 +507,215 @@
       "dependencyGraph": {}
     },
     {
-      "filePath": "src/components/lmvz-chip/lmvz-chip.tsx",
-      "encapsulation": "shadow",
-      "tag": "lmvz-chip",
-      "readme": "# lmvz-chip\n\n\n",
-      "docs": "",
-      "docsTags": [],
+      "filePath": "src/components/lmvz-checkbox/lmvz-checkbox.tsx",
+      "encapsulation": "scoped",
+      "tag": "lmvz-checkbox",
+      "readme": "# lmvz-checkbox\n\nAccessible, form-associated checkbox built as a Stencil scoped web component. Participates in native HTML forms via `ElementInternals` and emits a `lmvzChange` event on toggle.\n\n## Usage\n\n### Basic\n\n```html\n<lmvz-checkbox label=\"Accept terms and conditions\"></lmvz-checkbox>\n\n<!-- With helper text -->\n<lmvz-checkbox\n  label=\"Subscribe to newsletter\"\n  helper-text=\"You can unsubscribe at any time.\"\n></lmvz-checkbox>\n\n<!-- Required with error state -->\n<lmvz-checkbox\n  label=\"I agree to the privacy policy\"\n  required\n  error\n  error-message=\"You must accept the privacy policy to continue.\"\n></lmvz-checkbox>\n```\n\n### Form integration\n\n`lmvz-checkbox` participates in native form submission via `ElementInternals`. Use `name` to set the field name and `value` to control the submitted value (defaults to `'on'`).\n\n```html\n<form id=\"signup-form\">\n  <lmvz-checkbox\n    name=\"terms\"\n    label=\"Accept terms and conditions\"\n    value=\"accepted\"\n    required\n  ></lmvz-checkbox>\n  <button type=\"submit\">Submit</button>\n</form>\n```\n\n```js\ndocument.getElementById('signup-form').addEventListener('submit', (event) => {\n  event.preventDefault();\n  const data = new FormData(event.target);\n  // data.get('terms') === 'accepted' when checked, null when unchecked\n  console.log(data.get('terms'));\n});\n```\n\nTo associate the checkbox with a form outside its DOM subtree, pass the form element's `id` via the `form` attribute:\n\n```html\n<form id=\"external-form\">...</form>\n<lmvz-checkbox name=\"consent\" label=\"I consent\" form=\"external-form\"></lmvz-checkbox>\n```\n\n## Reflected Attributes\n\nThe following props are reflected as HTML attributes and can be used in CSS attribute selectors:\n\n| Prop | Attribute |\n|------|-----------|\n| `checked` | `checked` |\n| `disabled` | `disabled` |\n| `required` | `required` |\n| `error` | `error` |\n\n## CSS Custom Properties\n\nOverride these on the `:host` element to theme the component. All defaults reference LMVZ semantic or global design tokens.\n\n| Custom Property | Default | Purpose |\n|----------------|---------|---------|\n| `--checkbox-box-size` | `var(--lmvz-global-dimension-s18)` | Width and height of the checkbox box |\n| `--checkbox-border-radius` | `var(--lmvz-global-dimension-s4)` | Border radius of the checkbox box |\n| `--checkbox-border-color` | `var(--lmvz-semantic-color-border-default)` | Default (unchecked) border color |\n| `--checkbox-border-color-hover` | `var(--lmvz-semantic-color-border-hover)` | Border color on hover |\n| `--checkbox-border-color-checked` | `var(--lmvz-semantic-color-border-active)` | Border color when checked |\n| `--checkbox-border-color-error` | `var(--lmvz-semantic-color-status-on-danger)` | Border color in error state |\n| `--checkbox-focus-color` | `var(--lmvz-semantic-color-status-on-active)` | Focus ring color |\n| `--checkbox-checkmark-color` | `var(--lmvz-semantic-color-border-active)` | Checkmark SVG stroke color |\n| `--checkbox-label-color` | `var(--lmvz-semantic-color-on-surface-primary)` | Label text color (default and hover) |\n| `--checkbox-label-color-checked` | `var(--lmvz-semantic-color-status-on-active)` | Label text color when checked |\n| `--checkbox-wrapper-bg-hover` | `var(--lmvz-semantic-color-int-tertiary-hover)` | Pill background on hover |\n| `--checkbox-wrapper-bg-checked` | `var(--lmvz-semantic-color-status-active)` | Pill background when checked |\n| `--checkbox-ripple-bg` | `var(--lmvz-semantic-color-int-secondary-hover)` | Ripple dot color |\n| `--checkbox-helper-color` | `var(--lmvz-semantic-color-on-surface-secondary)` | Helper text color |\n| `--checkbox-error-color` | `var(--lmvz-semantic-color-status-on-danger)` | Error message text color |\n| `--checkbox-disabled-opacity` | `var(--lmvz-component-input-disabled-opacity)` | Opacity when disabled — see caveat below |\n\n## Known Caveats\n\n### Checkbox box size uses a generic dimension token (5.1)\n\n`--checkbox-box-size` defaults to `--lmvz-global-dimension-s18` (18 px). This is a global dimension token; a component-specific token (`component.checkbox.box-size`) is the recommended long-term solution. The effective rendered size is 18 px until that token exists.\n\n### Border-radius uses a generic dimension token (5.2)\n\n`--checkbox-border-radius` defaults to `--lmvz-global-dimension-s4` (4 px). This is a generic dimension token. If `component.checkbox.border-radius` is introduced, this property should be migrated to it.\n\n### Checked label contrast borderline (5.3)\n\nWhen checked, the label text color (`--lmvz-semantic-color-status-on-active`, `#0e7ab4`) against the checked wrapper background (`--lmvz-semantic-color-status-active`, `#f1f9fe`) produces approximately 4.4:1 contrast. This is marginally below the WCAG AA minimum of 4.5:1 for normal text. This was accepted as a design trade-off. Verify contrast against the actual rendered background before each accessibility audit.\n\n### Helper text font-weight inconsistency with `lmvz-input` (5.6)\n\nHelper text renders at `font-weight: 400` per the `body-sm` design token. `lmvz-input` uses `font-weight: 500` for its helper text — a pre-existing inconsistency in the design system. `lmvz-checkbox` intentionally follows the token-specified value. This should be resolved at the design system token level.\n\n### Disabled opacity token export bug (5.7)\n\n`--lmvz-component-input-disabled-opacity` resolves from `global.opacity.opacity-disabled`, which has a known Supernova export bug: the token value is stored as `\"40px\"` (dimension type) instead of `0.4` (unitless number). If disabled checkboxes render at full opacity or at an incorrect size, apply the following workaround at the consuming app level:\n\n```css\nlmvz-checkbox[disabled] {\n  --checkbox-disabled-opacity: 0.4;\n}\n```\n\nThis token bug should be tracked and fixed in `packages/design-tokens`.\n",
+      "docs": "Checkbox component with form association, ARIA validation, and accessible label support.",
+      "docsTags": [
+        {
+          "name": "example",
+          "text": "```html\n<lmvz-checkbox label=\"Accept terms\" name=\"terms\" required></lmvz-checkbox>\n```"
+        }
+      ],
       "usage": {},
       "props": [
         {
-          "name": "text",
+          "name": "autofocus",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "autofocus",
+          "reflectToAttr": false,
+          "docs": "Whether the checkbox should autofocus.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "checked",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "checked",
+          "reflectToAttr": true,
+          "docs": "Whether the checkbox is checked.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "Whether the checkbox is disabled.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "error",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "error",
+          "reflectToAttr": true,
+          "docs": "Whether the checkbox is in an error state.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "errorMessage",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "error-message",
+          "reflectToAttr": false,
+          "docs": "Error message displayed when error is true. Required when error=true.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "form",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "form",
+          "reflectToAttr": false,
+          "docs": "Form id to associate with (for out-of-form usage).",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "helperText",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "helper-text",
+          "reflectToAttr": false,
+          "docs": "Helper / description text displayed below the label.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "label",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -524,9 +723,9 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "text",
+          "attr": "label",
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "Label text for the checkbox. Required for accessibility.",
           "docsTags": [],
           "values": [
             {
@@ -537,13 +736,320 @@
           "required": true,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "name",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": false,
+          "docs": "Name attribute for form submission via ElementInternals.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "required",
+          "reflectToAttr": true,
+          "docs": "Whether the checkbox is required.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "value",
+          "reflectToAttr": false,
+          "docs": "Form submission value when checked.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'on'"
+            }
+          ],
+          "default": "'on'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "returns": {
+            "type": "Promise<boolean>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<boolean>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
+          "signature": "checkValidity() => Promise<boolean>",
+          "parameters": [],
+          "docs": "Returns whether the checkbox satisfies its validation constraints.",
+          "docsTags": []
+        },
+        {
+          "name": "focusInput",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "focusInput() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets focus on the native checkbox input.",
+          "docsTags": []
+        },
+        {
+          "name": "reportValidity",
+          "returns": {
+            "type": "Promise<boolean>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<boolean>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<boolean>"
+          },
+          "signature": "reportValidity() => Promise<boolean>",
+          "parameters": [],
+          "docs": "Reports validation errors to the user.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "lmvzChange",
+          "detail": "boolean",
+          "bubbles": true,
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "Emitted whenever the checkbox checked state changes.\nEvent detail contains the new checked boolean value.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "states": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/lmvz-chip/lmvz-chip.tsx",
+      "encapsulation": "shadow",
+      "tag": "lmvz-chip",
+      "readme": "# lmvz-chip\n\n\n",
+      "docs": "The chip displays a compact semantic status as a non-interactive UI element.",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - Arbitrary inline content used as the chip label. Icons passed here may not be aligned or spaced with the text content properly."
+        },
+        {
+          "name": "slot",
+          "text": "before-text - Optional slot for content to be placed before the text content. Common use case is an icon."
+        },
+        {
+          "name": "slot",
+          "text": "after-text - Optional slot for content to be placed after the text content. Common use case is an icon.\n\nSlotted `lmvz-icon`s are controlled by the chip's internal sizing."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "size",
+          "type": "\"default\" | \"small\"",
+          "complexType": {
+            "original": "Chip.Size",
+            "resolved": "\"default\" | \"small\"",
+            "references": {
+              "Chip": {
+                "location": "import",
+                "path": "../../api/ds.constants.js",
+                "id": "src/api/ds.constants.ts::Chip",
+                "referenceLocation": "Chip"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "size",
+          "reflectToAttr": true,
+          "docs": "Size variant of the chip.\nInvalid values are normalized to `default` at runtime.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'default'"
+            }
+          ],
+          "default": "'default'",
+          "values": [
+            {
+              "value": "default",
+              "type": "string"
+            },
+            {
+              "value": "small",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "type",
+          "type": "\"active\" | \"error\" | \"neutral\" | \"success\" | \"warning\"",
+          "complexType": {
+            "original": "Chip.Type",
+            "resolved": "\"active\" | \"error\" | \"neutral\" | \"success\" | \"warning\"",
+            "references": {
+              "Chip": {
+                "location": "import",
+                "path": "../../api/ds.constants.js",
+                "id": "src/api/ds.constants.ts::Chip",
+                "referenceLocation": "Chip"
+              }
+            }
+          },
+          "mutable": true,
+          "attr": "type",
+          "reflectToAttr": true,
+          "docs": "Semantic variant of the chip.\nInvalid values are normalized to `active` at runtime.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'active'"
+            }
+          ],
+          "default": "'active'",
+          "values": [
+            {
+              "value": "active",
+              "type": "string"
+            },
+            {
+              "value": "error",
+              "type": "string"
+            },
+            {
+              "value": "neutral",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [],
       "events": [],
       "listeners": [],
       "styles": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "after-text",
+          "docs": "Optional slot for content to be placed after the text content. Common use case is an icon.\n\nSlotted `lmvz-icon`s are controlled by the chip's internal sizing."
+        },
+        {
+          "name": "before-text",
+          "docs": "Optional slot for content to be placed before the text content. Common use case is an icon."
+        },
+        {
+          "name": "default",
+          "docs": "Arbitrary inline content used as the chip label. Icons passed here may not be aligned or spaced with the text content properly."
+        }
+      ],
       "parts": [],
       "states": [],
       "dependents": [],
@@ -587,7 +1093,7 @@
           "mutable": false,
           "attr": "lmvz-active-nav",
           "reflectToAttr": false,
-          "docs": "",
+          "docs": "Id of the currently active primary navigation item.\nAlso determines which `connect-nav-*` secondary slot is shown.",
           "docsTags": [],
           "values": [
             {
@@ -684,7 +1190,7 @@
           "mutable": false,
           "attr": "aria-label",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Accessible name for assistive technology.\nLeave unset for decorative icons so the icon stays hidden from the accessibility tree.",
           "docsTags": [],
           "values": [
             {
@@ -717,7 +1223,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": true,
-          "docs": "Required\n\nEither a valid name from a registered iconset, or the icon's SVG content (inline).\n\nWill be checked against the (default) iconset.",
+          "docs": "Required\n\nEither a valid name from a registered iconset, or the icon's SVG content (inline).\n\nWill be checked against the chosen {@link iconset}.",
           "docsTags": [],
           "values": [
             {
@@ -743,7 +1249,7 @@
           "mutable": false,
           "attr": "iconset",
           "reflectToAttr": true,
-          "docs": "Optional custom icon iconset id. Must reference a registered custom iconset by its exported name.",
+          "docs": "Optional custom icon iconset id. Must reference a registered custom iconset by its exported name.\n\nWill try to resolve from the default iconset if not provided.",
           "docsTags": [],
           "values": [
             {
@@ -875,6 +1381,11 @@
           "name": "--lmvz-icon-color",
           "annotation": "prop",
           "docs": "The icon's color. This is inferred from the context (e.g. button) but can be overridden if needed, or when the icon is used standalone."
+        },
+        {
+          "name": "--lmvz-icon-size",
+          "annotation": "prop",
+          "docs": "The icon's size. This is inferred from the context (e.g. button) but can be overridden if needed, or when the icon is used standalone."
         }
       ],
       "slots": [],
@@ -4881,7 +5392,7 @@
               "docs": ""
             }
           ],
-          "docs": "",
+          "docs": "Updates the value programmatically and emits `lmvzInput` with the new value.",
           "docsTags": []
         }
       ],
@@ -4897,7 +5408,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "",
+          "docs": "Emitted whenever the input value changes.\nEvent detail contains the current value.",
           "docsTags": []
         }
       ],
@@ -4939,15 +5450,15 @@
           "mutable": false,
           "attr": "role",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Accessibility role exposed by the host element.",
           "docsTags": [
-            {
-              "name": "readonly",
-              "text": ""
-            },
             {
               "name": "default",
               "text": "'menuitem'"
+            },
+            {
+              "name": "readonly",
+              "text": ""
             }
           ],
           "default": "'menuitem'",
@@ -4972,15 +5483,15 @@
           "mutable": false,
           "attr": "tabindex",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Keeps the host focusable for keyboard navigation inside `lmvz-header`.",
           "docsTags": [
-            {
-              "name": "readonly",
-              "text": ""
-            },
             {
               "name": "default",
               "text": "0"
+            },
+            {
+              "name": "readonly",
+              "text": ""
             }
           ],
           "default": "0",
@@ -5246,6 +5757,11 @@
       "docstring": "",
       "path": "src/api/index.d.ts"
     },
+    "src/api/ds.constants.ts::Chip": {
+      "declaration": "any",
+      "docstring": "",
+      "path": "src/api/ds.constants.ts"
+    },
     "../../lib/ts/dist/validation/SVGString.d.ts::SVGString": {
       "declaration": "export type SVGString = string & Brand.Brand<'SVG'>;",
       "docstring": "",