@riverty/web-components 5.8.0 → 6.1.0

package/CHANGELOG.md

@@ -1,3 +1,110 @@
+## 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.
+
+### 🚀 Features
+
+- **input**: Fixed validation behavior to respect touched state and improved form reset handling.
+
+  Updated validation logic to only show validation markers and error messages after a field has been touched (focused and blurred) or form submission is attempted. This prevents premature validation warnings on pristine required fields and provides better user experience.
+- **checkbox**: Added `autofocus` property for automatic focus on mount.
+
+  Added new `autofocus` property to r-checkbox component that automatically focuses the checkbox when the component is mounted. The property follows browser standard behavior where only one element per page should have autofocus enabled. When set to true, the checkbox receives focus using the existing `setFocus()` method within a microtask to ensure proper timing after component initialization.
+- **alert**: A default icon has been added per status. It's now possible to show/hide leadingIcon via `leadingIconVisible`.
+- **input-password**: Added password strength validation attributes
+
+  Added `minlength`, `maxlength`, and `pattern` props to r-input-password component with corresponding custom error messages (`tooShortMessage`, `tooLongMessage`, `patternMismatchMessage`). This enhancement enables comprehensive password strength validation by:
+  - `minlength`: Enforces minimum character length requirements (e.g., 8, 12, or 16 characters)
+  - `maxlength`: Prevents excessively long passwords and enforces maximum limits (e.g., 128 characters)
+  - `pattern`: Validates password strength using regular expressions for requirements like uppercase letters, lowercase letters, numbers, and special characters.
+- **radio-button**: Added `autofocus` property for automatic focus on mount.
+
+  Added new `autofocus` property to r-radio-button component that automatically focuses the radio button when the component is mounted. The property follows browser standard behavior where only one element per page should have autofocus enabled. When set to true, the radio button receives focus using the existing `setFocus()` method within a microtask to ensure proper timing after component initialization.
+- **radio-group**: Added `autofocus` prop to automatically focus first enabled radio button on mount.
+
+  Added new `autofocus` boolean prop (default: false) to r-radio-group component. When set to true, the component automatically focuses the first enabled radio button in the group on mount. If a radio button is already selected, it will focus that button; otherwise, it focuses the first enabled radio button. The autofocus functionality is implemented using the existing `setFocus()` method called within `queueMicrotask` in `componentDidLoad()`.
+- **input**: Added touched and dirty state tracking
+
+  Added `touched` and `dirty` state tracking to r-input component with corresponding methods (`isTouched()`, `isDirty()`, `markAsPristine()`). This enhancement enables developers to track user interaction and value changes for improved form handling:
+  - `touched`: Indicates whether the user has interacted with the input (via input events or blur)
+  - `dirty`: Indicates whether the value has been changed by the user (excludes programmatic changes)
+  - `isTouched()`: Returns the current touched state
+  - `isDirty()`: Returns the current dirty state
+  - `markAsPristine()`: Resets both touched and dirty states to false
+  - `data-touched` and `data-dirty` attributes are exposed on the host element for CSS styling
+  These states are automatically reset on form reset and are not affected by programmatic value changes (via `setValue()` or direct property assignment).
+- **input-password**: Added Safari-specific password rules support.
+
+  Added `passwordrules` attribute to r-input-password and r-input components to support Safari's strong password generation feature. This Safari-specific attribute allows developers to define password requirements (minlength, required character types like lower, upper, digit, special) that Safari's password manager uses to generate compliant strong passwords. The attribute is ignored by non-Safari browsers.
+  Added comprehensive e2e tests to verify the passwordrules attribute is properly set on both optional and required password inputs. Updated Storybook documentation with examples and links to Apple's password autofill customization guide.
+- **input-password**: Added password-specific autocomplete support for enhanced browser integration.
+
+  Added `autocomplete` prop with password-specific values ('current-password', 'new-password', 'off') to r-input-password component. This feature improves browser password manager integration by:
+  - 'current-password': Enables password suggestions for login forms
+  - 'new-password': Triggers password generation and saving for registration/password change forms  
+  - 'off': Disables autofill for sensitive administrative contexts
+  The autocomplete attribute is properly passed through to the native HTML input element for seamless browser password manager compatibility across Safari, Chrome, Firefox, and Edge. Updated Storybook with comprehensive examples demonstrating all three use cases and browser integration patterns.
+- **input-password**: Added `rVisibilityChange` event for password visibility toggle tracking.
+
+  Added new `rVisibilityChange` event to r-input-password component that emits whenever the password visibility is toggled. Event payload includes `{ element: HTMLRInputPasswordElement, visible: boolean }`. The event fires for both user-triggered actions (clicking the eye icon) and programmatic method calls (`showPassword()`, `hidePassword()`, `toggleShow()`).
+- **input-code**: Added OTP autocomplete support for SMS autofill.
+
+  Added three new configurable props to r-input-code component to enable SMS OTP autofill on iOS and Android:
+  - `inputmode` (default: 'numeric') - Controls the virtual keyboard type on mobile devices
+  - `enterkeyhint` (default: 'done') - Specifies the action label for the enter key
+  - `autocomplete` (default: 'one-time-code') - Enables SMS OTP autofill functionality
+- **input-code**: Added segment control methods for programmatic manipulation.
+
+  Added three new public methods to r-input-code component for fine-grained control over individual segments:
+  - `focusSegment(index)` - Programmatically focuses a specific segment by zero-based index (0 to length-1). Automatically selects the segment content if present. Includes bounds checking and validation.
+  - `getSegmentValue(index)` - Retrieves the value of a specific segment by zero-based index. Returns a single character string or empty string if the segment is empty. Includes bounds checking and validation.
+  - `setSegmentValue(index, value)` - Sets the value of a specific segment by zero-based index. Truncates multi-character values to the first character. Includes bounds checking and validation.
+
+### 🩹 Fixes
+
+- **dialog**: Fix footer rendering issues when text content is dynamically set.
+- **textarea**: Remove unused `optional` and `optionalText` properties.
+
+### ⚠️  Breaking Changes
+
+- **label**: Remove deprecated `tooltip`, and all related properties.
+- **select**: Remove deprecated `tooltip`, `validMessage`, `optional`, `leadingIcon`, and `trailingIcon` properties, and all related ones.
+- **radio-group**: Removed support for `tooltip` and `validMessage`, and all related properties.
+- **input-phone-number**: Remove deprecated `tooltip`, and all related properties.
+- **input-password**: Remove deprecated `tooltip`, and all related properties.
+- **input-date**: Remove deprecated `tooltip`, and all related properties.
+- **list-item**: Removed deprecated `subtext` property and slot.
+- **input**: Remove deprecated `tooltip`, `validMessage`, `optional`, `icon` properties, and all related ones.
+- **checkbox**: Removed deprecated `showValid` and `validMessage` properties.
+- **checkbox-group**: Removed deprecated `showValid` and `validMessage` properties.
+- **popover**: Removed deprecated `size` and `containerAriaLabel` properties.
+- **textarea**: Removed support for `tooltip` and `validMessage`, and all related properties.
+- **toast**: Removed deprecated property `dismissible`. Use `dismissMode="manual"` instead.
+- **accordion-item**: Removed deprecated component. Use `accordion`, `accordion-trigger`, `accordion-panel`, and `accordion-section` components instead.
+- **accordion-trigger**: Removed deprecated properties for leading and trailing icons, use `leading-icon` and `icon` slot instead (use `icon-expanded` and `icon-collapsed` slots for splitted icons).
+- **accordion**: Removed deprecated `small` and `large` size variants, only `s` and `l` are supported now.
+
 ## 5.8.0 (2025-11-19)
 
 ### 🚀 Features