@lmvz-ds/components 0.36.0 → 0.36.1

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-08T09:00:08",
+  "timestamp": "2026-07-10T08:26:43",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -857,7 +857,7 @@
       "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",
+      "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\nUse `checkValidity()`, `reportValidity()`, and `getValidationMessage()` for programmatic validation. The `error` prop can be set manually or will automatically reflect constraint validation state after a validation attempt; correspondingly, `aria-invalid` is set to `true` when `error=true` or when the real constraint validity becomes invalid, and is cleared once resolved.\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": [
         {
@@ -972,7 +972,6 @@
               "text": "false"
             }
           ],
-          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -980,8 +979,8 @@
           ],
           "optional": false,
           "required": false,
-          "getter": false,
-          "setter": false
+          "getter": true,
+          "setter": true
         },
         {
           "name": "errorMessage",
@@ -1094,7 +1093,7 @@
           },
           "mutable": false,
           "attr": "name",
-          "reflectToAttr": false,
+          "reflectToAttr": true,
           "docs": "Name attribute for form submission via ElementInternals.",
           "docsTags": [],
           "values": [
@@ -1214,6 +1213,28 @@
           "docs": "Sets focus on the native checkbox input.",
           "docsTags": []
         },
+        {
+          "name": "getValidationMessage",
+          "returns": {
+            "type": "Promise<string>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<string>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<string>"
+          },
+          "signature": "getValidationMessage() => Promise<string>",
+          "parameters": [],
+          "docs": "Returns the current validation message, if any.",
+          "docsTags": []
+        },
         {
           "name": "reportValidity",
           "returns": {
@@ -1253,7 +1274,13 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "invalid",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [],
       "slots": [],
       "parts": [],
@@ -1407,7 +1434,7 @@
       "filePath": "src/components/lmvz-datepicker/lmvz-datepicker.tsx",
       "encapsulation": "shadow",
       "tag": "lmvz-datepicker",
-      "readme": "# lmvz-datepicker\n\n`lmvz-datepicker` composes an `lmvz-input` text field with a decorative calendar icon and an `lmvz-popover` calendar panel into a single, form-associated date-picker control.\n\n## Breaking Change: Event Payload Migration\n\n**If you are upgrading from an earlier version, your integration code must change.**\n\nThe `lmvzChange` event payload changed from `Temporal.PlainDate` to a plain `IsoDateString` (`YYYY-MM-DD`):\n\n| Before | After |\n|--------|-------|\n| `event.detail.value` is a `Temporal.PlainDate` object | `event.detail.value` is a string like `\"2024-06-15\"` |\n| Consumers called `.toString()` or used Temporal APIs on the payload | Consumers now read `event.detail.value` directly as a plain string |\n| Angular: the value accessor invoked `.value.toString()` on the temporal object | Angular: the value accessor reads the string directly (no extraction needed) |\n\nIf your code uses `.value.toString()` or calls Temporal methods on the payload, update it to treat `value` as a plain ISO date string instead. The `temporal-polyfill` used internally is bundled into the component's build output — consumers do not need to import or provide it.\n\n## Form Association\n\nThe component is form-associated (`formAssociated: true`, `ElementInternals`). It participates in native `<form>` submission under the `name` attribute (submitted value is an `IsoDateString`), honors `required`/`min`/`max` constraints via `ElementInternals.setValidity` (`valueMissing`, `badInput`, `rangeUnderflow`/`rangeOverflow`), and supports `formResetCallback`/`formStateRestoreCallback` for form reset and browser autofill/bfcache restoration. \n\nUse `checkValidity()` and `reportValidity()` to validate or show validation UI (the component delegates `ElementInternals` validation to these methods explicitly — native form submission does not call them automatically).\n\n## Localization\n\nThe popover's accessible dialog label and the default fallback validation message are localized per the `locale` prop for de/en/fr/it, with regional variant fallback (e.g., `de-AT` falls back to `de`).\n\n## Accessibility Note\n\nThe composed `lmvz-input` text field correctly exposes and toggles `aria-expanded`, `aria-haspopup`, and `aria-controls` as the calendar opens and closes, ensuring assistive technology receives proper combobox-pattern semantics.\n",
+      "readme": "# lmvz-datepicker\n\n`lmvz-datepicker` composes an `lmvz-input` text field with a decorative calendar icon and an `lmvz-popover` calendar panel into a single, form-associated date-picker control.\n\n## Breaking Change: Event Payload Migration\n\n**If you are upgrading from an earlier version, your integration code must change.**\n\nThe `lmvzChange` event payload changed from `Temporal.PlainDate` to a plain `IsoDateString` (`YYYY-MM-DD`):\n\n| Before | After |\n|--------|-------|\n| `event.detail.value` is a `Temporal.PlainDate` object | `event.detail.value` is a string like `\"2024-06-15\"` |\n| Consumers called `.toString()` or used Temporal APIs on the payload | Consumers now read `event.detail.value` directly as a plain string |\n| Angular: the value accessor invoked `.value.toString()` on the temporal object | Angular: the value accessor reads the string directly (no extraction needed) |\n\nIf your code uses `.value.toString()` or calls Temporal methods on the payload, update it to treat `value` as a plain ISO date string instead. The `temporal-polyfill` used internally is bundled into the component's build output — consumers do not need to import or provide it.\n\n## Form Association\n\nThe component is form-associated (`formAssociated: true`, `ElementInternals`). It participates in native `<form>` submission under the `name` attribute (submitted value is an `IsoDateString`), honors `required`/`min`/`max` constraints via `ElementInternals.setValidity` (`valueMissing`, `badInput`, `rangeUnderflow`/`rangeOverflow`), and supports `formResetCallback`/`formStateRestoreCallback` for form reset and browser autofill/bfcache restoration. \n\nUse `checkValidity()` and `reportValidity()` to validate or show validation UI (the component delegates `ElementInternals` validation to these methods explicitly — native form submission does not call them automatically). The composed text field's visual error state and `aria-invalid` are intentionally not shown until a real validation attempt occurs (via `checkValidity()`, `reportValidity()`, or a failed form submit), even though `ElementInternals.setValidity` itself is always kept accurate from the current value — the field can be internally invalid before it is visually flagged, by design.\n\n## Localization\n\nThe popover's accessible dialog label and the default fallback validation message are localized per the `locale` prop for de/en/fr/it, with regional variant fallback (e.g., `de-AT` falls back to `de`).\n\n## Accessibility Note\n\nThe composed `lmvz-input` text field correctly exposes and toggles `aria-expanded`, `aria-haspopup`, and `aria-controls` as the calendar opens and closes, ensuring assistive technology receives proper combobox-pattern semantics.\n",
       "docs": "`lmvz-datepicker` composes an `lmvz-input` text field with a decorative calendar icon and an `lmvz-popover` calendar panel into a single, form-associated date-picker control.",
       "docsTags": [
         {
@@ -2070,6 +2097,11 @@
           "event": "click",
           "capture": false,
           "passive": false
+        },
+        {
+          "event": "invalid",
+          "capture": false,
+          "passive": false
         }
       ],
       "styles": [],
@@ -2533,7 +2565,7 @@
       "filePath": "src/components/lmvz-input/lmvz-input.tsx",
       "encapsulation": "scoped",
       "tag": "lmvz-input",
-      "readme": "# lmvz-input\n\n## Size Variants\n\nThe `size` prop controls the input's height, padding, and associated typography. Set `size` to one of `'sm'`, `'md'`, or `'lg'`. The default is `'md'`.\n\n| Size | Height | Notes |\n|------|--------|-------|\n| `sm` | ~36px | Compact variant with reduced padding |\n| `md` | ~44px | Default; balanced spacing and readability |\n| `lg` | ~48px | Expanded variant with generous padding |\n\nHeights are fluid and derive from design tokens; exact pixel values depend on user font size settings.\n",
+      "readme": "# lmvz-input\n\n## Size Variants\n\nThe `size` prop controls the input's height, padding, and associated typography. Set `size` to one of `'sm'`, `'md'`, or `'lg'`. The default is `'md'`.\n\n| Size | Height | Notes |\n|------|--------|-------|\n| `sm` | ~36px | Compact variant with reduced padding |\n| `md` | ~44px | Default; balanced spacing and readability |\n| `lg` | ~48px | Expanded variant with generous padding |\n\nHeights are fluid and derive from design tokens; exact pixel values depend on user font size settings.\n\n## Error State and Validation\n\nThe `error` prop reflects native HTML5 validation state: set it manually to indicate an error, or let it automatically reflect the input's constraint validity following a validation attempt (e.g., after a blur with no prior keystroke, or after a failed `submit`, `checkValidity()`, or `reportValidity()` call). Correspondingly, `aria-invalid` is set to `true` when `error=true` or when the real constraint validity becomes invalid, and is cleared once resolved. Use `checkValidity()`, `reportValidity()`, and `getValidationMessage()` for programmatic validation.\n",
       "docs": "Input component with floating label, (form) validation, and slotted content support.",
       "docsTags": [
         {
@@ -6496,6 +6528,28 @@
           "docs": "Returns the native HTMLInputElement.\n\nPromise resolves when the element is ready and the input is available. If the input is not yet rendered, it waits for the component to be ready.",
           "docsTags": []
         },
+        {
+          "name": "getValidationMessage",
+          "returns": {
+            "type": "Promise<string>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<string>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<string>"
+          },
+          "signature": "getValidationMessage() => Promise<string>",
+          "parameters": [],
+          "docs": "Returns the current validation message, if any.",
+          "docsTags": []
+        },
         {
           "name": "reportValidity",
           "returns": {
@@ -7322,7 +7376,7 @@
       "filePath": "src/components/lmvz-popover/lmvz-popover.tsx",
       "encapsulation": "shadow",
       "tag": "lmvz-popover",
-      "readme": "# lmvz-popover\n\nA non-modal floating dialog anchored to a trigger element. Positions automatically via `@floating-ui/dom` with collision avoidance (flip and shift middleware). Content-agnostic: accepts any slotted elements.\n\n## Usage\n\nAnchor the popover to a trigger element by setting the `anchor` prop to the trigger's `id` or element reference.\n\nIf no `id` is set on the popover host, one is auto-assigned at load time.\n\n```html\n<button\n  id=\"trigger\"\n  onclick=\"document.getElementById('my-popover').toggle()\"\n>\n  Open menu\n</button>\n<lmvz-popover id=\"my-popover\" anchor=\"trigger\" label=\"Menu options\">\n  <p>Popover content goes here</p>\n</lmvz-popover>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `open` | `boolean` | `false` | Opens or closes the popover. |\n| `anchor` | `string \\| HTMLElement` | – | Anchor element id or reference for positioning. |\n| `placement` | `'top' \\| 'bottom' \\| 'start' \\| 'end' \\| 'top-start' \\| 'top-end' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Preferred placement relative to the anchor. |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | `'sm'` | Size variant of the card surface. |\n| `autoFocus` | `boolean` | `true` | Moves focus to the first focusable element when opened. |\n| `label` | `string` | – | Accessible label for the popover container (reflected on dialog role). |\n\n## Slots\n\n| Slot | Description |\n|---|---|\n| `default` | Popover content. Any elements may be slotted. |\n\n## Events\n\n| Event | Cancelable | Description |\n|---|---|---|\n| `lmvzOpen` | No | Fired after the popover opens. |\n| `lmvzClose` | No | Fired after the popover closes. |\n| `lmvzCancel` | **Yes** | Fired before light-dismiss (click outside) or Escape close. Call `event.preventDefault()` to veto the close and keep the popover open. |\n\n## Methods\n\n| Method | Returns | Description |\n|---|---|---|\n| `show()` | `Promise<void>` | Opens the popover. |\n| `hide()` | `Promise<void>` | Closes the popover after firing `lmvzCancel`. If `lmvzCancel` is prevented, the popover remains open. |\n| `toggle()` | `Promise<void>` | Toggles the open state. |\n\n## CSS Customization\n\n### Shadow Parts\n\n| Part | Description |\n|---|---|\n| `container` | The popover's dialog container. Target to customize positioning, overflow, or appearance. |\n\n### Custom Properties\n\n| Property | Description | Default |\n|---|---|---|\n| `--lmvz-popover-max-width` | Maximum width of the popover surface. | `none` |\n| `--lmvz-popover-max-height` | Maximum height of the popover surface. | `none` |\n| `--lmvz-popover-z-index` | Z-index of the popover surface. | `1` |\n\n## Accessibility\n\n### Trigger Requirements\n\nWhen you set the `anchor` prop, the popover automatically writes three ARIA attributes to the resolved anchor element for screen reader and assistive technology support:\n\n- **`aria-haspopup=\"dialog\"`** — Announces that the trigger opens a dialog.\n- **`aria-expanded`** — Reflects the popover's open state (`\"true\"` when open, `\"false\"` when closed).\n- **`aria-controls`** — Points to the popover's `id` to establish the relationship between trigger and content.\n\nDo not set these attributes manually. Exception: if you pre-set `aria-haspopup` to a different value (e.g. `\"menu\"` for an action-list popover), the component preserves your value.\n\n### Content Semantics\n\nThe component renders a `role=\"dialog\"` container. Provide a `label` prop or set `aria-labelledby` on the host element to satisfy dialog labeling requirements.\n\n### AriaValidation\n\nWhen `@lmvz-ds/aria-validation` is enabled (development only), the component validates:\n\n- **Host element:** Must have an accessible label via the `label` prop or `aria-labelledby` attribute.\n- **Anchor element:** Must be interactive and focusable (e.g., `<button>`, `<a href>`, elements with `tabindex`, or elements with an interactive ARIA role). Non-interactive anchors produce a dev-time warning.\n\nValidation is disabled in production builds and test runtimes.\n\n## Notes\n\n- The popover is non-modal: focus is not trapped, and interaction outside does not require acknowledgment.\n- Positioning is automatic with collision avoidance. Use `placement` to express preference, but the component will flip or shift as needed to keep content visible.\n- Light-dismiss (clicking outside the popover or pressing Escape) fires `lmvzCancel` first, allowing consumers to intercept and prevent close (e.g., to warn unsaved changes).\n\n## Out of Scope\n\nIntegration with sibling components (e.g., action-list, select, date-picker) is intentionally not implemented in the popover itself. These components integrate via the trigger element and slot content, and remain the responsibility of the consuming application.\n",
+      "readme": "# lmvz-popover\n\nA non-modal floating dialog anchored to a trigger element. Positions automatically via `@floating-ui/dom` with collision avoidance (flip and shift middleware). Content-agnostic: accepts any slotted elements.\n\n## Usage\n\nAnchor the popover to a trigger element by setting the `anchor` prop to the trigger's `id` or element reference.\n\nIf no `id` is set on the popover host, one is auto-assigned at load time.\n\n```html\n<button\n  id=\"trigger\"\n  onclick=\"document.getElementById('my-popover').toggle()\"\n>\n  Open menu\n</button>\n<lmvz-popover id=\"my-popover\" anchor=\"trigger\" label=\"Menu options\">\n  <p>Popover content goes here</p>\n</lmvz-popover>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `open` | `boolean` | `false` | Opens or closes the popover. |\n| `anchor` | `string \\| HTMLElement` | – | Anchor element id or reference for positioning. |\n| `placement` | `'top' \\| 'bottom' \\| 'start' \\| 'end' \\| 'top-start' \\| 'top-end' \\| 'bottom-start' \\| 'bottom-end'` | `'bottom-start'` | Preferred placement relative to the anchor. |\n| `size` | `'sm' \\| 'md' \\| 'lg'` | `'sm'` | Size variant of the card surface. |\n| `autoFocus` | `boolean` | `true` | Moves focus to the first focusable element when opened. |\n| `label` | `string` | – | Accessible label for the popover container (reflected on dialog role). |\n\n## Slots\n\n| Slot | Description |\n|---|---|\n| `default` | Popover content. Any elements may be slotted. |\n\n## Events\n\n| Event | Cancelable | Description |\n|---|---|---|\n| `lmvzOpen` | No | Fired after the popover opens. |\n| `lmvzClose` | No | Fired after the popover closes. |\n| `lmvzCancel` | **Yes** | Fired before light-dismiss (click outside) or Escape close. Call `event.preventDefault()` to veto the close and keep the popover open. |\n\n## Methods\n\n| Method | Returns | Description |\n|---|---|---|\n| `show()` | `Promise<void>` | Opens the popover. |\n| `hide()` | `Promise<void>` | Closes the popover after firing `lmvzCancel`. If `lmvzCancel` is prevented, the popover remains open. |\n| `toggle()` | `Promise<void>` | Toggles the open state. |\n\n## CSS Customization\n\n### Shadow Parts\n\n| Part | Description |\n|---|---|\n| `container` | The popover's dialog container. Target to customize positioning, overflow, or appearance. |\n\n### Custom Properties\n\n| Property | Description | Default |\n|---|---|---|\n| `--lmvz-popover-max-width` | Maximum width of the popover surface. | `none` |\n| `--lmvz-popover-max-height` | Maximum height of the popover surface. | `none` |\n| `--lmvz-popover-z-index` | Z-index of the popover surface. | `1` |\n\n## Accessibility\n\n### Trigger Requirements\n\nWhen you set the `anchor` prop, the popover automatically writes three ARIA attributes to the resolved anchor element for screen reader and assistive technology support:\n\n- **`aria-haspopup=\"dialog\"`** — Announces that the trigger opens a dialog.\n- **`aria-expanded`** — Reflects the popover's open state (`\"true\"` when open, `\"false\"` when closed).\n- **`aria-controls`** — Points to the popover's `id` to establish the relationship between trigger and content.\n\nDo not set these attributes manually. Exception: if you pre-set `aria-haspopup` to a different value (e.g. `\"menu\"` for an action-list popover), the component preserves your value.\n\n### Content Semantics\n\nThe component renders a `role=\"dialog\"` container. Provide a `label` prop or set `aria-labelledby` on the host element to satisfy dialog labeling requirements.\n\n### AriaValidation\n\nWhen `@lmvz-ds/aria-validation` is enabled (development only), the component validates:\n\n- **Host element:** Must have an accessible label via the `label` prop or `aria-labelledby` attribute.\n- **Anchor element:** Must be interactive and focusable (e.g., `<button>`, `<a href>`, elements with `tabindex`, or elements with an interactive ARIA role). Non-interactive anchors produce a dev-time warning.\n\nValidation is disabled in production builds and test runtimes.\n\n## Notes\n\n- The popover is non-modal: focus is not trapped, and interaction outside does not require acknowledgment.\n- Positioning is automatic with collision avoidance. Use `placement` to express preference, but the component will flip or shift as needed to keep content visible.\n- Light-dismiss (clicking outside the popover or pressing Escape) fires `lmvzCancel` first, allowing consumers to intercept and prevent close (e.g., to warn unsaved changes).\n\n## Integration Patterns\n\n### Combobox and Listbox (Active Descendant Model)\n\nThe popover supports integration with combobox and listbox components via the `containerRole` prop. When `containerRole` is set to a non-dialog value (e.g. `'listbox'`, `'menu'`, `'tree'`, or `'grid'`):\n\n- The popover container receives the specified ARIA role instead of `role=\"dialog\"`\n- Focus remains on the trigger/anchor element (active descendant pattern), so `autoFocus` has no effect\n- `aria-haspopup` on the anchor is automatically set to match the `containerRole` value\n\nThis enables tight integration with components like `lmvz-select`, which uses `containerRole=\"listbox\"` to implement the WAI-ARIA combobox pattern with a listbox popup. In this mode, the popover acts as a styled container while the trigger manages focus and active descendant state.\n\n## Out of Scope\n\nBroader component integration patterns (e.g., date-picker, action menu with complex internal logic) remain the responsibility of consuming applications. The popover provides the container and positioning mechanism; application-specific behavior flows stay at the consuming component level.\n",
       "docs": "A non-modal floating dialog anchored to a trigger element. Positions automatically via `@floating-ui/dom` with collision avoidance (flip and shift middleware). Content-agnostic: accepts any slotted elements.",
       "docsTags": [
         {
@@ -7377,7 +7431,7 @@
           "mutable": false,
           "attr": "auto-focus",
           "reflectToAttr": false,
-          "docs": "Whether to move focus to the first focusable element on open.",
+          "docs": "Whether to move focus to the first focusable element on open.\nIgnored (treated as `false`) when `containerRole` is not `'dialog'`, since\nnon-dialog roles (e.g. `'listbox'` for combobox/activedescendant integrations)\nmust keep focus on the anchor/trigger element.",
           "docsTags": [
             {
               "name": "default",
@@ -7395,6 +7449,59 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "containerRole",
+          "type": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"",
+          "complexType": {
+            "original": "Popover.ContainerRole",
+            "resolved": "\"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\"",
+            "references": {
+              "Popover": {
+                "location": "import",
+                "path": "../../api",
+                "id": "src/api/index.d.ts::Popover",
+                "referenceLocation": "Popover"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "container-role",
+          "reflectToAttr": false,
+          "docs": "ARIA role applied to the popover container.\nUse `'dialog'` (default) for focus-moving dialog-style popovers.\nUse a non-dialog role such as `'listbox'` to integrate with a `role=\"combobox\"`\ntrigger using the activedescendant model, in which case focus is kept on the\nanchor/trigger element instead of being moved into the popover.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'dialog'"
+            }
+          ],
+          "default": "'dialog'",
+          "values": [
+            {
+              "value": "dialog",
+              "type": "string"
+            },
+            {
+              "value": "grid",
+              "type": "string"
+            },
+            {
+              "value": "listbox",
+              "type": "string"
+            },
+            {
+              "value": "menu",
+              "type": "string"
+            },
+            {
+              "value": "tree",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "label",
           "type": "string | undefined",
@@ -7689,12 +7796,16 @@
       ],
       "states": [],
       "dependents": [
-        "lmvz-datepicker"
+        "lmvz-datepicker",
+        "lmvz-select"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "lmvz-datepicker": [
           "lmvz-popover"
+        ],
+        "lmvz-select": [
+          "lmvz-popover"
         ]
       }
     },
@@ -7702,7 +7813,7 @@
       "filePath": "src/components/lmvz-radio/lmvz-radio.tsx",
       "encapsulation": "scoped",
       "tag": "lmvz-radio",
-      "readme": "# lmvz-radio\n\nAccessible, form-associated radio button built as a Stencil scoped web component. Supports form association, native radio group mutual exclusion via `name` forwarding, roving tabindex, and ARIA APG-compliant keyboard navigation.\n\n## Usage\n\n### Basic\n\n```html\n<lmvz-radio name=\"choice\" value=\"a\" label=\"Option A\"></lmvz-radio>\n<lmvz-radio name=\"choice\" value=\"b\" label=\"Option B\"></lmvz-radio>\n```\n\n## Form Integration\n\n`lmvz-radio` is a FACE (Form-Associated Custom Element). It participates in native HTML forms via `ElementInternals`: the `name` and `value` attributes are submitted to the form when the radio is `checked`.\n\nSetting `required` triggers native form validation — the form will not submit unless a radio with the given `name` is checked.\n\n### Form Reset Behavior\n\nWhen a form is reset, `lmvz-radio` restores its `checked` state to the value it held when the component first mounted (the `initialChecked` value), without emitting `lmvzChange`. This matches native `<input type=\"radio\">` behavior. Internal form state (via `ElementInternals.setFormValue`) is always updated regardless. Browser autofill and session-restore operations (via `formStateRestoreCallback`) also do not emit `lmvzChange`.\n\n> **Note:** `aria-required` is intentionally absent from `lmvz-radio`. When a radio group is required, expose `aria-required` on the `role=\"radiogroup\"` wrapper element via your application code. This is the consumer's responsibility.\n\n## Radio Group Behavior\n\nWhen multiple `lmvz-radio` elements share the same `name` attribute and are within the same form (or document scope if outside any form), they form a native radio group. The `name` is forwarded directly to the native `<input type=\"radio\">`, enabling the browser's built-in mutual-exclusion logic: selecting one radio automatically deselects all others with the same name in the same scope. Radios with the same `name` in different forms are treated as independent groups.\n\n**Roving tabindex:** The component automatically manages keyboard focus navigation via the `RadioGroupController`. When a group of radios shares the same `name`:\n- The checked radio has `tabindex=\"0\"` and is reachable via Tab.\n- All other enabled radios have `tabindex=\"-1\"` and are not directly tabbable.\n- If no radio is checked, the first enabled radio in DOM order receives `tabindex=\"0\"`, ensuring the group is always reachable.\n\n**Keyboard navigation (manual selection pattern):**\n\n| Key | Action |\n|-----|--------|\n| Arrow Down / Arrow Right | Moves focus to the next radio in the group (no selection) |\n| Arrow Up / Arrow Left | Moves focus to the previous radio in the group (no selection) |\n| Home | Moves focus to the first radio in the group (no selection) |\n| End | Moves focus to the last radio in the group (no selection) |\n| Space | Selects the focused radio; emits `lmvzActivation` and (if state changed) `lmvzChange` |\n| Tab | Moves focus out of the radio group |\n\nDisabled radios are skipped during navigation.\n\nThis component implements the WAI-ARIA [manual selection](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) pattern: focus and selection are decoupled. Arrow keys move focus without selecting. The consumer is responsible for wrapping grouped radios in a `role=\"radiogroup\"` element.\n\n**Consumer responsibility — `role=\"radiogroup\"`:**\nWrap a group of related `lmvz-radio` elements in a container element with `role=\"radiogroup\"` and an accessible label via `aria-label` or `aria-labelledby`. The radio component does not add this role itself because a radio button cannot also be a radiogroup.\n\n## Accessibility\n\n- A native `<input type=\"radio\">` is rendered inside the component for full keyboard and screen reader support.\n- `role=\"radiogroup\"` must be added by the consumer on a wrapper element (see \"Radio Group Behavior\" above).\n- `aria-invalid` is set when `error=true`.\n- `aria-describedby` links the input to helper text when `helper-text` is provided.\n- Helper text uses `aria-live=\"polite\"` for dynamic updates.\n- The focus ring is visible and meets WCAG 2.1 AA contrast requirements.\n- Forced Colors (Windows High Contrast Mode) is supported.\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| Property | Default | Description |\n|---|---|---|\n| `--radio-circle-size` | `var(--lmvz-global-s18)` | Width and height of the radio circle |\n| `--radio-dot-size` | `0.5rem` | Size of the inner selected dot |\n| `--radio-bg` | `var(--lmvz-semantic-color-surface-input-primary)` | Circle background (unchecked) |\n| `--radio-border-color` | `var(--lmvz-semantic-color-border-default)` | Circle border (default) |\n| `--radio-border-color-hover` | `var(--lmvz-semantic-color-border-hover)` | Circle border on hover |\n| `--radio-border-color-checked` | `var(--lmvz-semantic-color-border-active)` | Circle border when checked |\n| `--radio-border-color-error` | `var(--lmvz-semantic-color-status-on-danger)` | Circle border in error state |\n| `--radio-dot-color` | `var(--lmvz-semantic-color-border-active)` | Color of the inner dot |\n| `--radio-wrapper-bg-hover` | `var(--lmvz-semantic-color-int-tertiary-hover)` | Pill background on hover |\n| `--radio-wrapper-bg-active` | `var(--lmvz-semantic-color-int-tertiary-active)` | Pill background when pressed |\n| `--radio-wrapper-bg-checked` | `var(--lmvz-semantic-color-status-active)` | Pill background when checked |\n| `--radio-label-color` | `var(--lmvz-semantic-color-on-surface-primary)` | Label text color (default) |\n| `--radio-label-color-checked` | `var(--lmvz-semantic-color-status-on-active)` | Label text color when checked |\n| `--radio-helper-color` | `var(--lmvz-semantic-color-on-surface-secondary)` | Helper text color |\n| `--radio-focus-color` | `var(--lmvz-semantic-color-status-on-active)` | Focus ring color |\n| `--radio-easing` | `var(--lmvz-global-easing-default, ease)` | Transition easing function |\n| `--radio-duration` | `0.2s` | Transition duration |\n\n## lmvzChange Emission Contract\n\nThe `lmvzChange` event emits only when the radio's checked state changes. The event detail contains the new `checked` boolean value.\n\n**Fires on:**\n- User activation: clicking the radio or pressing Space (only if state changes)\n- Programmatic checked state transitions: setting `checked = true` or `checked = false`\n\n**Does NOT fire on:**\n- Arrow key navigation (Arrow Down, Arrow Up, Home, End). These move focus only, without selection.\n- Browser form lifecycle callbacks (`formResetCallback`, `formStateRestoreCallback`). This matches native `<input type=\"radio\">` behavior, which does not fire `change` on form reset. Internal form state (`ElementInternals.setFormValue`) is always updated regardless.\n\n## Angular Integration\n\n### Automatic Form Integration\n\nUse the `LmvzCheckableValueChangeHelper` directive (included in `@lmvz-ds/angular`) to automatically wire `lmvz-radio` to Angular form controls. When this directive is present on the element, it automatically binds the `lmvzChange` event to the form control's `valueChange` output:\n\n```html\n<!-- With [(ngModel)] -->\n<lmvz-radio\n  label=\"Option A\"\n  name=\"choice\"\n  value=\"a\"\n  [(ngModel)]=\"selectedValue\">\n</lmvz-radio>\n\n<!-- With [formControl] -->\n<lmvz-radio\n  label=\"Option B\"\n  name=\"choice\"\n  value=\"b\"\n  [formControl]=\"controlRef\">\n</lmvz-radio>\n```\n\nNo additional setup is required — the directive is applied automatically via the selector `lmvz-checkbox, lmvz-radio`.\n\n### Manual Event Binding\n\nIf you need direct event handling, listen to the `lmvzChange` event:\n\n```html\n<lmvz-radio\n  label=\"Option\"\n  name=\"choice\"\n  [checked]=\"isChecked\"\n  (lmvzChange)=\"isChecked = $event.target.checked\">\n</lmvz-radio>\n```\n\n## Public Methods\n\n### focusInput()\n\nProgrammatically set focus on the native radio input. Use this method when you need to move keyboard focus to a radio after a user interaction or page state change:\n\n```typescript\nconst radioEl = document.querySelector('lmvz-radio');\nawait radioEl.focusInput();\n```\n\n## Event Reference\n\n### lmvzActivation\n\nThe `lmvzActivation` event fires on every explicit user activation: click or Space on the native input. This includes re-activation of an already-checked radio. Use this event to react directly to user intent, distinct from state transitions.\n\n### lmvzChange vs lmvzActivation\n\n- **`lmvzActivation`:** Fires on every explicit user activation (click or Space), regardless of whether the checked state actually changes.\n- **`lmvzChange`:** Fires only on state transitions (checked ↔ unchecked).\n\nWhen a user selects a different radio in a group, both events fire together. When a user re-activates an already-checked radio, only `lmvzActivation` fires.\n\n## Design Notes / Waivers\n\n### Checked + hover state (OQ-5)\n\nWhen a radio is both checked and hovered, the checked background (`--radio-wrapper-bg-checked`) is held — the hover background does not override it. No Figma spec exists for this combined state; this behavior is an intentional implementation decision.\n\n### Label wrapping (OQ-3)\n\nThe label uses `overflow-wrap: break-word` (normal wrapping). `white-space: nowrap` is intentionally not applied.\n",
+      "readme": "# lmvz-radio\n\nAccessible, form-associated radio button built as a Stencil scoped web component. Supports form association via `ElementInternals`, JS-driven radio group mutual exclusion, roving tabindex, and ARIA APG-compliant keyboard navigation.\n\n## Usage\n\n### Basic\n\n```html\n<lmvz-radio name=\"choice\" value=\"a\" label=\"Option A\"></lmvz-radio>\n<lmvz-radio name=\"choice\" value=\"b\" label=\"Option B\"></lmvz-radio>\n```\n\n## Form Integration\n\n`lmvz-radio` is a FACE (Form-Associated Custom Element). It participates in native HTML forms via `ElementInternals`: the `name` and `value` attributes are submitted to the form when the radio is `checked`.\n\nSetting `required` triggers native form validation — the form will not submit unless a radio with the given `name` is checked. For a required radio group (multiple radios with the same `name`), validity is group-aware: the group becomes invalid only when no radio in the group is checked, and valid as soon as any radio is selected. Use `getValidationMessage()` to retrieve the validation message.\n\n### Form Reset Behavior\n\nWhen a form is reset, `lmvz-radio` restores its `checked` state to the value it held when the component first mounted (the `initialChecked` value), without emitting `lmvzChange`. This matches native `<input type=\"radio\">` behavior. Internal form state (via `ElementInternals.setFormValue`) is always updated regardless. Browser autofill and session-restore operations (via `formStateRestoreCallback`) also do not emit `lmvzChange`.\n\n> **Note:** `aria-required` is intentionally absent from `lmvz-radio`. When a radio group is required, expose `aria-required` on the `role=\"radiogroup\"` wrapper element via your application code. This is the consumer's responsibility.\n\n## Radio Group Behavior\n\nWhen multiple `lmvz-radio` elements share the same `name` attribute and are within the same form (or document scope if outside any form), they form a radio group tracked by `RadioGroupController`. The `name` attribute is NOT forwarded to the native `<input type=\"radio\">` — because this component renders in `scoped` (light DOM) mode, doing so would make the inner `<input>` an independent, genuinely form-associated element of the outer `<form>`, submitting a duplicate value alongside the host's own `ElementInternals` participation. Instead, mutual exclusion is enforced entirely in JavaScript: selecting one radio calls `RadioGroup.select()`, which sets `checked = false` on every other host sharing the same name and scope. Radios with the same `name` in different forms are treated as independent groups.\n\n**Roving tabindex:** The component automatically manages keyboard focus navigation via the `RadioGroupController`. When a group of radios shares the same `name`:\n- The checked radio has `tabindex=\"0\"` and is reachable via Tab.\n- All other enabled radios have `tabindex=\"-1\"` and are not directly tabbable.\n- If no radio is checked, the first enabled radio in DOM order receives `tabindex=\"0\"`, ensuring the group is always reachable.\n\n**Keyboard navigation (manual selection pattern):**\n\n| Key | Action |\n|-----|--------|\n| Arrow Down / Arrow Right | Moves focus to the next radio in the group (no selection) |\n| Arrow Up / Arrow Left | Moves focus to the previous radio in the group (no selection) |\n| Home | Moves focus to the first radio in the group (no selection) |\n| End | Moves focus to the last radio in the group (no selection) |\n| Space | Selects the focused radio; emits `lmvzActivation` and (if state changed) `lmvzChange` |\n| Tab | Moves focus out of the radio group |\n\nDisabled radios are skipped during navigation.\n\nThis component implements the WAI-ARIA [manual selection](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) pattern: focus and selection are decoupled. Arrow keys move focus without selecting. The consumer is responsible for wrapping grouped radios in a `role=\"radiogroup\"` element.\n\n**Consumer responsibility — `role=\"radiogroup\"`:**\nWrap a group of related `lmvz-radio` elements in a container element with `role=\"radiogroup\"` and an accessible label via `aria-label` or `aria-labelledby`. The radio component does not add this role itself because a radio button cannot also be a radiogroup.\n\n## Accessibility\n\n- A native `<input type=\"radio\">` is rendered inside the component for full keyboard and screen reader support.\n- `role=\"radiogroup\"` must be added by the consumer on a wrapper element (see \"Radio Group Behavior\" above).\n- `aria-invalid` is set when `error=true`, and is also automatically set when the radio's real constraint validity becomes invalid following a validation attempt (e.g., after a failed `submit`, `checkValidity()`, or `reportValidity()` call), clearing once resolved.\n- `aria-describedby` links the input to helper text when `helper-text` is provided.\n- Helper text uses `aria-live=\"polite\"` for dynamic updates.\n- The focus ring is visible and meets WCAG 2.1 AA contrast requirements.\n- Forced Colors (Windows High Contrast Mode) is supported.\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| Property | Default | Description |\n|---|---|---|\n| `--radio-circle-size` | `var(--lmvz-global-s18)` | Width and height of the radio circle |\n| `--radio-dot-size` | `0.5rem` | Size of the inner selected dot |\n| `--radio-bg` | `var(--lmvz-semantic-color-surface-input-primary)` | Circle background (unchecked) |\n| `--radio-border-color` | `var(--lmvz-semantic-color-border-default)` | Circle border (default) |\n| `--radio-border-color-hover` | `var(--lmvz-semantic-color-border-hover)` | Circle border on hover |\n| `--radio-border-color-checked` | `var(--lmvz-semantic-color-border-active)` | Circle border when checked |\n| `--radio-border-color-error` | `var(--lmvz-semantic-color-status-on-danger)` | Circle border in error state |\n| `--radio-dot-color` | `var(--lmvz-semantic-color-border-active)` | Color of the inner dot |\n| `--radio-wrapper-bg-hover` | `var(--lmvz-semantic-color-int-tertiary-hover)` | Pill background on hover |\n| `--radio-wrapper-bg-active` | `var(--lmvz-semantic-color-int-tertiary-active)` | Pill background when pressed |\n| `--radio-wrapper-bg-checked` | `var(--lmvz-semantic-color-status-active)` | Pill background when checked |\n| `--radio-label-color` | `var(--lmvz-semantic-color-on-surface-primary)` | Label text color (default) |\n| `--radio-label-color-checked` | `var(--lmvz-semantic-color-status-on-active)` | Label text color when checked |\n| `--radio-helper-color` | `var(--lmvz-semantic-color-on-surface-secondary)` | Helper text color |\n| `--radio-focus-color` | `var(--lmvz-semantic-color-status-on-active)` | Focus ring color |\n| `--radio-easing` | `var(--lmvz-global-easing-default, ease)` | Transition easing function |\n| `--radio-duration` | `0.2s` | Transition duration |\n\n## lmvzChange Emission Contract\n\nThe `lmvzChange` event emits only when the radio's checked state changes. The event detail contains the new `checked` boolean value.\n\n**Fires on:**\n- User activation: clicking the radio or pressing Space (only if state changes)\n- Programmatic checked state transitions: setting `checked = true` or `checked = false`\n\n**Does NOT fire on:**\n- Arrow key navigation (Arrow Down, Arrow Up, Home, End). These move focus only, without selection.\n- Browser form lifecycle callbacks (`formResetCallback`, `formStateRestoreCallback`). This matches native `<input type=\"radio\">` behavior, which does not fire `change` on form reset. Internal form state (`ElementInternals.setFormValue`) is always updated regardless.\n\n## Angular Integration\n\n### Automatic Form Integration\n\nUse the `LmvzCheckableValueChangeHelper` directive (included in `@lmvz-ds/angular`) to automatically wire `lmvz-radio` to Angular form controls. When this directive is present on the element, it automatically binds the `lmvzChange` event to the form control's `valueChange` output:\n\n```html\n<!-- With [(ngModel)] -->\n<lmvz-radio\n  label=\"Option A\"\n  name=\"choice\"\n  value=\"a\"\n  [(ngModel)]=\"selectedValue\">\n</lmvz-radio>\n\n<!-- With [formControl] -->\n<lmvz-radio\n  label=\"Option B\"\n  name=\"choice\"\n  value=\"b\"\n  [formControl]=\"controlRef\">\n</lmvz-radio>\n```\n\nNo additional setup is required — the directive is applied automatically via the selector `lmvz-checkbox, lmvz-radio`.\n\n### Manual Event Binding\n\nIf you need direct event handling, listen to the `lmvzChange` event:\n\n```html\n<lmvz-radio\n  label=\"Option\"\n  name=\"choice\"\n  [checked]=\"isChecked\"\n  (lmvzChange)=\"isChecked = $event.target.checked\">\n</lmvz-radio>\n```\n\n## Public Methods\n\n### focusInput()\n\nProgrammatically set focus on the native radio input. Use this method when you need to move keyboard focus to a radio after a user interaction or page state change:\n\n```typescript\nconst radioEl = document.querySelector('lmvz-radio');\nawait radioEl.focusInput();\n```\n\n## Event Reference\n\n### lmvzActivation\n\nThe `lmvzActivation` event fires on every explicit user activation: click or Space on the native input. This includes re-activation of an already-checked radio. Use this event to react directly to user intent, distinct from state transitions.\n\n### lmvzChange vs lmvzActivation\n\n- **`lmvzActivation`:** Fires on every explicit user activation (click or Space), regardless of whether the checked state actually changes.\n- **`lmvzChange`:** Fires only on state transitions (checked ↔ unchecked).\n\nWhen a user selects a different radio in a group, both events fire together. When a user re-activates an already-checked radio, only `lmvzActivation` fires.\n\n## Design Notes / Waivers\n\n### Checked + hover state (OQ-5)\n\nWhen a radio is both checked and hovered, the checked background (`--radio-wrapper-bg-checked`) is held — the hover background does not override it. No Figma spec exists for this combined state; this behavior is an intentional implementation decision.\n\n### Label wrapping (OQ-3)\n\nThe label uses `overflow-wrap: break-word` (normal wrapping). `white-space: nowrap` is intentionally not applied.\n",
       "docs": "Radio button component with form association, ARIA validation, accessible label support,\nand ARIA APG-compliant Arrow-key keyboard navigation.\n\n**Consumer responsibility — `role=\"radiogroup\"`:**\nWrap a group of `lmvz-radio` elements in a container element with `role=\"radiogroup\"` and\nan accessible label via `aria-label` or `aria-labelledby`. `lmvz-radio` must not carry\n`role=\"radiogroup\"` itself because a radio cannot also be a radiogroup.\n\n**Arrow-key navigation and roving tabindex:**\nWhen multiple `lmvz-radio` elements share the same `name` attribute, this component\nautomatically handles Arrow Down / Arrow Right (next), Arrow Up / Arrow Left (previous),\nHome (first), and End (last) navigation with wrapping. Disabled radios are skipped.\nThe checked radio has `tabindex=\"0\"`. When no radio is checked, the first enabled radio\nin DOM order receives `tabindex=\"0\"`, ensuring the group is always reachable by Tab.",
       "docsTags": [
         {
@@ -7817,7 +7928,6 @@
               "text": "false"
             }
           ],
-          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -7825,8 +7935,8 @@
           ],
           "optional": false,
           "required": false,
-          "getter": false,
-          "setter": false
+          "getter": true,
+          "setter": true
         },
         {
           "name": "form",
@@ -7913,12 +8023,12 @@
           },
           "mutable": false,
           "attr": "name",
-          "reflectToAttr": false,
-          "docs": "Name attribute for form submission via ElementInternals.\n\nWhen multiple `lmvz-radio` elements share the same `name` and form scope,\nthe `name` is forwarded directly to the native `<input type=\"radio\">`,\nenabling browser-native mutual exclusion: selecting one radio automatically\ndeselects all others with the same name in that form. If a radio is outside\nany form, its scope defaults to the document level — same-name radios\noutside forms form a document-scoped group. Radios with the same `name` in\ndifferent forms are independent groups.\n\nThe `RadioGroupController` automatically manages roving tabindex (only the\nchecked radio has `tabindex=\"0\"`) and keyboard navigation (Arrow keys, Home, End)\nwithin the form-scoped group.",
+          "reflectToAttr": true,
+          "docs": "Name attribute for form submission via ElementInternals.\n\nThe `name` is NOT forwarded to the native `<input type=\"radio\">` — this component\nrenders in `scoped` (light DOM) mode, so a native `name` attribute would make the\ninner `<input>` an independent, genuinely form-associated element of the outer\n`<form>`, submitting a duplicate value alongside the host's own `ElementInternals`\nparticipation. Instead, `name` is used purely as a JS-level grouping key: the\n`RadioGroupController` tracks all `lmvz-radio` hosts sharing the same `name` and form\nscope in an internal registry and enforces mutual exclusion itself (via\n`RadioGroup.select()`, which sets `checked = false` on every other host in the group).\nIf a radio is outside any form, its scope defaults to the document level — same-name\nradios outside forms form a document-scoped group. Radios with the same `name` in\ndifferent forms are independent groups.\n\nThe `RadioGroupController` also manages roving tabindex (only the checked radio has\n`tabindex=\"0\"`) and keyboard navigation (Arrow keys, Home, End) within the group.",
           "docsTags": [
             {
               "name": "remarks",
-              "text": "A value of `\"\"` (empty string) is forwarded to the native `<input>`, but\n`RadioGroupController` treats it as unnamed — no group coordination occurs between\nradios with `name=\"\"`."
+              "text": "A value of `\"\"` (empty string) is treated as unnamed by `RadioGroupController` —\nno group coordination occurs between radios with `name=\"\"`."
             }
           ],
           "values": [
@@ -8038,6 +8148,28 @@
           "docs": "Sets focus on the native radio input.",
           "docsTags": []
         },
+        {
+          "name": "getValidationMessage",
+          "returns": {
+            "type": "Promise<string>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<string>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<string>"
+          },
+          "signature": "getValidationMessage() => Promise<string>",
+          "parameters": [],
+          "docs": "Returns the current validation message, if any.",
+          "docsTags": []
+        },
         {
           "name": "reportValidity",
           "returns": {
@@ -8092,6 +8224,11 @@
         }
       ],
       "listeners": [
+        {
+          "event": "invalid",
+          "capture": false,
+          "passive": false
+        },
         {
           "event": "keydown",
           "capture": false,
@@ -8110,8 +8247,8 @@
       "filePath": "src/components/lmvz-select/lmvz-select.tsx",
       "encapsulation": "scoped",
       "tag": "lmvz-select",
-      "readme": "# lmvz-select\n\n## Props\n\n### `size`\n\n- Type: `'small' | 'default' | 'large'`\n- Default: `'default'`\n\nControls the visual height variant of the select field. Use `small` for compact layouts, `default` for standard use, and `large` for emphasis.\n\n### `highlighted`\n\n- Type: `boolean`\n- Default: `false`\n\nIndicates that an active filter or selection applies (e.g., a filter chip is active). When `true`:\n- The host attribute `[highlighted]` is present for CSS styling (`:host([highlighted])`).\n- The host attribute `data-highlighted=\"true\"` is set for assistive-technology consumers.\n\nWhen `false`, `data-highlighted=\"false\"` is set. Note that `aria-pressed` and `aria-selected` are not used here; they conflict with native `<select>` semantics. The `data-highlighted` attribute provides the accessible contract.\n",
-      "docs": "Select component with floating label and pill-shaped trigger.\nWraps a native `<select>` element for full keyboard and form support.",
+      "readme": "# lmvz-select\n\nSelect component with floating label and pill-shaped trigger that implements the WAI-ARIA \"combobox with listbox popup\" pattern.\n\n## What changed: Breaking rewrite from native `<select>` to custom WAI-ARIA combobox\n\nIn previous versions, `lmvz-select` wrapped a native `<select>` element and inherited its form behavior and platform-specific UI (including native mobile pickers on iOS/Android). As of this version, it is a fully custom WAI-ARIA combobox implemented using:\n\n- A `role=\"combobox\"` trigger button (your interaction target)\n- A `role=\"listbox\"` popup menu hosted in `lmvz-popover`\n- Focus management via `aria-activedescendant` (trigger keeps focus; the selected item is tracked via an aria attribute rather than DOM focus)\n- Form submission via `ElementInternals` (like `lmvz-input`, `lmvz-checkbox`, etc. in this design system)\n\n**What consumers must know:**\n\n- **No native mobile picker:** On iOS, Android, and other platforms, users see the custom popup instead of the OS-native picker. This is by design, to ensure consistent styling and behavior across platforms.\n- **Slot contract:** You pass native `<option>` and `<optgroup>` elements as children. The component translates them internally to `role=\"listbox\"` and `role=\"option\"` elements.\n- **`<option selected>` is meaningful:** If you do not set the `value` prop, the first `<option selected=\"selected\">` becomes the initial value.\n- **Validation is minimal:** The component uses native HTML form constraint validation (`ElementInternals.setValidity()`). When `required` is true and no value is set, the browser's default validation UI appears on form submit; the component does not provide custom validation message styling beyond `errorMessage` (which you control via props).\n- **Form submission:** Use the `name` attribute (set directly on the `<lmvz-select>` host) and the current `value` to participate in HTML form submission. Form reset correctly restores the initial value.\n\n## Slot contract\n\nThe default slot accepts only native `<option>` and `<optgroup>` elements. The component reads this markup once on mount and translates it into an internal listbox model, re-parsing whenever the slotted content changes structurally (options/optgroups added or removed) or an already-slotted option/optgroup is mutated in place (e.g. `.disabled`, `.selected`, `.value`, `.label`, or its text content), mirroring native `<select>` reactivity. The slotted markup is never rendered; it serves as a template.\n\n```html\n<lmvz-select label=\"Fruit\" name=\"fruit\">\n  <option value=\"apple\">Apple</option>\n  <optgroup label=\"Citrus\">\n    <option value=\"orange\">Orange</option>\n    <option value=\"lemon\">Lemon</option>\n  </optgroup>\n  <option value=\"banana\" selected>Banana</option>\n</lmvz-select>\n```\n\n## Form integration\n\n`lmvz-select` is a form-associated custom element (`formAssociated: true`). Set the `name` attribute on the host element, and the component participates in:\n\n- **Form submission:** The current `value` is submitted under the `name` key.\n- **Form reset:** Restores `value` to its initial state (the prop value at mount time).\n- **Validation:** Set `required` to enforce that a value is present. Use `checkValidity()`, `reportValidity()`, and `getValidationMessage()` methods for programmatic validation.\n\n## Props explained\n\n### `size`\n\n- Type: `'small' | 'default' | 'large'`\n- Default: `'default'`\n\nControls the visual height variant of the select trigger. Use `small` for compact layouts, `default` for standard use, and `large` for emphasis.\n\n### `highlighted`\n\n- Type: `boolean`\n- Default: `false`\n\nIndicates that an active filter or selection applies (e.g., a filter chip is active). When `true`:\n- The host attribute `[highlighted]` is present for CSS styling (`:host([highlighted])`).\n- The host attribute `data-highlighted=\"true\"` is set for assistive-technology consumers.\n\nWhen `false`, `data-highlighted=\"false\"` is set. The `data-highlighted` attribute (rather than `aria-pressed`) provides this accessible contract; `aria-selected` is reserved for the `role=\"option\"` elements in the listbox popup.\n\n### `error`\n\n- Type: `boolean`\n- Default: `false`\n- Reflected as host attribute: yes\n\nWhen `true`:\n- Applies danger-themed border color to the combobox trigger.\n- Sets `aria-invalid=\"true\"` on the trigger element.\n\n`aria-invalid` is also automatically set to `true` when the select's real constraint validity becomes invalid following a validation attempt (e.g., after a failed `submit`, `checkValidity()`, or `reportValidity()` call), and is cleared once the constraint is resolved. This allows automatic reflect of native HTML5 validation state independent of the `error` prop.\n\nTypically set alongside `errorMessage` to provide inline error text.\n\n### `errorMessage`\n\n- Type: `string | undefined`\n- Default: `undefined`\n\nError message text rendered below the select field when `error={true}`. Rendered as an assertive live region (`role=\"alert\"`), linked to the trigger via `aria-describedby` and `aria-errormessage`.\n\nCoexists with `helperText` — both can be displayed simultaneously, with `helperText` rendered first.\n",
+      "docs": "Select component with floating label and pill-shaped trigger.\nImplements the WAI-ARIA APG \"combobox with listbox popup\" pattern: a `role=\"combobox\"`\ntrigger drives an `lmvz-popover`-hosted `role=\"listbox\"`/`role=\"option\"` list via the\nactivedescendant model (the trigger keeps real DOM focus; `aria-activedescendant` tracks\nthe highlighted option).\n\nParticipates in native HTML forms via `ElementInternals` (form-associated custom element):\nthe `name` attribute (set directly on the host element) and the current `value` are submitted,\nand the value resets to its initial value on form reset.",
       "docsTags": [
         {
           "name": "example",
@@ -8123,7 +8260,7 @@
         },
         {
           "name": "slot",
-          "text": "default - Native `<option>` or `<optgroup>` elements."
+          "text": "default - Native `<option>` or `<optgroup>` elements. Never rendered directly; read once\nassigned to build the internal `role=\"option\"` listbox, and re-read on structural slot changes\nor in-place mutation (attribute/text/subtree) of already-slotted elements. `<option selected>`\ndetermines the initial value when the `value` prop is not set."
         }
       ],
       "usage": {},
@@ -8157,6 +8294,60 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "error",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "error",
+          "reflectToAttr": true,
+          "docs": "Whether the select is in an error state.\nWhen not set manually, this will automatically reflect native HTML5 validation state",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": true,
+          "setter": true
+        },
+        {
+          "name": "errorMessage",
+          "type": "string | undefined",
+          "complexType": {
+            "original": "string",
+            "resolved": "string | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "error-message",
+          "reflectToAttr": false,
+          "docs": "Error message displayed below the select field when error is true.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "helperText",
           "type": "string | undefined",
@@ -8194,7 +8385,7 @@
           "mutable": false,
           "attr": "highlighted",
           "reflectToAttr": true,
-          "docs": "Whether the select has an active filter or selection that should be visually\ndistinguished (e.g. a filter chip is applied).\n\nWhen `true`:\n- The host attribute `highlighted` is present (CSS: `:host([highlighted])`).\n- The host attribute `data-highlighted=\"true\"` is set for assistive-technology\n  consumers that observe data attributes. When `false`, `data-highlighted` is\n  set to `\"false\"`.\n\nNote: `aria-pressed` and `aria-selected` are intentionally not used here.\n`aria-pressed` is reserved for toggle-button roles; `aria-selected` is\nreserved for option/listbox roles. The `data-highlighted` attribute provides\nthe accessible contract without conflicting with native `<select>` semantics.",
+          "docs": "Whether the select has an active filter or selection that should be visually\ndistinguished (e.g. a filter chip is applied).\n\nWhen `true`:\n- The host attribute `highlighted` is present (CSS: `:host([highlighted])`).\n- The host attribute `data-highlighted=\"true\"` is set for assistive-technology\n  consumers that observe data attributes. When `false`, `data-highlighted` is\n  set to `\"false\"`.\n\nNote: `aria-pressed` is intentionally not used here; it is reserved for toggle-button\nroles. `aria-selected` is reserved for this component's own `role=\"option\"` elements.\nThe `data-highlighted` attribute provides the accessible contract for this state.",
           "docsTags": [
             {
               "name": "default",
@@ -8245,8 +8436,8 @@
           },
           "mutable": false,
           "attr": "name",
-          "reflectToAttr": false,
-          "docs": "Name attribute passed to the native select for form submission.",
+          "reflectToAttr": true,
+          "docs": "Name attribute for form submission via ElementInternals.",
           "docsTags": [],
           "values": [
             {
@@ -8362,7 +8553,118 @@
           "setter": false
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "blurTrigger",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "blurTrigger() => Promise<void>",
+          "parameters": [],
+          "docs": "Removes focus from the combobox trigger.",
+          "docsTags": []
+        },
+        {
+          "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 select satisfies its validation constraints.",
+          "docsTags": []
+        },
+        {
+          "name": "focusTrigger",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "focusTrigger() => Promise<void>",
+          "parameters": [],
+          "docs": "Sets focus on the combobox trigger.",
+          "docsTags": []
+        },
+        {
+          "name": "getValidationMessage",
+          "returns": {
+            "type": "Promise<string>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<string>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<string>"
+          },
+          "signature": "getValidationMessage() => Promise<string>",
+          "parameters": [],
+          "docs": "Returns the current validation message, if any.",
+          "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",
@@ -8379,19 +8681,31 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "invalid",
+          "capture": false,
+          "passive": false
+        }
+      ],
       "styles": [],
       "slots": [
         {
           "name": "default",
-          "docs": "Native `<option>` or `<optgroup>` elements."
+          "docs": "Native `<option>` or `<optgroup>` elements. Never rendered directly; read once\nassigned to build the internal `role=\"option\"` listbox, and re-read on structural slot changes\nor in-place mutation (attribute/text/subtree) of already-slotted elements. `<option selected>`\ndetermines the initial value when the `value` prop is not set."
         }
       ],
       "parts": [],
       "states": [],
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {}
+      "dependencies": [
+        "lmvz-popover"
+      ],
+      "dependencyGraph": {
+        "lmvz-select": [
+          "lmvz-popover"
+        ]
+      }
     },
     {
       "filePath": "src/components/lmvz-snackbar/lmvz-snackbar.tsx",
@@ -9463,6 +9777,28 @@
           "docs": "Returns the native HTMLInputElement.\n\nPromise resolves when the element is ready and the input is available.",
           "docsTags": []
         },
+        {
+          "name": "getValidationMessage",
+          "returns": {
+            "type": "Promise<string>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<string>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<string>"
+          },
+          "signature": "getValidationMessage() => Promise<string>",
+          "parameters": [],
+          "docs": "Returns the current validation message, if any.",
+          "docsTags": []
+        },
         {
           "name": "reportValidity",
           "returns": {