## 6.5.0 (2026-03-26)

### 🚀 Features

- **dialog**: update size of close button to `m`.
- **input-code**: show error message when the component is loaded with invalid state.
- **input-date**: show error message when the component is loaded with invalid state.
- **input-password**: show error message when the component is loaded with invalid state.
- **input-phone-number**: show error message when the component is loaded with invalid state.
- **list-item**: add support of checkbox in the trailing slot, add new properties to control the checkbox state and validity.
- **checkbox-group**: label slot for popover added
- **alert**: add a new `delayMs` property to specify the delay in milliseconds, deprecate the existing `delay` property which was in seconds.

### 🩹 Fixes

- **form-elements**: remove focusing on element when interacting with popover.
- **input-code**: fix support of `fullWidth` property. The component should now take the full width of its container when the `fullWidth` property is set to `true`.
- **radio-group**: ensure props (name, required, etc.) are passed only to sibling r-radio-button elements in the same r-radio-group (exclude nested groups).

## 6.4.0 (2026-03-12)

### 🚀 Features

- **alert**: deprecate `rClickAlertTrailingIcon` event and replace it with a new `rAlertDismiss` event for better clarity and to match the purpose of the event.
- **alert**: fix typo in `leadingIcon` prop comment.
- **alert**: add a new `rAlertDismissed` event, a new `dismiss` method, and a new `delayBeforeRemoval` property to improve dismiss functionality.
- **alert**: add new `dismissMode` property to control component dismiss behavior.
- **alert**: add a new `rAlertHide` event, which is emitted when the alert is hidden from the view, but not removed from the DOM.
- **alert**: add new property `open`, and new methods (`hide()`, `show()`, `toggle`) to control the visibility of the component.
- **alert**: add a new `rAlertShow` event, which is emitted when the alert becomes visible.
- **input**: add support for `date` type.
- **select**: add new `rFocus` and `rBlur` events to the component, which are emitted when the component receives or loses focus, respectively.
- **textarea**: add native attribute passthrough
- **textarea**: add new methods `getSelectionDirection`, `getTextLength`, `getWillValidate`, `getDefaultValue`, and `getValidity`. New events: `rFocus`, `rBlur`.
- **textarea**:  add events: `rSelect`, `rBeforeInput`; add methods: `getSelectionEnd()`, `getSelectionStart()`, `select()`
- **alert**: clear the delay timer when the component is disconnected from the DOM.

## 6.3.1 (2026-03-05)

### 🩹 Fixes

- fix: include all missed files in the patched packages

## 6.3.0 (2026-03-04)

### 🚀 Features

- **badge**: added css variables for the content and `::part()` support to give an ability to provide styles.
- **input-code**: add `rComplete` event (alias `r-complete`) that fires when all segments are filled with values. Event payload: `{ value: string, isComplete: boolean }`. The event fires only once per completion to avoid redundant triggers on every keystroke when the input is complete.
- **input**: add dynamic passthrough for native HTML input attributes. 
- **tooltip**: dialog layer is used for position
- **storybook**: add comprehensive documentation templates (anatomy, do/don't, grouping) and alert component stories with improved styling and layout.
- **tests**: improve button and tabs E2E tests for better reliability and accuracy.
- **toast**: prevent emitting dismiss event if component is disconnected from DOM. Also clear pending timers on disconnection to prevent events from firing after component removal.
- **input-phone-number**: added new message `invalidPhoneNumberMessage` to display when phone number is not valid.
- **form components**: added `setCustomValidity` method to form components to validate an element, and display provided message in case value is invalid.
- **r-input**: Added native events support to r-input component
- **pagination**: add property watchers (`@Watch`) to handle pagination state changes more efficiently, replacing the `componentDidUpdate` lifecycle method for better performance and reactivity.

### 🩹 Fixes

- **r-input**: fixed TypeError when using type="number" with null value by adding null checks in handleTypeChange and validEmailPattern getters. Null is a valid value for native HTML number input.
- **tooltip**: add configurable white-space and normalize style token fallbacks
- **toast-group**: change from scoped to shadow DOM to fix slot functionality

  **toast**: improve animation performance and smoothness

## 6.2.1 (2026-02-12)

### 🩹 Fixes

- **illustration**: fix import of components styles to support stencil-based projects.

## 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.

### 🚀 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

- Add dependencies to avoid problems for Stencil-based projects

  Addresses a problem for projects using Stencil, where using any of the following components could cause build errors: popover, select, input-date, input-phone. Reason was that these components imported dependencies (dayjs, phone, and style-observer) that were automatically bundled - but not for the special collection distribution variant used by Stencil.

### 🩹 Fixes

- **input-password**: Improve setValue method to handle readonly and validate input when new value is set
- **input**: Emit value only when user interacts with component
- **toast**: Replace aria-label attribute with label property for dismiss button to remove a11y automated error

## 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

- **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

- **badge:** add support for icon slot with a default icon per variant, create a new property to hide icon [DSYS-1510]
- **select:** add combobox functionality to filter options and update related documentation [DSYS-1557]
- **select:** show leading icon of the option [DSYS-1491]
- **select:** readonly prop added [DSYS-1484]
- **toast:** add dismissable property with deprecation notice in documentation [DSYS-1551]
- **toast:** add deprecated dismissable prop with deprecation notice [DSYS-1551]
- **toast:** add dismissTime prop and update event names for toast events [DSYS-1551]
- **toast:** add toggle method to control visibility of the toast, hidden prop to set initial toast state [DSYS-1551]
- **toast:** emit events on toastReveal, toastHide, toastDismiss when methods called [DSYS-1551]


### 🩹 Fixes

- **dependencies:** build using Stencil v4.36.3
- **icon-button:** add aria-label for better screen reader support [DSYS-1551]
- **popover:** deprecate unused property (containerAriaLabel) [DSYS-1456]
- **select:** add default case to keydown handler and improve code formatting [DSYS-1566]
- **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]
- **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]
- **toast:** rename 'hidden' to 'shown' to resolve reserved name linting issue; storybook logging events improved [DSYS-1551]

## 5.2.2 (2025-09-09)

### 🩹 Fixes

- **input-phone-number:** hide validation mark when field is empty [DSYS-1550]
- **select:** reveal popover prevented by revealing listbox [DSYS-1549]

## 5.2.1 (2025-09-05)


### 🩹 Fixes
- **input:** initialize validMarker to false and remove unused validation icon

## 5.2.0 (2025-09-05)

### 🚀 Features

- **input, select:** reduce height of the field to 44px [DSYS-1477]
- **input:** deprecate validmessage property. [DSYS-1494]
- **input-code:** remove validation message and valid marker property from input code, phone number and password [DSYS-1488]
- **icon:** 2 new icons -- paperclip2 and sign-at. [DSYS-1489]
- **icon:** add pen-disabled icon. [DSYS-1535]
- **storybook:** upgrade storybook to 9.1 and rename some input variants properties [DSYS-1539]

### 🩹 Fixes

- **tabs:** add focus style to tab panel. [DSYS-1521]
- **button:** change height, font-size to rem. [DSYS-1534]
- **select:** keyboard navigation support according to [w3c](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/) [DSYS-1336]
- **popover:** position calculation bugs [DSYS-1439]


## 5.1.1 (2025-08-15)

### 🩹 Fixes

- **popover:** middle position left-right switch [DSYS-1466]

## 5.1.0 (2025-08-15)


### 🚀 Features

- **accordion:** deprecate icon in leading slot, icon position, trigger icons. [DSYS-1450]


### 🩹 Fixes

- **popover:** middle position left-right switch [DSYS-1466]
- **input:** remove predefined min-width from input and its variants. [DSYS-1467]


# 5.0.1 (2025-08-07)

### ⚠️  Breaking Changes
- **input:** password reveal/conceal functionality removed (use **input-password** instead)
- **select:** `option` and `trailingIcon` props deprecated

### 🚀 Features

- **input-phone-number:** new component [DSYS-1395]
- **input-password:** new component [DSYS-1401]
- **input-date:** new component [DSYS-1399]
- **select:** `fieldIndicator` prop added, `label` prop required [DSYS-1436]
- **popover:** `vertical` and `horizontal` props added to control preferred position [DSYS-1460]


### 🩹 Fixes

- **checkbox:** checkbox should not be changed in disabled state [DSYS-1462]
- **input-code:** focus moves to the last input [DSYS-1463]
- **select:** change select by changing `value` attribute [DSYS-1458]

# 4.0.0 (2025-07-11)


### 🚀 Features

- **popover-action:** default r-button `size` and `variant` applied automatically

- **textarea:** applied a11y fixes, add new show counter, character limit reached properties. [DSYS-1245]

- ⚠️  **checkbox:** updates according to Figma [DSYS-1407]

- **icon:** set icon name. [DSYS-1397]

- **r-input-code:** add component with validation and accessibility features [DSYS-1400]

- **input:** type password reveal-conceal methods and UI [DSYS-1401]


### 🩹 Fixes

- **icon-button:** add default color variable for icon button

- **popover-headline:** CSS typo

- **popover-content:** inverse theme awareness

- **popover-action:** inverse theme awareness

- **popover-dismiss:** icon button should not have contained style

- **popover-headline:** inverse theme awareness

- **popover-content:** prevent slotted content extra vertical space

- **popover:** correct gap between content elements

- **popover-action:** add inverse-specific button style

- **tooltip:** position of the tooltip box

- **radio-button, radio-group:** set slot display to contents

- **input:** unconditional label rendering (label is required) [DSYS-1441]

- **accordion:** tabbing inside collapsed panel issue [DSYS-1243]


### ⚠️  Breaking Changes

- **checkbox:** checkbox new view (block, paddings, focus)

# 3.0.0 (2025-06-09)

### 🚀 Features

- **button:** new border color in hover state [DSYS-1423]
- **popover:** new internal components structure [DSYS-1425]
- **button:** text-link variant, accessibility fixes [DSYS-1426]
- **icon:** add variant property and styles for button types [DSYS-1428]


### 🩹 Fixes

- add outline to focus styles across components [DSYS-1380]
- **accordion-panel:** fix incompatibility with bootstrap [DSYS-1424]
- **button:** unnamed slot content does not render in safari [DSYS-1264]
- **r-radio-button:** display mode for unnamed slot updated [DSYS-1265]
- **icon-button:** support slot-based icon [DSYS-1427]
- **checkbox, textarea:** update border color to use new soft variable
- **checkbox:** opacity handling for disabled state
- **toast:** add reflect property to status and headline props [DSYS-1421]

### ⚠️  Breaking Changes

- ⚠️  **popover:** new internal components structure for enhanced accessibility using standard Popover API [DSYS-1425]

# 2.0.0 (2025-05-19)

With this release, we are re-committing to following semantic versioning. So while the version is "2.0" it is not a huge change to the whole package. It simply means that at least one change needs your attention when upgrading.

### 🚀 Features

- ⚠️  **radio-button:** improve structure [DSYS-1413]

### 🩹 Fixes

- **accordion:** hide accordion panel when collapsed.
- **input:** accessibility fixes, add markerText, deprecate icon props [DSYS-1402]
- **tooltip:** does not receive focus twice with interactive components [DSYS-1422]
- **dialog:** open dialog by enter [DSYS-1416]

### ⚠️  Breaking Changes

- ⚠️  **radio-button:** improve structure [DSYS-1413]

## 1.16.0 (2025-04-22)

### 🚀 Features
- **skip-link:** new skip-link component [DSYS-1351]
- **radio-group, radio-button, label:** enhance radio button functionality with subtext, icon props, and new events; update styles and documentation [DSYS-1238]
- **icon-button:** new icon-button component [DSYS-1182]

### 🩹 Fixes
- **input:** when focused hitting enter shall submit the form [DSYS-1280]
- **button:** Storybook updates and minor fixes in Button [DSYS-1292]
- **select:** remove filter functionality and related documentation [DSYS-1340]
- **input, select, textarea:** update placeholder color [DSYS-1342]
- **input:** make label prop required and update documentation [DSYS-1341]
- **select:** accessibility-related changes, aria-hidden to aria-disabled, aria-describedby for messages, aria-required and aria-invalid for host, set aria-activedescendant and ensure id for selected option [DSYS-1337]

## 1.15.0 (2025-03-28)

### 🚀 Features
- **button:** Button Updates [DSYS-1302]

### 🩹 Fixes
- **checkbox:** name attribute not reflecting when element renders
- **icons:** fix the color of the three new icons [DSYS-1304]
- **panel:** active link is now visible in the viewport after page load [DSYS-1295]
- **select:** Restore default behavior of r-select to select first option [DSYS-1301]

## 1.14.0 (2025-03-21)

### 🚀 Features
- **icon:** Add three new icons (house-key-access, recycle-bin-1, webhook) [DSYS-1298]
- **pagination:** Restyling and new functionality of pagination component [DSYS-788]

### 🩹 Fixes
- Cursor appearance [DSYS-1256]
- **icon:** Support width and height for icon container [DSYS-1291]

## 1.13.0 (2025-03-10)

### 🚀 Features
- **select:** Methods added for value manipulation and validation [DSYS-1252]
- **radio-group:** Methods added for value manipulation and validation [DSYS-1266]
- **textarea:** Methods added for value manipulation and validation [DSYS-1253]

## 1.2.0 (2025-02-28)

### 🚀 Features
- **hin, toast:** update color token values [DSYS-1152]
- **radio-button:** add methods for focus, blur, and selection [DSYS-1251]


### 🩹 Fixes
- **dialog:** max-height for dialog sizes and adjust height property [DSYS-1254]
- **label:** remove aria-label from tooltip in label.


## 1.11.0 (2025-02-18)

### 🚀 Features
- **checkbox:** support native methods through API [DSYS-1241]
- **button:** support native methods through API [DSYS-1240]

## 1.10.0 (2025-02-17)

### 🚀 Features
- **input:** valid-marker-icon [DSYS-1059]
- **input:** overlapping icons fix, slots added [DSYS-1192]
- **input:** support native methods through API [DSYS-1234]


### 🩹 Fixes
- **panel:** fix visibility of overlay on mobile when panel is not collapsed
- **button:** variant `secondary` vertical position [DSYS-1144]
- **accordion-panel:** margin-top replaced with transition [DSYS-1231]

## 1.9.0 (2025-01-24)

### 🚀 Features
- **progress-bar:** `arial-label` attribute added [DSYS-1120]
- **panel:** updated existing variant names (`semi-collapsable` → `drawer`, `triggered → modal`), removed `fully-collapsable` variant, and included additional fixes [DSYS-1162]

### 🩹 Fixes
- **accordion-panel:** dynamically calculated height bug [DSYS-1185]

## 1.8.0 (2025-01-22)

### 🚀 Features
- **progress-steps:** better support for customized steps (icons, text under step marker) next to simple default numbered steps [DSYS-1032]
- **tabs:** improve accessibility by adding keyboard events, adjusting tabindex, fixing scroll behavior [DSYS-1100]
- **tabs:** url navigation [DSYS-971]
- **tooltip:** close tooltip on esc, aria-hidden is dynamically changed [DSYS-1122]
- **tooltip:** tooltip content can be hovered.
- **select:** dropdown adjusts position according to space around [DSYS-1072]
- **accordion:** add heading level for header, deprecate href usage, disable scrolling on space keydown event [DSYS-1107]


### 🩹 Fixes
- **accordion-panel:** dynamic data height calculation [DSYS-1137]
- **select:** validation happens after select touched [DSYS-1139]
- **label:** support all intended tooltip positions (`tooltipPosition` prop).
- **popover:** alignment of pointer and popover [DSYS-1101]
- **textarea:** custom message overrides validation message [DSYS-1138]

## 1.7.0 (2024-12-19)

### 🚀 Features
- **panel:** New `button-triggered` variant, other variant names aligned, other fixes [DSYS-1099]
- **popover:** New component [DSYS-938]

## 1.6.0 (2024-12-17)

### 🚀 Features
- **icon:** set of icons added [DSYS-1088]
- **list-item:** support for slots structure, allowing to pass any content in trailing slot [DSYS-1084]
- **select:** added leading, trailing and disabled icon variables [DSYS-844]
- **accordion:** style accordion to match list-item [DSYS-837]

### 🩹 Fixes
- **select:** arrow overflows select when animated causing scroll bar reveal [DSYS-1066]
- **icon:** remove width and height settings for svg [DSYS-1067]
- **accordion:** panel height being calculated dynamically [DSYS-1091]
- **icon:** src based svg should not be modified [DSYS-1089]

## 1.5.0 (2024-12-04)

### 🚀 Features
- **input:** `full-width` attribute added [DSYS-976]
- **icon:** `euro` icon added [DSYS-1065]

### 🩹 Fixes
- **panel:** Fix expand/collapse functionality to work as expected [DSYS-1051]
- **panel:** Add aria-label and update button title in Panel component [DSYS-1054]
- **alert:** Add aria-label to close button in Alert component for improved accessibility [DSYS-993]
- **list-item:** subtext on the same line with header [DSYS-1056]
- **accordion:** Improve accessibility of accordion-trigger in Storybook [DSYS-991]
- **select:** rChange event no longer triggers when the value is the same [DSYS-1058]

### 🩹 Fixes
- **select:** Same value shouldn't be emitted twice [DSYS-1058]
- **select:** Select shouldn't be focused on init [DSYS-1058]

## 1.4.0 (2024-11-15)

### 🚀 Features
- **button:** support `aria-label`, fix link button accessibility, ensure `rClick` always emitted [DSYS-1020]
- **icon:** `coins-stack` added [DSYS-1033]


### 🩹 Fixes
- **dialog:** removed `max-height` limiting the height and making it look broken when using small size dialog [DSYS-1010]

## 1.3.0 (2024-11-08)

### 🚀 Features
- **button:** add `icon-size` attribute [DSYS-953]
- **button:** "blank" variant updated for easier icon-button support [DSYS-959]
- **toast:** new component [DSYS-851]
- **panel:** add `logo-link` attribute, fix horizontal scrollbar [DSYS-1009]


### 🩹 Fixes
- update the z-index of overlay so the tables on the website are not overriding it
- `rValidate` event data `state` type changed to string; validation function unified through components [DSYS-973]
- **panel:** close when clicking outside of panel [DSYS-985]
- **alert:** close icon has wrong color when the status is 'info' or 'error' [DSYS-1003]
- **toast:** remove icon-size as only standard size should be supported [DSYS-1019]

## 1.2.0 (2024-10-18)

### 🚀 Features
- **panel:** new component [DSYS-846]
- **dialog:** new component [DSYS-890]
- **progress-steps:** design update aligned with Figma, introduce `progress-step` child component [DSYS-765]
- **input:** support `autocomplete` [DSYS-960]
- **select:** support lazy loaded options [DSYS-977]
- build using Stencil version 4.22.0

### 🩹 Fixes
- **accordion:** expanded state bug [DSYS-942]
- **button:** New `rClick` event which emits on onClick and keyup events [DSYS-1020]
- **input, select, textarea:** respect `novalidate` on form element [DSYS-962]
- **list-item:** pointer: cursor on link variant
- **select:** key navigation should not scroll page [DSYS-951]
- **select:** Initialize value from lazy-loaded options [DSYS-977]
- **tabs**: tab switching error for tested tabs [DSYS-969]

## 1.1.1 (2024-08-23)

### 🩹 Fixes
- **select:** horizontal scroll can appears on focus [DSYS-948]
- **select:** disabled option has no visual indication in Safari [DSYS-949]
- **select:** validation of the select value no key events [DSYS-950]


## 1.1.0 (2024-08-20)

### 🚀 Features
- **checkbox:** constraint validation API support [DSYS-931]
- **radio-group:** component added and radio-button constraint validation is thereby supported [DSYS-932]
- **select:** general overhaul to align better with native `select` behavior. Can affect how width of element is calculated, use CSS custom property `--width` to customize. Optionally use attribute `full-width` as a shortcut.
- **icon**: added `upload-document`

### 🩹 Fixes
- **button:** hover state unification [DSYS-934]
- **select:** align constraint validation to native select behavior [DSYS-892]
- **select:** fix `required` validation bug [DSYS-892]
- **select:** fix autocomplete showing up incorrectly [DSYS-892]


## 1.0.1 (2024-06-25)

### 🩹 Fixes
- **alert**: styleUrl was incorrect causing crash on import
- **tabs:** remove excessive focus style


# 1.0.0 (2024-06-25)

### ☀️ Major changes

This version introduces **support for dark mode** for all components. It requires @riverty/design-tokens or @riverty/css-framework at version 1.0.0 or higher. The updated [color structure](https://riverty.design/guidelines/colors) also means improvements throughout the default light mode. Color mode (or, 'theme') switching is fully opt-in.

Components are now created with **Stencil version 4**. This may be relevant to consider for package users who are also using Stencil themselves. For others, the change should mainly mean better stability and performance.

Support for modern bundlers like Vite now is better, without extra configuration needed. (Details: Stencil's [enableImportInjection](https://stenciljs.com/docs/config-extras#enableimportinjection) flag.)

### 🚀 Features
- **alert:** new component [DSYS-843]
- **button:** support custom icon [DSYS-831]
- **select:** max-width follows native select behavior [DSYS-775]

### 🩹 Fixes
- **badge:** fix cut out top border [DSYS-885]
- **button:** click event no longer triggered in disabled state [DSYS-867]
- **icon:** correct `credit-card` and `ellipsis` stroke color [DSYS-863]
- **input:** error message missing icon [DSYS-877]
- **select:** fix scrollbars may be shown in front of every dropdown option [DSYS-894]
- **select:** correct placement of error hint
- **pagination:** arrow icon was invisible due to size bug [DSYS-881]


## 0.16.0 (2024-05-24)

### 🚀 Features
- All form-related components support the standard `novalidate` attribute [DSYS-815]
- **icon:** added to Riverty kit:
  - `building-office`, `organization-chart`, `user-avatar-multiple`, `user-avatar-with-bars`, `user-avatar-with-exclamation-mark` [DSYS-833]
  - `pie-chart` [DSYS-839]

## 0.15.0 (2024-05-14)

### 🚀 Features
- **accordion:** new structure to provide more accessible parts and roles (old structure supported but upgrade recommended) [DSYS-520]
- **icon:** `ellipsis` added to Riverty icon kit [DSYS-777]
- **textarea:** support Constraint Validation API [DSYS-751]
- **select-option:** added icon position, size, color [DSYS-814]
- **select:** constraint validation support [DSYS-811]

### 🩹 Fixes
- r-form-hint updated to r-hint + variant [DSYS-809]
- **input:** correct icon size to fully align with intended design [DSYS-746]
- **select:** fix option long value overflow [DSYS-778]
- **select:** collapse dropdown when tabbing out [DSYS-810]
- **select:** blank value change reveals 'undefined' [DSYS-816]
- **select:** select-option initial value definition [DSYS-816]
- **select:** change value collapsing dropdown on change event [DSYS-816]
- **select-option:** define value if undefined [DSYS-818]

## 0.14.0 (2024-04-19)

### Added

- **list item:** added new list item component, also released in Figma [DSYS-493]
- form elements (input, checkbox, textarea, select, radio-button) display `r-color-semantic-red-100` background color in error state;
- **r-hint:**
  - renamed from `r-form-hint`
  - `variant` prop with `error | warning | success` values for more accessible indication of states;
  - `icon` prop allows to display an icon next to the text;

### Fixes

- **textarea:** fix placeholder color is incorrect [DSYS-743]
- **checkbox:** fix checkbox data missing in formData [DSYS-744]
- **input:** correct focus order for input with tooltip [DSYS-745]


## [0.13.0] - 2024-03-15

### Changed
- _Breaking change_: attribute `optional-marker` renamed to `optional-text`.
- _Breaking change_: re-named `r-label` properties:
  - `icon` -> `tooltip-icon`;
  - `icon-color` -> `tooltip-icon-color`;

### Added  
- Added support for form validation using standard Constraint Validation API. We are first trialing it in the Input component.
- `<r-label>`, `<r-input>`, `<r-select>`, `<r-textarea>` now support:
  - `optional` - boolean to allow displaying optional marker next to label text
  - `optional-text` - provides an ability to use custom text as an optional marker
- New icons added to Riverty set, namely: `currency-dollar`, `currency-euro`, `credit-card-with-plus-sign`, `globe`, `money-coin`, `shield-check`, `splitted-circles`;

### Fixed
- Several internal component tweaks with improved accessibility markup.
- Fixed button `type='submit'` bug, where font-weight was bold.
- Fixed issue in the select component where it displays the option name instead of its corresponding value.
- Fixed bug in select component, where it defaults to displaying the first option when no value is specified.
- Fixed bug where select component wasn't opening in Stencil app environment.


## [0.12.0] - 2024-02-02

### Changed
- _Breaking change_: Riverty set icon re-named: `hamburder-menu` -> `hamburger`;
- `r-select` initial max-width from `300px` to `100%` to be the same as other form controls;

### Added
- New icons added to Riverty set: `globe`, `money-coin`, `shield-check`, `splitted-circles`;

### Fixed
- `r-select` bug, where dynamically added options were not available for selection;
- Logic of `r-tabs` initial structure `disabled` elements (tabs or panels missing/disabled situations);
- Issues with `required` attr on `r-input`, `r-select`, `r-textarea` and validation (happend in Stencil project);
- `r-input`, `r-select`, `r-textarea` now have `name` attribute reflected, to be able to select them by attribute: `[name="yourName"]`.

## [0.11.0] - 2024-01-09

- Fix issue when consuming the package from a Stencil project. Project would fail to build because of a JSON file `import`.
- `<r-button>` variant `text-link` now has button dimensions.
- `hamburger-menu` and `link-crossed-out` added to default icon set.

## [0.10.0] - 2023-11-20

### Added
- Additional steps for Vue project added to installation guide
- Additional steps for Angular project added to installation guide
- `optional` indication added to `<r-label>` component

### Changed
- CSS structure refactored and unified.

### Fixed
- Bug, causing components with `disabled="false"` appear disabled

## [0.9.0] - 2023-10-04

### Added

- Extended and improved event emitting for many components. More in the [event management documentation](https://riverty.design/develop/events/).
  - Affected in this version: `<r-textarea>`, `<r-tabs>`, `<r-select>`, `<r-radio-button>`, `<r-pagination>`, `<r-input>`, `<r-checkbox>`.
- Thoroughly redesigned focus styles across all components. Visibility is improved regardless of background color, and presentation is more 

### Changed

- `<r-icon>` accepts any formats to `color` prop: `HEX`, `RGB`, `var(…)` and `--r-color-…`.

### Fixed:

- `<r-icon>` no longer breaks when using it from NPM within a Stencil project.


## [0.8.0] - 2023-09-08

- Fixed `<r-input>` but that caused incorrect appearance in Mobile Safari if `type='search'`.
- Changed `<r-icon>` `size` to be `'s' | 'm' | 'l'`.
- Fixed `<r-icon>` to properly display remote icons.
- Added to Riverty icon kit: `cookie`, `headset`, `phone-with-shield`, `two-speech-bubbles`.
- Updated bundled documentation to no longer describe icon component as 'draft' or 'preview'.

## [0.7.0] - 2023-08-25 

### Added
- This release introduces the official Riverty UI Icon kit and incorporates it into the `<r-icon>` component.

### Changed
- `<r-icon>` has been adjusted and can now be safely used.
  - now has standardized `size` attribute (set of pre-defined values)
  – `<r-icon>` attributes `width` and `height` were removed (use `size` instead)
  – `<r-icon>` attribute `fill` was removed (use `color` and css variables instead)
- Update the `background-color` of the arrow when expanded in `r-accordion-item`.
- Remove console.info when icons from Streamline are used

### Fixed
- `<r-accordion-item>`: Ensure proper ARIA roles are in place.
- `<r-tooltip>`: text overflow fix.,
– form reset returns `<r-checkbox>`, `<r-radio-button>` state and `<r-select>` value to initial

## [0.6.0] - 2023-05-11

### Changed

- `<r-accordion-item>` unique-id: Unique id for each accordion item/row

- `<r-pagination>` API update to make some attributes more self-explaining (e.g. `total` -> `total-pages`).
- Custom icon support: 
  - `<r-icon>`: accepts inline SVG into `<slot>`.
  - `<r-button>` accepts `<r-icon>` into `<slot>`.
  - `<r-button>` requires no named slots, text and icon could be passed side by side.
- `<r-button>` automatically resolves `icon-only` attribute.

### Fixed

– `<r-pagination>` api updates
– `<r-icon>` accepts inline svg into `<slot>`
– `<r-button>` accepts `<r-icon>` into `<slot>`
– `<r-button>` requires no named slots, text and icon could be passed side by side
– `<r-button>` automatically resolves `icon-only` attribute
– `<r-icon>` attributes update: 
  – `src` used to serve SVG from remote source;
  – `size` (pre-defined set of sizes) replaces attributes `width` and `height`;
  – `fill` to pass the color that fills the icon
  – `name` way of icons data serving changed (to JSON)
  – `<slot>` can also be used to display an SVG within `<r-icon>`
– All the components using `<r-icon>` as an internal instance were updated 

## [0.5.0] - 2023-04-15

### Components added

- `<r-pagination>`, for browsing among a set of numbered pages.
- `<r-progress-bar>`, a conventional progress bar.
- `<r-progress-steps>`, a progress indicator for a linear sequence of steps.

### Removed

- _Breaking change_: `<r-checkbox>` attribute `variant` removed
- _Breaking change_: `<r-radiobutton>` attribute `variant` removed

### Changed

- _Breaking change_: attribute `invalid` passes boolean to define invalid state.
- _Breaking change_: attribute `error` passes validation error text message.
- `<r-button>` updates:
  - `icon` attribute value changed from boolean to name of an icon.
  - `icon-position` attribute values changed from `'right' | 'left'` to `'start' | 'end'`.
  - `icon-only` attribute added to enable button with no visible text.
- `<r-select>` supports initial version of filtering ('combobox') behavior.
- `<r-icon>` attribute *viewBox* that passes viewbox settings for svg (`'0 0 24 24'` by default).
- `<r-form-hint>` attribute *invalid* defines style for an error. (This component is primarily used internally by other design system components.)

### Fixed

- `<r-tooltip>` and `<r-accordion>` minor visual tweaks aligned with Figma.
- `<r-tabs>`: disabled tab could become active.


## [0.4.0] - 2023-02-20

### Components added

- `<r-badge>`, a simple status indicator.

### Changed:

- `<r-button>` can now behave like a standard hyperlink by setting the `href` attribute.
- Build using Stencil v2.22.2.

### Fixed

- Tabs: state could become broken on double click (DSYS-269).
- Prevent components rendering attributes to DOM when not necessary.

## [0.3.0] - 2023-02-03

### Components added

- `<r-label>`, mostly used internally as utility component for text with possible tooltip.

### Changed

- Standardize attribute name `error` for setting form component error text.
- Tweaked attributes for `<r-icon>` (which is still in tech preview).

### Fixed

- Spacing between labels and form components aligned with Figma.
- Select: label is clickable.
- Tooltip: improve positioning within certain DOM structures (DSYS-260).

## [0.2.0] - 2023-01-23

### Components added

- [Input](https://riverty.design/components/input/)
- [Tabs](https://riverty.design/components/tabs/)
- [Textarea](https://riverty.design/components/textarea/)
- [Tooltip](https://riverty.design/components/tooltip/)

### Changed

- _Breaking change_: Simplify radio button usage by removing `<r-radio-group>`.
- Checkbox and Radio button: Align box/circle and label text to top left (DSYS-232)
- Implement spacing rules for groups of checkboxes and radio buttons (DSYS-205)

### Fixed

- Misalignment in expanded Select component (DSYS-208)
- Ensure disabled checkbox is not interactive (DSYS-219)
- Console error when accordion is expanded and clicked inside (DSYS-241)
- Checkbox: buggy hint/error position (DSYS-243)
- Component events fire when not intended to (DSYS-229)


## [0.1.0] - 2022-12-14

Initial published version. Read more on [riverty.design/components/](https://riverty.design/components/).