@lmvz-ds/components 0.36.0 → 0.37.0

package/cjs/{lmvz-input_2.cjs.entry.js → lmvz-popover.cjs.entry.js}

@@ -1,226 +1,13 @@
 'use strict';
 
 var index = require('./index-BgvZ4y-3.js');
-var index$1 = require('./index-Bp6Dd2i1.js');
-var ariaValidationController = require('./aria-validation-controller-Do0uEK4t.js');
-var element_util = require('./element.util-CctmBvUY.js');
-var reactiveControllerHost = require('./reactive-controller-host-Bc6B_T45.js');
-var stencil_util = require('./stencil.util-TjS8_DoU.js');
 var ariaLoader = require('./aria-loader-DWUVcapD.js');
-var directionalFocusController = require('./directional-focus-controller-3uDoin45.js');
-var elementActivationController = require('./element-activation-controller-BWtUKzu2.js');
-
-const lmvzInputCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-input-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);      --input-radius: var(--lmvz-component-input-radius-default, 999px);   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);   --input-border-color-focus: var(--lmvz-semantic-color-border-active, #0f8acc);   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);       --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));   --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));    --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #545454);   --error-text-color: var(--lmvz-semantic-color-status-on-danger, #a31419);    --label-minimized-bg: var(--input-bg);   --label-minimized-padding-x: 4px;       --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  [size='sm'].sc-lmvz-input-h {   --input-height: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem));   --input-padding-x: var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem));   --input-gap: var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem));   --input-font-size: var(--lmvz-component-body-sm-font-size, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)); } [size='md'].sc-lmvz-input-h {   --input-height: var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem));   --input-padding-x: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));   --input-gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --input-font-size: var(--lmvz-component-body-md-font-size, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)); } [size='lg'].sc-lmvz-input-h {   --input-height: var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem));   --input-padding-x: var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem));   --input-gap: var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   --input-font-size: var(--lmvz-component-body-lg-font-size, clamp(1rem, 0.97rem + 0.13vw, 1.13rem)); } .input-container.sc-lmvz-input {   display: flex;   flex-direction: column;   position: relative;   width: 100%; } .input-wrapper.sc-lmvz-input {   background-color: var(--input-bg);   border: var(--input-border-width) solid var(--input-border-color);   border-radius: var(--input-radius);   display: flex;   align-items: center;   height: var(--input-height);   padding: 0 var(--input-padding-x);   position: relative;   transition: border-color 0.2s ease;   gap: var(--input-gap); } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   opacity: var(--input-disabled-opacity);   cursor: not-allowed;   pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input {   border-color: var(--input-border-color-focus);   outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);   outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem)); }  [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   border-color: var(--error-text-color); }  .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover {   border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input {   position: relative;   flex-grow: 1;   display: flex;   align-items: center;   height: 100%; } label.sc-lmvz-input {   position: absolute;   left: 0;   top: 50%;   transform: translateY(-50%);   color: var(--label-color);   font-size: var(--input-font-size);   font-weight: 400;   pointer-events: none;   transition: all 0.2s ease-out;   background-color: transparent;   padding: 0;   margin: 0;   line-height: 1.5;   white-space: nowrap; } label.floating.sc-lmvz-input {   top: 0.5em;   transform: translateY(-100%);   transform-origin: left top;   font-size: var(--lmvz-component-body-2xs-font-size, clamp(0.5rem, 0.47rem + 0.13vw, 0.63rem));   background-color: var(--label-minimized-bg);   padding: 0 var(--label-minimized-padding-x);   left: -2px;    color: var(--input-text-color);    font-weight: 400; } .required-indicator.sc-lmvz-input {   color: var(--error-text-color);   margin-left: 2px; } input.sc-lmvz-input {   border: none;   background: transparent;   width: 100%;   height: 100%;   color: var(--input-text-color);   font-family: inherit;   font-size: var(--input-font-size);   outline: none;   padding: 0;   margin: 0;   font-weight: 400; } input.sc-lmvz-input::placeholder {   color: var(--label-color); } div.sc-lmvz-input:empty {   display: none; } [role='status'].sc-lmvz-input {   padding-top: 8px;    padding-left: var(--input-padding-x);   font-size: 12px;   color: var(--helper-text-color);   font-weight: 400; } [role='alert'].sc-lmvz-input {   padding-top: 8px;   padding-left: var(--input-padding-x);   font-size: 12px;   color: var(--error-text-color);   font-weight: 400; } .sc-lmvz-input-s > lmvz-button {      --lmvz-button-padding: var(--lmvz-dimension-6-4, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem));   --lmvz-button-min-height-override: var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)); }`;
-
-let inputIdCounter = 0;
-const LmvzInput = class extends reactiveControllerHost.ReactiveControllerHost {
-    get el() { return index.getElement(this); }
-    get validationEl() {
-        return this.el;
-    }
-    lmvzInput;
-    internals;
-    nativeInputElement;
-    inputId = `lmvz-input-${inputIdCounter++}`;
-    initialValue = '';
-    ariaHostMirrorObserver;
-    nativeError = false;
-    errorFromProp = false;
-    get helperId() {
-        return this.helperText ? `${this.inputId}-helper` : undefined;
-    }
-    get showErrorMessage() {
-        return this.error && Boolean(this.errorMessage);
-    }
-    get errorId() {
-        return `${this.inputId}-error`;
-    }
-    get describedBy() {
-        const ids = [];
-        if (this.helperId)
-            ids.push(this.helperId);
-        if (this.showErrorMessage)
-            ids.push(this.errorId);
-        return ids.length > 0 ? ids.join(' ') : undefined;
-    }
-    value;
-    label;
-    helperText;
-    placeholder;
-    disabled = false;
-    readonly = false;
-    required = false;
-    name;
-    type = 'text';
-    errorMessage;
-    autocomplete;
-    inputmode;
-    autocorrect;
-    autocapitalize;
-    spellcheck;
-    autofocus = false;
-    minlength;
-    maxlength;
-    pattern;
-    min;
-    max;
-    step;
-    form;
-    size = 'md';
-    get error() {
-        return this.errorFromProp || this.nativeError;
-    }
-    set error(value) {
-        this.errorFromProp = value;
-    }
-    async setValue(newValue) {
-        const input = this.nativeInputElement;
-        const val = newValue ?? '';
-        if (input) {
-            input.value = val;
-        }
-        this.value = val;
-        this.internals.setFormValue?.(val);
-        this.lmvzInput.emit(val);
-    }
-    async focusInput() {
-        this.nativeInputElement?.focus();
-    }
-    async blurInput() {
-        this.nativeInputElement?.blur();
-    }
-    async select() {
-        this.nativeInputElement?.select();
-    }
-    async checkValidity() {
-        return this.nativeInputElement?.checkValidity?.() ?? false;
-    }
-    async reportValidity() {
-        return this.nativeInputElement?.reportValidity?.() ?? false;
-    }
-    async getInputElement() {
-        if (!this.nativeInputElement) {
-            await new Promise((resolve) => stencil_util.componentOnReady(this.el, resolve));
-        }
-        return Promise.resolve(this.nativeInputElement);
-    }
-    constructor(hostRef) {
-        super();
-        index.registerInstance(this, hostRef);
-        this.lmvzInput = index.createEvent(this, "lmvzInput", 7);
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-        this.addController(new ariaValidationController.AriaValidationController(this, {
-            reValidateOnPropChanges: true,
-        }));
-    }
-    componentWillLoad() {
-        this.initialValue = this.value ?? '';
-        super.componentWillLoad();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.ariaHostMirrorObserver = new MutationObserver((mutations) => {
-            for (const mutation of mutations) {
-                this.mirrorHostAriaAttribute(mutation.attributeName);
-            }
-        });
-        this.ariaHostMirrorObserver.observe(this.el, {
-            attributes: true,
-            attributeFilter: [...element_util.ariaHostMirrorAttributes],
-        });
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.ariaHostMirrorObserver?.disconnect();
-        this.ariaHostMirrorObserver = undefined;
-    }
-    componentDidLoad() {
-        super.componentDidLoad();
-        for (const attr of element_util.ariaHostMirrorAttributes) {
-            this.mirrorHostAriaAttribute(attr);
-        }
-    }
-    mirrorHostAriaAttribute(attr) {
-        if (!attr || !this.nativeInputElement)
-            return;
-        if (this.el.hasAttribute(attr)) {
-            const value = this.el.getAttribute(attr);
-            if (value !== null) {
-                this.nativeInputElement.setAttribute(attr, value);
-            }
-        }
-        else {
-            this.nativeInputElement.removeAttribute(attr);
-        }
-    }
-    formAssociatedCallback(form) {
-        if (!form)
-            return;
-        this.internals.setFormValue?.(this.value ?? '');
-    }
-    formResetCallback() {
-        this.internals.setValidity({});
-        this.setValue(this.initialValue);
-    }
-    formStateRestoreCallback(state) {
-        this.setValue(state);
-    }
-    handleValueChange(newValue) {
-        if (!this.nativeInputElement)
-            return;
-        const isInternalChange = this.nativeInputElement.value === newValue;
-        if (isInternalChange)
-            return;
-        this.setValue(newValue);
-    }
-    handleDisabledChange(disabled) {
-        if (disabled && this.nativeInputElement) {
-            this.nativeInputElement.blur();
-        }
-    }
-    handleInput = (event) => {
-        const input = event.target;
-        this.setValue(input.value);
-    };
-    handleChange = (event) => {
-        const input = event.target ?? this.nativeInputElement;
-        this.updateNativeError(input);
-    };
-    handleFocus = () => { };
-    handleBlur = (event) => {
-        const input = event.target;
-        input.checkValidity?.();
-    };
-    updateNativeError(fromEvent) {
-        const input = fromEvent ?? this.nativeInputElement;
-        if (!input)
-            return;
-        this.nativeError = !(input.checkValidity?.() ?? true);
-    }
-    render() {
-        const hasValue = Boolean(this.value);
-        const shouldFloatLabel = hasValue || Boolean(this.placeholder);
-        return (index.h("div", { key: 'b7e432c7dbc598189d85040252455c5163fe6395', class: index$1.classNames('input-container', {
-                'interaction-filled': hasValue,
-            }) }, index.h("div", { key: 'a912a49f4372423d06c7a4856fb5101cb0afd0c5', class: "input-wrapper" }, index.h("slot", { key: '88e4ee4518de0bfeef9e30a254e0d2ec6693048c', name: "before-input" }), index.h("div", { key: 'a413a7b7e8f6510f1c09fd0052889c8fad1653f1', class: "label-input-group" }, index.h("label", { key: '9639713adff74afcf4fb1eab0e74b7447d02b986', htmlFor: this.inputId, class: index$1.classNames({ floating: shouldFloatLabel }) }, this.label, this.required && (index.h("span", { key: '28c1069908a2f1905008f1decce9077e9ef1538a', class: "required-indicator", "aria-hidden": "true" }, ' ', "*"))), index.h("input", { key: '421fd9bb50de8ba189a59578373060593e1a9aab', id: this.inputId, ref: (el) => (this.nativeInputElement = el), type: this.type, min: this.min, max: this.max, step: this.step, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, form: this.form, autocomplete: this.autocomplete, inputmode: this.inputmode, autocorrect: this.autocorrect, autocapitalize: this.autocapitalize, spellcheck: this.spellcheck, autofocus: this.autofocus, minlength: this.minlength, maxlength: this.maxlength, pattern: this.pattern, "aria-invalid": this.error ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false', "aria-describedby": this.describedBy, "aria-errormessage": this.errorId, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur })), index.h("slot", { key: '09557e1d84bb4ab2456caf391a177c8f80063ab9', name: "after-input" })), index.h("div", { key: '34162f744f8584991e4493ebcdb6a2f75a1f8990', id: this.helperId, role: "status" }, this.helperText || null), index.h("div", { key: 'a3c3bffbb439f9127278cedbfefa5e1986e68f23', id: this.errorId, role: "alert" }, (this.showErrorMessage && this.errorMessage) || null)));
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "value": [{
-                "handleValueChange": 0
-            }],
-        "disabled": [{
-                "handleDisabledChange": 0
-            }]
-    }; }
-};
-LmvzInput.style = lmvzInputCss();
+var directionalFocusController = require('./directional-focus-controller-8Xd_7MHT.js');
+var elementActivationController = require('./element-activation-controller-DzTUocEO.js');
+var async_util = require('./async.util-Dnl6c82X.js');
+var element_util = require('./element.util-BlhcwmfR.js');
+require('./reactive-controller-host-Bc6B_T45.js');
+require('./aria.constants-DPK5mQEL.js');
 
 /**
  * Custom positioning reference element.
@@ -1579,7 +1366,7 @@ const computePosition = (reference, floating, options) => {
   });
 };
 
-const lmvzPopoverCss = () => `@layer lmvz-ds.reset,lmvz-ds.theme,lmvz-ds.components,lmvz-ds.overrides; @layer lmvz-ds.components{.lmvz-wrapper-card-sm,.lmvz-wrapper-card-md,.lmvz-wrapper-card-lg{background:var(--lmvz-semantic-color-surface-primary, #ffffff);box-shadow:var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11))}.lmvz-wrapper-card-sm{padding:var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));border-radius:var(--lmvz-component-wrapper-sm-border-radius, 14px)}.lmvz-wrapper-card-md{padding:var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));border-radius:var(--lmvz-component-wrapper-md-border-radius, 18px)}.lmvz-wrapper-card-lg{padding:var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));border-radius:var(--lmvz-component-wrapper-lg-border-radius, 18px)}}:host{--lmvz-popover-z-index-internal:var(--lmvz-popover-z-index, 1);display:contents;.container{position:absolute;top:-9999999999px;left:-9999999999px;max-width:var(--lmvz-popover-max-width, none);max-height:var(--lmvz-popover-max-height, none);z-index:var(--lmvz-popover-z-index-internal);overflow:auto;box-sizing:border-box}}:host(:not([open])) .container{display:none}`;
+const lmvzPopoverCss = () => `@layer lmvz-ds.reset,lmvz-ds.theme,lmvz-ds.components,lmvz-ds.overrides; @layer lmvz-ds.components{.lmvz-wrapper-card-sm,.lmvz-wrapper-card-md,.lmvz-wrapper-card-lg{background:var(--lmvz-semantic-color-surface-primary, #ffffff);box-shadow:var(--lmvz-ds-shadow-l3-default-strong, 0 2px 32px 0 rgba(120, 120, 128, 0.11))}.lmvz-wrapper-card-sm{padding:var(--lmvz-component-wrapper-sm-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-wrapper-sm-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));border-radius:var(--lmvz-component-wrapper-sm-border-radius, 14px)}.lmvz-wrapper-card-md{padding:var(--lmvz-component-wrapper-md-padding-y, clamp(1rem, 0.88rem + 0.52vw, 1.5rem)) var(--lmvz-component-wrapper-md-padding-x, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));border-radius:var(--lmvz-component-wrapper-md-border-radius, 18px)}.lmvz-wrapper-card-lg{padding:var(--lmvz-component-wrapper-lg-padding-y, clamp(2.25rem, 2.19rem + 0.26vw, 2.5rem)) var(--lmvz-component-wrapper-lg-padding-x, clamp(1.5rem, 1.14rem + 1.55vw, 3rem));border-radius:var(--lmvz-component-wrapper-lg-border-radius, 18px)}}:host{--lmvz-popover-z-index-internal:var(--lmvz-popover-z-index, 100);display:contents;.container{position:absolute;top:-9999999999px;left:-9999999999px;max-width:var(--lmvz-popover-max-width, none);max-height:var(--lmvz-popover-max-height, none);z-index:var(--lmvz-popover-z-index-internal);overflow:auto;box-sizing:border-box}}:host(:not([open])) .container{display:none}`;
 
 const LmvzPopover = class {
     constructor(hostRef) {
@@ -1600,6 +1387,7 @@ const LmvzPopover = class {
     placement = 'bottom-start';
     size = 'sm';
     autoFocus = true;
+    containerRole = 'dialog';
     label;
     lmvzOpen;
     lmvzClose;
@@ -1620,6 +1408,7 @@ const LmvzPopover = class {
     }
     componentDidLoad() {
         autoAssignId(this.el);
+        this.syncContainerId();
     }
     handleOpenChange(isOpen) {
         if (isOpen) {
@@ -1635,7 +1424,7 @@ const LmvzPopover = class {
             this.anchor = undefined;
             return;
         }
-        await stencil_util.wait();
+        await async_util.wait();
         this.anchorEl = typeof anchor === 'string' ? document.getElementById(anchor) : anchor;
         this.setupAnchorEl();
         if (!this.open)
@@ -1646,16 +1435,23 @@ const LmvzPopover = class {
         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', 'dialog');
+            anchorEl.setAttribute('aria-haspopup', this.containerRole === 'dialog' ? 'dialog' : this.containerRole);
         }
-        anchorEl.setAttribute('aria-controls', this.el.getAttribute('id'));
+        anchorEl.setAttribute('aria-controls', this.containerEl?.id || this.el.getAttribute('id'));
         if (!anchorEl.hasAttribute('aria-expanded')) {
             anchorEl.setAttribute('aria-expanded', this.open ? 'true' : 'false');
         }
@@ -1680,13 +1476,14 @@ const LmvzPopover = class {
     async onOpen() {
         this.previouslyFocusedElement = element_util.getDeepActiveElement(document);
         this.setupCloseHandlers();
-        await stencil_util.waitFrame();
+        await async_util.waitFrame();
         await this.updatePosition();
         autoAssignId(this.el);
+        this.syncContainerId();
         this.applyAnchorAriaOpen();
         this.lmvzOpen.emit();
-        await stencil_util.waitFrame();
-        if (this.autoFocus) {
+        await async_util.waitFrame();
+        if (this.autoFocus && this.containerRole === 'dialog') {
             this.focusFirst();
         }
     }
@@ -1761,7 +1558,7 @@ const LmvzPopover = class {
         this.closureController?.abort();
     }
     render() {
-        return (index.h(index.Host, { key: 'f996d0a561b8f6d00913b0e2e84ac9711b878f84' }, index.h("div", { key: 'f7fff89cf470a96b0d3d2adce43a92069d754861', role: "dialog", part: "container", class: `container lmvz-wrapper-card-${this.size}`, "aria-label": this.label || undefined, ref: (el) => (this.containerEl = el) }, index.h("slot", { key: '2263710272a745d74f118fab6d22f0d05319fc74', ref: (el) => (this.slotEl = el) }))));
+        return (index.h(index.Host, { key: '8dadcc766deebc03ea744fd1002078b382bfd48d' }, index.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) }, index.h("slot", { key: '0fa1d214c8c48942751cbd4759ebc992eacc8f72', ref: (el) => (this.slotEl = el) }))));
     }
     static get watchers() { return {
         "open": [{
@@ -1805,5 +1602,4 @@ function validatePopoverAria(hostEl, label, anchorProp, anchorEl) {
 }
 LmvzPopover.style = lmvzPopoverCss();
 
-exports.lmvz_input = LmvzInput;
 exports.lmvz_popover = LmvzPopover;

package/cjs/lmvz-radio.cjs.entry.js

@@ -36,6 +36,7 @@ class RadioGroup {
             if (wasEmpty) {
                 document.addEventListener('focusin', this._focusinHandler, true);
             }
+            this.refreshValidity();
         }
     }
     unregister(host) {
@@ -46,10 +47,19 @@ class RadioGroup {
         if (this.hosts.length === 0) {
             document.removeEventListener('focusin', this._focusinHandler, true);
         }
+        this.refreshValidity();
     }
     get sortedEnabled() {
         return this.hosts.filter((h) => !h.disabled);
     }
+    isAnyChecked() {
+        return this.hosts.some((host) => host.checked);
+    }
+    refreshValidity() {
+        for (const host of this.hosts) {
+            host.updateValidity();
+        }
+    }
     setFocused(host) {
         this._focusedHost = host;
         this.updateTabindex();
@@ -65,6 +75,7 @@ class RadioGroup {
             host.checked = host === selectedHost;
         }
         this.updateTabindex();
+        this.refreshValidity();
     }
     updateTabindex() {
         const enabled = this.sortedEnabled;
@@ -126,6 +137,12 @@ class RadioGroupController {
     select(selectedHost) {
         this.group?.select(selectedHost);
     }
+    isAnyChecked() {
+        return this.group?.isAnyChecked() ?? false;
+    }
+    refreshValidity() {
+        this.group?.refreshValidity();
+    }
     setFocused(host) {
         this.group?.setFocused(host);
     }
@@ -168,7 +185,7 @@ class RadioGroupController {
 
 const lmvzRadioCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme {   @font-face {   font-family: Router;   src:     local('RouterBook-Regular'),     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff');   font-weight: 400; }  @font-face {   font-family: Router;   src:     local('RouterMedium-Regular'),     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('RouterBold-Regular'),     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff');   font-weight: 700; }  } .sc-lmvz-radio-h {   display: inline-block;    --radio-circle-size: var(--lmvz-global-s18, 18px);   --radio-dot-size: 0.5rem;    --radio-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --radio-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --radio-border-color-hover: var(--lmvz-semantic-color-border-hover, #a1a1a1);   --radio-border-color-checked: var(--lmvz-semantic-color-border-active, #0f8acc);   --radio-border-color-error: var(--lmvz-semantic-color-status-on-danger, #a31419);   --radio-dot-color: var(--lmvz-semantic-color-border-active, #0f8acc);    --radio-wrapper-bg-hover: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0);   --radio-wrapper-bg-active: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0);    --radio-label-color: var(--lmvz-semantic-color-on-surface-primary, #000000);   --radio-label-color-checked: var(--lmvz-semantic-color-status-on-active, #0e7ab4);   --radio-helper-color: var(--lmvz-semantic-color-on-surface-secondary, #545454);    --radio-easing: var(--lmvz-global-easing-default, ease);   --radio-duration: 0.2s;    display: flex;   align-items: center;   gap: var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   padding-block: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   padding-inline: var(--lmvz-dimension-12-8, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   border-radius: var(--lmvz-semantic-border-radius-round, 999px);   overflow: clip;   cursor: pointer;   background-color: transparent;   position: relative;   transition: background-color var(--radio-duration) var(--radio-easing); } input.sc-lmvz-radio {   position: absolute;   inset-block-start: var(--lmvz-dimension-8-2, clamp(0.13rem, 0.03rem + 0.39vw, 0.5rem));   inset-inline-start: var(--lmvz-dimension-10-4, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   opacity: 0;   width: var(--radio-circle-size);   height: var(--radio-circle-size);   margin: 0;   cursor: pointer;   z-index: 1; } .circle.sc-lmvz-radio {   width: var(--radio-circle-size);   height: var(--radio-circle-size);   border-radius: 50%;   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--radio-border-color);   background-color: var(--radio-bg);   pointer-events: none;   flex-shrink: 0;   display: flex;   align-items: center;   justify-content: center;   box-sizing: border-box;   transition: border-color var(--radio-duration) var(--radio-easing); } .dot.sc-lmvz-radio {   width: var(--radio-dot-size);   height: var(--radio-dot-size);   border-radius: 50%;   background-color: var(--radio-dot-color); } .content.sc-lmvz-radio {   display: flex;   flex-direction: column;   overflow-wrap: break-word;   min-width: 0; } label.sc-lmvz-radio {   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);   color: var(--radio-label-color);   cursor: pointer;   transition: color var(--radio-duration) var(--radio-easing); } .helper-text.sc-lmvz-radio {   display: block;   font: var(--lmvz-typography-body-sm, 400 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5 Router);   color: var(--radio-helper-color);   margin-block-start: 2px; } .helper-text.sc-lmvz-radio:empty {   display: none; }  @media (hover: hover) {   .sc-lmvz-radio-h:hover .circle.sc-lmvz-radio {     border-color: var(--radio-border-color-hover);   }    .sc-lmvz-radio-h:hover {     background-color: var(--radio-wrapper-bg-hover);   } }  .sc-lmvz-radio-h:active {   background-color: var(--radio-wrapper-bg-active); }  [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-checked); } [checked].sc-lmvz-radio-h label.sc-lmvz-radio {   color: var(--radio-label-color-checked); }  [error].sc-lmvz-radio-h .circle.sc-lmvz-radio {   border-color: var(--radio-border-color-error); } [error].sc-lmvz-radio-h .helper-text.sc-lmvz-radio {   color: var(--lmvz-semantic-color-status-on-danger, #a31419); }  [disabled].sc-lmvz-radio-h {   opacity: var(--lmvz-component-input-disabled-opacity, 40%);   pointer-events: none;   cursor: not-allowed; }  @media (forced-colors: active) {   .circle.sc-lmvz-radio {     forced-color-adjust: auto;     border-color: ButtonText;     background-color: Field;   }    [checked].sc-lmvz-radio-h .circle.sc-lmvz-radio {     border-color: Highlight;   }    .dot.sc-lmvz-radio {     background-color: ButtonText;   }    [checked].sc-lmvz-radio-h .dot.sc-lmvz-radio {     background-color: HighlightText;   } }`;
 
-const focusWithinCss = () => `.sc-lmvz-radio-h:focus-within{outline:var(--lmvz-ds-outline, 1px solid #0e7ab4);outline-offset:var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem))}@media (forced-colors: active){.sc-lmvz-radio-h:focus-within{outline-color:Highlight;box-shadow:none}}`;
+const focusWithinCss = () => `.sc-lmvz-radio-h:has(: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))}@media (forced-colors: active){.sc-lmvz-radio-h:has(:focus-visible){outline-color:Highlight;box-shadow:none}}`;
 
 let radioIdCounter = 0;
 const LmvzRadio = class extends reactiveControllerHost.ReactiveControllerHost {
@@ -190,7 +207,14 @@ const LmvzRadio = class extends reactiveControllerHost.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;
@@ -198,6 +222,7 @@ const LmvzRadio = class extends reactiveControllerHost.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);
         }
@@ -205,6 +230,9 @@ const LmvzRadio = class extends reactiveControllerHost.ReactiveControllerHost {
             this.lmvzChange.emit(true);
         }
     }
+    handleRequiredChange() {
+        this.updateValidity();
+    }
     handleValueChange(newVal) {
         if (this.checked) {
             this.internals.setFormValue?.(newVal);
@@ -226,6 +254,9 @@ const LmvzRadio = class extends reactiveControllerHost.ReactiveControllerHost {
     async reportValidity() {
         return this.internals?.reportValidity() ?? true;
     }
+    async getValidationMessage() {
+        return this.internals?.validationMessage ?? '';
+    }
     constructor(hostRef) {
         super();
         index.registerInstance(this, hostRef);
@@ -247,8 +278,13 @@ const LmvzRadio = class extends reactiveControllerHost.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);
     }
@@ -260,6 +296,8 @@ const LmvzRadio = class extends reactiveControllerHost.ReactiveControllerHost {
         finally {
             this._handlingFormReset = false;
         }
+        this.updateValidity();
+        this.radioGroupController.refreshValidity();
     }
     formStateRestoreCallback(state) {
         if (typeof state !== 'string')
@@ -272,6 +310,20 @@ const LmvzRadio = class extends reactiveControllerHost.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 {
@@ -314,14 +366,20 @@ const LmvzRadio = class extends reactiveControllerHost.ReactiveControllerHost {
             return;
         this.radioGroupController.setFocused(target);
     }
+    retargetInnerClicks() {
+        this.nativeInput?.click();
+    }
     render() {
-        return (index.h(index.Host, { key: 'cb2db48956ca781f226fbbddcf1d8ea819f9192a' }, index.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 }), index.h("span", { key: 'ef8221077d410d59248ce30678989f6bf7fbbebb', class: "circle", "aria-hidden": "true" }, this.checked && index.h("span", { key: '7faa45b58d39f05f64a7782329046fe07b0c2a98', class: "dot" })), index.h("span", { key: 'e508b4bf061ab0e038df7c169a80285bb7930dc3', class: "content" }, index.h("label", { key: '8117be47e7b0ae9cc17bab21bb7cc5d9300d2146', htmlFor: this.radioId }, this.label), index.h("span", { key: '44ab845ee18415b54fb5d23e533f85644f4e5e50', "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
+        return (index.h(index.Host, { key: 'f1fdc1167c4e59c2524e1e545c3382ca32853788' }, index.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 }), index.h("span", { key: 'b25e623269df05bdf8159e72da4df2e0bfb5d7bc', class: "circle", "aria-hidden": "true" }, this.checked && index.h("span", { key: '93d12890c7ba0abe203c63953ea1115aee37d7a0', class: "dot" })), index.h("span", { key: '44dcfdc4e7ee3820624b0d02a438139f45bb8733', class: "content" }, index.h("label", { key: 'd0547cd5e79642b298da155c9937715224b52cae', htmlFor: this.radioId }, this.label), index.h("span", { key: 'a9df5dd8a775a2f7422d5bac296869f88553e33f', onClick: this.retargetInnerClicks.bind(this), "aria-live": "polite", class: "helper-text", id: this.helperId }, this.helperText))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
         "checked": [{
                 "handleCheckedChange": 0
             }],
+        "required": [{
+                "handleRequiredChange": 0
+            }],
         "value": [{
                 "handleValueChange": 0
             }],