@riverty/web-components 5.7.0 → 6.0.0

package/CHANGELOG.md

@@ -1,3 +1,131 @@
+# 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
+
+- **toast**: Improved accessibility.
+
+  - Added new property `announced` to let screen readers announce the alert message.
+  - Applied new inverse design tokens to align with a new alert design.
+- **button**: New button color tokens for the active state have been added, providing more customisable styles.
+- **alert**: Success status has been removed.
+- Update toast and alert roles based on new introduced announced property.
+
+  - role="alert" to announce content automatically.
+  - role="region" to let users find content without interrupting flow (no automatic announce).
+- **select**: The `touched` and `dirty` states have been added for validation tracking.
+
+  - Solving the issue with `rChange` event emmited when interacting with component via API by adding `touched` and `dirty` states for validation tracking.
+  - Added `data-touched` and `data-dirty` attributes to `r-select` component that are set based on user interaction. The `data-touched` attribute is set when user focuses or clicks on the `r-select`, while `data-dirty` is set when user changes the `value`. These attributes enable better validation UX by distinguishing between pristine and modified states, preventing validation errors from showing on initial page load while ensuring validation stays active after user interaction.
+  - Updated select stories to include comprehensive "rChange Event Emission" story demonstrating how `rChange` events are controlled by the component's `dirty` state, with clear documentation of pristine vs dirty behavior.
+- **input-date**: Added min/max date range validation and dirty state tracking.
+
+  - Added `min` and `max` properties to `r-input-date` component for date range validation with custom error messages (`rangeUnderflowMessage` and `rangeOverflowMessage`). The `min` and `max` values automatically update when the date format changes to maintain consistency.
+  - Implemented `touched` and `dirty` state tracking with `data-touched` and `data-dirty` attributes that reflect user interaction state. The `data-touched` attribute is set when user focuses or interacts with the component, while `data-dirty` is set when user changes the value.
+  - Added `markAsPristine()` method to reset `touched` and `dirty` states without clearing the value, `isTouched()` method to query `touched` state, and `isDirty()` method to query `dirty` state.
+  - The `rChange` event now only emits on user interactions, not on programmatic value changes via `setValue()` or `setAttribute()`. These changes enable better validation UX by preventing validation errors from showing on initial page load while ensuring validation activates after user interaction.
+- **toast**: Improved component by updating default properties and adding new features.
+
+  - `dismissMode` default value have been set to manual.
+  - Introduced default leading icons per status.
+  - Added possibility to hide and show leadingIcon via `leadingIconVisible` property.
+- Added new checkValidity method to form components: input and input variants, select, textarea, checkbox, checkbox group, radio group.
+
+  This method validates component without triggering UI change and returns boolean value (true if it is valid, otherwise false).
+- **icon-button**: Removed border for hover and active states.
+
+### 🩹 Fixes
+
+- **popover**: Removed border from text button in popover action, and update dismiss button styles based on the reverse theme.
+- **icon**: Ellipsis vertical icon has been replaced with a new improved icon.
+- **button**: Updated active style to support not disabled link in active state.
+- **toast**: Removed border from text button in hover and active states, replaced icons for warning and error states.
+
 ## 5.7.0 (2025-11-05)
 
 ### 🚀 Features