@riverty/web-components 5.3.0 → 5.5.0

package/CHANGELOG.md

@@ -1,3 +1,50 @@
+## 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
+
+- **list-item:** `href` property is now reflected
+- **list-item:** add `description` property, deprecate `subtext` property
+- **list-item:** add `role="link"` attribute for disabled state
+- **list-item:** add `aria-disabled="true"` for disabled state
+- **input-phone-number:** add `readonly` property and related styles, update documentation
+- **input-password:** add `readonly` property and related styles, update documentation
+- **input-date:** add `readonly` property and related styles, update documentation
+- **input-code:** add `readonly` property and related styles, update documentation
+- **input:** add `readonly` property and related styles, update documentation
+- **textarea:**  add `readonly` property and related styles, update documentation
+
+### 🩹 Fixes
+
+- **dialog:** improve a11y in dialog component, convert px to rem for media queries, width, height
+- **list-item:** item rendering attributes moved to an object
+- **list-item:** improve disabled state visual accessibility (opacity, divider and icon color)
+- **input-phone-number:** prevent input handling when `readonly` property is set
+- **toast:** align icon with heading
+- **list-item:** leading icon color consistent across states and variants
+- **list-item:** change divider color from `border-softer` to `border-soft`
+- **list-item:** improve divider selector to handle explicit false value
+
+
 ## 5.3.0 (2025-09-19)
 
 ### 🚀 Features
@@ -22,7 +69,6 @@
 - **select:** update width after rendering from an invisible state [DSYS-1564]
 - **select:** add ariaActiveDescendantElement for Screen Reader Shadow DOM support.
 - **select:** adjust position based on available space. [DSYS-1559]
-- **theming:** lint replace empty function with jest mock in StyleObserver instantiation [DSYS-1551]
 - **toast:** change `open` prop default state to `true`; change css variable name from `--height` to `--r-toast--host--height` [DSYS-1551]
 - **toast:** update documentation for default values in prop comments [DSYS-1551]
 - **toast:** improve accessibility by updating role and aria attributes [DSYS-1551]

package/custom-elements.json

@@ -976,6 +976,10 @@
           "name": "range-underflow-message",
           "description": "Custom message for `rangeUnderflow`."
         },
+        {
+          "name": "readonly",
+          "description": "Read-only mode (mirrors native `readonly`): value cannot be changed by the user,\nbut the field can still receive focus, be selected, and be submitted with a form."
+        },
         {
           "name": "required",
           "description": "Marks the field as required; failing to provide a value triggers `valueMissing`."
@@ -1128,6 +1132,10 @@
           "name": "novalidate",
           "description": "Specifies if element must be ignored during validation of the form elements."
         },
+        {
+          "name": "readonly",
+          "description": "Read-only mode (mirrors native `readonly`): value cannot be changed by the user,\nbut the field can still receive focus, be selected, and be submitted with a form."
+        },
         {
           "name": "required",
           "description": "Whether the input is required"
@@ -1217,6 +1225,10 @@
           "name": "novalidate",
           "description": "Specifies if element must be ignored during validation of the form elements"
         },
+        {
+          "name": "readonly",
+          "description": "Makes the date inputs read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)."
+        },
         {
           "name": "required",
           "description": "Specifies that an input is required/must be filled out"
@@ -1314,6 +1326,10 @@
           "name": "placeholder",
           "description": "Specifies a short hint that describes the expected value of a input"
         },
+        {
+          "name": "readonly",
+          "description": "Makes the input read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)."
+        },
         {
           "name": "required",
           "description": "Specifies that an input is required/must be filled out"
@@ -1411,6 +1427,10 @@
           "name": "novalidate",
           "description": "Specifies if element must be ignored during validation of the form elements"
         },
+        {
+          "name": "readonly",
+          "description": "Makes the date inputs read-only: users can focus and copy the value,\nbut cannot modify it (value still submitted with the form unlike disabled)."
+        },
         {
           "name": "required",
           "description": "Specifies that phone number value is required"
@@ -1506,6 +1526,10 @@
             }
           ]
         },
+        {
+          "name": "description",
+          "description": "Secondary text displayed below the headline (2nd slot), used for additional details or context."
+        },
         {
           "name": "disabled",
           "description": "If true, prevents user interaction with the list item and applies a disabled style."
@@ -1520,7 +1544,11 @@
         },
         {
           "name": "headline",
-          "description": "The main text or title displayed in the text slot (2nd slot) of the list item."
+          "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",
@@ -1536,7 +1564,7 @@
         },
         {
           "name": "subtext",
-          "description": "Secondary text displayed below the headline (2nd slot), used for additional details or context."
+          "description": ""
         },
         {
           "name": "trailing-icon",
@@ -1550,6 +1578,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.",
@@ -2482,6 +2514,10 @@
           "name": "placeholder",
           "description": "Specifies a short hint that describes the expected value of the `<textarea>`, \ndisplayed when it is empty."
         },
+        {
+          "name": "readonly",
+          "description": "Indicates whether the `<textarea>` is read-only, allowing focus and text selection\nwhile preventing the user from modifying its value."
+        },
         {
           "name": "required",
           "description": "Indicates that the `<textarea>` must be filled out \nbefore submitting the form."
@@ -2516,7 +2552,7 @@
         },
         {
           "name": "show-counter",
-          "description": "Specifies if the character counter should be visible."
+          "description": "Specifies if the character counter should be visible.\n\nNote: The counter will only be rendered when a `maxlength` value is provided."
         },
         {
           "name": "show-valid",
@@ -2585,7 +2621,7 @@
         },
         {
           "name": "dismiss-mode",
-          "description": "",
+          "description": "Defines the behavior of the component's dismissing.\n- `auto`: The component will be dismissed automatically after number of ms set by `delay` property.\n- `manual`: The component requires explicit user action to close.",
           "values": [
             {
               "name": "auto"