@ui5/webcomponents 2.28.1 → 2.29.0-rc.1

package/llms.txt

@@ -0,0 +1,180 @@
+# @ui5/webcomponents
+
+> Consumer guidance for applications using this npm package.
+
+Version: 2.29.0-rc.1
+
+Primary components for forms, data display, navigation, and layouts.
+
+## Read the installed API
+
+- [Public API manifest](./dist/custom-elements.json): component tags, module paths, properties, attributes, events, slots, methods, CSS parts, and deprecations.
+- [Package metadata](./package.json): installed version, dependencies, and exports.
+- [Package README](./README.md): assets and package-specific setup.
+- TypeScript declarations next to each component in dist provide additional type information.
+- [Online documentation and examples](https://ui5.github.io/webcomponents/): check that examples apply to the installed version. Prefer the local manifest and declarations when versions differ.
+
+Read the relevant component declaration before writing code. Do not invent properties, event names, slots, or methods. This index lists components in this package; inspect the corresponding installed package for other components.
+
+## Usage conventions
+
+- Import a component's JavaScript module to register its custom element, using the /dist/ paths below. Import child components used in your markup explicitly rather than assuming they are registered transitively.
+- These are native web components. JSX wrappers from @ui5/webcomponents-react have a separate API and package; do not substitute wrapper props for native APIs.
+- HTML attributes and JavaScript properties can have different names (for example, accessible-name and accessibleName). Use the manifest's attribute mapping. Boolean attributes are true when present; remove them for false rather than writing disabled="false". Assign arrays and objects through JavaScript properties or your framework's property binding.
+- Use addEventListener with the documented DOM event name; read documented custom event payloads from event.detail. In frameworks, check their custom-element event binding syntax.
+- Place children in the documented default or named slots. Use slot="name" for a named slot and the documented child component types.
+- Import icons separately, for example import "@ui5/webcomponents-icons/dist/save.js" before using icon="save". Check the icon exists in the installed icon package.
+- For themes and translations, follow the README's Assets.js setup and the application's bundler configuration.
+- Use stable attribute selectors such as [ui5-button] in CSS and DOM queries to support tag-name scoping. Under scoping, create markup with the application's configured scoped tag names.
+- Style with supported theme variables and documented CSS parts. Avoid depending on private shadow DOM structure.
+- In TypeScript, use import type for component types when a separate side-effect import registers the element.
+
+## Minimal registration example
+
+```js
+import "@ui5/webcomponents/dist/Button.js";
+```
+
+```html
+<ui5-button>Save</ui5-button>
+```
+
+## Component index
+
+Generated from the public manifest. Descriptions are abbreviated; consult the manifest for complete usage constraints and API details.
+
+| Component | Tag | Import module | Purpose |
+| --- | --- | --- | --- |
+| Avatar | `ui5-avatar` | `@ui5/webcomponents/dist/Avatar.js` | An image-like component that has different display options for representing images and icons in different shapes and sizes, depending on the use case. |
+| AvatarBadge | `ui5-avatar-badge` | `@ui5/webcomponents/dist/AvatarBadge.js` | The ui5-avatar-badge component is used to display a badge on top of ui5-avatar component. The badge can display an icon and supports different states for visual affordance. |
+| AvatarGroup | `ui5-avatar-group` | `@ui5/webcomponents/dist/AvatarGroup.js` | Displays a group of avatars arranged horizontally. It is useful to visually showcase a group of related avatars, such as, project team members or employees. |
+| Bar | `ui5-bar` | `@ui5/webcomponents/dist/Bar.js` | The Bar is a container which is primarily used to hold titles, buttons and input elements and its design and functionality is the basis for page headers and footers. The component consists of three areas to hold its content - startContent… |
+| Breadcrumbs | `ui5-breadcrumbs` | `@ui5/webcomponents/dist/Breadcrumbs.js` | Enables users to navigate between items by providing a list of links to previous steps in the user's navigation path. It helps the user to be aware of their location within the application and allows faster navigation. |
+| BreadcrumbsItem | `ui5-breadcrumbs-item` | `@ui5/webcomponents/dist/BreadcrumbsItem.js` | The ui5-breadcrumbs-item component defines the content of an item in ui5-breadcrumbs. |
+| BusyIndicator | `ui5-busy-indicator` | `@ui5/webcomponents/dist/BusyIndicator.js` | The ui5-busy-indicator signals that some operation is going on and that the user must wait. It does not block the current UI screen so other operations could be triggered in parallel. It displays 3 dots and each dot expands and shrinks at… |
+| Button | `ui5-button` | `@ui5/webcomponents/dist/Button.js` | The ui5-button component represents a simple push button. It enables users to trigger actions by clicking or tapping the ui5-button, or by pressing certain keyboard keys, such as Enter. |
+| ButtonBadge | `ui5-button-badge` | `@ui5/webcomponents/dist/ButtonBadge.js` | The ui5-button-badge component defines a badge that appears in the ui5-button. |
+| Calendar | `ui5-calendar` | `@ui5/webcomponents/dist/Calendar.js` | The ui5-calendar component allows users to select one or more dates. |
+| CalendarLegend | `ui5-calendar-legend` | `@ui5/webcomponents/dist/CalendarLegend.js` | The ui5-calendar-legend component is designed for use within the ui5-calendar to display a legend. Each ui5-calendar-legend-item represents a unique date type, specifying its visual style and a corresponding textual label. |
+| CalendarLegendItem | `ui5-calendar-legend-item` | `@ui5/webcomponents/dist/CalendarLegendItem.js` | Each ui5-calendar-legend-item represents a legend item, displaying a color with a label. The color is determined by the type property and the label by the text property. If a ui5-special-date is used within the ui5-calendar and a type is… |
+| Card | `ui5-card` | `@ui5/webcomponents/dist/Card.js` | The ui5-card is a component that represents information in the form of a tile with separate header and content areas. The content area of a ui5-card can be arbitrary HTML content. The header can be used through slot header. For which there… |
+| CardHeader | `ui5-card-header` | `@ui5/webcomponents/dist/CardHeader.js` | The ui5-card-header is a component, meant to be used as a header of the ui5-card component. It displays valuable information, that can be defined with several properties, such as: titleText, subtitleText, additionalText and two slots:… |
+| Carousel | `ui5-carousel` | `@ui5/webcomponents/dist/Carousel.js` | The Carousel allows the user to browse through a set of items. The component is mostly used for showing a gallery of images, but can hold any other HTML element. |
+| ComboBoxItem | `ui5-cb-item` | `@ui5/webcomponents/dist/ComboBoxItem.js` | The ui5-cb-item represents the item for a ui5-combobox. |
+| ComboBoxItemCustom | `ui5-cb-item-custom` | `@ui5/webcomponents/dist/ComboBoxItemCustom.js` | The ui5-cb-item-custom is a combobox item component that allows placing custom content inside a combobox item. The text property is used for filtering and auto-complete. For highlighting functionality, see… |
+| ComboBoxItemGroup | `ui5-cb-item-group` | `@ui5/webcomponents/dist/ComboBoxItemGroup.js` | The ui5-cb-group-item is type of suggestion item, that can be used to split the ui5-combobox suggestions into groups. |
+| CheckBox | `ui5-checkbox` | `@ui5/webcomponents/dist/CheckBox.js` | Allows the user to set a binary value, such as true/false or yes/no for an item. |
+| ColorPalette | `ui5-color-palette` | `@ui5/webcomponents/dist/ColorPalette.js` | The ui5-color-palette provides the users with a range of predefined colors. The colors are fixed and do not change with the theme. |
+| ColorPaletteItem | `ui5-color-palette-item` | `@ui5/webcomponents/dist/ColorPaletteItem.js` | The ui5-color-palette-item component represents a color in the the ui5-color-palette. |
+| ColorPalettePopover | `ui5-color-palette-popover` | `@ui5/webcomponents/dist/ColorPalettePopover.js` | Represents a predefined range of colors for easier selection. |
+| ColorPicker | `ui5-color-picker` | `@ui5/webcomponents/dist/ColorPicker.js` | The ui5-color-picker allows users to choose any color and provides different input options for selecting colors. |
+| ComboBox | `ui5-combobox` | `@ui5/webcomponents/dist/ComboBox.js` | The ui5-combobox component represents a drop-down menu with a list of the available options and a text input field to narrow down the options. |
+| CalendarDate | `ui5-date` | `@ui5/webcomponents/dist/CalendarDate.js` | The ui5-date component defines a calendar date to be used inside ui5-calendar |
+| DatePicker | `ui5-date-picker` | `@ui5/webcomponents/dist/DatePicker.js` | The ui5-date-picker component provides an input field with assigned calendar which opens on user action. The ui5-date-picker allows users to select a localized date using touch, mouse, or keyboard input. It consists of two parts: the date… |
+| CalendarDateRange | `ui5-date-range` | `@ui5/webcomponents/dist/CalendarDateRange.js` | The ui5-date-range component defines a range of dates to be used inside ui5-calendar |
+| DateRangePicker | `ui5-daterange-picker` | `@ui5/webcomponents/dist/DateRangePicker.js` | The DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar. |
+| DateTimeInput | `ui5-datetime-input` | `@ui5/webcomponents/dist/DateTimeInput.js` | Extention of the UI5 Input, so we do not modify Input's private properties within the datetime components. Intended to be used for the DateTime components. |
+| DateTimePicker | `ui5-datetime-picker` | `@ui5/webcomponents/dist/DateTimePicker.js` | The DateTimePicker component alows users to select both date (day, month and year) and time (hours, minutes and seconds) and for the purpose it consists of input field and Date/Time picker. |
+| DayPicker | `ui5-daypicker` | `@ui5/webcomponents/dist/DayPicker.js` | Represents the days inside a single month view of the ui5-calendar component. |
+| Dialog | `ui5-dialog` | `@ui5/webcomponents/dist/Dialog.js` | The ui5-dialog component is used to temporarily display some information in a size-limited window in front of the regular app screen. It is used to prompt the user for an action or a confirmation. The ui5-dialog interrupts the current app… |
+| DropIndicator | `ui5-drop-indicator` | `@ui5/webcomponents/dist/DropIndicator.js` | import "@ui5/webcomponents/dist/DropIndicator.js"; |
+| DynamicDateRange | `ui5-dynamic-date-range` | `@ui5/webcomponents/dist/DynamicDateRange.js` | The ui5-dynamic-date-range component provides a flexible interface to define date ranges using a combination of absolute dates, relative intervals, and preset ranges (e.g., "Today", "Yesterday", etc.). It allows users to select a date… |
+| ExpandableText | `ui5-expandable-text` | `@ui5/webcomponents/dist/ExpandableText.js` | The ui5-expandable-text component allows displaying a large body of text in a small space. It provides an "expand/collapse" functionality, which shows/hides potentially truncated text. |
+| FileUploader | `ui5-file-uploader` | `@ui5/webcomponents/dist/FileUploader.js` | The ui5-file-uploader opens a file explorer dialog and enables users to upload files. The component consists of input field, but you can provide an HTML element by your choice to trigger the file upload, by using the default slot.… |
+| Form | `ui5-form` | `@ui5/webcomponents/dist/Form.js` | The Form is a layout component that arranges labels and form fields (like input fields) pairs into a specific number of columns. |
+| FormGroup | `ui5-form-group` | `@ui5/webcomponents/dist/FormGroup.js` | The FormGroup (ui5-form-group) represents a group inside the Form (ui5-form) component and it consists of FormItem (ui5-form-item) components. |
+| FormItem | `ui5-form-item` | `@ui5/webcomponents/dist/FormItem.js` | The FormItem (ui5-form-item) represents pair of a label and one or more components (text or text fields), associated to it. |
+| Icon | `ui5-icon` | `@ui5/webcomponents/dist/Icon.js` | The ui5-icon component represents an SVG icon. There are two main scenarios how the ui5-icon component is used: as a purely decorative element, or as an interactive element that can be focused and clicked. |
+| Input | `ui5-input` | `@ui5/webcomponents/dist/Input.js` | The ui5-input component allows the user to enter and edit text or numeric values in one line. |
+| InputIcon | `ui5-input-icon` | `@ui5/webcomponents/dist/InputIcon.js` | The ui5-input-icon component represents an interactive icon that can be placed inside an ui5-input component. Unlike the standard ui5-icon, this component provides button-like behavior with hover, focus, and active states, matching the… |
+| Label | `ui5-label` | `@ui5/webcomponents/dist/Label.js` | The ui5-label is a component used to represent a label for elements like input, textarea, select. The for property of the ui5-label must be the same as the id attribute of the related input element. Screen readers read out the label, when… |
+| ListItemStandard | `ui5-li` | `@ui5/webcomponents/dist/ListItemStandard.js` | The ui5-li represents the simplest type of item for a ui5-list. |
+| ListItemCustom | `ui5-li-custom` | `@ui5/webcomponents/dist/ListItemCustom.js` | A component to be used as custom list item within the ui5-list the same way as the standard ui5-li. |
+| ListItemGroup | `ui5-li-group` | `@ui5/webcomponents/dist/ListItemGroup.js` | The ui5-li-group is a special list item, used only to create groups of list items. |
+| ListItemGroupHeader | `ui5-li-group-header` | `@ui5/webcomponents/dist/ListItemGroupHeader.js` | The ui5-li-group-header is a special list item, used only to separate other list items into logical groups. |
+| SuggestionListItem | `ui5-li-suggestion-item` | `@ui5/webcomponents/dist/SuggestionListItem.js` | The ui5-li-suggestion-item represents the suggestion item in the ui5-input suggestion popover. |
+| Link | `ui5-link` | `@ui5/webcomponents/dist/Link.js` | The ui5-link is a hyperlink component that is used to navigate to other apps and web pages, or to trigger actions. It is a clickable text element, visualized in such a way that it stands out from the standard text. On hover, it changes its… |
+| List | `ui5-list` | `@ui5/webcomponents/dist/List.js` | The ui5-list component allows displaying a list of items, advanced keyboard handling support for navigating between items, and predefined modes to improve the development efficiency. |
+| MultiComboBoxItem | `ui5-mcb-item` | `@ui5/webcomponents/dist/MultiComboBoxItem.js` | The ui5-mcb-item represents the item for a ui5-multi-combobox. |
+| MultiComboBoxItemCustom | `ui5-mcb-item-custom` | `@ui5/webcomponents/dist/MultiComboBoxItemCustom.js` | The ui5-mcb-item-custom is a multi-combobox item component that allows placing custom content inside a multi-combobox item. The text property is used for filtering and token display. For highlighting functionality, see… |
+| MultiComboBoxItemGroup | `ui5-mcb-item-group` | `@ui5/webcomponents/dist/MultiComboBoxItemGroup.js` | The ui5-mcb-item-group is type of suggestion item, that can be used to split the ui5-multi-combobox suggestions into groups. |
+| Menu | `ui5-menu` | `@ui5/webcomponents/dist/Menu.js` | ui5-menu component represents a hierarchical menu structure. |
+| MenuItem | `ui5-menu-item` | `@ui5/webcomponents/dist/MenuItem.js` | ui5-menu-item is the item to use inside a ui5-menu. An arbitrary hierarchy structure can be represented by recursively nesting menu items. |
+| MenuItemGroup | `ui5-menu-item-group` | `@ui5/webcomponents/dist/MenuItemGroup.js` | The ui5-menu-item-group component represents a group of items designed for use inside a ui5-menu. Items belonging to the same group should be wrapped by a ui5-menu-item-group. Each group can have an checkMode property, which defines the… |
+| MenuSeparator | `ui5-menu-separator` | `@ui5/webcomponents/dist/MenuSeparator.js` | The ui5-menu-separator represents a horizontal line to separate menu items inside a ui5-menu. |
+| MessageStrip | `ui5-message-strip` | `@ui5/webcomponents/dist/MessageStrip.js` | The ui5-message-strip component allows for the embedding of application-related messages. It supports four semantic designs, each with its own color and icon: "Information", "Positive", "Critical", and "Negative". Additionally, users can… |
+| MonthPicker | `ui5-monthpicker` | `@ui5/webcomponents/dist/MonthPicker.js` | Month picker component. |
+| MultiComboBox | `ui5-multi-combobox` | `@ui5/webcomponents/dist/MultiComboBox.js` | The ui5-multi-combobox component consists of a list box with items and a text field allowing the user to either type a value directly into the text field, or choose from the list of existing items. |
+| MultiInput | `ui5-multi-input` | `@ui5/webcomponents/dist/MultiInput.js` | A ui5-multi-input field allows the user to enter multiple values, which are displayed as ui5-token. |
+| NumericInput | `ui5-numeric-input` | `@ui5/webcomponents/dist/NumericInput.js` | The ui5-numeric-input component is a numeric input field. It allows users to enter, edit and select numeric values. |
+| Option | `ui5-option` | `@ui5/webcomponents/dist/Option.js` | The ui5-option component defines the content of an option in the ui5-select. |
+| OptionCustom | `ui5-option-custom` | `@ui5/webcomponents/dist/OptionCustom.js` | The ui5-option-custom component defines a custom content of an option in the ui5-select. A component to be the same way as the standard ui5-option. The component accepts arbitrary HTML content to allow full customization. |
+| OptionGroup | `ui5-option-group` | `@ui5/webcomponents/dist/OptionGroup.js` | The ui5-option-group component is used to group options within a ui5-select. |
+| Panel | `ui5-panel` | `@ui5/webcomponents/dist/Panel.js` | The ui5-panel component is a container which has a header and a content area and is used for grouping and displaying information. It can be collapsed to save space on the screen. |
+| Popover | `ui5-popover` | `@ui5/webcomponents/dist/Popover.js` | The ui5-popover component displays additional information for an object in a compact way and without leaving the page. The Popover can contain various UI elements, such as fields, tables, images, and charts. It can also include actions in… |
+| ProgressIndicator | `ui5-progress-indicator` | `@ui5/webcomponents/dist/ProgressIndicator.js` | Shows the progress of a process in a graphical way. To indicate the progress, the inside of the component is filled with a color. |
+| RadioButton | `ui5-radio-button` | `@ui5/webcomponents/dist/RadioButton.js` | The ui5-radio-button component enables users to select a single option from a set of options. When a ui5-radio-button is selected by the user, the change event is fired. When a ui5-radio-button that is within a group is selected, the one… |
+| RangeSlider | `ui5-range-slider` | `@ui5/webcomponents/dist/RangeSlider.js` | Represents a numerical interval and two handles (grips) to select a sub-range within it. The purpose of the component to enable visual selection of sub-ranges within a given interval. |
+| RatingIndicator | `ui5-rating-indicator` | `@ui5/webcomponents/dist/RatingIndicator.js` | The Rating Indicator is used to display a specific number of icons that are used to rate an item. Additionally, it is also used to display the average and overall ratings. |
+| ResponsivePopover | `ui5-responsive-popover` | `@ui5/webcomponents/dist/ResponsivePopover.js` | The ui5-responsive-popover acts as a Popover on desktop and tablet, while on phone it acts as a Dialog. The component improves tremendously the user experience on mobile. |
+| SegmentedButton | `ui5-segmented-button` | `@ui5/webcomponents/dist/SegmentedButton.js` | The ui5-segmented-button shows a group of items. When the user clicks or taps one of the items, it stays in a pressed state. It automatically resizes the items to fit proportionally within the component. When no width is set, the component… |
+| SegmentedButtonItem | `ui5-segmented-button-item` | `@ui5/webcomponents/dist/SegmentedButtonItem.js` | Users can use the ui5-segmented-button-item as part of a ui5-segmented-button. |
+| Select | `ui5-select` | `@ui5/webcomponents/dist/Select.js` | The ui5-select component is used to create a drop-down list. |
+| Slider | `ui5-slider` | `@ui5/webcomponents/dist/Slider.js` | The Slider component represents a numerical range and a handle (grip). The purpose of the component is to enable visual selection of a value in a continuous numerical range by moving an adjustable handle. |
+| SliderHandle | `ui5-slider-handle` | `@ui5/webcomponents/dist/SliderHandle.js` | The ui5-slider-handle component represents the handle of the ui5-slider component. |
+| SliderTooltip | `ui5-slider-tooltip` | `@ui5/webcomponents/dist/SliderTooltip.js` |  |
+| SpecialCalendarDate | `ui5-special-date` | `@ui5/webcomponents/dist/SpecialCalendarDate.js` | The ui5-special-date component defines a special calendar date to be used inside ui5-calendar, which is visually distinguished from the rest of the dates. |
+| SplitButton | `ui5-split-button` | `@ui5/webcomponents/dist/SplitButton.js` | ui5-split-button enables users to trigger actions. It is constructed of two separate actions - default action and arrow action that can be activated by clicking or tapping, or by pressing certain keyboard keys - Space or Enter for default… |
+| StepInput | `ui5-step-input` | `@ui5/webcomponents/dist/StepInput.js` | The ui5-step-input consists of an input field and buttons with icons to increase/decrease the value with the predefined step. |
+| SuggestionItem | `ui5-suggestion-item` | `@ui5/webcomponents/dist/SuggestionItem.js` | The ui5-suggestion-item represents the suggestion item of the ui5-input. |
+| SuggestionItemCustom | `ui5-suggestion-item-custom` | `@ui5/webcomponents/dist/SuggestionItemCustom.js` | The ui5-suggestion-item-custom is type of suggestion item, that can be used to place suggestion items with custom content in the input. The text property is considered only for autocomplete. In case the user needs highlighting… |
+| SuggestionItemGroup | `ui5-suggestion-item-group` | `@ui5/webcomponents/dist/SuggestionItemGroup.js` | The ui5-suggestion-item-group is type of suggestion item, that can be used to split the ui5-input suggestions into groups. |
+| Switch | `ui5-switch` | `@ui5/webcomponents/dist/Switch.js` | The ui5-switch component is used for changing between binary states. |
+| Tab | `ui5-tab` | `@ui5/webcomponents/dist/Tab.js` | The ui5-tab represents a selectable item inside a ui5-tabcontainer. It defines both the item in the tab strip (top part of the ui5-tabcontainer) and the content that is presented to the user once the tab is selected. |
+| TabSeparator | `ui5-tab-separator` | `@ui5/webcomponents/dist/TabSeparator.js` | The ui5-tab-separator represents a vertical line to separate tabs inside a ui5-tabcontainer. |
+| TabContainer | `ui5-tabcontainer` | `@ui5/webcomponents/dist/TabContainer.js` | The ui5-tabcontainer represents a collection of tabs with associated content. Navigation through the tabs changes the content display of the currently active content area. A tab can be labeled with text only, or icons with text. |
+| Table | `ui5-table` | `@ui5/webcomponents/dist/Table.js` | The ui5-table component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner. To render the ui5-table, you need to define the columns and rows. You can use the provided… |
+| TableCell | `ui5-table-cell` | `@ui5/webcomponents/dist/TableCell.js` | The ui5-table-cell represents a cell inside of a ui5-table. It is tightly coupled to the ui5-table and thus should only be used in the table component. |
+| TableGroupRow | `ui5-table-group-row` | `@ui5/webcomponents/dist/TableGroupRow.js` | The ui5-table-group-row component represents a group header row in the ui5-table. It is used to visually group rows and spans across all visible table columns. |
+| TableGrowing | `ui5-table-growing` | `@ui5/webcomponents/dist/TableGrowing.js` | The ui5-table-growing component is used inside the ui5-table to add a growing/data loading functionalities to the table. |
+| TableHeaderCell | `ui5-table-header-cell` | `@ui5/webcomponents/dist/TableHeaderCell.js` | The ui5-table-header-cell component represents a column in the ui5-table. |
+| TableHeaderCellActionAI | `ui5-table-header-cell-action-ai` | `@ui5/webcomponents/dist/TableHeaderCellActionAI.js` | The ui5-table-header-cell-action-ai component defines a dedicated AI action for the table column. |
+| TableHeaderRow | `ui5-table-header-row` | `@ui5/webcomponents/dist/TableHeaderRow.js` | The ui5-table-header-row component represents the table headers of a ui5-table. |
+| TableRow | `ui5-table-row` | `@ui5/webcomponents/dist/TableRow.js` | The ui5-table-row component represents a row in the ui5-table. |
+| TableRowAction | `ui5-table-row-action` | `@ui5/webcomponents/dist/TableRowAction.js` | The ui5-table-row-action component defines an action for table rows. |
+| TableRowActionNavigation | `ui5-table-row-action-navigation` | `@ui5/webcomponents/dist/TableRowActionNavigation.js` | The ui5-table-row-action-navigation component defines a navigation action for table rows. |
+| TableSelection | `ui5-table-selection` | `@ui5/webcomponents/dist/TableSelection.js` | The ui5-table-selection component is used inside the ui5-table to add key-based selection capabilities to the ui5-table. Deprecated; check the manifest for migration guidance. |
+| TableSelectionMulti | `ui5-table-selection-multi` | `@ui5/webcomponents/dist/TableSelectionMulti.js` | The ui5-table-selection-multi component is used inside the ui5-table to add multi-selection capabilities to the ui5-table. Since selection is key-based, each ui5-table-row must define a unique row-key property. |
+| TableSelectionSingle | `ui5-table-selection-single` | `@ui5/webcomponents/dist/TableSelectionSingle.js` | The ui5-table-selection-single component is used inside the ui5-table to add single selection capabilities to the ui5-table. Since selection is key-based, each ui5-table-row must define a unique row-key property. |
+| TableVirtualizer | `ui5-table-virtualizer` | `@ui5/webcomponents/dist/TableVirtualizer.js` | The ui5-table-virtualizer component is used inside the ui5-table to virtualize the table rows, if the overflowMode property of the table is set to 'Scroll'. It is responsible for rendering only the rows that are visible in the viewport and… |
+| Tag | `ui5-tag` | `@ui5/webcomponents/dist/Tag.js` | The ui5-tag is a component which serves the purpose to attract the user attention to some piece of information (state, quantity, condition, etc.). It can contain icon and text information, and its design can be chosen from specific design… |
+| Text | `ui5-text` | `@ui5/webcomponents/dist/Text.js` | The ui5-text component displays text that can be used in any content area of an application. |
+| TextArea | `ui5-textarea` | `@ui5/webcomponents/dist/TextArea.js` | The ui5-textarea component is used to enter multiple rows of text. |
+| TimePicker | `ui5-time-picker` | `@ui5/webcomponents/dist/TimePicker.js` | The ui5-time-picker component provides an input field with assigned clocks which are opened on user action. The ui5-time-picker allows users to select a localized time using touch, mouse, or keyboard input. It consists of two parts: the… |
+| TimePickerClock | `ui5-time-picker-clock` | `@ui5/webcomponents/dist/TimePickerClock.js` | ui5-time-picker-clock allows selecting of hours,minutes or seconds (depending on property set). The component supports interactions with mouse, touch and mouse wheel. The step for displaying or selecting of items can be configured. |
+| TimeSelectionClocks | `ui5-time-selection-clocks` | `@ui5/webcomponents/dist/TimeSelectionClocks.js` | ui5-time-selection-clocks is component that contains all the ui5-time-picker-clock components necessary for the ui5-time-picker as well as all necessary ui5-toggle-spin-button components used for switching between different clocks.… |
+| TimeSelectionInputs | `ui5-time-selection-inputs` | `@ui5/webcomponents/dist/TimeSelectionInputs.js` | ui5-time-selection-inputs displays a popover with ui5-input components of type="number" and an optional a AM/PM ui5-segmented-button according to the display format given to the ui5-time-picker. Using of numeric input components enables… |
+| Title | `ui5-title` | `@ui5/webcomponents/dist/Title.js` | The ui5-title component is used to display titles inside a page. It is a simple, large-sized text with explicit header/title semantics. |
+| Toast | `ui5-toast` | `@ui5/webcomponents/dist/Toast.js` | The ui5-toast is a small, non-disruptive popup for success or information messages that disappears automatically after a few seconds. |
+| ToggleButton | `ui5-toggle-button` | `@ui5/webcomponents/dist/ToggleButton.js` | The ui5-toggle-button component is an enhanced ui5-button that can be toggled between pressed and normal states. Users can use the ui5-toggle-button as a switch to turn a setting on or off. It can also be used to represent an independent… |
+| ToggleSpinButton | `ui5-toggle-spin-button` | `@ui5/webcomponents/dist/ToggleSpinButton.js` | ui5-toggle-spin-button is explicitly used in the new design of ui5-time-picker. It extends ui5-toggle-button with some specific accessibility-related properties in order to have spin button look and feel from accessibility point of view.… |
+| Token | `ui5-token` | `@ui5/webcomponents/dist/Token.js` | Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. |
+| Tokenizer | `ui5-tokenizer` | `@ui5/webcomponents/dist/Tokenizer.js` | A ui5-tokenizer is an invisible container for ui5-tokens that supports keyboard navigation and token selection. |
+| Toolbar | `ui5-toolbar` | `@ui5/webcomponents/dist/Toolbar.js` | The ui5-toolbar component is used to create a horizontal layout with items. The items can be overflowing in a popover, when the space is not enough to show all of them. |
+| ToolbarButton | `ui5-toolbar-button` | `@ui5/webcomponents/dist/ToolbarButton.js` | The ui5-toolbar-button represents an abstract action, used in the ui5-toolbar. |
+| ToolbarItem | `ui5-toolbar-item` | `@ui5/webcomponents/dist/ToolbarItem.js` | The ui5-toolbar-item is a wrapper component used to integrate UI5 Web Components into the ui5-toolbar. It renders within the toolbar's shadow DOM and manages the lifecycle and overflow behavior of its child component. |
+| ToolbarSelect | `ui5-toolbar-select` | `@ui5/webcomponents/dist/ToolbarSelect.js` | The ui5-toolbar-select component is used to create a toolbar drop-down list. The items inside the ui5-toolbar-select define the available options by using the ui5-toolbar-select-option component. |
+| ToolbarSelectOption | `ui5-toolbar-select-option` | `@ui5/webcomponents/dist/ToolbarSelectOption.js` | The ui5-toolbar-select-option component defines the content of an option in the ui5-toolbar-select. |
+| ToolbarSeparator | `ui5-toolbar-separator` | `@ui5/webcomponents/dist/ToolbarSeparator.js` | The ui5-toolbar-separator is an element, used for visual separation between two elements. It takes no space in calculating toolbar items width. |
+| ToolbarSpacer | `ui5-toolbar-spacer` | `@ui5/webcomponents/dist/ToolbarSpacer.js` | The ui5-toolbar-spacer is an element, used for taking needed space for toolbar items to take 100% width. It takes no space in calculating toolbar items width. |
+| Tree | `ui5-tree` | `@ui5/webcomponents/dist/Tree.js` | The ui5-tree component provides a tree structure for displaying data in a hierarchy. |
+| TreeItem | `ui5-tree-item` | `@ui5/webcomponents/dist/TreeItem.js` | The ui5-tree-item represents a node in a tree structure, shown as a ui5-list. |
+| TreeItemCustom | `ui5-tree-item-custom` | `@ui5/webcomponents/dist/TreeItemCustom.js` | The ui5-tree-item-custom represents a node in a tree structure, shown as a ui5-list. |
+| YearPicker | `ui5-yearpicker` | `@ui5/webcomponents/dist/YearPicker.js` | Displays years which can be selected. |
+| YearRangePicker | `ui5-yearrangepicker` | `@ui5/webcomponents/dist/YearRangePicker.js` | Displays year ranges which help navigate through years faster. |
+
+## Discovering this file
+
+Package documentation is not automatically loaded by every coding assistant. In your application's agent instructions, point to this installed package's llms.txt and ask the assistant to read it before using these components. Tools can resolve @ui5/webcomponents/llms.txt and read it as text.
+
+Generated by @ui5/webcomponents-tools from the installed package metadata and public manifest. This file is a build artifact shipped in npm and ignored by Git. Maintainers: run yarn generateAPI from the repository root to refresh after API changes; edit packages/tools/lib/cem/llms.mjs for usage guidance.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents",
-  "version": "2.28.1",
+  "version": "2.29.0-rc.1",
   "description": "UI5 Web Components: webcomponents.main",
   "ui5": {
     "webComponentsPackage": true
@@ -23,6 +23,7 @@
     "generate": "wc-dev generate",
     "generateCEM": "wc-dev generateAPI.generateCEM",
     "mergeCEM": "wc-dev generateAPI.mergeCEM",
+    "generateLLMs": "wc-dev generateAPI.generateLLMs",
     "validateCEM": "wc-dev generateAPI.validateCEM",
     "build": "wc-dev build",
     "bundle": "wc-dev build.bundle",
@@ -39,12 +40,14 @@
     "test:vitest": "yarn vitest run",
     "test:ssr": "node -e \"import('./test/ssr/component-imports.js')\"",
     "create-ui5-element": "wc-create-ui5-element",
-    "prepublishOnly": "tsc -b"
+    "prepublishOnly": "tsc -b",
+    "prepack": "yarn generateLLMs"
   },
   "exports": {
     "./src/*": "./src/*",
     "./dist/*": "./dist/*",
     "./package.json": "./package.json",
+    "./llms.txt": "./llms.txt",
     "./bundle.esm.js": "./bundle.esm.js",
     "./bundle.common.js": "./bundle.common.js",
     "./bundle.scoped.esm.js": "./bundle.scoped.esm.js",
@@ -56,22 +59,22 @@
     "directory": "packages/main"
   },
   "dependencies": {
-    "@ui5/webcomponents-base": "2.28.1",
-    "@ui5/webcomponents-icons": "2.28.1",
-    "@ui5/webcomponents-icons-business-suite": "2.28.1",
-    "@ui5/webcomponents-icons-tnt": "2.28.1",
-    "@ui5/webcomponents-localization": "2.28.1",
-    "@ui5/webcomponents-theming": "2.28.1"
+    "@ui5/webcomponents-base": "2.29.0-rc.1",
+    "@ui5/webcomponents-icons": "2.29.0-rc.1",
+    "@ui5/webcomponents-icons-business-suite": "2.29.0-rc.1",
+    "@ui5/webcomponents-icons-tnt": "2.29.0-rc.1",
+    "@ui5/webcomponents-localization": "2.29.0-rc.1",
+    "@ui5/webcomponents-theming": "2.29.0-rc.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.10",
     "@ui5/cypress-internal": "0.1.0",
-    "@ui5/webcomponents-tools": "2.28.1",
+    "@ui5/webcomponents-tools": "2.29.0-rc.1",
     "cypress": "15.18.1",
     "jsdom": "^26.0.0",
     "lit": "^2.0.0",
     "vite": "5.4.21",
     "vitest": "^3.2.7"
   },
-  "gitHead": "a1c8be3fdb2b6ece9f6f0a3c0e03a90cfe3878f3"
+  "gitHead": "87edd7e1a7e71ff6b967b6102d5b31ae9c2b8287"
 }

package/src/CarouselTemplate.tsx

@@ -17,6 +17,7 @@ export default function CarouselTemplate(this: Carousel) {
 			onMouseOut={this._onmouseout}
 			onMouseOver={this._onmouseover}
 			onTouchStart={this._ontouchstart}
+			onTouchEnd={this._ontouchend}
 			onMouseDown={this._onmousedown}
 		>
 			<div class={this.classes.viewport} part="content">
@@ -64,7 +65,6 @@ export default function CarouselTemplate(this: Carousel) {
 
 function arrowBack(this: Carousel) {
 	return <Icon name={slimArrowLeft}
-		tabindex={-1}
 		data-ui5-arrow-back
 		title={this.previousPageText}
 		mode="Decorative"
@@ -72,13 +72,12 @@ function arrowBack(this: Carousel) {
 			"ui5-carousel-navigation-button": true,
 			"ui5-carousel-navigation-button--hidden": !this.hasPrev
 		}}
-		onClick={this._navButtonClick}
+		onClick={this._onNavButtonClick}
 	/>;
 }
 
 function arrowForward(this: Carousel) {
 	return <Icon name={slimArrowRight}
-		tabindex={-1}
 		data-ui5-arrow-forward
 		title={this.nextPageText}
 		mode="Decorative"
@@ -86,7 +85,7 @@ function arrowForward(this: Carousel) {
 			"ui5-carousel-navigation-button": true,
 			"ui5-carousel-navigation-button--hidden": !this.hasNext
 		}}
-		onClick={this._navButtonClick}
+		onClick={this._onNavButtonClick}
 	/>;
 }
 

package/src/ComboBoxItemTemplate.tsx

@@ -1,16 +1,23 @@
 import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
 import type ComboBoxItem from "./ComboBoxItem.js";
+import generateHighlightedMarkupFirstMatch from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js";
 
 export default function ComboBoxItemTemplate(this: ComboBoxItem) {
 	return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
 }
 
 function listItemContent(this: ComboBoxItem) {
+	const text = this.text ?? "";
+	const highlightedMarkup = this.markupText ? generateHighlightedMarkupFirstMatch(text, this.markupText) : undefined;
+
 	return (
 		<div part="content" id="content" class="ui5-li-content">
 			<div class="ui5-li-text-wrapper">
-				{ this.markupText && <span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: this.markupText }}></span> }
-				{ this.additionalText && <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span> }
+				{highlightedMarkup
+					? <span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: highlightedMarkup }}></span>
+					: <span part="title" className="ui5-li-title">{text}</span>
+				}
+				{this.additionalText && <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span>}
 			</div>
 		</div>
 	);

package/src/ComboBoxPopoverTemplate.tsx

@@ -8,7 +8,6 @@ import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import BusyIndicator from "./BusyIndicator.js";
 import SuggestionItem from "./SuggestionItem.js";
-import generateHighlightedMarkupFirstMatch from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js";
 import type ComboBox from "./ComboBox.js";
 import { LOADING_DELAY } from "./features/ComboBoxLazyLoading.js";
 
@@ -185,11 +184,11 @@ function dialogHeader(this: ComboBox) {
 							return item.items
 								.filter(nestedItem => !!nestedItem)
 								.map(nestedItem =>
-									<SuggestionItem text={nestedItem.text} additionalText={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue)} />
+									<SuggestionItem text={nestedItem.text} additionalText={nestedItem.additionalText} markupText={this.filterValue} />
 								);
 						}
 						// For regular items
-						return <SuggestionItem text={item.text} additionalText={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue)} />;
+						return <SuggestionItem text={item.text} additionalText={item.additionalText} markupText={this.filterValue} />;
 					})}
 				</Input>
 			</div>

package/src/ListItemTemplate.tsx

@@ -87,7 +87,7 @@ export default function ListItemTemplate(this: ListItem, hooks?: Partial<ListIte
 		)}
 
 		{this.typeNavigation && (
-			<Icon name={slimArrowRightIcon} />
+			<Icon name={slimArrowRightIcon} class="ui5-li-navigation-arrow" />
 		)}
 
 		{this.navigated && (

package/src/SliderTemplate.tsx

@@ -86,7 +86,7 @@ export default function SliderTemplate(this: Slider) {
 					onFocusOut={this._onfocusout}
 					onFocusIn={this._onfocusin}
 					part="scale"
-					exportparts="inner: scale-inner, progress: progress"
+					exportparts="inner: scale-inner, progress: progress-bar"
 				>
 					{handle(this)}
 

package/src/SuggestionItemTemplate.tsx

@@ -1,14 +1,21 @@
 import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
 import type SuggestionItem from "./SuggestionItem.js";
+import highlightText from "@ui5/webcomponents-base/dist/util/highlightText.js";
 
 export default function SuggestionItemTemplate(this: SuggestionItem) {
 	return [ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" })];
 }
 
 function listItemContent(this: SuggestionItem) {
+	const text = this.text ?? "";
+	const highlightedMarkup = this.markupText ? highlightText(text, this.markupText) : undefined;
+
 	return <div part="content" id="content" class="ui5-li-content">
 		<div class="ui5-li-text-wrapper">
-			<span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: this.markupText }}></span>
+			{highlightedMarkup
+				? <span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: highlightedMarkup }}></span>
+				: <span part="title" className="ui5-li-title">{text}</span>
+			}
 			{this.additionalText &&
 				<span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span>
 			}

package/src/TabInStripTemplate.tsx

@@ -1,5 +1,4 @@
 import type Tab from "./Tab.js";
-import Button from "./Button.js";
 import Icon from "./Icon.js";
 import slimArrowDownIcon from "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
 
@@ -74,18 +73,8 @@ export default function TabInStripTemplate(this: Tab) {
 			{this.requiresExpandButton &&
 				<>
 					<div class="ui5-tab-expand-button-separator"></div>
-					<div
-						class="ui5-tab-expand-button"
-					>
-						<Button
-							ref={this.captureButtonRef.bind(this)}
-							icon={slimArrowDownIcon}
-							design="Transparent"
-							tabindex={ -1 }
-							disabled={this.disabled}
-							tooltip={this.expandButtonTitle}
-							accessibilityAttributes={this.expandBtnAccessibilityAttributes}
-						/>
+					<div class="ui5-tab-expand-button" title={this.expandButtonTitle}>
+						<Icon class="ui5-tab-expand-icon" name={slimArrowDownIcon}/>
 					</div>
 				</>
 			}

package/src/themes/Bar.css

@@ -99,7 +99,7 @@
 	--_ui5_button_overlay_badge_offset: -0.25rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	::slotted([ui5-button]) {
 		--_ui5_button_overlay_badge_offset: initial;
 	}

package/src/themes/ColorPicker.css

@@ -98,10 +98,6 @@
     display: none;
 }
 
-[ui5-slider]::part(progress) {
-    background: transparent;
-}
-
 [ui5-slider].ui5-color-picker-hue-slider::part(scale) {
     background-size: 100%;
     background-image: -webkit-linear-gradient(left, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
@@ -239,7 +235,7 @@
     display: none;
 }
 
-:dir(rtl) [ui5-slider].ui5-color-picker-hue-slider::part(progress-container) {
+:dir(rtl) [ui5-slider].ui5-color-picker-hue-slider::part(scale) {
     background-image: -webkit-linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     background-image: -moz-linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
     background-image: linear-gradient(right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);

package/src/themes/ListItem.css

@@ -152,7 +152,8 @@
 }
 
 .ui5-li-multisel-cb,
-.ui5-li-singlesel-radiobtn {
+.ui5-li-singlesel-radiobtn,
+.ui5-li-navigation-arrow {
 	flex-shrink: 0;
 }
 

package/src/themes/OptionBase.css

@@ -1,10 +1,25 @@
+:host(:not([hidden])) {
+	display: flex;
+}
+
 :host {
-	height: var(--_ui5_list_item_dropdown_base_height);
+	height: auto;
+	min-height: var(--_ui5_list_item_dropdown_base_height);
 	--_ui5_list_item_title_size: var(--sapFontSize);
 }
 
+:host .ui5-li-root {
+	height: auto;
+}
+
+:host .ui5-li-content {
+	padding-block: 0.375rem;
+	overflow: visible;
+	white-space: normal;
+}
+
 :host(:active[actionable]:not([data-moving])),
 :host(:active[actionable][selected]:not([data-moving])) {
 	background-color: var(--sapList_Active_Background);
 	border-bottom-color: var(--sapList_Active_Background);
-}
+}

package/src/themes/TabInStrip.css

@@ -56,26 +56,38 @@
 	z-index: 1;
 	background-color: var(--_ui5_tc_header_background);
 	padding-inline-end: 0.188rem;
-}
-
-.ui5-tab-expand-button > [ui5-button] {
-	height: 1.5rem;
-	min-width: 1.5rem;
-	margin-inline-start: var(--_ui5_tc_headerItem_expand_button_margin_inline_start);
-	--_ui5_button_border_radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
-	--_ui5_button_focused_border_radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
-}
-
-.ui5-tab-expand-button > [ui5-button]:not([active]) {
-	color: var(--_ui5_tc_headerItem_color);
-}
 
-.ui5-tab-strip-item--selected .ui5-tab-expand-button > [ui5-button]:not([active]) {
-	color: var(--_ui5_tc_headerItem_text_selected_color);
-}
-
-.ui5-tab-expand-button > [ui5-button]:hover:not([active]) {
-	color: var(--_ui5_tc_headerItem_text_selected_hover_color);
+	& .ui5-tab-expand-icon {
+		box-sizing: content-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 1rem;
+		height: 1rem;
+		padding: 0.1875rem;
+		margin-inline-start: var(--_ui5_tc_headerItem_expand_button_margin_inline_start);
+		font-size: 1rem;
+		border: 0.0625rem solid var(--sapButton_Lite_BorderColor);
+		border-radius: var(--_ui5_tc_headerItem_expand_button_border_radius);
+		background-color: var(--sapButton_Lite_Background);
+		color: var(--sapTextColor);
+	}
+
+	&:hover .ui5-tab-expand-icon {
+		background-color: var(--sapButton_Lite_Hover_Background);
+		border-color: var(--sapButton_Hover_BorderColor);
+		color: var(--sapButton_Lite_Hover_TextColor);
+	}
+
+	&:active .ui5-tab-expand-icon {
+		background-color: var(--sapButton_Active_Background);
+		border-color: var(--sapButton_Active_BorderColor);
+		color: var(--sapButton_Active_TextColor);
+	}
+}
+
+.ui5-tab-strip-item--selected .ui5-tab-expand-icon {
+	color: var(--sapContent_Selected_ForegroundColor);
 }
 
 .ui5-tab-expand-button-separator {
@@ -94,6 +106,10 @@
 	z-index: 2;
 }
 
+.ui5-tab-strip-item:has(.ui5-tab-expand-button:hover) .ui5-tab-expand-button-separator {
+	visibility: hidden;
+}
+
 .ui5-tab-strip-item--selected .ui5-tab-expand-button-separator {
 	background: var(--_ui5_tc_headerItem_text_selected_color);
 }

package/src/themes/base/CalendarHeader-parameters.css

@@ -20,7 +20,7 @@
 	--_ui5_calendar_header_arrow_button_flex_shrink: 0;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_calendar_header_midcontainer_gap: 0;
 		--_ui5_calendar_header_arrow_button_flex_shrink: 1;

package/src/themes/base/CheckBox-parameters.css

@@ -45,7 +45,7 @@
 	--_ui5_checkbox_right_focus_distance: 0;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_checkbox_label_offset: var(--_ui5_checkbox_compact_wrapper_padding);
 	}

package/src/themes/base/Input-parameters.css

@@ -73,7 +73,7 @@
 	--_ui5_input_tokenizer_min_width: 3.5rem;
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_input_min_width: 2rem;
 		--_ui5_input_min_width_tokenizer_available: 2rem;

package/src/themes/base/InputIcon-parameters.css

@@ -17,7 +17,7 @@
 	--_ui5_input_icon_success_pressed_color: var(--sapButton_Active_TextColor);
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_input_icon_padding: .25rem .4375rem;
 	}

package/src/themes/base/Panel-parameters.css

@@ -16,7 +16,7 @@
 	--_ui5_panel_header_background_color: var(--sapBackgroundColor);
 }
 
-@container style(--ui5_content_density: compact) {
+@ui5-compact-size {
 	:host {
 		--_ui5_panel_header_button_wrapper_padding: .1875rem .25rem;
 	}