@ui5/webcomponents 2.27.0-rc.0 → 2.27.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/dist/.tsbuildinfo +1 -1
- package/dist/DatePicker.d.ts +4 -4
- package/dist/DatePicker.js +4 -4
- package/dist/DatePicker.js.map +1 -1
- package/dist/DayPicker.d.ts +1 -0
- package/dist/DayPicker.js +4 -1
- package/dist/DayPicker.js.map +1 -1
- package/dist/DayPickerTemplate.js +1 -1
- package/dist/DayPickerTemplate.js.map +1 -1
- package/dist/Icon.js +3 -0
- package/dist/Icon.js.map +1 -1
- package/dist/List.js +1 -1
- package/dist/List.js.map +1 -1
- package/dist/ListItem.d.ts +4 -2
- package/dist/ListItem.js +5 -9
- package/dist/ListItem.js.map +1 -1
- package/dist/ListItemGroup.d.ts +7 -23
- package/dist/ListItemGroup.js +4 -21
- package/dist/ListItemGroup.js.map +1 -1
- package/dist/ListItemGroupBase.d.ts +41 -0
- package/dist/ListItemGroupBase.js +54 -0
- package/dist/ListItemGroupBase.js.map +1 -0
- package/dist/ListItemStandardTemplate.js +1 -1
- package/dist/ListItemStandardTemplate.js.map +1 -1
- package/dist/OptionGroup.d.ts +4 -4
- package/dist/OptionGroup.js +3 -3
- package/dist/OptionGroup.js.map +1 -1
- package/dist/Popover.js +5 -3
- package/dist/Popover.js.map +1 -1
- package/dist/SplitButton.d.ts +7 -3
- package/dist/SplitButton.js +4 -4
- package/dist/SplitButton.js.map +1 -1
- package/dist/SplitButtonTemplate.js +1 -1
- package/dist/SplitButtonTemplate.js.map +1 -1
- package/dist/ToolbarButton.d.ts +18 -0
- package/dist/ToolbarButton.js +16 -0
- package/dist/ToolbarButton.js.map +1 -1
- package/dist/ToolbarButtonTemplate.js +1 -1
- package/dist/ToolbarButtonTemplate.js.map +1 -1
- package/dist/custom-elements-internal.json +153 -182
- package/dist/custom-elements.json +136 -124
- package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
- package/dist/generated/assets/i18n/messagebundle_en_US_saprigi.json +1 -1
- package/dist/generated/i18n/i18n-defaults.d.ts +2 -1
- package/dist/generated/i18n/i18n-defaults.js +2 -1
- package/dist/generated/i18n/i18n-defaults.js.map +1 -1
- package/dist/vscode.html-custom-data.json +25 -25
- package/dist/web-types.json +54 -84
- package/package.json +9 -9
- package/src/DayPickerTemplate.tsx +1 -1
- package/src/ListItemStandardTemplate.tsx +1 -1
- package/src/SplitButtonTemplate.tsx +1 -2
- package/src/ToolbarButtonTemplate.tsx +2 -0
- package/src/i18n/messagebundle.properties +3 -0
- package/src/i18n/messagebundle_en.properties +2 -0
- package/src/i18n/messagebundle_en_US_saprigi.properties +7 -6
|
@@ -1030,7 +1030,7 @@
|
|
|
1030
1030
|
},
|
|
1031
1031
|
{
|
|
1032
1032
|
"name": "header-text",
|
|
1033
|
-
"description": "Defines the header text of the
|
|
1033
|
+
"description": "Defines the header text of the group.",
|
|
1034
1034
|
"values": []
|
|
1035
1035
|
},
|
|
1036
1036
|
{
|
|
@@ -1043,7 +1043,7 @@
|
|
|
1043
1043
|
},
|
|
1044
1044
|
{
|
|
1045
1045
|
"name": "ui5-date-picker",
|
|
1046
|
-
"description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the valueFormat is \"yyyy-MM-dd\", the displayFormat is \"MMM d, y\", and the used locale is English, a valid value string is \"2015-07-30\", which leads to an output of \"Jul 30, 2015\".\nIf no placeholder is set to the DatePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set.\n\n### Relative date input\n\nThe input field also accepts locale-aware relative date expressions sourced from the Unicode CLDR.\nThe following expressions are supported in English:\n\n- Day: \"today\", \"yesterday\", \"tomorrow\"\n- Week: \"this week\", \"last week\", \"next week\"\n- Month: \"this month\", \"last month\", \"next month\"\n- Year: \"this year\", \"last year\", \"next year\"\n\nThe recognized expressions are locale-specific — the equivalent terms in the user's language are used (for example, \"heute\" in German, \"bugün\" in Turkish).\nWeek, month, and year expressions resolve to an offset from today (for example, \"next week\" = today + 7 days).\nFor the full list of supported fields and patterns, see [CLDR Date Fields](https://unicode.org/reports/tr35/tr35-dates.html#Calendar_Fields).\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n<script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DatePicker.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **close** - Fired after the component's picker is closed.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **open** - Fired after the component's picker is opened.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Methods:**\n - **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **isValid(value: _string_): _boolean_** - @deprecated Use isValidValue or isValidDisplayValue instead - Checks if a value is valid against the current date format of the DatePicker.\n- **isValidDisplayValue(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isValidValue(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n### **CSS Parts:**\n - **input** - Used to style the input element. This part is forwarded to the underlying ui5-input element.",
|
|
1046
|
+
"description": "### Overview\n\nThe `ui5-date-picker` component provides an input field with assigned calendar which opens on user action.\nThe `ui5-date-picker` allows users to select a localized date using touch,\nmouse, or keyboard input. It consists of two parts: the date input field and the\ndate picker.\n\n### Usage\n\nThe user can enter a date by:\n\n- Using the calendar that opens in a popup\n- Typing it in directly in the input field\n\nWhen the user makes an entry and presses the enter key, the calendar shows the corresponding date.\nWhen the user directly triggers the calendar display, the actual date is displayed.\n\n### Formatting\n\nIf a date is entered by typing it into\nthe input field, it must fit to the used date format.\n\nSupported format options are pattern-based on Unicode LDML Date Format notation.\nFor more information, see [UTS #35: Unicode Locale Data Markup Language](https://unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table).\n\nFor example, if the valueFormat is \"yyyy-MM-dd\", the displayFormat is \"MMM d, y\", and the used locale is English, a valid value string is \"2015-07-30\", which leads to an output of \"Jul 30, 2015\".\nIf no placeholder is set to the DatePicker, the used displayFormat is displayed as a placeholder. If another placeholder is needed, it must be set.\n\n### Relative date input\n\nThe input field also accepts locale-aware relative date expressions sourced from the Unicode CLDR.\nThe following expressions are supported in English:\n\n- Day: \"today\", \"yesterday\", \"tomorrow\", \"in N days\", \"N days ago\"\n- Week: \"this week\", \"last week\", \"next week\", \"in N weeks\", \"N weeks ago\"\n- Month: \"this month\", \"last month\", \"next month\", \"in N months\", \"N months ago\"\n- Year: \"this year\", \"last year\", \"next year\", \"in N years\", \"N years ago\"\n\nThe recognized expressions are locale-specific — the equivalent terms in the user's language are used (for example, \"heute\" in German, \"bugün\" in Turkish).\nWeek, month, and year expressions resolve to an offset from today (for example, \"next week\" = today + 7 days).\nFor the full list of supported fields and patterns, see [CLDR Date Fields](https://unicode.org/reports/tr35/tr35-dates.html#Calendar_Fields).\n\n### Keyboard Handling\nThe `ui5-date-picker` provides advanced keyboard handling.\nIf the `ui5-date-picker` is focused,\nyou can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.\nOnce the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys\nto navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can\nuse TAB to reach the buttons for changing month and year.\n\nIf the `ui5-date-picker` input field is focused and its corresponding picker dialog is not opened,\nthen users can increment or decrement the date referenced by `dateValue` property\nby using the following shortcuts:\n\n- [Page Down] - Decrements the corresponding day of the month by one\n- [Shift] + [Page Down] - Decrements the corresponding month by one\n- [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one\n- [Page Up] - Increments the corresponding day of the month by one\n- [Shift] + [Page Up] - Increments the corresponding month by one\n- [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one\n\n### Calendar types\nThe component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.\nBy default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,\nyou need to set the `primaryCalendarType` property and import one or more of the following modules:\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Islamic.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Japanese.js\";`\n\n`import \"@ui5/webcomponents-localization/dist/features/calendar/Persian.js\";`\n\nOr, you can use the global configuration and set the `calendarType` key:\n\n```html\n<script data-id=\"sap-ui-config\" type=\"application/json\">\n\t{\n\t\t\"calendarType\": \"Japanese\"\n\t}\n<script>\n```\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/DatePicker.js\";`\n---\n\n\n### **Events:**\n - **change** - Fired when the input operation has finished by pressing Enter or on focusout.\n- **close** - Fired after the component's picker is closed.\n- **input** - Fired when the value of the component is changed at each key stroke.\n- **open** - Fired after the component's picker is opened.\n- **value-state-change** - Fired before the value state of the component is updated internally.\nThe event is preventable, meaning that if it's default action is\nprevented, the component will not update the value state.\n\n### **Methods:**\n - **formatValue(date: _Date_): _string_** - Formats a Java Script date object into a string representing a locale date\naccording to the `formatPattern` property of the DatePicker instance\n- **isInValidRange(value: _string_): _boolean_** - Checks if a date is between the minimum and maximum date.\n- **isValid(value: _string_): _boolean_** - @deprecated Use isValidValue or isValidDisplayValue instead - Checks if a value is valid against the current date format of the DatePicker.\n- **isValidDisplayValue(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n- **isValidValue(value: _string_): _boolean_** - Checks if a value is valid against the current date format of the DatePicker.\n\n### **Slots:**\n - **valueStateMessage** - Defines the value state message that will be displayed as pop up under the component.\n\n**Note:** If not specified, a default text (in the respective language) will be displayed.\n\n**Note:** The `valueStateMessage` would be displayed,\nwhen the component is in `Information`, `Critical` or `Negative` value state.\n\n### **CSS Parts:**\n - **input** - Used to style the input element. This part is forwarded to the underlying ui5-input element.",
|
|
1047
1047
|
"attributes": [
|
|
1048
1048
|
{
|
|
1049
1049
|
"name": "accessible-description",
|
|
@@ -2529,7 +2529,7 @@
|
|
|
2529
2529
|
},
|
|
2530
2530
|
{
|
|
2531
2531
|
"name": "type",
|
|
2532
|
-
"description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection
|
|
2532
|
+
"description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
|
|
2533
2533
|
"values": [
|
|
2534
2534
|
{ "name": "Navigation" },
|
|
2535
2535
|
{ "name": "Inactive" },
|
|
@@ -2543,7 +2543,7 @@
|
|
|
2543
2543
|
},
|
|
2544
2544
|
{
|
|
2545
2545
|
"name": "ui5-li-group",
|
|
2546
|
-
"description": "### Overview\nThe `ui5-li-group` is a special list item, used only to create groups of list items.\n\nThis is the item to use inside a `ui5-list`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";`\n---\n\n\n### **Events:**\n - **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n- **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n### **Slots:**\n - **default** - Defines the items of the
|
|
2546
|
+
"description": "### Overview\nThe `ui5-li-group` is a special list item, used only to create groups of list items.\n\nThis is the item to use inside a `ui5-list`.\n\n### ES6 Module Import\n`import \"@ui5/webcomponents/dist/ListItemGroup.js\";`\n---\n\n\n### **Events:**\n - **move** - Fired when a movable list item is dropped onto a drop target.\n\n**Note:** `move` event is fired only if there was a preceding `move-over` with prevented default action.\n- **move-over** - Fired when a movable list item is moved over a potential drop target during a dragging operation.\n\nIf the new position is valid, prevent the default action of the event using `preventDefault()`.\n\n### **Slots:**\n - **default** - Defines the items of the group.\n- **header** - Defines the header of the component.\n\n**Note:** Using this slot, the default header text of group and the value of `headerText` property will be overwritten.\n\n### **CSS Parts:**\n - **header** - Used to style the header item of the group\n- **title** - Used to style the title of the group header",
|
|
2547
2547
|
"attributes": [
|
|
2548
2548
|
{
|
|
2549
2549
|
"name": "header-accessible-name",
|
|
@@ -2552,7 +2552,7 @@
|
|
|
2552
2552
|
},
|
|
2553
2553
|
{
|
|
2554
2554
|
"name": "header-text",
|
|
2555
|
-
"description": "Defines the header text of the
|
|
2555
|
+
"description": "Defines the header text of the group.",
|
|
2556
2556
|
"values": []
|
|
2557
2557
|
},
|
|
2558
2558
|
{
|
|
@@ -2674,7 +2674,7 @@
|
|
|
2674
2674
|
},
|
|
2675
2675
|
{
|
|
2676
2676
|
"name": "type",
|
|
2677
|
-
"description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection
|
|
2677
|
+
"description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
|
|
2678
2678
|
"values": [
|
|
2679
2679
|
{ "name": "Navigation" },
|
|
2680
2680
|
{ "name": "Inactive" },
|
|
@@ -2831,7 +2831,7 @@
|
|
|
2831
2831
|
},
|
|
2832
2832
|
{
|
|
2833
2833
|
"name": "type",
|
|
2834
|
-
"description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection
|
|
2834
|
+
"description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
|
|
2835
2835
|
"values": [
|
|
2836
2836
|
{ "name": "Navigation" },
|
|
2837
2837
|
{ "name": "Inactive" },
|
|
@@ -3121,7 +3121,7 @@
|
|
|
3121
3121
|
},
|
|
3122
3122
|
{
|
|
3123
3123
|
"name": "header-text",
|
|
3124
|
-
"description": "Defines the header text of the
|
|
3124
|
+
"description": "Defines the header text of the group.",
|
|
3125
3125
|
"values": []
|
|
3126
3126
|
},
|
|
3127
3127
|
{
|
|
@@ -3392,22 +3392,12 @@
|
|
|
3392
3392
|
},
|
|
3393
3393
|
{
|
|
3394
3394
|
"name": "ui5-option-group",
|
|
3395
|
-
"description": "### Overview\n\nThe `ui5-option-group` component is used to group options within a `ui5-select`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/OptionGroup.js\";`\n---\n\n\n### **
|
|
3395
|
+
"description": "### Overview\n\nThe `ui5-option-group` component is used to group options within a `ui5-select`.\n\n### ES6 Module Import\n\n`import \"@ui5/webcomponents/dist/OptionGroup.js\";`\n---\n\n\n### **Slots:**\n - **default** - Defines the options of the group.\n\n**Note:** Use the `ui5-option` component to define the desired options.",
|
|
3396
3396
|
"attributes": [
|
|
3397
|
-
{
|
|
3398
|
-
"name": "header-accessible-name",
|
|
3399
|
-
"description": "Defines the accessible name of the header.",
|
|
3400
|
-
"values": []
|
|
3401
|
-
},
|
|
3402
3397
|
{
|
|
3403
3398
|
"name": "header-text",
|
|
3404
|
-
"description": "Defines the header text of the
|
|
3399
|
+
"description": "Defines the header text of the group.",
|
|
3405
3400
|
"values": []
|
|
3406
|
-
},
|
|
3407
|
-
{
|
|
3408
|
-
"name": "wrapping-type",
|
|
3409
|
-
"description": "Defines if the text of the component should wrap when it's too long.\nWhen set to \"Normal\", the content (title, description) will be wrapped\nusing the `ui5-expandable-text` component.<br/>\n\nThe text can wrap up to 100 characters on small screens (size S) and\nup to 300 characters on larger screens (size M and above). When text exceeds\nthese limits, it truncates with an ellipsis followed by a text expansion trigger.\n\nAvailable options are:\n- `None` (default) - The text will truncate with an ellipsis.\n- `Normal` - The text will wrap (without truncation).",
|
|
3410
|
-
"values": [{ "name": "None" }, { "name": "Normal" }]
|
|
3411
3401
|
}
|
|
3412
3402
|
],
|
|
3413
3403
|
"references": []
|
|
@@ -4239,7 +4229,7 @@
|
|
|
4239
4229
|
"attributes": [
|
|
4240
4230
|
{
|
|
4241
4231
|
"name": "accessibility-attributes",
|
|
4242
|
-
"description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **
|
|
4232
|
+
"description": "Defines the additional accessibility attributes that will be applied to the component.\nThe `accessibilityAttributes` property accepts an object with the following optional fields:\n\n- **root**: Attributes that will be applied to the main (text) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **title**: Specifies a tooltip or description for screen readers.\n Accepts any string value.\n\t- **ariaKeyShortcuts**: Defines keyboard shortcuts that activate or give focus to the button.\n\n- **arrowButton**: Attributes applied specifically to the arrow (split) button.\n - **hasPopup**: Indicates the presence and type of popup triggered by the arrow button.\n Accepts string values: `\"dialog\"`, `\"grid\"`, `\"listbox\"`, `\"menu\"`, or `\"tree\"`.\n - **expanded**: Indicates whether the popup triggered by the arrow button is currently expanded.\n Accepts boolean values: `true` or `false`.",
|
|
4243
4233
|
"values": [{ "name": "SplitButtonAccessibilityAttributes" }]
|
|
4244
4234
|
},
|
|
4245
4235
|
{
|
|
@@ -4395,7 +4385,7 @@
|
|
|
4395
4385
|
},
|
|
4396
4386
|
{
|
|
4397
4387
|
"name": "header-text",
|
|
4398
|
-
"description": "Defines the header text of the
|
|
4388
|
+
"description": "Defines the header text of the group.",
|
|
4399
4389
|
"values": []
|
|
4400
4390
|
},
|
|
4401
4391
|
{
|
|
@@ -4500,7 +4490,7 @@
|
|
|
4500
4490
|
},
|
|
4501
4491
|
{
|
|
4502
4492
|
"name": "type",
|
|
4503
|
-
"description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection
|
|
4493
|
+
"description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
|
|
4504
4494
|
"values": [
|
|
4505
4495
|
{ "name": "Navigation" },
|
|
4506
4496
|
{ "name": "Inactive" },
|
|
@@ -5687,6 +5677,11 @@
|
|
|
5687
5677
|
"description": "Defines the additional accessibility attributes that will be applied to the component.\n\nThe following fields are supported:\n\n- **expanded**: Indicates whether the button, or another grouping element it controls, is currently expanded or collapsed.\nAccepts the following string values: `true` or `false`\n\n- **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.\nAccepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.\n\n- **controls**: Identifies the element (or elements) whose contents or presence are controlled by the button element.\nAccepts a lowercase string value.",
|
|
5688
5678
|
"values": [{ "name": "ButtonAccessibilityAttributes" }]
|
|
5689
5679
|
},
|
|
5680
|
+
{
|
|
5681
|
+
"name": "accessible-description",
|
|
5682
|
+
"description": "Defines the accessible description of the component.",
|
|
5683
|
+
"values": []
|
|
5684
|
+
},
|
|
5690
5685
|
{
|
|
5691
5686
|
"name": "accessible-name",
|
|
5692
5687
|
"description": "Defines the accessible ARIA name of the component.",
|
|
@@ -5697,6 +5692,11 @@
|
|
|
5697
5692
|
"description": "Receives id(or many ids) of the elements that label the component.",
|
|
5698
5693
|
"values": []
|
|
5699
5694
|
},
|
|
5695
|
+
{
|
|
5696
|
+
"name": "accessible-role",
|
|
5697
|
+
"description": "Defines the ARIA role of the component.\n\n**Note:** Use `ButtonAccessibleRole.Link` role only with a press handler that performs navigation.\nIn all other scenarios the default button semantics are recommended.",
|
|
5698
|
+
"values": [{ "name": "Button" }, { "name": "Link" }]
|
|
5699
|
+
},
|
|
5700
5700
|
{
|
|
5701
5701
|
"name": "design",
|
|
5702
5702
|
"description": "Defines the action design.",
|
|
@@ -6053,7 +6053,7 @@
|
|
|
6053
6053
|
},
|
|
6054
6054
|
{
|
|
6055
6055
|
"name": "type",
|
|
6056
|
-
"description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection
|
|
6056
|
+
"description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
|
|
6057
6057
|
"values": [
|
|
6058
6058
|
{ "name": "Navigation" },
|
|
6059
6059
|
{ "name": "Inactive" },
|
|
@@ -6159,7 +6159,7 @@
|
|
|
6159
6159
|
},
|
|
6160
6160
|
{
|
|
6161
6161
|
"name": "type",
|
|
6162
|
-
"description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection
|
|
6162
|
+
"description": "Defines the visual indication and behavior of the list items.\nAvailable options are `Active` (by default), `Inactive`, `InactiveSelectable`, `Detail` and `Navigation`.\n\n**Note:** When set to `Active` or `Navigation`, the item will provide visual response upon press and hover,\nwhile with type `Inactive`, `InactiveSelectable` and `Detail` - will not.\n\n**Note:** `InactiveSelectable` behaves like `Inactive` but allows selection to be toggled\nvia the checkbox (Multi mode) or radio button (Single modes) when the list has a selection mode.\nClicking the item body or pressing Space/Enter does not trigger selection — only interacting\nwith the selection component directly does. The `item-click` event is not fired for this type.",
|
|
6163
6163
|
"values": [
|
|
6164
6164
|
{ "name": "Navigation" },
|
|
6165
6165
|
{ "name": "Inactive" },
|