@sapudex/web-components 2.51.0 → 2.52.0

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 (97) hide show
  1. package/cypress/specs/CountrySelector.cy.tsx +21 -0
  2. package/cypress/specs/List.cy.tsx +119 -10
  3. package/cypress/specs/SelectBox.cy.tsx +414 -70
  4. package/dist/CountrySelector.js +1 -0
  5. package/dist/CountrySelector.js.map +1 -1
  6. package/dist/List.d.ts +10 -0
  7. package/dist/List.js +35 -0
  8. package/dist/List.js.map +1 -1
  9. package/dist/ListGroupHeaderBase.js +3 -0
  10. package/dist/ListGroupHeaderBase.js.map +1 -1
  11. package/dist/ListItem.d.ts +1 -0
  12. package/dist/ListItem.js +11 -3
  13. package/dist/ListItem.js.map +1 -1
  14. package/dist/ListItemBase.d.ts +9 -0
  15. package/dist/ListItemBase.js +12 -0
  16. package/dist/ListItemBase.js.map +1 -1
  17. package/dist/ListSelectAll.js +1 -1
  18. package/dist/ListSelectAll.js.map +1 -1
  19. package/dist/SearchableListBase.d.ts +10 -0
  20. package/dist/SearchableListBase.js +29 -6
  21. package/dist/SearchableListBase.js.map +1 -1
  22. package/dist/SearchableListBaseTemplate.js +32 -5
  23. package/dist/SearchableListBaseTemplate.js.map +1 -1
  24. package/dist/SelectBase.d.ts +65 -1
  25. package/dist/SelectBase.js +446 -59
  26. package/dist/SelectBase.js.map +1 -1
  27. package/dist/SelectBox.js +24 -2
  28. package/dist/SelectBox.js.map +1 -1
  29. package/dist/SelectBoxTemplate.js +2 -2
  30. package/dist/SelectBoxTemplate.js.map +1 -1
  31. package/dist/assets/{InputSuggestions-7eP5S95I.js → InputSuggestions-0wafO-g3.js} +1 -1
  32. package/dist/assets/{ListItemStandardExpandableTextTemplate-CLcWBFcg.js → ListItemStandardExpandableTextTemplate-DoOYtqI8.js} +1 -1
  33. package/dist/assets/{bundle.esm-D4--IDh7.js → bundle.esm-DwHZ3nCW.js} +241 -241
  34. package/dist/assets/messagebundle_nl-BKUpVV-D.js +1 -0
  35. package/dist/css/themes/AccordionItem.css +1 -1
  36. package/dist/css/themes/Divider.css +1 -1
  37. package/dist/css/themes/Link.css +1 -1
  38. package/dist/css/themes/ListGroupHeader.css +1 -1
  39. package/dist/css/themes/ListItem.css +1 -1
  40. package/dist/css/themes/SelectBase.css +1 -1
  41. package/dist/css/themes/SelectBox.css +1 -1
  42. package/dist/generated/assets/i18n/messagebundle_nl.json +1 -1
  43. package/dist/generated/templates/ListTemplate.lit.js +1 -1
  44. package/dist/generated/templates/ListTemplate.lit.js.map +1 -1
  45. package/dist/generated/themes/AccordionItem.css.d.ts +1 -1
  46. package/dist/generated/themes/AccordionItem.css.js +1 -1
  47. package/dist/generated/themes/AccordionItem.css.js.map +1 -1
  48. package/dist/generated/themes/Divider.css.d.ts +1 -1
  49. package/dist/generated/themes/Divider.css.js +1 -1
  50. package/dist/generated/themes/Divider.css.js.map +1 -1
  51. package/dist/generated/themes/Link.css.d.ts +1 -1
  52. package/dist/generated/themes/Link.css.js +1 -1
  53. package/dist/generated/themes/Link.css.js.map +1 -1
  54. package/dist/generated/themes/ListGroupHeader.css.d.ts +1 -1
  55. package/dist/generated/themes/ListGroupHeader.css.js +1 -1
  56. package/dist/generated/themes/ListGroupHeader.css.js.map +1 -1
  57. package/dist/generated/themes/ListItem.css.d.ts +1 -1
  58. package/dist/generated/themes/ListItem.css.js +1 -1
  59. package/dist/generated/themes/ListItem.css.js.map +1 -1
  60. package/dist/generated/themes/SelectBase.css.d.ts +1 -1
  61. package/dist/generated/themes/SelectBase.css.js +1 -1
  62. package/dist/generated/themes/SelectBase.css.js.map +1 -1
  63. package/dist/generated/themes/SelectBox.css.d.ts +1 -1
  64. package/dist/generated/themes/SelectBox.css.js +1 -1
  65. package/dist/generated/themes/SelectBox.css.js.map +1 -1
  66. package/dist/messagebundle_nl.properties +126 -0
  67. package/dist/web-types.json +1 -1
  68. package/package.json +1 -1
  69. package/src/CountrySelector.ts +1 -0
  70. package/src/List.hbs +2 -1
  71. package/src/List.ts +36 -0
  72. package/src/ListGroupHeaderBase.ts +3 -0
  73. package/src/ListItem.ts +12 -3
  74. package/src/ListItemBase.ts +11 -0
  75. package/src/ListSelectAll.ts +1 -1
  76. package/src/SearchableListBase.ts +31 -8
  77. package/src/SearchableListBaseTemplate.tsx +38 -6
  78. package/src/SelectBase.ts +466 -69
  79. package/src/SelectBox.ts +27 -2
  80. package/src/SelectBoxTemplate.tsx +4 -3
  81. package/src/generated/templates/ListTemplate.lit.ts +1 -1
  82. package/src/generated/themes/AccordionItem.css.ts +1 -1
  83. package/src/generated/themes/Divider.css.ts +1 -1
  84. package/src/generated/themes/Link.css.ts +1 -1
  85. package/src/generated/themes/ListGroupHeader.css.ts +1 -1
  86. package/src/generated/themes/ListItem.css.ts +1 -1
  87. package/src/generated/themes/SelectBase.css.ts +1 -1
  88. package/src/generated/themes/SelectBox.css.ts +1 -1
  89. package/src/i18n/messagebundle_nl.properties +126 -0
  90. package/src/themes/AccordionItem.css +8 -3
  91. package/src/themes/Divider.css +2 -0
  92. package/src/themes/Link.css +20 -2
  93. package/src/themes/ListGroupHeader.css +18 -1
  94. package/src/themes/ListItem.css +2 -1
  95. package/src/themes/SelectBase.css +2 -1
  96. package/src/themes/SelectBox.css +10 -0
  97. package/dist/assets/messagebundle_nl-etaldyfo.js +0 -1
@@ -120,6 +120,22 @@ declare class UDExSelectBase extends UDExSearchableListBase {
120
120
  * @private
121
121
  */
122
122
  _requestRender: boolean;
123
+ /**
124
+ * True while keyboard list navigation is active (aria-activedescendant set).
125
+ * Used in CSS to suppress the input focus ring and show the active item ring.
126
+ *
127
+ * @private
128
+ */
129
+ _navigating: boolean;
130
+ /**
131
+ * Text read by screen readers when the active item changes.
132
+ * Announced via an aria-live="assertive" region in the template.
133
+ * This works regardless of shadow DOM / popover teleportation because
134
+ * the live region lives inside SelectBox's own shadow root.
135
+ *
136
+ * @private
137
+ */
138
+ _liveRegionText: string;
123
139
  /**
124
140
  * Defines the footer content for the component dropdown.
125
141
  * Place any content (e.g. an action button) here. Clicking footer content does not close the dropdown —
@@ -144,14 +160,35 @@ declare class UDExSelectBase extends UDExSearchableListBase {
144
160
  _handleResizeBound: ResizeObserverCallback;
145
161
  _handleListKeyDownBound: (e: KeyboardEvent) => void;
146
162
  _listKeyDownListenerAdded: boolean;
163
+ _activeDescendantItem: UDExListItemBase | null;
147
164
  constructor();
148
165
  onEnterDOM(): void;
149
166
  onExitDOM(): void;
150
167
  onInvalidation({ name }: ChangeInfo): void;
151
168
  onAfterRendering(): void;
152
169
  _handleResize(): void;
170
+ /**
171
+ * Given a candidate index, skips over a non-interactive non-collapsible header if needed.
172
+ * Returns the effective target index.
173
+ */
174
+ _skipNonInteractive(items: UDExListItemBase[], raw: number, lastIndex: number, direction: "down" | "up"): number;
175
+ /**
176
+ * Sets or clears the aria-activedescendant on the combobox input and updates
177
+ * the aria-live region so JAWS/VoiceOver announce the item name and position.
178
+ * The live region is the primary announcement mechanism because aria-activedescendant
179
+ * across a UI5 Popover (which teleports content to document.body) is unreliable —
180
+ * screen readers cannot follow the ID reference across shadow root boundaries.
181
+ */
182
+ _setActiveDescendant(item: UDExListItemBase | null, scroll?: boolean): void;
183
+ /**
184
+ * Activates the first navigable item as the aria-activedescendant without moving DOM focus.
185
+ */
186
+ _activateFirstItem(): void;
187
+ /**
188
+ * Navigates to the item at the given index, updating aria-activedescendant and _selectedOption.
189
+ */
190
+ _navigateToIndex(items: UDExListItemBase[], nextIndex: number): void;
153
191
  handleKeyDownDropdown(e: KeyboardEvent): void;
154
- handleListNavigationKeys(e: KeyboardEvent, items: UDExListItemBase[], effectiveTarget?: UDExListItemBase): void;
155
192
  handleEndKeyPress(items: UDExListItemBase[], lastItemIndex: number): void;
156
193
  handleHomeKeyPress(items: UDExListItemBase[]): void;
157
194
  handleDownKeyPress(items: UDExListItemBase[], currentSelectedIndex: number, lastItemIndex: number): void;
@@ -161,10 +198,24 @@ declare class UDExSelectBase extends UDExSearchableListBase {
161
198
  handleItemSelection(e: CustomEvent): void;
162
199
  onKeyDownSearch(e: KeyboardEvent): void;
163
200
  handleSearchChange(e: InputEvent): void;
201
+ onSearch(value: string): void;
164
202
  handleDirection(): void;
165
203
  handleDropdownBeforeClose(): void;
166
204
  dropdownBeforeOpen(): void;
167
205
  handleDropdownOpen(): void;
206
+ /**
207
+ * Announces the currently active descendant item (if set), or the first
208
+ * navigable item as a fallback. Used on open and after state changes.
209
+ */
210
+ _announceCurrentOrFirst(): void;
211
+ /**
212
+ * Returns the positional announcement text for an item, tree-aware when the
213
+ * list has groups. Matches the JAWS reading pattern of FilterMenu:
214
+ * group header → "level 0, X of Y" (Y = total navigable groups)
215
+ * group child → "level 1, X of Y" (Y = siblings in that group)
216
+ * flat item → "X of Y" (Y = total items, no level prefix)
217
+ */
218
+ _treePositionText(item: UDExListItemBase): string;
168
219
  fireEventDropdownBeforeOClose(): void;
169
220
  fireEventDropdownBeforeOpen(): void;
170
221
  fireEventDropdownOpen(): void;
@@ -200,6 +251,16 @@ declare class UDExSelectBase extends UDExSearchableListBase {
200
251
  _focusLastListItem(): void;
201
252
  _firstFocusableIn(el: Element | undefined): HTMLElement | null;
202
253
  _moveFocusAfterComponent(): void;
254
+ /**
255
+ * Builds the state portion of the live region announcement for a navigation item.
256
+ * Returns an array of state strings (e.g. ["collapsed", "Checked"]) to be joined
257
+ * with the label and position. Handles:
258
+ * - collapsible group headers: expanded / collapsed
259
+ * - MultiSelect: Checked / Unchecked / Indeterminate
260
+ * - SingleSelect (tree): Selected / Unselected
261
+ * - disabled: Disabled
262
+ */
263
+ _itemStateLabels(item: UDExListItemBase): string[];
203
264
  get ariaDescribedbyText(): string;
204
265
  get trigger(): HTMLElement;
205
266
  get isDisabled(): boolean;
@@ -212,6 +273,9 @@ declare class UDExSelectBase extends UDExSearchableListBase {
212
273
  };
213
274
  get popoverId(): string;
214
275
  get listboxRole(): AriaHasPopup;
276
+ get listAriaControlsId(): string;
277
+ get _activeDescendantMode(): boolean;
278
+ get isTreeStructure(): boolean;
215
279
  get hideDropdownSearch(): boolean;
216
280
  get showImageFlags(): boolean;
217
281
  get searchableList(): object;