@riverty/web-components 5.7.0 → 6.0.0

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

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { IconName, IconPosition } from '../icon/exports';
 import type { InputAutocomplete, InputType } from './exports';
 export declare class RInput {
     host: HTMLRInputElement;
@@ -42,83 +41,18 @@ export declare class RInput {
      * When true, hides visual label & messages (for internal layout use; accessibility still preserved).
      */
     internal?: boolean;
-    /**
-     * @deprecated Use `fieldIndicator` instead. Will be removed November 2025.
-     * Boolean flag to render an “optional” marker.
-     */
-    optional?: boolean;
-    /**
-     * @deprecated Use `fieldIndicator` instead. Will be removed November 2025.
-     * Custom text for optional marker.
-     */
-    optionalText?: string;
-    /**
-     * @deprecated Use the `popover` slot instead. Will be removed November 2025.
-     * Label tooltip text content.
-     */
-    tooltip?: string;
-    /**
-     * @deprecated Use the `popover` slot instead. Will be removed November 2025.
-     * Icon name used as tooltip trigger.
-     */
-    tooltipIcon?: IconName;
-    /**
-     * @deprecated Use the `popover` slot instead. Will be removed November 2025.
-     * Color token for tooltip trigger icon.
-     */
-    tooltipIconColor?: string;
     /**
      * Optional contextual help text displayed beneath the field.
      */
     hint?: string;
-    /**
-     * @deprecated Will be removed November 2025.
-     * Legacy single icon (prefer `leading` / `trailing` slots).
-     */
-    icon?: IconName;
-    /**
-     * @deprecated Will be removed November 2025.
-     * Color for legacy icon.
-     */
-    iconColor?: string;
-    /**
-     * @deprecated Will be removed November 2025.
-     * Position of legacy icon: `start` | `end`.
-     */
-    iconPosition: IconPosition;
-    /**
-     * @deprecated Will be removed November 2025.
-     * Treat legacy icon as submit trigger.
-     */
-    iconSubmit?: boolean;
     /**
      * When true, stretches the component horizontally to fill its container.
      */
     fullWidth?: boolean;
-    /**
-     * @deprecated Will be removed November 2025.
-     * Controls visibility of success validation marker.
-     */
-    showValid?: boolean;
     /**
      * Explicit valid state override (when set manually).
      */
     valid?: boolean;
-    /**
-     * @deprecated Will be removed November 2025.
-     * Legacy boolean to show a validation marker icon.
-     */
-    validMarker: boolean;
-    /**
-     * @deprecated Will be removed November 2025.
-     * Icon name used when `validMarker` is active and state is valid.
-     */
-    validMarkerIcon: IconName;
-    /**
-     * @deprecated Will be removed November 2025.
-     * Custom success message when field is valid.
-     */
-    validMessage?: string;
     /**
      * Explicit invalid state override (when set manually).
      */
@@ -176,6 +110,13 @@ export declare class RInput {
      * Native `autocomplete` hint for browsers / password managers.
      */
     autocomplete?: InputAutocomplete;
+    /**
+     * Safari-specific password rules for strong password generation (password inputs only).
+     * Format: "minlength: X; required: lower; required: upper; required: digit; required: special;"
+     * This attribute is Safari-specific and will be ignored by other browsers.
+     * See: https://developer.apple.com/documentation/security/password_autofill/customizing_password_autofill_rules
+     */
+    passwordrules?: string;
     /**
      * Automatically focus the input when it is first rendered.
      * Mirrors native `autofocus` attribute behavior. Avoid using multiple times per page.
@@ -186,15 +127,20 @@ export declare class RInput {
      * but the field can still receive focus, be selected, and be submitted with a form.
      */
     readonly?: boolean;
+    /**
+     * When `true` field renders valid/invalid marker within.
+    */
+    validityMarker: boolean;
     /** Validity state passed from validateFormElement function after validation */
     validityState: string;
     /** Validity message passed from validateFormElement function after validation */
     validityMessage: string;
-    /**
-     * @deprecated Will be removed November 2025.
-     * Emitted when legacy icon is clicked.
-     */
-    rClickIcon: EventEmitter;
+    /** Defines if the component has been touched by user */
+    touched: boolean;
+    /** Defines if the value has been changed by user interaction */
+    dirty: boolean;
+    /** Private flag to prevent validation during reset */
+    private isResetting;
     /**
      * Emitted after each validation attempt (native or triggered logic).
      */
@@ -266,6 +212,23 @@ 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>;
+    /**
+     * 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>;
     private nativeElement;
     private uniqueId;
     /**
@@ -277,7 +240,6 @@ export declare class RInput {
     private get ariaDescribedBy();
     private get hasError();
     private get hasValidationError();
-    private get hasValidationSuccess();
     private get hasMessage();
     /**
      * Determine whether this element should be ignored
@@ -303,5 +265,6 @@ export declare class RInput {
     private handleKeyup;
     private handleClick;
     handleValueChange(): void;
+    handleTypeChange(): void;
     render(): any;
 }

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

@@ -0,0 +1,4 @@
+export declare const inputModeArray: readonly ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"];
+export declare const enterKeyHintArray: readonly ["enter", "done", "go", "next", "previous", "search", "send"];
+export type InputMode = typeof inputModeArray[number];
+export type EnterKeyHint = typeof enterKeyHintArray[number];

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

@@ -1,11 +1,14 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import type { InputMode, EnterKeyHint } from './exports';
 export declare class InputCode {
     host: HTMLRInputCodeElement;
     /** Specifies the `id` of the `<form>` to which the element belongs. */
     form?: string;
-    /** Specifies a name for an input for submittion within formData object. */
+    /** Specifies a name for an input for submission within formData object. */
     name: string;
-    /** Number of digits (typically 4–6) */
+    /** Number of digits (typically 4–6).
+     * @default: 4
+     */
     length: number;
     /** Whether the input is disabled */
     disabled?: boolean;
@@ -18,7 +21,9 @@ export declare class InputCode {
      * but the field can still receive focus, be selected, and be submitted with a form.
      */
     readonly?: boolean;
-    /** Label for accessibility */
+    /** Label for accessibility.
+     * @default: 'Verification code'
+     */
     label: string;
     /** Text of an additional marker in the label */
     fieldIndicator?: string;
@@ -31,7 +36,7 @@ export declare class InputCode {
     /** Visual indication of valid state */
     valid?: boolean;
     /** Set custom message for `tooShort` property of a ValidityState object (set by `minlength`) within Constrain Validation API */
-    tooShortMessage: string;
+    tooShortMessage?: 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;
     /** Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */
@@ -43,6 +48,18 @@ export declare class InputCode {
     ariaCharacterLabel?: string;
     /** Defines initial value */
     value?: string | null;
+    /** Specifies the input mode for the virtual keyboard on mobile devices. Default is 'numeric' for OTP codes.
+     * @default: 'numeric'
+     */
+    inputmode?: InputMode;
+    /** Specifies the enter key hint for the virtual keyboard. Default is 'done' for OTP completion.
+     * @default: 'done'
+    */
+    enterkeyhint?: EnterKeyHint;
+    /** Specifies the autocomplete behavior. Default is 'one-time-code' for SMS OTP autofill.
+     * @default: 'one-time-code'
+    */
+    autocomplete?: string;
     /** Emits the current code value as it changes */
     rChange: EventEmitter<{
         value: string;
@@ -60,10 +77,16 @@ export declare class InputCode {
     /** Holds the current values of each input box */
     values: string[];
     /** Validity state passed from validateFormElement function after validation */
-    validityState: string;
+    validityState: string | null;
     /** Validity message passed from validateFormElement function after validation */
-    validityMessage: string;
+    validityMessage: string | null;
     private inputs;
+    /**
+     * Validates segment index and throws descriptive errors if invalid.
+     * @param index - The index to validate
+     * @throws Error if index is not an integer or out of bounds
+     */
+    private validateSegmentIndex;
     /**
      * Gets the current complete code value by joining all individual digit values.
      * @returns Promise that resolves to the complete code string
@@ -77,8 +100,32 @@ export declare class InputCode {
     /**
      * Sets provided value.
      * */
-    setValue(value: any): Promise<void>;
+    setValue(value: string | null): 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>;
+    /**
+     * Focuses a specific segment (input) by index.
+     * @param index - The zero-based index of the segment to focus (0 to length-1)
+     * @returns Promise that resolves when focus is set, or rejects if index is invalid
+     */
+    focusSegment(index: number): Promise<void>;
+    /**
+     * Gets the value of a specific segment by index.
+     * @param index - The zero-based index of the segment (0 to length-1)
+     * @returns Promise that resolves to the segment value (single character string or empty string)
+     */
+    getSegmentValue(index: number): Promise<string>;
+    /**
+     * Sets the value of a specific segment by index.
+     * @param index - The zero-based index of the segment (0 to length-1)
+     * @param value - The value to set (will be truncated to first character if longer)
+     */
+    setSegmentValue(index: number, value: string): Promise<void>;
     handleValuesChange(): void;
+    handleLengthChange(newLength: number): void;
     private handleInput;
     private handleKeyDown;
     private createInputHandler;

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

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { IconName } from "../icon/exports";
 import { DateStructure } from "./exports";
 export declare class InputDate {
     host: HTMLRInputDateElement;
@@ -17,21 +16,6 @@ export declare class InputDate {
     label: string;
     /** Text of an additional marker in the label */
     fieldIndicator?: string;
-    /**
-     * _DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)
-     * Label tooltip text
-     * */
-    tooltip?: string;
-    /**
-     * _DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)
-     * Tooltip trigger icon by name from [Riverty icons set](https://storybook.riverty.design/?path=/story/components-icon--riverty-kit)
-     * */
-    tooltipIcon?: IconName;
-    /**
-     * _DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)
-    * Change color of an icon that triggers tooltip to one of the Riverty color tokens
-     * */
-    tooltipIconColor?: string;
     /**
      * Optional hint, visually presented under the input,
      * giving additional context to the user
@@ -64,6 +48,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 +72,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 +106,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 +156,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/exports.d.ts

@@ -0,0 +1 @@
+export type PasswordAutocomplete = 'current-password' | 'new-password' | 'off';

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { IconName } from "../icon/exports";
+import type { PasswordAutocomplete } from './exports';
 export declare class InputPassword {
     host: HTMLRInputPasswordElement;
     /** Specifies the `id` of the `<form>` to which the element belongs */
@@ -16,21 +16,6 @@ export declare class InputPassword {
     label: string;
     /** Text of an additional marker in the label */
     fieldIndicator?: string;
-    /**
-     * _DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)
-     * Label tooltip text
-     * */
-    tooltip?: string;
-    /**
-     * _DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)
-     * Tooltip trigger icon by name from [Riverty icons set](https://storybook.riverty.design/?path=/story/components-icon--riverty-kit)
-     * */
-    tooltipIcon?: IconName;
-    /**
-     * _DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)
-    * Change color of an icon that triggers tooltip to one of the Riverty color tokens
-     * */
-    tooltipIconColor?: string;
     /**
      * Optional hint, visually presented under the input,
      * giving additional context to the user
@@ -53,8 +38,20 @@ export declare class InputPassword {
     readonly?: boolean;
     /** Specifies that an input is required/must be filled out */
     required?: boolean;
+    /** Maximum character length (enforced by native input). */
+    maxlength?: number;
+    /** Minimum character length (validation only). */
+    minlength?: number;
+    /** Regex pattern the value must match (string form). */
+    pattern?: string;
     /** Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */
     valueMissingMessage?: string;
+    /** Custom message for `tooLong`. */
+    tooLongMessage?: string;
+    /** Custom message for `tooShort`. */
+    tooShortMessage?: string;
+    /** Custom message for `patternMismatch`. */
+    patternMismatchMessage?: string;
     /** Custom error message displayed for any validation failures in the input. */
     customErrorMessage?: string;
     /**
@@ -69,6 +66,36 @@ export declare class InputPassword {
     shownPasswordMessage: string;
     /** Custom message when the password is hidden to alert screen reader users. */
     hiddenPasswordMessage: string;
+    /**
+     * Safari-specific password rules for strong password generation.
+     * Format: "minlength: X; required: lower; required: upper; required: digit; required: special;"
+     * Example: "minlength: 8; required: lower; required: upper; required: digit; required: special;"
+     * Note: This attribute is Safari-specific and will be ignored by other browsers.
+     * See: https://developer.apple.com/documentation/security/password_autofill/customizing_password_autofill_rules
+     */
+    passwordrules?: string;
+    /**
+     * Password-specific autocomplete behavior for browser password managers.
+     *
+     * @example
+     * **Usage Guidelines:**
+     * - `'current-password'`: Use in login forms where users enter their existing password
+     * - `'new-password'`: Use in registration forms or password change forms for the new password field
+     * - `'off'`: Disable autofill in sensitive contexts where password managers should not suggest values
+     *
+     * **Common Patterns:**
+     * ```tsx
+     * // Login form
+     * <r-input-password autocomplete="current-password" />
+     *
+     * // Registration form
+     * <r-input-password autocomplete="new-password" />
+     *
+     * // Sensitive form (e.g., admin panel)
+     * <r-input-password autocomplete="off" />
+     * ```
+     */
+    autocomplete?: PasswordAutocomplete;
     showed: boolean;
     /** Validity state passed from validateFormElement function after validation */
     validityState: string;
@@ -95,6 +122,11 @@ export declare class InputPassword {
         element: HTMLRInputPasswordElement;
         value: any;
     }>;
+    /** Emits 'rVisibilityChange' event when password visibility is toggled */
+    rVisibilityChange: EventEmitter<{
+        element: HTMLRInputPasswordElement;
+        visible: boolean;
+    }>;
     /**
      * Toggle password text visibility.
      * */
@@ -111,6 +143,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

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { IconName } from "../icon/exports";
 export declare class InputPhoneNumber {
     host: HTMLRInputPhoneNumberElement;
     /** Phone number value */
@@ -14,21 +13,6 @@ export declare class InputPhoneNumber {
     fieldIndicator?: string;
     /** Optional hint giving additional context to the user */
     hint?: string;
-    /**
-     * _DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)
-     * Label tooltip text
-     * */
-    tooltip?: string;
-    /**
-     * _DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)
-     * Label tooltip trigger icon
-     * */
-    tooltipIcon?: IconName;
-    /**
-     * _DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)
-    * Change color of an icon that triggers tooltip to one of the Riverty color tokens
-     * */
-    tooltipIconColor?: string;
     /** Specifies a name for an input for submitting within formData object. */
     name: string;
     /** Label for phone input  */
@@ -90,6 +74,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/label/label.d.ts

@@ -1,26 +1,8 @@
-import type { IconName } from '../icon/exports';
-import { TooltipPosition } from '../tooltip/exports';
 /**
  * Utility component, mostly used internally in other design system components,
  * for consistent presentation of text with optional associated tooltip.
  */
 export declare class RLabel {
-    /**
-     * _DEPRECATED_ (This property will be removed in November 2025 release.)
-     * Tooltip represents additional description */
-    tooltip?: string;
-    /**
-     * _DEPRECATED_ (This property will be removed in November 2025 release.)
-     * Defines preferable position of the tooltip */
-    tooltipPosition?: TooltipPosition;
-    /**
-     * _DEPRECATED_ (This property will be removed in November 2025 release.)
-     * Icon tooltip trigger by name from the set */
-    tooltipIcon?: IconName;
-    /**
-     * _DEPRECATED_ (This property will be removed in November 2025 release.)
-    * Change color of an icon that triggers tooltip to one of the Riverty color tokens */
-    tooltipIconColor?: string;
     /** Text of an additional marker */
     fieldIndicator?: string;
     render(): any;

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

@@ -6,12 +6,6 @@ export declare class RListItem {
      * The main text or headline displayed in the text slot (2nd slot) of the list item.
     */
     headline?: string;
-    /**
-     * @deprecated
-     * Use `description` instead. Will be removed November 2025.
-     * Secondary text displayed below the headline (2nd slot), used for additional details or context.
-     * */
-    subtext?: string;
     /** Secondary text displayed below the headline (2nd slot), used for additional details or context. */
     description?: string;
     /** When enabled, the description is limited to a single line and truncated with an ellipsis if it overflows. */

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

@@ -1,8 +1,6 @@
 export declare const popoverDismissModeArray: readonly ["auto", "manual"];
-export declare const popoverSizeArray: readonly ["s", "l"];
 export declare const popoverHorizontalArray: readonly ["left", "center", "right", "cover"];
 export declare const popoverVerticalArray: readonly ["top", "middle", "bottom", "cover"];
 export type PopoverDismissMode = typeof popoverDismissModeArray[number];
-export type PopoverSize = typeof popoverSizeArray[number];
 export type PopoverHorizontal = typeof popoverHorizontalArray[number];
 export type PopoverVertical = typeof popoverVerticalArray[number];

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { PopoverSize, PopoverDismissMode, PopoverVertical, PopoverHorizontal } from './exports';
+import { PopoverDismissMode, PopoverVertical, PopoverHorizontal } from './exports';
 import { PopoverTriggerAction } from '../popover-trigger/exports';
 export declare class Popover {
     host: HTMLRPopoverElement;
@@ -8,13 +8,6 @@ export declare class Popover {
      * @default false
      */
     open?: boolean;
-    /**
-     * _DEPRECATED_ (This property will be removed in November 2025 release.)
-     * Size of the Popover: `s` | `l`.
-     * @default "s"
-     * @deprecated This property will be removed in November 2025 release.
-     */
-    size: PopoverSize;
     /**
      * Defines the behavior of the popover's dismissing.
      * - `auto`: The popover can be dismissed by clicking outside or pressing Esc.
@@ -40,12 +33,6 @@ export declare class Popover {
      * Used for accessibility to describe the trigger button.
      */
     triggerAriaLabel?: string;
-    /**
-     * Defines `aria-label` content for the popover container.
-     * Used for accessibility to describe the popover content area.
-     * @deprecated This property will be removed in December 2025 release.
-     * */
-    containerAriaLabel?: string;
     /**
      * Defines preferred placement vertically relative to the trigger.
      * - `top`: Position above the trigger

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

@@ -20,6 +20,8 @@ export declare class RadioButton {
     required?: boolean;
     /** Prevents user interaction and applies disabled style */
     disabled?: boolean;
+    /** Automatically focus the radio button when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. */
+    autofocus?: boolean;
     /** When true the radio is selected */
     checked?: boolean;
     /**
@@ -82,6 +84,9 @@ export declare class RadioButton {
     private onKeydown;
     private onFocus;
     private onBlur;
+    private get shouldAutofocus();
+    private applyAutofocus;
     componentWillLoad(): void;
+    componentDidLoad(): void;
     render(): any;
 }