@vonage/vivid 5.24.0 → 5.25.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 (331) hide show
  1. package/README.md +1 -1
  2. package/avatar/index.cjs +10 -10
  3. package/avatar/index.js +4 -3
  4. package/breadcrumb-item/index.cjs +9 -5
  5. package/breadcrumb-item/index.js +11 -6
  6. package/bundled/affix.cjs +1 -1
  7. package/bundled/affix.js +1 -1
  8. package/bundled/definition10.cjs +2 -1
  9. package/bundled/definition10.js +3 -2
  10. package/bundled/definition11.cjs +4 -4
  11. package/bundled/definition11.js +4 -3
  12. package/bundled/definition12.cjs +1 -1
  13. package/bundled/definition12.js +1 -0
  14. package/bundled/definition15.cjs +5 -5
  15. package/bundled/definition15.js +4 -3
  16. package/bundled/definition17.cjs +7 -7
  17. package/bundled/definition17.js +22 -109
  18. package/bundled/definition18.cjs +3 -3
  19. package/bundled/definition18.js +9 -31
  20. package/bundled/definition19.cjs +19 -19
  21. package/bundled/definition19.js +3 -2
  22. package/bundled/definition21.cjs +8 -8
  23. package/bundled/definition21.js +5 -4
  24. package/bundled/definition22.cjs +2 -2
  25. package/bundled/definition22.js +2 -2
  26. package/bundled/definition24.cjs +4 -4
  27. package/bundled/definition24.js +4 -3
  28. package/bundled/definition25.cjs +3 -3
  29. package/bundled/definition25.js +32 -28
  30. package/bundled/definition3.cjs +5 -5
  31. package/bundled/definition3.js +10 -40
  32. package/bundled/definition4.cjs +6 -6
  33. package/bundled/definition4.js +4 -3
  34. package/bundled/definition6.cjs +11 -11
  35. package/bundled/definition6.js +4 -3
  36. package/bundled/definition9.cjs +12 -6
  37. package/bundled/definition9.js +66 -43
  38. package/bundled/extractOptions.cjs +1 -1
  39. package/bundled/extractOptions.js +2 -2
  40. package/bundled/icon.cjs +1 -0
  41. package/bundled/icon.js +34 -0
  42. package/bundled/listbox.cjs +1 -1
  43. package/bundled/listbox.js +5 -2
  44. package/bundled/mixins.cjs +8 -8
  45. package/bundled/mixins.js +4 -3
  46. package/bundled/optgroup.cjs +1 -0
  47. package/bundled/optgroup.js +27 -0
  48. package/bundled/option.cjs +1 -0
  49. package/bundled/option.js +93 -0
  50. package/bundled/vivid-element.cjs +1 -1
  51. package/bundled/vivid-element.js +1 -1
  52. package/card/index.cjs +22 -22
  53. package/card/index.js +4 -3
  54. package/color-picker/index.cjs +18 -18
  55. package/color-picker/index.js +4 -3
  56. package/combobox/index.cjs +7 -7
  57. package/combobox/index.js +4 -2
  58. package/custom-elements.json +4159 -3847
  59. package/data-grid/index.cjs +24 -24
  60. package/data-grid/index.js +4 -3
  61. package/dial-pad/index.cjs +21 -21
  62. package/dial-pad/index.js +4 -3
  63. package/dialog/index.cjs +14 -14
  64. package/dialog/index.js +4 -3
  65. package/empty-state/index.cjs +3 -3
  66. package/empty-state/index.js +4 -3
  67. package/file-picker/index.cjs +7 -7
  68. package/file-picker/index.js +4 -3
  69. package/icon/definition.cjs +2 -1
  70. package/icon/definition.js +2 -1
  71. package/index.cjs +148 -141
  72. package/index.js +41 -37
  73. package/lib/accordion-item/accordion-item.d.ts +1 -0
  74. package/lib/combobox/combobox.d.ts +1 -1
  75. package/lib/components.d.ts +1 -0
  76. package/lib/dial-pad/dial-pad.d.ts +0 -1
  77. package/lib/listbox/definition.d.ts +3 -0
  78. package/lib/listbox/index.d.ts +1 -0
  79. package/lib/listbox/listbox.d.ts +1302 -0
  80. package/lib/listbox/listbox.template.d.ts +3 -0
  81. package/lib/listbox/variations.browser-spec.d.ts +1 -0
  82. package/lib/menu/menu.d.ts +0 -1
  83. package/lib/number-field/number-field.d.ts +0 -1
  84. package/lib/rich-text-editor/rte/features/base.d.ts +1 -0
  85. package/lib/rich-text-editor/rte/utils/default-textblock.d.ts +2 -2
  86. package/lib/tag-name-map.d.ts +2 -1
  87. package/lib/text-field/text-field.d.ts +1 -0
  88. package/lib/toggletip/toggletip.d.ts +1 -0
  89. package/lib/tooltip/tooltip.d.ts +1 -0
  90. package/listbox/definition.cjs +5 -0
  91. package/listbox/definition.js +2 -0
  92. package/listbox/index.cjs +11 -0
  93. package/listbox/index.js +540 -0
  94. package/nav/definition.cjs +1 -1
  95. package/nav/definition.js +1 -1
  96. package/nav-disclosure/definition.cjs +1 -1
  97. package/nav-disclosure/definition.js +1 -1
  98. package/nav-disclosure/index.cjs +4 -4
  99. package/nav-disclosure/index.js +4 -3
  100. package/nav-item/definition.cjs +1 -1
  101. package/nav-item/definition.js +1 -1
  102. package/note/definition.cjs +1 -1
  103. package/note/definition.js +1 -1
  104. package/number-field/definition.cjs +1 -1
  105. package/number-field/definition.js +1 -1
  106. package/optgroup/definition.cjs +2 -1
  107. package/optgroup/definition.js +2 -1
  108. package/option/definition.cjs +2 -1
  109. package/option/definition.js +2 -1
  110. package/package.json +8 -7
  111. package/pagination/definition.cjs +1 -1
  112. package/pagination/definition.js +1 -1
  113. package/platform-switch/definition.cjs +1 -1
  114. package/platform-switch/definition.js +1 -1
  115. package/popover/definition.cjs +1 -1
  116. package/popover/definition.js +1 -1
  117. package/popover/index.cjs +5 -5
  118. package/popover/index.js +4 -3
  119. package/progress/definition.cjs +1 -1
  120. package/progress/definition.js +1 -1
  121. package/radio/definition.cjs +1 -1
  122. package/radio/definition.js +1 -1
  123. package/radio-group/definition.cjs +1 -1
  124. package/radio-group/definition.js +1 -1
  125. package/range-slider/definition.cjs +1 -1
  126. package/range-slider/definition.js +1 -1
  127. package/rich-text-editor/definition.cjs +1 -1
  128. package/rich-text-editor/definition.js +1 -1
  129. package/rich-text-editor/index.cjs +13 -13
  130. package/rich-text-editor/index.js +22 -19
  131. package/rich-text-view/definition.cjs +1 -1
  132. package/rich-text-view/definition.js +1 -1
  133. package/searchable-select/definition.cjs +1 -1
  134. package/searchable-select/definition.js +1 -1
  135. package/searchable-select/index.cjs +23 -23
  136. package/searchable-select/index.js +10 -7
  137. package/select/definition.cjs +1 -1
  138. package/select/definition.js +1 -1
  139. package/selectable-box/definition.cjs +1 -1
  140. package/selectable-box/definition.js +1 -1
  141. package/shared/listbox/commands.d.ts +17 -0
  142. package/shared/listbox/move.d.ts +6 -0
  143. package/shared/listbox/options.d.ts +12 -0
  144. package/shared/listbox/selection.d.ts +28 -0
  145. package/shared/listbox/state.d.ts +26 -0
  146. package/shared/listbox/typeahead.d.ts +8 -0
  147. package/shared/listbox/with-options-filter.d.ts +440 -0
  148. package/shared/listbox/with-options.d.ts +862 -0
  149. package/side-drawer/definition.cjs +1 -1
  150. package/side-drawer/definition.js +1 -1
  151. package/simple-color-picker/definition.cjs +1 -1
  152. package/simple-color-picker/definition.js +1 -1
  153. package/simple-color-picker/index.cjs +6 -6
  154. package/simple-color-picker/index.js +4 -3
  155. package/split-button/definition.cjs +1 -1
  156. package/split-button/definition.js +1 -1
  157. package/status/definition.cjs +1 -1
  158. package/status/definition.js +1 -1
  159. package/switch/definition.cjs +1 -1
  160. package/switch/definition.js +1 -1
  161. package/tab/definition.cjs +1 -1
  162. package/tab/definition.js +1 -1
  163. package/tab-panel/definition.cjs +1 -1
  164. package/tab-panel/definition.js +1 -1
  165. package/table/definition.cjs +1 -1
  166. package/table/definition.js +1 -1
  167. package/table/index.cjs +13 -13
  168. package/table/index.js +4 -3
  169. package/tabs/definition.cjs +1 -1
  170. package/tabs/definition.js +1 -1
  171. package/tag/definition.cjs +1 -1
  172. package/tag/definition.js +1 -1
  173. package/tag/index.cjs +11 -11
  174. package/tag/index.js +4 -3
  175. package/tag-group/definition.cjs +1 -1
  176. package/tag-group/definition.js +1 -1
  177. package/text-area/definition.cjs +1 -1
  178. package/text-area/definition.js +1 -1
  179. package/time-picker/definition.cjs +1 -1
  180. package/time-picker/definition.js +1 -1
  181. package/tree-item/definition.cjs +1 -1
  182. package/tree-item/definition.js +1 -1
  183. package/tree-view/definition.cjs +1 -1
  184. package/tree-view/definition.js +1 -1
  185. package/unbundled/affix.cjs +2 -2
  186. package/unbundled/affix.js +1 -1
  187. package/unbundled/base-progress.cjs +1 -1
  188. package/unbundled/base-progress.js +1 -1
  189. package/unbundled/button.cjs +2 -2
  190. package/unbundled/button.js +2 -2
  191. package/unbundled/definition.cjs +2 -65
  192. package/unbundled/definition.js +4 -61
  193. package/unbundled/definition11.cjs +4 -3
  194. package/unbundled/definition11.js +3 -2
  195. package/unbundled/definition12.cjs +3 -2
  196. package/unbundled/definition12.js +3 -2
  197. package/unbundled/definition14.cjs +2 -1
  198. package/unbundled/definition14.js +2 -1
  199. package/unbundled/definition17.cjs +9 -4
  200. package/unbundled/definition17.js +9 -4
  201. package/unbundled/definition2.cjs +7 -2
  202. package/unbundled/definition2.js +8 -3
  203. package/unbundled/definition21.cjs +2 -1
  204. package/unbundled/definition21.js +2 -1
  205. package/unbundled/definition23.cjs +2 -1
  206. package/unbundled/definition23.js +2 -1
  207. package/unbundled/definition24.cjs +6 -4
  208. package/unbundled/definition24.js +6 -4
  209. package/unbundled/definition25.cjs +2 -1
  210. package/unbundled/definition25.js +2 -1
  211. package/unbundled/definition26.cjs +7 -4
  212. package/unbundled/definition26.js +7 -4
  213. package/unbundled/definition27.cjs +39 -5
  214. package/unbundled/definition27.js +40 -6
  215. package/unbundled/definition28.cjs +4 -3
  216. package/unbundled/definition28.js +4 -3
  217. package/unbundled/definition29.cjs +5 -168
  218. package/unbundled/definition29.js +11 -162
  219. package/unbundled/definition30.cjs +2 -63
  220. package/unbundled/definition30.js +5 -54
  221. package/unbundled/definition31.cjs +5 -3
  222. package/unbundled/definition31.js +5 -3
  223. package/unbundled/definition32.cjs +2 -1
  224. package/unbundled/definition32.js +2 -1
  225. package/unbundled/definition35.cjs +2 -1
  226. package/unbundled/definition35.js +2 -1
  227. package/unbundled/definition37.cjs +1 -1
  228. package/unbundled/definition37.js +1 -1
  229. package/unbundled/definition39.cjs +1 -1
  230. package/unbundled/definition39.js +1 -1
  231. package/unbundled/definition40.cjs +4 -2
  232. package/unbundled/definition40.js +4 -2
  233. package/unbundled/definition41.cjs +11 -6
  234. package/unbundled/definition41.js +11 -6
  235. package/unbundled/definition42.cjs +5 -4
  236. package/unbundled/definition42.js +5 -4
  237. package/unbundled/definition44.cjs +3 -2
  238. package/unbundled/definition44.js +3 -2
  239. package/unbundled/definition45.cjs +2 -2
  240. package/unbundled/definition45.js +2 -2
  241. package/unbundled/definition49.cjs +583 -79
  242. package/unbundled/definition49.js +579 -76
  243. package/unbundled/definition50.cjs +71 -33
  244. package/unbundled/definition50.js +67 -29
  245. package/unbundled/definition51.cjs +54 -23
  246. package/unbundled/definition51.js +52 -18
  247. package/unbundled/definition52.cjs +23 -39
  248. package/unbundled/definition52.js +17 -36
  249. package/unbundled/definition53.cjs +29 -314
  250. package/unbundled/definition53.js +27 -312
  251. package/unbundled/definition54.cjs +302 -195
  252. package/unbundled/definition54.js +298 -191
  253. package/unbundled/definition55.cjs +210 -40
  254. package/unbundled/definition55.js +206 -36
  255. package/unbundled/definition56.cjs +42 -266
  256. package/unbundled/definition56.js +38 -262
  257. package/unbundled/definition57.cjs +270 -50
  258. package/unbundled/definition57.js +267 -46
  259. package/unbundled/definition58.cjs +48 -146
  260. package/unbundled/definition58.js +47 -143
  261. package/unbundled/definition59.cjs +127 -225
  262. package/unbundled/definition59.js +122 -223
  263. package/unbundled/definition6.cjs +2 -1
  264. package/unbundled/definition6.js +2 -1
  265. package/unbundled/definition60.cjs +199 -418
  266. package/unbundled/definition60.js +196 -415
  267. package/unbundled/definition61.cjs +442 -3738
  268. package/unbundled/definition61.js +432 -3565
  269. package/unbundled/definition62.cjs +3717 -730
  270. package/unbundled/definition62.js +3544 -720
  271. package/unbundled/definition63.cjs +770 -97
  272. package/unbundled/definition63.js +767 -94
  273. package/unbundled/definition64.cjs +100 -999
  274. package/unbundled/definition64.js +98 -994
  275. package/unbundled/definition65.cjs +991 -93
  276. package/unbundled/definition65.js +985 -90
  277. package/unbundled/definition66.cjs +109 -73
  278. package/unbundled/definition66.js +105 -63
  279. package/unbundled/definition67.cjs +69 -155
  280. package/unbundled/definition67.js +60 -152
  281. package/unbundled/definition68.cjs +155 -119
  282. package/unbundled/definition68.js +151 -115
  283. package/unbundled/definition69.cjs +124 -49
  284. package/unbundled/definition69.js +120 -45
  285. package/unbundled/definition70.cjs +51 -85
  286. package/unbundled/definition70.js +50 -81
  287. package/unbundled/definition71.cjs +91 -19
  288. package/unbundled/definition71.js +86 -14
  289. package/unbundled/definition72.cjs +20 -87
  290. package/unbundled/definition72.js +14 -84
  291. package/unbundled/definition73.cjs +77 -294
  292. package/unbundled/definition73.js +72 -217
  293. package/unbundled/definition74.cjs +289 -311
  294. package/unbundled/definition74.js +219 -306
  295. package/unbundled/definition75.cjs +326 -26
  296. package/unbundled/definition75.js +317 -23
  297. package/unbundled/definition76.cjs +27 -122
  298. package/unbundled/definition76.js +22 -118
  299. package/unbundled/definition77.cjs +105 -232
  300. package/unbundled/definition77.js +101 -228
  301. package/unbundled/definition78.cjs +259 -26
  302. package/unbundled/definition78.js +249 -23
  303. package/unbundled/definition79.cjs +29 -148
  304. package/unbundled/definition79.js +27 -133
  305. package/unbundled/definition80.cjs +118 -173
  306. package/unbundled/definition80.js +109 -169
  307. package/unbundled/definition81.cjs +181 -477
  308. package/unbundled/definition81.js +176 -471
  309. package/unbundled/definition82.cjs +517 -0
  310. package/unbundled/definition82.js +497 -0
  311. package/unbundled/extractOptions.cjs +5 -5
  312. package/unbundled/extractOptions.js +2 -2
  313. package/unbundled/icon.cjs +67 -0
  314. package/unbundled/icon.js +61 -0
  315. package/unbundled/linkable.cjs +1 -1
  316. package/unbundled/linkable.js +1 -1
  317. package/unbundled/listbox.cjs +8 -3
  318. package/unbundled/listbox.js +7 -2
  319. package/unbundled/mixins.cjs +2 -1
  320. package/unbundled/mixins.js +2 -1
  321. package/unbundled/optgroup.cjs +66 -0
  322. package/unbundled/optgroup.js +54 -0
  323. package/unbundled/option.cjs +176 -0
  324. package/unbundled/option.js +164 -0
  325. package/unbundled/time-selection-picker.template.cjs +1 -1
  326. package/unbundled/time-selection-picker.template.js +1 -1
  327. package/unbundled/vivid-element.cjs +1 -1
  328. package/unbundled/vivid-element.js +1 -1
  329. package/video-player/definition.cjs +1 -1
  330. package/video-player/definition.js +1 -1
  331. package/vivid.api.json +336 -193
@@ -1,14 +1,14 @@
1
- const require_definition = require("./definition29.cjs");
2
- const require_definition$1 = require("./definition30.cjs");
1
+ const require_option = require("./option.cjs");
2
+ const require_optgroup = require("./optgroup.cjs");
3
3
  //#region src/shared/foundation/listbox/extractOptions.ts
4
4
  /**
5
5
  * Extracts all options from a list of slotted elements, including options nested inside optgroups.
6
6
  */
7
7
  function extractOptions(elements) {
8
8
  const options = [];
9
- for (const item of elements) if (require_definition.isListboxOption(item)) options.push(item);
10
- else if (require_definition$1.isOptgroup(item)) {
11
- for (const child of Array.from(item.children)) if (require_definition.isListboxOption(child)) options.push(child);
9
+ for (const item of elements) if (require_option.isListboxOption(item)) options.push(item);
10
+ else if (require_optgroup.isOptgroup(item)) {
11
+ for (const child of Array.from(item.children)) if (require_option.isListboxOption(child)) options.push(child);
12
12
  }
13
13
  return options;
14
14
  }
@@ -1,5 +1,5 @@
1
- import { i as isListboxOption } from "./definition29.js";
2
- import { i as isOptgroup } from "./definition30.js";
1
+ import { n as isListboxOption } from "./option.js";
2
+ import { n as isOptgroup } from "./optgroup.js";
3
3
  //#region src/shared/foundation/listbox/extractOptions.ts
4
4
  /**
5
5
  * Extracts all options from a list of slotted elements, including options nested inside optgroups.
@@ -0,0 +1,67 @@
1
+ require("./chunk.cjs");
2
+ const require_vivid_element = require("./vivid-element.cjs");
3
+ const require_numberConverter = require("./numberConverter.cjs");
4
+ const require_decorate = require("./decorate.cjs");
5
+ let _microsoft_fast_element = require("@microsoft/fast-element");
6
+ //#region src/lib/icon/icon.ts
7
+ var PLACEHOLDER_DELAY = 500;
8
+ var PLACEHOLDER_TIMEOUT = 2e3;
9
+ /**
10
+ * @public
11
+ * @component icon
12
+ * @slot - Default slot.
13
+ * @testQuery name name
14
+ */
15
+ var Icon = class extends require_vivid_element.VividElement {
16
+ constructor(..._args) {
17
+ super(..._args);
18
+ this.iconLoaded = false;
19
+ this.#currentRequestId = 0;
20
+ this.#abortController = null;
21
+ }
22
+ #currentRequestId;
23
+ #abortController;
24
+ /** @internal */
25
+ async nameChanged() {
26
+ const requestId = ++this.#currentRequestId;
27
+ if (this.#abortController) this.#abortController.abort();
28
+ this.#abortController = new AbortController();
29
+ this._svg = void 0;
30
+ this.iconLoaded = false;
31
+ let timeout = setTimeout(() => {
32
+ /* v8 ignore else -- @preserve */
33
+ if (this.#currentRequestId === requestId) {
34
+ this._svg = require_numberConverter.PLACEHOLDER_ICON;
35
+ timeout = setTimeout(() => {
36
+ /* v8 ignore else -- @preserve */
37
+ if (this.#currentRequestId === requestId && this._svg === require_numberConverter.PLACEHOLDER_ICON) this._svg = void 0;
38
+ }, PLACEHOLDER_TIMEOUT);
39
+ }
40
+ }, PLACEHOLDER_DELAY);
41
+ try {
42
+ const svg = await require_numberConverter.resolveIcon(this.name, this.#abortController.signal);
43
+ /* v8 ignore else -- @preserve */
44
+ if (this.#currentRequestId === requestId) this._svg = svg;
45
+ } catch {
46
+ if (this.#currentRequestId === requestId) this._svg = void 0;
47
+ } finally {
48
+ if (this.#currentRequestId === requestId) {
49
+ clearTimeout(timeout);
50
+ this.iconLoaded = true;
51
+ }
52
+ }
53
+ }
54
+ };
55
+ require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "connotation", void 0);
56
+ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: require_numberConverter.numberConverter })], Icon.prototype, "size", void 0);
57
+ require_decorate.__decorate([_microsoft_fast_element.observable], Icon.prototype, "_svg", void 0);
58
+ require_decorate.__decorate([_microsoft_fast_element.observable], Icon.prototype, "iconLoaded", void 0);
59
+ require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "label", void 0);
60
+ require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "name", void 0);
61
+ //#endregion
62
+ Object.defineProperty(exports, "Icon", {
63
+ enumerable: true,
64
+ get: function() {
65
+ return Icon;
66
+ }
67
+ });
@@ -0,0 +1,61 @@
1
+ import { t as VividElement } from "./vivid-element.js";
2
+ import { n as resolveIcon, r as PLACEHOLDER_ICON, t as numberConverter } from "./numberConverter.js";
3
+ import { t as __decorate } from "./decorate.js";
4
+ import { attr, observable } from "@microsoft/fast-element";
5
+ //#region src/lib/icon/icon.ts
6
+ var PLACEHOLDER_DELAY = 500;
7
+ var PLACEHOLDER_TIMEOUT = 2e3;
8
+ /**
9
+ * @public
10
+ * @component icon
11
+ * @slot - Default slot.
12
+ * @testQuery name name
13
+ */
14
+ var Icon = class extends VividElement {
15
+ constructor(..._args) {
16
+ super(..._args);
17
+ this.iconLoaded = false;
18
+ this.#currentRequestId = 0;
19
+ this.#abortController = null;
20
+ }
21
+ #currentRequestId;
22
+ #abortController;
23
+ /** @internal */
24
+ async nameChanged() {
25
+ const requestId = ++this.#currentRequestId;
26
+ if (this.#abortController) this.#abortController.abort();
27
+ this.#abortController = new AbortController();
28
+ this._svg = void 0;
29
+ this.iconLoaded = false;
30
+ let timeout = setTimeout(() => {
31
+ /* v8 ignore else -- @preserve */
32
+ if (this.#currentRequestId === requestId) {
33
+ this._svg = PLACEHOLDER_ICON;
34
+ timeout = setTimeout(() => {
35
+ /* v8 ignore else -- @preserve */
36
+ if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) this._svg = void 0;
37
+ }, PLACEHOLDER_TIMEOUT);
38
+ }
39
+ }, PLACEHOLDER_DELAY);
40
+ try {
41
+ const svg = await resolveIcon(this.name, this.#abortController.signal);
42
+ /* v8 ignore else -- @preserve */
43
+ if (this.#currentRequestId === requestId) this._svg = svg;
44
+ } catch {
45
+ if (this.#currentRequestId === requestId) this._svg = void 0;
46
+ } finally {
47
+ if (this.#currentRequestId === requestId) {
48
+ clearTimeout(timeout);
49
+ this.iconLoaded = true;
50
+ }
51
+ }
52
+ }
53
+ };
54
+ __decorate([attr], Icon.prototype, "connotation", void 0);
55
+ __decorate([attr({ converter: numberConverter })], Icon.prototype, "size", void 0);
56
+ __decorate([observable], Icon.prototype, "_svg", void 0);
57
+ __decorate([observable], Icon.prototype, "iconLoaded", void 0);
58
+ __decorate([attr], Icon.prototype, "label", void 0);
59
+ __decorate([attr], Icon.prototype, "name", void 0);
60
+ //#endregion
61
+ export { Icon as t };
@@ -3,7 +3,7 @@ const require_decorate = require("./decorate.cjs");
3
3
  const require_delegates_aria = require("./delegates-aria.cjs");
4
4
  let _microsoft_fast_element = require("@microsoft/fast-element");
5
5
  //#region src/shared/patterns/linkable.ts
6
- /** Mixin for components that can be links, inherits attributes from {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }. */
6
+ /** Mixin for components that can be links, inherits attributes from [`<a>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). */
7
7
  var Linkable = (Base) => {
8
8
  class LinkableElement extends require_delegates_aria.DelegatesAria(Base) {
9
9
  constructor(..._args) {
@@ -2,7 +2,7 @@ import { t as __decorate } from "./decorate.js";
2
2
  import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
3
3
  import { attr, html, ref } from "@microsoft/fast-element";
4
4
  //#region src/shared/patterns/linkable.ts
5
- /** Mixin for components that can be links, inherits attributes from {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }. */
5
+ /** Mixin for components that can be links, inherits attributes from [`<a>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). */
6
6
  var Linkable = (Base) => {
7
7
  class LinkableElement extends DelegatesAria(Base) {
8
8
  constructor(..._args) {
@@ -1,8 +1,8 @@
1
1
  require("./chunk.cjs");
2
2
  const require_vivid_element = require("./vivid-element.cjs");
3
3
  const require_decorate = require("./decorate.cjs");
4
- const require_definition = require("./definition29.cjs");
5
- const require_definition$1 = require("./definition30.cjs");
4
+ const require_option = require("./option.cjs");
5
+ const require_optgroup = require("./optgroup.cjs");
6
6
  const require_extractOptions = require("./extractOptions.cjs");
7
7
  let _microsoft_fast_element = require("@microsoft/fast-element");
8
8
  let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
@@ -49,7 +49,7 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
49
49
  }
50
50
  }
51
51
  static {
52
- this.slottedOptionFilter = (n) => require_definition.isListboxOption(n) && !n.hidden || require_definition$1.isOptgroup(n);
52
+ this.slottedOptionFilter = (n) => require_option.isListboxOption(n) && !n.hidden || require_optgroup.isOptgroup(n);
53
53
  }
54
54
  static {
55
55
  this.TYPE_AHEAD_TIMEOUT_MS = 1e3;
@@ -298,6 +298,11 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
298
298
  _isDefaultSelected(option) {
299
299
  return option.defaultSelected;
300
300
  }
301
+ /** @internal */
302
+ _activeDescendantChanged(_prev, next) {
303
+ if (!this.$fastController?.isConnected) return;
304
+ for (const option of this.options) option._highlighted = Boolean(next && option.id === next);
305
+ }
301
306
  /** Sets an option as selected and gives it focus. */
302
307
  setSelectedOptions() {
303
308
  this.selectedOptions = this.selectedIndex !== -1 ? [this.options[this.selectedIndex]] : [];
@@ -1,7 +1,7 @@
1
1
  import { t as VividElement } from "./vivid-element.js";
2
2
  import { t as __decorate } from "./decorate.js";
3
- import { i as isListboxOption } from "./definition29.js";
4
- import { i as isOptgroup } from "./definition30.js";
3
+ import { n as isListboxOption } from "./option.js";
4
+ import { n as isOptgroup } from "./optgroup.js";
5
5
  import { t as extractOptions } from "./extractOptions.js";
6
6
  import { Observable, attr, observable } from "@microsoft/fast-element";
7
7
  import { findLastIndex, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyHome, keySpace, keyTab, uniqueId } from "@microsoft/fast-web-utilities";
@@ -297,6 +297,11 @@ var Listbox = class Listbox extends VividElement {
297
297
  _isDefaultSelected(option) {
298
298
  return option.defaultSelected;
299
299
  }
300
+ /** @internal */
301
+ _activeDescendantChanged(_prev, next) {
302
+ if (!this.$fastController?.isConnected) return;
303
+ for (const option of this.options) option._highlighted = Boolean(next && option.id === next);
304
+ }
300
305
  /** Sets an option as selected and gives it focus. */
301
306
  setSelectedOptions() {
302
307
  this.selectedOptions = this.selectedIndex !== -1 ? [this.options[this.selectedIndex]] : [];
@@ -2,6 +2,7 @@ require("./chunk.cjs");
2
2
  const require_vivid_element = require("./vivid-element.cjs");
3
3
  const require_definition = require("./definition.cjs");
4
4
  const require_decorate = require("./decorate.cjs");
5
+ const require_icon = require("./icon.cjs");
5
6
  const require_localized = require("./localized.cjs");
6
7
  const require_definition$1 = require("./definition22.cjs");
7
8
  const require_randomId = require("./randomId.cjs");
@@ -20,7 +21,7 @@ var FeedbackMessage = class extends require_localized.Localized(require_vivid_el
20
21
  };
21
22
  require_decorate.__decorate([_microsoft_fast_element.attr], FeedbackMessage.prototype, "type", void 0);
22
23
  function iconTemplate(context, icon, textI18nKey) {
23
- const iconTag = context.tagFor(require_definition.Icon);
24
+ const iconTag = context.tagFor(require_icon.Icon);
24
25
  return _microsoft_fast_element.html`<${iconTag} class="icon" name="${icon}" label="${(x) => x.locale.feedbackMessage[textI18nKey]}"></${iconTag}>`;
25
26
  }
26
27
  function iconForType(context) {
@@ -1,6 +1,7 @@
1
1
  import { t as VividElement, u as defineVividComponent } from "./vivid-element.js";
2
- import { r as Icon, t as iconDefinition } from "./definition.js";
2
+ import { t as iconDefinition } from "./definition.js";
3
3
  import { t as __decorate } from "./decorate.js";
4
+ import { t as Icon } from "./icon.js";
4
5
  import { t as Localized } from "./localized.js";
5
6
  import { n as visuallyHiddenDefinition } from "./definition22.js";
6
7
  import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
@@ -0,0 +1,66 @@
1
+ require("./chunk.cjs");
2
+ const require_vivid_element = require("./vivid-element.cjs");
3
+ const require_decorate = require("./decorate.cjs");
4
+ const require_host_semantics = require("./host-semantics.cjs");
5
+ let _microsoft_fast_element = require("@microsoft/fast-element");
6
+ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
7
+ //#region src/lib/optgroup/optgroup.ts
8
+ /**
9
+ * Determines if the element is an {@link Optgroup}
10
+ *
11
+ * @param element - the element to test.
12
+ */
13
+ function isOptgroup(el) {
14
+ return el instanceof Optgroup;
15
+ }
16
+ /**
17
+ * Groups options within Select, Searchable Select, or Combobox components
18
+ *
19
+ * @public
20
+ * @component optgroup
21
+ * @slot - Use the default slot to add Option elements to the group.
22
+ * @slot label - Use the label slot to provide a label for the Optgroup.
23
+ */
24
+ var Optgroup = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {
25
+ constructor(..._args) {
26
+ super(..._args);
27
+ this._computedLabelledBy = null;
28
+ }
29
+ /** @internal */
30
+ _labelSlottedContentChanged() {
31
+ const elements = this._labelSlottedContent.filter((node) => node instanceof Element);
32
+ const ids = [];
33
+ for (const el of elements) {
34
+ if (!el.id) el.id = (0, _microsoft_fast_web_utilities.uniqueId)("vvd-optgroup-label-");
35
+ ids.push(el.id);
36
+ }
37
+ this._computedLabelledBy = ids.join(" ");
38
+ }
39
+ /**
40
+ * Handles changes to the default slot.
41
+ * Dispatches a bubbling, composed event so that parent components
42
+ * (Select, Combobox, Searchable Select) can re-process their options.
43
+ * @internal
44
+ */
45
+ _onSlotChange() {
46
+ this.$emit("optgroup-change", void 0, {
47
+ bubbles: true,
48
+ composed: true
49
+ });
50
+ }
51
+ };
52
+ require_decorate.__decorate([_microsoft_fast_element.observable], Optgroup.prototype, "_labelSlottedContent", void 0);
53
+ require_decorate.__decorate([_microsoft_fast_element.observable], Optgroup.prototype, "_computedLabelledBy", void 0);
54
+ //#endregion
55
+ Object.defineProperty(exports, "Optgroup", {
56
+ enumerable: true,
57
+ get: function() {
58
+ return Optgroup;
59
+ }
60
+ });
61
+ Object.defineProperty(exports, "isOptgroup", {
62
+ enumerable: true,
63
+ get: function() {
64
+ return isOptgroup;
65
+ }
66
+ });
@@ -0,0 +1,54 @@
1
+ import { t as VividElement } from "./vivid-element.js";
2
+ import { t as __decorate } from "./decorate.js";
3
+ import { t as HostSemantics } from "./host-semantics.js";
4
+ import { observable } from "@microsoft/fast-element";
5
+ import { uniqueId } from "@microsoft/fast-web-utilities";
6
+ //#region src/lib/optgroup/optgroup.ts
7
+ /**
8
+ * Determines if the element is an {@link Optgroup}
9
+ *
10
+ * @param element - the element to test.
11
+ */
12
+ function isOptgroup(el) {
13
+ return el instanceof Optgroup;
14
+ }
15
+ /**
16
+ * Groups options within Select, Searchable Select, or Combobox components
17
+ *
18
+ * @public
19
+ * @component optgroup
20
+ * @slot - Use the default slot to add Option elements to the group.
21
+ * @slot label - Use the label slot to provide a label for the Optgroup.
22
+ */
23
+ var Optgroup = class extends HostSemantics(VividElement) {
24
+ constructor(..._args) {
25
+ super(..._args);
26
+ this._computedLabelledBy = null;
27
+ }
28
+ /** @internal */
29
+ _labelSlottedContentChanged() {
30
+ const elements = this._labelSlottedContent.filter((node) => node instanceof Element);
31
+ const ids = [];
32
+ for (const el of elements) {
33
+ if (!el.id) el.id = uniqueId("vvd-optgroup-label-");
34
+ ids.push(el.id);
35
+ }
36
+ this._computedLabelledBy = ids.join(" ");
37
+ }
38
+ /**
39
+ * Handles changes to the default slot.
40
+ * Dispatches a bubbling, composed event so that parent components
41
+ * (Select, Combobox, Searchable Select) can re-process their options.
42
+ * @internal
43
+ */
44
+ _onSlotChange() {
45
+ this.$emit("optgroup-change", void 0, {
46
+ bubbles: true,
47
+ composed: true
48
+ });
49
+ }
50
+ };
51
+ __decorate([observable], Optgroup.prototype, "_labelSlottedContent", void 0);
52
+ __decorate([observable], Optgroup.prototype, "_computedLabelledBy", void 0);
53
+ //#endregion
54
+ export { isOptgroup as n, Optgroup as t };
@@ -0,0 +1,176 @@
1
+ require("./chunk.cjs");
2
+ const require_vivid_element = require("./vivid-element.cjs");
3
+ const require_decorate = require("./decorate.cjs");
4
+ const require_affix = require("./affix.cjs");
5
+ const require_host_semantics = require("./host-semantics.cjs");
6
+ let _microsoft_fast_element = require("@microsoft/fast-element");
7
+ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
8
+ //#region src/lib/option/option.ts
9
+ /**
10
+ * Determines if the element is a {@link (ListboxOption:class)}
11
+ *
12
+ * @param element - the element to test.
13
+ */
14
+ function isListboxOption(el) {
15
+ return (0, _microsoft_fast_web_utilities.isHTMLElement)(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement || el instanceof ListboxOption);
16
+ }
17
+ /**
18
+ * Implements [ARIA option](https://www.w3.org/TR/wai-aria-1.1/#option).
19
+ *
20
+ * @public
21
+ * @component option
22
+ * @slot icon - The preferred way to add an icon to the component.
23
+ * @slot tag-icon - Icon to be displayed in the tag when selected inside a Searchable Select.
24
+ * @slot trailing-meta - For additional elements at the end of the Option.
25
+ * @testAction click click #locator
26
+ */
27
+ var ListboxOption = class extends require_host_semantics.HostSemantics(require_affix.AffixIconWithTrailing(require_vivid_element.VividElement)) {
28
+ defaultSelectedChanged() {
29
+ if (!this.dirtySelected) {
30
+ this.selected = this.defaultSelected;
31
+ if (this.proxy instanceof HTMLOptionElement) this.proxy.selected = this.defaultSelected;
32
+ }
33
+ if (this.proxy instanceof HTMLOptionElement) this.proxy.defaultSelected = this.defaultSelected;
34
+ }
35
+ disabledChanged() {
36
+ /* v8 ignore if -- @preserve */
37
+ if (this.proxy instanceof HTMLOptionElement) this.proxy.disabled = this.disabled;
38
+ }
39
+ /**
40
+ * Alias for `defaultSelected`, mirroring the option's initial selected state (the
41
+ * `selected` attribute). Distinct from `current-selected`, which reflects the
42
+ * option's live selected state.
43
+ * @deprecated Use `defaultSelected` instead.
44
+ */
45
+ get selectedAttribute() {
46
+ return this.defaultSelected;
47
+ }
48
+ set selectedAttribute(value) {
49
+ this.defaultSelected = value;
50
+ }
51
+ selectedChanged() {
52
+ if (!this.dirtySelected) this.dirtySelected = true;
53
+ if (this.proxy instanceof HTMLOptionElement) this.proxy.selected = this.selected;
54
+ }
55
+ valueChanged() {
56
+ if (typeof this.value !== "string") {
57
+ this.value = "";
58
+ return;
59
+ }
60
+ if (this.proxy instanceof HTMLOptionElement) this.proxy.value = this.value;
61
+ }
62
+ get label() {
63
+ return this._label ?? this.text;
64
+ }
65
+ set label(value) {
66
+ this._label = value;
67
+ }
68
+ set text(value) {
69
+ this._text = value;
70
+ }
71
+ get text() {
72
+ return this._text ?? "";
73
+ }
74
+ /**
75
+ * Provides an accessible name for use by parent components.
76
+ * Note: Does not implement full accessible name computation, e.g. slotted content is missed.
77
+ * @internal
78
+ */
79
+ _getAccessibleName() {
80
+ return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
81
+ }
82
+ get form() {
83
+ return null;
84
+ }
85
+ /** @internal */
86
+ get _hasMatchedText() {
87
+ return Boolean(this.matchedText ?? this._vvdSearchText);
88
+ }
89
+ /**
90
+ * From is inclusive, to is exclusive.
91
+ * @internal
92
+ */
93
+ get _matchedRange() {
94
+ const matchedText = this.matchedText ?? this._vvdSearchText;
95
+ if (matchedText) {
96
+ const matchIndex = this.text.toLowerCase().indexOf(matchedText.toLowerCase());
97
+ return matchIndex === -1 ? {
98
+ from: 0,
99
+ to: 0
100
+ } : {
101
+ from: matchIndex,
102
+ to: matchIndex + matchedText.length
103
+ };
104
+ }
105
+ return {
106
+ from: 0,
107
+ to: 0
108
+ };
109
+ }
110
+ constructor(text, value, defaultSelected, selected) {
111
+ super();
112
+ this.defaultSelected = false;
113
+ this.dirtySelected = false;
114
+ this.value = "";
115
+ this._highlighted = false;
116
+ this._displayCheckmark = false;
117
+ this._vvdSearchText = "";
118
+ this._isNotMatching = false;
119
+ if (text) this.text = text;
120
+ if (value) this.value = value;
121
+ if (defaultSelected) this.defaultSelected = defaultSelected;
122
+ if (selected) this.selected = selected;
123
+ this.proxy = new Option(this.text, this.value, this.defaultSelected, this.selected);
124
+ this.proxy.disabled = this.disabled;
125
+ }
126
+ /** @internal */
127
+ connectedCallback() {
128
+ super.connectedCallback();
129
+ if (!this.dirtySelected) {
130
+ this.selected = this.defaultSelected;
131
+ this.dirtySelected = false;
132
+ }
133
+ }
134
+ };
135
+ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: {
136
+ fromView: (value) => {
137
+ if (value === true || value === "true") return true;
138
+ if (value === false || value === "false") return false;
139
+ },
140
+ toView: (value) => value
141
+ } })], ListboxOption.prototype, "checked", void 0);
142
+ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
143
+ attribute: "selected",
144
+ mode: "boolean"
145
+ })], ListboxOption.prototype, "defaultSelected", void 0);
146
+ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], ListboxOption.prototype, "disabled", void 0);
147
+ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({
148
+ attribute: "current-selected",
149
+ mode: "boolean"
150
+ })], ListboxOption.prototype, "selected", void 0);
151
+ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "value" })], ListboxOption.prototype, "value", void 0);
152
+ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "label" })], ListboxOption.prototype, "_label", void 0);
153
+ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "text" })], ListboxOption.prototype, "_text", void 0);
154
+ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "text-secondary" })], ListboxOption.prototype, "textSecondary", void 0);
155
+ require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_highlighted", void 0);
156
+ require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_displayCheckmark", void 0);
157
+ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "matched-text" })], ListboxOption.prototype, "matchedText", void 0);
158
+ require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_vvdSearchText", void 0);
159
+ require_decorate.__decorate([_microsoft_fast_element.volatile], ListboxOption.prototype, "_hasMatchedText", null);
160
+ require_decorate.__decorate([_microsoft_fast_element.observable], ListboxOption.prototype, "_isNotMatching", void 0);
161
+ require_decorate.__decorate([_microsoft_fast_element.volatile], ListboxOption.prototype, "_matchedRange", null);
162
+ require_decorate.__decorate([_microsoft_fast_element.attr], ListboxOption.prototype, "connotation", void 0);
163
+ require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "tag-connotation" })], ListboxOption.prototype, "tagConnotation", void 0);
164
+ //#endregion
165
+ Object.defineProperty(exports, "ListboxOption", {
166
+ enumerable: true,
167
+ get: function() {
168
+ return ListboxOption;
169
+ }
170
+ });
171
+ Object.defineProperty(exports, "isListboxOption", {
172
+ enumerable: true,
173
+ get: function() {
174
+ return isListboxOption;
175
+ }
176
+ });