/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { AccordionSize } from "./components/accordion/exports"; import { AlertDismissMode, AlertStatus, AlertTarget } from "./components/alert/exports"; import { IconKit, IconName, IconPosition, IconSize, IconVariant } from "./components/icon/exports"; import { BadgeVariant } from "./components/badge/exports"; import { ButtonAriaCurrent, ButtonSize, ButtonTarget, ButtonType, ButtonVariant } from "./components/button/exports"; import { CardSize, CardTarget, CardVariant, SlotAlignment } from "./components/card/exports"; import { DialogSize } from "./components/dialog/exports"; import { FloatPlacementX, FloatPlacementY } from "./components/float/exports"; import { HintVariant } from "./components/hint/exports"; import { TooltipPosition } from "./components/tooltip/exports"; import { IllustrationName, IllustrationTheme } from "./components/illustration/exports"; import { ImageObjectFit, ImageSize } from "./components/image/exports"; import { AutocapitalizeType, EnterKeyHint, InputAutocomplete, InputMarker, InputMode, InputType } from "./components/input/exports"; import { Event } from "./stencil-public-runtime"; import { InputCodeEnterKeyHint, InputCodeInputMode } from "./components/input-code/exports"; import { PasswordAutocomplete } from "./components/input-password/exports"; import { ListItemCheckboxPosition, ListItemVariant, TrailingTextAlignment } from "./components/list-item/exports"; import { PaginationItemsPerPageOptions, PaginationListBoxPosition, PaginationVariant } from "./components/pagination/exports"; import { PanelVariant } from "./components/panel/exports"; import { PopoverDismissMode, PopoverHorizontal, PopoverVertical } from "./components/popover/exports"; import { PopoverTriggerAction } from "./components/popover-trigger/exports"; import { RadioGroupVariant } from "./components/radio-group/exports"; import { ListboxPosition } from "./components/select/exports"; import { SkipLinkPosition } from "./components/skip-link/exports"; import { ActiveTabBorder, TabListVariant } from "./components/tabs-list/exports"; import { TextareaResize } from "./components/textarea/exports"; import { ToastActionTarget, ToastDismissMode, ToastStatus } from "./components/toast/exports"; import { ToastGroupDirection, ToastGroupPositionX, ToastGroupPositionY } from "./components/toast-group/exports"; export { AccordionSize } from "./components/accordion/exports"; export { AlertDismissMode, AlertStatus, AlertTarget } from "./components/alert/exports"; export { IconKit, IconName, IconPosition, IconSize, IconVariant } from "./components/icon/exports"; export { BadgeVariant } from "./components/badge/exports"; export { ButtonAriaCurrent, ButtonSize, ButtonTarget, ButtonType, ButtonVariant } from "./components/button/exports"; export { CardSize, CardTarget, CardVariant, SlotAlignment } from "./components/card/exports"; export { DialogSize } from "./components/dialog/exports"; export { FloatPlacementX, FloatPlacementY } from "./components/float/exports"; export { HintVariant } from "./components/hint/exports"; export { TooltipPosition } from "./components/tooltip/exports"; export { IllustrationName, IllustrationTheme } from "./components/illustration/exports"; export { ImageObjectFit, ImageSize } from "./components/image/exports"; export { AutocapitalizeType, EnterKeyHint, InputAutocomplete, InputMarker, InputMode, InputType } from "./components/input/exports"; export { Event } from "./stencil-public-runtime"; export { InputCodeEnterKeyHint, InputCodeInputMode } from "./components/input-code/exports"; export { PasswordAutocomplete } from "./components/input-password/exports"; export { ListItemCheckboxPosition, ListItemVariant, TrailingTextAlignment } from "./components/list-item/exports"; export { PaginationItemsPerPageOptions, PaginationListBoxPosition, PaginationVariant } from "./components/pagination/exports"; export { PanelVariant } from "./components/panel/exports"; export { PopoverDismissMode, PopoverHorizontal, PopoverVertical } from "./components/popover/exports"; export { PopoverTriggerAction } from "./components/popover-trigger/exports"; export { RadioGroupVariant } from "./components/radio-group/exports"; export { ListboxPosition } from "./components/select/exports"; export { SkipLinkPosition } from "./components/skip-link/exports"; export { ActiveTabBorder, TabListVariant } from "./components/tabs-list/exports"; export { TextareaResize } from "./components/textarea/exports"; export { ToastActionTarget, ToastDismissMode, ToastStatus } from "./components/toast/exports"; export { ToastGroupDirection, ToastGroupPositionX, ToastGroupPositionY } from "./components/toast-group/exports"; export namespace Components { /** * An accordion represents a list of expandable/collapsable content sections with corresponding headers. * By default, only one section can be expanded, which can be changed by setting the `multiple` attribute. Use accordions when a limited, additional amount of information needs to be shown within a page, or if there is a small space to show content. * Each content section must be wrapped in a `` elements. * Example: * ``` * * * Section title * Section content goes here. * * * ``` */ interface RAccordion { /** * Whether to allow multiple accordion items to be expanded at once */ "multiple"?: boolean; /** * Defines the size of an accordion UI. * @default 'l' */ "size": AccordionSize; } /** * Content panel that reveals or hides within an `r-accordion-section`. Must be placed in the `accordion-panel` slot of `r-accordion-section`. * Example: * ``` * * * Section title * Section content goes here. * * * ``` */ interface RAccordionPanel { /** * Indication of the panel disabled state. */ "disabled"?: boolean; /** * Indication of the panel expanded state. */ "expanded"?: boolean; /** * Id of the trigger that controls this panel. */ "trigger"?: string; } /** * A single expandable section within an `r-accordion`, wrapping `r-accordion-trigger` and `r-accordion-panel`. Controls expanded/collapsed state and communicates with the parent accordion. * Example: * ``` * * * Section title * Section content goes here. * * * ``` */ interface RAccordionSection { /** * Indicates if `` is disabled */ "disabled"?: boolean; /** * Indicates if `` is expanded */ "expanded"?: boolean; /** * Defines heading level for accordion header * @default 2 */ "headingAriaLevel": number; } /** * The clickable header button that controls an accordion panel's expanded or collapsed state. Must be placed in the `accordion-trigger` slot of `r-accordion-section`. * Example: * ``` * * * * * Section title * * Section content goes here. * * * ``` */ interface RAccordionTrigger { /** * Controls disabled state */ "disabled"?: boolean; /** * Indication of the controlled panel revelation. */ "expanded"?: boolean; /** * Id of the panel this trigger controls. */ "panel"?: string; /** * Controls if expanded and collapsed icons are not the same */ "splitted"?: boolean; } /** * Displays an inline contextual message with a status icon, optional headline, body content, and dismiss action. Use to communicate feedback such as errors, warnings, success, or informational notices. * Example * ``` * * This is an informational alert. * * ``` */ interface RAlert { /** * Sets role="alert" and will be announced to screen reader users * @default true */ "announced": boolean; /** * Defines content text of the alert */ "content"?: string; /** * @deprecated Use `delayMs` instead. This property uses seconds and will be removed in a future version. Provide an amount of seconds before alert collapses when `dismissMode="auto"`. */ "delay"?: number; /** * @deprecated Alert shall be dismissed by user action. Will be removed within next major version. Defines amount of time im miliseconds before alert is removed from DOM. * @default 500 */ "delayBeforeRemoval": number; /** * @deprecated Alert shall be dismissed by user action. Will be removed within next major version. Defines the amount of time in milliseconds before the alert is automatically dismissed. Only applies when `dismissMode="auto"`. If both `delay` and `delayMs` are set, `delayMs` takes precedence. * @default undefined */ "delayMs"?: number; /** * Dismisses the alert and removes it from the DOM after the transition. */ "dismiss": () => Promise; /** * Text content for an alert dismiss button * @default 'Dismiss alert' */ "dismissButtonAriaLabel": string; /** * Defines the behavior of the component's dismissing. - `auto`: The component will be dismissed automatically after the time specified by `delayMs` (or deprecated `delay` in seconds). - `manual`: The component requires explicit user action to close. * @default "manual" */ "dismissMode": AlertDismissMode; /** * Defines headline text of the alert */ "headline"?: string; /** * Method to hide the alert if it was visible, keeps it in DOM */ "hide": () => Promise; /** * Defines href of the alert link */ "href"?: string; /** * Defines an icon to be presented in leading slot */ "leadingIcon"?: IconName; /** * Defines an icon size to be presented in leading slot * @default 'm' */ "leadingIconSize": IconSize; /** * Defines an icon source to be presented in leading slot */ "leadingIconSrc"?: string; /** * Defines whether the leading icon is visible. * @default true */ "leadingIconVisible": boolean; /** * Defines link label text of the alert */ "linkText"?: string; /** * Controls alert visibility * @default true */ "open": boolean; /** * Method to show the alert if it was hidden */ "show": () => Promise; /** * Alert status controls apperance according to the status * @default 'info' */ "status": AlertStatus; /** * Defines the target for the linked URL when `href` is provided. Options: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. * @default '_self' */ "target": AlertTarget; /** * Toggles visibility of the alert. */ "toggle": () => Promise; /** * Defines an icon to be presented in trailing slot * @default 'cross' */ "trailingIcon"?: IconName; /** * Defines an icon size to be presented in trailing slot * @default 'm' */ "trailingIconSize": IconSize; /** * Defines an icon source to be presented in trailing slot */ "trailingIconSrc"?: string; } /** * Informational element used to indicate the status of an object or action. * Example * ``` * Info * Completed * ``` */ interface RBadge { /** * Defines an accessible name for the icon */ "iconAriaLabel"?: string; /** * Defines if badge icon should be visible * @default false */ "iconVisible"?: boolean; /** * Variant defines how the component will be presented in UI, optional. * @default "information" */ "variant"?: BadgeVariant; } /** * A button can be used by a user to trigger an action. Corresponds to, and is rendered as a, * [native button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button). * Example: * ``` * Submit * Cancel * Disabled * Full width * ``` */ interface RButton { /** * Prevents user interaction and applies disabled style */ "disabled"?: boolean; /** * Whether to present as a full-width (100%) button. Only primary and secondary buttons can be expanded. */ "expanded"?: boolean; /** * Reference form element id with which the button is associated. */ "form"?: string; /** * URL or a URL fragment that the hyperlink points to. If the property is set, an anchor tag will be rendered. */ "href"?: string; /** * Name of an icon to display within button. */ "icon"?: IconName; /** * Position of an icon within button. Only use it when 'icon' is specified. * @default 'start' */ "iconPosition": IconPosition; /** * Indicates the current item within a set of related elements. Corresponds to [native `aria-current` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) */ "rAriaCurrent"?: ButtonAriaCurrent; /** * Sets string value for `aria-description` attribute (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-description) */ "rAriaDescription"?: string; /** * Sets string value for `aria-label` attribute (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) */ "rAriaLabel"?: string; /** * Remove focus from the button */ "setBlur": () => Promise; /** * Set focus on the button */ "setFocus": () => Promise; /** * Visual size * @default 'large' */ "size": ButtonSize; /** * Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */ "target"?: ButtonTarget; /** * Simulate a button click */ "triggerClick": () => Promise; /** * Button behavior, corresponding to [native `type` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) * @default 'button' */ "type": ButtonType; /** * Presentational style * @default 'primary' */ "variant": ButtonVariant; } /** * A flexible content container supporting portrait and landscape layouts with image, headline, description, badge, and optional button. * Example: * ``` * * * * Card title * Supporting description text. * Learn more * * * * * Landscape card * Description text. * * ``` */ interface RCard { /** * Defines the heading level for the headline. * @default 3 */ "headingAriaLevel": number; /** * Defines href for the interactive card */ "href"?: string; /** * Defines the vertical alignment of the leading slot content (e.g. image or icon). * @default 'center' */ "leadingSlotAlignment": SlotAlignment; /** * Defines the size of the component. Only applies in portrait variant * @default 'medium' */ "size": CardSize; /** * Defines the target for the linked URL when `href` is provided. Options: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */ "target"?: CardTarget; /** * Defines the vertical alignment of the trailing slot. * @default 'center' */ "trailingSlotAlignment": SlotAlignment; /** * Truncates the description text with an ellipsis if it exceeds the available space. * @default false */ "truncateDescription": boolean; /** * Truncates the headline text with an ellipsis if it exceeds the available space. * @default false */ "truncateHeadline": boolean; /** * Truncates the subtext with an ellipsis if it exceeds the available space. * @default false */ "truncateSubtext": boolean; /** * Defines the layout of the component * * @default 'portrait' */ "variant": CardVariant; } /** * Checkboxes allow users to select none, one, or multiple items from a list. * Overall behavior is based on native `` * Example: * ``` * Subscribe to newsletter * I accept the terms and conditions * Receive promotional emails * Archived (disabled) * ``` */ interface RCheckbox { /** * Automatically focus the checkbox when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior. * @default false */ "autofocus"?: boolean; /** * Checks the checkbox element. */ "check": () => Promise; /** * Validates the checkbox without triggering UI and returns a boolean indicating its validity. * @returns A boolean indicating whether the checkbox is valid. */ "checkValidity": () => Promise; /** * Pass initial checked state */ "checked"?: boolean; /** * Sets the indeterminate state of the checkbox element. */ "clearIndeterminate": () => Promise; /** * 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; /** * Prevent user interaction and apply disabled style */ "disabled"?: boolean; /** * Custom validation error message */ "error"?: string; /** * Specifies the `id` of the `
` to which the element belongs */ "form"?: string; /** * Asynchronously retrieves the validity state of the checkbox. This method updates the internal validity state and message by calling `getValidityStateData` with the native element, and then returns an object containing the current validity state and message. * @returns A promise that resolves to an object containing the validity state and message. The object has two properties: - `state`: A string representing the validity state. - `message`: A string containing the validity message. */ "getValidityState": () => Promise<{ state: string; message: string; }>; /** * Visually present checkbox in indeterminate state (neither checked nor unchecked) */ "indeterminate"?: boolean; /** * Indicate that validation has failed */ "invalid"?: boolean; /** * Name of element (data) within a form */ "name"?: string; /** * Specifies if element must be ignored during validation of the form elements */ "novalidate"?: boolean; /** * Specifies if checkbox must be checked */ "required"?: boolean; /** * Removes focus from the checkbox element. */ "setBlur": () => Promise; /** * Validates an element, displays provided message in case value is invalid. */ "setCustomValidity": (message: string) => Promise; /** * Sets focus on the checkbox element. */ "setFocus": () => Promise; /** * Sets the indeterminate state of the checkbox element. */ "setIndeterminate": () => Promise; /** * Toggles the checked state of the checkbox element. */ "toggleChecked": () => Promise; /** * Unchecks the checkbox element. */ "uncheck": () => Promise; /** * Indicate that validation is successful */ "valid"?: boolean; /** * Value of element data within a form */ "value"?: string; /** * Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */ "valueMissingMessage"?: string; } /** * Groups multiple `r-checkbox` elements under a shared label with optional select-all functionality, validation, and native form integration. * Example: * ``` * * News updates * Special offers * Events * * ``` */ interface RCheckboxGroup { /** * Checks all checkboxes in the slot. */ "checkAll": () => Promise; /** * 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; /** * Specifies if select-all checkbox is initially in checked state */ "checked"?: 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. */ "customErrorMessage"?: string; /** * Custom validation error message */ "error"?: string; /** * An optional field indicator for the label. */ "fieldIndicator"?: string; /** * Specifies the `id` of the `` to which the element belongs. */ "form"?: string; /** * Help text for the checkbox group. */ "help"?: string; /** * An optional icon to display in the help text. */ "helpIcon"?: IconName; /** * The color of the help icon. */ "helpIconColor"?: string; /** * A hint providing additional information for the checkbox group. */ "hint"?: string; /** * Specifies if select-all checkbox is initially in indeterminate state */ "indeterminate"?: boolean; /** * @deprecated – use `indeterminate` instead; will be removed during next major release. Specifies if select-all checkbox is initially in indetermitate state */ "indetermitate"?: boolean; /** * Apply validation error visual style */ "invalid"?: boolean; /** * The label for the checkbox group. */ "label": string; /** * Specifies `name` property of the 'select-all' checkbox, representing the group as a whole. */ "name"?: string; /** * Specifies if element must be ignored during validation of the form elements */ "novalidate"?: boolean; /** * Specifies whether the `value` is required. * @default false */ "required"?: boolean; /** * 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; /** * Validates the checkbox group, displays provided message in case value is invalid. */ "setCustomValidity": (message: string) => Promise; /** * Whether to show a "Select All" checkbox. */ "showSelectAll"?: boolean; /** * Unchecks all checkboxes in the slot. */ "uncheckAll": () => Promise; /** * Apply validation success visual style */ "valid"?: boolean; /** * Specifies `value` property of the 'select-all', representing the group as a whole. * @default '' */ "value": string; /** * Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */ "valueMissingMessage"?: string; } /** * Can be used by developers to verify functionality of the design system. * Example: * ```html * * ``` */ interface RDesignSystemDevtools { /** * Whether to display a preview of some key design tokens * @default false */ "designTokens": boolean; } /** * A modal dialog overlay for displaying content or collecting user input. Traps focus while open and supports customizable header, body, and footer slots. * Example: * ``` * *

Are you sure you want to proceed?

*
* Confirm * Cancel *
* * ``` */ interface RDialog { /** * Allows to set height of the dialog body container while the value is smaller then `max-height` of the dialog body pre-set according to the `size` prop. * @default 'auto' */ "bodyHeight": string; /** * Allows plain text to be provided to the body of the dialog in cases where markup is not required. For more complex cases, including those requiring HTML markup, use
...
. */ "bodyText"?: string; /** * Method to display a non-modal dialog */ "close": () => Promise; /** * Allows plain text to be provided to the close button of the dialog. */ "closeAriaLabel": string; /** * Allows to provide headline text to the dialog header section. */ "headline"?: string; /** * Define if dialog either shown or hidden. * @default false */ "open": boolean; /** * A value indicating the result of a user’s interaction with the dialog, used to determine what action the user took before closing the dialog. For example, it can differentiate between whether the user clicked a “Confirm” button or a “Cancel” button. */ "returnValue"?: string; /** * Method to display a modal dialog */ "showModal": () => Promise; /** * Defines one of pre-defined sizes of the dialog. * @default 'medium' */ "size": DialogSize; /** * Method to either show or hide dialog depending on the current state. */ "toggle": () => Promise; } /** * Floating positioning utility that anchors content relative to a trigger element. Used internally by `r-tooltip` to control placement and visibility of floating layer. * Example * ``` * *
Floating content
* * ``` */ interface RFloat { /** * @deprecated Use `setAnchorRef()` for imperative element references. Backward-compatible usage (property assignment, not HTML attribute): `const float = document.querySelector('r-float');` `float.anchorEl = triggerElement;` For new code, prefer: `float.setAnchorRef(triggerElement)`. Direct HTMLElement reference to use as the anchor. Takes precedence over `trigger`. Use this when the trigger lives inside a shadow root that `document.querySelector` cannot pierce. */ "anchorEl"?: HTMLElement; /** * Defines if float has arrow pointing to trigger rendered * @default true */ "arrow": boolean; /** * Hide the float. */ "hide": () => Promise; /** * Gap in pixels between the trigger element and the float box. * @default 8 */ "offset": number; /** * Whether the float is currently visible. * @default false */ "open": boolean; /** * Preferred horizontal alignment of the float relative to the trigger. * @default 'center' */ "placementX": FloatPlacementX; /** * Preferred vertical side the float should appear on relative to the trigger. * @default 'bottom' */ "placementY": FloatPlacementY; /** * Set anchor element reference for positioning. This is intended for integrations that derive trigger elements from slot content. Example: `const float = document.querySelector('r-float');` `await float.setAnchorRef(triggerElement);` */ "setAnchorRef": (anchorEl: HTMLElement | null) => Promise; /** * Show the float. */ "show": () => Promise; /** * CSS selector (or bare `id`) of the trigger element the float should anchor to. Supports any valid `document.querySelector` string, e.g. `"#my-btn"` or `"r-button"`. */ "trigger"?: string; /** * Force a recalculation of the float's position. Useful after content changes that affect the box dimensions. */ "update": () => Promise; } /** * A form hint is a small presentational components used next to some form elements. * Mainly used within design system components and not primarilly intended for end-users. * Example: * ``` * This field is required. * Email address is valid. * ``` */ interface RHint { /** * Allows to define custom icon to be shown next to hint text */ "icon"?: IconName; /** * Apply validation error visual style */ "invalid"?: boolean; /** * Variant defines the way hint will be visually presented */ "variant"?: HintVariant; } /** * Renders an SVG icon from the icon set (default Riverty) by name, or from a custom URL source. * Example: * ``` * * * * ``` */ interface RIcon { /** * Quick way to set display color to one of the Riverty color tokens * @default null */ "color": string; /** * Defines an accessible name for the icon. */ "iconAriaLabel"?: string; /** * Select kit * @default 'riverty' */ "kit": IconKit; /** * Name of icon to select from the set */ "name"?: IconName; /** * Select one of pre-set sizes (width and height automatically selected) * @default "m" */ "size"?: IconSize; /** * Source of an icon to fetch from */ "src"?: string; /** * Defines UI deviations for the icon. */ "variant"?: IconVariant; /** * Customize `viewBox` of rendered icon SVG element * @default '0 0 24 24' */ "viewBox": string; } /** * An icon button is a button that contains only an icon and is used to trigger an action. * Example * ``` * * * * ``` */ interface RIconButton { /** * Prevents user interaction and applies disabled style. */ "disabled"?: boolean; /** * The label for the button, used for accessibility. This label is not visible on the button itself. It is recommended to provide a label for screen readers. If not provided, the button will be considered as having no label. */ "label"?: string; /** * Name of the icon to display within the button. */ "name": IconName; /** * Sets string value for `aria-description` attribute */ "rAriaDescription"?: string; /** * Defines the tabindex of the button for keyboard navigation. */ "rTabindex"?: number; /** * Remove focus from the button */ "setBlur": () => Promise; /** * Set focus on the button */ "setFocus": () => Promise; /** * Defines the size of the icon used within the button. * @default 'm' */ "size": IconSize; /** * @deprecated Use the `` component as a wrapper instead. Sets position for the tooltip. - `top`: Tooltip appears above the button. - `bottom`: Tooltip appears below the button. - `left`: Tooltip appears to the left of the button. - `right`: Tooltip appears to the right of the button. * @default 'top' */ "tooltipPosition": TooltipPosition; /** * @deprecated Use the `` component as a wrapper instead. Text to display within the tooltip when the button is hovered or focused. */ "tooltipText"?: string; /** * Simulate a button click */ "triggerClick": () => Promise; /** * Defines the visual style of the button. - `standard`: Default button style. - `contained`: Button with a contained background. * @default 'standard' */ "variant": 'standard' | 'contained'; } /** * An illustration component that renders SVG illustrations based on a provided name or slotted content. * Example: * ``` * * * ``` */ interface RIllustration { /** * Accessibility: title for the image representing the "failed-to-load" state. * @deprecated Use `errorAlt` instead. Retained as a fallback when `errorAlt` is unset. */ "emptyImageTitle"?: string; /** * Accessibility: title for the marker representing the "failed-to-load" state. * @deprecated No longer rendered: the error state is a single SVG labelled by `errorAlt`. Accepted and ignored for backwards compatibility; will be removed in the next major. */ "emptyMarkerTitle"?: string; /** * Accessible label (aria-label) for the error state. Pass an empty string to mark it decorative. When unset, the icon falls back to `emptyImageTitle`; without that it stays decorative while `errorMessage` is rendered, and uses `'Unable to load image'` when there is no visible message. */ "errorAlt"?: string; /** * Error message text to display when illustration fails to load * @default 'Failed to load illustration' */ "errorMessage"?: string; /** * Accessible label (aria-label) for the loading state. Pass an empty string to mark it decorative. * @default 'Image is loading' */ "loadingAlt": string; /** * Maximum width constraint for responsive behavior */ "maxWidth"?: string; /** * Minimum width constraint for responsive behavior */ "minWidth"?: string; /** * Name of illustration to select from the set */ "name"?: IllustrationName; /** * Sets the component into its loading state (skeleton). The state is left when `name` is set or changed, which re-resolves the illustration. */ "setLoading": () => Promise; /** * Optional description element to be added inside the SVG for accessibility */ "svgDescription"?: string; /** * Optional title element to be added inside the SVG for accessibility */ "svgTitle"?: string; /** * Theme mode for illustration rendering * @default 'auto' */ "theme": IllustrationTheme; /** * Defines initial width of an illustration. Defaults to 100% (fills the container); the illustration content itself stays a fixed 342x176 and is centered within this width. * @default '100%' */ "width": string; } /** * Displays a responsive image with configurable size, object-fit, optional caption, and accessible alt text. * Example * ``` * * ``` */ interface RImage { /** * Accessible description of the image */ "alt"?: string; /** * Text displayed as an image caption (if size of an image is not "small"). */ "caption"?: string; /** * Accessible label for the error state * @default 'Unable to load image' */ "errorAlt": string; /** * Height of the image */ "height"?: string; /** * Accessible label for the loading state * @default 'Image is loading' */ "loadingAlt": string; /** * Controls how the image is cropped/scaled within its box * @default 'cover' */ "objectFit": ImageObjectFit; /** * Controls the anchor point of the image within its box. Accepts any CSS object-position value, e.g. 'top', 'center', '50% 20%'. */ "objectPosition"?: string; /** * Text to be shown in the error state for medium and large images * @default 'Reload' */ "reloadText": string; /** * Sets UI of the component into error state. */ "setError": () => Promise; /** * Sets UI of the component into loading state. */ "setLoading": () => Promise; /** * Updates the image src */ "setSrc": (src: string) => Promise; /** * Visual size * @default 'small' */ "size": ImageSize; /** * URL of the image to display */ "src": string; /** * Width of the image */ "width"?: string; } /** * A text input form control supporting multiple input types, validation, leading/trailing slots, and native form integration. * Example: * ``` * * * * * * ``` */ interface RInput { /** * Controls automatic capitalization of text input on mobile devices. - `off` or `none`: No automatic capitalization - `on` or `sentences`: Capitalize first letter of each sentence (default for most text inputs) - `words`: Capitalize first letter of each word - `characters`: Capitalize all characters */ "autocapitalize"?: AutocapitalizeType; /** * Native `autocomplete` hint for browsers / password managers. */ "autocomplete"?: InputAutocomplete; /** * Automatically focus the input when it is first rendered. Mirrors native `autofocus` attribute behavior. Avoid using multiple times per page. */ "autofocus"?: boolean; /** * 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; /** * Custom message for `customError` (applies when set via `setCustomValidity()` logic internally). */ "customErrorMessage"?: string; /** * Disables the field (non-interactive, excluded from form submission). */ "disabled"?: boolean; /** * Hint for the action label/icon on the virtual keyboard's enter key. Use cases: - `enter`: Default, generic newline/submit action - `done`: Finishes current input session (e.g., last field in a form) - `go`: Navigates to URL input target (e.g., URL bar) - `next`: Advances to next input field in a sequence - `previous`: Goes back to previous input field - `search`: Submits a search query - `send`: Sends a message (e.g., chat, email) */ "enterkeyhint"?: EnterKeyHint; /** * Manual error message independent of native validation messages. When set, native validation messages are suppressed. */ "error"?: string; /** * Small marker string appended to the label (e.g. “Optional”, localized markers, etc.). */ "fieldIndicator"?: string; /** * ID of the form this input is associated with (mirrors native `form` attribute). Use when the input is not a direct descendant of the target form element. */ "form"?: string; /** * When true, stretches the component horizontally to fill its container. */ "fullWidth"?: boolean; /** * Get the end index of the current text selection (or null if unavailable). */ "getSelectionEnd": () => Promise; /** * Get the start index of the current text selection (or null if unavailable). */ "getSelectionStart": () => Promise; /** * Retrieve the current value (returns empty string if unset). */ "getValue": () => Promise; /** * Optional contextual help text displayed beneath the field. */ "hint"?: string; /** * Hint to the browser about which keyboard to display on mobile devices. */ "inputmode"?: InputMode; /** * When true, hides visual label & messages (for internal layout use; accessibility still preserved). */ "internal"?: boolean; /** * Explicit invalid state override (when set manually). */ "invalid"?: boolean; /** * Gets the dirty state (whether value has been changed by user) */ "isDirty": () => Promise; /** * Gets the touched state (whether user has interacted with the input) */ "isTouched": () => Promise; /** * Label text describing the field. Provide for accessibility (or use the `label` slot). */ "label": string; /** * Resets touched and dirty states to pristine (untouched/clean) */ "markAsPristine": () => Promise; /** * Defines the validation marker strategy. `auto` (default) - Shows valid/invalid markers dynamically based on state and value. `valid` - Always shows the valid marker. `invalid` - Always shows the invalid marker. `none` - Hides the validation marker entirely. * @default 'auto' */ "marker"?: InputMarker; /** * Maximum numeric/date value (for supported types). */ "max"?: number; /** * Maximum character length (enforced by native input). */ "maxlength"?: number; /** * Minimum numeric/date value (for supported types). */ "min"?: number; /** * Minimum character length (validation only). */ "minlength"?: number; /** * Name used when contributing the value to form submission (`FormData` / POST body). */ "name"?: string; /** * If set, the field is skipped by built‑in (Constraint Validation API) validation logic. Does not prevent custom validation you may trigger manually. */ "novalidate"?: boolean; /** * 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; /** * Regex pattern the value must match (string form). */ "pattern"?: any; /** * Custom message for `patternMismatch`. */ "patternMismatchMessage"?: string; /** * Placeholder hint text shown when the field is empty and unfocused. */ "placeholder"?: string; /** * Custom message for `rangeOverflow`. */ "rangeOverflowMessage"?: string; /** * Custom message for `rangeUnderflow`. */ "rangeUnderflowMessage"?: string; /** * Read-only mode (mirrors native `readonly`): value cannot be changed by the user, but the field can still receive focus, be selected, and be submitted with a form. */ "readonly"?: boolean; /** * Marks the field as required; failing to provide a value triggers `valueMissing`. */ "required"?: boolean; /** * Select (highlight) the entire current input value. */ "select": () => Promise; /** * Programmatically remove focus from the native input. */ "setBlur": () => Promise; /** * Validates an element, displays provided message in case value is invalid. */ "setCustomValidity": (message: string) => Promise; /** * Programmatically focus the native input element. */ "setFocus": () => Promise; "setRangeText": (replacement: string, start: number, end: number, selectMode?: "select" | "start" | "end" | "preserve") => Promise; /** * Set a selection (or caret) range within the value. * @param start Start index (inclusive) * @param end End index (exclusive) * @param direction Selection direction (browser hint) */ "setSelectionRange": (start: number, end: number, direction?: "forward" | "backward" | "none") => Promise; /** * Set the current value programmatically (does not fire native input/change automatically). */ "setValue": (value: string) => Promise; /** * Controls browser spell-checking for text input. When true, enables spell-checking; when false, disables it. Browser default behavior applies when not specified. */ "spellcheck"?: boolean; /** * Step interval for numeric/date input types. */ "step"?: number; /** * Custom message for `stepMismatch`. */ "stepMismatchMessage"?: string; /** * Controls whether pressing Enter triggers implicit form submission when this input is inside a form. Set to `false` for custom Enter behavior (for example, table filtering) without submitting the form. * @default true */ "submitOnEnter": boolean; /** * Custom message for `tooLong`. */ "tooLongMessage"?: string; /** * Custom message for `tooShort`. */ "tooShortMessage"?: string; /** * Input type (e.g. `text`, `email`, `number`, `password`). See HTMLInputElement `type` for supported values. * @default 'text' */ "type": InputType; /** * Custom message for `typeMismatch`. */ "typeMismatchMessage"?: string; /** * Explicit valid state override (when set manually). */ "valid"?: boolean; /** * When `true` field renders valid/invalid marker within. * @deprecated Will be removed in the next major version. Use 'marker' prop instead. * @default true */ "validityMarker": boolean; /** * Current value. Mutable: can be changed programmatically or through user input. * @default '' */ "value"?: string | null; /** * Custom message for `valueMissing`. */ "valueMissingMessage"?: string; } /** * A segmented digit input for entering short numeric or alphanumeric codes such as OTP or verification codes. * Example: * ``` * * ``` */ interface RInputCode { /** * Defines label for each character's input. Default "Character: ${character number}" */ "ariaCharacterLabel"?: string; /** * Specifies the autocomplete behavior. Default is 'one-time-code' for SMS OTP autofill. * @default : 'one-time-code' */ "autocomplete"?: 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; /** * 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; /** * Whether the input is disabled */ "disabled"?: boolean; /** * Specifies the enter key hint for the virtual keyboard. Default is 'done' for OTP completion. * @default : 'done' */ "enterkeyhint"?: InputCodeEnterKeyHint; /** * The way to provide error message separately from Constraint Validation API. */ "error"?: string; /** * Text of an additional marker in the label */ "fieldIndicator"?: string; /** * 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; /** * Specifies the `id` of the `` to which the element belongs. */ "form"?: string; /** * Defines if the component suppose to occupy 100% width */ "fullWidth"?: boolean; /** * 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; /** * Gets the current complete code value by joining all individual digit values. * @returns Promise that resolves to the complete code string */ "getValue": () => Promise; /** * Description for accessibility */ "hint"?: string; /** * Specifies the input mode for the virtual keyboard on mobile devices. Default is 'numeric' for OTP codes. * @default : 'numeric' */ "inputmode"?: InputCodeInputMode; /** * Validity indicator, serving to change UI of the component */ "invalid"?: boolean; /** * Label for accessibility. * @default : 'Verification code' */ "label": string; /** * Number of digits (typically 4–6). * @default : 4 */ "length": number; /** * Controls the validation marker strategy. `auto` (default) shows the valid/invalid marker dynamically based on state and value. `valid` always shows the valid marker, `invalid` always shows the invalid marker, `none` hides the validation marker entirely. * @default 'auto' */ "marker"?: InputMarker; /** * Specifies a name for an input for submission within formData object. * @default 'input-code' */ "name": string; /** * Specifies if element must be ignored during validation of the form elements. */ "novalidate"?: boolean; /** * Read-only mode (mirrors native `readonly`): value cannot be changed by the user, but the field can still receive focus, be selected, and be submitted with a form. */ "readonly"?: boolean; /** * Whether the input is required */ "required"?: boolean; /** * Resets the component by clearing all input values and focusing the first input. * @returns Promise that resolves when reset is complete */ "reset": () => Promise; /** * Validates an element, displays provided message in case value is invalid. */ "setCustomValidity": (message: string) => Promise; /** * 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; /** * Sets provided value. */ "setValue": (value: string | null) => Promise; /** * Controls whether pressing Enter triggers implicit form submission when this input is inside a form. Set to `false` for custom Enter behavior without submitting the form. * @default true */ "submitOnEnter": boolean; /** * Set custom message for `tooShort` property of a ValidityState object (set by `minlength`) within Constrain Validation API */ "tooShortMessage"?: string; /** * Visual indication of valid state */ "valid"?: boolean; /** * Defines initial value * @default '' */ "value"?: string | null; /** * Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */ "valueMissingMessage"?: string; } /** * A date input form control with structured day, month, and year fields and built-in validation. * Example * ``` * * ``` */ 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; /** * Custom error message displayed for any validation failures in the input. */ "customErrorMessage"?: string; /** * Defines label for the input for the day * @default 'Day' */ "dayAriaLabel": string; /** * Prevents user interaction and applies disabled style */ "disabled"?: boolean; /** * The way to provide error message separately from Constraint Validation API. */ "error"?: string; /** * Text of an additional marker in the label */ "fieldIndicator"?: string; /** * Specifies the `id` of the `` to which the element belongs */ "form"?: string; /** * Specifies a date format * @default 'DD/MM/YYYY' */ "format": string; /** * Defines if the component suppose to occupy 100% width */ "fullWidth"?: boolean; /** * Gets the current date format */ "getFormat": () => Promise; /** * Get the date value */ "getValue": () => Promise; /** * Optional hint, visually presented under the input, giving additional context to the user */ "hint"?: string; /** * Validity indicator, serving to change UI of the component */ "invalid"?: boolean; /** * Custom error message displayed when date is not valid. */ "invalidDateMessage"?: string; /** * Gets the dirty state (whether value has been changed by user) */ "isDirty": () => Promise; /** * Gets the touched state (whether user has interacted with the input) */ "isTouched": () => Promise; /** * The text on the label */ "label": string; /** * Resets touched and dirty states to pristine (untouched/clean) */ "markAsPristine": () => Promise; /** * 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' */ "monthAriaLabel": string; /** * Specifies a name for a input */ "name": string; /** * 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). */ "readonly"?: boolean; /** * Specifies that an input is required/must be filled out */ "required"?: boolean; /** * Resets the component by clearing all input values and focusing the first input. * @returns Promise that resolves when reset is complete */ "reset": () => Promise; /** * Validates an element, displays provided message in case value is invalid. */ "setCustomValidity": (message: string) => Promise; /** * Sets the date format */ "setFormat": (format: string) => Promise; /** * Sets the date value */ "setValue": (value: string) => Promise; /** * Controls whether pressing Enter triggers implicit form submission when this input is inside a form. Set to `false` for custom Enter behavior without submitting the form. * @default true */ "submitOnEnter": boolean; /** * Visual indication of valid state */ "valid"?: boolean; /** * The value of the date input * @default '' */ "value"?: string | null; /** * Set custom message for `valueMissing` property of a ValidityState object (set by `required`) */ "valueMissingMessage"?: string; /** * Defines label for the input for the year * @default 'Year' */ "yearAriaLabel": string; } /** * A password input field with a built-in visibility toggle, validation. * Example * ``` * * ``` */ interface RInputPassword { /** * 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 // Registration form // Sensitive form (e.g., admin panel) ``` */ "autocomplete"?: PasswordAutocomplete; /** * 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; /** * Custom error message displayed for any validation failures in the input. */ "customErrorMessage"?: string; /** * Prevents user interaction and applies disabled style */ "disabled"?: boolean; /** * The way to provide error message separately from Constraint Validation API. */ "error"?: string; /** * Text of an additional marker in the label */ "fieldIndicator"?: string; /** * Specifies the `id` of the `` to which the element belongs */ "form"?: string; /** * Defines if the component suppose to occupy 100% width */ "fullWidth"?: boolean; /** * Get the input value */ "getValue": () => Promise; /** * Custom message when the password is hidden to alert screen reader users. * @default "Your password is hidden." */ "hiddenPasswordMessage": string; /** * Hide password text. */ "hidePassword": () => Promise; /** * Defines label for characters hide button. * @default 'Hide password.' */ "hidePasswordAriaLabel": string; /** * Optional hint, visually presented under the input, giving additional context to the user */ "hint"?: string; /** * Validity indicator, serving to change UI of the component */ "invalid"?: boolean; /** * The text on the label */ "label": string; /** * Maximum character length (enforced by native input). */ "maxlength"?: number; /** * Minimum character length (validation only). */ "minlength"?: number; /** * Specifies a name for a input */ "name": string; /** * Specifies if element must be ignored during validation of the form elements */ "novalidate"?: boolean; /** * 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; /** * Regex pattern the value must match (string form). */ "pattern"?: string; /** * Custom message for `patternMismatch`. */ "patternMismatchMessage"?: string; /** * Specifies a short hint that describes the expected value of a input */ "placeholder"?: string; /** * Makes the input read-only: users can focus and copy the value, but cannot modify it (value still submitted with the form unlike disabled). */ "readonly"?: boolean; /** * Specifies that an input is required/must be filled out */ "required"?: boolean; /** * Validates an element, displays provided message in case value is invalid. */ "setCustomValidity": (message: string) => Promise; /** * Set the input value */ "setValue": (value: string) => Promise; /** * Show password text. */ "showPassword": () => Promise; /** * Defines label for characters show button. * @default 'Show password.' */ "showPasswordAriaLabel": string; /** * Custom message when the password is shown to alert screen reader users. * @default "Your password is shown." */ "shownPasswordMessage": string; /** * Controls whether pressing Enter triggers implicit form submission when this input is inside a form. Set to `false` for custom Enter behavior without submitting the form. * @default true */ "submitOnEnter": boolean; /** * Toggle password text visibility. */ "toggleShow": () => Promise; /** * Custom message for `tooLong`. */ "tooLongMessage"?: string; /** * Custom message for `tooShort`. */ "tooShortMessage"?: string; /** * Visual indication of valid state */ "valid"?: boolean; /** * The value of the password input * @default '' */ "value"?: string | null; /** * Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */ "valueMissingMessage"?: string; } /** * A phone number input with integrated country code prefix selection and built-in phone number validation. * Example * ``` * * ``` * This is a dedicated phone-number component, not a drop-in ``. It exposes its own named * properties and does **not** honour the native input constraint attributes `max`, `maxlength`, * `min`, `minlength` or `step` — they have no effect. Phone-number length is a per-country * validation outcome, not a character cap. To restrict input use `pattern` (allowed characters); * to customise the invalid-number message use `invalidPhoneNumberMessage`. */ 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; /** * Label for countryCode code * @default 'Country code' */ "countryCodeLabel"?: string; /** * Custom error message displayed when no country code is selected. */ "countryCodeMissingMessage"?: 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; /** * Prevents user interaction and applies disabled style. */ "disabled"?: boolean; /** * Custom validation error message */ "error"?: string; /** * An optional field indicator for the label. */ "fieldIndicator"?: string; /** * Specifies the `id` of the `` to which the element belongs */ "form"?: string; /** * Defines if the component suppose to occupy 100% width */ "fullWidth"?: boolean; /** * Returns the element value. */ "getValue": () => Promise; /** * Optional hint giving additional context to the user */ "hint"?: string; /** * Label for phone input * @default 'Phone number without country code' */ "inputLabel"?: string; /** * Validity indicator, serving to change UI of the component */ "invalid"?: boolean; /** * Custom error message displayed when phone number is not valid. */ "invalidPhoneNumberMessage"?: string; /** * The label for the phone number. */ "label": string; /** * Controls the validation marker strategy, forwarded to the inner input. `auto` (default) shows the valid/invalid marker dynamically based on state and value. `valid` always shows the valid marker, `invalid` always shows the invalid marker, `none` hides the validation marker entirely. * @default 'auto' */ "marker"?: InputMarker; /** * Specifies a name for an input for submitting within formData object. * @default 'phone-number' */ "name": string; /** * Specifies if element must be ignored during validation of the form elements */ "novalidate"?: boolean; /** * A regular expression pattern the local phone number part must match before the phone library validation runs. Defaults to digits, spaces, parentheses, and hyphens: `^[\d\s()\-]+$`. * @default DEFAULT_PHONE_NUMBER_PATTERN */ "pattern"?: 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). */ "readonly"?: boolean; /** * Check validity and reveal validation state. */ "reportValidity": () => Promise; /** * Specifies that phone number value is required */ "required"?: boolean; /** * Reset phone number input to its initial state */ "reset": () => Promise; /** * Validates an element, displays provided message in case value is invalid. */ "setCustomValidity": (message: string) => Promise; /** * Set the element value. */ "setValue": (value: string) => Promise; /** * Controls whether pressing Enter triggers implicit form submission when this input is inside a form. Set to `false` for custom Enter behavior without submitting the form. * @default true */ "submitOnEnter": boolean; /** * Visual indication of valid state */ "valid"?: boolean; /** * Phone number value */ "value"?: string; /** * Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */ "valueMissingMessage"?: string; } /** * Utility component, mostly used internally in other design system components, * for consistent presentation of text with optional associated tooltip. * Example * ``` * Email address * Full name * ``` */ interface RLabel { /** * Text of an additional marker */ "fieldIndicator"?: string; } /** * A single interactive list item with configurable leading icon, headline, description, trailing area, and support for nested child items. * Example * ```html * * * * * * * * * * ``` */ interface RListItem { /** * Indicates whether the list item is currently active (e.g., represents the current page). */ "active"?: boolean; /** * Defines the alignment style for the trailing text. */ "alignment"?: TrailingTextAlignment; /** * Checks the checkbox element. */ "check": () => Promise; /** * Validates the checkbox without triggering UI and returns a boolean indicating its validity. * @returns A boolean indicating whether the checkbox is valid. */ "checkValidity": () => Promise; /** * If true, renders a checkbox in the trailing slot (3rd slot). */ "checkbox"?: boolean; /** * Controls the checked state of the trailing checkbox. * @default false */ "checked": boolean; /** * Sets the indeterminate state of the checkbox element. */ "clearIndeterminate": () => Promise; /** * Secondary text displayed below the headline (2nd slot), used for additional details or context. */ "description"?: string; /** * If true, prevents user interaction with the list item and applies a disabled style. */ "disabled"?: boolean; /** * If true, adds a horizontal divider below the list item. */ "divider"?: boolean; /** * Determines whether the list item is expanded to show its subitems. It can be toggled programmatically or through user interaction. * @default false */ "expanded": boolean; /** * Specifies the `id` of the `` to which the element belongs */ "form"?: string; /** * Asynchronously retrieves the validity state of the checkbox. This method updates the internal validity state and message by calling `getValidityStateData` with the native element, and then returns an object containing the current validity state and message. * @returns A promise that resolves to an object containing the validity state and message. The object has two properties: - `state`: A string representing the validity state. - `message`: A string containing the validity message. */ "getValidityState": () => Promise<{ state: string; }>; /** * The main text or headline displayed in the text slot (2nd slot) of the list item. */ "headline"?: string; /** * Defines if the leading icon shall become hidden. */ "hideLeadingIcon"?: boolean; /** * If provided, renders the list item as a link using the tag with the given href attribute. */ "href"?: string; /** * Controls the indeterminate state of the trailing checkbox. * @default false */ "indeterminate": boolean; /** * Indicates that element is supports accessible interactions, like hover, focus, click, etc. * @remarks Avoid being used together with `checkbox={true}` as it creates nested interactive elements, violating WCAG accessibility guidelines. */ "interactive"?: boolean; /** * Indicate that validation has failed */ "invalid"?: boolean; /** * Specifies the name of the icon to display in the leading slot (1st slot) of the list item. */ "leadingIcon"?: IconName; /** * Defines an icon source to be presented in leading slot */ "leadingIconSrc"?: string; /** * Controls the name of the trailing checkbox, used for form submission. */ "name"?: string; /** * Specifies if element must be ignored during validation of the form elements */ "novalidate"?: boolean; /** * Controls the position of the trailing checkbox. * @default 'center' */ "position": ListItemCheckboxPosition; /** * Specifies if checkbox must be checked */ "required"?: boolean; /** * Removes focus from the checkbox element. */ "setBlur": () => Promise; /** * Sets focus on the checkbox element. */ "setFocus": () => Promise; /** * Sets the indeterminate state of the checkbox element. */ "setIndeterminate": () => Promise; /** * Toggles the checked state of the checkbox element */ "toggleChecked": () => Promise; /** * Method to toggle sub-items of the list-item */ "toggleSubitems": () => Promise; /** * Badge text displayed in the trailing slot (3rd slot), as an alternative to an icon or text. */ "trailingBadge"?: string; /** * Badge variant displayed in the trailing slot (3rd slot), as an alternative to an icon or text. */ "trailingBadgeVariant"?: BadgeVariant; /** * Specifies the name of the icon to display in the trailing slot (3rd slot) of the list item. */ "trailingIcon"?: IconName; /** * Defines an icon source to be presented in trailing slot */ "trailingIconSrc"?: string; /** * Text displayed in the trailing slot (3rd slot), as an alternative to an icon. */ "trailingText"?: string; /** * When enabled, the description is limited to a single line and truncated with an ellipsis if it overflows. */ "truncateDescription"?: boolean; /** * Unchecks the checkbox element. */ "uncheck": () => Promise; /** * Indicate that validation is successful */ "valid"?: boolean; /** * Controls the value of the trailing checkbox, used for form submission. */ "value"?: string; /** * Controls the style variation of the list item, such as regular or subitem. * @default 'list-item' */ "variant": ListItemVariant; } /** * Navigation control for moving between pages of content, with page number buttons, prev/next arrows, and configurable items-per-page options. * Example * ``` * * ``` */ interface RPagination { /** * UI: Arrows present/absent: * @default : true */ "arrows": boolean; /** * Label for Ellipsis stepper. Important to ensure accessibility for screen reader users. * @default 'Ellipsis indicating skipped pages' */ "ellipsisLabel": string; /** * Text to display after total results * @default 'results' */ "endText": string; /** * Label for First Page button. Important to ensure accessibility for screen reader users. * @default 'Go to the first page' */ "firstPageButtonLabel": string; /** * Amount of items to show per page; * @default : 5 */ "itemsPerPage": number; /** * Label for Items per page select. * @default 'Items per page' */ "itemsPerPageLabel": string; /** * Items per page options for dropdown. * @default [5, 10, 15, 20, 25, 50, 100] * @deprecated Use setItemsPerPageOptions(...) instead. This prop will be removed in the next major release. */ "itemsPerPageOptions": PaginationItemsPerPageOptions; /** * Label for Last Page button. Important to ensure accessibility for screen reader users. * @default 'Go to the last page' */ "lastPageButtonLabel": string; /** * Position of the list box * @default 'top' */ "listBoxPosition": PaginationListBoxPosition; /** * The maximum number of visible page buttons (excluding ellipsis steppers). * @default 10 */ "maxVisiblePages"?: number; /** * Text to display between currently shown results and total amount of results * @default 'of' */ "middleText": string; /** * Label for Next Page button. Important to ensure accessibility for screen reader users. * @default 'Go to the next page' */ "nextPageButtonLabel": string; /** * Current page number; * @default : 1 */ "pageActive": number; /** * Label for Page number buttons. Important to ensure accessibility for screen reader users. * @default 'Page' */ "pageLabel": string; /** * Label for Previous Page button. Important to ensure accessibility for screen reader users. * @default 'Go to the previous page' */ "previousPageButtonLabel": string; /** * UI: Result Line and select field present/absent; * @default : false */ "resultsLine": boolean; /** * Text to show in select * @default 'page' */ "selectText": string; /** * Sets available values for the items-per-page select. Prefer this API over the deprecated itemsPerPageOptions prop. */ "setItemsPerPageOptions": (options: PaginationItemsPerPageOptions) => Promise; /** * Text to show in beginning of resultLine; * @default : 'Showing' */ "startText": string; /** * Total amount of pages to select from; * @default : 1 */ "totalResults": number; /** * Allows selection between different pagination styles: minimized, standard, maximized; * @default : 'standart' */ "variant": PaginationVariant; } /** * A collapsible side navigation panel with expandable nav sections, can be collapsed and expanded. * Example * ``` * * Company logo * * * *
* Logout *
* * ``` */ interface RPanel { /** * A boolean property that indicates whether the navitems are active of not * @default false */ "active": boolean; /** * Collapse Panel */ "collapsePanel": () => Promise; /** * A boolean property that determines the collapsed state of the component. The default state is `false`. * @default false */ "collapsed": boolean; /** * Expand Panel */ "expandPanel": () => Promise; /** * A boolean property that indicates whether the component includes a footer * @default false */ "hasFooter": boolean; /** * A boolean property that indicates whether the component includes a header * @default false */ "hasHeader": boolean; /** * The `header` property is a string that specifies the header text. */ "header"?: string; /** * Aria-label text for collapse * @default 'Collapse panel' */ "labelCollapse": string; /** * Aria-label text for expand * @default 'Expand panel' */ "labelExpand": string; /** * Logo link */ "logoLink": string; /** * Expand/Collapse Panel */ "togglePanel": () => Promise; /** * Presentational style * @default 'visible' */ "variant": PanelVariant; } /** * A floating contextual overlay anchored to a trigger element, with headline, body content, and action slots. Supports auto or manual dismiss. * Example * ``` * * * * * * Here is some additional information about this topic. * * Got it * * * ``` */ interface RPopover { /** * Defines `aria-label` content for the dismiss button. Used for accessibility when dismiss button is present. */ "dismissAriaLabel"?: string; /** * Defines the behavior of the popover's dismissing. - `auto`: The popover can be dismissed by clicking outside or pressing Esc. - `manual`: The popover requires explicit user action to close. * @default "auto" */ "dismissMode": PopoverDismissMode; /** * Method to hide the popover. Closes the popover and emits hide event. * @returns Promise that resolves when the popover is hidden */ "hide": () => Promise; /** * Defines preferred placement horizontally relative to the trigger. - `left`: Align to the left of the trigger - `center`: Center align with the trigger - `right`: Align to the right of the trigger * @default "center" */ "horizontal": PopoverHorizontal; /** * Defines initial state of the popover visibility. * @default false */ "open"?: boolean; /** * Remove focus from all focusable elements within the popover. Calls setBlur on all child components and the host element. * @returns Promise that resolves to the popover instance for chaining */ "setBlur": () => Promise; /** * Set focus inside the popover to the most appropriate element. Priority order: 1. Dismiss button (if present) 2. Action element (if present) 3. Content element (if present) 4. Host element as fallback * @returns Promise that resolves to the popover instance for chaining */ "setFocus": () => Promise; /** * Method to show the popover. Opens the popover, positions it correctly, and sets focus to appropriate element. * @returns Promise that resolves when the popover is shown */ "show": () => Promise; /** * Toggle popover visibility. Shows the popover if hidden, hides it if shown. * @returns Promise that resolves when the toggle action is complete */ "toggle": () => Promise; /** * Defines the action that will be triggered when the trigger is clicked. - `toggle`: Toggle the popover open/closed state - `show`: Only show the popover - `hide`: Only hide the popover * @default "toggle" */ "triggerAction": PopoverTriggerAction; /** * Defines `aria-label` content for the popover trigger. Used for accessibility to describe the trigger button. */ "triggerAriaLabel"?: string; /** * Defines preferred placement vertically relative to the trigger. - `top`: Position above the trigger - `bottom`: Position below the trigger - `middle`: Position to the side of the trigger * @default "bottom" */ "vertical": PopoverVertical; } /** * Action button area rendered at the bottom of an `r-popover`. Place in the `action` slot of `r-popover`. * Example * ``` * * * Confirm * Cancel * * * ``` */ interface RPopoverAction { /** * Get all focusable elements within the popover content * @returns Array of focusable elements */ "getActiveElements": () => Promise; /** * Remove focus from the first focusable element within the popover action * @returns */ "setBlur": () => Promise; /** * Set focus on the first focusable element within the popover action * @returns The focused element or null if no element is found */ "setFocus": () => Promise; } /** * Body content area inside an `r-popover`. Place in the `content` slot of `r-popover`. * Example * ``` * * * Here is some additional context or information. * * * ``` */ interface RPopoverContent { /** * Get all focusable elements within the popover content * @returns Array of focusable elements */ "getActiveElements": () => Promise; /** * Remove focus from the first focusable element within the popover content * @returns */ "setBlur": () => Promise; /** * Set focus on the first focusable element within the popover content * @returns The focused element or null if no element is found */ "setFocus": () => Promise; } /** * Headline text displayed at the top of an `r-popover`. Place in the `headline` slot of `r-popover`. * Example * ``` * * Need help? * * ``` */ interface RPopoverHeadline { } /** * The trigger element that opens a connected `r-popover` on click or hover. Place in the `trigger` slot of `r-popover`. * Example * ``` * * * * * * ``` */ interface RPopoverTrigger { /** * Remove focus from the first focusable element within the trigger */ "setBlur": () => Promise; /** * Set focus on the first focusable element within the trigger * @returns The focused element or null if no element is found */ "setFocus": () => Promise; } /** * Displays a horizontal progress indicator showing the completion percentage of a task or process. * Example * ``` * * ``` */ interface RProgressBar { /** * Progress bar value * @default 0 */ "progress": number; /** * Sets string value for `aria-label` attribute (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) */ "rAriaLabel": string; } /** * A radio button is used to select a single option in a list. * Example * ``` * * Basic plan * * * Premium plan * All features included * * ``` */ interface RRadioButton { /** * 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. * @default false */ "autofocus"?: boolean; /** * When true the radio is selected */ "checked"?: boolean; /** * Additional directions for radio-button */ "description"?: string; /** * Prevents user interaction and applies disabled style */ "disabled"?: boolean; /** * Custom validation error message */ "error"?: string; /** * Specifies the `id` of the `` to which the element belongs */ "form"?: string; /** * Optional hint, visually presented under the radio button, giving additional context to the user */ "hint"?: string; /** * Icon name from the set */ "icon"?: IconName; /** * Apply validation error visual style */ "invalid"?: boolean; /** * Name of element (data) within a form */ "name": string; /** * Specifies if element must be ignored during validation of the form elements */ "novalidate"?: boolean; /** * Defines if an element shall be validated */ "required"?: boolean; /** * Selects the radio button element */ "select": () => Promise; /** * Blurs the radio button element */ "setBlur": () => Promise; /** * Sets focus on the radio button element */ "setFocus": () => Promise; /** * Unchecks all radio buttons in the associated group or form. */ "uncheckAll": () => Promise; /** * Value of element data within a form * @default this.slotTextValue */ "value": any; } /** * Supporting description slot for `r-radio-button`. Place inside the `description` slot of an `r-radio-button`. * Example * ``` * * Pro * Advanced features for power users * * ``` */ interface RRadioButtonDescription { } /** * Leading visual slot (e.g. icon) for `r-radio-button`. Place inside the `leading` slot of an `r-radio-button`. * Example * ``` * * * * * Credit card * * ``` */ interface RRadioButtonLeading { } /** * Title text slot for `r-radio-button`. Place inside the `title` slot of an `r-radio-button`. * Example * ``` * * Standard plan * * ``` */ interface RRadioButtonTitle { } /** * Trailing visual slot (e.g. badge or icon) for `r-radio-button`. Place inside the `trailing` slot of an `r-radio-button`. * Example * ``` * * Popular * * * * * ``` */ interface RRadioButtonTrailing { } /** * Groups `r-radio-button` elements under a shared label with keyboard navigation, validation. * Example * ``` * * Basic * Standard * Premium * * ``` */ interface RRadioGroup { /** * 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. * @default false */ "autofocus": boolean; /** * 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; /** * 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; /** * 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; /** * Specifies if the entire radio group is disabled * @default false */ "disabled"?: boolean; /** * Custom validation error message */ "error"?: string; /** * 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; /** * Specifies the `id` of the `` to which the element belongs */ "form"?: string; /** * Gets the current value of the radio group. * @returns The current value of the radio group. */ "getValue": () => Promise; /** * Optional hint, visually presented under the group of radio-buttons giving additional context to the user */ "hint"?: string; /** * Apply validation error visual style */ "invalid"?: boolean; /** * The text of the label rendered before the set of radio-buttons */ "label": string; /** * Specifies common `name` property that is passed to each `r-radio-button` */ "name"?: string; /** * Specifies if element must be ignored during validation of the form elements */ "novalidate"?: 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; /** * Validates the radio group and displays the validity state. */ "reportValidity": () => Promise; /** * Specifies if radio-button within group must be checked */ "required"?: boolean; /** * 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; /** * 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; /** * Blurs the radio button element. */ "setBlur": () => Promise; /** * 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; /** * Sets focus on the radio button element. */ "setFocus": () => Promise; /** * 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; /** * Apply validation success visual style */ "valid"?: boolean; /** * Displays currently selected value */ "value"?: string; /** * Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API */ "valueMissingMessage"?: string; /** * Controls the style variation of the radio buttons. * @default 'standard' */ "variant": RadioGroupVariant; } /** * A select allows the user to choose between a set of options. * Overall behavior is based on native `