@ui5/webcomponents 2.26.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.
Files changed (208) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/dist/.tsbuildinfo +1 -1
  3. package/dist/Avatar.d.ts +7 -0
  4. package/dist/Avatar.js +18 -5
  5. package/dist/Avatar.js.map +1 -1
  6. package/dist/ComboBoxItemGroup.d.ts +2 -0
  7. package/dist/ComboBoxItemGroup.js +2 -0
  8. package/dist/ComboBoxItemGroup.js.map +1 -1
  9. package/dist/DatePicker.d.ts +14 -0
  10. package/dist/DatePicker.js +14 -0
  11. package/dist/DatePicker.js.map +1 -1
  12. package/dist/DayPicker.d.ts +1 -0
  13. package/dist/DayPicker.js +4 -1
  14. package/dist/DayPicker.js.map +1 -1
  15. package/dist/DayPickerTemplate.js +1 -1
  16. package/dist/DayPickerTemplate.js.map +1 -1
  17. package/dist/Icon.js +3 -0
  18. package/dist/Icon.js.map +1 -1
  19. package/dist/List.js +1 -1
  20. package/dist/List.js.map +1 -1
  21. package/dist/ListBoxItemGroupTemplate.js +1 -1
  22. package/dist/ListBoxItemGroupTemplate.js.map +1 -1
  23. package/dist/ListItem.d.ts +4 -2
  24. package/dist/ListItem.js +5 -9
  25. package/dist/ListItem.js.map +1 -1
  26. package/dist/ListItemBaseTemplate.d.ts +2 -0
  27. package/dist/ListItemBaseTemplate.js +1 -1
  28. package/dist/ListItemBaseTemplate.js.map +1 -1
  29. package/dist/ListItemGroup.d.ts +7 -23
  30. package/dist/ListItemGroup.js +4 -21
  31. package/dist/ListItemGroup.js.map +1 -1
  32. package/dist/ListItemGroupBase.d.ts +41 -0
  33. package/dist/ListItemGroupBase.js +54 -0
  34. package/dist/ListItemGroupBase.js.map +1 -0
  35. package/dist/ListItemStandardTemplate.js +1 -1
  36. package/dist/ListItemStandardTemplate.js.map +1 -1
  37. package/dist/MultiComboBoxItemGroup.d.ts +2 -0
  38. package/dist/MultiComboBoxItemGroup.js +2 -0
  39. package/dist/MultiComboBoxItemGroup.js.map +1 -1
  40. package/dist/NumberInput.d.ts +271 -0
  41. package/dist/NumberInput.js +719 -0
  42. package/dist/NumberInput.js.map +1 -0
  43. package/dist/NumberInputTemplate.d.ts +2 -0
  44. package/dist/NumberInputTemplate.js +18 -0
  45. package/dist/NumberInputTemplate.js.map +1 -0
  46. package/dist/Option.d.ts +10 -0
  47. package/dist/Option.js +6 -0
  48. package/dist/Option.js.map +1 -1
  49. package/dist/OptionGroup.d.ts +34 -0
  50. package/dist/OptionGroup.js +61 -0
  51. package/dist/OptionGroup.js.map +1 -0
  52. package/dist/OptionGroupTemplate.d.ts +2 -0
  53. package/dist/OptionGroupTemplate.js +6 -0
  54. package/dist/OptionGroupTemplate.js.map +1 -0
  55. package/dist/OptionTemplate.js +6 -1
  56. package/dist/OptionTemplate.js.map +1 -1
  57. package/dist/Popover.js +5 -3
  58. package/dist/Popover.js.map +1 -1
  59. package/dist/Select.d.ts +19 -2
  60. package/dist/Select.js +79 -28
  61. package/dist/Select.js.map +1 -1
  62. package/dist/SelectPopoverTemplate.js +1 -1
  63. package/dist/SelectPopoverTemplate.js.map +1 -1
  64. package/dist/SelectTemplate.js +2 -1
  65. package/dist/SelectTemplate.js.map +1 -1
  66. package/dist/SplitButton.d.ts +7 -3
  67. package/dist/SplitButton.js +4 -4
  68. package/dist/SplitButton.js.map +1 -1
  69. package/dist/SplitButtonTemplate.js +1 -1
  70. package/dist/SplitButtonTemplate.js.map +1 -1
  71. package/dist/StepInput.d.ts +14 -127
  72. package/dist/StepInput.js +40 -472
  73. package/dist/StepInput.js.map +1 -1
  74. package/dist/StepInputTemplate.js +4 -15
  75. package/dist/StepInputTemplate.js.map +1 -1
  76. package/dist/SuggestionItemGroup.d.ts +2 -0
  77. package/dist/SuggestionItemGroup.js +2 -0
  78. package/dist/SuggestionItemGroup.js.map +1 -1
  79. package/dist/ToolbarButton.d.ts +18 -0
  80. package/dist/ToolbarButton.js +16 -0
  81. package/dist/ToolbarButton.js.map +1 -1
  82. package/dist/ToolbarButtonTemplate.js +1 -1
  83. package/dist/ToolbarButtonTemplate.js.map +1 -1
  84. package/dist/bundle.esm.js +2 -0
  85. package/dist/bundle.esm.js.map +1 -1
  86. package/dist/css/themes/NumberInput.css +1 -0
  87. package/dist/css/themes/OptionGroup.css +1 -0
  88. package/dist/css/themes/StepInput.css +1 -1
  89. package/dist/css/themes/TimePickerClock.css +1 -1
  90. package/dist/css/themes/TimeSelectionClocks.css +1 -1
  91. package/dist/css/themes/sap_fiori_3/parameters-bundle.css +1 -1
  92. package/dist/css/themes/sap_fiori_3_dark/parameters-bundle.css +1 -1
  93. package/dist/css/themes/sap_fiori_3_hcb/parameters-bundle.css +1 -1
  94. package/dist/css/themes/sap_fiori_3_hcw/parameters-bundle.css +1 -1
  95. package/dist/css/themes/sap_horizon/parameters-bundle.css +1 -1
  96. package/dist/css/themes/sap_horizon_auto/parameters-bundle.css +30 -22
  97. package/dist/css/themes/sap_horizon_dark/parameters-bundle.css +1 -1
  98. package/dist/css/themes/sap_horizon_hc_auto/parameters-bundle.css +31 -24
  99. package/dist/css/themes/sap_horizon_hcb/parameters-bundle.css +1 -1
  100. package/dist/css/themes/sap_horizon_hcw/parameters-bundle.css +1 -1
  101. package/dist/custom-elements-internal.json +719 -156
  102. package/dist/custom-elements.json +658 -162
  103. package/dist/generated/assets/i18n/messagebundle_de.json +1 -1
  104. package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
  105. package/dist/generated/assets/i18n/messagebundle_en_US_saprigi.json +1 -1
  106. package/dist/generated/assets/i18n/messagebundle_pl.json +1 -1
  107. package/dist/generated/assets/i18n/messagebundle_ru.json +1 -1
  108. package/dist/generated/assets/themes/sap_fiori_3/parameters-bundle.css.json +1 -1
  109. package/dist/generated/assets/themes/sap_fiori_3_dark/parameters-bundle.css.json +1 -1
  110. package/dist/generated/assets/themes/sap_fiori_3_hcb/parameters-bundle.css.json +1 -1
  111. package/dist/generated/assets/themes/sap_fiori_3_hcw/parameters-bundle.css.json +1 -1
  112. package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -1
  113. package/dist/generated/assets/themes/sap_horizon_auto/parameters-bundle.css.json +1 -1
  114. package/dist/generated/assets/themes/sap_horizon_dark/parameters-bundle.css.json +1 -1
  115. package/dist/generated/assets/themes/sap_horizon_hc_auto/parameters-bundle.css.json +1 -1
  116. package/dist/generated/assets/themes/sap_horizon_hcb/parameters-bundle.css.json +1 -1
  117. package/dist/generated/assets/themes/sap_horizon_hcw/parameters-bundle.css.json +1 -1
  118. package/dist/generated/i18n/i18n-defaults.d.ts +8 -6
  119. package/dist/generated/i18n/i18n-defaults.js +8 -6
  120. package/dist/generated/i18n/i18n-defaults.js.map +1 -1
  121. package/dist/generated/themes/NumberInput.css.d.ts +2 -0
  122. package/dist/generated/themes/NumberInput.css.js +8 -0
  123. package/dist/generated/themes/NumberInput.css.js.map +1 -0
  124. package/dist/generated/themes/OptionGroup.css.d.ts +2 -0
  125. package/dist/generated/themes/OptionGroup.css.js +8 -0
  126. package/dist/generated/themes/OptionGroup.css.js.map +1 -0
  127. package/dist/generated/themes/StepInput.css.d.ts +1 -1
  128. package/dist/generated/themes/StepInput.css.js +1 -1
  129. package/dist/generated/themes/StepInput.css.js.map +1 -1
  130. package/dist/generated/themes/TimePickerClock.css.d.ts +1 -1
  131. package/dist/generated/themes/TimePickerClock.css.js +1 -1
  132. package/dist/generated/themes/TimePickerClock.css.js.map +1 -1
  133. package/dist/generated/themes/TimeSelectionClocks.css.d.ts +1 -1
  134. package/dist/generated/themes/TimeSelectionClocks.css.js +1 -1
  135. package/dist/generated/themes/TimeSelectionClocks.css.js.map +1 -1
  136. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.d.ts +1 -1
  137. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js +1 -1
  138. package/dist/generated/themes/sap_fiori_3/parameters-bundle.css.js.map +1 -1
  139. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.d.ts +1 -1
  140. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js +1 -1
  141. package/dist/generated/themes/sap_fiori_3_dark/parameters-bundle.css.js.map +1 -1
  142. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.d.ts +1 -1
  143. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js +1 -1
  144. package/dist/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.js.map +1 -1
  145. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.d.ts +1 -1
  146. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js +1 -1
  147. package/dist/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.js.map +1 -1
  148. package/dist/generated/themes/sap_horizon/parameters-bundle.css.d.ts +1 -1
  149. package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
  150. package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
  151. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.d.ts +1 -1
  152. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js +30 -22
  153. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js.map +1 -1
  154. package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.d.ts +1 -1
  155. package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js +1 -1
  156. package/dist/generated/themes/sap_horizon_dark/parameters-bundle.css.js.map +1 -1
  157. package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.d.ts +1 -1
  158. package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js +31 -24
  159. package/dist/generated/themes/sap_horizon_hc_auto/parameters-bundle.css.js.map +1 -1
  160. package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.d.ts +1 -1
  161. package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js +1 -1
  162. package/dist/generated/themes/sap_horizon_hcb/parameters-bundle.css.js.map +1 -1
  163. package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.d.ts +1 -1
  164. package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js +1 -1
  165. package/dist/generated/themes/sap_horizon_hcw/parameters-bundle.css.js.map +1 -1
  166. package/dist/vscode.html-custom-data.json +117 -17
  167. package/dist/web-types.json +266 -34
  168. package/package.json +9 -9
  169. package/src/DayPickerTemplate.tsx +1 -1
  170. package/src/ListBoxItemGroupTemplate.tsx +1 -1
  171. package/src/ListItemBaseTemplate.tsx +4 -0
  172. package/src/ListItemStandardTemplate.tsx +1 -1
  173. package/src/NumberInputTemplate.tsx +95 -0
  174. package/src/OptionGroupTemplate.tsx +20 -0
  175. package/src/OptionTemplate.tsx +6 -1
  176. package/src/SelectPopoverTemplate.tsx +1 -1
  177. package/src/SelectTemplate.tsx +6 -0
  178. package/src/SplitButtonTemplate.tsx +1 -2
  179. package/src/StepInputTemplate.tsx +23 -86
  180. package/src/ToolbarButtonTemplate.tsx +2 -0
  181. package/src/i18n/messagebundle.properties +13 -8
  182. package/src/i18n/messagebundle_de.properties +2 -2
  183. package/src/i18n/messagebundle_en.properties +2 -0
  184. package/src/i18n/messagebundle_en_US_saprigi.properties +7 -6
  185. package/src/i18n/messagebundle_pl.properties +1 -1
  186. package/src/i18n/messagebundle_ru.properties +1 -1
  187. package/src/themes/NumberInput.css +321 -0
  188. package/src/themes/OptionGroup.css +28 -0
  189. package/src/themes/StepInput.css +0 -276
  190. package/src/themes/TimePickerClock.css +1 -1
  191. package/src/themes/TimeSelectionClocks.css +1 -1
  192. package/src/themes/base/NumberInput-parameters.css +31 -0
  193. package/src/themes/base/sizes-parameters.css +3 -3
  194. package/src/themes/sap_fiori_3/parameters-bundle.css +1 -1
  195. package/src/themes/sap_fiori_3_dark/parameters-bundle.css +1 -1
  196. package/src/themes/sap_fiori_3_hcb/parameters-bundle.css +1 -1
  197. package/src/themes/sap_fiori_3_hcw/parameters-bundle.css +1 -1
  198. package/src/themes/sap_horizon/NumberInput-parameters.css +26 -0
  199. package/src/themes/sap_horizon/parameters-bundle.css +1 -1
  200. package/src/themes/sap_horizon_dark/NumberInput-parameters.css +26 -0
  201. package/src/themes/sap_horizon_dark/parameters-bundle.css +1 -1
  202. package/src/themes/sap_horizon_hcb/NumberInput-parameters.css +14 -0
  203. package/src/themes/sap_horizon_hcb/parameters-bundle.css +2 -1
  204. package/src/themes/sap_horizon_hcw/NumberInput-parameters.css +14 -0
  205. package/src/themes/sap_horizon_hcw/parameters-bundle.css +2 -1
  206. package/src/themes/base/StepInput-parameters.css +0 -25
  207. package/src/themes/sap_horizon/StepInput-parameters.css +0 -25
  208. package/src/themes/sap_horizon_dark/StepInput-parameters.css +0 -25
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ui5/webcomponents",
3
- "version": "2.26.0",
3
+ "version": "2.27.0-rc.1",
4
4
  "description": "UI5 Web Components: webcomponents.main",
5
5
  "ui5": {
6
6
  "webComponentsPackage": true
@@ -56,22 +56,22 @@
56
56
  "directory": "packages/main"
57
57
  },
58
58
  "dependencies": {
59
- "@ui5/webcomponents-base": "2.26.0",
60
- "@ui5/webcomponents-icons": "2.26.0",
61
- "@ui5/webcomponents-icons-business-suite": "2.26.0",
62
- "@ui5/webcomponents-icons-tnt": "2.26.0",
63
- "@ui5/webcomponents-localization": "2.26.0",
64
- "@ui5/webcomponents-theming": "2.26.0"
59
+ "@ui5/webcomponents-base": "2.27.0-rc.1",
60
+ "@ui5/webcomponents-icons": "2.27.0-rc.1",
61
+ "@ui5/webcomponents-icons-business-suite": "2.27.0-rc.1",
62
+ "@ui5/webcomponents-icons-tnt": "2.27.0-rc.1",
63
+ "@ui5/webcomponents-localization": "2.27.0-rc.1",
64
+ "@ui5/webcomponents-theming": "2.27.0-rc.1"
65
65
  },
66
66
  "devDependencies": {
67
67
  "@custom-elements-manifest/analyzer": "^0.10.10",
68
68
  "@ui5/cypress-internal": "0.1.0",
69
- "@ui5/webcomponents-tools": "2.26.0",
69
+ "@ui5/webcomponents-tools": "2.27.0-rc.1",
70
70
  "cypress": "15.18.1",
71
71
  "jsdom": "^26.0.0",
72
72
  "lit": "^2.0.0",
73
73
  "vite": "5.4.21",
74
74
  "vitest": "^3.2.7"
75
75
  },
76
- "gitHead": "d022f8f0c8b508a5e59cc89d26a19adf316ea3f6"
76
+ "gitHead": "349a62be7949ed8f50de4d88352f2557f0a4d7c1"
77
77
  }
@@ -67,7 +67,7 @@ export default function DayPickerTemplate(this: DayPicker) {
67
67
  <div
68
68
  className="ui5-dp-weekname-container"
69
69
  role="rowheader"
70
- aria-label={`Calendar Week ${day.weekNum}`}
70
+ aria-label={this._getCalendarWeekLabel(day.weekNum)}
71
71
  >
72
72
  <span className="ui5-dp-weekname">{day.weekNum}</span>
73
73
  </div>
@@ -15,7 +15,7 @@ export default function ListItemGroupTemplate(this: ListItemGroup, hooks?: { ite
15
15
  onDragLeave={this._ondragleave}
16
16
  >
17
17
  {this.hasHeader &&
18
- <ListItemGroupHeader focused={this.focused} part="header" accessibleRole="Group" wrappingType={this.getGroupHeaderWrapping()} >
18
+ <ListItemGroupHeader focused={this.focused} part="header" exportparts="title" accessibleRole="Group" wrappingType={this.getGroupHeaderWrapping()} >
19
19
  { this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
20
20
  </ListItemGroupHeader>
21
21
  }
@@ -4,6 +4,8 @@ import type { AriaRole, JsxTemplate } from "@ui5/webcomponents-base/";
4
4
  export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listItemContent: JsxTemplate }, injectedProps?: {
5
5
  role?: AriaRole,
6
6
  title?: string,
7
+ ariaSetsize?: number,
8
+ ariaPosinset?: number,
7
9
  }) {
8
10
  const listItemContent = hooks?.listItemContent || defaultListItemContent;
9
11
 
@@ -17,6 +19,8 @@ export default function ListItemBaseTemplate(this: ListItemBase, hooks?: { listI
17
19
  role={injectedProps?.role}
18
20
  title={injectedProps?.title}
19
21
  aria-selected={injectedProps?.role === "option" ? this.selected : undefined}
22
+ {...(injectedProps?.ariaSetsize !== undefined && { "aria-setsize": injectedProps.ariaSetsize })}
23
+ {...(injectedProps?.ariaPosinset !== undefined && { "aria-posinset": injectedProps.ariaPosinset })}
20
24
  onFocusIn={this._onfocusin}
21
25
  onKeyUp={this._onkeyup}
22
26
  onKeyDown={this._onkeydown}
@@ -23,7 +23,7 @@ function listItemContent(this: ListItemStandard) {
23
23
  {renderTitle.call(this)}
24
24
  {renderDescription.call(this)}
25
25
 
26
- {!this.typeActive && <span class="ui5-hidden-text">{this.type}</span>}
26
+ {!this.typeActive && !this.isInactiveSelectable && <span class="ui5-hidden-text">{this.type}</span>}
27
27
  </div>
28
28
 
29
29
  {!this.description && renderAdditionalText.call(this)}
@@ -0,0 +1,95 @@
1
+ import type NumberInput from "./NumberInput.js";
2
+ import Icon from "./Icon.js";
3
+ import Input from "./Input.js";
4
+
5
+ import less from "@ui5/webcomponents-icons/dist/less.js";
6
+ import add from "@ui5/webcomponents-icons/dist/add.js";
7
+
8
+ export default function NumberInputTemplate(this: NumberInput) {
9
+ return (
10
+ <div
11
+ id={`${this._id}`}
12
+ class={{ "ui5-number-input-root": true, "ui5-number-input-root--with-buttons": this._showStepButtons && !this.readonly }}
13
+ onKeyDown={this._onkeydown}
14
+ onFocusIn={this._onfocusin}
15
+ onFocusOut={this._onfocusout}
16
+ onWheel={this._onMouseWheel}
17
+ >
18
+ {/* Decrement Icon */}
19
+ {this._showStepButtons && !this.readonly &&
20
+ <div
21
+ class="ui5-step-icon ui5-step-dec"
22
+ title={this.decIconTitle}
23
+ onMouseDown={this._decSpin}
24
+ onMouseUp={this._resetSpin}
25
+ onMouseOut={this._resetSpinOut}
26
+ >
27
+ <Icon
28
+ id={`${this._id}-dec`}
29
+ name={less}
30
+ tabindex={-1}
31
+ accessibleName={this.decIconTitle}
32
+ onClick={this._decValue}
33
+ onFocusOut={this._onButtonFocusOut}
34
+ class={{
35
+ "inputIcon": true,
36
+ "ui5-number-input-icon--clickable": this._decIconClickable,
37
+ }}
38
+ showTooltip={true}
39
+ />
40
+ </div>
41
+ }
42
+
43
+ {/* INPUT */}
44
+ <Input
45
+ id={`${this._id}-inner`}
46
+ data-sap-focus-ref
47
+ class="ui5-number-input-input"
48
+ placeholder={this.placeholder}
49
+ type={this.type}
50
+ value={this._inputValue ?? this._displayValue}
51
+ disabled={this.disabled}
52
+ required={this.required}
53
+ readonly={this.readonly}
54
+ focused={this.focused}
55
+ onui5-_request-submit={this._onInputRequestSubmit}
56
+ valueState={this.valueState}
57
+ _inputAccInfo={this.accInfo}
58
+ _nativeInputAttributes={this.inputAttributes}
59
+ onChange={this._onInputChange}
60
+ onFocusOut={this._onInputFocusOut}
61
+ onFocusIn={this._onInputFocusIn}
62
+ onInput={this._onInput}
63
+ >
64
+ {this.valueStateMessage.length > 0 &&
65
+ <slot name="valueStateMessage" slot="valueStateMessage"></slot>
66
+ }
67
+ </Input>
68
+
69
+ {/* Increment Icon */}
70
+ {this._showStepButtons && !this.readonly &&
71
+ <div
72
+ class="ui5-step-icon ui5-step-inc"
73
+ title={this.incIconTitle}
74
+ onMouseDown={this._incSpin}
75
+ onMouseUp={this._resetSpin}
76
+ onMouseOut={this._resetSpinOut}
77
+ >
78
+ <Icon
79
+ id={`${this._id}-inc`}
80
+ class={{
81
+ "inputIcon": true,
82
+ "ui5-number-input-icon--clickable": this._incIconClickable,
83
+ }}
84
+ name={add}
85
+ tabindex={-1}
86
+ accessibleName={this.incIconTitle}
87
+ onClick={this._incValue}
88
+ onFocusOut={this._onButtonFocusOut}
89
+ showTooltip={true}
90
+ />
91
+ </div>
92
+ }
93
+ </div>
94
+ );
95
+ }
@@ -0,0 +1,20 @@
1
+ import type OptionGroup from "./OptionGroup.js";
2
+ import type Option from "./Option.js";
3
+
4
+ export default function OptionGroupTemplate(this: OptionGroup) {
5
+ return (
6
+ <div
7
+ class="ui5-option-group-root"
8
+ role="group"
9
+ aria-label={this.headerText || undefined}
10
+ aria-roledescription={this._groupHeaderRoleDescription}
11
+ >
12
+ {this.headerText &&
13
+ <div class="ui5-option-group-header" aria-hidden="true">
14
+ {this.headerText}
15
+ </div>
16
+ }
17
+ {this.items.map((item: Option) => <slot name={item._individualSlot}></slot>)}
18
+ </div>
19
+ );
20
+ }
@@ -3,7 +3,12 @@ import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
3
3
  import type Option from "./Option.js";
4
4
 
5
5
  export default function OptionTemplate(this: Option) {
6
- return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option", title: this.tooltip });
6
+ return ListItemBaseTemplate.call(this, { listItemContent }, {
7
+ role: "option",
8
+ title: this.tooltip,
9
+ ariaSetsize: this._forcedSetsize,
10
+ ariaPosinset: this._forcedPosinset,
11
+ });
7
12
  }
8
13
 
9
14
  function listItemContent(this: Option) {
@@ -9,7 +9,7 @@ import Title from "./Title.js";
9
9
  export default function SelectPopoverTemplate(this: Select) {
10
10
  return (
11
11
  <>
12
- {this.options.length > 0 &&
12
+ {this._flatOptions.length > 0 &&
13
13
  <ResponsivePopover
14
14
  id={this.responsivePopoverId}
15
15
  class={{
@@ -91,6 +91,12 @@ export default function SelectTemplate(this: Select) {
91
91
  {this.ariaDescriptionText}
92
92
  </span>
93
93
  }
94
+
95
+ {this.hasGroups &&
96
+ <span id={this._groupCountMessageId} class="ui5-hidden-text">
97
+ {this._groupCountText}
98
+ </span>
99
+ }
94
100
  </div>
95
101
  {SelectPopoverTemplate.call(this)}
96
102
  </>
@@ -10,7 +10,6 @@ export default function SplitButtonTemplate(this: SplitButton) {
10
10
  tabindex={this._tabIndex}
11
11
  aria-labelledby={!this._hideArrowButton ? `${this._id}-invisibleTextDefault ${this._id}-invisibleText` : undefined}
12
12
  aria-haspopup={this._computedAccessibilityAttributes?.root?.hasPopup}
13
- aria-roledescription={this._computedAccessibilityAttributes?.root?.roleDescription}
14
13
  aria-label={this._computedAccessibilityAttributes?.root?.title}
15
14
  aria-keyshortcuts={this._computedAccessibilityAttributes?.root?.ariaKeyShortcuts}
16
15
  onFocusOut={this._onFocusOut}
@@ -56,7 +55,7 @@ export default function SplitButtonTemplate(this: SplitButton) {
56
55
  onActiveStateChange={this._onArrowButtonActiveStateChange}
57
56
  >
58
57
  </Button>
59
- <span id={`${this._id}-invisibleText`} class="ui5-hidden-text">{this.accInfo.keyboardHint} {this.accessibleName}</span>
58
+ <span id={`${this._id}-invisibleText`} class="ui5-hidden-text">{this.accessibleName} {this.accInfo.description} {this.accInfo.keyboardHint}</span>
60
59
  <span id={`${this._id}-invisibleTextDefault`} class="ui5-hidden-text">{this.buttonTextContent}</span>
61
60
  </>
62
61
  )}
@@ -1,94 +1,31 @@
1
1
  import type StepInput from "./StepInput.js";
2
- import Icon from "./Icon.js";
3
- import Input from "./Input.js";
4
-
5
- import less from "@ui5/webcomponents-icons/dist/less.js";
6
- import add from "@ui5/webcomponents-icons/dist/add.js";
2
+ import NumberInput from "./NumberInput.js";
7
3
 
8
4
  export default function StepInputTemplate(this: StepInput) {
9
5
  return (
10
- <div
11
- id={`${this._id}`}
12
- class="ui5-step-input-root"
13
- onKeyDown={this._onkeydown}
14
- onFocusIn={this._onfocusin}
15
- onFocusOut={this._onfocusout}
16
- onWheel={this._onMouseWheel}
6
+ <NumberInput
7
+ _showStepButtons={true}
8
+ _externalAriaLabel={this._associatedLabelText}
9
+ value={this.value}
10
+ min={this.min}
11
+ max={this.max}
12
+ step={this.step}
13
+ valueState={this.valueState}
14
+ required={this.required}
15
+ disabled={this.disabled}
16
+ readonly={this.readonly}
17
+ placeholder={this.placeholder}
18
+ valuePrecision={this.valuePrecision}
19
+ accessibleName={this.accessibleName}
20
+ accessibleNameRef={this.accessibleNameRef}
21
+ onChange={this._onNumberInputChange}
22
+ onInput={this._onNumberInputInput}
23
+ onValueStateChange={this._onNumberInputValueStateChange}
24
+ onui5-_request-submit={this._onRequestSubmit}
17
25
  >
18
- {/* Decrement Icon */}
19
- {!this.readonly &&
20
- <div
21
- class="ui5-step-icon ui5-step-dec"
22
- title={this.decIconTitle}
23
- >
24
- <Icon
25
- id={`${this._id}-dec`}
26
- name={less}
27
- tabindex={-1}
28
- accessibleName={this.decIconTitle}
29
- onClick={this._decValue}
30
- onFocusOut={this._onButtonFocusOut}
31
- onMouseDown={this._decSpin}
32
- onMouseUp={this._resetSpin}
33
- onMouseOut={this._resetSpinOut}
34
- class={{
35
- "inputIcon": true,
36
- "ui5-step-input-icon--clickable": this._decIconClickable,
37
- }}
38
- showTooltip={true}
39
- />
40
- </div>
41
- }
42
-
43
- {/* INPUT */}
44
- <Input
45
- id={`${this._id}-inner`}
46
- data-sap-focus-ref
47
- class="ui5-step-input-input"
48
- placeholder={this.placeholder}
49
- type={this.type}
50
- value={this._displayValue}
51
- disabled={this.disabled}
52
- required={this.required}
53
- readonly={this.readonly}
54
- onui5-_request-submit={this._onInputRequestSubmit}
55
- valueState={this.valueState}
56
- _inputAccInfo={this.accInfo}
57
- _nativeInputAttributes={this.inputAttributes}
58
- onChange={this._onInputChange}
59
- onFocusOut={this._onInputFocusOut}
60
- onFocusIn={this._onInputFocusIn}
61
- onInput={this._onInput}
62
- >
63
- {this.valueStateMessage.length > 0 &&
64
- <slot name="valueStateMessage" slot="valueStateMessage"></slot>
65
- }
66
- </Input>
67
-
68
- {/* Increment Icon */}
69
- {!this.readonly &&
70
- <div
71
- class="ui5-step-icon ui5-step-inc"
72
- title={this.incIconTitle}
73
- >
74
- <Icon
75
- id={`${this._id}-inc`}
76
- class={{
77
- "inputIcon": true,
78
- "ui5-step-input-icon--clickable": this._incIconClickable,
79
- }}
80
- name={add}
81
- tabindex={-1}
82
- accessibleName={this.incIconTitle}
83
- onClick={this._incValue}
84
- onFocusOut={this._onButtonFocusOut}
85
- onMouseDown={this._incSpin}
86
- onMouseUp={this._resetSpin}
87
- onMouseOut={this._resetSpinOut}
88
- showTooltip={true}
89
- />
90
- </div>
26
+ {this.valueStateMessage.length > 0 &&
27
+ <slot name="valueStateMessage" slot="valueStateMessage"></slot>
91
28
  }
92
- </div>
29
+ </NumberInput>
93
30
  );
94
31
  }
@@ -14,6 +14,8 @@ export default function ToolbarButtonTemplate(this: ToolbarButton) {
14
14
  tooltip={this.tooltip}
15
15
  accessibleName={this.accessibleName}
16
16
  accessibleNameRef={this.accessibleNameRef}
17
+ accessibleDescription={this.accessibleDescription}
18
+ accessibleRole={this.accessibleRole}
17
19
  accessibilityAttributes={this.accessibilityAttributes}
18
20
  design={this.design}
19
21
  disabled={this.disabled}
@@ -321,6 +321,9 @@ SELECT_ROLE_DESCRIPTION=Listbox
321
321
  #XTXT: MultiComboBox and ComboBox icon accessible name
322
322
  SELECT_OPTIONS=Select Options
323
323
 
324
+ #XTXT: Announced by screen reader when Select with grouped options is opened; {0} is the option count, {1} is the group count
325
+ SELECT_OPTIONS_IN_GROUPS={0} results are available in {1} groups
326
+
324
327
  #XACT: ARIA announcement prefix for Select dialog accessible name on mobile (without trailing space)
325
328
  SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Select:
326
329
 
@@ -772,6 +775,9 @@ DAY_PICKER_SELECTED_RANGE_END = {0} Last date of range
772
775
  #XBUT: Text for 'Week number' in the DayPicker
773
776
  DAY_PICKER_WEEK_NUMBER_TEXT = Week number
774
777
 
778
+ #XBUT,{0}: Week number aria-label in the DayPicker, {0} is the week number
779
+ DAY_PICKER_CALENDAR_WEEK = Calendar Week {0}
780
+
775
781
  #XBUT: Text for 'Non-Working Day' in the DayPicker
776
782
  DAY_PICKER_NON_WORKING_DAY = Non-Working Day
777
783
 
@@ -793,18 +799,17 @@ SLIDER_TOOLTIP_INPUT_DESCRIPTION = Press F2 to enter a value
793
799
  #XACT: ARIA label for slider tooltip input
794
800
  SLIDER_TOOLTIP_INPUT_LABEL = Current Value
795
801
 
796
- #XTOL: tooltip for decrease button of the StepInput
797
- STEPINPUT_DEC_ICON_TITLE=Decrease
798
-
799
- #XTOL: tooltip for increase button of the StepInput
800
- STEPINPUT_INC_ICON_TITLE=Increase
802
+ #XTOL: tooltip for decrease button of the NumberInput
803
+ NUMBERINPUT_DEC_ICON_TITLE=Decrease
801
804
 
802
- STEPINPUT_PATTER_MISSMATCH=This format is not supported. Fill in a number with {0} decimal places.
805
+ #XTOL: tooltip for increase button of the NumberInput
806
+ NUMBERINPUT_INC_ICON_TITLE=Increase
803
807
 
804
- STEPINPUT_RANGEOVERFLOW=Fill in a number that is lower than the set max. value of {0}.
808
+ NUMBERINPUT_PATTERN_MISSMATCH=This format is not supported. Fill in a number with {0} decimal places.
805
809
 
806
- STEPINPUT_RANGEUNDERFLOW=Fill in a number that is higher than the set min. value of {0}.
810
+ NUMBERINPUT_RANGEOVERFLOW=Fill in a number that is lower than the set max. value of {0}.
807
811
 
812
+ NUMBERINPUT_RANGEUNDERFLOW=Fill in a number that is higher than the set min. value of {0}.
808
813
  #XACT: Aria information for the Split Button
809
814
  SPLIT_BUTTON_DESCRIPTION=Split Button
810
815
 
@@ -222,11 +222,11 @@ SELECT_ROLE_DESCRIPTION=Listenfeld
222
222
 
223
223
  SELECT_OPTIONS=Auswahloptionen
224
224
 
225
- SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Auswählen:
225
+ SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Markieren:
226
226
 
227
227
  SELECT_LISTBOX_LABEL=Alle Elemente
228
228
 
229
- SHOW_SELECTED_BUTTON=Nur ausgewählte Elemente einblenden
229
+ SHOW_SELECTED_BUTTON=Nur markierte Elemente einblenden
230
230
 
231
231
  INPUT_SUGGESTIONS=Es sind Vorschläge verfügbar
232
232
 
@@ -524,6 +524,8 @@ DAY_PICKER_SELECTED_RANGE_END={0} Last date of range
524
524
 
525
525
  DAY_PICKER_WEEK_NUMBER_TEXT=Week Number
526
526
 
527
+ DAY_PICKER_CALENDAR_WEEK=Calendar Week {0}
528
+
527
529
  DAY_PICKER_NON_WORKING_DAY=Non-Working Day
528
530
 
529
531
  DAY_PICKER_TODAY=Today
@@ -222,6 +222,8 @@ SELECT_ROLE_DESCRIPTION=‌​​‌‌‌‌‌‍‌‌‍‍​​
222
222
 
223
223
  SELECT_OPTIONS=‍‌​​‍​​‌‍‌‌‍‍‌‌​​‌‌​‌​​‌‍‌‍​​​‍​‌‌‍​‍‍‍Select Options
224
224
 
225
+ SELECT_OPTIONS_IN_GROUPS=‌‍​‌‌‍‌‍‌​​‍‍​‌‍‌​‌​‍​​​‍‌​‌‌‍‍‍​‌‍‌‌‍​​​{0}‌‌‌ results are available in ​​​{1}‌‌‌ groups
226
+
225
227
  SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=‍‍‌​‍‍‌‍​‍‍‍‌‍‌‍‍​‌​‍‌‍​‍​‍‌‌​‍‌​‌​‍​​‌‌Select:
226
228
 
227
229
  SELECT_LISTBOX_LABEL=‌​​​​‍‌‌‍​​​‌‍‌‌​‍​‍‌​​‍‌​​‍‍​‍​‌​‌‌‌‌‍‌All Items
@@ -538,16 +540,15 @@ SLIDER_TOOLTIP_INPUT_DESCRIPTION=‌‌‍‍​‌‍​‍‌‍‌
538
540
 
539
541
  SLIDER_TOOLTIP_INPUT_LABEL=‌​‌​​‍‍‍‌‍​‍‌‌‍‍‍‍​‌​‍​​​‌​​‌​‍‌​‍‍‌‌​‌Current Value
540
542
 
541
- STEPINPUT_DEC_ICON_TITLE=‌‌‌​​​‍​‍‍‍​‌‍​‌‍‌​‌‍​‍‍​‌​‍‍​​‍‌‌‍‌‍‍​‌​Decrease
542
-
543
- STEPINPUT_INC_ICON_TITLE=‌​‍‍‍​‍​‌‌‌‍‍‌​​​​‍‍​​​‍‍‌‍​‍‍‌‍​‌‌‍‍‍​​‍Increase
543
+ NUMBERINPUT_DEC_ICON_TITLE=‌​​​‌‍​‌‌‌‍​‌‌‍‍‌‍‍​​‌‌​‍‍‍​‍​‌‍​‍​‌‌‍‌‌​Decrease
544
544
 
545
- STEPINPUT_PATTER_MISSMATCH=‌​‌‍‍‌​‍​‌​‌​‍‍​‍​‍​‌‌‍‌‍‍‌‌‍​​‍‌‍‍​​​​​​This format is not supported. Enter a number with ​​​{0}‌‌‌ decimal places.
545
+ NUMBERINPUT_INC_ICON_TITLE=‌‌‌​‌​‍​​‌‍‌‌‍‌‍‍​​‌‍‌​‍‍‌‍‍‌‍​‌‌‍‌​‍‍‍‍‌Increase
546
546
 
547
- STEPINPUT_RANGEOVERFLOW=‌‍​‍‌‌‌​​‍‌‍‍‍‌‍‌‍‍​‌‌‍​​‍​‍‍​​‍‌​‌‍‌​‌Enter a number lower than the maximum value of ​​​{0}‌‌‌.
547
+ NUMBERINPUT_PATTERN_MISSMATCH=‍‌‌​‍‌‌‌‌​‌‍​​​‍‌​‍‌‍​‍‍​‍​‍​‌‍‍​​‌‌​‍‍‍This format is not supported. Enter a number with ​​​{0}‌‌‌ decimal places.
548
548
 
549
- STEPINPUT_RANGEUNDERFLOW=‍​​‌‍​​​‌‍‌‍​​‍‍​​​‌‌‌‍‍​‌‌‍‍‌‌‌‌​‍‌​‌‍‌Enter a number higher than the minimum value of ​​​{0}‌‌‌.
549
+ NUMBERINPUT_RANGEOVERFLOW=‌​​‌​‍‌‍‍‌‍‌‍‌‍​​​​​‌‌‍‍‍​‍‌‍‌‌‌‍‌‌‌​‍‍​‌Enter a number lower than the maximum value of ​​​{0}‌‌‌.
550
550
 
551
+ NUMBERINPUT_RANGEUNDERFLOW=‍‍‍‍‍‍‌‌​‌​‌‍​​​‌​‌​‌​‍​​‌‍‍‍​‍‌‍​​‍‍​‍​Enter a number higher than the minimum value of ​​​{0}‌‌‌.
551
552
  SPLIT_BUTTON_DESCRIPTION=‌‌‍‍‌‌​‍​​‌​‌‍​‌‍‌​‍‍​‌​‍‌‌‌‍‌‍​‌‌​​​​‌Split Button
552
553
 
553
554
  SPLIT_BUTTON_KEYBOARD_HINT=‌‌​​​​​​​‍‌‍‌‌‍​‌‍‍‌‌​‌​​‌‌‌‍‍​‌​‍‌‌​‍‍‌‌Press Space or Enter to trigger default action and Alt + Arrow Down or F4 to trigger arrow action
@@ -222,7 +222,7 @@ SELECT_ROLE_DESCRIPTION=Pole listy
222
222
 
223
223
  SELECT_OPTIONS=Wybierz opcje
224
224
 
225
- SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Wybierz:
225
+ SELECT_POPOVER_ACCESSIBLE_NAME_PREFIX=Wybór:
226
226
 
227
227
  SELECT_LISTBOX_LABEL=Wszystkie pozycje
228
228
 
@@ -643,7 +643,7 @@ TABLE_MORE_DESCRIPTION=Нажмите Enter или пробел, чтобы за
643
643
  TABLE_ROW_ACTIONS=Действия со строкой
644
644
  TABLE_ROW_SINGLE_ACTION=Доступно действий со строкой: 1
645
645
  TABLE_ROW_MULTIPLE_ACTIONS=Доступно действий со строкой: {0}
646
- TABLE_ROW_OVERFLOW_BUTTON=Другие операции
646
+ TABLE_ROW_OVERFLOW_BUTTON=Другие действия
647
647
  TABLE_NAVIGATION=Навигация
648
648
  TABLE_GENERATED_BY_AI=Сгенерировано с помощью ИИ
649
649
  TABLE_SELECT_ALL_ROWS=Выбрать все строки