@lmvz-ds/components 0.17.1 → 0.18.0

package/types/components.d.ts

@@ -0,0 +1,747 @@
+import type { Brand } from 'effect';
+
+export declare namespace Button {
+    export type Scale = (typeof scaleValues)[number];
+    export type Variant = LmvzDS.Variant;
+}
+
+export declare namespace Components {
+    export interface LmvzAction {
+    }
+    export interface LmvzButton {
+        /**
+         * Whether the button is disabled
+         * @default false
+         */
+        "disabled": boolean;
+        /**
+         * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
+         */
+        "form"?: FormRef;
+        /**
+         * Scale of the button
+         * @default 'default'
+         */
+        "scale": Button.Scale;
+        /**
+         * @readonly 
+         * @default 0
+         */
+        "ti": number;
+        /**
+         * @default 'button'
+         */
+        "type": 'submit' | 'button';
+        /**
+         * Variant of the button
+         * @default 'secondary', since the primary button should be marked as such in context
+         */
+        "variant": Button.Variant;
+    }
+    export interface LmvzCard {
+        /**
+         * Card title (required)
+         */
+        "cardTitle": string;
+        /**
+         * Optional description
+         */
+        "description"?: string;
+        /**
+         * Optional image URL; placeholder used if omitted
+         */
+        "imageUrl"?: string;
+        /**
+         * Primary action button label
+         * @default ''
+         */
+        "primaryActionLabel": string;
+    }
+    export interface LmvzChip {
+        "text": string;
+    }
+    /**
+     * An accessible, application-style navigation header component, that renders two connected levels of navigation.
+     */
+    export interface LmvzHeader {
+        "lmvzActiveNav"?: string;
+        /**
+         * @readonly 
+         * @default 'banner'
+         */
+        "role": string;
+    }
+    /**
+     * `lmvz-icon` is a web component that lazy-loads and displays an SVG icon from the given icon set.
+     * It requires a provider to be registered in the application (once), which will supply the icon data based on the `icon` prop, for its `iconset`.
+     * Loading is deferred, using an IntersectionObserver, until the instance becomes visible in the viewport.
+     */
+    export interface LmvzIcon {
+        "ariaLabel"?: string;
+        /**
+         * Required  Either a valid name from a registered iconset, or the icon's SVG content (inline).  Will be checked against the (default) iconset.
+         */
+        "icon": SVGString | string;
+        /**
+         * Optional custom icon iconset id. Must reference a registered custom iconset by its exported name.
+         */
+        "iconset"?: string;
+        /**
+         * The size of the icon (optional, default is 'md').
+         * @default 'md'
+         */
+        "size"?: Icon.Size;
+        /**
+         * The weight/style of the icon (optional, default is 'medium').
+         * @default 'medium'
+         */
+        "weight"?: Icon.IconWeight;
+    }
+    /**
+     * Input component with floating label, (form) validation, and slotted content support.
+     * @example ```html
+     * <lmvz-input
+     *   label="Email"
+     *   type="email"
+     *   required
+     *   autocomplete="email"
+     *   helper-text="We'll never share your email"
+     * ></lmvz-input>
+     * ```
+     * @example ```typescript
+     * const input = document.querySelector('lmvz-input');
+     * input.addEventListener('input', (e) => console.log(e.target.value));
+     * await input.focus();
+     * ```
+     */
+    export interface LmvzInput {
+        /**
+         * Autocapitalize attribute for mobile keyboards
+         * @default undefined
+         */
+        "autocapitalize"?: Input.Autocapitalize;
+        /**
+         * Autocomplete attribute for form autofill
+         */
+        "autocomplete"?: Input.Autocomplete;
+        /**
+         * Autocorrect attribute for mobile keyboards
+         * @default undefined
+         */
+        "autocorrect"?: 'on' | 'off';
+        /**
+         * Whether the input should autofocus
+         * @default false
+         */
+        "autofocus": boolean;
+        /**
+         * Removes focus from the input
+         */
+        "blurInput": () => Promise<void>;
+        /**
+         * Returns whether the input satisfies its validation constraints
+         */
+        "checkValidity": () => Promise<boolean>;
+        /**
+         * Whether the input is disabled
+         * @default false
+         */
+        "disabled": boolean;
+        /**
+         * Whether the input is in an error state When not set manually, this will automatically reflect native HTML5 validation state
+         * @default false
+         */
+        "error": boolean;
+        /**
+         * Error message to display when error is true
+         */
+        "errorMessage"?: string;
+        /**
+         * Sets focus on the input
+         */
+        "focusInput": () => Promise<void>;
+        /**
+         * Form id to associate with
+         */
+        "form"?: string;
+        /**
+         * 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>;
+        /**
+         * Helper text displayed below the input
+         */
+        "helperText"?: string;
+        /**
+         * Input mode for mobile keyboards
+         */
+        "inputmode"?: Input.Inputmode;
+        /**
+         * Label text for the input
+         */
+        "label": string;
+        /**
+         * Maximum value for number/date inputs
+         */
+        "max"?: number | string;
+        /**
+         * Maximum length for text inputs
+         */
+        "maxlength"?: number;
+        /**
+         * Minimum value for number/date inputs
+         */
+        "min"?: number | string;
+        /**
+         * Minimum length for text inputs
+         */
+        "minlength"?: number;
+        /**
+         * Name attribute for the input
+         */
+        "name"?: string;
+        /**
+         * Validation pattern (regex)
+         */
+        "pattern"?: string;
+        /**
+         * Placeholder text
+         */
+        "placeholder"?: string;
+        /**
+         * Whether the input is readonly
+         * @default false
+         */
+        "readonly": boolean;
+        /**
+         * Reports validation errors to the user
+         */
+        "reportValidity": () => Promise<boolean>;
+        /**
+         * Whether the input is required
+         * @default false
+         */
+        "required": boolean;
+        /**
+         * Selects the text in the input
+         */
+        "select": () => Promise<void>;
+        "setValue": (newValue: string | undefined) => Promise<void>;
+        /**
+         * Spellcheck attribute
+         * @default undefined
+         */
+        "spellcheck"?: boolean;
+        /**
+         * Step interval for number inputs
+         */
+        "step"?: number | string;
+        /**
+         * Type of the input
+         * @default 'text'
+         */
+        "type": Input.Type;
+        /**
+         * Value of the input
+         */
+        "value"?: string;
+    }
+    /**
+     * A menu item component to be used within the `lmvz-header` component's navigation slots.
+     */
+    export interface LmvzMenuitem {
+        /**
+         * @readonly 
+         * @default 'menuitem'
+         */
+        "role": string;
+        /**
+         * @readonly 
+         * @default 0
+         */
+        "ti": number;
+    }
+    /**
+     * Select component with floating label and pill-shaped trigger.
+     * Wraps a native `<select>` element for full keyboard and form support.
+     * @example ```html
+     * <lmvz-select label="Country" name="country">
+     *   <option value="ch">Switzerland</option>
+     *   <option value="de">Germany</option>
+     *   <option value="at">Austria</option>
+     * </lmvz-select>
+     * ```
+     * @example ```typescript
+     * const select = document.querySelector('lmvz-select');
+     * select.addEventListener('lmvzChange', (e) => console.log(e.detail));
+     * ```
+     */
+    export interface LmvzSelect {
+        /**
+         * Whether the select is disabled.
+         * @default false
+         */
+        "disabled": boolean;
+        /**
+         * Helper text displayed below the select field.
+         */
+        "helperText"?: string;
+        /**
+         * Label text displayed as a placeholder when no value is selected, and floated above the trigger when a value is present.
+         */
+        "label": string;
+        /**
+         * Name attribute passed to the native select for form submission.
+         */
+        "name"?: string;
+        /**
+         * Whether a value is required.
+         * @default false
+         */
+        "required": boolean;
+        /**
+         * Currently selected value.
+         */
+        "value"?: string;
+    }
+}
+
+export declare type FormRef = string | HTMLFormElement | undefined;
+
+export declare namespace Icon {
+    export type Size = (typeof iconSizes)[number];
+    export type IconWeight = (typeof iconWeights)[number];
+}
+
+declare const iconSizes: readonly ["xs", "sm", "md", "lg", "inherit"];
+
+declare const iconWeights: readonly ["thin", "medium", "bold", "filled"];
+
+export declare namespace Input {
+    export type Type = (typeof inputTypes)[number];
+    export type Autocomplete = HTMLInputElement['autocomplete'];
+    export type Inputmode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    export type Autocapitalize = 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';
+}
+
+declare const inputTypes: readonly ["text", "email", "password", "tel", "url", "search", "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 };
+
+    export interface LmvzAction {
+        "onActionClick"?: (event: LmvzActionCustomEvent<MouseEvent>) => void;
+    }
+    export interface LmvzButton {
+        /**
+         * Whether the button is disabled
+         * @default false
+         */
+        "disabled"?: boolean;
+        /**
+         * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
+         */
+        "form"?: FormRef;
+        /**
+         * Event emitted when the button is activated, either by a click or by pressing "Enter" when the button is focused.
+         */
+        "onLmvzActivation"?: (event: LmvzButtonCustomEvent<void>) => void;
+        /**
+         * Scale of the button
+         * @default 'default'
+         */
+        "scale"?: Button.Scale;
+        /**
+         * @readonly 
+         * @default 0
+         */
+        "ti"?: number;
+        /**
+         * @default 'button'
+         */
+        "type"?: 'submit' | 'button';
+        /**
+         * Variant of the button
+         * @default 'secondary', since the primary button should be marked as such in context
+         */
+        "variant"?: Button.Variant;
+    }
+    export interface LmvzCard {
+        /**
+         * Card title (required)
+         */
+        "cardTitle": string;
+        /**
+         * Optional description
+         */
+        "description"?: string;
+        /**
+         * Optional image URL; placeholder used if omitted
+         */
+        "imageUrl"?: string;
+        /**
+         * Event emitted when primary button is clicked
+         */
+        "onPrimaryAction"?: (event: LmvzCardCustomEvent<PointerEvent>) => void;
+        /**
+         * Primary action button label
+         * @default ''
+         */
+        "primaryActionLabel"?: string;
+    }
+    export interface LmvzChip {
+        "text": string;
+    }
+    /**
+     * An accessible, application-style navigation header component, that renders two connected levels of navigation.
+     */
+    export interface LmvzHeader {
+        "lmvzActiveNav"?: string;
+        /**
+         * @readonly 
+         * @default 'banner'
+         */
+        "role"?: string;
+    }
+    /**
+     * `lmvz-icon` is a web component that lazy-loads and displays an SVG icon from the given icon set.
+     * It requires a provider to be registered in the application (once), which will supply the icon data based on the `icon` prop, for its `iconset`.
+     * Loading is deferred, using an IntersectionObserver, until the instance becomes visible in the viewport.
+     */
+    export interface LmvzIcon {
+        "ariaLabel"?: string;
+        /**
+         * Required  Either a valid name from a registered iconset, or the icon's SVG content (inline).  Will be checked against the (default) iconset.
+         */
+        "icon": SVGString | string;
+        /**
+         * Optional custom icon iconset id. Must reference a registered custom iconset by its exported name.
+         */
+        "iconset"?: string;
+        /**
+         * The size of the icon (optional, default is 'md').
+         * @default 'md'
+         */
+        "size"?: Icon.Size;
+        /**
+         * The weight/style of the icon (optional, default is 'medium').
+         * @default 'medium'
+         */
+        "weight"?: Icon.IconWeight;
+    }
+    /**
+     * Input component with floating label, (form) validation, and slotted content support.
+     * @example ```html
+     * <lmvz-input
+     *   label="Email"
+     *   type="email"
+     *   required
+     *   autocomplete="email"
+     *   helper-text="We'll never share your email"
+     * ></lmvz-input>
+     * ```
+     * @example ```typescript
+     * const input = document.querySelector('lmvz-input');
+     * input.addEventListener('input', (e) => console.log(e.target.value));
+     * await input.focus();
+     * ```
+     */
+    export interface LmvzInput {
+        /**
+         * Autocapitalize attribute for mobile keyboards
+         * @default undefined
+         */
+        "autocapitalize"?: Input.Autocapitalize;
+        /**
+         * Autocomplete attribute for form autofill
+         */
+        "autocomplete"?: Input.Autocomplete;
+        /**
+         * Autocorrect attribute for mobile keyboards
+         * @default undefined
+         */
+        "autocorrect"?: 'on' | 'off';
+        /**
+         * Whether the input should autofocus
+         * @default false
+         */
+        "autofocus"?: boolean;
+        /**
+         * Whether the input is disabled
+         * @default false
+         */
+        "disabled"?: boolean;
+        /**
+         * Whether the input is in an error state When not set manually, this will automatically reflect native HTML5 validation state
+         * @default false
+         */
+        "error"?: boolean;
+        /**
+         * Error message to display when error is true
+         */
+        "errorMessage"?: string;
+        /**
+         * Form id to associate with
+         */
+        "form"?: string;
+        /**
+         * Helper text displayed below the input
+         */
+        "helperText"?: string;
+        /**
+         * Input mode for mobile keyboards
+         */
+        "inputmode"?: Input.Inputmode;
+        /**
+         * Label text for the input
+         */
+        "label": string;
+        /**
+         * Maximum value for number/date inputs
+         */
+        "max"?: number | string;
+        /**
+         * Maximum length for text inputs
+         */
+        "maxlength"?: number;
+        /**
+         * Minimum value for number/date inputs
+         */
+        "min"?: number | string;
+        /**
+         * Minimum length for text inputs
+         */
+        "minlength"?: number;
+        /**
+         * Name attribute for the input
+         */
+        "name"?: string;
+        "onLmvzInput"?: (event: LmvzInputCustomEvent<string>) => void;
+        /**
+         * Validation pattern (regex)
+         */
+        "pattern"?: string;
+        /**
+         * Placeholder text
+         */
+        "placeholder"?: string;
+        /**
+         * Whether the input is readonly
+         * @default false
+         */
+        "readonly"?: boolean;
+        /**
+         * Whether the input is required
+         * @default false
+         */
+        "required"?: boolean;
+        /**
+         * Spellcheck attribute
+         * @default undefined
+         */
+        "spellcheck"?: boolean;
+        /**
+         * Step interval for number inputs
+         */
+        "step"?: number | string;
+        /**
+         * Type of the input
+         * @default 'text'
+         */
+        "type"?: Input.Type;
+        /**
+         * Value of the input
+         */
+        "value"?: string;
+    }
+    /**
+     * A menu item component to be used within the `lmvz-header` component's navigation slots.
+     */
+    export interface LmvzMenuitem {
+        /**
+         * Event emitted when the menu item is activated, either by a click or by pressing "Enter" or "Space" while the menu item is focused.
+         */
+        "onLmvzActivation"?: (event: LmvzMenuitemCustomEvent<void>) => void;
+        /**
+         * @readonly 
+         * @default 'menuitem'
+         */
+        "role"?: string;
+        /**
+         * @readonly 
+         * @default 0
+         */
+        "ti"?: number;
+    }
+    /**
+     * Select component with floating label and pill-shaped trigger.
+     * Wraps a native `<select>` element for full keyboard and form support.
+     * @example ```html
+     * <lmvz-select label="Country" name="country">
+     *   <option value="ch">Switzerland</option>
+     *   <option value="de">Germany</option>
+     *   <option value="at">Austria</option>
+     * </lmvz-select>
+     * ```
+     * @example ```typescript
+     * const select = document.querySelector('lmvz-select');
+     * select.addEventListener('lmvzChange', (e) => console.log(e.detail));
+     * ```
+     */
+    export interface LmvzSelect {
+        /**
+         * Whether the select is disabled.
+         * @default false
+         */
+        "disabled"?: boolean;
+        /**
+         * Helper text displayed below the select field.
+         */
+        "helperText"?: string;
+        /**
+         * Label text displayed as a placeholder when no value is selected, and floated above the trigger when a value is present.
+         */
+        "label": string;
+        /**
+         * Name attribute passed to the native select for form submission.
+         */
+        "name"?: string;
+        /**
+         * Emitted when the user selects a new option. Detail contains the new value.
+         */
+        "onLmvzChange"?: (event: LmvzSelectCustomEvent<string>) => void;
+        /**
+         * Whether a value is required.
+         * @default false
+         */
+        "required"?: boolean;
+        /**
+         * Currently selected value.
+         */
+        "value"?: string;
+    }
+
+    export interface LmvzButtonAttributes {
+        "ti": number;
+        "scale": Button.Scale;
+        "variant": Button.Variant;
+        "disabled": boolean;
+        "type": 'submit' | 'button';
+        "form": FormRef;
+    }
+    export interface LmvzCardAttributes {
+        "cardTitle": string;
+        "imageUrl": string;
+        "description": string;
+        "primaryActionLabel": string;
+    }
+    export interface LmvzChipAttributes {
+        "text": string;
+    }
+    export interface LmvzHeaderAttributes {
+        "role": string;
+        "lmvzActiveNav": string;
+    }
+    export interface LmvzIconAttributes {
+        "icon": SVGString | string;
+        "weight": Icon.IconWeight;
+        "size": Icon.Size;
+        "iconset": string;
+        "ariaLabel": string;
+    }
+    export interface LmvzInputAttributes {
+        "value": string;
+        "label": string;
+        "helperText": string;
+        "placeholder": string;
+        "disabled": boolean;
+        "readonly": boolean;
+        "required": boolean;
+        "name": string;
+        "type": Input.Type;
+        "errorMessage": string;
+        "autocomplete": Input.Autocomplete;
+        "inputmode": Input.Inputmode;
+        "autocorrect": 'on' | 'off';
+        "autocapitalize": Input.Autocapitalize;
+        "spellcheck": boolean;
+        "autofocus": boolean;
+        "minlength": number;
+        "maxlength": number;
+        "pattern": string;
+        "min": string;
+        "max": string;
+        "step": string;
+        "form": string;
+        "error": boolean;
+    }
+    export interface LmvzMenuitemAttributes {
+        "role": string;
+        "ti": number;
+    }
+    export interface LmvzSelectAttributes {
+        "value": string;
+        "label": string;
+        "helperText": string;
+        "disabled": boolean;
+        "required": boolean;
+        "name": string;
+    }
+
+    export interface IntrinsicElements {
+        "lmvz-action": LmvzAction;
+        "lmvz-button": Omit<LmvzButton, keyof LmvzButtonAttributes> & { [K in keyof LmvzButton & keyof LmvzButtonAttributes]?: LmvzButton[K] } & { [K in keyof LmvzButton & keyof LmvzButtonAttributes as `attr:${K}`]?: LmvzButtonAttributes[K] } & { [K in keyof LmvzButton & keyof LmvzButtonAttributes as `prop:${K}`]?: LmvzButton[K] };
+        "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-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] } & OneOf<"text", LmvzChip["text"], LmvzChipAttributes["text"]>;
+        "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"]>;
+        "lmvz-menuitem": Omit<LmvzMenuitem, keyof LmvzMenuitemAttributes> & { [K in keyof LmvzMenuitem & keyof LmvzMenuitemAttributes]?: LmvzMenuitem[K] } & { [K in keyof LmvzMenuitem & keyof LmvzMenuitemAttributes as `attr:${K}`]?: LmvzMenuitemAttributes[K] } & { [K in keyof LmvzMenuitem & keyof LmvzMenuitemAttributes as `prop:${K}`]?: LmvzMenuitem[K] };
+        "lmvz-select": Omit<LmvzSelect, keyof LmvzSelectAttributes> & { [K in keyof LmvzSelect & keyof LmvzSelectAttributes]?: LmvzSelect[K] } & { [K in keyof LmvzSelect & keyof LmvzSelectAttributes as `attr:${K}`]?: LmvzSelectAttributes[K] } & { [K in keyof LmvzSelect & keyof LmvzSelectAttributes as `prop:${K}`]?: LmvzSelect[K] } & OneOf<"label", LmvzSelect["label"], LmvzSelectAttributes["label"]>;
+    }
+}
+
+export declare interface LmvzActionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzActionElement;
+}
+
+export declare interface LmvzButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzButtonElement;
+}
+
+export declare interface LmvzCardCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzCardElement;
+}
+
+declare namespace LmvzDS {
+    type Variant = (typeof variants)[number];
+    type Size = (typeof sizes)[number];
+}
+
+export declare interface LmvzInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzInputElement;
+}
+
+export declare interface LmvzMenuitemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzMenuitemElement;
+}
+
+export declare interface LmvzSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLmvzSelectElement;
+}
+
+declare const scaleValues: readonly ["small", "default", "large"];
+
+declare const sizes: readonly ["xs", "sm", "md", "lg"];
+
+export declare type SVGString = string & Brand.Brand<'SVG'>;
+
+declare const variants: readonly ["primary", "secondary", "tertiary"];
+
+export { }