@riverty/web-components 6.0.0 → 6.2.0

package/CHANGELOG.md

@@ -1,3 +1,47 @@
+## 6.2.0 (2026-02-10)
+
+### 🚀 Features
+
+- **illustration**: add new r-illustration component for displaying contextual SVG illustrations with theme support, responsive sizing, and accessibility features.
+- **input:** add `spellcheck` and `autocapitalize` props for better text editing control.
+- **button**: added new property `rAriaCurrent` to button component for better accessibility support.
+- **select**: fixed open/close keyboard navigation for better support in pagination component.
+- **stepper**: improved accessibility for stepper component by adding correct ARIA attributes and labels.
+- **stepper**: improve view for smaller screen devices.
+- **stepper**: improve color contrast for inactive steps and update styles.
+
+### 🩹 Fixes
+
+- **input**: hide trailing block when empty.
+- **tooltip**: Improved accessibility by adding ARIA attribute to support interactive components.
+- **pagination**: improved accessibility of pagination component by adding ARIA attributes and proper semantic HTML elements.
+- **alert**: aligned text vertically when no headline is provided.
+- **toast**: Added support for word breaking in toast messages to improve readability of long texts.
+- **popover**: improved accessibility by adding logic to handle interactive trigger element.
+- **radio-group:** fix nested radio-groups to support proper Tab navigation and event isolation.
+- **radio-group**: enhance accessibility by adding semantic elements.
+
+## 6.1.0 (2026-01-13)
+
+### 🚀 Features
+
+- **list-item**: Improved accessibility by adding proper ARIA role and attributes, switching to rem for scaling.
+- **panel**: Improved accessibility by adding proper ARIA role, labels, switching to rem for scaling.
+- **input**: Added enterkeyhint attribute support.
+
+  Add `enterkeyhint` prop to `r-input` component to hint the action label/icon on virtual keyboards. Supports values: `enter`, `done`, `go`, `next`, `previous`, `search`, `send`.
+- **icon-button**: Add rTabindex for keyboard navigation.
+- **icon**: Added new icon ("circle-slash") to Riverty icon kit.
+- **tabs**: Introduced new variants for Tabs component: "compact" and "expanded". New active tab border color: "standard" and "branded". Add support for icons in tab labels.
+- **toast**: Added new event `toastDismissed` that is emitted when the dismiss toast animation is complete and the element has fully disappeared from the view, for example by user, timeout or programmatically.
+- **input**: Added `inputmode` prop to provide better mobile keyboard experience.
+
+### 🩹 Fixes
+
+- **textarea**: Adjusted z-index to prevent stacking context issues
+- **toast**: Improved animation for toast appearance and disappearance.
+- **alert**: Now interactive elements are hidden when alert is dismissed.
+
 # 6.0.0 (2025-12-09)
 
 This major release removes deprecated component properties. See the [migration guide](https://designsystem.riverty.com/document/48#/-/migration-guide) for detailed steps.

package/custom-elements.json

@@ -287,6 +287,33 @@
             }
           ]
         },
+        {
+          "name": "r-aria-current",
+          "description": "Indicates the current item within a set of related elements.\nCorresponds to\n[native `aria-current` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)",
+          "values": [
+            {
+              "name": "date"
+            },
+            {
+              "name": "false"
+            },
+            {
+              "name": "location"
+            },
+            {
+              "name": "page"
+            },
+            {
+              "name": "step"
+            },
+            {
+              "name": "time"
+            },
+            {
+              "name": "true"
+            }
+          ]
+        },
         {
           "name": "r-aria-label",
           "description": "Sets string value for `aria-label` attribute\n(https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)"
@@ -689,6 +716,10 @@
           "name": "name",
           "description": "Name of the icon to display within the button."
         },
+        {
+          "name": "r-tabindex",
+          "description": "Defines the tabindex of the button for keyboard navigation."
+        },
         {
           "name": "size",
           "description": "Defines the size of the icon used within the button.",
@@ -740,13 +771,97 @@
         }
       ]
     },
+    {
+      "name": "r-illustration",
+      "description": {
+        "kind": "markdown",
+        "value": "Displays contextual SVG illustrations to enhance user experience with visual communication for states (empty, success, error, payment flows)."
+      },
+      "attributes": [
+        {
+          "name": "empty-image-title",
+          "description": "Accessibility: title for the image representing \"failed-to-load\" state"
+        },
+        {
+          "name": "empty-marker-title",
+          "description": "Accessibility: title for the marker representing \"failed-to-load\" state"
+        },
+        {
+          "name": "error-message",
+          "description": "Error message text to display when illustration fails to load"
+        },
+        {
+          "name": "max-width",
+          "description": "Maximum width constraint for responsive behavior"
+        },
+        {
+          "name": "min-width",
+          "description": "Minimum width constraint for responsive behavior"
+        },
+        {
+          "name": "name",
+          "description": "Name of illustration to select from the set"
+        },
+        {
+          "name": "svg-description",
+          "description": "Optional description element to be added inside the SVG for accessibility"
+        },
+        {
+          "name": "svg-title",
+          "description": "Optional title element to be added inside the SVG for accessibility"
+        },
+        {
+          "name": "theme",
+          "description": "Theme mode for illustration rendering",
+          "values": [
+            {
+              "name": "auto"
+            },
+            {
+              "name": "dark"
+            },
+            {
+              "name": "light"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "description": "Defines initial width of an illustration."
+        }
+      ]
+    },
     {
       "name": "r-input",
       "description": {
         "kind": "markdown",
-        "value": ""
+        "value": "<!-- markdownlint-disable MD024 MD060 -->"
       },
       "attributes": [
+        {
+          "name": "autocapitalize",
+          "description": "Controls automatic capitalization of text input on mobile devices.\n- `off` or `none`: No automatic capitalization\n- `on` or `sentences`: Capitalize first letter of each sentence (default for most text inputs)\n- `words`: Capitalize first letter of each word\n- `characters`: Capitalize all characters",
+          "values": [
+            {
+              "name": "characters"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "off"
+            },
+            {
+              "name": "on"
+            },
+            {
+              "name": "sentences"
+            },
+            {
+              "name": "words"
+            }
+          ]
+        },
         {
           "name": "autocomplete",
           "description": "Native `autocomplete` hint for browsers / password managers.",
@@ -784,6 +899,33 @@
           "name": "disabled",
           "description": "Disables the field (non-interactive, excluded from form submission)."
         },
+        {
+          "name": "enterkeyhint",
+          "description": "Hint for the action label/icon on the virtual keyboard's enter key.\nUse cases:\n- `enter`: Default, generic newline/submit action\n- `done`: Finishes current input session (e.g., last field in a form)\n- `go`: Navigates to URL input target (e.g., URL bar)\n- `next`: Advances to next input field in a sequence\n- `previous`: Goes back to previous input field\n- `search`: Submits a search query\n- `send`: Sends a message (e.g., chat, email)",
+          "values": [
+            {
+              "name": "done"
+            },
+            {
+              "name": "enter"
+            },
+            {
+              "name": "go"
+            },
+            {
+              "name": "next"
+            },
+            {
+              "name": "previous"
+            },
+            {
+              "name": "search"
+            },
+            {
+              "name": "send"
+            }
+          ]
+        },
         {
           "name": "error",
           "description": "Manual error message independent of native validation messages.\nWhen set, native validation messages are suppressed."
@@ -804,6 +946,36 @@
           "name": "hint",
           "description": "Optional contextual help text displayed beneath the field."
         },
+        {
+          "name": "inputmode",
+          "description": "Hint to the browser about which keyboard to display on mobile devices.",
+          "values": [
+            {
+              "name": "decimal"
+            },
+            {
+              "name": "email"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "numeric"
+            },
+            {
+              "name": "search"
+            },
+            {
+              "name": "tel"
+            },
+            {
+              "name": "text"
+            },
+            {
+              "name": "url"
+            }
+          ]
+        },
         {
           "name": "internal",
           "description": "When true, hides visual label & messages (for internal layout use; accessibility still preserved)."
@@ -872,6 +1044,10 @@
           "name": "required",
           "description": "Marks the field as required; failing to provide a value triggers `valueMissing`."
         },
+        {
+          "name": "spellcheck",
+          "description": "Controls browser spell-checking for text input.\nWhen true, enables spell-checking; when false, disables it.\nBrowser default behavior applies when not specified."
+        },
         {
           "name": "step",
           "description": "Step interval for numeric/date input types."
@@ -1429,6 +1605,10 @@
         "value": ""
       },
       "attributes": [
+        {
+          "name": "active",
+          "description": "Indicates whether the list item is currently active (e.g., represents the current page)."
+        },
         {
           "name": "alignment",
           "description": "Defines the alignment style for the trailing text.",
@@ -1524,18 +1704,34 @@
           "name": "arrows",
           "description": "UI: Arrows present/absent"
         },
+        {
+          "name": "ellipsis-label",
+          "description": "Label for Ellipsis stepper. Important to ensure accessibility for screen reader users."
+        },
         {
           "name": "end-text",
           "description": "Text to display after total results"
         },
+        {
+          "name": "first-page-button-label",
+          "description": "Label for First Page button. Important to ensure accessibility for screen reader users."
+        },
         {
           "name": "items-per-page",
           "description": "Amount of items to show per page"
         },
+        {
+          "name": "items-per-page-label",
+          "description": "Label for Items per page select."
+        },
         {
           "name": "items-per-page-options",
           "description": "Items per page options for dropdown"
         },
+        {
+          "name": "last-page-button-label",
+          "description": "Label for Last Page button. Important to ensure accessibility for screen reader users."
+        },
         {
           "name": "list-box-position",
           "description": "Position of the list box",
@@ -1552,10 +1748,22 @@
           "name": "middle-text",
           "description": "Text to display between currently shown results and total amount of results"
         },
+        {
+          "name": "next-page-button-label",
+          "description": "Label for Next Page button. Important to ensure accessibility for screen reader users."
+        },
         {
           "name": "page-active",
           "description": "Current page number"
         },
+        {
+          "name": "page-label",
+          "description": "Label for Page number buttons. Important to ensure accessibility for screen reader users."
+        },
+        {
+          "name": "previous-page-button-label",
+          "description": "Label for Previous Page button. Important to ensure accessibility for screen reader users."
+        },
         {
           "name": "results-line",
           "description": "UI: Result Line and select field present/absent"
@@ -1918,6 +2126,10 @@
           "name": "novalidate",
           "description": "Specifies if element must be ignored during validation of the form elements"
         },
+        {
+          "name": "parent-value",
+          "description": "For nested radio groups: specifies the parent radio button value that this nested group belongs to.\nWhen the parent group's value changes to a different value, this nested group will be automatically reset.\nThis ensures nested selections are only maintained when their parent context is active."
+        },
         {
           "name": "required",
           "description": "Specifies if radio-button within group must be checked"
@@ -2153,6 +2365,14 @@
           "name": "completed",
           "description": "Complete steps. Default value 0"
         },
+        {
+          "name": "completed-steps-label",
+          "description": "Label for completed steps for screen reader users."
+        },
+        {
+          "name": "label",
+          "description": "Label for the stepper for screen reader users."
+        },
         {
           "name": "total",
           "description": "Total number of steps. Used when no slot-based steps provided."
@@ -2178,6 +2398,10 @@
           "name": "icon",
           "description": "Defines an icon for the step. Optional."
         },
+        {
+          "name": "label",
+          "description": "Label for the step icon for screen reader users."
+        },
         {
           "name": "number",
           "description": "Defines the step number. Optional."
@@ -2245,7 +2469,40 @@
         "kind": "markdown",
         "value": ""
       },
-      "attributes": []
+      "attributes": [
+        {
+          "name": "border",
+          "description": "Border style of the active tab",
+          "values": [
+            {
+              "name": "branded"
+            },
+            {
+              "name": "standard"
+            }
+          ]
+        },
+        {
+          "name": "scroll-left-tooltip",
+          "description": "Tooltip visibility for left scroll button"
+        },
+        {
+          "name": "scroll-right-tooltip",
+          "description": "Tooltip visibility for left right button"
+        },
+        {
+          "name": "variant",
+          "description": "Visual variant of the tab list",
+          "values": [
+            {
+              "name": "compact"
+            },
+            {
+              "name": "expanded"
+            }
+          ]
+        }
+      ]
     },
     {
       "name": "r-textarea",