@riverty/web-components 6.3.0 → 6.3.1

package/dist/types/components/radio-group/radio-group.d.ts

@@ -0,0 +1,179 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RadioGroupVariant } from './exports';
+export declare class RadioGroup {
+    host: HTMLRRadioGroupElement;
+    /** Specifies the `id` of the `<form>` to which the element belongs */
+    form?: string;
+    /** Specifies common `name` property that is passed to each `r-radio-button` */
+    name?: string;
+    /** Displays currently selected value */
+    value?: string;
+    /** Specifies if element must be ignored during validation of the form elements */
+    novalidate?: boolean;
+    /** The text of the label rendered before the set of radio-buttons */
+    label: string;
+    /** Specifies if radio-button within group must be checked */
+    required?: boolean;
+    /** Define the marker text if the field label is marked
+     * Field indicator can be Required*, Optional or a translation of those two options.
+     */
+    fieldIndicator?: string;
+    /** Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */
+    valueMissingMessage?: string;
+    /** Apply validation success visual style */
+    valid?: boolean;
+    /** Apply validation error visual style */
+    invalid?: boolean;
+    /** Custom validation error message */
+    error?: string;
+    /** Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method. */
+    customErrorMessage?: string;
+    /**
+     * Optional hint, visually presented under the group of radio-buttons
+     * giving additional context to the user
+    */
+    hint?: string;
+    /** Controls the style variation of the radio buttons. */
+    variant: RadioGroupVariant;
+    /**
+     * When set to `true`, automatically focuses the first enabled radio button in the group on mount.
+     * This will focus the selected radio button if one exists, or the first enabled radio button otherwise.
+     */
+    autofocus: boolean;
+    /**
+     * For nested radio groups: specifies the parent radio button value that this nested group belongs to.
+     * When the parent group's value changes to a different value, this nested group will be automatically reset.
+     * This ensures nested selections are only maintained when their parent context is active.
+     */
+    parentValue?: string;
+    validityState: string;
+    validityMessage: string;
+    rChangeAction(event: any): void;
+    /** Emits event after each validation */
+    rValidate: EventEmitter<{
+        state: string;
+        message: string;
+    }>;
+    /** Emits `rChange` when component's value has been changed  */
+    rChange: EventEmitter<{
+        element: HTMLRRadioGroupElement;
+        value: any;
+    }>;
+    /** Emits `rReset` when component was reset to initial state by form reset */
+    rReset: EventEmitter<{
+        element: HTMLRRadioGroupElement;
+        value: any;
+    }>;
+    /**
+     * Resets the radio group to its initial state.
+     * This method clears the validity state and message, and sets the value and validity
+     * to their initial values.
+     */
+    radioButtonClickAction(event: any): void;
+    private get selectedIndex();
+    private get prevIndex();
+    private get focusedRadioButtonEl();
+    private get focusedRadioButtonElIndex();
+    private get nextIndex();
+    radioButtonKeydownAction(event: any): void;
+    /**
+     * Resets the validity state and message of the radio group.
+     * This method clears the validity message and state, and sets the invalid
+     * property to its initial value.
+     */
+    resetValidity(): Promise<void>;
+    /**
+     * Resets the radio group to its initial state.
+     *
+     * This method:
+     * - clears the validity state and message,
+     * - sets the value and validity to initial values,
+     * - if no initial value the radio group will be deselected,
+     * - restores the tabindex on the first element.
+     */
+    reset(): Promise<void>;
+    /**
+     * Sets the value of the radio group to the specified value.
+     * If a radio button with the specified value exists, it will be selected.
+     *
+     * @param value - The value to set for the radio group.
+     */
+    setValue(value: string | null): Promise<void>;
+    /**
+     * Gets the current value of the radio group.
+     *
+     * @returns The current value of the radio group.
+     */
+    getValue(): Promise<string | null>;
+    /**
+     * Clears the value of the radio group and deselects all radio buttons.
+     * This method sets the value to null and deselects all radio buttons in the group.
+     */
+    clearValue(): Promise<void>;
+    /**
+     * Validates the radio group without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the radio group is valid.
+     */
+    checkValidity(): Promise<boolean>;
+    /**
+     * Validates the radio group and displays the validity state.
+     */
+    reportValidity(): Promise<boolean>;
+    /**
+     * Sets a custom validity message for the radio group.
+     * If the message is not empty, the radio group will be considered invalid.
+     *
+     * @param message - The custom validity message to set.
+     */
+    setCustomValidity(message: string): Promise<void>;
+    /**
+     * Sets focus on the radio button element.
+     * */
+    setFocus(): Promise<void>;
+    /**
+     * Blurs the radio button element.
+     * */
+    setBlur(): Promise<void>;
+    /**
+     * Initial attributes state
+     * */
+    private initial;
+    /** Unique id */
+    private uniqueId;
+    /** Determine whether this element should be ignored during Constraint Validation API validation. */
+    private get isNoValidate();
+    /** Identify wrapping form element */
+    private get parentFormEl();
+    private get radioButtonElements();
+    private get selectedRadioButtonElement();
+    private get hasSelected();
+    private get nativeSelectedEl();
+    private get nativeFirstEl();
+    private get hasValidationError();
+    private getValidityStateData;
+    private validateFormElement;
+    private passPropsToGroupItems;
+    private selectGroupItemByValue;
+    private setTabindex;
+    private onSubmitForm;
+    private onResetForm;
+    private onLabelClick;
+    private contributeToFormData;
+    /**
+     * Handles parent radio group value changes for nested groups.
+     * If this is a nested group with a parentValue specified, it will reset when
+     * the parent group's value changes to something other than the parentValue.
+     */
+    private onParentGroupChange;
+    private get parentRadioGroup();
+    private connectFormEventListeners;
+    private disconnectFormEventListeners;
+    private connectParentGroupListener;
+    private disconnectParentGroupListener;
+    private get ariaDescribedBy();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    render(): any;
+}

package/dist/types/components/select/exports.d.ts

@@ -0,0 +1,2 @@
+export declare const listboxPositionArray: readonly ["top", "bottom"];
+export type ListboxPosition = typeof listboxPositionArray[number];

package/dist/types/components/select/select.d.ts

@@ -0,0 +1,319 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ListboxPosition } from './exports';
+/**
+ * A select allows the user to choose between a set of options.
+ *
+ * Overall behavior is based on native `<select>`
+ *
+ */
+export declare class Select {
+    host: HTMLRSelectElement;
+    /** Specifies the `id` of the `<form>` to which the element belongs */
+    form?: string;
+    /** Specifies if element must be ignored during validation of the form elements */
+    novalidate?: boolean;
+    /** Name of element (data) within a form */
+    name?: string;
+    /** Selected value */
+    value?: string;
+    /** The text on the label */
+    label: string;
+    /** Specifies if the component is internal */
+    internal?: boolean;
+    /** Text that is presented until an option has been selected */
+    placeholder?: string;
+    /**
+     * Optional hint, visually presented under the select,
+     * giving additional context to the user
+     */
+    hint?: string;
+    /** Prevent user interaction and apply disabled style */
+    disabled?: boolean;
+    /** Specifies that select value is required */
+    required?: boolean;
+    /** Text of an additional marker in the label */
+    fieldIndicator?: string;
+    /** Visual indication of valid state */
+    valid?: boolean;
+    /** Validity indicator, serving to change UI of the component */
+    invalid?: boolean;
+    /** Custom validation error message */
+    error?: string;
+    /** Define if select should render as a text item or a block */
+    fullWidth: boolean;
+    /** Define wether listbox appears on top or at the bottom of the select  */
+    listboxPosition: ListboxPosition;
+    /** Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */
+    valueMissingMessage?: string;
+    /** Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method. */
+    customErrorMessage?: string;
+    /** Defines if select is expanded */
+    expanded?: boolean;
+    /** Defines if select is in readonly state */
+    readonly?: boolean;
+    /**
+     * Enable combobox functionality to allow users to reduce the list of options by filtering.
+     */
+    combobox?: boolean;
+    /**
+     * Defines aria label for combobox toggle button
+     * @default "Toggle combobox"
+     */
+    toggleButtonAriaLabel?: string;
+    /**
+     * Defines the text that will be displayed if no results are found
+     * @default "No results found"
+     */
+    noResultsFound?: string;
+    /** Defines current state of listboxPosition */
+    listboxPositionState: string;
+    /** Custom validity state passed after validation */
+    validityState: string;
+    /** Custom validity message passed after validation */
+    validityMessage: string;
+    /** Is select expanded */
+    isExpanded: boolean;
+    /** Current state, reflecting if select is readonly */
+    isReadonly: boolean;
+    /** Save current value */
+    currentValue: string;
+    /** Value that must be displayed as selected option */
+    valueToDisplay: string;
+    isInitializing: boolean;
+    isResetting: boolean;
+    focusedOption: any;
+    isValueFocused: boolean;
+    isNoResultsFound: boolean;
+    /** Indicates if the user has interacted with the select (focused/clicked) */
+    touched: boolean;
+    /** Indicates if the value has been changed by user interaction */
+    dirty: boolean;
+    /** Emits event after each validation */
+    rValidate: EventEmitter<{
+        state: string;
+        message: string;
+    }>;
+    /** Emits `rChange` event when `<r-select>` value property changes */
+    rChange: EventEmitter<{
+        element: HTMLRSelectElement;
+        value: any;
+    }>;
+    /** Emits `rReset` event when `<r-select>` onReset event happens */
+    rReset: EventEmitter<{
+        element: HTMLRSelectElement;
+        value: any;
+    }>;
+    /** Sets the component into `readonly` state  */
+    setReadonly(): Promise<void>;
+    /** Clears readonly state from the component */
+    clearReadonly(): Promise<void>;
+    handleListboxPositionChange(): void;
+    handleExpandedChange(): void;
+    handleReadonlyChange(): void;
+    handleValueChange(value: string | null, oldValue: string | null): void;
+    /** Listen for custom event triggered by "onClick" event on `<r-select-option>` */
+    optionSelectAction(e: any): void;
+    tooltipFocusAction(): void;
+    onMouseup(e: any): void;
+    onKeyup(e: any): void;
+    /**
+     * Listen on window scroll
+     * and update tooltip position if needed
+     */
+    handleScrolling(): void;
+    /**
+     * Listen on window resizing
+     * and update tooltip position if needed
+     */
+    handleResizing(): void;
+    /**
+     * Set value of the select programmatically.
+     * Does NOT mark as dirty or emit change events.
+     * Use this for programmatic value updates.
+     */
+    setValue(value?: string): Promise<void>;
+    /**
+     * Internal method to set value from user interaction.
+     * Assumes dirty flag is already set by the caller.
+     * Will emit rChange if dirty flag is true.
+     */
+    private setValueFromUserInteraction;
+    /** Set value of the select */
+    getValue(): Promise<string>;
+    /** Reset select to its initial state */
+    reset(): Promise<void>;
+    /**
+     * Clears validation results.
+     */
+    resetValidation(): Promise<void>;
+    /**
+     * Returns whether the select has been touched (focused/clicked by user).
+     * @returns A boolean indicating whether the select has been touched.
+     */
+    isTouched(): Promise<boolean>;
+    /**
+     * Returns whether the select value has been changed by user interaction.
+     * @returns A boolean indicating whether the select is dirty.
+     */
+    isDirty(): Promise<boolean>;
+    /**
+     * Marks the select as untouched and pristine (not dirty).
+     */
+    markAsPristine(): Promise<void>;
+    /** Validates an element, displays provided message in case value is invalid. */
+    setCustomValidity(message: string): Promise<void>;
+    /**
+     * Validates the textarea without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the textarea is valid.
+     */
+    checkValidity(): Promise<boolean>;
+    /** Check validity and reveal validation state and message */
+    reportValidity(): Promise<boolean>;
+    /** Set focus on the element */
+    setFocus(): Promise<void>;
+    /** Remove focus from the element */
+    setBlur(): Promise<void>;
+    /** Expand options listbox */
+    expand(): Promise<void>;
+    /** Collapse options listbox */
+    collapse(): Promise<void>;
+    /**
+     * Retrieves the currently focused option within this select component.
+     *
+     * The focused option is identified by the presence of the `data-focused="true"`
+     * attribute on an `r-select-option` element inside the component's host.
+     *
+     * @returns Promise resolving to the focused `HTMLRSelectOptionElement`, or `null`
+     * if no option is currently marked as focused.
+     */
+    getFocusedOption(): Promise<HTMLRSelectOptionElement>;
+    /**
+     * Sets focus to the option at the specified index.
+     *
+     * Retrieves the option element from the internal optionElements collection
+     * and delegates focusing logic to `setOptionFocus`.
+     *
+     * @param index - Zero-based index of the option to focus. If the index is out of bounds
+     * or the corresponding option element is unavailable, the method will no-op.
+     *
+     * @returns A promise that resolves with the result of `setOptionFocus`, typically indicating
+     * success or failure of applying focus (implementation dependent).
+     */
+    setFocusedOption(index: any): Promise<void>;
+    private clearOptionsFocus;
+    private setComboboxValueOnCollapse;
+    private get focusedOptions();
+    private toggle;
+    private handleSlotChange;
+    /**
+     * Initial attributes state
+     * */
+    private initial;
+    private messageContainer;
+    private get selectedElement();
+    private get initiallySelectedElement();
+    /** Identify wrapping form element */
+    private get parentFormEl();
+    /**
+     * Determine whether this element should be ignored
+     * during Constraint Validation API validation.
+     * */
+    private get isNoValidate();
+    private get optionElements();
+    private get optionElementsArray();
+    /** Ref element: input that provides value to Constraint Validation API */
+    private nativeElement?;
+    /** Ref element: block displaying the selected option value */
+    private valueElement?;
+    /** Ref element: block for combobox container element */
+    private comboboxContainerElement?;
+    /** Ref element: Listbox, containing options list */
+    private listboxElement?;
+    /** Ref element: visually hidden element to alert screen reader users that no results found */
+    private statusElement?;
+    /** Unique id */
+    private uniqueId;
+    private listboxWidthObserver?;
+    private getValidityStateData;
+    private validateFormElement;
+    private deselectOptions;
+    private get isBusy();
+    private _renderSelected;
+    private setOptionFocus;
+    private focusPrevOption;
+    private focusNextOption;
+    private typeaheadBuffer;
+    private typeaheadTimeout;
+    private lastTypeaheadIndex;
+    /**
+     * Return option elements whose label starts with the filter text (case-insensitive).
+     */
+    private filterOptions;
+    /**
+     * Return the index (within the provided array) of an option matching the filter.
+     * If the filter is multiple iterations of the same letter (e.g. 'aaa'), cycle through
+     * first-letter matches starting from startIndex.
+     * Returns -1 if no match.
+     */
+    private getIndexByLetter;
+    private handleTypeahead;
+    private contributeToFormData;
+    private onValueClick;
+    private keyboardEventHandlerFactory;
+    private onValueKeydown;
+    private onComboboxKeydown;
+    private onValueBlur;
+    private onValueFocus;
+    private filterOptionsListByComboboxValue;
+    private clearComboboxOptions;
+    private onComboboxChange;
+    private onComboboxInput;
+    private onSubmitForm;
+    private onResetForm;
+    private connectFormEventListeners;
+    private disconnectFormEventListeners;
+    private defineHostWidth;
+    private _renderNativeOption;
+    private notVisible;
+    /**
+     * Finds first element's parent with not visible overflow.
+     * @param element -- parent element
+     * @param initEl -- initial(child) element
+     */
+    private findOverflowParent;
+    private get ariaDescribedBy();
+    /**
+      * Parent with non visible overflow
+      */
+    get overflowedParent(): HTMLElement;
+    /**
+     * Available space at the top
+     */
+    get top(): number;
+    /**
+     * Available space at the bottom
+     */
+    get bottom(): number;
+    /**
+     * Set correct tooltip position.
+     * First it checks the available space for a defined position and then sets the new one based on the available space.
+     */
+    private defineListboxPositionState;
+    private initialize;
+    private initializeStyleObserver;
+    private get hasError();
+    private get hasValidationError();
+    private get hasMessage();
+    private get isInteractive();
+    private get hasLeadingSlot();
+    private get hasOptionIcon();
+    private get isLeadingSlotRendered();
+    private get isPlaceholder();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    private renderSelect;
+    private renderCombobox;
+    render(): any;
+}

package/dist/types/components/select-option/select-option.d.ts

@@ -0,0 +1,113 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IconName, IconPosition, IconSize } from '../icon/exports';
+/**
+ * `<r-select-option>` represents a single choice inside `<r-select>`.
+ *
+ * Accessibility:
+ * - Hosts `role="option"` and `aria-selected` / `aria-disabled`.
+ * - Emits granular events consumed by the parent select for state + keyboard logic.
+ *
+ * Keyboard (handled by parent `<r-select>`):
+ * - Arrow keys move focus between options.
+ * - Enter/Space commit the focused option.
+ * - Typeahead supported via characters typed while the listbox is open.
+ *
+ * Do not use directly outside `<r-select>`.
+ */
+export declare class SelectOption {
+    host: HTMLRSelectOptionElement;
+    /**
+     * When true, the option is not focusable or selectable.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Marks the option as selected. Controlled by `<r-select>`; not user‑set in isolation.
+     * @default false
+     */
+    selected: boolean;
+    /**
+     * Value submitted with a form when this option is selected.
+     * If omitted or empty, it's auto-filled from text content / `label`.
+     */
+    value?: string;
+    /**
+     * Presentational label. Falls back to slotted text; finally to `value`.
+     * Use `label` if the rendered text differs from the submitted `value`.
+     */
+    label?: string;
+    /**
+     * Name of an icon from the design system icon set to render with the option.
+     * Mutually exclusive with a provided `<slot name="icon">`.
+     */
+    icon?: IconName;
+    /**
+     * Icon size (applied when `icon` provided).
+     * @default "m"
+     */
+    iconSize?: IconSize;
+    /**
+     * Icon color token / CSS color value (when `icon` provided).
+     * @default "var(--r-select-option--color)"
+     */
+    iconColor?: string;
+    /**
+     * Icon position relative to label content.
+     * @default "start"
+     */
+    iconPosition?: IconPosition;
+    /** Internal unique id assigned for accessibility / focus tracking. */
+    private uniqueId;
+    /**
+     * Fires when the option is activated via pointer (not disabled).
+     * Payload includes the element + its value (resolved).
+     */
+    optionClick: EventEmitter<{
+        element: HTMLRSelectOptionElement;
+        value: any;
+    }>;
+    isFocused: boolean;
+    isSelected: boolean;
+    /**
+     * Sets the component's focus state programmatically.
+     * @method
+     * @returns Promise that resolves once the focus state has been applied.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Removes the component's focus state programmatically.
+     * @method
+     * @returns Promise that resolves once the focus state has been removed.
+     */
+    setBlur(): Promise<void>;
+    /**
+     * Marks this option as selected.
+     *
+     * Sets the internal `isSelected` flag to `true`. Declared as `async` to allow for
+     * future asynchronous side effects or integration with async selection workflows,
+     * and may be safely awaited by callers.
+     *
+     * Idempotent: calling it multiple times will keep the option selected.
+     *
+     * @returns Promise that resolves once the selection state has been updated.
+     */
+    setSelected(): Promise<void>;
+    /**
+     * Clears the current selection state for this option by setting `isSelected` to `false`.
+     *
+     * Intended for use when programmatically resetting or updating the selection (e.g., on form reset
+     * or when enforcing single-selection logic in a parent component).
+     *
+     * Side effects:
+     * - Triggers any reactive updates or re-renders that depend on `isSelected`.
+     *
+     * @returns A promise that resolves after the selection state has been cleared.
+     */
+    clearSelected(): Promise<void>;
+    private handleClick;
+    private handleKeydown;
+    get hasIconSlot(): boolean;
+    get definedValue(): string;
+    componentWillLoad(): void;
+    render(): any;
+}

package/dist/types/components/skip-link/exports.d.ts

@@ -0,0 +1,2 @@
+export declare const skipLinkPositionArray: readonly ["left", "center"];
+export type SkipLinkPosition = typeof skipLinkPositionArray[number];

package/dist/types/components/skip-link/skip-link.d.ts

@@ -0,0 +1,6 @@
+import { SkipLinkPosition } from './exports';
+export declare class SkipLink {
+    /** Defines skip link position */
+    position: SkipLinkPosition;
+    render(): any;
+}

package/dist/types/components/stepper/stepper.d.ts

@@ -0,0 +1,22 @@
+export declare class Stepper {
+    host: HTMLRStepperElement;
+    /** Complete steps. Default value 0 */
+    completed: number;
+    /** _DEPRECATED_ (use `completed` instead) Completed steps. Default value 0 */
+    completeSteps: number;
+    /** Total number of steps. Used when no slot-based steps provided. */
+    total?: number;
+    /** Label for the stepper for screen reader users. */
+    label?: string;
+    /** Label for completed steps for screen reader users. */
+    completedStepsLabel?: string;
+    handleCompletedStepsLabelChange(): void;
+    onResize(): void;
+    private get hasSteps();
+    componentDidLoad(): void;
+    private handleSlotChange;
+    private setStepStatus;
+    private getTextElementWidth;
+    updateVisibilityOfStepText(): void;
+    render(): any;
+}

package/dist/types/components/stepper-item/stepper-item.d.ts

@@ -0,0 +1,23 @@
+import { IconName } from "../icon/exports";
+export declare class StepperItem {
+    host: HTMLRStepperItemElement;
+    /** Defines a property complete that determines whether the step is complete */
+    complete: boolean;
+    /** Defines a property active that determines whether the step is active */
+    active: boolean;
+    /** Defines an icon for the step. Optional. */
+    icon?: IconName;
+    /** Defines the step number. Optional. */
+    number?: number;
+    /** _DEPRECATED_ (use `number` instead) Index of the progress step */
+    stepNumber?: number;
+    /** Label for the step icon for screen reader users. */
+    label?: string;
+    /**
+     * Checks if the slot contains only visually-hidden elements (no visible text).
+     * Returns true if only visually-hidden elements are present.
+     */
+    private get hasOnlyVisuallyHiddenContent();
+    private get hasText();
+    render(): any;
+}