@lmvz-ds/components 0.37.0 → 0.39.0

package/manifest.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-14T13:31:39",
+  "timestamp": "2026-08-11T13:11:51",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -1426,9 +1426,15 @@
       ],
       "parts": [],
       "states": [],
-      "dependents": [],
+      "dependents": [
+        "lmvz-select"
+      ],
       "dependencies": [],
-      "dependencyGraph": {}
+      "dependencyGraph": {
+        "lmvz-select": [
+          "lmvz-chip"
+        ]
+      }
     },
     {
       "filePath": "src/components/lmvz-datepicker/lmvz-datepicker.tsx",
@@ -7376,7 +7382,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## 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",
+      "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 host element). |\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 content container (a styled surface). The ARIA role is on the host element, not this container. Target to customize sizing, overflow, or visual 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 popover's ARIA role and accessible label are applied to the **host element** (not an internal container). The role defaults to `'dialog'`, configurable via the `containerRole` prop. Provide a `label` prop or set `aria-labelledby` on the host element to satisfy dialog labeling requirements.\n\nConsumers may set additional ARIA attributes directly on the `<lmvz-popover>` host element as plain attributes. For example, when using the popover as a listbox in a combobox pattern, set `aria-multiselectable=\"true\"` on the host if the listbox supports multiselection:\n\n```html\n<lmvz-popover container-role=\"listbox\" aria-multiselectable=\"true\">\n  <!-- listbox content -->\n</lmvz-popover>\n```\n\n**Accessibility note (WebKit/Safari):** The host element uses `display: contents`, combined with an explicit host-level `role`. This combination has a known cross-engine accessibility-tree inconsistency in WebKit/Safari that is not fully resolvable in the current Stencil architecture. This design has been accepted as a documented trade-off to maintain semantic clarity in the DOM.\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": [
         {
@@ -8247,8 +8253,8 @@
       "filePath": "src/components/lmvz-select/lmvz-select.tsx",
       "encapsulation": "scoped",
       "tag": "lmvz-select",
-      "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.",
+      "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 (or, in multiselect mode, all enabled `<option selected>` elements are collected into the initial `values`).\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### Multiselect mode\n\nSet the `multiple` prop to enable multiselect mode. When `multiple` is `true`:\n\n- **Selection is tracked in `values`** (a `string[]` array), not in the single-select `value` prop. The `value` prop is ignored; do not set it alongside `multiple`.\n- **Options toggle membership** on selection instead of replacing a single value. Selecting an already-selected option deselects it.\n- **The listbox stays open** after selecting or deselecting an option. Close it via Escape, outside click, or re-clicking the trigger.\n- **The closed trigger renders one chip per selected value** for display only, using the `lmvz-chip` component. Removing a value is done by reselecting it in the open listbox.\n- **Keyboard selection works the same:** Space or Enter while an option is active (highlighted) toggles its selection without closing the popover.\n- **Preselection:** Pass `<option selected>` elements — *all* enabled ones are collected into the initial `values` array, not just the first (mirroring how `<select multiple>` works).\n- **Known limitation:** A \"select all\" control is not implemented in this iteration; it is planned as a future follow-up.\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 (single-select mode), or multiple form entries are submitted (multiselect mode).\n- **Form reset:** Restores `value` or `values` to their initial state (the prop values 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### Multiselect form submission\n\nIn multiselect mode (`multiple` true), form submission uses `FormData` to submit one entry per selected value:\n\n```javascript\nconst form = document.querySelector('form');\nconst formData = new FormData(form);\n// If the select has name=\"country\" and values=[\"ch\", \"de\"], then:\n// formData.getAll('country') returns ['ch', 'de']\n```\n\nForm reset restores `values` to its initial state (all enabled `<option selected>` elements, or an empty array if none). Programmatically, you can also detect multiselect form state restoration via the `formStateRestoreCallback()` lifecycle (called during form reset or history navigation).\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### `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\nSupports an opt-in multiselect mode (`multiple`): selection is tracked in `values` (an array)\ninstead of the single-select `value`, selecting an option toggles its membership without\nclosing the popup, and the closed trigger renders one `lmvz-chip` per selected value for\ndisplay only — removing a value is done by reselecting it in the open listbox, not from a\nchip control.\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` (or, in\nmultiselect mode, one form entry per selected `values` entry) are submitted, and selection\nresets to its initial state on form reset.",
       "docsTags": [
         {
           "name": "example",
@@ -8260,7 +8266,7 @@
         },
         {
           "name": "slot",
-          "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."
+          "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 (or, in multiselect mode, the initial `values`) when the `value`/\n`values` prop is not set."
         }
       ],
       "usage": {},
@@ -8375,54 +8381,54 @@
           "setter": false
         },
         {
-          "name": "highlighted",
-          "type": "boolean",
+          "name": "label",
+          "type": "string",
           "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
+            "original": "string",
+            "resolved": "string",
             "references": {}
           },
           "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` 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",
-              "text": "false"
-            }
-          ],
-          "default": "false",
+          "attr": "label",
+          "reflectToAttr": false,
+          "docs": "Label text displayed as a placeholder when no value is selected,\nand floated above the trigger when a value is present.",
+          "docsTags": [],
           "values": [
             {
-              "type": "boolean"
+              "type": "string"
             }
           ],
           "optional": false,
-          "required": false,
+          "required": true,
           "getter": false,
           "setter": false
         },
         {
-          "name": "label",
-          "type": "string",
+          "name": "multiple",
+          "type": "boolean",
           "complexType": {
-            "original": "string",
-            "resolved": "string",
+            "original": "boolean",
+            "resolved": "boolean",
             "references": {}
           },
           "mutable": false,
-          "attr": "label",
-          "reflectToAttr": false,
-          "docs": "Label text displayed as a placeholder when no value is selected,\nand floated above the trigger when a value is present.",
-          "docsTags": [],
+          "attr": "multiple",
+          "reflectToAttr": true,
+          "docs": "Enables multiselect mode. When `true`, `values` becomes the sole selection source (`value`\nis not read or written by the component), options toggle membership on selection instead of\nreplacing a single value, the popup stays open after selecting/deselecting an option, and the\nclosed trigger renders one `lmvz-chip` per selected value for display only. Removing a value\nis done by reselecting it in the open listbox (via `handleOptionSelect`'s toggle-off path),\nnot from a control on the chip itself.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
           "values": [
             {
-              "type": "string"
+              "type": "boolean"
             }
           ],
           "optional": false,
-          "required": true,
+          "required": false,
           "getter": false,
           "setter": false
         },
@@ -8537,7 +8543,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "Currently selected value.",
+          "docs": "Currently selected value. Ignored (not read or written) when `multiple` is `true` — use\n`values` instead.",
           "docsTags": [],
           "values": [
             {
@@ -8551,6 +8557,31 @@
           "required": false,
           "getter": false,
           "setter": false
+        },
+        {
+          "name": "values",
+          "type": "string[] | undefined",
+          "complexType": {
+            "original": "string[]",
+            "resolved": "string[] | undefined",
+            "references": {}
+          },
+          "mutable": true,
+          "reflectToAttr": false,
+          "docs": "Currently selected values in multiselect mode (`multiple` true). Not attribute-reflected;\nset/read as a JS property. Preselection collects every enabled `<option selected>` (not just\nthe first) into the initial value when unset.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string[]"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": true,
+          "required": false,
+          "getter": false,
+          "setter": false
         }
       ],
       "methods": [
@@ -8668,16 +8699,16 @@
       "events": [
         {
           "event": "lmvzChange",
-          "detail": "string",
+          "detail": "string | string[]",
           "bubbles": true,
           "complexType": {
-            "original": "string",
-            "resolved": "string",
+            "original": "string | string[]",
+            "resolved": "string | string[]",
             "references": {}
           },
           "cancelable": true,
           "composed": true,
-          "docs": "Emitted when the user selects a new option. Detail contains the new value.",
+          "docs": "Emitted when the user changes the selection. Detail contains the new value:\na `string` in single-select mode (`multiple` false/unset — same shape as before), or the\nfull updated `string[]` of selected values in multiselect mode (`multiple` true).",
           "docsTags": []
         }
       ],
@@ -8692,17 +8723,19 @@
       "slots": [
         {
           "name": "default",
-          "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."
+          "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 (or, in multiselect mode, the initial `values`) when the `value`/\n`values` prop is not set."
         }
       ],
       "parts": [],
       "states": [],
       "dependents": [],
       "dependencies": [
+        "lmvz-chip",
         "lmvz-popover"
       ],
       "dependencyGraph": {
         "lmvz-select": [
+          "lmvz-chip",
           "lmvz-popover"
         ]
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.37.0",
+  "version": "0.39.0",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
@@ -10,6 +10,7 @@
     "linkDirectory": false
   },
   "exports": {
+    "./index.js": "./index.js",
     ".": {
       "types": "./components/index.d.ts",
       "import": "./components/index.js"

package/types/components/lmvz-input/lmvz-input.d.ts

@@ -64,8 +64,6 @@ export declare class LmvzInput extends ReactiveControllerHost implements AriaVal
     protected handleValueChange(newValue: string | undefined): void;
     protected handleDisabledChange(disabled: boolean): void;
     private handleInput;
-    private handleChange;
-    private handleFocus;
     private handleInvalid;
     private handleBlur;
     private updateNativeError;

package/types/components/lmvz-popover/lmvz-popover.d.ts

@@ -25,7 +25,6 @@ export declare class LmvzPopover {
     protected handleOpenChange(isOpen: boolean): void;
     protected handleAnchorChange(anchor: string | HTMLElement | undefined): Promise<void>;
     disconnectedCallback(): void;
-    private syncContainerId;
     private setupAnchorEl;
     private updatePosition;
     private onOpen;

package/types/components/lmvz-select/lmvz-select.d.ts

@@ -14,6 +14,8 @@ export declare class LmvzSelect extends ReactiveControllerHost implements AriaVa
     private optionsMutationObserver?;
     private initialValue?;
     private initialValueCaptured;
+    private initialValues?;
+    private initialValuesCaptured;
     private flatOptions;
     private optionsById;
     private readonly listboxController;
@@ -22,8 +24,10 @@ export declare class LmvzSelect extends ReactiveControllerHost implements AriaVa
     private get errorId();
     private get describedBy();
     constructor();
-    lmvzChange: EventEmitter<string>;
+    lmvzChange: EventEmitter<string | string[]>;
     value?: string;
+    multiple: boolean;
+    values?: string[];
     label: string;
     helperText?: string;
     private nativeError;
@@ -35,13 +39,14 @@ export declare class LmvzSelect extends ReactiveControllerHost implements AriaVa
     required: boolean;
     name?: string;
     size: Select.Size;
-    highlighted: boolean;
     private selectedLabel;
     private selectedId?;
     private activeId?;
     private isOpen;
     private optionGroups;
     private get hasValue();
+    private get triggerAriaLabel();
+    private get chipSize();
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
@@ -53,12 +58,15 @@ export declare class LmvzSelect extends ReactiveControllerHost implements AriaVa
     getValidationMessage(): Promise<string>;
     formAssociatedCallback(form: HTMLFormElement | undefined): void;
     formResetCallback(): void;
-    formStateRestoreCallback(state: string): void;
+    formStateRestoreCallback(state: string | FormData | File): void;
     protected handleValueChange(newValue: string | undefined): void;
+    protected handleValuesChange(): void;
     protected handleRequiredChange(): void;
     protected handleDisabledChange(disabled: boolean): void;
     private handleSlotChange;
     private applySelectionFromValue;
+    private isOptionSelected;
+    private syncFormValue;
     private updateValidity;
     protected handleInvalid(): void;
     private handleOptionSelect;
@@ -72,5 +80,6 @@ export declare class LmvzSelect extends ReactiveControllerHost implements AriaVa
     private closePopover;
     private renderOptionGroups;
     private renderOption;
+    private renderChips;
     render(): any;
 }

package/types/components/lmvz-snackbar/public.d.ts

@@ -1,2 +1,8 @@
+import { SnackbarController } from './snackbar-controller';
 export { SnackbarController } from './snackbar-controller';
 export type { SnackbarDismissReason, SnackbarHandle, SnackbarOptions, SnackbarPriority, SnackbarStatus } from './snackbar-controller';
+declare global {
+    interface LmvzApi {
+        SnackbarController?: typeof SnackbarController;
+    }
+}

package/types/components/lmvz-tabs/lmvz-tabs.d.ts

@@ -6,6 +6,7 @@ export declare class LmvzTabs extends ReactiveControllerHost implements Directio
     private readonly instanceId;
     private tabSlotEl?;
     private panelSlotEl?;
+    private tablistEl?;
     private focusController;
     value: string;
     orientation: 'horizontal' | 'vertical';

package/types/components.d.ts

@@ -729,9 +729,15 @@ export declare namespace Components {
      * trigger drives an `lmvz-popover`-hosted `role="listbox"`/`role="option"` list via the
      * activedescendant model (the trigger keeps real DOM focus; `aria-activedescendant` tracks
      * the highlighted option).
+     * Supports an opt-in multiselect mode (`multiple`): selection is tracked in `values` (an array)
+     * instead of the single-select `value`, selecting an option toggles its membership without
+     * closing the popup, and the closed trigger renders one `lmvz-chip` per selected value for
+     * display only — removing a value is done by reselecting it in the open listbox, not from a
+     * chip control.
      * Participates in native HTML forms via `ElementInternals` (form-associated custom element):
-     * the `name` attribute (set directly on the host element) and the current `value` are submitted,
-     * and the value resets to its initial value on form reset.
+     * the `name` attribute (set directly on the host element) and the current `value` (or, in
+     * multiselect mode, one form entry per selected `values` entry) are submitted, and selection
+     * resets to its initial state on form reset.
      * @example ```html
      * <lmvz-select label="Country" name="country">
      *   <option value="ch">Switzerland</option>
@@ -779,15 +785,15 @@ export declare namespace Components {
          * Helper text displayed below the select field.
          */
         "helperText"?: string;
-        /**
-         * Whether the select has an active filter or selection that should be visually distinguished (e.g. a filter chip is applied).  When `true`: - The host attribute `highlighted` is present (CSS: `:host([highlighted])`). - The host attribute `data-highlighted="true"` is set for assistive-technology   consumers that observe data attributes. When `false`, `data-highlighted` is   set to `"false"`.  Note: `aria-pressed` is intentionally not used here; it is reserved for toggle-button roles. `aria-selected` is reserved for this component's own `role="option"` elements. The `data-highlighted` attribute provides the accessible contract for this state.
-         * @default false
-         */
-        "highlighted": boolean;
         /**
          * Label text displayed as a placeholder when no value is selected, and floated above the trigger when a value is present.
          */
         "label": string;
+        /**
+         * Enables multiselect mode. When `true`, `values` becomes the sole selection source (`value` is not read or written by the component), options toggle membership on selection instead of replacing a single value, the popup stays open after selecting/deselecting an option, and the closed trigger renders one `lmvz-chip` per selected value for display only. Removing a value is done by reselecting it in the open listbox (via `handleOptionSelect`'s toggle-off path), not from a control on the chip itself.
+         * @default false
+         */
+        "multiple": boolean;
         /**
          * Name attribute for form submission via ElementInternals.
          */
@@ -807,9 +813,13 @@ export declare namespace Components {
          */
         "size": Select.Size;
         /**
-         * Currently selected value.
+         * Currently selected value. Ignored (not read or written) when `multiple` is `true` — use `values` instead.
          */
         "value"?: string;
+        /**
+         * Currently selected values in multiselect mode (`multiple` true). Not attribute-reflected; set/read as a JS property. Preselection collects every enabled `<option selected>` (not just the first) into the initial value when unset.
+         */
+        "values"?: string[];
     }
     export interface LmvzSnackbar {
         "actionLabel"?: string;
@@ -1732,9 +1742,15 @@ export declare namespace JSX {
      * trigger drives an `lmvz-popover`-hosted `role="listbox"`/`role="option"` list via the
      * activedescendant model (the trigger keeps real DOM focus; `aria-activedescendant` tracks
      * the highlighted option).
+     * Supports an opt-in multiselect mode (`multiple`): selection is tracked in `values` (an array)
+     * instead of the single-select `value`, selecting an option toggles its membership without
+     * closing the popup, and the closed trigger renders one `lmvz-chip` per selected value for
+     * display only — removing a value is done by reselecting it in the open listbox, not from a
+     * chip control.
      * Participates in native HTML forms via `ElementInternals` (form-associated custom element):
-     * the `name` attribute (set directly on the host element) and the current `value` are submitted,
-     * and the value resets to its initial value on form reset.
+     * the `name` attribute (set directly on the host element) and the current `value` (or, in
+     * multiselect mode, one form entry per selected `values` entry) are submitted, and selection
+     * resets to its initial state on form reset.
      * @example ```html
      * <lmvz-select label="Country" name="country">
      *   <option value="ch">Switzerland</option>
@@ -1770,23 +1786,23 @@ export declare namespace JSX {
          * Helper text displayed below the select field.
          */
         "helperText"?: string;
-        /**
-         * Whether the select has an active filter or selection that should be visually distinguished (e.g. a filter chip is applied).  When `true`: - The host attribute `highlighted` is present (CSS: `:host([highlighted])`). - The host attribute `data-highlighted="true"` is set for assistive-technology   consumers that observe data attributes. When `false`, `data-highlighted` is   set to `"false"`.  Note: `aria-pressed` is intentionally not used here; it is reserved for toggle-button roles. `aria-selected` is reserved for this component's own `role="option"` elements. The `data-highlighted` attribute provides the accessible contract for this state.
-         * @default false
-         */
-        "highlighted"?: boolean;
         /**
          * Label text displayed as a placeholder when no value is selected, and floated above the trigger when a value is present.
          */
         "label": string;
+        /**
+         * Enables multiselect mode. When `true`, `values` becomes the sole selection source (`value` is not read or written by the component), options toggle membership on selection instead of replacing a single value, the popup stays open after selecting/deselecting an option, and the closed trigger renders one `lmvz-chip` per selected value for display only. Removing a value is done by reselecting it in the open listbox (via `handleOptionSelect`'s toggle-off path), not from a control on the chip itself.
+         * @default false
+         */
+        "multiple"?: boolean;
         /**
          * Name attribute for form submission via ElementInternals.
          */
         "name"?: string;
         /**
-         * Emitted when the user selects a new option. Detail contains the new value.
+         * Emitted when the user changes the selection. Detail contains the new value: a `string` in single-select mode (`multiple` false/unset — same shape as before), or the full updated `string[]` of selected values in multiselect mode (`multiple` true).
          */
-        "onLmvzChange"?: (event: LmvzSelectCustomEvent<string>) => void;
+        "onLmvzChange"?: (event: LmvzSelectCustomEvent<string | string[]>) => void;
         /**
          * Whether a value is required.
          * @default false
@@ -1798,9 +1814,13 @@ export declare namespace JSX {
          */
         "size"?: Select.Size;
         /**
-         * Currently selected value.
+         * Currently selected value. Ignored (not read or written) when `multiple` is `true` — use `values` instead.
          */
         "value"?: string;
+        /**
+         * Currently selected values in multiselect mode (`multiple` true). Not attribute-reflected; set/read as a JS property. Preselection collects every enabled `<option selected>` (not just the first) into the initial value when unset.
+         */
+        "values"?: string[];
     }
     export interface LmvzSnackbar {
         "actionLabel"?: string;
@@ -2087,6 +2107,7 @@ export declare namespace JSX {
     }
     export interface LmvzSelectAttributes {
         "value": string;
+        "multiple": boolean;
         "label": string;
         "helperText": string;
         "error": boolean;
@@ -2095,7 +2116,6 @@ export declare namespace JSX {
         "required": boolean;
         "name": string;
         "size": Select.Size;
-        "highlighted": boolean;
     }
     export interface LmvzSnackbarAttributes {
         "status": Snackbar.Status;

package/types/index.d.ts

@@ -5,3 +5,8 @@ export type { LmvzDS, Typography } from './api';
 export * from './components/lmvz-message/public';
 export * from './components/lmvz-snackbar/public';
 export * from './utils/public';
+declare global {
+    interface Window {
+        LmvzApi: LmvzApi;
+    }
+}

package/types/utils/aria/directional-focus-controller.d.ts

@@ -10,17 +10,17 @@ export type DirectionalFocusHost = FocusHostExtensions & {
 type FocusHostExtensions = {
     initFocus: DirectionalFocusController['initFocus'];
 };
-export declare function isFocusControllerHost(el: HTMLElement): el is HTMLElement & FocusHostExtensions;
 export type DirectionalFocusReceiver = {
     resolveFocusableElement(): HTMLElement | undefined;
 };
 export type DirectionalFocusOrientation = 'horizontal' | 'vertical' | 'both';
 export type DirectionalFocusControllerConfig = {
-    orientation?: DirectionalFocusOrientation;
-    enableHomeAndEnd?: boolean;
-    manageTabIndex?: boolean;
+    orientation: DirectionalFocusOrientation;
+    enableHomeAndEnd: boolean;
+    manageTabIndex: boolean;
     onFocusTargetChange?: (element: HTMLElement) => void;
     isFocusableElement?: (element: HTMLElement) => boolean;
+    listenerTarget?: HTMLElement;
 };
 export declare class DirectionalFocusController implements ReactiveController {
     private readonly host;
@@ -30,6 +30,8 @@ export declare class DirectionalFocusController implements ReactiveController {
     constructor(host: DirectionalFocusHost, config?: DirectionalFocusControllerConfig);
     hostConnected(): void;
     hostDisconnected(): void;
+    updateListenerTarget(listenerTarget: HTMLElement): void;
+    private getListenerTarget;
     updateElements(elements: Element[]): void;
     setCurrentElement(element: Element | undefined | null): void;
     initFocus(): Promise<void>;
@@ -44,6 +46,6 @@ export declare class DirectionalFocusController implements ReactiveController {
     private applyFocusTarget;
     private canMoveFocusTo;
 }
-export type ListKeyboardNavigationHost = DirectionalFocusHost;
-export type ListKeyboardNavigationControllerConfig = DirectionalFocusControllerConfig;
-export { DirectionalFocusController as ListKeyboardNavigationController };
+export declare function isFocusControllerHost(el: HTMLElement): el is HTMLElement & FocusHostExtensions;
+export declare function isDirectionalFocusReceiver(el: HTMLElement): el is HTMLElement & DirectionalFocusReceiver;
+export {};

package/types/utils/icons/public.d.ts

@@ -1,3 +1,9 @@
+import { typedIconFromSet } from './icons.js';
 export type { IconSetNameMap } from '@lmvz-ds/lib-icon-api';
 export { getRegisteredIconProvider, registerIconProvider } from './icons-registry.js';
 export { typedIconFromSet } from './icons.js';
+declare global {
+    interface LmvzApi {
+        typedIconFromSet?: typeof typedIconFromSet;
+    }
+}

package/components/p--FDdvoIg.js

@@ -1 +0,0 @@
-import{p as i,h as e,d as o,t as n}from"./p-BPYBmylI.js";import{t,e as s,p as c}from"./p-DjvtQE7c.js";import{A as r}from"./p-BAj4FkUt.js";import{R as a}from"./p-diOze8wI.js";const l=Symbol.for("LMVZ__iconProviderRegistry"),m={};function v(){return"undefined"==typeof window?m:window[l]??(window[l]={})}function d(i,e){const o=v(),n=i;Object.prototype.hasOwnProperty.call(o,n)&&console.warn(`Icon provider with name "${n}" is already registered. Overwriting existing provider.`),o[n]=e}function h(i){const e=v();if(i)return e[i];const o=Object.keys(e);if(0===o.length)return;o.length>1&&console.warn(`Multiple icon providers registered (${o.join(", ")}). Using the first one: "${o[0]}".`);const n=o[0];return n?e[n]:void 0}function z(i,e){return{iconset:i,icon:e}}const p=i(class extends a{intersectionObserver;ariaValidationController=new r(this);get el(){return this}validationEl;icon;weight="medium";size="md";iconset;iconData;visible=!1;ariaLabel;get ariaHidden(){return!this.ariaLabel}constructor(i){super(!1),!1!==i&&this.__registerHost(),this.addController(this.ariaValidationController)}connectedCallback(){this.waitUntilVisible((()=>{this.visible=!0,this.loadIconPathData()})),super.connectedCallback()}disconnectedCallback(){this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,super.disconnectedCallback()}async loadIconPathData(){const{icon:i,iconset:e,visible:o}=this;if(!i||!o)return;const n=c(i);this.iconData=n||await async function(i){const{icon:e,iconset:o}=i;return await(async()=>{const i=h(o);if(i)try{const n=await Promise.resolve(i.resolve(e));if(!n?.svg)return void console.warn(`Icon "${e}"${o?` from set "${o}"`:""} not found in provider. Using default icon.`);const s=t(n.svg);if(s)return s}catch(i){return void console.error(`Error resolving icon "${e}" with provider:`,i)}else console.warn(`No icon provider registered. Unable to resolve icon "${e}"${o?` from set "${o}"`:""}. Using default icon.`)})()||(console.error(`Icon "${e}" not found${o?` in set "${o}"`:""}. Using default icon.`),s())}({icon:i,iconset:e})}componentDidRender(){this.validationEl=this.el.querySelector("svg"),this.ariaValidationController.revalidateAria(),super.componentDidRender()}render(){return e(o,{key:"be6032d11399289c3baddd63ebc7d9e1fb98b773",role:"img","aria-hidden":`${this.ariaHidden}`,innerHTML:this.iconData})}waitUntilVisible(i,e=50){"undefined"!=typeof window&&window.IntersectionObserver?(this.intersectionObserver=new IntersectionObserver((e=>{e.some((e=>!!e.isIntersecting&&(this.intersectionObserver&&"function"==typeof this.intersectionObserver.disconnect&&this.intersectionObserver.disconnect(),this.intersectionObserver=void 0,i(),!0)))}),{rootMargin:`${e}px`}),this.intersectionObserver.observe(this.el)):i()}static get watchers(){return{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}}static get style(){return".sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));--lmvz-icon-size:var(--lmvz-component-size, var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));display:inline-block;line-height:0;svg{display:block;height:var(--lmvz-icon-size);width:auto}svg path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem))}}[size='sm'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))}}[size='md'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-md, clamp(1rem, 0.94rem + 0.26vw, 1.25rem))}}[size='lg'].sc-lmvz-icon-h{svg{--lmvz-icon-size:var(--lmvz-component-icon-size-lg, clamp(1.25rem, 1.19rem + 0.26vw, 1.5rem))}}[size='inherit'].sc-lmvz-icon-h{svg{height:var(--lmvz-component-size, inherit)}}[weight='light'].sc-lmvz-icon-h{svg path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg path{stroke-width:2;fill:var(--lmvz-icon-color)}}"}},[514,"lmvz-icon",{icon:[513],weight:[513],size:[513],iconset:[513],ariaLabel:[513,"aria-label"],iconData:[32],visible:[32]},void 0,{icon:[{loadIconPathData:0}],iconset:[{loadIconPathData:0}]}]);function u(){"undefined"!=typeof customElements&&["lmvz-icon"].forEach((i=>{"lmvz-icon"===i&&(customElements.get(n(i))||customElements.define(n(i),p))}))}export{p as L,u as d,h as g,d as r,z as t}