@lmvz-ds/components 0.35.2 → 0.36.1

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.
          */
@@ -215,6 +219,86 @@ export declare namespace Components {
          */
         "type": Chip.Type;
     }
+    export interface LmvzDatepicker {
+        /**
+         * Returns whether the current value satisfies `required`/`min`/`max` and is a parseable date. Unlike a native `<input>`, form-associated custom elements do not forward `ElementInternals`' constraint-validation API to the element automatically — this delegates to it explicitly.
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+         * Whether the entire datepicker (input + panel) is disabled.
+         * @default false
+         */
+        "disabled": boolean;
+        /**
+         * Custom display-format pattern for the text field, using the tokens `yyyy`, `MM`, `dd` (e.g. `'dd.MM.yyyy'`). Defaults to a pattern derived from `locale`.
+         */
+        "displayFormat"?: Datepicker.DisplayFormat;
+        /**
+         * Error message displayed below the text field when the value is invalid.
+         */
+        "errorMessage"?: string;
+        /**
+         * First day of the week: `0` = Sunday, `1` = Monday. Monday-first is hardcoded for v1; this prop is reserved for future runtime support.
+         * @default 1
+         */
+        "firstDayOfWeek": 0 | 1;
+        /**
+         * Helper text displayed below the text field.
+         */
+        "helperText"?: string;
+        /**
+         * Label for the composed text field.
+         */
+        "label"?: string;
+        /**
+         * BCP 47 locale tag used for weekday/month names, ARIA labels, and the default display format.
+         * @default 'de-CH'
+         */
+        "locale": string;
+        /**
+         * Maximum selectable date in ISO `YYYY-MM-DD` format. Days after this date are disabled.
+         */
+        "max": IsoDateString | undefined;
+        /**
+         * Minimum selectable date in ISO `YYYY-MM-DD` format. Days before this date are disabled.
+         */
+        "min": IsoDateString | undefined;
+        /**
+         * Name submitted with the form.
+         */
+        "name"?: string;
+        /**
+         * Whether the calendar popover is open. Reflects the actual open state — it is kept in sync with focus/keyboard interactions and with light-dismiss/Escape closing.
+         * @default false
+         */
+        "open": boolean;
+        /**
+         * Placeholder for the composed text field. Defaults to the locale-derived display pattern (e.g. `dd.MM.yyyy`).
+         */
+        "placeholder"?: string;
+        /**
+         * Whether the datepicker is readonly. The text field cannot be typed into and the calendar cannot change the value, but the value is still submitted with the form.
+         * @default false
+         */
+        "readonly": boolean;
+        /**
+         * Reports validation errors to the user (e.g. shows the browser's native validation bubble) and returns whether the current value is valid.
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+         * Whether a value is required for the form to be valid.
+         * @default false
+         */
+        "required": boolean;
+        /**
+         * The selected date in ISO `YYYY-MM-DD` format.
+         */
+        "value": `${number}-${number}-${number}` | undefined;
+        /**
+         * ISO year-month string (`YYYY-MM`) whose month is currently displayed. Defaults to the current month when unset.
+         */
+        "visibleMonth": IsoYearMonthString | undefined;
+    }
     /**
      * An accessible, application-style navigation header component, that renders two connected levels of navigation.
      */
@@ -333,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
          */
@@ -509,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.
          */
@@ -598,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.
          */
@@ -607,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;
         /**
@@ -628,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>
@@ -642,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;
@@ -661,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
@@ -825,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
          */
@@ -850,6 +986,14 @@ export declare namespace Components {
     }
 }
 
+export declare namespace Datepicker {
+    /**
+     * A display-format pattern using the tokens `yyyy`, `MM`, `dd`
+     * (any order, arbitrary literal separators), e.g. `'dd.MM.yyyy'`.
+     */
+    export type DisplayFormat = string;
+}
+
 export declare type FormRef = string | HTMLFormElement | undefined;
 
 export declare namespace Icon {
@@ -880,6 +1024,18 @@ declare const inputSizes: readonly ["sm", "md", "lg"];
 
 declare const inputTypes: readonly ["text", "email", "password", "tel", "url", "search", "number"];
 
+/**
+ * ISO 8601 date string: YYYY-MM-DD
+ * Compatible with Temporal.PlainDate.toString()
+ */
+export declare type IsoDateString = `${number}-${number}-${number}`;
+
+/**
+ * ISO 8601 year-month string: YYYY-MM
+ * Compatible with Temporal.PlainYearMonth.toString()
+ */
+export declare type IsoYearMonthString = `${number}-${number}`;
+
 export declare namespace JSX {
     export type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
 
@@ -1080,6 +1236,98 @@ export declare namespace JSX {
          */
         "type"?: Chip.Type;
     }
+    export interface LmvzDatepicker {
+        /**
+         * Whether the entire datepicker (input + panel) is disabled.
+         * @default false
+         */
+        "disabled"?: boolean;
+        /**
+         * Custom display-format pattern for the text field, using the tokens `yyyy`, `MM`, `dd` (e.g. `'dd.MM.yyyy'`). Defaults to a pattern derived from `locale`.
+         */
+        "displayFormat"?: Datepicker.DisplayFormat;
+        /**
+         * Error message displayed below the text field when the value is invalid.
+         */
+        "errorMessage"?: string;
+        /**
+         * First day of the week: `0` = Sunday, `1` = Monday. Monday-first is hardcoded for v1; this prop is reserved for future runtime support.
+         * @default 1
+         */
+        "firstDayOfWeek"?: 0 | 1;
+        /**
+         * The `id` of a `<form>` element to associate this element with.
+         */
+        "form"?: string;
+        /**
+         * Helper text displayed below the text field.
+         */
+        "helperText"?: string;
+        /**
+         * Label for the composed text field.
+         */
+        "label"?: string;
+        /**
+         * BCP 47 locale tag used for weekday/month names, ARIA labels, and the default display format.
+         * @default 'de-CH'
+         */
+        "locale"?: string;
+        /**
+         * Maximum selectable date in ISO `YYYY-MM-DD` format. Days after this date are disabled.
+         */
+        "max"?: IsoDateString | undefined;
+        /**
+         * Minimum selectable date in ISO `YYYY-MM-DD` format. Days before this date are disabled.
+         */
+        "min"?: IsoDateString | undefined;
+        /**
+         * Name submitted with the form.
+         */
+        "name"?: string;
+        /**
+         * Emitted when the user selects a date (via the calendar grid or by typing a complete valid date). The `value` field carries an IsoDateString representing the selected date.
+         */
+        "onLmvzChange"?: (event: LmvzDatepickerCustomEvent<{ value: IsoDateString | undefined }>) => void;
+        /**
+         * Forwarded from the internal popover: fired after the calendar panel closes.
+         */
+        "onLmvzClose"?: (event: LmvzDatepickerCustomEvent<void>) => void;
+        /**
+         * Emitted when the displayed month changes via prev/next navigation. The `visibleMonth` field carries an IsoYearMonthString representing the new month.
+         */
+        "onLmvzMonthChange"?: (event: LmvzDatepickerCustomEvent<{ visibleMonth: IsoYearMonthString }>) => void;
+        /**
+         * Forwarded from the internal popover: fired after the calendar panel opens.
+         */
+        "onLmvzOpen"?: (event: LmvzDatepickerCustomEvent<void>) => void;
+        /**
+         * Whether the calendar popover is open. Reflects the actual open state — it is kept in sync with focus/keyboard interactions and with light-dismiss/Escape closing.
+         * @default false
+         */
+        "open"?: boolean;
+        /**
+         * Placeholder for the composed text field. Defaults to the locale-derived display pattern (e.g. `dd.MM.yyyy`).
+         */
+        "placeholder"?: string;
+        /**
+         * Whether the datepicker is readonly. The text field cannot be typed into and the calendar cannot change the value, but the value is still submitted with the form.
+         * @default false
+         */
+        "readonly"?: boolean;
+        /**
+         * Whether a value is required for the form to be valid.
+         * @default false
+         */
+        "required"?: boolean;
+        /**
+         * The selected date in ISO `YYYY-MM-DD` format.
+         */
+        "value"?: `${number}-${number}-${number}` | undefined;
+        /**
+         * ISO year-month string (`YYYY-MM`) whose month is currently displayed. Defaults to the current month when unset.
+         */
+        "visibleMonth"?: IsoYearMonthString | undefined;
+    }
     /**
      * An accessible, application-style navigation header component, that renders two connected levels of navigation.
      */
@@ -1360,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.
          */
@@ -1450,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;
         /**
@@ -1475,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>
@@ -1494,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;
@@ -1508,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;
         /**
@@ -1713,6 +1985,24 @@ export declare namespace JSX {
         "type": Chip.Type;
         "size": Chip.Size;
     }
+    export interface LmvzDatepickerAttributes {
+        "value": `${number}-${number}-${number}` | undefined;
+        "visibleMonth": IsoYearMonthString | undefined;
+        "min": IsoDateString | undefined;
+        "max": IsoDateString | undefined;
+        "locale": string;
+        "firstDayOfWeek": 0 | 1;
+        "disabled": boolean;
+        "readonly": boolean;
+        "required": boolean;
+        "name": string;
+        "label": string;
+        "placeholder": string;
+        "helperText": string;
+        "errorMessage": string;
+        "open": boolean;
+        "displayFormat": Datepicker.DisplayFormat;
+    }
     export interface LmvzHeaderAttributes {
         "role": string;
         "lmvzActiveNav": string;
@@ -1780,6 +2070,7 @@ export declare namespace JSX {
         "placement": Popover.Placement;
         "size": Popover.Size;
         "autoFocus": boolean;
+        "containerRole": Popover.ContainerRole;
         "label": string;
     }
     export interface LmvzRadioAttributes {
@@ -1798,6 +2089,8 @@ export declare namespace JSX {
         "value": string;
         "label": string;
         "helperText": string;
+        "error": boolean;
+        "errorMessage": string;
         "disabled": boolean;
         "required": boolean;
         "name": string;
@@ -1843,6 +2136,7 @@ export declare namespace JSX {
         "lmvz-card": Omit<LmvzCard, keyof LmvzCardAttributes> & { [K in keyof LmvzCard & keyof LmvzCardAttributes]?: LmvzCard[K] } & { [K in keyof LmvzCard & keyof LmvzCardAttributes as `attr:${K}`]?: LmvzCardAttributes[K] } & { [K in keyof LmvzCard & keyof LmvzCardAttributes as `prop:${K}`]?: LmvzCard[K] } & OneOf<"cardTitle", LmvzCard["cardTitle"], LmvzCardAttributes["cardTitle"]>;
         "lmvz-checkbox": Omit<LmvzCheckbox, keyof LmvzCheckboxAttributes> & { [K in keyof LmvzCheckbox & keyof LmvzCheckboxAttributes]?: LmvzCheckbox[K] } & { [K in keyof LmvzCheckbox & keyof LmvzCheckboxAttributes as `attr:${K}`]?: LmvzCheckboxAttributes[K] } & { [K in keyof LmvzCheckbox & keyof LmvzCheckboxAttributes as `prop:${K}`]?: LmvzCheckbox[K] } & OneOf<"label", LmvzCheckbox["label"], LmvzCheckboxAttributes["label"]>;
         "lmvz-chip": Omit<LmvzChip, keyof LmvzChipAttributes> & { [K in keyof LmvzChip & keyof LmvzChipAttributes]?: LmvzChip[K] } & { [K in keyof LmvzChip & keyof LmvzChipAttributes as `attr:${K}`]?: LmvzChipAttributes[K] } & { [K in keyof LmvzChip & keyof LmvzChipAttributes as `prop:${K}`]?: LmvzChip[K] };
+        "lmvz-datepicker": Omit<LmvzDatepicker, keyof LmvzDatepickerAttributes> & { [K in keyof LmvzDatepicker & keyof LmvzDatepickerAttributes]?: LmvzDatepicker[K] } & { [K in keyof LmvzDatepicker & keyof LmvzDatepickerAttributes as `attr:${K}`]?: LmvzDatepickerAttributes[K] } & { [K in keyof LmvzDatepicker & keyof LmvzDatepickerAttributes as `prop:${K}`]?: LmvzDatepicker[K] };
         "lmvz-header": Omit<LmvzHeader, keyof LmvzHeaderAttributes> & { [K in keyof LmvzHeader & keyof LmvzHeaderAttributes]?: LmvzHeader[K] } & { [K in keyof LmvzHeader & keyof LmvzHeaderAttributes as `attr:${K}`]?: LmvzHeaderAttributes[K] } & { [K in keyof LmvzHeader & keyof LmvzHeaderAttributes as `prop:${K}`]?: LmvzHeader[K] };
         "lmvz-icon": Omit<LmvzIcon, keyof LmvzIconAttributes> & { [K in keyof LmvzIcon & keyof LmvzIconAttributes]?: LmvzIcon[K] } & { [K in keyof LmvzIcon & keyof LmvzIconAttributes as `attr:${K}`]?: LmvzIconAttributes[K] } & { [K in keyof LmvzIcon & keyof LmvzIconAttributes as `prop:${K}`]?: LmvzIcon[K] } & OneOf<"icon", LmvzIcon["icon"], LmvzIconAttributes["icon"]>;
         "lmvz-input": Omit<LmvzInput, keyof LmvzInputAttributes> & { [K in keyof LmvzInput & keyof LmvzInputAttributes]?: LmvzInput[K] } & { [K in keyof LmvzInput & keyof LmvzInputAttributes as `attr:${K}`]?: LmvzInputAttributes[K] } & { [K in keyof LmvzInput & keyof LmvzInputAttributes as `prop:${K}`]?: LmvzInput[K] } & OneOf<"label", LmvzInput["label"], LmvzInputAttributes["label"]>;
@@ -1887,6 +2181,11 @@ export declare interface LmvzCheckboxCustomEvent<T> extends CustomEvent<T> {
     target: HTMLLmvzCheckboxElement;
 }
 
+export declare interface LmvzDatepickerCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzDatepickerElement;
+}
+
 declare namespace LmvzDS {
     type Variant = (typeof variants)[number];
     type Size = (typeof sizes)[number];
@@ -1951,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/index.d.ts

@@ -5,4 +5,3 @@ export type { LmvzDS, Typography } from './api';
 export * from './components/lmvz-message/public';
 export * from './components/lmvz-snackbar/public';
 export * from './utils/public';
-//# sourceMappingURL=index.d.ts.map

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

@@ -31,4 +31,3 @@ export declare class AriaValidationController<T extends HTMLElement = HTMLElemen
     private enqueueValidation;
     private discardVisibilityObserver;
 }
-//# sourceMappingURL=aria-validation-controller.d.ts.map

package/types/utils/aria/aria.constants.d.ts

@@ -1,2 +1,2 @@
 export declare const ariaAttributes: string[];
-//# sourceMappingURL=aria.constants.d.ts.map
+export declare const ariaHostMirrorAttributes: readonly ["aria-haspopup", "aria-controls", "aria-expanded", "aria-activedescendant", "aria-autocomplete"];

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

@@ -47,4 +47,3 @@ export declare class DirectionalFocusController implements ReactiveController {
 export type ListKeyboardNavigationHost = DirectionalFocusHost;
 export type ListKeyboardNavigationControllerConfig = DirectionalFocusControllerConfig;
 export { DirectionalFocusController as ListKeyboardNavigationController };
-//# sourceMappingURL=directional-focus-controller.d.ts.map

package/types/utils/aria/element-activation-controller.d.ts

@@ -25,4 +25,3 @@ export declare class ElementActivationController implements ReactiveController {
 declare function bindHandlers(target: HTMLElement, handler: (event: Event) => unknown, abortSignal: AbortSignal, keys?: string[]): void;
 export declare function addElementActivationListener(...[target, handler, abortSignal, keys]: Parameters<typeof bindHandlers>): void;
 export {};
-//# sourceMappingURL=element-activation-controller.d.ts.map

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/async/async.util.d.ts

@@ -8,5 +8,4 @@ export declare const waitFrame: () => Promise<void>;
 export declare const raf: (h: FrameRequestCallback) => number;
 export declare const deferEvent: (event: EventEmitter) => EventEmitter;
 export declare const debounceEvent: (event: EventEmitter, wait: number) => EventEmitter;
-export declare const debounce: (func: (...args: unknown[]) => void, wait?: number) => (...args: unknown[]) => any;
-//# sourceMappingURL=async.util.d.ts.map
+export declare const debounce: <A extends any[]>(func: (...args: A) => void, wait?: number) => (...args: A) => any;

package/types/utils/data/event.util.d.ts

@@ -3,4 +3,3 @@ export declare const pointerCoord: (ev: TouchEvent | MouseEvent) => {
     y: number;
 };
 export declare function filterKeysAndCallback(callback: (event: Event) => unknown, keys?: string[]): (event: KeyboardEvent) => void;
-//# sourceMappingURL=event.util.d.ts.map

package/types/utils/data/number.util.d.ts

@@ -1,3 +1,2 @@
 export declare const clamp: (min: number, n: number, max: number) => number;
 export declare const isSafeNumber: (input: unknown) => input is number;
-//# sourceMappingURL=number.util.d.ts.map

package/types/utils/data/object.util.d.ts

@@ -3,4 +3,3 @@ export declare const shallowEqualStringMap: (map1: {
 } | undefined, map2: {
     [k: string]: unknown;
 } | undefined) => boolean;
-//# sourceMappingURL=object.util.d.ts.map

package/types/utils/data/time.util.d.ts

@@ -1,2 +1 @@
 export declare const now: (ev: UIEvent) => number;
-//# sourceMappingURL=time.util.d.ts.map

package/types/utils/element/element.util.d.ts

@@ -1,4 +1,5 @@
 import type { Attributes, Button, FormRef } from '../../api';
+export declare function isInputElement(element: unknown): boolean;
 export declare function isActionButton(element: Element): element is HTMLButtonElement;
 export declare function isLmvzButton(element?: Element): element is HTMLLmvzButtonElement;
 export declare function isDisabledButton(element: HTMLButtonElement): boolean;
@@ -22,4 +23,3 @@ export declare function findFormByRef(form: FormRef, el: HTMLElement): HTMLFormE
 export declare function isInteractiveElement(el: HTMLElement): boolean;
 export declare function isHtmlElement(element: unknown): element is HTMLElement;
 export {};
-//# sourceMappingURL=element.util.d.ts.map

package/types/utils/environment.d.ts

@@ -1,2 +1 @@
 export declare function getLocationBase(): string;
-//# sourceMappingURL=environment.d.ts.map

package/types/utils/icons/icons-registry.d.ts

@@ -10,4 +10,3 @@ export declare function registerIconProvider<I extends KnownIconSetId>(id: I, pr
 export declare function getRegisteredIconProvider<I extends KnownIconSetId>(id: I): IconProvider<KnownIconName<I>> | undefined;
 export declare function getRegisteredIconProvider(id?: string | undefined): IconProvider<string> | undefined;
 export {};
-//# sourceMappingURL=icons-registry.d.ts.map

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

@@ -4,4 +4,3 @@ export type IconData = SVGString;
 export declare function resolveIconSvg<I extends KnownIconSetId>(options: IconPropsForSet<I>): Promise<IconData>;
 export declare function resolveIconSvg(options: IconPropsFallback): Promise<IconData>;
 export declare function typedIconFromSet<S extends string>(iconset: S, icon: IconPropsForSetWithoutFallback<S>['icon']): IconPropsForSetWithoutFallback<S>;
-//# sourceMappingURL=icons.d.ts.map