@riverty/web-components 5.7.0 → 5.8.0

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

@@ -131,6 +131,11 @@ export declare class Checkbox {
      * Sets the indeterminate state of the checkbox element.
      */
     clearIndeterminate(): Promise<void>;
+    /**
+     * Validates the checkbox without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the checkbox is valid.
+     */
+    checkValidity(): Promise<boolean>;
     private get hasErrorMessage();
     private get hasCustomErrorMessage();
     private get hasValidationError();

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

@@ -90,6 +90,11 @@ export declare class CheckboxGroup {
     validityMessage: string;
     private uniqueId;
     private initial;
+    /**
+     * Validates the checkbox group without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the checkbox is valid.
+     */
+    checkValidity(): Promise<boolean>;
     /**
      * Resets the validity state and message of the radio group.
      * This method clears the validity message and state, and sets the invalid
@@ -114,6 +119,7 @@ export declare class CheckboxGroup {
     private updateCheckboxesState;
     private get message();
     private renderMessage;
+    private getValidityStateData;
     private validateGroup;
     private get parentFormEl();
     private get isNoValidate();

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

@@ -266,6 +266,11 @@ export declare class RInput {
      * Set the current value programmatically (does not fire native input/change automatically).
      */
     setValue(value: string): Promise<void>;
+    /**
+     * Validates the input without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input is valid.
+     */
+    checkValidity(): Promise<boolean>;
     private nativeElement;
     private uniqueId;
     /**

package/dist/types/components/input-code/input-code.d.ts

@@ -78,6 +78,11 @@ export declare class InputCode {
      * Sets provided value.
      * */
     setValue(value: any): Promise<void>;
+    /**
+     * Validates the input code without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input code is valid.
+     */
+    checkValidity(): Promise<boolean>;
     handleValuesChange(): void;
     private handleInput;
     private handleKeyDown;

package/dist/types/components/input-date/input-date.d.ts

@@ -64,6 +64,20 @@ export declare class InputDate {
     valueMissingMessage?: string;
     /** Custom error message displayed when date is not valid. */
     invalidDateMessage?: string;
+    /**
+     * Minimum date value (in the same format as the date input).
+     * Note: When changing the `format` prop, ensure `min` is also updated to match the new format.
+     */
+    min?: string;
+    /**
+     * Maximum date value (in the same format as the date input).
+     * Note: When changing the `format` prop, ensure `max` is also updated to match the new format.
+     */
+    max?: string;
+    /** Custom error message displayed when date is before the minimum date. */
+    rangeUnderflowMessage?: string;
+    /** Custom error message displayed when date is after the maximum date. */
+    rangeOverflowMessage?: string;
     /** Custom error message displayed for any validation failures in the input. */
     customErrorMessage?: string;
     /** Save current value */
@@ -74,6 +88,10 @@ export declare class InputDate {
     validityState: string;
     /** Validity message passed from validateFormElement function after validation */
     validityMessage: string;
+    /** Defines if the component has been touched by user */
+    touched: boolean;
+    /** Defines if the value has been changed by user interaction */
+    dirty: boolean;
     /** Emits event after each validation */
     rValidate: EventEmitter<{
         state: string;
@@ -104,11 +122,22 @@ export declare class InputDate {
     getFormat(): Promise<string>;
     /** Sets the date format */
     setFormat(format: string): Promise<void>;
+    /** Gets the touched state (whether user has interacted with the input) */
+    isTouched(): Promise<boolean>;
+    /** Gets the dirty state (whether value has been changed by user) */
+    isDirty(): Promise<boolean>;
+    /** Resets touched and dirty states to pristine (untouched/clean) */
+    markAsPristine(): Promise<void>;
     /**
      * Resets the component by clearing all input values and focusing the first input.
      * @returns Promise that resolves when reset is complete
      */
     reset(): Promise<void>;
+    /**
+     * Validates the input date without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input date is valid.
+     */
+    checkValidity(): Promise<boolean>;
     /**
      * Initial attributes state
      * */
@@ -143,6 +172,7 @@ export declare class InputDate {
     private handleInput;
     private createChangeHandler;
     private handleChange;
+    private handleBlur;
     private getValidityStateData;
     private validateFormElement;
     private onResetForm;

package/dist/types/components/input-password/input-password.d.ts

@@ -111,6 +111,11 @@ export declare class InputPassword {
     getValue(): Promise<string>;
     /** Set the input value */
     setValue(value: string): Promise<void>;
+    /**
+     * Validates the input password without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input password is valid.
+     */
+    checkValidity(): Promise<boolean>;
     /**
      * Initial attributes state
      * */

package/dist/types/components/input-phone-number/input-phone-number.d.ts

@@ -90,6 +90,11 @@ export declare class InputPhoneNumber {
     setValue(value: string): Promise<void>;
     /** Validates an element, displays provided message in case value is invalid. */
     setCustomValidity(message: string): Promise<void>;
+    /**
+     * Validates the input phone number without triggering UI and returns a boolean indicating its validity.
+     * @returns A boolean indicating whether the input phone number is valid.
+     */
+    checkValidity(): Promise<boolean>;
     /** Check validity and reveal validation state. */
     reportValidity(): Promise<boolean>;
     /** Reset phone number input to its initial state */

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

@@ -126,8 +126,7 @@ export declare class RadioGroup {
      */
     clearValue(): Promise<void>;
     /**
-     * Validates the radio group and returns a boolean indicating its validity.
-     *
+     * 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>;

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

@@ -130,10 +130,13 @@ export declare class Select {
     valueToDisplay: string;
     isInitializing: boolean;
     isResetting: boolean;
-    isNewValue: 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;
@@ -172,8 +175,18 @@ export declare class Select {
      * and update tooltip position if needed
      */
     handleResizing(): void;
-    /** Set value of the select */
+    /**
+     * 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 */
@@ -182,6 +195,25 @@ export declare class Select {
      * 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 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 */

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

@@ -145,6 +145,11 @@ export declare class RTextarea {
     setRangeText(replacement: string, start: number, end: number, selectionMode?: 'select' | 'start' | 'end' | 'preserve'): 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>;
     /** Validates an element and displays validity state. */
     reportValidity(): Promise<void>;
     /** Identify wrapping form element. */

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

@@ -11,8 +11,15 @@ export declare class Toast {
      * Options are: "info", "success", "warning", or "error".
      * @default 'info' */
     status: ToastStatus;
+    /** Sets role="alert" and will be announced to screen reader users */
+    announced: boolean;
     /** Specifies an optional icon for the leading slot of the dialog. */
     leadingIcon?: IconName;
+    /**
+     * Defines whether the leading icon is visible.
+     * @default true
+     * */
+    leadingIconVisible: boolean;
     /** Specifies an optional icon for the trailing slot of the dialog.
      * @default 'cross'
      * */
@@ -35,7 +42,7 @@ export declare class Toast {
      * Defines the behavior of the component's dismissing.
      * - `auto`: The component will be dismissed automatically after number of ms set by `delay` property.
      * - `manual`: The component requires explicit user action to close.
-     * @default "auto"
+     * @default "manual"
      */
     dismissMode: ToastDismissMode;
     /** Provides content for `aria-label` attribute of the dismiss button. */
@@ -104,7 +111,7 @@ export declare class Toast {
     /** Unique id for each accordion item/row */
     private uniqueId;
     private hasElContent;
-    private get hasLeadingIcon();
+    private getElContent;
     private get hasLeadingSlot();
     private get hasLeading();
     private get hasTrailingSlot();
@@ -118,6 +125,7 @@ export declare class Toast {
     private get hasHeadline();
     private get hasDelay();
     private get isError();
+    private get leadingIconName();
     private startDelayTimer;
     private handleTrailingButtonClick;
     private handleSlotChange;

package/dist/types/components.d.ts

@@ -167,6 +167,11 @@ export namespace Components {
         "splitted"?: boolean;
     }
     interface RAlert {
+        /**
+          * Sets role="alert" and will be announced to screen reader users
+          * @default true
+         */
+        "announced": boolean;
         /**
           * Defines content text of the alert
          */
@@ -177,7 +182,7 @@ export namespace Components {
         "delay"?: number;
         /**
           * Text content for an alert dismiss button
-          * @default 'close-button'
+          * @default 'Dismiss alert'
          */
         "dismissButtonAriaLabel": string;
         /**
@@ -217,11 +222,12 @@ export namespace Components {
         "target": AlertTarget;
         /**
           * Defines an icon to be presented in trailing slot
+          * @default 'cross'
          */
         "trailingIcon"?: IconName;
         /**
           * Defines an icon size to be presented in trailing slot
-          * @default 's'
+          * @default 'm'
          */
         "trailingIconSize": IconSize;
         /**
@@ -323,6 +329,11 @@ export namespace Components {
           * Checks the checkbox element.
          */
         "check": () => Promise<void>;
+        /**
+          * Validates the checkbox without triggering UI and returns a boolean indicating its validity.
+          * @returns A boolean indicating whether the checkbox is valid.
+         */
+        "checkValidity": () => Promise<boolean>;
         /**
           * Pass initial checked state
          */
@@ -419,6 +430,11 @@ export namespace Components {
           * Checks all checkboxes in the slot.
          */
         "checkAll": () => Promise<this>;
+        /**
+          * Validates the checkbox group without triggering UI and returns a boolean indicating its validity.
+          * @returns A boolean indicating whether the checkbox is valid.
+         */
+        "checkValidity": () => Promise<boolean>;
         /**
           * Specifies if select-all checkbox is initially in checked state
          */
@@ -691,6 +707,11 @@ export namespace Components {
           * Custom message for `badInput` (conversion / parsing failure).
          */
         "badInputMessage"?: string;
+        /**
+          * Validates the input without triggering UI and returns a boolean indicating its validity.
+          * @returns A boolean indicating whether the input is valid.
+         */
+        "checkValidity": () => Promise<boolean>;
         /**
           * Custom message for `customError` (applies when set via `setCustomValidity()` logic internally).
          */
@@ -917,6 +938,11 @@ export namespace Components {
           * Defines label for each character's input. Default "Character: ${character number}"
          */
         "ariaCharacterLabel"?: string;
+        /**
+          * Validates the input code without triggering UI and returns a boolean indicating its validity.
+          * @returns A boolean indicating whether the input code is valid.
+         */
+        "checkValidity": () => Promise<boolean>;
         /**
           * 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.
          */
@@ -1010,6 +1036,11 @@ export namespace Components {
         "valueMissingMessage"?: string;
     }
     interface RInputDate {
+        /**
+          * Validates the input date without triggering UI and returns a boolean indicating its validity.
+          * @returns A boolean indicating whether the input date is valid.
+         */
+        "checkValidity": () => Promise<boolean>;
         /**
           * Custom error message displayed for any validation failures in the input.
          */
@@ -1064,10 +1095,30 @@ export namespace Components {
           * Custom error message displayed when date is not valid.
          */
         "invalidDateMessage"?: string;
+        /**
+          * Gets the dirty state (whether value has been changed by user)
+         */
+        "isDirty": () => Promise<boolean>;
+        /**
+          * Gets the touched state (whether user has interacted with the input)
+         */
+        "isTouched": () => Promise<boolean>;
         /**
           * The text on the label
          */
         "label": string;
+        /**
+          * Resets touched and dirty states to pristine (untouched/clean)
+         */
+        "markAsPristine": () => Promise<void>;
+        /**
+          * Maximum date value (in the same format as the date input). Note: When changing the `format` prop, ensure `max` is also updated to match the new format.
+         */
+        "max"?: string;
+        /**
+          * Minimum date value (in the same format as the date input). Note: When changing the `format` prop, ensure `min` is also updated to match the new format.
+         */
+        "min"?: string;
         /**
           * Defines label for the input for the month
           * @default 'Month'
@@ -1081,6 +1132,14 @@ export namespace Components {
           * Specifies if element must be ignored during validation of the form elements
          */
         "novalidate"?: boolean;
+        /**
+          * Custom error message displayed when date is after the maximum date.
+         */
+        "rangeOverflowMessage"?: string;
+        /**
+          * Custom error message displayed when date is before the minimum date.
+         */
+        "rangeUnderflowMessage"?: string;
         /**
           * Makes the date inputs read-only: users can focus and copy the value, but cannot modify it (value still submitted with the form unlike disabled).
          */
@@ -1134,6 +1193,11 @@ export namespace Components {
         "yearAriaLabel": string;
     }
     interface RInputPassword {
+        /**
+          * Validates the input password without triggering UI and returns a boolean indicating its validity.
+          * @returns A boolean indicating whether the input password is valid.
+         */
+        "checkValidity": () => Promise<boolean>;
         /**
           * Custom error message displayed for any validation failures in the input.
          */
@@ -1257,6 +1321,11 @@ export namespace Components {
         "valueMissingMessage"?: string;
     }
     interface RInputPhoneNumber {
+        /**
+          * Validates the input phone number without triggering UI and returns a boolean indicating its validity.
+          * @returns A boolean indicating whether the input phone number is valid.
+         */
+        "checkValidity": () => Promise<boolean>;
         /**
           * Label for countryCode code
           * @default 'Country code'
@@ -1801,7 +1870,7 @@ export namespace Components {
     }
     interface RRadioGroup {
         /**
-          * Validates the radio group and returns a boolean indicating its validity.
+          * 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>;
@@ -1928,6 +1997,11 @@ export namespace Components {
      * Overall behavior is based on native `<select>`
      */
     interface RSelect {
+        /**
+          * 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>;
         /**
           * Clears readonly state from the component
          */
@@ -1998,6 +2072,16 @@ export namespace Components {
           * Validity indicator, serving to change UI of the component
          */
         "invalid"?: boolean;
+        /**
+          * Returns whether the select value has been changed by user interaction.
+          * @returns A boolean indicating whether the select is dirty.
+         */
+        "isDirty": () => Promise<boolean>;
+        /**
+          * Returns whether the select has been touched (focused/clicked by user).
+          * @returns A boolean indicating whether the select has been touched.
+         */
+        "isTouched": () => Promise<boolean>;
         /**
           * The text on the label
          */
@@ -2020,6 +2104,10 @@ export namespace Components {
           * @default 'bottom'
          */
         "listboxPosition": ListboxPosition;
+        /**
+          * Marks the select as untouched and pristine (not dirty).
+         */
+        "markAsPristine": () => Promise<void>;
         /**
           * Name of element (data) within a form
          */
@@ -2084,7 +2172,7 @@ export namespace Components {
          */
         "setReadonly": () => Promise<void>;
         /**
-          * Set value of the select
+          * 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>;
         /**
@@ -2300,6 +2388,11 @@ export namespace Components {
           * @default "You've reached the character limit."
          */
         "characterLimitReachedMessage": string;
+        /**
+          * 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>;
         /**
           * Specifies the visible width of the `<textarea>` in terms  of the number of characters.
          */
@@ -2470,6 +2563,11 @@ export namespace Components {
           * Specifies the text content for the call-to-action link.
          */
         "action"?: string;
+        /**
+          * Sets role="alert" and will be announced to screen reader users
+          * @default true
+         */
+        "announced": boolean;
         /**
           * Specifies the time in miliseconds before the alert automatically collapses.
           * @default 3000
@@ -2491,7 +2589,7 @@ export namespace Components {
         "dismissLabel": string;
         /**
           * Defines the behavior of the component's dismissing. - `auto`: The component will be dismissed automatically after number of ms set by `delay` property. - `manual`: The component requires explicit user action to close.
-          * @default "auto"
+          * @default "manual"
          */
         "dismissMode": ToastDismissMode;
         /**
@@ -2514,6 +2612,11 @@ export namespace Components {
           * Specifies an optional icon for the leading slot of the dialog.
          */
         "leadingIcon"?: IconName;
+        /**
+          * Defines whether the leading icon is visible.
+          * @default true
+         */
+        "leadingIconVisible": boolean;
         /**
           * Controls if toast is initially shown.
           * @default true
@@ -3711,6 +3814,11 @@ declare namespace LocalJSX {
         "splitted"?: boolean;
     }
     interface RAlert {
+        /**
+          * Sets role="alert" and will be announced to screen reader users
+          * @default true
+         */
+        "announced"?: boolean;
         /**
           * Defines content text of the alert
          */
@@ -3721,7 +3829,7 @@ declare namespace LocalJSX {
         "delay"?: number;
         /**
           * Text content for an alert dismiss button
-          * @default 'close-button'
+          * @default 'Dismiss alert'
          */
         "dismissButtonAriaLabel"?: string;
         /**
@@ -3765,11 +3873,12 @@ declare namespace LocalJSX {
         "target"?: AlertTarget;
         /**
           * Defines an icon to be presented in trailing slot
+          * @default 'cross'
          */
         "trailingIcon"?: IconName;
         /**
           * Defines an icon size to be presented in trailing slot
-          * @default 's'
+          * @default 'm'
          */
         "trailingIconSize"?: IconSize;
         /**
@@ -4578,6 +4687,14 @@ declare namespace LocalJSX {
           * The text on the label
          */
         "label": string;
+        /**
+          * Maximum date value (in the same format as the date input). Note: When changing the `format` prop, ensure `max` is also updated to match the new format.
+         */
+        "max"?: string;
+        /**
+          * Minimum date value (in the same format as the date input). Note: When changing the `format` prop, ensure `min` is also updated to match the new format.
+         */
+        "min"?: string;
         /**
           * Defines label for the input for the month
           * @default 'Month'
@@ -4619,6 +4736,14 @@ declare namespace LocalJSX {
     state: string,
     message: string
   }>) => void;
+        /**
+          * Custom error message displayed when date is after the maximum date.
+         */
+        "rangeOverflowMessage"?: string;
+        /**
+          * Custom error message displayed when date is before the minimum date.
+         */
+        "rangeUnderflowMessage"?: string;
         /**
           * Makes the date inputs read-only: users can focus and copy the value, but cannot modify it (value still submitted with the form unlike disabled).
          */
@@ -5964,6 +6089,11 @@ declare namespace LocalJSX {
           * Specifies the text content for the call-to-action link.
          */
         "action"?: string;
+        /**
+          * Sets role="alert" and will be announced to screen reader users
+          * @default true
+         */
+        "announced"?: boolean;
         /**
           * Specifies the time in miliseconds before the alert automatically collapses.
           * @default 3000
@@ -5981,7 +6111,7 @@ declare namespace LocalJSX {
         "dismissLabel"?: string;
         /**
           * Defines the behavior of the component's dismissing. - `auto`: The component will be dismissed automatically after number of ms set by `delay` property. - `manual`: The component requires explicit user action to close.
-          * @default "auto"
+          * @default "manual"
          */
         "dismissMode"?: ToastDismissMode;
         /**
@@ -6000,6 +6130,11 @@ declare namespace LocalJSX {
           * Specifies an optional icon for the leading slot of the dialog.
          */
         "leadingIcon"?: IconName;
+        /**
+          * Defines whether the leading icon is visible.
+          * @default true
+         */
+        "leadingIconVisible"?: boolean;
         /**
           * Emitted when the toast is dismissed and scheduled for removal from the DOM. Fired by dismiss(), by the auto-dismiss timer (delay), and by the trailing dismiss button. Use this to react to permanent removal (contrast with toastHide which only hides without removal).
          */