siemens/ix @siemens/ix@5.0.0 on GitHub

Major Changes

#2514 73a2ed3 Thanks @dmytro-halimov! - Breaking (v5): Remove the placement property (and placement attribute) from ix-split-button. It was not wired to the internal dropdown, so it had no effect; removing it only drops a misleading no-op from the public API. See BREAKING_CHANGES/v5.md.
#2524 f2c8b83 Thanks @danielleroux! - Require breadcrumbKey on ix-breadcrumb-item, change ix-breadcrumb nextItems entries from strings to { label, breadcrumbKey } objects, and export the shared BreadcrumbClick payload type so breadcrumb click events expose stable item keys.
This change was necessary to identify breadcrumb items in a stable way, as their labels may not be unique and can change over time. The breadcrumbKey provides a consistent identifier for each breadcrumb item, allowing for more reliable event handling and state management in applications using the breadcrumb component.
#2268 c81324b Thanks @danielleroux! - Update ix-date-dropdown quick date selection from a list to a picker, with quick date options displayed on the left side.
Removed attributes:
- ariaLabelDropdownButton: Provided aria-label will be passthrough the component shadow-dom to the actual button
- customRangeDisabled (also contain removal of i18nCustomItem): Removed because ix-date-dropdown will be a picker with quick selection on the left side.
#2516 91f811a Thanks @alexkaduk! - ix-chip: Status-filled hover/active colors and padding use design tokens; custom-color chips keep the overlay behavior.
ix-chip: Add ariaLabelIcon, forward host ARIA to the main control, optional host role="group", a native close button, and tooltip labeling; React, Angular, and Vue expose ariaLabelIcon.
#2309 3964a2a Thanks @GayatriK2002! - Removed the left margin for ix-chip and ix-pill. This margin was also present if there was no leading sibling that is also a chip/pill causing it to waste screen real estate and distort layout alignments.
#2470 f9e3802 Thanks @danielleroux! - Update ix-application theming inputs to use the new colorSchema API.
The themeSystemAppearance property has been replaced by colorSchema, and consumers using theme or theme-related configuration on ix-application have to migrate to the updated theme-switching behavior.
#2508 cdae15b Thanks @alexkaduk! - ix-time-picker: optional minTime and maxTime constrain selectable values (same string shape as format / time). Values outside the inclusive range are disabled in the picker rings.
Breaking (v5): the hour column header attribute is renamed from i18n-column-header to i18n-hour-column-header. The i18nHourColumnHeader property is unchanged—update static HTML or attribute-based markup. Migration: BREAKING_CHANGES/v5.md.
#2545 ba15b50 Thanks @alexkaduk! - Select listbox accessibility
ix-select: Screen reader output for the dropdown list follows listbox semantics: the focus proxy sets aria-selected from real selection state (and the add row from checked), no longer sets aria-checked on proxy options, and uses value as a fallback accessible name when label is absent.
ix-select-item: With disableAriaSelectHandling enabled on the host, keyboard focus visibility is no longer mirrored to aria-selected on ix-select-item, so assistive technologies do not treat every focused row as selected.
ix-dropdown-item: New itemRole prop (menuitem | option, default menuitem) sets the host role; ix-select-item passes option for listbox usage. Documented with @since 5.0.0. Generated React, Angular, and Vue bindings include itemRole / item-role.
ix-select (multiple mode): Passes ariaLabelCloseIconButton on each ix-filter-chip (via i18n-remove-selected-item, default prefix Remove) so the close control is announced with the item label (e.g. “Remove Item 1”). Documented with @since 5.0.0.
#2525 7042a10 Thanks @danielleroux! - Update the required @siemens/ix-icons peer dependency to ^3.4.0. This is a breaking change that requires consumers to update their @siemens/ix-icons dependency to version 3.4.0 or higher.
#2470 b00da1c Thanks @danielleroux! - - The toast function now appends directly to the ix-toast-container host element instead of using a separate container element.
Removed properties
- containerClass - Set class on the ix-toast-container element itself if needed.
- containerId - Just use id on the ix-toast-container element if needed.
#2268 c81324b Thanks @danielleroux! - Refactor keyboard navigation for dropdown-related components
Refactors keyboard navigation to align with W3C accessibility patterns for dropdown-related components, significantly improving accessibility and user experience:
Component Changes

Date Picker
- Added comprehensive keyboard navigation support:
  - Home/End: Navigate to first/last day of week
  - PageUp/PageDown: Navigate to previous/next month
  - Shift+PageUp/Shift+PageDown: Navigate to previous/next year
  - ArrowLeft/ArrowRight/ArrowUp/ArrowDown: Navigate between days
  - Enter/Space: Select focused day
  - Escape: Close picker
- Replaced manual year/month dropdown with accessible ix-dropdown-button components
- Implemented visual focus mode with aria-activedescendant for embedded pickers
- Added infinite scrolling for year selection with IntersectionObserver
- Improved ARIA labels: ariaLabelMonthSelection and ariaLabelYearSelection props
- Calendar days now have proper role="button" and descriptive aria-label attributes
Date Input
- Implemented aria-activedescendant pattern for combobox interaction
- Added keyboard forwarding to embedded date picker
- ArrowDown opens picker and activates keyboard navigation
- Escape closes picker and returns focus to input
- Focus management improved with delegatesFocus shadow DOM option
Date Dropdown
- Enhanced focus handling with onFocusout to close dropdown when focus leaves
- Auto-focus date picker when opened via keyboard
- Added suppressOverflowBehavior to prevent unwanted repositioning
Dropdown & Dropdown Button
- New props: disableFocusHandling, disableFocusTrap
- New events: showChange (preventable), showChanged (post-change)
- Improved focus proxy for dropdown items with proper role="menuitem"
- Better keyboard navigation with arrow keys, Home, End, Enter, Escape
Breadcrumb
- Complete refactor using ix-dropdown-button for previous/next items
- Added role="navigation" and role="listitem" for proper semantics
- Improved ARIA labels (default: "Show previous breadcrumb items")
- Each breadcrumb item now has aria-current="page" for the current page
- Keyboard navigation now works consistently across all breadcrumb dropdowns
Avatar
- Implemented focus proxy pattern for dropdown menu items
- Added aria-activedescendant support
- Button now has role="combobox" with proper aria-controls and aria-expanded
- Menu items properly labeled with role="menuitem"
Button
- Added .ix-focused class for programmatic focus indication
- Fixed focus-visible styles to work consistently
- Disabled buttons now have tabindex="-1"
Application Header
- Added role="banner" for proper landmark semantics
- Fixed overflow context menu visibility logic for small viewports
Breaking Changes
- ix-breadcrumb-item: ariaLabelButton prop deprecated in favor of direct aria-label attribute
- Date picker month/year selection UI completely redesigned (visual breaking change)
- Internal structure for all ix-dropdown related components are changed
#2503 8c7fb12 Thanks @danielleroux! - Update ix-menu-about and ix-menu-settings for key-based tabs and slotted ix-tabs opt-in
ix-menu-about and ix-menu-settings keep their legacy ix-menu-about-item / ix-menu-settings-item rendering by default. To switch to slotted ix-tabs / ix-tab-item markup, set the new suppressLegacyTabs prop on the parent menu component. ix-menu-about-news still uses activeAboutTabKey instead of aboutItemLabel.
Breaking Changes

ix-menu-about / ix-menu-settings
- The slotted ix-tabs integration path uses the new suppressLegacyTabs prop on the parent menu component.
- ix-menu-about renamed activeTabLabel to activeTabKey for legacy item-based integrations.
ix-menu-about-item / ix-menu-settings-item
- tabKey is now required when using legacy item-based integrations.
- ix-menu-about-item changed from shadow: true to shadow: false.
ix-menu-about-news
- New activeAboutTabKey prop replaces aboutItemLabel as the condition for showing the "Show more" footer button.
- The aboutItemLabel prop no longer controls footer visibility. Use activeAboutTabKey instead.
Migration

Use the existing ix-tabs pattern in your application (ix-menu-about / ix-menu-settings), and show the matching slotted content based on the active tab key. Set suppressLegacyTabs on the ix-menu-about / ix-menu-settings and active-tab-key on the nested ix-tabs, not on ix-menu-about or ix-menu-settings.
```

<ix-menu-about suppress-legacy-tabs>
  <ix-tabs active-tab-key="tab-1">
    <ix-tab-item tab-key="tab-1">Tab 1</ix-tab-item>
    <ix-tab-item tab-key="tab-2">Tab 2</ix-tab-item>
  </ix-tabs>
  
</ix-menu-about>
```
```

<ix-menu-about active-tab-key="tab-1">
  <ix-menu-about-item tab-key="tab-1" label="Tab 1"
    >Content 1</ix-menu-about-item
  >
  <ix-menu-about-item tab-key="tab-2" label="Tab 2"
    >Content 2</ix-menu-about-item
  >
</ix-menu-about>
```
```

<ix-menu-settings active-tab-key="tab-1">
  <ix-menu-settings-item tab-key="tab-1" label="Tab 1"
    >Content 1</ix-menu-settings-item
  >
</ix-menu-settings>
```
#2541 130df33 Thanks @danielleroux! - Breaking (v5): showModalLoading() now returns a Promise<ModalLoadingContext>. Await the call before using update() or finish() on the returned loading context.
#2471 e324caa Thanks @alexkaduk! - Add non-blocking dialog mode to ix-modal with isNonBlocking and ModalConfig.isNonBlocking: opens with dialog.show() so the page stays interactive (no lightbox or focus trap; aria-modal is false). After open, showModal() schedules initial focus on the first light-DOM match for [autofocus] or [auto-focus] (with focusVisible: true).
Breaking (v5): Remove disableEscapeClose. Escape and cancel always go through dismissModal(); use beforeDismiss to veto dismissal (e.g. replace disableEscapeClose with beforeDismiss: () => false). showModalLoading is updated accordingly; closeModal from finish() is unchanged.
#2465 7406be7 Thanks @danielleroux! - Remove legacy accessible-name properties from button components. Set the native aria-label attribute on the host element instead; it is applied to the inner interactive surface.
- ix-button: ariaLabelButton (aria-label-button)
- ix-icon-button: a11yLabel (a11y-label)
- ix-toggle-button: ariaLabelButton (aria-label-button)
- ix-icon-toggle-button: ariaLabelIconButton (aria-label-icon-button)
See Breaking changes v5 for migration examples.
#2475 834bbbf Thanks @nuke-ellington! - ix-card-list breaking change: selecting the show-all button or show-more card now reveals all hidden cards by default and toggles back to the hidden-overflow state from the show-less button. To keep the previous event-only behavior, call preventDefault() on the cancelable showAllClick or showMoreCardClick event.
Fixes #1367 and Fixes #2353
#2503 8c7fb12 Thanks @danielleroux! - Refactor ix-tabs and ix-tab-item to use key-based tab identification
Replaces the index-based tab selection model with a string key-based approach, improving reliability when tabs are added, removed, or reordered dynamically.
Breaking Changes

ix-tabs
- Removed selected prop (number index). Use activeTabKey (string) instead.
- Removed ariaLabelChevronLeftIconButton and ariaLabelChevronRightIconButton props. When the tab list overflows and layout is not stretched, ix-tabs now shows an ix-dropdown-button with all tabs instead of scroll arrows; no overflow button is rendered while all tabs fit or while layout is stretched.
- Removed selectedChange event. Use tabChange which emits the active tabKey string instead of an index.
ix-tab-item
- New required tabKey prop to uniquely identify each tab.
- Added label prop for setting tab text (preferred over slot content).
- Added icon prop for setting an icon on the tab.
- Added closable prop and tabClose event for closable tabs.
- small, layout, placement, and rounded props are now internal and set automatically by the parent ix-tabs.
Migration
```

<ix-tabs selected="1">
  <ix-tab-item>Tab 1</ix-tab-item>
  <ix-tab-item>Tab 2</ix-tab-item>
</ix-tabs>


<ix-tabs active-tab-key="tab-2">
  <ix-tab-item tab-key="tab-1" label="Tab 1"></ix-tab-item>
  <ix-tab-item tab-key="tab-2" label="Tab 2"></ix-tab-item>
</ix-tabs>
```
Replace removed selectedChange event listeners with tabChange:
```
// Before
tabs.addEventListener('selectedChange', (e) => console.log(e.detail)); // 0, 1, 2...

// After
tabs.addEventListener('tabChange', (e) => console.log(e.detail)); // 'tab-1', 'tab-2'...
```
#2548 3ece658 Thanks @alexkaduk! - Remove pre-v5 deprecated components, properties, and the showModalLoading string overload.
Removed components: ix-input-group (use ix-input); ix-validation-tooltip (use built-in validation on ix-input / ix-select); ix-drawer (use ix-pane).
Removed properties: ariaLabelMenuExpandIconButton on ix-application-header; a11yLabel on ix-avatar; ariaLabelButton on ix-breadcrumb-item; ariaLabelChevronDownIconButton on ix-select; error on ix-slider (use class="ix-invalid" and invalid-text instead).
Removed util overload: showModalLoading(message: string) — use showModalLoading({ message: '...' }) instead.
See BREAKING_CHANGES/v5.md (section Removed deprecated components and APIs) for migration details.
#2538 909bb6a Thanks @alexkaduk! - Remove no-op ModalConfig fields container, keyboard, and title from the showModal API. They had no effect in v4; delete them from config objects.
See Breaking changes v5 (ModalConfig: removed no-op options) for migration.
#2465 7406be7 Thanks @danielleroux! - Remove unused i18n-expand-sidebar property from ix-menu
#2470 f9e3802 Thanks @danielleroux! - Update the public theme-switcher API to support explicit system color schema handling and unified theme change events.
Consumers using themeSwitcher.themeChanged, themeSwitcher.schemaChanged, setTheme(), or ThemeVariant must update to the new event detail payload and consolidated color-schema behavior. Existing listeners expecting a string event payload or relying on schemaChanged will need to be migrated.
#2470 b5e7384 Thanks @danielleroux! - Migrate the public theming API from legacy theme classes to data-ix-theme and data-ix-color-schema, including explicit system color schema handling.
Consumers must stop using legacy theme classes such as theme-classic-dark and theme-classic-light and move to attribute-based theming on <html>.

Minor Changes

#2359 8378937 Thanks @alexkaduk! - Added ix-datetime-input component based on datetime-picker
#2279 40cfbe0 Thanks @varun-srinivasa! - Add disabled-state support for ix-tree-item, including the exposed disabled property and corresponding tree item state handling.
Improve ix-tree and ix-tree-item accessibility by updating ARIA roles and positional attributes.
Fixes #2091
#2521 36ce453 Thanks @alexkaduk! - ix-datetime-input: Add minTime and maxTime so the combined date-time field can constrain the time portion.
#2517 653f136 Thanks @alexkaduk! - Extend time bounds to ix-time-input and ix-datetime-picker with optional minTime / maxTime (same string shape as each component’s time format tokens). For ix-datetime-picker, validation and UI stay aligned: with minDate / maxDate, minTime applies on the minimum day, maxTime on the maximum day, and days in between are not time-clamped by those props; with no date bounds, minTime / maxTime act as a daily time window.
ix-time-picker: constraint checks use the full span of each hour, minute, and second candidate so disabled states match inclusive bounds (for example, an hour remains selectable when minTime falls mid-hour).
#2458 a6a5309 Thanks @danielleroux! - ix-dropdown now observes the visibility of the trigger element in the viewport while the dropdown is open. If the trigger element scrolls outside the visible viewport, the dropdown will automatically close to prevent it from remaining visible in an unexpected screen position. To keep the dropdown open regardless of trigger visibility, set suppressTriggerVisibilityCheck to true.
#2437 4161ab9 Thanks @danielleroux! - Add new component ix-range-field which can currently display range related inputs. Supported components: ix-date-input, ix-time-input and ix-datetime-input.
#2478 4231d51 Thanks @khathija-ahamadi! - Support directory upload in ix-upload.
Fixes #2053
Fixes #2354

Patch Changes

#2534 8765757 Thanks @danielleroux! - Reduce icon size of ix-datetime-input to 16
#2505 ce6cd94 Thanks @lakshmi-priya-b! - Fixed a bug that would display ix-avatar's tooltip when hovering dropdown-items. Fixes #2400
#2549 d10b03c Thanks @dmytro-halimov! - ix-breadcrumb-item: Remove the slide-in (translateX + opacity) enter animation, and propagate aria-label (and other host-level ARIA attributes) to the inner button
#2496 c97d897 Thanks @GayatriK2002! - Apply the pointer cursor to checkbox labels so clickable checkbox text has the expected interactive affordance.
#2542 1333ad8 Thanks @alexkaduk! - ix-chip: Apply the primary style when no variant is set or the provided value is not one of the supported variants, so chips no longer render unstyled when consumers omit variant or pass an empty/unknown value. The same fallback applies in combination with outline, which now renders as outline primary by default.
#2502 60a9728 Thanks @nuke-ellington! - Fix hover and active background colors of filled status chips (alarm, critical, warning, info, neutral, success) to use the correct design tokens (--theme-color-*--hover / --theme-color-*--active) instead of a semi-transparent black overlay, aligning the rendered result with the Figma specification. Custom color chips retain the overlay approach. Chip padding is also corrected to be uniform across icon and non-icon variants.
#2511 fdb15b2 Thanks @danielleroux! - Fix classic theme hover and active states for buttons, chips, links, and invalid switches, and align classic light and dark variable application with the supported data-attribute theme selectors.
#2544 3e90786 Thanks @dmytro-halimov! - ix-dropdown-button: Hide the trigger's focus outline while the dropdown is expanded so focus is shown only on the active dropdown item.
ix-breadcrumb: Stop clipping the focus outline of items flush with the host edges (e.g. the first breadcrumb item or the ... previous-items button).
#2540 cbb0716 Thanks @lzeiml! - Set the correct background color for ix-select with ix-warning.
#2268 c81324b Thanks @danielleroux! - Hide the overflow context menu in ix-application-header when switching from a small to a medium or large viewport.
#2465 7406be7 Thanks @danielleroux! - Set predefined aria-label and aria-pressed attributes to the ix-menu expand button
#2532 2ec2c70 Thanks @lzeiml! - ix-date-picker: fix arrow-key navigation in the day grid while NVDA is running by applying w3 ARIA grid pattern.
ix-time-picker: fix arrow-key navigation in the time columns while NVDA is running by applying aria-role listbox.
#2558 4d35515 Thanks @alexkaduk! - Fix striped HTML tables (.ix-table-striped) so alternating row backgrounds are visible.
#2557 64e6cfe Thanks @alexkaduk! - ix-input: Align start/end slot spacing with design tiers.
#2484 4643a65 Thanks @dmytro-halimov! - Toast component now supports screen reader announcements
#2555 5f141c1 Thanks @lzeiml! - Improved keyboard navigation and accessibility for ix-menu-items nested inside ix-menu-category.
#2541 130df33 Thanks @danielleroux! - Render modal loading update messages as plain text so text passed to update() is not interpreted as HTML.
#2415 f4f8921 Thanks @alexkaduk! - ix-pill: aria-label, aria-labelledby, and other ARIA attributes set on the host are now exposed on the pill for assistive technologies. Icons are treated as decorative by default; use aria-label-icon when the icon carries meaning screen readers should hear.
#2268 c81324b Thanks @danielleroux! - Prevent ix-group from crashing during construction
#2541 130df33 Thanks @danielleroux! - Improve React and Vue wrapper tree shaking so bundlers can exclude unused IX components when importing individual framework components.
#2405 22699fa Thanks @alexkaduk! - ix-toggle: Exposes correct switch semantics (role, aria-checked, aria-disabled), keyboard interaction (Space / Enter), and a stable accessible name (set aria-label or aria-labelledby on the host; name does not change with state; state is conveyed via aria-checked). Visible on/off copy is not used as the accessible name.

siemens/ix @siemens/ix@5.0.0 on GitHub

Major Changes

Removed properties

Component Changes

Date Picker

Date Input

Date Dropdown

Dropdown & Dropdown Button

Breadcrumb

Avatar

Button

Application Header

Breaking Changes

Breaking Changes

ix-menu-about / ix-menu-settings

ix-menu-about-item / ix-menu-settings-item

ix-menu-about-news

Migration

Breaking Changes

ix-tabs

ix-tab-item

Migration

Minor Changes

Patch Changes

siemens/ix @siemens/ix@5.0.0
on GitHub