@lmvz-ds/components 0.37.0 → 0.39.0

package/collection/components/lmvz-popover/lmvz-popover.js

@@ -39,7 +39,6 @@ export class LmvzPopover {
     }
     componentDidLoad() {
         autoAssignId(this.el);
-        this.syncContainerId();
     }
     handleOpenChange(isOpen) {
         if (isOpen) {
@@ -66,23 +65,16 @@ export class LmvzPopover {
         this.removeCloseHandlers();
         this.extEventController.abort();
     }
-    syncContainerId() {
-        const hostId = this.el.getAttribute('id');
-        if (!hostId || !this.containerEl)
-            return;
-        this.containerEl.id = hostId;
-    }
     setupAnchorEl() {
         const { anchorEl } = this;
         if (!anchorEl) {
             console.warn('no anchor element set for', this);
             return;
         }
-        this.syncContainerId();
         if (!anchorEl.hasAttribute('aria-haspopup')) {
             anchorEl.setAttribute('aria-haspopup', this.containerRole === 'dialog' ? 'dialog' : this.containerRole);
         }
-        anchorEl.setAttribute('aria-controls', this.containerEl?.id || this.el.getAttribute('id'));
+        anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
         if (!anchorEl.hasAttribute('aria-expanded')) {
             anchorEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
         }
@@ -110,7 +102,6 @@ export class LmvzPopover {
         await waitFrame();
         await this.updatePosition();
         autoAssignId(this.el);
-        this.syncContainerId();
         this.applyAnchorAriaOpen();
         this.lmvzOpen.emit();
         await waitFrame();
@@ -189,7 +180,7 @@ export class LmvzPopover {
         this.closureController?.abort();
     }
     render() {
-        return (h(Host, { key: '8dadcc766deebc03ea744fd1002078b382bfd48d' }, h("div", { key: 'd332714964212db6f5446afb1b8f38ff031a87b9', role: this.containerRole, part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, h("slot", { key: '0fa1d214c8c48942751cbd4759ebc992eacc8f72', ref: (el) => (this.slotEl = el) }))));
+        return (h(Host, { key: '83529aeac05cdc706193fa8bbbcc8f8672756111', role: this.containerRole, "aria-label": this.label || undefined }, h("div", { key: '97c255e788806c0dec2f4ed04c6fc815150912a2', part: "container", class: `container lmvz-wrapper-card-${this.size}`, ref: (el) => (this.containerEl = el) }, h("slot", { key: 'e4ea69d179557e7d34f1475c07c9284ea8d10a67', ref: (el) => (this.slotEl = el) }))));
     }
     static get is() { return "lmvz-popover"; }
     static get encapsulation() { return "shadow"; }

package/collection/components/lmvz-select/lmvz-select.css

@@ -60,6 +60,8 @@
   --lmvz-select-helper-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);
   --lmvz-select-focus-color: var(--lmvz-semantic-color-status-on-active, #0e7ab4);
   --lmvz-select-error-color: var(--lmvz-semantic-color-status-on-danger, #a31419);
+  /* Sizes the trailing chevron icon, shared by single- and multiselect modes. */
+  --lmvz-select-chevron-size: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
 
   padding-top: var(--lmvz-internal-select-floating-label-top-offset);
 }
@@ -124,24 +126,12 @@ label > span[aria-hidden='true'],
   z-index: 1;
   transition: border-color 0.15s ease;
 }
-:host(:not([disabled], [highlighted], [error])) .select-wrapper:hover .select-trigger {
+:host(:not([disabled], [error])) .select-wrapper:hover .select-trigger {
   border-color: var(--lmvz-select-border-color-hover);
 }
 :host([error]) .select-trigger {
   border-color: var(--lmvz-select-error-color);
 }
-:host([highlighted]) .select-trigger {
-  background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
-  border-color: var(--lmvz-semantic-color-border-active, #0f8acc);
-  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
-}
-:host([highlighted]) .select-trigger > span:first-child {
-  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
-}
-:host([highlighted]) label.floating-label {
-  background-color: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
-  color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
-}
 :host:has(:focus-visible) .select-trigger {
   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
@@ -156,21 +146,31 @@ label > span[aria-hidden='true'],
   white-space: nowrap;
   text-align: left;
 }
-/* Active-selected text color: when a value is selected (not applicable in highlighted state) */
-:host(:not([highlighted])) .select-wrapper.has-value .select-trigger > span:first-child {
+.select-wrapper.has-value .select-trigger > span:first-child {
   color: var(--lmvz-semantic-color-int-on-secondary-active, #000000);
 }
-.select-trigger > span:last-child {
+/* Trailing chevron child span, shared by single- and multiselect modes. Scoped with the
+   adjacent-sibling combinator (rather than :last-child) so it never matches the leading text/chip
+   span. */
+.select-trigger > span:first-child + span {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .select-trigger svg {
-  width: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
-  height: var(--lmvz-component-icon-size-2xs, clamp(0.63rem, 0.59rem + 0.13vw, 0.75rem));
+  width: var(--lmvz-select-chevron-size);
+  height: var(--lmvz-select-chevron-size);
   flex-shrink: 0;
 }
+/* Chip row — rendered inline inside the trigger's leading text span (.select-trigger >
+   span:first-child). Overflowing chips are truncated with an ellipsis to enforce single line. */
+.select-trigger > span:first-child lmvz-chip {
+  vertical-align: middle;
+}
+.select-trigger > span:first-child lmvz-chip + lmvz-chip {
+  margin-inline-start: var(--lmvz-select-gap);
+}
 /* Native <option>/<optgroup> markup is only a data source for the internal listbox; never shown. */
 .lmvz-select-native-options {
   display: none;
@@ -199,61 +199,84 @@ label > span[aria-hidden='true'],
   --lmvz-select-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
   --lmvz-select-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));
   --lmvz-select-label-font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
+  --lmvz-select-chevron-size: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
 }
 :host([size='small']) .select-trigger > span:first-child {
   font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
-:host([size='small']) .select-trigger svg {
-  width: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
-  height: var(--lmvz-component-icon-size-4xs, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));
-}
 :host([size='large']) {
   --lmvz-select-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));
   --lmvz-select-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));
   --lmvz-select-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));
   --lmvz-select-label-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  --lmvz-select-chevron-size: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
 }
 :host([size='large']) .select-trigger > span:first-child {
   font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem));
 }
-:host([size='large']) .select-trigger svg {
-  width: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-  height: var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-}
-/*
- * Option-list item styling for the `role="option"` elements rendered inside the
- * `lmvz-popover` (containerRole="listbox") popup. The token set mirrors the states
- * `lmvz-action-list` applies to its `<lmvz-button>`/`<button>` items (tertiary variant),
- * so the listbox looks visually identical to an action-list item:
- *   - default:  --lmvz-semantic-color-int-tertiary / --lmvz-semantic-color-int-on-tertiary
- *   - hover:    --lmvz-semantic-color-int-tertiary-hover / --lmvz-semantic-color-int-on-tertiary-hover
- *   - active:   --lmvz-semantic-color-int-tertiary-active / --lmvz-semantic-color-int-on-tertiary-active
- *   - disabled: --lmvz-component-input-disabled-opacity (opacity, same token as lib-styles buttons fragment)
- *   - focus:    --lmvz-ds-outline / --lmvz-ds-outline-offset (same as lib-styles buttons fragment focus-visible)
- * "selected" has no action-list equivalent (action-list is a menu, not a listbox), so it
- * reuses this component's own highlighted-state tokens for consistency with the trigger.
- * "active" (`data-active="true"`) is this component's own addition: since the combobox uses
- * the activedescendant model, the highlighted option never receives real DOM focus, so
- * `:hover`/`:focus-visible` cannot indicate it to sighted keyboard users — `data-active` is
- * set by the host from `ListboxController`'s active id and styled the same as hover/focus.
- */
 .lmvz-select-option {
   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);
   --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary, #000000);
 
-  display: flex;
+  /* The configuration here will match lmvz-action-list's items, though semantic states might differ intentionally */
+  --lmvz-button-background-override: var(--lmvz-select-option-background);
+  --lmvz-button-color-override: var(--lmvz-select-option-color);
+  --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px);
+  --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  --lmvz-button-content-justification: normal;
+  --lmvz-button-font-override: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
+
+  /* the (invalid nested) import will be handled by postcss */
+  /* stylelint-disable-next-line no-invalid-position-at-import-rule */
+  /* stylelint-disable nesting-selector-no-missing-scoping-root */
+& {
+  /* variables are declared on :host
+     so that outer ::slotted(lmvz-button) overrides are inherited correctly via shadow inheritance.
+     They are also declared here so that non-shadow consumers have the default values in scope. */
+
+  /* secondary styling is default, primary is explicit */
+
+  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
+  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
+  --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px));
+  --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));
+  --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-button-padding, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem))));
+  --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
+  --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
+  --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-md-strong, normal 700 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router));
+  --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
+  --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
+
+  display: inline-flex;
   align-items: center;
-  gap: var(--lmvz-select-gap);
-  padding: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
-  border-radius: var(--lmvz-semantic-border-radius-md, 6px);
-  background-color: var(--lmvz-select-option-background);
-  color: var(--lmvz-select-option-color);
+  justify-content: var(--lmvz-button-content-justification, center);
+  gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
+
+  box-sizing: border-box; /* to inlclude paddings & border in min-height */
+  padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
+  padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
+  min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
+  border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent);
+  border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px));
+
+  background-color: var(--lmvz-button-background);
+  color: var(--lmvz-button-color);
   cursor: pointer;
-  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
-    Router);
+  font: var(--lmvz-button-font);
+  text-decoration: none;
+  white-space: nowrap;
   transition:
     background-color 0.15s ease,
-    color 0.15s ease;
+    color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+
+  display: flex;
 }
 .lmvz-select-option:not([aria-disabled='true']):hover {
   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
@@ -273,7 +296,7 @@ label > span[aria-hidden='true'],
   --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);
   --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-hover, #000000);
 }
-.lmvz-select-option[aria-selected='true'] {
+:host(:not([multiple])) .lmvz-select-option[aria-selected='true'] {
   --lmvz-select-option-background: var(--lmvz-semantic-color-status-active-alternate, #0f8acc);
   --lmvz-select-option-color: var(--lmvz-semantic-color-status-on-active-alternate, #ffffff);
 }
@@ -282,3 +305,29 @@ label > span[aria-hidden='true'],
   pointer-events: none;
   opacity: var(--lmvz-component-input-disabled-opacity, 40%);
 }
+/*
+ * Decorative, aria-hidden checkbox-style indicator shown per option in multiselect mode.
+ * Mirrors lmvz-checkbox's box/indicator sizing tokens for visual consistency across the DS.
+ * `aria-selected` on the option (above) remains the real, sole selection semantic; this is
+ * purely a visual affordance.
+ */
+.lmvz-select-option-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--lmvz-global-s18, 18px);
+  height: var(--lmvz-global-s18, 18px);
+  border: var(--lmvz-semantic-border-width-default, 1px) solid currentcolor;
+  border-radius: var(--lmvz-global-s4, 4px);
+  flex-shrink: 0;
+}
+.lmvz-select-option-checkbox-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.lmvz-select-option-checkbox-indicator svg {
+  width: 100%;
+  height: 100%;
+}

package/collection/components/lmvz-select/lmvz-select.js

@@ -1,8 +1,11 @@
-import { h, Host, } from "@stencil/core";
+import checkmark from "@lmvz-ds/icons/assets/checkmark.svg";
+import { toValidSvgStringWithFallback } from "@lmvz-ds/lib-ts/validation/svg.js";
+import { Fragment, h, Host } from "@stencil/core";
 import { AriaValidationController } from "../../utils/aria/aria-validation-controller";
 import { ListboxController } from "../../utils/aria/listbox-controller";
 import { ReactiveControllerHost } from "../../utils/stencil/reactive-controller-host";
 let selectIdCounter = 0;
+const CHECKMARK_SVG = toValidSvgStringWithFallback(checkmark);
 export class LmvzSelect extends ReactiveControllerHost {
     el;
     get validationEl() {
@@ -17,6 +20,8 @@ export class LmvzSelect extends ReactiveControllerHost {
     optionsMutationObserver;
     initialValue;
     initialValueCaptured = false;
+    initialValues;
+    initialValuesCaptured = false;
     flatOptions = [];
     optionsById = new Map();
     listboxController = new ListboxController({
@@ -50,6 +55,8 @@ export class LmvzSelect extends ReactiveControllerHost {
     }
     lmvzChange;
     value;
+    multiple = false;
+    values;
     label;
     helperText;
     nativeError = false;
@@ -65,14 +72,23 @@ export class LmvzSelect extends ReactiveControllerHost {
     required = false;
     name;
     size = 'default';
-    highlighted = false;
     selectedLabel = '';
     selectedId;
     activeId;
     isOpen = false;
     optionGroups = [];
     get hasValue() {
-        return Boolean(this.value);
+        return this.multiple ? Boolean(this.values && this.values.length > 0) : Boolean(this.value);
+    }
+    get triggerAriaLabel() {
+        if (this.multiple) {
+            const count = this.values?.length ?? 0;
+            return count > 0 ? `${this.label}, ${count} selected` : this.label;
+        }
+        return this.hasValue ? `${this.label}, ${this.selectedLabel}` : this.label;
+    }
+    get chipSize() {
+        return this.size === 'small' ? 'small' : 'default';
     }
     componentWillLoad() {
         this.updateValidity();
@@ -119,17 +135,28 @@ export class LmvzSelect extends ReactiveControllerHost {
     formAssociatedCallback(form) {
         if (!form)
             return;
-        this.internals.setFormValue?.(this.value ?? '');
+        this.syncFormValue();
     }
     formResetCallback() {
         this.internals.setValidity?.({});
-        this.value = this.initialValue;
+        if (this.multiple) {
+            this.values = this.initialValues ? [...this.initialValues] : [];
+        }
+        else {
+            this.value = this.initialValue;
+        }
         this.updateValidity();
     }
     formStateRestoreCallback(state) {
+        if (this.multiple) {
+            this.values = state instanceof FormData && this.name ? state.getAll(this.name).map(String) : [];
+            return;
+        }
         this.value = state;
     }
     handleValueChange(newValue) {
+        if (this.multiple)
+            return;
         this.applySelectionFromValue();
         if (this.selectedId && !this.isOpen) {
             this.listboxController.setActiveId(this.selectedId);
@@ -137,6 +164,12 @@ export class LmvzSelect extends ReactiveControllerHost {
         this.internals.setFormValue?.(newValue ?? '');
         this.updateValidity();
     }
+    handleValuesChange() {
+        if (!this.multiple)
+            return;
+        this.syncFormValue();
+        this.updateValidity();
+    }
     handleRequiredChange() {
         this.updateValidity();
     }
@@ -154,15 +187,31 @@ export class LmvzSelect extends ReactiveControllerHost {
         this.flatOptions = flat;
         this.optionsById = new Map(flat.map((option) => [option.id, option]));
         this.optionGroups = groups;
-        if (!this.value) {
-            const preselected = flat.find((option) => option.selected && !option.disabled);
-            if (preselected) {
-                this.value = preselected.value;
+        if (this.multiple) {
+            if (!this.values) {
+                const preselected = flat.filter((option) => option.selected && !option.disabled).map((option) => option.value);
+                if (preselected.length > 0) {
+                    this.values = preselected;
+                }
             }
         }
-        this.applySelectionFromValue();
+        else {
+            if (!this.value) {
+                const preselected = flat.find((option) => option.selected && !option.disabled);
+                if (preselected) {
+                    this.value = preselected.value;
+                }
+            }
+            this.applySelectionFromValue();
+        }
         this.listboxController.setOptions(flat.map(({ id, label, disabled }) => ({ id, label, disabled })));
-        if (!this.initialValueCaptured) {
+        if (this.multiple) {
+            if (!this.initialValuesCaptured) {
+                this.initialValues = this.values ? [...this.values] : [];
+                this.initialValuesCaptured = true;
+            }
+        }
+        else if (!this.initialValueCaptured) {
             this.initialValue = this.value;
             this.initialValueCaptured = true;
         }
@@ -173,8 +222,28 @@ export class LmvzSelect extends ReactiveControllerHost {
         this.selectedLabel = match?.label ?? '';
         this.listboxController.setSelectedId(match?.id);
     }
+    isOptionSelected(option) {
+        if (this.multiple) {
+            return (this.values ?? []).includes(option.value);
+        }
+        return option.id === this.selectedId;
+    }
+    syncFormValue() {
+        if (this.multiple) {
+            const formData = new FormData();
+            if (this.name) {
+                for (const value of this.values ?? []) {
+                    formData.append(this.name, value);
+                }
+            }
+            this.internals.setFormValue?.(formData);
+            return;
+        }
+        this.internals.setFormValue?.(this.value ?? '');
+    }
     updateValidity() {
-        if (this.required && !this.value) {
+        const missing = this.multiple ? !(this.values && this.values.length > 0) : !this.value;
+        if (this.required && missing) {
             this.internals.setValidity?.({ valueMissing: true }, 'Please select a value.', this.triggerEl);
             return;
         }
@@ -188,6 +257,13 @@ export class LmvzSelect extends ReactiveControllerHost {
         const option = this.optionsById.get(id);
         if (!option)
             return;
+        if (this.multiple) {
+            const current = this.values ?? [];
+            const updated = current.includes(option.value) ? current.filter((value) => value !== option.value) : [...current, option.value];
+            this.values = updated;
+            this.lmvzChange.emit(updated);
+            return;
+        }
         const isNewValue = option.value !== this.value;
         this.value = option.value;
         if (isNewValue) {
@@ -250,12 +326,26 @@ export class LmvzSelect extends ReactiveControllerHost {
         return this.optionGroups.map((group, groupIndex) => group.label ? (h("div", { role: "group", "aria-label": group.label, key: `lmvz-select-group-${groupIndex}` }, group.options.map((option) => this.renderOption(option)))) : (group.options.map((option) => this.renderOption(option))));
     }
     renderOption(option) {
-        return (h("div", { id: option.id, key: option.id, role: "option", class: "lmvz-select-option", "aria-selected": option.id === this.selectedId ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, "data-active": option.id === this.activeId ? 'true' : undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleOptionClick(option) }, option.label));
+        const selected = this.isOptionSelected(option);
+        return (h("div", { id: option.id, key: option.id, role: "option", class: "lmvz-select-option", "aria-selected": selected ? 'true' : 'false', "aria-disabled": option.disabled ? 'true' : undefined, "data-active": option.id === this.activeId ? 'true' : undefined, onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleOptionClick(option) }, this.multiple && (h("span", { class: "lmvz-select-option-checkbox", "aria-hidden": "true" }, selected && h("span", { class: "lmvz-select-option-checkbox-indicator", innerHTML: CHECKMARK_SVG }))), option.label));
+    }
+    renderChips() {
+        const values = this.values ?? [];
+        const occurrenceCounts = new Map();
+        return (h(Fragment, null, values.map((value) => {
+            const occurrence = occurrenceCounts.get(value) ?? 0;
+            occurrenceCounts.set(value, occurrence + 1);
+            const chipKey = occurrence === 0 ? value : `${value}-dup-${occurrence}`;
+            const option = this.flatOptions.find((candidate) => candidate.value === value);
+            const chipLabel = option?.label ?? value;
+            return (h("lmvz-chip", { key: chipKey, size: this.chipSize }, chipLabel));
+        })));
     }
     render() {
         const hasValue = this.hasValue;
         const shouldShowLabel = hasValue;
-        return (h(Host, { key: '0bcc303a802db20a6be6558b8add53d0fa398493', "data-highlighted": String(this.highlighted) }, h("div", { key: 'e248f8277b4786b34dfd064cb9c7b70302cf018a', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '1c97c830d5782cadad98fb895d70c438031d3457', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && h("span", { key: '16157962846bffc111f5c672852f7b23e9ed2b73', "aria-hidden": "true" }, " *")), h("div", { key: 'bc5e3e6b335723cfd9872ff955a1e8d664d4eeb8', id: this.triggerId, ref: (el) => (this.triggerEl = el), class: "select-trigger", role: "combobox", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-controls": this.popoverId, "aria-activedescendant": this.isOpen ? this.activeId : undefined, "aria-label": hasValue ? `${this.label}, ${this.selectedLabel}` : this.label, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-errormessage": this.showErrorMessage ? this.errorId : undefined, "aria-describedby": this.describedBy, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onBlur: this.handleTriggerBlur }, h("span", { key: '620c6108f679c8e5563c0e21d7b89d71434c01a2' }, hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: 'a2183941c7843bae3e9989f8e8b26be28fbbf6d7', "aria-hidden": "true" }, " *")), h("span", { key: 'b57e14bda44dc0de5a35623a5cb203b7f570c802', "aria-hidden": "true" }, h("svg", { key: '71ac319e398f07f7e65fe1f73f6d2a7c08b631a8', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '80b4a978471251ee8d2cce2d74a48fad750db125', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("lmvz-popover", { key: '15528c9a3f1404c385f4eb865cf78ef5891dcb32', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), h("div", { key: 'f1b833973497e6dfd2013522e067382c73baa7a1', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, h("slot", { key: '670bf62c50cbdd965342279b99e303614771ffa1', onSlotchange: this.handleSlotChange }))), this.helperText && (h("div", { key: '849e35da09bff25896b08f275c265baa0ee12960', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (h("div", { key: 'd01c2dca8767aa815d08d895f308c42150cc3263', id: this.errorId, role: "alert" }, this.errorMessage))));
+        const showChips = this.multiple && hasValue;
+        return (h(Host, { key: '77cb72cdce635eae0f9a29cb9121dd7d16955219' }, h("div", { key: 'cc6c04090457df17c6a9e74354fc21875d378642', class: hasValue ? 'select-wrapper has-value' : 'select-wrapper' }, h("label", { key: '8dc52469a7b3333578494b2f7bdb4e870044ac6c', htmlFor: this.triggerId, class: shouldShowLabel ? 'floating-label' : 'assistive-label', onMouseDown: (event) => event.preventDefault(), onClick: this.handleLabelClick }, this.label, this.required && shouldShowLabel && h("span", { key: 'c198fb4944e46c5219a42e16ae24dc3c414b1b00', "aria-hidden": "true" }, " *")), h("div", { key: '034cc67405aac73a6557036dea90e4644c1578ed', id: this.triggerId, ref: (el) => (this.triggerEl = el), class: "select-trigger", role: "combobox", tabIndex: this.disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": String(this.isOpen), "aria-controls": this.popoverId, "aria-activedescendant": this.isOpen ? this.activeId : undefined, "aria-label": this.triggerAriaLabel, "aria-disabled": this.disabled ? 'true' : undefined, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : 'false', "aria-errormessage": this.showErrorMessage ? this.errorId : undefined, "aria-describedby": this.describedBy, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeydown, onBlur: this.handleTriggerBlur }, h("span", { key: 'c61c136bfaab211572a988d3b16c2746f80b1ac6' }, showChips ? this.renderChips() : hasValue ? this.selectedLabel : this.label, this.required && !hasValue && h("span", { key: '24201baae63a4f6fdaef2441d304cd8f69430fb5', "aria-hidden": "true" }, " *")), h("span", { key: '547c61dfdc83f89cf7cd0582c785b9552190e533', "aria-hidden": "true" }, h("svg", { key: 'f6a0cb7c77682aec03cd146e84712c17df5ff910', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '35a8a50e27f18e54003974ae5b5ed578602664d3', d: "M20.3334 8.66663L12.0001 17L3.66675 8.66663", stroke: "currentColor", "stroke-width": "1.75", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h("lmvz-popover", { key: '0d5b94659c23763d59638046a397963d79a5e588', id: this.popoverId, anchor: this.triggerId, open: this.isOpen, containerRole: "listbox", autoFocus: false, label: this.label, "aria-multiselectable": this.multiple ? 'true' : undefined, onLmvzClose: this.handlePopoverClose, size: "sm" }, this.renderOptionGroups()), h("div", { key: 'c4a313fe4b6c53678a4f3dafced210f00e3c93d5', class: "lmvz-select-native-options", hidden: true, "aria-hidden": "true", ref: (el) => (this.optionsSourceEl = el) }, h("slot", { key: '1fb311e6938812e68ae5155184af2e2ba7c19861', onSlotchange: this.handleSlotChange }))), this.helperText && (h("div", { key: 'accade9aae4cb2e23fa1d8f62dd9b6efdf3ddfb5', id: this.helperId, role: "status" }, this.helperText)), this.showErrorMessage && (h("div", { key: 'faa5eba225adda67b44b8a63ae98a678fddf49ad', id: this.errorId, role: "alert" }, this.errorMessage))));
     }
     static get is() { return "lmvz-select"; }
     static get encapsulation() { return "scoped"; }
@@ -284,13 +374,53 @@ export class LmvzSelect extends ReactiveControllerHost {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Currently selected value."
+                    "text": "Currently selected value. Ignored (not read or written) when `multiple` is `true` \u2014 use\n`values` instead."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "value"
             },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "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."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "values": {
+                "type": "unknown",
+                "mutable": true,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "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."
+                },
+                "getter": false,
+                "setter": false
+            },
             "label": {
                 "type": "string",
                 "mutable": false,
@@ -461,29 +591,6 @@ export class LmvzSelect extends ReactiveControllerHost {
                 "reflect": true,
                 "attribute": "size",
                 "defaultValue": "'default'"
-            },
-            "highlighted": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "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."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "highlighted",
-                "defaultValue": "false"
             }
         };
     }
@@ -506,11 +613,11 @@ export class LmvzSelect extends ReactiveControllerHost {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the user selects a new option. Detail contains the new value."
+                    "text": "Emitted when the user changes the selection. Detail contains the new value:\na `string` in single-select mode (`multiple` false/unset \u2014 same shape as before), or the\nfull updated `string[]` of selected values in multiselect mode (`multiple` true)."
                 },
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | string[]",
+                    "resolved": "string | string[]",
                     "references": {}
                 }
             }];
@@ -609,6 +716,9 @@ export class LmvzSelect extends ReactiveControllerHost {
         return [{
                 "propName": "value",
                 "methodName": "handleValueChange"
+            }, {
+                "propName": "values",
+                "methodName": "handleValuesChange"
             }, {
                 "propName": "required",
                 "methodName": "handleRequiredChange"

package/collection/components/lmvz-snackbar/public.js

@@ -1 +1,4 @@
+import { SnackbarController } from "./snackbar-controller";
 export { SnackbarController } from './snackbar-controller';
+window.LmvzApi ??= {};
+window.LmvzApi.SnackbarController = SnackbarController;

package/collection/components/lmvz-tabs/lmvz-tabs.js

@@ -7,10 +7,12 @@ export class LmvzTabs extends ReactiveControllerHost {
     instanceId = ++tabsIdCounter;
     tabSlotEl;
     panelSlotEl;
+    tablistEl;
     focusController = new DirectionalFocusController(this, {
         orientation: 'horizontal',
         manageTabIndex: true,
         enableHomeAndEnd: true,
+        listenerTarget: this.tablistEl,
     });
     value;
     orientation = 'horizontal';
@@ -29,6 +31,9 @@ export class LmvzTabs extends ReactiveControllerHost {
         this.panelSlotEl?.addEventListener('slotchange', this.handlePanelSlotChange);
         this.el.addEventListener('lmvzTabReady', this.handleTabReady);
         this.handleTabSlotChange();
+        if (this.tablistEl) {
+            this.focusController.updateListenerTarget(this.tablistEl);
+        }
         super.componentDidLoad();
     }
     disconnectedCallback() {
@@ -113,6 +118,7 @@ export class LmvzTabs extends ReactiveControllerHost {
             orientation: this.orientation,
             manageTabIndex: true,
             enableHomeAndEnd: true,
+            listenerTarget: this.tablistEl,
         });
         this.addController(this.focusController);
         if (this.el.isConnected) {
@@ -235,7 +241,7 @@ export class LmvzTabs extends ReactiveControllerHost {
         this.selectTab(value);
     };
     render() {
-        return (h(Host, { key: '33205038c047420618800be3ef755e1d13a0127c', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: 'e803f772c5b187326fc80cfa2d3b9d74f6ee1df8', role: "tablist", "aria-orientation": this.orientation, class: "tablist" }, h("slot", { key: '6871a7b6b26c6251ceb544c03b245450aa53373d', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '17721962da2ecf107a5b878dea996812c61be998', part: "panels-container", class: "panels-container" }, h("slot", { key: '485de66efc7812ecb2368a6b01b0d8ab63971497', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
+        return (h(Host, { key: 'be4fe04b1374a2793d3b1e9a658a449474efdd03', onClick: this.handleTabClick, onKeydown: this.handleKeydown }, h("div", { key: 'd91015eddf16dfad5d49e942eb86e9f568978f34', role: "tablist", "aria-orientation": this.orientation, class: "tablist", ref: (el) => (this.tablistEl = el) }, h("slot", { key: 'be0990a7c668bc96a67c01561e3142ec028dabd0', ref: (el) => (this.tabSlotEl = el) })), h("div", { key: '338323738dfdbb436d86cdb4f6041a67c1af433d', part: "panels-container", class: "panels-container" }, h("slot", { key: 'd225be099c8cb902776ce0a7dbf7dcb2aef2d03b', name: "panels", ref: (el) => (this.panelSlotEl = el) }))));
     }
     static get is() { return "lmvz-tabs"; }
     static get encapsulation() { return "shadow"; }