@riverty/web-components 5.4.0 → 5.6.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## 5.6.0 (2025-10-23)
+
+### 🚀 Features
+
+- **input:** add autofocus property to input component
+- **icon:** ai icon added to Riverty icon set
+
+### 🩹 Fixes
+
+- **tooltip:** improve position recalculation for smaller windows
+- **tooltip:** change tooltip width to display cropped content
+- **tooltip:** improve positioning when placed in overflow containers
+- **input:** ensure autofocus behavior is applied on component connection
+
+
+## 5.5.0 (2025-10-13)
+
+### 🚀 Features
+
+- **input:** enhance setValue method to trigger validation and update reset logic
+- **input:** `type=email` + `pattern` for email with umlauts
+- **toast-group:** change it to scoped, change way of handling slot content change due to it being in a Light DOM
+- **list-item:** bold trailing text if alignment is top
+- **list-item:** `truncateDescription` property added
+- **list-item:** rendering condition for leading slot updated with inclusion of `hideLeadingIcon` property
+- **list-item:** add `hideLeadingIcon` prop to control visibility of leading icon
+
+### 🩹 Fixes
+
+- **toast, toast-group:** improve accessibility (adjusted `role`, `aria-hidden`, `aria-live`)
+- **list-item:** remove `text-decoration:none` from slotted anchor styles to avoid accessibility violation
+- **list-item:** `hideLeadingIcon` in render condition, not in css class
+- **dialog:** render header slot with initial empty header content
+
+
 ## 5.4.0 (2025-10-06)
 
 ### 🚀 Features

package/README.md

@@ -1,7 +1,7 @@
 # Riverty Design System: Web Components
 
-> Riverty Design System enables teams to efficiently deliver consistent user interfaces through a Riverty-aligned design and development toolkit that promotes reusability.
+> [Riverty](https://riverty.com/), your flexible Payment Companion. 25+ million users, 1+ billion secure transactions.
 
-→ [riverty.design](https://riverty.design/)
+Riverty Design System: a design and development toolkit tailor-made for Riverty teams and collaborators.
 
-[Component documentation](https://riverty.design/develop/components/) is continually updated on riverty.design.
+→ [designsystem.riverty.com](https://designsystem.riverty.com/)

package/custom-elements.json

@@ -5,7 +5,7 @@
       "name": "r-accordion",
       "description": {
         "kind": "markdown",
-        "value": "An accordion represents a list of expandable/collapsable content sections with corresponding headers.\n\nBy 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.\n\nEach content section must be wrapped in a `<r-accordion-item>` elements.\n\n[Docs](https://riverty.design/components/accordion)\n\nExample:\n\n```\n<r-accordion>\n  <r-accordion-item header=\"Economic health\">\n   <p>Economic health is a concept that …</p>\n  </r-accordion-item>\n</r-accordion>\n```"
+        "value": "An accordion represents a list of expandable/collapsable content sections with corresponding headers.\n\nBy 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.\n\nEach content section must be wrapped in a `<r-accordion-item>` elements.\n\n\nExample:\n\n```\n<r-accordion>\n  <r-accordion-item header=\"Economic health\">\n   <p>Economic health is a concept that …</p>\n  </r-accordion-item>\n</r-accordion>\n```"
       },
       "attributes": [
         {
@@ -328,7 +328,7 @@
       "name": "r-button",
       "description": {
         "kind": "markdown",
-        "value": "A button can be used by a user to trigger an action. Corresponds to, and is rendered as a,\n[native button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button).\n\n[Docs](https://riverty.design/components/button)"
+        "value": "A button can be used by a user to trigger an action. Corresponds to, and is rendered as a,\n[native button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)."
       },
       "attributes": [
         {
@@ -439,7 +439,7 @@
       "name": "r-checkbox",
       "description": {
         "kind": "markdown",
-        "value": "Checkboxes allow users to select none, one, or multiple items from a list.\n\nOverall behavior is based on native `<input type=\"checkbox\">`\n\n[Docs](https://riverty.design/components/checkbox)"
+        "value": "Checkboxes allow users to select none, one, or multiple items from a list.\n\nOverall behavior is based on native `<input type=\"checkbox\">`"
       },
       "attributes": [
         {
@@ -702,7 +702,7 @@
       "attributes": [
         {
           "name": "color",
-          "description": "Quick way to set display color to one of the\n[Riverty color tokens](https://riverty.design/tokens/#colors)"
+          "description": "Quick way to set display color to one of the\nRiverty color tokens"
         },
         {
           "name": "icon-aria-label",
@@ -762,7 +762,7 @@
       "name": "r-icon-button",
       "description": {
         "kind": "markdown",
-        "value": "An icon button is a button that contains only an icon and is used to trigger an action.\n\n[Docs](https://riverty.design/components/icon-button)"
+        "value": "An icon button is a button that contains only an icon and is used to trigger an action."
       },
       "attributes": [
         {
@@ -856,6 +856,10 @@
             }
           ]
         },
+        {
+          "name": "autofocus",
+          "description": "Automatically focus the input when it is first rendered.\nMirrors native `autofocus` attribute behavior. Avoid using multiple times per page."
+        },
         {
           "name": "bad-input-message",
           "description": "Custom message for `badInput` (conversion / parsing failure)."
@@ -1243,7 +1247,7 @@
         },
         {
           "name": "tooltip-icon-color",
-          "description": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the [Riverty color tokens](https://riverty.design/tokens/#colors)"
+          "description": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens"
         },
         {
           "name": "valid",
@@ -1352,7 +1356,7 @@
         },
         {
           "name": "tooltip-icon-color",
-          "description": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the [Riverty color tokens](https://riverty.design/tokens/#colors)"
+          "description": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens"
         },
         {
           "name": "valid",
@@ -1445,7 +1449,7 @@
         },
         {
           "name": "tooltip-icon-color",
-          "description": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the [Riverty color tokens](https://riverty.design/tokens/#colors)"
+          "description": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens"
         },
         {
           "name": "valid",
@@ -1482,7 +1486,7 @@
         },
         {
           "name": "tooltip-icon-color",
-          "description": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the [Riverty color tokens](https://riverty.design/tokens/#colors)"
+          "description": "_DEPRECATED_ (This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens"
         },
         {
           "name": "tooltip-position",
@@ -1546,6 +1550,10 @@
           "name": "headline",
           "description": "The main text or headline displayed in the text slot (2nd slot) of the list item."
         },
+        {
+          "name": "hide-leading-icon",
+          "description": "Defines if the leading icon shall become hidden."
+        },
         {
           "name": "href",
           "description": "If provided, renders the list item as a link using the <a> tag with the given href attribute."
@@ -1574,6 +1582,10 @@
           "name": "trailing-text",
           "description": "Text displayed in the trailing slot (3rd slot), as an alternative to an icon."
         },
+        {
+          "name": "truncate-description",
+          "description": "When enabled, the description is limited to a single line and truncated with an ellipsis if it overflows."
+        },
         {
           "name": "variant",
           "description": "Controls the style variation of the list item, such as regular or subitem.",
@@ -2022,7 +2034,7 @@
         },
         {
           "name": "tooltip-icon-color",
-          "description": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the [Riverty color tokens](https://riverty.design/tokens/#colors)"
+          "description": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens"
         },
         {
           "name": "valid",
@@ -2058,7 +2070,7 @@
       "name": "r-select",
       "description": {
         "kind": "markdown",
-        "value": "A select allows the user to choose between a set of options.\n\nOverall behavior is based on native `<select>`\n\n[Docs](https://riverty.design/components/select)"
+        "value": "A select allows the user to choose between a set of options.\n\nOverall behavior is based on native `<select>`"
       },
       "attributes": [
         {
@@ -2198,7 +2210,7 @@
         },
         {
           "name": "tooltip-icon-color",
-          "description": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the [Riverty color tokens](https://riverty.design/tokens/#colors)"
+          "description": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nChange color of an icon that triggers tooltip to one of the Riverty color tokens."
         },
         {
           "name": "trailing-icon",
@@ -2568,7 +2580,7 @@
         },
         {
           "name": "tooltip-icon-color",
-          "description": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)   * Specifies the color of the tooltip icon\nfrom [Riverty color tokens](https://riverty.design/tokens/#colors) \ndisplayed alongside the label."
+          "description": "_DEPRECATED_ (Use popover slot instead. This property will be removed in November 2025 release.)\nSpecifies the color of the tooltip icon from Riverty color tokens.\nDisplayed alongside the label."
         },
         {
           "name": "valid",
@@ -2637,7 +2649,7 @@
         },
         {
           "name": "leading-icon",
-          "description": "Specifies an optional icon for the leading slot of the dialog.\nFor options check [Riverty Icons](https://riverty.design/components/icon)"
+          "description": "Specifies an optional icon for the leading slot of the dialog."
         },
         {
           "name": "open",
@@ -2681,7 +2693,7 @@
         },
         {
           "name": "trailing-icon",
-          "description": "Specifies an optional icon for the trailing slot of the dialog.\nFor options check [Riverty Icons](https://riverty.design/components/icon)"
+          "description": "Specifies an optional icon for the trailing slot of the dialog."
         }
       ]
     },