@lmvz-ds/components 0.36.0 → 0.36.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lmvz-ds/components",
   "private": false,
-  "version": "0.36.0",
+  "version": "0.36.1",
   "type": "module",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",

package/types/api/ds.types.d.ts

@@ -72,6 +72,7 @@ export namespace Snackbar {
 export namespace Popover {
   export type Placement = (typeof popoverPlacements)[number];
   export type Size = (typeof popoverSizes)[number];
+  export type ContainerRole = 'dialog' | 'listbox' | 'menu' | 'tree' | 'grid';
 }
 
 export namespace Datepicker {

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

@@ -17,24 +17,32 @@ export declare class LmvzCheckbox extends ReactiveControllerHost implements Aria
     name?: string;
     disabled: boolean;
     required: boolean;
-    error: boolean;
+    private nativeError;
+    private errorFromProp;
+    get error(): boolean;
+    set error(value: boolean);
     errorMessage?: string;
     helperText?: string;
     form?: string;
     autofocus: boolean;
     private checkedState;
     protected handleCheckedChange(val: boolean): void;
+    protected handleRequiredChange(): void;
     lmvzChange: EventEmitter<boolean>;
     focusInput(): Promise<void>;
     checkValidity(): Promise<boolean>;
     reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
     constructor();
     componentWillLoad(): void;
+    componentDidLoad(): void;
     componentWillRender(): void;
     formAssociatedCallback(): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string | File | FormData): void;
     private handleChange;
     private retargetInnerClicks;
+    private updateValidity;
+    protected handleInvalid(): void;
     render(): any;
 }

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

@@ -66,7 +66,9 @@ export declare class LmvzDatepicker {
     private handlePopoverOpen;
     private handlePopoverClose;
     private updateFormState;
+    protected handleInvalid(): void;
     private isInvalid;
+    private nativeError;
     private get effectivePlaceholder();
     private renderHeader;
     private renderWeekdayRow;

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

@@ -7,6 +7,7 @@ export declare class LmvzInput extends ReactiveControllerHost implements AriaVal
     get validationEl(): HTMLElement;
     lmvzInput: EventEmitter<string>;
     internals: ElementInternals;
+    private inputValidityActive;
     private nativeInputElement?;
     private inputId;
     private initialValue;
@@ -49,6 +50,7 @@ export declare class LmvzInput extends ReactiveControllerHost implements AriaVal
     select(): Promise<void>;
     checkValidity(): Promise<boolean>;
     reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
     getInputElement(): Promise<HTMLInputElement | undefined>;
     constructor();
     componentWillLoad(): void;
@@ -64,6 +66,7 @@ export declare class LmvzInput extends ReactiveControllerHost implements AriaVal
     private handleInput;
     private handleChange;
     private handleFocus;
+    private handleInvalid;
     private handleBlur;
     private updateNativeError;
     render(): any;

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

@@ -13,6 +13,7 @@ export declare class LmvzPopover {
     placement: Popover.Placement;
     size: Popover.Size;
     autoFocus: boolean;
+    containerRole: Popover.ContainerRole;
     label?: string;
     lmvzOpen: EventEmitter<void>;
     lmvzClose: EventEmitter<void>;
@@ -24,6 +25,7 @@ export declare class LmvzPopover {
     protected handleOpenChange(isOpen: boolean): void;
     protected handleAnchorChange(anchor: string | HTMLElement | undefined): Promise<void>;
     disconnectedCallback(): void;
+    private syncContainerId;
     private setupAnchorEl;
     private updatePosition;
     private onOpen;

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

@@ -7,7 +7,7 @@ export declare class LmvzRadio extends ReactiveControllerHost implements AriaVal
     get validationEl(): HTMLElement;
     internals: ElementInternals;
     private nativeInput;
-    private radioId;
+    private readonly radioId;
     private initialChecked;
     private radioGroupController;
     private get helperId();
@@ -17,13 +17,17 @@ export declare class LmvzRadio extends ReactiveControllerHost implements AriaVal
     name?: string;
     disabled: boolean;
     required: boolean;
-    error: boolean;
+    private nativeError;
+    private errorFromProp;
+    get error(): boolean;
+    set error(value: boolean);
     helperText?: string;
     form?: string;
     autofocus: boolean;
     private _handlingNativeChange;
     private _handlingFormReset;
     protected handleCheckedChange(newVal: boolean, oldVal: boolean): void;
+    protected handleRequiredChange(): void;
     protected handleValueChange(newVal: string): void;
     protected handleLabelChange(newVal: string): void;
     lmvzChange: EventEmitter<boolean>;
@@ -31,12 +35,18 @@ export declare class LmvzRadio extends ReactiveControllerHost implements AriaVal
     focusInput(): Promise<void>;
     checkValidity(): Promise<boolean>;
     reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
     constructor();
     componentWillLoad(): void;
+    componentDidLoad(): void;
     formAssociatedCallback(): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: string | File | FormData): void;
+    private isAnyInGroupChecked;
+    updateValidity(): void;
+    protected handleInvalid(): void;
     private handleChange;
     handleKeydown(event: KeyboardEvent): void;
+    private retargetInnerClicks;
     render(): any;
 }

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

@@ -5,23 +5,72 @@ import { ReactiveControllerHost } from '../../utils/stencil/reactive-controller-
 export declare class LmvzSelect extends ReactiveControllerHost implements AriaValidationHost {
     readonly el: HTMLElement;
     get validationEl(): HTMLElement;
-    private selectId;
-    private nativeSelectEl?;
+    internals: ElementInternals;
+    private readonly selectId;
+    private readonly triggerId;
+    private readonly popoverId;
+    private triggerEl?;
+    private optionsSourceEl?;
+    private optionsMutationObserver?;
+    private initialValue?;
+    private initialValueCaptured;
+    private flatOptions;
+    private optionsById;
+    private readonly listboxController;
+    private get helperId();
+    private get showErrorMessage();
+    private get errorId();
+    private get describedBy();
     constructor();
     lmvzChange: EventEmitter<string>;
     value?: string;
     label: string;
     helperText?: string;
+    private nativeError;
+    private errorFromProp;
+    get error(): boolean;
+    set error(value: boolean);
+    errorMessage?: string;
     disabled: boolean;
     required: boolean;
     name?: string;
     size: Select.Size;
     highlighted: boolean;
     private selectedLabel;
+    private selectedId?;
+    private activeId?;
+    private isOpen;
+    private optionGroups;
     private get hasValue();
+    componentWillLoad(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private observeSlottedOptionMutations;
+    focusTrigger(): Promise<void>;
+    blurTrigger(): Promise<void>;
+    checkValidity(): Promise<boolean>;
+    reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
+    formAssociatedCallback(form: HTMLFormElement | undefined): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
     protected handleValueChange(newValue: string | undefined): void;
-    private syncSelectedLabel;
-    private handleChange;
+    protected handleRequiredChange(): void;
+    protected handleDisabledChange(disabled: boolean): void;
+    private handleSlotChange;
+    private applySelectionFromValue;
+    private updateValidity;
+    protected handleInvalid(): void;
+    private handleOptionSelect;
+    private handleOptionClick;
+    private handleLabelClick;
+    private handleTriggerClick;
+    private handleTriggerKeydown;
+    private handleTriggerBlur;
+    private handlePopoverClose;
+    private openPopover;
+    private closePopover;
+    private renderOptionGroups;
+    private renderOption;
     render(): any;
 }

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

@@ -25,6 +25,7 @@ export declare class LmvzToggle extends ReactiveControllerHost implements AriaVa
     blurToggle(): Promise<void>;
     checkValidity(): Promise<boolean>;
     reportValidity(): Promise<boolean>;
+    getValidationMessage(): Promise<string>;
     getInputElement(): Promise<HTMLInputElement | undefined>;
     private handleChange;
     render(): any;

package/types/components.d.ts

@@ -173,6 +173,10 @@ export declare namespace Components {
          * Form id to associate with (for out-of-form usage).
          */
         "form"?: string;
+        /**
+         * Returns the current validation message, if any.
+         */
+        "getValidationMessage": () => Promise<string>;
         /**
          * Helper / description text displayed below the label.
          */
@@ -413,6 +417,10 @@ export declare namespace Components {
          * Returns the native HTMLInputElement.  Promise resolves when the element is ready and the input is available. If the input is not yet rendered, it waits for the component to be ready.
          */
         "getInputElement": () => Promise<HTMLInputElement | undefined>;
+        /**
+         * Returns the current validation message, if any.
+         */
+        "getValidationMessage": () => Promise<string>;
         /**
          * Helper text displayed below the input
          */
@@ -589,10 +597,15 @@ export declare namespace Components {
          */
         "anchor"?: string | HTMLElement;
         /**
-         * Whether to move focus to the first focusable element on open.
+         * Whether to move focus to the first focusable element on open. Ignored (treated as `false`) when `containerRole` is not `'dialog'`, since non-dialog roles (e.g. `'listbox'` for combobox/activedescendant integrations) must keep focus on the anchor/trigger element.
          * @default true
          */
         "autoFocus": boolean;
+        /**
+         * ARIA role applied to the popover container. Use `'dialog'` (default) for focus-moving dialog-style popovers. Use a non-dialog role such as `'listbox'` to integrate with a `role="combobox"` trigger using the activedescendant model, in which case focus is kept on the anchor/trigger element instead of being moved into the popover.
+         * @default 'dialog'
+         */
+        "containerRole": Popover.ContainerRole;
         /**
          * Closes the popover, firing lmvzCancel first. If cancelled, the popover stays open.
          */
@@ -678,6 +691,10 @@ export declare namespace Components {
          * Form id to associate with (for out-of-form usage). Reflected to the host attribute so both HTML attribute and programmatic assignment work.
          */
         "form"?: string;
+        /**
+         * Returns the current validation message, if any.
+         */
+        "getValidationMessage": () => Promise<string>;
         /**
          * Helper / description text displayed below the label.
          */
@@ -687,8 +704,8 @@ export declare namespace Components {
          */
         "label": string;
         /**
-         * Name attribute for form submission via ElementInternals.  When multiple `lmvz-radio` elements share the same `name` and form scope, the `name` is forwarded directly to the native `<input type="radio">`, enabling browser-native mutual exclusion: selecting one radio automatically deselects all others with the same name in that form. If a radio is outside any form, its scope defaults to the document level — same-name radios outside forms form a document-scoped group. Radios with the same `name` in different forms are independent groups.  The `RadioGroupController` automatically manages roving tabindex (only the checked radio has `tabindex="0"`) and keyboard navigation (Arrow keys, Home, End) within the form-scoped group.
-         * @remarks A value of `""` (empty string) is forwarded to the native `<input>`, but `RadioGroupController` treats it as unnamed — no group coordination occurs between radios with `name=""`.
+         * Name attribute for form submission via ElementInternals.  The `name` is NOT forwarded to the native `<input type="radio">` — this component renders in `scoped` (light DOM) mode, so a native `name` attribute would make the inner `<input>` an independent, genuinely form-associated element of the outer `<form>`, submitting a duplicate value alongside the host's own `ElementInternals` participation. Instead, `name` is used purely as a JS-level grouping key: the `RadioGroupController` tracks all `lmvz-radio` hosts sharing the same `name` and form scope in an internal registry and enforces mutual exclusion itself (via `RadioGroup.select()`, which sets `checked = false` on every other host in the group). If a radio is outside any form, its scope defaults to the document level — same-name radios outside forms form a document-scoped group. Radios with the same `name` in different forms are independent groups.  The `RadioGroupController` also manages roving tabindex (only the checked radio has `tabindex="0"`) and keyboard navigation (Arrow keys, Home, End) within the group.
+         * @remarks A value of `""` (empty string) is treated as unnamed by `RadioGroupController` — no group coordination occurs between radios with `name=""`.
          */
         "name"?: string;
         /**
@@ -708,7 +725,13 @@ export declare namespace Components {
     }
     /**
      * Select component with floating label and pill-shaped trigger.
-     * Wraps a native `<select>` element for full keyboard and form support.
+     * Implements the WAI-ARIA APG "combobox with listbox popup" pattern: a `role="combobox"`
+     * trigger drives an `lmvz-popover`-hosted `role="listbox"`/`role="option"` list via the
+     * activedescendant model (the trigger keeps real DOM focus; `aria-activedescendant` tracks
+     * the highlighted option).
+     * Participates in native HTML forms via `ElementInternals` (form-associated custom element):
+     * the `name` attribute (set directly on the host element) and the current `value` are submitted,
+     * and the value resets to its initial value on form reset.
      * @example ```html
      * <lmvz-select label="Country" name="country">
      *   <option value="ch">Switzerland</option>
@@ -722,17 +745,42 @@ export declare namespace Components {
      * ```
      */
     export interface LmvzSelect {
+        /**
+         * Removes focus from the combobox trigger.
+         */
+        "blurTrigger": () => Promise<void>;
+        /**
+         * Returns whether the select satisfies its validation constraints.
+         */
+        "checkValidity": () => Promise<boolean>;
         /**
          * Whether the select is disabled.
          * @default false
          */
         "disabled": boolean;
+        /**
+         * Whether the select is in an error state. When not set manually, this will automatically reflect native HTML5 validation state
+         * @default false
+         */
+        "error": boolean;
+        /**
+         * Error message displayed below the select field when error is true.
+         */
+        "errorMessage"?: string;
+        /**
+         * Sets focus on the combobox trigger.
+         */
+        "focusTrigger": () => Promise<void>;
+        /**
+         * Returns the current validation message, if any.
+         */
+        "getValidationMessage": () => Promise<string>;
         /**
          * Helper text displayed below the select field.
          */
         "helperText"?: string;
         /**
-         * Whether the select has an active filter or selection that should be visually distinguished (e.g. a filter chip is applied).  When `true`: - The host attribute `highlighted` is present (CSS: `:host([highlighted])`). - The host attribute `data-highlighted="true"` is set for assistive-technology   consumers that observe data attributes. When `false`, `data-highlighted` is   set to `"false"`.  Note: `aria-pressed` and `aria-selected` are intentionally not used here. `aria-pressed` is reserved for toggle-button roles; `aria-selected` is reserved for option/listbox roles. The `data-highlighted` attribute provides the accessible contract without conflicting with native `<select>` semantics.
+         * Whether the select has an active filter or selection that should be visually distinguished (e.g. a filter chip is applied).  When `true`: - The host attribute `highlighted` is present (CSS: `:host([highlighted])`). - The host attribute `data-highlighted="true"` is set for assistive-technology   consumers that observe data attributes. When `false`, `data-highlighted` is   set to `"false"`.  Note: `aria-pressed` is intentionally not used here; it is reserved for toggle-button roles. `aria-selected` is reserved for this component's own `role="option"` elements. The `data-highlighted` attribute provides the accessible contract for this state.
          * @default false
          */
         "highlighted": boolean;
@@ -741,9 +789,13 @@ export declare namespace Components {
          */
         "label": string;
         /**
-         * Name attribute passed to the native select for form submission.
+         * Name attribute for form submission via ElementInternals.
          */
         "name"?: string;
+        /**
+         * Reports validation errors to the user.
+         */
+        "reportValidity": () => Promise<boolean>;
         /**
          * Whether a value is required.
          * @default false
@@ -905,6 +957,10 @@ export declare namespace Components {
          * Returns the native HTMLInputElement.  Promise resolves when the element is ready and the input is available.
          */
         "getInputElement": () => Promise<HTMLInputElement | undefined>;
+        /**
+         * Returns the current validation message, if any.
+         */
+        "getValidationMessage": () => Promise<string>;
         /**
          * Label text for the toggle
          */
@@ -1552,10 +1608,15 @@ export declare namespace JSX {
          */
         "anchor"?: string | HTMLElement;
         /**
-         * Whether to move focus to the first focusable element on open.
+         * Whether to move focus to the first focusable element on open. Ignored (treated as `false`) when `containerRole` is not `'dialog'`, since non-dialog roles (e.g. `'listbox'` for combobox/activedescendant integrations) must keep focus on the anchor/trigger element.
          * @default true
          */
         "autoFocus"?: boolean;
+        /**
+         * ARIA role applied to the popover container. Use `'dialog'` (default) for focus-moving dialog-style popovers. Use a non-dialog role such as `'listbox'` to integrate with a `role="combobox"` trigger using the activedescendant model, in which case focus is kept on the anchor/trigger element instead of being moved into the popover.
+         * @default 'dialog'
+         */
+        "containerRole"?: Popover.ContainerRole;
         /**
          * Accessible label for the popover container.
          */
@@ -1642,8 +1703,8 @@ export declare namespace JSX {
          */
         "label": string;
         /**
-         * Name attribute for form submission via ElementInternals.  When multiple `lmvz-radio` elements share the same `name` and form scope, the `name` is forwarded directly to the native `<input type="radio">`, enabling browser-native mutual exclusion: selecting one radio automatically deselects all others with the same name in that form. If a radio is outside any form, its scope defaults to the document level — same-name radios outside forms form a document-scoped group. Radios with the same `name` in different forms are independent groups.  The `RadioGroupController` automatically manages roving tabindex (only the checked radio has `tabindex="0"`) and keyboard navigation (Arrow keys, Home, End) within the form-scoped group.
-         * @remarks A value of `""` (empty string) is forwarded to the native `<input>`, but `RadioGroupController` treats it as unnamed — no group coordination occurs between radios with `name=""`.
+         * Name attribute for form submission via ElementInternals.  The `name` is NOT forwarded to the native `<input type="radio">` — this component renders in `scoped` (light DOM) mode, so a native `name` attribute would make the inner `<input>` an independent, genuinely form-associated element of the outer `<form>`, submitting a duplicate value alongside the host's own `ElementInternals` participation. Instead, `name` is used purely as a JS-level grouping key: the `RadioGroupController` tracks all `lmvz-radio` hosts sharing the same `name` and form scope in an internal registry and enforces mutual exclusion itself (via `RadioGroup.select()`, which sets `checked = false` on every other host in the group). If a radio is outside any form, its scope defaults to the document level — same-name radios outside forms form a document-scoped group. Radios with the same `name` in different forms are independent groups.  The `RadioGroupController` also manages roving tabindex (only the checked radio has `tabindex="0"`) and keyboard navigation (Arrow keys, Home, End) within the group.
+         * @remarks A value of `""` (empty string) is treated as unnamed by `RadioGroupController` — no group coordination occurs between radios with `name=""`.
          */
         "name"?: string;
         /**
@@ -1667,7 +1728,13 @@ export declare namespace JSX {
     }
     /**
      * Select component with floating label and pill-shaped trigger.
-     * Wraps a native `<select>` element for full keyboard and form support.
+     * Implements the WAI-ARIA APG "combobox with listbox popup" pattern: a `role="combobox"`
+     * trigger drives an `lmvz-popover`-hosted `role="listbox"`/`role="option"` list via the
+     * activedescendant model (the trigger keeps real DOM focus; `aria-activedescendant` tracks
+     * the highlighted option).
+     * Participates in native HTML forms via `ElementInternals` (form-associated custom element):
+     * the `name` attribute (set directly on the host element) and the current `value` are submitted,
+     * and the value resets to its initial value on form reset.
      * @example ```html
      * <lmvz-select label="Country" name="country">
      *   <option value="ch">Switzerland</option>
@@ -1686,12 +1753,25 @@ export declare namespace JSX {
          * @default false
          */
         "disabled"?: boolean;
+        /**
+         * Whether the select is in an error state. When not set manually, this will automatically reflect native HTML5 validation state
+         * @default false
+         */
+        "error"?: boolean;
+        /**
+         * Error message displayed below the select field when error is true.
+         */
+        "errorMessage"?: string;
+        /**
+         * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
         /**
          * Helper text displayed below the select field.
          */
         "helperText"?: string;
         /**
-         * Whether the select has an active filter or selection that should be visually distinguished (e.g. a filter chip is applied).  When `true`: - The host attribute `highlighted` is present (CSS: `:host([highlighted])`). - The host attribute `data-highlighted="true"` is set for assistive-technology   consumers that observe data attributes. When `false`, `data-highlighted` is   set to `"false"`.  Note: `aria-pressed` and `aria-selected` are intentionally not used here. `aria-pressed` is reserved for toggle-button roles; `aria-selected` is reserved for option/listbox roles. The `data-highlighted` attribute provides the accessible contract without conflicting with native `<select>` semantics.
+         * Whether the select has an active filter or selection that should be visually distinguished (e.g. a filter chip is applied).  When `true`: - The host attribute `highlighted` is present (CSS: `:host([highlighted])`). - The host attribute `data-highlighted="true"` is set for assistive-technology   consumers that observe data attributes. When `false`, `data-highlighted` is   set to `"false"`.  Note: `aria-pressed` is intentionally not used here; it is reserved for toggle-button roles. `aria-selected` is reserved for this component's own `role="option"` elements. The `data-highlighted` attribute provides the accessible contract for this state.
          * @default false
          */
         "highlighted"?: boolean;
@@ -1700,7 +1780,7 @@ export declare namespace JSX {
          */
         "label": string;
         /**
-         * Name attribute passed to the native select for form submission.
+         * Name attribute for form submission via ElementInternals.
          */
         "name"?: string;
         /**
@@ -1990,6 +2070,7 @@ export declare namespace JSX {
         "placement": Popover.Placement;
         "size": Popover.Size;
         "autoFocus": boolean;
+        "containerRole": Popover.ContainerRole;
         "label": string;
     }
     export interface LmvzRadioAttributes {
@@ -2008,6 +2089,8 @@ export declare namespace JSX {
         "value": string;
         "label": string;
         "helperText": string;
+        "error": boolean;
+        "errorMessage": string;
         "disabled": boolean;
         "required": boolean;
         "name": string;
@@ -2167,6 +2250,7 @@ declare const messageTypes: readonly ["neutral", "warning"];
 export declare namespace Popover {
     export type Placement = (typeof popoverPlacements)[number];
     export type Size = (typeof popoverSizes)[number];
+    export type ContainerRole = 'dialog' | 'listbox' | 'menu' | 'tree' | 'grid';
 }
 
 declare const popoverPlacements: readonly ["top", "bottom", "start", "end", "top-start", "top-end", "bottom-start", "bottom-end"];

package/types/utils/aria/listbox-controller.d.ts

@@ -0,0 +1,42 @@
+import type { ReactiveController } from '../stencil/reactive-controller-host';
+export type ListboxOption = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+};
+export type ListboxControllerConfig = {
+    wrap?: boolean;
+    typeaheadTimeoutMs?: number;
+    onActiveChange?: (id: string | undefined) => void;
+    onSelect?: (id: string) => void;
+    onClose?: () => void;
+};
+export declare class ListboxController implements ReactiveController {
+    private options;
+    private _activeId;
+    private _selectedId;
+    private readonly config;
+    private typeaheadBuffer;
+    private typeaheadTimer;
+    constructor(config?: ListboxControllerConfig);
+    hostDisconnected(): void;
+    get activeId(): string | undefined;
+    get activeDescendantId(): string | undefined;
+    get selectedId(): string | undefined;
+    setOptions(options: ListboxOption[]): void;
+    setActiveId(id: string | undefined): void;
+    setSelectedId(id: string | undefined): void;
+    selectOption(id: string): void;
+    selectActive(): void;
+    handleKeydown(event: KeyboardEvent): boolean;
+    clearTypeahead(): void;
+    private moveActive;
+    private handleTypeahead;
+    private restartTypeaheadTimer;
+    private clearTypeaheadTimer;
+    private enabledOptions;
+    private firstEnabledOption;
+    private lastEnabledOption;
+    private isEnabledId;
+    private findEnabledIndex;
+}

package/types/utils/radio/radio-group-controller.d.ts

@@ -5,6 +5,7 @@ export interface RadioHost {
     checked: boolean;
     disabled: boolean;
     focusInput(): Promise<void>;
+    updateValidity(): void;
 }
 export declare class RadioGroupController implements ReactiveController {
     private readonly host;
@@ -18,6 +19,8 @@ export declare class RadioGroupController implements ReactiveController {
     hostDisconnected(): void;
     get sortedEnabled(): RadioHost[];
     select(selectedHost: RadioHost): void;
+    isAnyChecked(): boolean;
+    refreshValidity(): void;
     setFocused(host: RadioHost): void;
     clearFocused(): void;
     updateTabindex(): void;

package/components/p-CPuI0_r_.js

@@ -1 +0,0 @@
-import{p as e,c as t,h as r,t as i}from"./p-BPYBmylI.js";import{c as o}from"./p-BfTCfPZ1.js";import{A as a}from"./p-BAj4FkUt.js";import{a as n}from"./p-C-pRMuMh.js";import{R as l}from"./p-diOze8wI.js";import{c as s}from"./p-bh9cItsP.js";let p=0;const m=e(class extends l{get el(){return this}get validationEl(){return this.el}lmvzInput;internals;nativeInputElement;inputId="lmvz-input-"+p++;initialValue="";ariaHostMirrorObserver;nativeError=!1;errorFromProp=!1;get helperId(){return this.helperText?`${this.inputId}-helper`:void 0}get showErrorMessage(){return this.error&&Boolean(this.errorMessage)}get errorId(){return`${this.inputId}-error`}get describedBy(){const e=[];return this.helperId&&e.push(this.helperId),this.showErrorMessage&&e.push(this.errorId),e.length>0?e.join(" "):void 0}value;label;helperText;placeholder;disabled=!1;readonly=!1;required=!1;name;type="text";errorMessage;autocomplete;inputmode;autocorrect;autocapitalize;spellcheck;autofocus=!1;minlength;maxlength;pattern;min;max;step;form;size="md";get error(){return this.errorFromProp||this.nativeError}set error(e){this.errorFromProp=e}async setValue(e){const t=this.nativeInputElement,r=e??"";t&&(t.value=r),this.value=r,this.internals.setFormValue?.(r),this.lmvzInput.emit(r)}async focusInput(){this.nativeInputElement?.focus()}async blurInput(){this.nativeInputElement?.blur()}async select(){this.nativeInputElement?.select()}async checkValidity(){return this.nativeInputElement?.checkValidity?.()??!1}async reportValidity(){return this.nativeInputElement?.reportValidity?.()??!1}async getInputElement(){return this.nativeInputElement||await new Promise((e=>s(this.el,e))),Promise.resolve(this.nativeInputElement)}constructor(e){super(!1),!1!==e&&this.__registerHost(),this.lmvzInput=t(this,"lmvzInput",7),this.internals=this.attachInternals(),this.addController(new a(this,{reValidateOnPropChanges:!0}))}componentWillLoad(){this.initialValue=this.value??"",super.componentWillLoad()}connectedCallback(){super.connectedCallback(),this.ariaHostMirrorObserver=new MutationObserver((e=>{for(const t of e)this.mirrorHostAriaAttribute(t.attributeName)})),this.ariaHostMirrorObserver.observe(this.el,{attributes:!0,attributeFilter:[...n]})}disconnectedCallback(){super.disconnectedCallback(),this.ariaHostMirrorObserver?.disconnect(),this.ariaHostMirrorObserver=void 0}componentDidLoad(){super.componentDidLoad();for(const e of n)this.mirrorHostAriaAttribute(e)}mirrorHostAriaAttribute(e){if(e&&this.nativeInputElement)if(this.el.hasAttribute(e)){const t=this.el.getAttribute(e);null!==t&&this.nativeInputElement.setAttribute(e,t)}else this.nativeInputElement.removeAttribute(e)}formAssociatedCallback(e){e&&this.internals.setFormValue?.(this.value??"")}formResetCallback(){this.internals.setValidity({}),this.setValue(this.initialValue)}formStateRestoreCallback(e){this.setValue(e)}handleValueChange(e){this.nativeInputElement&&(this.nativeInputElement.value===e||this.setValue(e))}handleDisabledChange(e){e&&this.nativeInputElement&&this.nativeInputElement.blur()}handleInput=e=>{this.setValue(e.target.value)};handleChange=e=>{this.updateNativeError(e.target??this.nativeInputElement)};handleFocus=()=>{};handleBlur=e=>{const t=e.target;t.checkValidity?.()};updateNativeError(e){const t=e??this.nativeInputElement;t&&(this.nativeError=!(t.checkValidity?.()??1))}render(){const e=Boolean(this.value),t=e||Boolean(this.placeholder);return r("div",{key:"b7e432c7dbc598189d85040252455c5163fe6395",class:o("input-container",{"interaction-filled":e})},r("div",{key:"a912a49f4372423d06c7a4856fb5101cb0afd0c5",class:"input-wrapper"},r("slot",{key:"88e4ee4518de0bfeef9e30a254e0d2ec6693048c",name:"before-input"}),r("div",{key:"a413a7b7e8f6510f1c09fd0052889c8fad1653f1",class:"label-input-group"},r("label",{key:"9639713adff74afcf4fb1eab0e74b7447d02b986",htmlFor:this.inputId,class:o({floating:t})},this.label,this.required&&r("span",{key:"28c1069908a2f1905008f1decce9077e9ef1538a",class:"required-indicator","aria-hidden":"true"}," ","*")),r("input",{key:"421fd9bb50de8ba189a59578373060593e1a9aab",id:this.inputId,ref:e=>this.nativeInputElement=e,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})),r("slot",{key:"09557e1d84bb4ab2456caf391a177c8f80063ab9",name:"after-input"})),r("div",{key:"34162f744f8584991e4493ebcdb6a2f75a1f8990",id:this.helperId,role:"status"},this.helperText||null),r("div",{key:"a3c3bffbb439f9127278cedbfefa5e1986e68f23",id:this.errorId,role:"alert"},this.showErrorMessage&&this.errorMessage||null))}static get formAssociated(){return!0}static get watchers(){return{value:[{handleValueChange:0}],disabled:[{handleDisabledChange:0}]}}static get style(){return"@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)); }"}},[838,"lmvz-input",{value:[1025],label:[1],helperText:[1,"helper-text"],placeholder:[1],disabled:[516],readonly:[516],required:[516],name:[1],type:[1],errorMessage:[1,"error-message"],autocomplete:[1],inputmode:[1],autocorrect:[1],autocapitalize:[1],spellcheck:[4],autofocus:[4],minlength:[2],maxlength:[2],pattern:[1],min:[8],max:[8],step:[8],form:[1],size:[513],error:[6660],nativeError:[32],setValue:[64],focusInput:[64],blurInput:[64],select:[64],checkValidity:[64],reportValidity:[64],getInputElement:[64]},void 0,{value:[{handleValueChange:0}],disabled:[{handleDisabledChange:0}]}]);function c(){"undefined"!=typeof customElements&&["lmvz-input"].forEach((e=>{"lmvz-input"===e&&(customElements.get(i(e))||customElements.define(i(e),m))}))}export{m as L,c as d}

package/components/p-CWpl0WaZ.js

@@ -1 +0,0 @@
-import{p as t,H as e,c as n,h as o,d as r,t as i}from"./p-BPYBmylI.js";import{i as a}from"./p-BDonpCG8.js";import{i as s}from"./p-DqdrUt_G.js";import{a as l}from"./p-BLMXiDE0.js";import{w as c,a as u}from"./p-DZj20TV1.js";import{d as f,g as d,j as p,w as m,k as h,h as v}from"./p-BhALzK62.js";const y=Math.min,w=Math.max,g=Math.round,x=t=>({x:t,y:t}),b={left:"right",right:"left",bottom:"top",top:"bottom"};function z(t,e,n){return w(t,y(e,n))}function A(t,e){return"function"==typeof t?t(e):t}function C(t){return t.split("-")[0]}function E(t){return t.split("-")[1]}function k(t){return"x"===t?"y":"x"}function S(t){return"y"===t?"height":"width"}function D(t){const e=t[0];return"t"===e||"b"===e?"y":"x"}function F(t){return k(D(t))}function O(t){return t.includes("start")?t.replace("start","end"):t.replace("end","start")}const P=["left","right"],R=["right","left"],j=["top","bottom"],L=["bottom","top"];function B(t){const e=C(t);return b[e]+t.slice(e.length)}function M(t){const{x:e,y:n,width:o,height:r}=t;return{width:o,height:r,top:n,left:e,right:e+o,bottom:n+r,x:e,y:n}}function T(t,e,n){let{reference:o,floating:r}=t;const i=D(e),a=F(e),s=S(a),l=C(e),c="y"===i,u=o.x+o.width/2-r.width/2,f=o.y+o.height/2-r.height/2,d=o[s]/2-r[s]/2;let p;switch(l){case"top":p={x:u,y:o.y-r.height};break;case"bottom":p={x:u,y:o.y+o.height};break;case"right":p={x:o.x+o.width,y:f};break;case"left":p={x:o.x-r.width,y:f};break;default:p={x:o.x,y:o.y}}switch(E(e)){case"start":p[a]-=d*(n&&c?-1:1);break;case"end":p[a]+=d*(n&&c?-1:1)}return p}async function $(t,e){var n;void 0===e&&(e={});const{x:o,y:r,platform:i,rects:a,elements:s,strategy:l}=t,{boundary:c="clippingAncestors",rootBoundary:u="viewport",elementContext:f="floating",altBoundary:d=!1,padding:p=0}=A(e,t),m=function(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}(p),h=s[d?"floating"===f?"reference":"floating":f],v=M(await i.getClippingRect({element:null==(n=await(null==i.isElement?void 0:i.isElement(h)))||n?h:h.contextElement||await(null==i.getDocumentElement?void 0:i.getDocumentElement(s.floating)),boundary:c,rootBoundary:u,strategy:l})),y="floating"===f?{x:o,y:r,width:a.floating.width,height:a.floating.height}:a.reference,w=await(null==i.getOffsetParent?void 0:i.getOffsetParent(s.floating)),g=await(null==i.isElement?void 0:i.isElement(w))&&await(null==i.getScale?void 0:i.getScale(w))||{x:1,y:1},x=M(i.convertOffsetParentRelativeRectToViewportRelativeRect?await i.convertOffsetParentRelativeRectToViewportRelativeRect({elements:s,rect:y,offsetParent:w,strategy:l}):y);return{top:(v.top-x.top+m.top)/g.y,bottom:(x.bottom-v.bottom+m.bottom)/g.y,left:(v.left-x.left+m.left)/g.x,right:(x.right-v.right+m.right)/g.x}}const H=new Set(["left","top"]);function N(){return"undefined"!=typeof window}function G(t){return X(t)?(t.nodeName||"").toLowerCase():"#document"}function I(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function V(t){var e;return null==(e=(X(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function X(t){return!!N()&&(t instanceof Node||t instanceof I(t).Node)}function Y(t){return!!N()&&(t instanceof Element||t instanceof I(t).Element)}function _(t){return!!N()&&(t instanceof HTMLElement||t instanceof I(t).HTMLElement)}function q(t){return!(!N()||"undefined"==typeof ShadowRoot)&&(t instanceof ShadowRoot||t instanceof I(t).ShadowRoot)}function K(t){const{overflow:e,overflowX:n,overflowY:o,display:r}=rt(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&"inline"!==r&&"contents"!==r}function U(t){return/^(table|td|th)$/.test(G(t))}function Z(t){try{if(t.matches(":popover-open"))return!0}catch(t){}try{return t.matches(":modal")}catch(t){return!1}}const J=/transform|translate|scale|rotate|perspective|filter/,Q=/paint|layout|strict|content/,W=t=>!!t&&"none"!==t;let tt;function et(t){const e=Y(t)?rt(t):t;return W(e.transform)||W(e.translate)||W(e.scale)||W(e.rotate)||W(e.perspective)||!nt()&&(W(e.backdropFilter)||W(e.filter))||J.test(e.willChange||"")||Q.test(e.contain||"")}function nt(){return null==tt&&(tt="undefined"!=typeof CSS&&CSS.supports&&CSS.supports("-webkit-backdrop-filter","none")),tt}function ot(t){return/^(html|body|#document)$/.test(G(t))}function rt(t){return I(t).getComputedStyle(t)}function it(t){return Y(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function at(t){if("html"===G(t))return t;const e=t.assignedSlot||t.parentNode||q(t)&&t.host||V(t);return q(e)?e.host:e}function st(t){const e=at(t);return ot(e)?t.ownerDocument?t.ownerDocument.body:t.body:_(e)&&K(e)?e:st(e)}function lt(t,e){var n;void 0===e&&(e=[]);const o=st(t),r=o===(null==(n=t.ownerDocument)?void 0:n.body),i=I(o);return r?e.concat(i,i.visualViewport||[],K(o)?o:[],[]):e.concat(o,lt(o,[]))}function ct(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}function ut(t){const e=rt(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;const r=_(t),i=r?t.offsetWidth:n,a=r?t.offsetHeight:o,s=g(n)!==i||g(o)!==a;return s&&(n=i,o=a),{width:n,height:o,$:s}}function ft(t){return Y(t)?t:t.contextElement}function dt(t){const e=ft(t);if(!_(e))return x(1);const n=e.getBoundingClientRect(),{width:o,height:r,$:i}=ut(e);let a=(i?g(n.width):n.width)/o,s=(i?g(n.height):n.height)/r;return a&&Number.isFinite(a)||(a=1),s&&Number.isFinite(s)||(s=1),{x:a,y:s}}const pt=x(0);function mt(t){const e=I(t);return nt()&&e.visualViewport?{x:e.visualViewport.offsetLeft,y:e.visualViewport.offsetTop}:pt}function ht(t,e,n,o){void 0===e&&(e=!1),void 0===n&&(n=!1);const r=t.getBoundingClientRect(),i=ft(t);let a=x(1);e&&(o?Y(o)&&(a=dt(o)):a=dt(t));const s=function(t,e,n){return void 0===e&&(e=!1),!(!n||e&&n!==I(t))&&e}(i,n,o)?mt(i):x(0);let l=(r.left+s.x)/a.x,c=(r.top+s.y)/a.y,u=r.width/a.x,f=r.height/a.y;if(i){const t=I(i),e=o&&Y(o)?I(o):o;let n=t,r=ct(n);for(;r&&o&&e!==n;){const t=dt(r),e=r.getBoundingClientRect(),o=rt(r),i=e.left+(r.clientLeft+parseFloat(o.paddingLeft))*t.x,a=e.top+(r.clientTop+parseFloat(o.paddingTop))*t.y;l*=t.x,c*=t.y,u*=t.x,f*=t.y,l+=i,c+=a,n=I(r),r=ct(n)}}return M({width:u,height:f,x:l,y:c})}function vt(t,e){const n=it(t).scrollLeft;return e?e.left+n:ht(V(t)).left+n}function yt(t,e){const n=t.getBoundingClientRect();return{x:n.left+e.scrollLeft-vt(t,n),y:n.top+e.scrollTop}}function wt(t,e,n){let o;if("viewport"===e)o=function(t,e){const n=I(t),o=V(t),r=n.visualViewport;let i=o.clientWidth,a=o.clientHeight,s=0,l=0;if(r){i=r.width,a=r.height;const t=nt();(!t||t&&"fixed"===e)&&(s=r.offsetLeft,l=r.offsetTop)}const c=vt(o);if(c<=0){const t=o.ownerDocument,e=t.body,n=getComputedStyle(e),r="CSS1Compat"===t.compatMode&&parseFloat(n.marginLeft)+parseFloat(n.marginRight)||0,a=Math.abs(o.clientWidth-e.clientWidth-r);a<=25&&(i-=a)}else c<=25&&(i+=c);return{width:i,height:a,x:s,y:l}}(t,n);else if("document"===e)o=function(t){const e=V(t),n=it(t),o=t.ownerDocument.body,r=w(e.scrollWidth,e.clientWidth,o.scrollWidth,o.clientWidth),i=w(e.scrollHeight,e.clientHeight,o.scrollHeight,o.clientHeight);let a=-n.scrollLeft+vt(t);const s=-n.scrollTop;return"rtl"===rt(o).direction&&(a+=w(e.clientWidth,o.clientWidth)-r),{width:r,height:i,x:a,y:s}}(V(t));else if(Y(e))o=function(t,e){const n=ht(t,!0,"fixed"===e),o=n.top+t.clientTop,r=n.left+t.clientLeft,i=_(t)?dt(t):x(1);return{width:t.clientWidth*i.x,height:t.clientHeight*i.y,x:r*i.x,y:o*i.y}}(e,n);else{const n=mt(t);o={x:e.x-n.x,y:e.y-n.y,width:e.width,height:e.height}}return M(o)}function gt(t,e){const n=at(t);return!(n===e||!Y(n)||ot(n))&&("fixed"===rt(n).position||gt(n,e))}function xt(t,e,n){const o=_(e),r=V(e),i="fixed"===n,a=ht(t,!0,i,e);let s={scrollLeft:0,scrollTop:0};const l=x(0);function c(){l.x=vt(r)}if(o||!o&&!i)if(("body"!==G(e)||K(r))&&(s=it(e)),o){const t=ht(e,!0,i,e);l.x=t.x+e.clientLeft,l.y=t.y+e.clientTop}else r&&c();i&&!o&&r&&c();const u=!r||o||i?x(0):yt(r,s);return{x:a.left+s.scrollLeft-l.x-u.x,y:a.top+s.scrollTop-l.y-u.y,width:a.width,height:a.height}}function bt(t){return"static"===rt(t).position}function zt(t,e){if(!_(t)||"fixed"===rt(t).position)return null;if(e)return e(t);let n=t.offsetParent;return V(t)===n&&(n=n.ownerDocument.body),n}function At(t,e){const n=I(t);if(Z(t))return n;if(!_(t)){let e=at(t);for(;e&&!ot(e);){if(Y(e)&&!bt(e))return e;e=at(e)}return n}let o=zt(t,e);for(;o&&U(o)&&bt(o);)o=zt(o,e);return o&&ot(o)&&bt(o)&&!et(o)?n:o||function(t){let e=at(t);for(;_(e)&&!ot(e);){if(et(e))return e;if(Z(e))return null;e=at(e)}return null}(t)||n}const Ct={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:e,rect:n,offsetParent:o,strategy:r}=t;const i="fixed"===r,a=V(o),s=!!e&&Z(e.floating);if(o===a||s&&i)return n;let l={scrollLeft:0,scrollTop:0},c=x(1);const u=x(0),f=_(o);if((f||!f&&!i)&&(("body"!==G(o)||K(a))&&(l=it(o)),f)){const t=ht(o);c=dt(o),u.x=t.x+o.clientLeft,u.y=t.y+o.clientTop}const d=!a||f||i?x(0):yt(a,l);return{width:n.width*c.x,height:n.height*c.y,x:n.x*c.x-l.scrollLeft*c.x+u.x+d.x,y:n.y*c.y-l.scrollTop*c.y+u.y+d.y}},getDocumentElement:V,getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:r}=t;const i=[..."clippingAncestors"===n?Z(e)?[]:function(t,e){const n=e.get(t);if(n)return n;let o=lt(t,[]).filter((t=>Y(t)&&"body"!==G(t))),r=null;const i="fixed"===rt(t).position;let a=i?at(t):t;for(;Y(a)&&!ot(a);){const e=rt(a),n=et(a);n||"fixed"!==e.position||(r=null),(i?!n&&!r:!n&&"static"===e.position&&r&&("absolute"===r.position||"fixed"===r.position)||K(a)&&!n&&gt(t,a))?o=o.filter((t=>t!==a)):r=e,a=at(a)}return e.set(t,o),o}(e,this._c):[].concat(n),o],a=wt(e,i[0],r);let s=a.top,l=a.right,c=a.bottom,u=a.left;for(let t=1;t<i.length;t++){const n=wt(e,i[t],r);s=w(n.top,s),l=y(n.right,l),c=y(n.bottom,c),u=w(n.left,u)}return{width:l-u,height:c-s,x:u,y:s}},getOffsetParent:At,getElementRects:async function(t){const e=this.getOffsetParent||At,n=this.getDimensions,o=await n(t.floating);return{reference:xt(t.reference,await e(t.floating),t.strategy),floating:{x:0,y:0,width:o.width,height:o.height}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:e,height:n}=ut(t);return{width:e,height:n}},getScale:dt,isElement:Y,isRTL:function(t){return"rtl"===rt(t).direction}},Et=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:o,placement:r,platform:i}=e,{mainAxis:a=!0,crossAxis:s=!1,limiter:l={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...c}=A(t,e),u={x:n,y:o},f=await i.detectOverflow(e,c),d=D(C(r)),p=k(d);let m=u[p],h=u[d];a&&(m=z(m+f["y"===p?"top":"left"],m,m-f["y"===p?"bottom":"right"])),s&&(h=z(h+f["y"===d?"top":"left"],h,h-f["y"===d?"bottom":"right"]));const v=l.fn({...e,[p]:m,[d]:h});return{...v,data:{x:v.x-n,y:v.y-o,enabled:{[p]:a,[d]:s}}}}}},kt=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,o;const{placement:r,middlewareData:i,rects:a,initialPlacement:s,platform:l,elements:c}=e,{mainAxis:u=!0,crossAxis:f=!0,fallbackPlacements:d,fallbackStrategy:p="bestFit",fallbackAxisSideDirection:m="none",flipAlignment:h=!0,...v}=A(t,e);if(null!=(n=i.arrow)&&n.alignmentOffset)return{};const y=C(r),w=D(s),g=C(s)===s,x=await(null==l.isRTL?void 0:l.isRTL(c.floating)),b=d||(g||!h?[B(s)]:function(t){const e=B(t);return[O(t),e,O(e)]}(s)),z="none"!==m;!d&&z&&b.push(...function(t,e,n,o){const r=E(t);let i=function(t,e,n){switch(t){case"top":case"bottom":return n?e?R:P:e?P:R;case"left":case"right":return e?j:L;default:return[]}}(C(t),"start"===n,o);return r&&(i=i.map((t=>t+"-"+r)),e&&(i=i.concat(i.map(O)))),i}(s,h,m,x));const k=[s,...b],M=await l.detectOverflow(e,v),T=[];let $=(null==(o=i.flip)?void 0:o.overflows)||[];if(u&&T.push(M[y]),f){const t=function(t,e,n){void 0===n&&(n=!1);const o=E(t),r=F(t),i=S(r);let a="x"===r?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[i]>e.floating[i]&&(a=B(a)),[a,B(a)]}(r,a,x);T.push(M[t[0]],M[t[1]])}if($=[...$,{placement:r,overflows:T}],!T.every((t=>t<=0))){var H,N;const t=((null==(H=i.flip)?void 0:H.index)||0)+1,e=k[t];if(e&&("alignment"!==f||w===D(e)||$.every((t=>D(t.placement)!==w||t.overflows[0]>0))))return{data:{index:t,overflows:$},reset:{placement:e}};let n=null==(N=$.filter((t=>t.overflows[0]<=0)).sort(((t,e)=>t.overflows[1]-e.overflows[1]))[0])?void 0:N.placement;if(!n)switch(p){case"bestFit":{var G;const t=null==(G=$.filter((t=>{if(z){const e=D(t.placement);return e===w||"y"===e}return!0})).map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:G[0];t&&(n=t);break}case"initialPlacement":n=s}if(r!==n)return{reset:{placement:n}}}return{}}}},St=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.lmvzOpen=n(this,"lmvzOpen",7),this.lmvzClose=n(this,"lmvzClose",7),this.lmvzCancel=n(this,"lmvzCancel",7)}get el(){return this}extEventController=new AbortController;closureController;containerEl;slotEl;previouslyFocusedElement=null;anchorEl;open=!1;anchor;placement="bottom-start";size="sm";autoFocus=!0;label;lmvzOpen;lmvzClose;lmvzCancel;async show(){this.open=!0}async hide(){this.triggerClose()}async toggle(){this.open?await this.hide():await this.show()}componentDidLoad(){Ft(this.el)}handleOpenChange(t){t?this.onOpen():this.onClose()}async handleAnchorChange(t){if(!t)return console.warn("anchor property missing for popover",this.el?.id),void(this.anchor=void 0);await c(),this.anchorEl="string"==typeof t?document.getElementById(t):t,this.setupAnchorEl(),this.open&&this.updatePosition()}disconnectedCallback(){this.removeCloseHandlers(),this.extEventController.abort()}setupAnchorEl(){const{anchorEl:t}=this;t?(t.hasAttribute("aria-haspopup")||t.setAttribute("aria-haspopup","dialog"),t.setAttribute("aria-controls",this.el.getAttribute("id")),t.hasAttribute("aria-expanded")||t.setAttribute("aria-expanded",this.open?"true":"false"),f(t)&&l(t,this.toggle.bind(this),this.extEventController.signal),function(t,e,n,o){if(!a())return;const r=!!e,i=t.hasAttribute("aria-labelledby");r||i||console.warn("[lmvz-popover] Host element has no accessible label. Provide a `label` prop or an `aria-labelledby` attribute pointing to a valid element."),n&&(o?h(o)||console.warn("[lmvz-popover] Anchor element is not interactive. Ensure the anchor is a button, link, input, select, textarea, has a `tabindex` attribute, or has an ARIA role that implies interactivity (button, link, menuitem, option, combobox, listbox, checkbox, radio, switch, tab)."):console.warn("[lmvz-popover] Anchor prop is set but resolved to null. Ensure the anchor element exists in the DOM when the component loads."))}(this.el,this.label,this.anchor,t)):console.warn("no anchor element set for",this)}async updatePosition(){const{anchorEl:t}=this,e=this.containerEl;if(!t||!e)return;const n=function(t){return"start"===t?"left":"end"===t?"right":t}(this.placement),{x:o,y:r}=await((t,e,n)=>{const o=new Map,r={platform:Ct,...n},i={...r.platform,_c:o};return(async(t,e,n)=>{const{placement:o="bottom",strategy:r="absolute",middleware:i=[],platform:a}=n,s=a.detectOverflow?a:{...a,detectOverflow:$},l=await(null==a.isRTL?void 0:a.isRTL(e));let c=await a.getElementRects({reference:t,floating:e,strategy:r}),{x:u,y:f}=T(c,o,l),d=o,p=0;const m={};for(let n=0;n<i.length;n++){const h=i[n];if(!h)continue;const{name:v,fn:y}=h,{x:w,y:g,data:x,reset:b}=await y({x:u,y:f,initialPlacement:o,placement:d,strategy:r,middlewareData:m,rects:c,platform:s,elements:{reference:t,floating:e}});u=null!=w?w:u,f=null!=g?g:f,m[v]={...m[v],...x},b&&p<50&&(p++,"object"==typeof b&&(b.placement&&(d=b.placement),b.rects&&(c=!0===b.rects?await a.getElementRects({reference:t,floating:e,strategy:r}):b.rects),({x:u,y:f}=T(c,d,l))),n=-1)}return{x:u,y:f,placement:d,strategy:r,middlewareData:m}})(t,e,{...r,platform:i})})(t,e,{placement:n,middleware:[(i=4,void 0===i&&(i=0),{name:"offset",options:i,async fn(t){var e,n;const{x:o,y:r,placement:a,middlewareData:s}=t,l=await async function(t,e){const{placement:n,platform:o,elements:r}=t,i=await(null==o.isRTL?void 0:o.isRTL(r.floating)),a=C(n),s=E(n),l="y"===D(n),c=H.has(a)?-1:1,u=i&&l?-1:1,f=A(e,t);let{mainAxis:d,crossAxis:p,alignmentAxis:m}="number"==typeof f?{mainAxis:f,crossAxis:0,alignmentAxis:null}:{mainAxis:f.mainAxis||0,crossAxis:f.crossAxis||0,alignmentAxis:f.alignmentAxis};return s&&"number"==typeof m&&(p="end"===s?-1*m:m),l?{x:p*u,y:d*c}:{x:d*c,y:p*u}}(t,i);return a===(null==(e=s.offset)?void 0:e.placement)&&null!=(n=s.arrow)&&n.alignmentOffset?{}:{x:o+l.x,y:r+l.y,data:{...l,placement:a}}}}),kt(),Et({padding:8})]});var i;e.style.left=`${o}px`,e.style.top=`${r}px`}async onOpen(){this.previouslyFocusedElement=d(document),this.setupCloseHandlers(),await u(),await this.updatePosition(),Ft(this.el),this.applyAnchorAriaOpen(),this.lmvzOpen.emit(),await u(),this.autoFocus&&this.focusFirst()}onClose(){this.removeCloseHandlers(),this.applyAnchorAriaClose(),this.restoreFocus(),this.lmvzClose.emit()}applyAnchorAriaOpen(){this.anchorEl&&this.anchorEl.setAttribute("aria-expanded","true")}applyAnchorAriaClose(){this.anchorEl&&this.anchorEl.setAttribute("aria-expanded","false")}focusFirst(){const{slotEl:t}=this;if(!t)return;const e=t.assignedElements({flatten:!0});for(const t of e){if(!p(t))continue;if(s(t))return void t.initFocus();const e=m(t,v);if(e)return void e.focus()}}restoreFocus(){const t=this.previouslyFocusedElement;t?.isConnected&&t.focus(),this.previouslyFocusedElement=null}triggerClose(){this.lmvzCancel.emit().defaultPrevented||(this.open=!1)}setupCloseHandlers(){this.closureController=new AbortController;const t={signal:this.closureController.signal};document.addEventListener("mousedown",(t=>{if(!this.open)return;const e=(t.target?.shadowRoot??document).elementFromPoint(t.x,t.y)??t.target;this.el===t.target||this.el.contains(e)||this.el.contains(t.target)||this.triggerClose()}),t),document.addEventListener("keydown",(t=>{this.open&&"Escape"===t.key&&this.triggerClose()}),t)}removeCloseHandlers(){this.closureController?.abort()}render(){return o(r,{key:"f996d0a561b8f6d00913b0e2e84ac9711b878f84"},o("div",{key:"f7fff89cf470a96b0d3d2adce43a92069d754861",role:"dialog",part:"container",class:`container lmvz-wrapper-card-${this.size}`,"aria-label":this.label||void 0,ref:t=>this.containerEl=t},o("slot",{key:"2263710272a745d74f118fab6d22f0d05319fc74",ref:t=>this.slotEl=t})))}static get watchers(){return{open:[{handleOpenChange:0}],anchor:[{handleAnchorChange:1}]}}static get style(){return"@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}"}},[769,"lmvz-popover",{open:[1540],anchor:[1],placement:[1],size:[1],autoFocus:[4,"auto-focus"],label:[1],anchorEl:[32],show:[64],hide:[64],toggle:[64]},void 0,{open:[{handleOpenChange:0}],anchor:[{handleAnchorChange:1}]}]);let Dt=0;function Ft(t){t.getAttribute("id")||t.setAttribute("id","lmvz-popover-"+Dt++)}function Ot(){"undefined"!=typeof customElements&&["lmvz-popover"].forEach((t=>{"lmvz-popover"===t&&(customElements.get(i(t))||customElements.define(i(t),St))}))}export{St as L,Ot as d}