@lmvz-ds/components 0.36.0 → 0.36.1

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

@@ -22,7 +22,14 @@ export class LmvzRadio extends ReactiveControllerHost {
     name;
     disabled = false;
     required = false;
-    error = false;
+    nativeError = false;
+    errorFromProp = false;
+    get error() {
+        return this.errorFromProp || this.nativeError;
+    }
+    set error(value) {
+        this.errorFromProp = value;
+    }
     helperText;
     form;
     autofocus = false;
@@ -30,6 +37,7 @@ export class LmvzRadio extends ReactiveControllerHost {
     _handlingFormReset = false;
     handleCheckedChange(newVal, oldVal) {
         this.internals.setFormValue?.(newVal ? this.value : null);
+        this.updateValidity();
         if (!newVal && oldVal && !this._handlingNativeChange && !this._handlingFormReset) {
             this.lmvzChange.emit(false);
         }
@@ -37,6 +45,9 @@ export class LmvzRadio extends ReactiveControllerHost {
             this.lmvzChange.emit(true);
         }
     }
+    handleRequiredChange() {
+        this.updateValidity();
+    }
     handleValueChange(newVal) {
         if (this.checked) {
             this.internals.setFormValue?.(newVal);
@@ -58,6 +69,9 @@ export class LmvzRadio extends ReactiveControllerHost {
     async reportValidity() {
         return this.internals?.reportValidity() ?? true;
     }
+    async getValidationMessage() {
+        return this.internals?.validationMessage ?? '';
+    }
     constructor() {
         super();
         this.addController(new AriaValidationController(this, {
@@ -69,8 +83,13 @@ export class LmvzRadio extends ReactiveControllerHost {
     componentWillLoad() {
         this.initialChecked = this.checked;
         this.internals.setFormValue?.(this.checked ? this.value : null);
+        this.updateValidity();
         super.componentWillLoad();
     }
+    componentDidLoad() {
+        this.updateValidity();
+        super.componentDidLoad();
+    }
     formAssociatedCallback() {
         this.internals.setFormValue?.(this.checked ? this.value : null);
     }
@@ -82,6 +101,8 @@ export class LmvzRadio extends ReactiveControllerHost {
         finally {
             this._handlingFormReset = false;
         }
+        this.updateValidity();
+        this.radioGroupController.refreshValidity();
     }
     formStateRestoreCallback(state) {
         if (typeof state !== 'string')
@@ -94,6 +115,20 @@ export class LmvzRadio extends ReactiveControllerHost {
             this._handlingFormReset = false;
         }
     }
+    isAnyInGroupChecked() {
+        return this.radioGroupController.isAnyChecked();
+    }
+    updateValidity() {
+        if (this.required && !this.isAnyInGroupChecked()) {
+            this.internals.setValidity?.({ valueMissing: true }, 'Please select an option.', this.nativeInput);
+            return;
+        }
+        this.internals.setValidity?.({});
+        this.nativeError = false;
+    }
+    handleInvalid() {
+        this.nativeError = true;
+    }
     handleChange = (event) => {
         this._handlingNativeChange = true;
         try {
@@ -136,8 +171,11 @@ export class LmvzRadio extends ReactiveControllerHost {
             return;
         this.radioGroupController.setFocused(target);
     }
+    retargetInnerClicks() {
+        this.nativeInput?.click();
+    }
     render() {
-        return (h(Host, { key: 'cb2db48956ca781f226fbbddcf1d8ea819f9192a' }, h("input", { key: 'ec208dbaa714ae015415370b0d38ef916955b023', type: "radio", id: this.radioId, name: this.name ?? undefined, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, autoFocus: this.autofocus, "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'ef8221077d410d59248ce30678989f6bf7fbbebb', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '7faa45b58d39f05f64a7782329046fe07b0c2a98', class: "dot" })), h("span", { key: 'e508b4bf061ab0e038df7c169a80285bb7930dc3', class: "content" }, h("label", { key: '8117be47e7b0ae9cc17bab21bb7cc5d9300d2146', htmlFor: this.radioId }, this.label), h("span", { key: '44ab845ee18415b54fb5d23e533f85644f4e5e50', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+        return (h(Host, { key: 'f1fdc1167c4e59c2524e1e545c3382ca32853788' }, h("input", { key: 'c1b711444475ed401766cc5827eeaec0c46b62cf', type: "radio", id: this.radioId, value: this.value, checked: this.checked, disabled: this.disabled, autoFocus: this.autofocus, "aria-required": this.required ? 'true' : 'false', "aria-invalid": this.error ? 'true' : undefined, "aria-describedby": this.helperId, ref: (el) => (this.nativeInput = el), onChange: this.handleChange }), h("span", { key: 'b25e623269df05bdf8159e72da4df2e0bfb5d7bc', class: "circle", "aria-hidden": "true" }, this.checked && h("span", { key: '93d12890c7ba0abe203c63953ea1115aee37d7a0', class: "dot" })), h("span", { key: '44dcfdc4e7ee3820624b0d02a438139f45bb8733', class: "content" }, h("label", { key: 'd0547cd5e79642b298da155c9937715224b52cae', htmlFor: this.radioId }, this.label), h("span", { key: 'a9df5dd8a775a2f7422d5bac296869f88553e33f', onClick: this.retargetInnerClicks.bind(this), "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
     }
     static get is() { return "lmvz-radio"; }
     static get encapsulation() { return "scoped"; }
@@ -232,13 +270,13 @@ export class LmvzRadio extends ReactiveControllerHost {
                 "docs": {
                     "tags": [{
                             "name": "remarks",
-                            "text": "A value of `\"\"` (empty string) is forwarded to the native `<input>`, but\n`RadioGroupController` treats it as unnamed \u2014 no group coordination occurs between\nradios with `name=\"\"`."
+                            "text": "A value of `\"\"` (empty string) is treated as unnamed by `RadioGroupController` \u2014\nno group coordination occurs between radios with `name=\"\"`."
                         }],
-                    "text": "Name attribute for form submission via ElementInternals.\n\nWhen multiple `lmvz-radio` elements share the same `name` and form scope,\nthe `name` is forwarded directly to the native `<input type=\"radio\">`,\nenabling browser-native mutual exclusion: selecting one radio automatically\ndeselects all others with the same name in that form. If a radio is outside\nany form, its scope defaults to the document level \u2014 same-name radios\noutside forms form a document-scoped group. Radios with the same `name` in\ndifferent forms are independent groups.\n\nThe `RadioGroupController` automatically manages roving tabindex (only the\nchecked radio has `tabindex=\"0\"`) and keyboard navigation (Arrow keys, Home, End)\nwithin the form-scoped group."
+                    "text": "Name attribute for form submission via ElementInternals.\n\nThe `name` is NOT forwarded to the native `<input type=\"radio\">` \u2014 this component\nrenders in `scoped` (light DOM) mode, so a native `name` attribute would make the\ninner `<input>` an independent, genuinely form-associated element of the outer\n`<form>`, submitting a duplicate value alongside the host's own `ElementInternals`\nparticipation. Instead, `name` is used purely as a JS-level grouping key: the\n`RadioGroupController` tracks all `lmvz-radio` hosts sharing the same `name` and form\nscope in an internal registry and enforces mutual exclusion itself (via\n`RadioGroup.select()`, which sets `checked = false` on every other host in the group).\nIf a radio is outside any form, its scope defaults to the document level \u2014 same-name\nradios outside forms form a document-scoped group. Radios with the same `name` in\ndifferent forms are independent groups.\n\nThe `RadioGroupController` also manages roving tabindex (only the checked radio has\n`tabindex=\"0\"`) and keyboard navigation (Arrow keys, Home, End) within the group."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "name"
             },
             "disabled": {
@@ -304,11 +342,10 @@ export class LmvzRadio extends ReactiveControllerHost {
                         }],
                     "text": "Whether the radio is in an error state."
                 },
-                "getter": false,
-                "setter": false,
+                "getter": true,
+                "setter": true,
                 "reflect": true,
-                "attribute": "error",
-                "defaultValue": "false"
+                "attribute": "error"
             },
             "helperText": {
                 "type": "string",
@@ -373,6 +410,11 @@ export class LmvzRadio extends ReactiveControllerHost {
             }
         };
     }
+    static get states() {
+        return {
+            "nativeError": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "lmvzChange",
@@ -458,6 +500,23 @@ export class LmvzRadio extends ReactiveControllerHost {
                     "text": "Reports validation errors to the user.",
                     "tags": []
                 }
+            },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the current validation message, if any.",
+                    "tags": []
+                }
             }
         };
     }
@@ -466,6 +525,9 @@ export class LmvzRadio extends ReactiveControllerHost {
         return [{
                 "propName": "checked",
                 "methodName": "handleCheckedChange"
+            }, {
+                "propName": "required",
+                "methodName": "handleRequiredChange"
             }, {
                 "propName": "value",
                 "methodName": "handleValueChange"
@@ -476,6 +538,12 @@ export class LmvzRadio extends ReactiveControllerHost {
     }
     static get listeners() {
         return [{
+                "name": "invalid",
+                "method": "handleInvalid",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "keydown",
                 "method": "handleKeydown",
                 "target": undefined,

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

@@ -43,12 +43,9 @@
   /* Extra top space to accommodate the floating label */
 
   --lmvz-internal-select-floating-label-top-offset: 0.375rem;
-
-  padding-top: var(--lmvz-internal-select-floating-label-top-offset);
-
   --lmvz-select-radius: var(--lmvz-component-input-radius-default, 999px);
   --lmvz-select-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);
-  --lmvz-select-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);
+  --lmvz-select-border-color: var(--lmvz-semantic-color-border-alternate, #c7c7c7);
   --lmvz-select-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);
   --lmvz-select-border-width: var(--lmvz-semantic-border-width-default, 1px);
   --lmvz-select-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);
@@ -63,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);
+
+  padding-top: var(--lmvz-internal-select-floating-label-top-offset);
 }
 .select-wrapper {
   position: relative;
@@ -101,19 +100,20 @@ label.floating-label {
   font-weight: 500;
 }
 label > span[aria-hidden='true'],
-div[aria-hidden='true'] > span:first-child > span[aria-hidden='true'] {
+.select-trigger > span:first-child > span[aria-hidden='true'] {
   color: var(--lmvz-select-error-color);
   margin-left: 2px;
   display: inline-block;
   line-height: 0;
   vertical-align: middle;
 }
-/* Visual pill trigger */
-div[aria-hidden] {
+/* Combobox trigger — the accessible, interactive control (role="combobox") */
+.select-trigger {
   display: flex;
   align-items: center;
   gap: var(--lmvz-select-gap);
   height: 100%;
+  width: 100%;
   padding: 0 var(--lmvz-select-padding-x);
   border-radius: var(--lmvz-select-radius);
   background-color: var(--lmvz-select-bg);
@@ -124,26 +124,29 @@ div[aria-hidden] {
   z-index: 1;
   transition: border-color 0.15s ease;
 }
-:host(:not([disabled], [highlighted])) .select-wrapper:hover div[aria-hidden] {
+:host(:not([disabled], [highlighted], [error])) .select-wrapper:hover .select-trigger {
   border-color: var(--lmvz-select-border-color-hover);
 }
-:host([highlighted]) div[aria-hidden] {
+: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]) div[aria-hidden] > span:first-child {
+: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);
 }
-.select-wrapper:focus-within div[aria-hidden] {
+: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));
 }
-div[aria-hidden] > span:first-child {
+.select-trigger > span:first-child {
   flex: 1 0 0;
   font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
     Router);
@@ -151,36 +154,26 @@ div[aria-hidden] > span:first-child {
   overflow: hidden;
   text-overflow: ellipsis;
   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 div[aria-hidden] > span:first-child {
+:host(:not([highlighted])) .select-wrapper.has-value .select-trigger > span:first-child {
   color: var(--lmvz-semantic-color-int-on-secondary-active, #000000);
 }
-div[aria-hidden] > span:last-child {
+.select-trigger > span:last-child {
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-div[aria-hidden] svg {
+.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));
   flex-shrink: 0;
 }
-/* Native select absolutely covers the trigger, invisible, intercepts clicks */
-select {
-  appearance: none;
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  z-index: 2;
-  border: none;
-  background: transparent;
-  margin: 0;
-  padding: 0;
+/* Native <option>/<optgroup> markup is only a data source for the internal listbox; never shown. */
+.lmvz-select-native-options {
+  display: none;
 }
 :host([disabled]) .select-wrapper {
   opacity: var(--lmvz-select-disabled-opacity);
@@ -188,22 +181,29 @@ select {
   cursor: not-allowed;
 }
 [role='status'] {
-  margin-top: 4px;
+  padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
   padding-left: var(--lmvz-select-padding-x);
   font-size: var(--lmvz-select-label-font-size);
   color: var(--lmvz-select-helper-color);
   line-height: normal;
 }
+[role='alert'] {
+  padding-top: var(--lmvz-dimension-8-6, clamp(0.38rem, 0.34rem + 0.13vw, 0.5rem));
+  padding-left: var(--lmvz-select-padding-x);
+  font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));
+  color: var(--lmvz-select-error-color);
+  line-height: normal;
+}
 :host([size='small']) {
   --lmvz-select-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));
   --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));
 }
-:host([size='small']) div[aria-hidden] > span:first-child {
+: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']) div[aria-hidden] svg {
+: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));
 }
@@ -213,10 +213,72 @@ select {
   --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));
 }
-:host([size='large']) div[aria-hidden] > span:first-child {
+: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']) div[aria-hidden] svg {
+: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;
+  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);
+  cursor: pointer;
+  font: var(--lmvz-typography-body-md-strong, 500 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5
+    Router);
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+.lmvz-select-option:not([aria-disabled='true']):hover {
+  --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:not([aria-disabled='true']):active {
+  --lmvz-select-option-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);
+  --lmvz-select-option-color: var(--lmvz-semantic-color-int-on-tertiary-active, #000000);
+}
+.lmvz-select-option:focus-visible {
+  outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
+  outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
+  position: relative;
+  z-index: 1;
+}
+.lmvz-select-option[data-active='true']:not([aria-disabled='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'] {
+  --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);
+}
+.lmvz-select-option[aria-disabled='true'] {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: var(--lmvz-component-input-disabled-opacity, 40%);
+}