@vonage/vivid 5.16.0 → 5.17.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 (317) hide show
  1. package/accordion/index.cjs +1 -1
  2. package/accordion/index.js +1 -1
  3. package/accordion-item/index.cjs +1 -1
  4. package/accordion-item/index.js +1 -1
  5. package/action-group/index.cjs +3 -3
  6. package/action-group/index.js +5 -5
  7. package/alert/index.cjs +3 -3
  8. package/alert/index.js +17 -17
  9. package/audio-player/index.cjs +16 -16
  10. package/audio-player/index.js +27 -27
  11. package/avatar/index.cjs +2 -2
  12. package/avatar/index.js +6 -6
  13. package/badge/index.cjs +2 -2
  14. package/badge/index.js +6 -6
  15. package/banner/index.cjs +3 -3
  16. package/banner/index.js +15 -15
  17. package/bundled/base-color-picker.cjs +2 -2
  18. package/bundled/base-color-picker.js +5 -5
  19. package/bundled/button.cjs +1 -1
  20. package/bundled/button.js +2 -2
  21. package/bundled/calendar-picker.template.cjs +2 -2
  22. package/bundled/calendar-picker.template.js +498 -498
  23. package/bundled/definition10.cjs +18 -30
  24. package/bundled/definition10.js +53 -155
  25. package/bundled/definition11.cjs +10 -19
  26. package/bundled/definition11.js +25 -74
  27. package/bundled/definition12.cjs +72 -18
  28. package/bundled/definition12.js +171 -107
  29. package/bundled/definition13.cjs +18 -17
  30. package/bundled/definition13.js +45 -65
  31. package/bundled/definition14.cjs +5 -10
  32. package/bundled/definition14.js +9 -27
  33. package/bundled/definition15.cjs +17 -71
  34. package/bundled/definition15.js +64 -181
  35. package/bundled/definition16.cjs +12 -4
  36. package/bundled/definition16.js +79 -14
  37. package/bundled/definition17.cjs +19 -13
  38. package/bundled/definition17.js +119 -70
  39. package/bundled/definition18.cjs +87 -12
  40. package/bundled/definition18.js +409 -52
  41. package/bundled/definition19.cjs +5 -87
  42. package/bundled/definition19.js +14 -422
  43. package/bundled/definition2.cjs +3 -3
  44. package/bundled/definition2.js +27 -27
  45. package/bundled/definition20.cjs +30 -5
  46. package/bundled/definition20.js +159 -9
  47. package/bundled/definition21.cjs +28 -19
  48. package/bundled/definition21.js +164 -47
  49. package/bundled/definition22.cjs +38 -23
  50. package/bundled/definition22.js +64 -82
  51. package/bundled/definition3.cjs +1 -1
  52. package/bundled/definition3.js +15 -15
  53. package/bundled/definition4.cjs +23 -38
  54. package/bundled/definition4.js +82 -64
  55. package/bundled/definition5.cjs +2 -2
  56. package/bundled/definition5.js +5 -5
  57. package/bundled/definition6.cjs +2 -2
  58. package/bundled/definition6.js +24 -24
  59. package/bundled/definition9.cjs +12 -30
  60. package/bundled/definition9.js +55 -148
  61. package/bundled/divider.cjs +1 -1
  62. package/bundled/divider.js +5 -5
  63. package/bundled/listbox.cjs +1 -1
  64. package/bundled/listbox.js +1 -1
  65. package/bundled/mixins.cjs +4 -4
  66. package/bundled/mixins.js +43 -43
  67. package/bundled/picker-field.template.cjs +7 -7
  68. package/bundled/picker-field.template.js +14 -14
  69. package/bundled/slider.template.cjs +7 -7
  70. package/bundled/slider.template.js +12 -12
  71. package/bundled/slottable-request.cjs +1 -1
  72. package/bundled/slottable-request.js +8 -38
  73. package/bundled/time-selection-picker.template.cjs +4 -4
  74. package/bundled/time-selection-picker.template.js +35 -35
  75. package/bundled/vivid-element.cjs +1 -1
  76. package/bundled/vivid-element.js +1 -1
  77. package/calendar/index.cjs +11 -11
  78. package/calendar/index.js +30 -237
  79. package/calendar-event/index.cjs +3 -3
  80. package/calendar-event/index.js +4 -4
  81. package/card/index.cjs +14 -11
  82. package/card/index.js +16 -13
  83. package/checkbox/index.cjs +1 -1
  84. package/checkbox/index.js +1 -1
  85. package/color-picker/definition.cjs +1 -1
  86. package/color-picker/definition.js +1 -1
  87. package/color-picker/index.cjs +6 -6
  88. package/color-picker/index.js +24 -24
  89. package/combobox/definition.cjs +1 -1
  90. package/combobox/definition.js +1 -1
  91. package/combobox/index.cjs +9 -8
  92. package/combobox/index.js +32 -28
  93. package/contextual-help/definition.cjs +1 -1
  94. package/contextual-help/definition.js +1 -1
  95. package/contextual-help/index.cjs +1 -1
  96. package/contextual-help/index.js +1 -1
  97. package/custom-elements.json +1027 -615
  98. package/data-grid/definition.js +1 -1
  99. package/data-grid/index.cjs +17 -17
  100. package/data-grid/index.js +261 -264
  101. package/date-picker/index.cjs +1 -1
  102. package/date-picker/index.js +12 -12
  103. package/date-range-picker/index.cjs +1 -1
  104. package/date-range-picker/index.js +7 -7
  105. package/date-time-picker/index.cjs +4 -4
  106. package/date-time-picker/index.js +24 -24
  107. package/dial-pad/index.cjs +3 -2
  108. package/dial-pad/index.js +6 -5
  109. package/dialog/index.cjs +4 -4
  110. package/dialog/index.js +5 -5
  111. package/divider/index.cjs +1 -1
  112. package/divider/index.js +1 -1
  113. package/fab/index.cjs +3 -3
  114. package/fab/index.js +8 -8
  115. package/file-picker/index.cjs +16 -13
  116. package/file-picker/index.js +31 -28
  117. package/header/index.cjs +4 -4
  118. package/header/index.js +5 -5
  119. package/index.cjs +24 -21
  120. package/index.js +11 -11
  121. package/lib/combobox/combobox.d.ts +0 -3
  122. package/lib/date-time-picker/date-time-picker.d.ts +0 -4
  123. package/lib/dial-pad/dial-pad.d.ts +6 -2
  124. package/lib/dialog/dialog.d.ts +0 -1
  125. package/lib/menu/menu.d.ts +0 -1
  126. package/lib/option/option.d.ts +0 -1
  127. package/lib/rich-text-editor/rte/exports.d.ts +1 -0
  128. package/lib/rich-text-editor/rte/features/alignment.d.ts +1 -1
  129. package/lib/rich-text-editor/rte/features/character-count.d.ts +21 -0
  130. package/lib/rich-text-editor/rte/features/font-size-picker.d.ts +1 -1
  131. package/lib/rich-text-editor/rte/features/internal/basic-text-blocks.d.ts +1 -1
  132. package/lib/rich-text-editor/rte/features/keyboard-shortcuts.d.ts +1 -1
  133. package/lib/rich-text-editor/rte/features/text-color-picker.d.ts +1 -1
  134. package/lib/rich-text-editor/rte/public-interface.d.ts +6 -0
  135. package/lib/searchable-select/option-tag.d.ts +0 -1
  136. package/lib/table/definition.d.ts +2 -1
  137. package/lib/table/table-header-cell.d.ts +3 -0
  138. package/lib/table/table-sorting-button.d.ts +415 -0
  139. package/lib/table/table-sorting-button.template.d.ts +3 -0
  140. package/locales/de-DE.cjs +4 -178
  141. package/locales/de-DE.js +2 -179
  142. package/locales/en-GB.cjs +4 -9
  143. package/locales/en-GB.js +2 -10
  144. package/locales/en-US.cjs +268 -2
  145. package/locales/en-US.js +265 -1
  146. package/locales/ja-JP.cjs +4 -171
  147. package/locales/ja-JP.js +2 -172
  148. package/locales/zh-CN.cjs +4 -172
  149. package/locales/zh-CN.js +2 -173
  150. package/menu/index.cjs +1 -1
  151. package/menu/index.js +1 -1
  152. package/menu-item/index.cjs +1 -1
  153. package/menu-item/index.js +1 -1
  154. package/nav-disclosure/index.cjs +3 -3
  155. package/nav-disclosure/index.js +8 -8
  156. package/nav-item/index.cjs +1 -1
  157. package/nav-item/index.js +7 -7
  158. package/note/index.cjs +2 -2
  159. package/note/index.js +6 -6
  160. package/number-field/index.cjs +4 -4
  161. package/number-field/index.js +31 -31
  162. package/option/definition.cjs +1 -1
  163. package/option/definition.js +1 -1
  164. package/option/index.cjs +1 -1
  165. package/option/index.js +1 -1
  166. package/package.json +7 -8
  167. package/pagination/index.cjs +3 -3
  168. package/pagination/index.js +15 -15
  169. package/popover/index.cjs +4 -4
  170. package/popover/index.js +5 -5
  171. package/progress/index.cjs +2 -2
  172. package/progress/index.js +5 -5
  173. package/radio/index.cjs +1 -1
  174. package/radio/index.js +1 -1
  175. package/radio-group/index.cjs +4 -4
  176. package/radio-group/index.js +10 -10
  177. package/range-slider/index.cjs +4 -4
  178. package/range-slider/index.js +17 -17
  179. package/rich-text-editor/definition.cjs +1 -0
  180. package/rich-text-editor/definition.js +2 -2
  181. package/rich-text-editor/index.cjs +13 -13
  182. package/rich-text-editor/index.js +1886 -1829
  183. package/rich-text-view/index.cjs +1 -1
  184. package/rich-text-view/index.js +8 -8
  185. package/searchable-select/index.cjs +12 -12
  186. package/searchable-select/index.js +25 -25
  187. package/select/index.cjs +1 -1
  188. package/select/index.js +1 -1
  189. package/selectable-box/index.cjs +7 -7
  190. package/selectable-box/index.js +11 -11
  191. package/shared/foundation/test-utilities/fixture.d.ts +1 -1
  192. package/shared/patterns/linkable.d.ts +1 -1
  193. package/simple-color-picker/index.cjs +3 -3
  194. package/simple-color-picker/index.js +10 -10
  195. package/split-button/index.cjs +5 -5
  196. package/split-button/index.js +10 -10
  197. package/status/index.cjs +2 -2
  198. package/status/index.js +12 -12
  199. package/switch/index.cjs +3 -3
  200. package/switch/index.js +5 -5
  201. package/tab/index.cjs +1 -1
  202. package/tab/index.js +1 -1
  203. package/tab-panel/index.cjs +1 -1
  204. package/tab-panel/index.js +1 -1
  205. package/table/definition.cjs +17 -14
  206. package/table/definition.js +3 -2
  207. package/table/index.cjs +19 -10
  208. package/table/index.js +69 -21
  209. package/tabs/index.cjs +2 -2
  210. package/tabs/index.js +4 -4
  211. package/tag/index.cjs +7 -7
  212. package/tag/index.js +9 -9
  213. package/tag-group/index.cjs +3 -3
  214. package/tag-group/index.js +5 -5
  215. package/text-area/index.cjs +2 -2
  216. package/text-area/index.js +12 -12
  217. package/text-field/definition.cjs +1 -1
  218. package/text-field/definition.js +1 -1
  219. package/text-field/index.cjs +1 -1
  220. package/text-field/index.js +1 -1
  221. package/time-picker/index.cjs +1 -1
  222. package/time-picker/index.js +1 -1
  223. package/toggletip/definition.cjs +1 -1
  224. package/toggletip/definition.js +1 -1
  225. package/toggletip/index.cjs +1 -1
  226. package/toggletip/index.js +1 -1
  227. package/tooltip/definition.cjs +1 -1
  228. package/tooltip/definition.js +1 -1
  229. package/tooltip/index.cjs +1 -1
  230. package/tooltip/index.js +1 -1
  231. package/tree-item/index.cjs +1 -1
  232. package/tree-item/index.js +1 -1
  233. package/tree-view/index.cjs +3 -3
  234. package/tree-view/index.js +17 -17
  235. package/unbundled/button.cjs +2 -2
  236. package/unbundled/button.js +2 -2
  237. package/unbundled/calendar-picker.template.cjs +4347 -9
  238. package/unbundled/calendar-picker.template.js +4345 -7
  239. package/unbundled/chunk.cjs +0 -22
  240. package/unbundled/definition13.cjs +1 -8
  241. package/unbundled/definition13.js +1 -8
  242. package/unbundled/definition14.cjs +2 -2
  243. package/unbundled/definition14.js +2 -2
  244. package/unbundled/definition2.cjs +1 -1
  245. package/unbundled/definition2.js +1 -1
  246. package/unbundled/definition21.cjs +1 -2
  247. package/unbundled/definition21.js +1 -2
  248. package/unbundled/definition22.cjs +7 -2
  249. package/unbundled/definition22.js +7 -2
  250. package/unbundled/definition24.cjs +98 -979
  251. package/unbundled/definition24.js +93 -974
  252. package/unbundled/definition25.cjs +37 -322
  253. package/unbundled/definition25.js +33 -318
  254. package/unbundled/definition26.cjs +317 -91
  255. package/unbundled/definition26.js +313 -87
  256. package/unbundled/definition27.cjs +94 -192
  257. package/unbundled/definition27.js +91 -183
  258. package/unbundled/definition28.cjs +387 -395
  259. package/unbundled/definition28.js +387 -395
  260. package/unbundled/definition29.cjs +189 -110
  261. package/unbundled/definition29.js +180 -107
  262. package/unbundled/definition30.cjs +520 -36
  263. package/unbundled/definition30.js +519 -35
  264. package/unbundled/definition32.cjs +477 -477
  265. package/unbundled/definition32.js +475 -475
  266. package/unbundled/definition33.cjs +87 -2
  267. package/unbundled/definition33.js +77 -4
  268. package/unbundled/definition35.cjs +2 -2
  269. package/unbundled/definition35.js +2 -2
  270. package/unbundled/definition36.cjs +1 -1
  271. package/unbundled/definition36.js +1 -1
  272. package/unbundled/definition37.cjs +6 -2
  273. package/unbundled/definition37.js +6 -2
  274. package/unbundled/definition38.cjs +7 -5
  275. package/unbundled/definition38.js +7 -5
  276. package/unbundled/definition39.cjs +1 -0
  277. package/unbundled/definition39.js +1 -0
  278. package/unbundled/definition42.cjs +22 -11
  279. package/unbundled/definition42.js +22 -11
  280. package/unbundled/definition49.cjs +3 -3
  281. package/unbundled/definition49.js +3 -3
  282. package/unbundled/definition56.cjs +437 -9506
  283. package/unbundled/definition56.js +340 -9415
  284. package/unbundled/definition57.cjs +5 -5
  285. package/unbundled/definition57.js +5 -5
  286. package/unbundled/definition58.cjs +4 -3
  287. package/unbundled/definition58.js +2 -1
  288. package/unbundled/definition59.cjs +4 -3
  289. package/unbundled/definition59.js +4 -3
  290. package/unbundled/definition62.cjs +2 -2
  291. package/unbundled/definition62.js +2 -2
  292. package/unbundled/definition64.cjs +1 -1
  293. package/unbundled/definition64.js +1 -1
  294. package/unbundled/definition71.cjs +2 -2
  295. package/unbundled/definition71.js +2 -2
  296. package/unbundled/definition72.cjs +1 -2
  297. package/unbundled/definition72.js +1 -2
  298. package/unbundled/definition75.cjs +3 -51711
  299. package/unbundled/definition75.js +1 -51711
  300. package/unbundled/listbox.cjs +1 -1
  301. package/unbundled/listbox.js +1 -1
  302. package/unbundled/localized.cjs +2 -2
  303. package/unbundled/localized.js +1 -1
  304. package/unbundled/picker-field.template.cjs +1 -1
  305. package/unbundled/picker-field.template.js +1 -1
  306. package/unbundled/slottable-request.cjs +2 -3168
  307. package/unbundled/slottable-request.js +3 -3097
  308. package/unbundled/time-selection-picker.template.cjs +1 -1
  309. package/unbundled/time-selection-picker.template.js +1 -1
  310. package/unbundled/vivid-element.cjs +1 -1
  311. package/unbundled/vivid-element.js +1 -1
  312. package/video-player/index.cjs +3 -3
  313. package/video-player/index.js +9 -9
  314. package/vivid.api.json +220 -282
  315. package/unbundled/chunk.js +0 -33
  316. package/unbundled/en-US.cjs +0 -447
  317. package/unbundled/en-US.js +0 -443
package/unbundled/definition57.cjs CHANGED
@@ -14,10 +14,13 @@ const require_dialog = require("./dialog.cjs");
14
14
  const require_definition$2 = require("./definition10.cjs");
15
15
  const require_host_semantics = require("./host-semantics.cjs");
16
16
  const require_mixins = require("./mixins.cjs");
17
- const require_definition$3 = require("./definition27.cjs");
17
+ const require_definition$3 = require("./definition29.cjs");
18
18
  const require_listbox = require("./listbox.cjs");
19
19
  let _microsoft_fast_element = require("@microsoft/fast-element");
20
20
  let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
21
+ //#region src/lib/select/select.scss?inline
22
+ var select_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);--focus-stroke-gap-color:transparent;flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.control{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.control{--_connotation-color-primary:var(--vvd-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-select-accent-fierce,var(--vvd-color-neutral-700));border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline);--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:8px;transition:box-shadow .2s,background-color .2s;display:flex}.control.size-condensed{--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.control.size-condensed:not(.shape-pill){--_select-control-border-radius:4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius:8px}.control.shape-pill{--_select-control-border-radius:24px}.listbox{max-height:var(--select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:8px}.selected-value{white-space:nowrap;flex-grow:1;align-items:center;column-gap:12px;display:flex;overflow:hidden}.selected-value .text{text-overflow:ellipsis;max-inline-size:100%;overflow:hidden}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width,100%)}:host([multiple]) ::part(popup-base){position:static}@supports selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant,:has(.clear-button:focus)){--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant){--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}:host(:not([multiple]):focus-visible) ::slotted([data-vvd-component=option][current-selected]){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;border-radius:8px}:host([multiple]) .clear-button{margin-inline-start:auto}:host([multiple][clearable]) .label-wrapper{min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}";
23
+ //#endregion
21
24
  //#region src/lib/select/select.ts
22
25
  /**
23
26
  * @public
@@ -28,7 +31,7 @@ let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
28
31
  * @slot helper-text - Describes how to use the select. Alternative to the `helper-text` attribute.
29
32
  * @event {CustomEvent<undefined>} input - Fires a custom 'input' event when the value updates
30
33
  * @event {CustomEvent<HTMLElement>} change - Fires a custom 'change' event when the value updates
31
- * @vueModel modelValue value input `event.currentTarget.value`
34
+ * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
32
35
  * @testAction selectOptionByValue selectOptionByValue
33
36
  * @testAction selectOptionByText selectOptionByText
34
37
  */
@@ -645,9 +648,6 @@ require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototy
645
648
  require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], Select.prototype, "clearable", void 0);
646
649
  require_decorate.__decorate([_microsoft_fast_element.observable], Select.prototype, "_isClearButtonFocused", void 0);
647
650
  //#endregion
648
- //#region src/lib/select/select.scss?inline
649
- var select_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);--focus-stroke-gap-color:transparent;flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.control{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.control{--_connotation-color-primary:var(--vvd-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-select-accent-fierce,var(--vvd-color-neutral-700));border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline);--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:8px;transition:box-shadow .2s,background-color .2s;display:flex}.control.size-condensed{--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.control.size-condensed:not(.shape-pill){--_select-control-border-radius:4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius:8px}.control.shape-pill{--_select-control-border-radius:24px}.listbox{max-height:var(--select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:8px}.selected-value{white-space:nowrap;flex-grow:1;align-items:center;column-gap:12px;display:flex;overflow:hidden}.selected-value .text{text-overflow:ellipsis;max-inline-size:100%;overflow:hidden}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width,100%)}:host([multiple]) ::part(popup-base){position:static}@supports selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant,:has(.clear-button:focus)){--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant){--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}:host(:not([multiple])) ::slotted([data-vvd-component=option][current-selected]){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;border-radius:8px}:host([multiple]) .clear-button{margin-inline-start:auto}:host([multiple][clearable]) .label-wrapper{min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}";
650
- //#endregion
651
651
  //#region src/lib/select/select.template.ts
652
652
  var getStateClasses = ({ shape, disabled, appearance, metaSlottedContent, errorValidationMessage, successText, placeholder, value, scale, _activeDescendant, open }) => (0, _microsoft_fast_web_utilities.classNames)(["has-activedescendant", Boolean(_activeDescendant) && open], ["disabled", disabled], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ["has-meta", Boolean(metaSlottedContent?.length)], ["error", Boolean(errorValidationMessage)], ["success", !!successText], ["shows-placeholder", Boolean(placeholder) && !value], [`size-${scale}`, Boolean(scale)]);
653
653
  function renderLabel() {
package/unbundled/definition57.js CHANGED
@@ -13,10 +13,13 @@ import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
13
13
  import { i as Popup, t as popupDefinition } from "./definition10.js";
14
14
  import { n as applyHostSemantics, t as HostSemantics } from "./host-semantics.js";
15
15
  import { a as feedbackMessageDefinition, n as WithLightDOMFeedback } from "./mixins.js";
16
- import { r as ListboxOption, t as listboxOptionDefinition } from "./definition27.js";
16
+ import { r as ListboxOption, t as listboxOptionDefinition } from "./definition29.js";
17
17
  import { t as Listbox } from "./listbox.js";
18
18
  import { Observable, Updates, attr, html, observable, ref, slotted, volatile, when } from "@microsoft/fast-element";
19
19
  import { classNames, inRange, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyHome, keySpace, keyTab, uniqueId } from "@microsoft/fast-web-utilities";
20
+ //#region src/lib/select/select.scss?inline
21
+ var select_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);--focus-stroke-gap-color:transparent;flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.control{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.control{--_connotation-color-primary:var(--vvd-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-select-accent-fierce,var(--vvd-color-neutral-700));border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline);--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:8px;transition:box-shadow .2s,background-color .2s;display:flex}.control.size-condensed{--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.control.size-condensed:not(.shape-pill){--_select-control-border-radius:4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius:8px}.control.shape-pill{--_select-control-border-radius:24px}.listbox{max-height:var(--select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:8px}.selected-value{white-space:nowrap;flex-grow:1;align-items:center;column-gap:12px;display:flex;overflow:hidden}.selected-value .text{text-overflow:ellipsis;max-inline-size:100%;overflow:hidden}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width,100%)}:host([multiple]) ::part(popup-base){position:static}@supports selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant,:has(.clear-button:focus)){--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant){--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}:host(:not([multiple]):focus-visible) ::slotted([data-vvd-component=option][current-selected]){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;border-radius:8px}:host([multiple]) .clear-button{margin-inline-start:auto}:host([multiple][clearable]) .label-wrapper{min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}";
22
+ //#endregion
20
23
  //#region src/lib/select/select.ts
21
24
  /**
22
25
  * @public
@@ -27,7 +30,7 @@ import { classNames, inRange, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEsc
27
30
  * @slot helper-text - Describes how to use the select. Alternative to the `helper-text` attribute.
28
31
  * @event {CustomEvent<undefined>} input - Fires a custom 'input' event when the value updates
29
32
  * @event {CustomEvent<HTMLElement>} change - Fires a custom 'change' event when the value updates
30
- * @vueModel modelValue value input `event.currentTarget.value`
33
+ * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
31
34
  * @testAction selectOptionByValue selectOptionByValue
32
35
  * @testAction selectOptionByText selectOptionByText
33
36
  */
@@ -644,9 +647,6 @@ __decorate([observable], Select.prototype, "metaSlottedContent", void 0);
644
647
  __decorate([attr({ mode: "boolean" })], Select.prototype, "clearable", void 0);
645
648
  __decorate([observable], Select.prototype, "_isClearButtonFocused", void 0);
646
649
  //#endregion
647
- //#region src/lib/select/select.scss?inline
648
- var select_default = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);--focus-stroke-gap-color:transparent;flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.control{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.control{--_connotation-color-primary:var(--vvd-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-select-accent-fierce,var(--vvd-color-neutral-700));border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline);--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);justify-content:space-between;align-items:center;gap:8px;transition:box-shadow .2s,background-color .2s;display:flex}.control.size-condensed{--_select-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_select-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_select-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.control.size-condensed:not(.shape-pill){--_select-control-border-radius:4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius:8px}.control.shape-pill{--_select-control-border-radius:24px}.listbox{max-height:var(--select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));border-radius:8px}.selected-value{white-space:nowrap;flex-grow:1;align-items:center;column-gap:12px;display:flex;overflow:hidden}.selected-value .text{text-overflow:ellipsis;max-inline-size:100%;overflow:hidden}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width,100%)}:host([multiple]) ::part(popup-base){position:static}@supports selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant,:has(.clear-button:focus)){--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}@supports not selector(:has(*)){:host(:focus-within) .control:not(.has-activedescendant){--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}}:host(:not([multiple])) ::slotted([data-vvd-component=option][current-selected]){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent;border-radius:8px}:host([multiple]) .clear-button{margin-inline-start:auto}:host([multiple][clearable]) .label-wrapper{min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}";
649
- //#endregion
650
650
  //#region src/lib/select/select.template.ts
651
651
  var getStateClasses = ({ shape, disabled, appearance, metaSlottedContent, errorValidationMessage, successText, placeholder, value, scale, _activeDescendant, open }) => classNames(["has-activedescendant", Boolean(_activeDescendant) && open], ["disabled", disabled], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ["has-meta", Boolean(metaSlottedContent?.length)], ["error", Boolean(errorValidationMessage)], ["success", !!successText], ["shows-placeholder", Boolean(placeholder) && !value], [`size-${scale}`, Boolean(scale)]);
652
652
  function renderLabel() {
package/unbundled/definition58.cjs CHANGED
@@ -3,6 +3,7 @@ const require_vivid_element = require("./vivid-element.cjs");
3
3
  const require_decorate = require("./decorate.cjs");
4
4
  const require_slottable_request = require("./slottable-request.cjs");
5
5
  let _microsoft_fast_element = require("@microsoft/fast-element");
6
+ let prosemirror_model = require("prosemirror-model");
6
7
  //#region src/lib/rich-text-view/rich-text-view.scss?inline
7
8
  var rich_text_view_default = ":host{display:contents}.content{overflow-wrap:break-word;white-space:break-spaces;display:contents}";
8
9
  //#endregion
@@ -86,9 +87,9 @@ var RichTextView = class extends require_vivid_element.VividElement {
86
87
  const schema = view[require_slottable_request.impl].config[require_slottable_request.impl].schema;
87
88
  if (view.type === "node" && view.node.type === "text") return document.createTextNode(view.node.text);
88
89
  const item = view.type === "node" ? view.node : view.mark;
89
- const pmItem = view.type === "node" ? require_slottable_request.Node.fromJSON(schema, item) : require_slottable_request.Mark.fromJSON(schema, item);
90
- const spec = pmItem instanceof require_slottable_request.Node ? pmItem.type.spec.toDOM(pmItem) : pmItem.type.spec.toDOM(pmItem, true);
91
- const { dom, contentDOM = dom } = require_slottable_request.DOMSerializer.renderSpec(document, spec);
90
+ const pmItem = view.type === "node" ? prosemirror_model.Node.fromJSON(schema, item) : prosemirror_model.Mark.fromJSON(schema, item);
91
+ const spec = pmItem instanceof prosemirror_model.Node ? pmItem.type.spec.toDOM(pmItem) : pmItem.type.spec.toDOM(pmItem, true);
92
+ const { dom, contentDOM = dom } = prosemirror_model.DOMSerializer.renderSpec(document, spec);
92
93
  const childrenRendered = this._renderView(view.children);
93
94
  contentDOM.appendChild(childrenRendered);
94
95
  return dom;
package/unbundled/definition58.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
2
2
  import { t as __decorate } from "./decorate.js";
3
- import { c as sortedContributions, f as DOMSerializer, g as Node, m as Mark, n as removeSymbol, r as impl, t as dispatchSlottableRequest } from "./slottable-request.js";
3
+ import { c as impl, n as removeSymbol, s as sortedContributions, t as dispatchSlottableRequest } from "./slottable-request.js";
4
4
  import { ElementStyles, html, observable, ref } from "@microsoft/fast-element";
5
+ import { DOMSerializer, Mark, Node } from "prosemirror-model";
5
6
  //#region src/lib/rich-text-view/rich-text-view.scss?inline
6
7
  var rich_text_view_default = ":host{display:contents}.content{overflow-wrap:break-word;white-space:break-spaces;display:contents}";
7
8
  //#endregion
package/unbundled/definition59.cjs CHANGED
@@ -15,7 +15,7 @@ const require_definition$2 = require("./definition7.cjs");
15
15
  const require_definition$3 = require("./definition10.cjs");
16
16
  const require_divider = require("./divider.cjs");
17
17
  const require_mixins = require("./mixins.cjs");
18
- const require_definition$4 = require("./definition27.cjs");
18
+ const require_definition$4 = require("./definition29.cjs");
19
19
  const require_definition$5 = require("./definition34.cjs");
20
20
  const require_scrollIntoView = require("./scrollIntoView.cjs");
21
21
  let _microsoft_fast_element = require("@microsoft/fast-element");
@@ -44,8 +44,8 @@ var isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
44
44
  * @event {CustomEvent<undefined>} input - Fired when the selected options change
45
45
  * @event {CustomEvent<undefined>} search-text-change - Fired when the search text changes
46
46
  * @event {CustomEvent<undefined>} change - Fired when the selected options change
47
- * @vueModel modelValue value input `event.currentTarget.value`
48
- * @vueModel values values input `event.currentTarget.values`
47
+ * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
48
+ * @vueModel values values input,@lazy:change `event.currentTarget.values`
49
49
  * @testAction selectOptionByValue selectOptionByValue
50
50
  * @testAction selectOptionByText selectOptionByText
51
51
  * @testQuery values values
@@ -785,6 +785,7 @@ var OptionTag = class extends require_localized.Localized(require_vivid_element.
785
785
  this.disabled = false;
786
786
  this.hasIconPlaceholder = false;
787
787
  }
788
+ /** @internal */
788
789
  _onClickRemove() {
789
790
  this.$emit("remove", void 0, { bubbles: false });
790
791
  }
package/unbundled/definition59.js CHANGED
@@ -14,7 +14,7 @@ import { i as Button, r as chevronTemplateFactory, t as buttonDefinition } from
14
14
  import { i as Popup, t as popupDefinition } from "./definition10.js";
15
15
  import { t as Divider } from "./divider.js";
16
16
  import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
17
- import { i as isListboxOption, r as ListboxOption, t as listboxOptionDefinition } from "./definition27.js";
17
+ import { i as isListboxOption, r as ListboxOption, t as listboxOptionDefinition } from "./definition29.js";
18
18
  import { t as dividerDefinition } from "./definition34.js";
19
19
  import { t as scrollIntoView } from "./scrollIntoView.js";
20
20
  import { Observable, Updates, attr, html, nullableNumberConverter, observable, ref, repeat, slotted, when } from "@microsoft/fast-element";
@@ -43,8 +43,8 @@ var isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
43
43
  * @event {CustomEvent<undefined>} input - Fired when the selected options change
44
44
  * @event {CustomEvent<undefined>} search-text-change - Fired when the search text changes
45
45
  * @event {CustomEvent<undefined>} change - Fired when the selected options change
46
- * @vueModel modelValue value input `event.currentTarget.value`
47
- * @vueModel values values input `event.currentTarget.values`
46
+ * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
47
+ * @vueModel values values input,@lazy:change `event.currentTarget.values`
48
48
  * @testAction selectOptionByValue selectOptionByValue
49
49
  * @testAction selectOptionByText selectOptionByText
50
50
  * @testQuery values values
@@ -784,6 +784,7 @@ var OptionTag = class extends Localized(VividElement) {
784
784
  this.disabled = false;
785
785
  this.hasIconPlaceholder = false;
786
786
  }
787
+ /** @internal */
787
788
  _onClickRemove() {
788
789
  this.$emit("remove", void 0, { bubbles: false });
789
790
  }
package/unbundled/definition62.cjs CHANGED
@@ -5,8 +5,8 @@ const require_decorate = require("./decorate.cjs");
5
5
  const require_dialog = require("./dialog.cjs");
6
6
  const require_definition$1 = require("./definition10.cjs");
7
7
  const require_anchored = require("./anchored.cjs");
8
+ const require_definition$2 = require("./definition27.cjs");
8
9
  const require_base_color_picker = require("./base-color-picker.cjs");
9
- const require_definition$2 = require("./definition26.cjs");
10
10
  let _microsoft_fast_element = require("@microsoft/fast-element");
11
11
  let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
12
12
  //#region src/lib/simple-color-picker/simple-color-picker.scss?inline
@@ -18,7 +18,7 @@ var simple_color_picker_default = ".palette{grid-template-columns:repeat(var(--s
18
18
  * @component simple-color-picker
19
19
  * @slot anchor - Slot for attaching the toggle button
20
20
  * @event {CustomEvent<undefined>} change - Fires when the value changes
21
- * @vueModel modelValue value input `event.currentTarget.value`
21
+ * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
22
22
  */
23
23
  var SimpleColorPicker = class extends require_anchored.Anchored(require_base_color_picker.BaseColorPicker(require_vivid_element.VividElement)) {
24
24
  constructor(..._args) {
package/unbundled/definition62.js CHANGED
@@ -4,8 +4,8 @@ import { t as __decorate } from "./decorate.js";
4
4
  import { t as handleEscapeKeyAndStopPropogation } from "./dialog.js";
5
5
  import { i as Popup, t as popupDefinition } from "./definition10.js";
6
6
  import { n as anchorSlotTemplateFactory, t as Anchored } from "./anchored.js";
7
+ import { n as tooltipDefinition, r as Tooltip } from "./definition27.js";
7
8
  import { t as BaseColorPicker } from "./base-color-picker.js";
8
- import { n as tooltipDefinition, r as Tooltip } from "./definition26.js";
9
9
  import { Updates, attr, html, nullableNumberConverter, repeat } from "@microsoft/fast-element";
10
10
  import { classNames } from "@microsoft/fast-web-utilities";
11
11
  //#region src/lib/simple-color-picker/simple-color-picker.scss?inline
@@ -17,7 +17,7 @@ var simple_color_picker_default = ".palette{grid-template-columns:repeat(var(--s
17
17
  * @component simple-color-picker
18
18
  * @slot anchor - Slot for attaching the toggle button
19
19
  * @event {CustomEvent<undefined>} change - Fires when the value changes
20
- * @vueModel modelValue value input `event.currentTarget.value`
20
+ * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
21
21
  */
22
22
  var SimpleColorPicker = class extends Anchored(BaseColorPicker(VividElement)) {
23
23
  constructor(..._args) {
package/unbundled/definition64.cjs CHANGED
@@ -7,7 +7,7 @@ const require_enums = require("./enums.cjs");
7
7
  let _microsoft_fast_element = require("@microsoft/fast-element");
8
8
  let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
9
9
  //#region src/lib/status/status.scss?inline
10
- var status_default = ".base.connotation-information{--_connotation-color-intermediate:var(--vvd-status-information-intermediate,var(--vvd-color-information-500));--_connotation-color-faint:var(--vvd-status-information-faint,var(--vvd-color-information-50));--_connotation-color-fierce:var(--vvd-status-information-fierce,var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate:var(--vvd-status-warning-intermediate,var(--vvd-color-warning-300));--_connotation-color-faint:var(--vvd-status-warning-faint,var(--vvd-color-warning-50));--_connotation-color-fierce:var(--vvd-status-warning-fierce,var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate:var(--vvd-status-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-faint:var(--vvd-status-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce:var(--vvd-status-alert-fierce,var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate:var(--vvd-status-success-intermediate,var(--vvd-color-success-500));--_connotation-color-faint:var(--vvd-status-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce:var(--vvd-status-success-fierce,var(--vvd-color-success-700))}.base{--_appearance-color-text:var(--_connotation-color-fierce);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-intermediate);align-items:center;column-gap:8px;display:inline-flex}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .8)}.text{text-align:start;flex-direction:column;flex-grow:1;justify-content:center;align-items:flex-start;gap:4px;min-width:0;display:flex}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.description[data-has-description=false]{display:none}";
10
+ var status_default = ".base.connotation-information{--_connotation-color-intermediate:var(--vvd-status-information-intermediate,var(--vvd-color-information-500));--_connotation-color-faint:var(--vvd-status-information-faint,var(--vvd-color-information-50));--_connotation-color-fierce:var(--vvd-status-information-fierce,var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate:var(--vvd-status-warning-intermediate,var(--vvd-color-warning-300));--_connotation-color-faint:var(--vvd-status-warning-faint,var(--vvd-color-warning-50));--_connotation-color-fierce:var(--vvd-status-warning-fierce,var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate:var(--vvd-status-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-faint:var(--vvd-status-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce:var(--vvd-status-alert-fierce,var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate:var(--vvd-status-success-intermediate,var(--vvd-color-success-500));--_connotation-color-faint:var(--vvd-status-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce:var(--vvd-status-success-fierce,var(--vvd-color-success-700))}.base{--_appearance-color-text:var(--_connotation-color-fierce);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-intermediate);align-items:center;column-gap:8px;display:inline-flex}slot[name=icon],.icon{color:var(--_appearance-color-text);font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .8)}.text{text-align:start;flex-direction:column;flex-grow:1;justify-content:center;align-items:flex-start;gap:4px;min-width:0;display:flex}.headline{color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.description[data-has-description=false]{display:none}";
11
11
  //#endregion
12
12
  //#region src/lib/status/status.ts
13
13
  /**
package/unbundled/definition64.js CHANGED
@@ -6,7 +6,7 @@ import { r as Connotation } from "./enums.js";
6
6
  import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
7
7
  import { classNames } from "@microsoft/fast-web-utilities";
8
8
  //#region src/lib/status/status.scss?inline
9
- var status_default = ".base.connotation-information{--_connotation-color-intermediate:var(--vvd-status-information-intermediate,var(--vvd-color-information-500));--_connotation-color-faint:var(--vvd-status-information-faint,var(--vvd-color-information-50));--_connotation-color-fierce:var(--vvd-status-information-fierce,var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate:var(--vvd-status-warning-intermediate,var(--vvd-color-warning-300));--_connotation-color-faint:var(--vvd-status-warning-faint,var(--vvd-color-warning-50));--_connotation-color-fierce:var(--vvd-status-warning-fierce,var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate:var(--vvd-status-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-faint:var(--vvd-status-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce:var(--vvd-status-alert-fierce,var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate:var(--vvd-status-success-intermediate,var(--vvd-color-success-500));--_connotation-color-faint:var(--vvd-status-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce:var(--vvd-status-success-fierce,var(--vvd-color-success-700))}.base{--_appearance-color-text:var(--_connotation-color-fierce);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-intermediate);align-items:center;column-gap:8px;display:inline-flex}slot[name=icon],.icon{color:var(--_appearance-color-outline);font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .8)}.text{text-align:start;flex-direction:column;flex-grow:1;justify-content:center;align-items:flex-start;gap:4px;min-width:0;display:flex}.headline{color:var(--_appearance-color-outline);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.description[data-has-description=false]{display:none}";
9
+ var status_default = ".base.connotation-information{--_connotation-color-intermediate:var(--vvd-status-information-intermediate,var(--vvd-color-information-500));--_connotation-color-faint:var(--vvd-status-information-faint,var(--vvd-color-information-50));--_connotation-color-fierce:var(--vvd-status-information-fierce,var(--vvd-color-information-700))}.base.connotation-warning{--_connotation-color-intermediate:var(--vvd-status-warning-intermediate,var(--vvd-color-warning-300));--_connotation-color-faint:var(--vvd-status-warning-faint,var(--vvd-color-warning-50));--_connotation-color-fierce:var(--vvd-status-warning-fierce,var(--vvd-color-warning-700))}.base.connotation-alert{--_connotation-color-intermediate:var(--vvd-status-alert-intermediate,var(--vvd-color-alert-500));--_connotation-color-faint:var(--vvd-status-alert-faint,var(--vvd-color-alert-50));--_connotation-color-fierce:var(--vvd-status-alert-fierce,var(--vvd-color-alert-700))}.base:not(.connotation-information,.connotation-warning,.connotation-alert){--_connotation-color-intermediate:var(--vvd-status-success-intermediate,var(--vvd-color-success-500));--_connotation-color-faint:var(--vvd-status-success-faint,var(--vvd-color-success-50));--_connotation-color-fierce:var(--vvd-status-success-fierce,var(--vvd-color-success-700))}.base{--_appearance-color-text:var(--_connotation-color-fierce);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-intermediate);align-items:center;column-gap:8px;display:inline-flex}slot[name=icon],.icon{color:var(--_appearance-color-text);font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .8)}.text{text-align:start;flex-direction:column;flex-grow:1;justify-content:center;align-items:flex-start;gap:4px;min-width:0;display:flex}.headline{color:var(--_appearance-color-text);font:var(--vvd-typography-base-condensed-bold)}.description{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.description[data-has-description=false]{display:none}";
10
10
  //#endregion
11
11
  //#region src/lib/status/status.ts
12
12
  /**
package/unbundled/definition71.cjs CHANGED
@@ -10,7 +10,7 @@ const require_with_error_text = require("./with-error-text.cjs");
10
10
  const require_with_contextual_help = require("./with-contextual-help.cjs");
11
11
  const require_char_count = require("./char-count.cjs");
12
12
  const require_mixins = require("./mixins.cjs");
13
- const require_definition$1 = require("./definition30.cjs");
13
+ const require_definition$1 = require("./definition25.cjs");
14
14
  let _microsoft_fast_element = require("@microsoft/fast-element");
15
15
  let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
16
16
  //#region src/lib/text-area/text-area.scss?inline
@@ -91,7 +91,7 @@ var TextAreaResize = {
91
91
  * @component text-area
92
92
  * @slot helper-text - Describes how to use the text-area. Alternative to the `helper-text` attribute.
93
93
  * @event {CustomEvent<undefined>} change - Emits a custom 'change' event when the textarea emits a change event
94
- * @vueModel modelValue value input `event.currentTarget.value`
94
+ * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
95
95
  * @testAction fill fill #control
96
96
  * @testAction clear clear #control
97
97
  * @testRef control shadow .control
package/unbundled/definition71.js CHANGED
@@ -9,7 +9,7 @@ import { t as WithErrorText } from "./with-error-text.js";
9
9
  import { t as WithContextualHelp } from "./with-contextual-help.js";
10
10
  import { t as WithCharCount } from "./char-count.js";
11
11
  import { a as feedbackMessageDefinition, t as WithFeedback } from "./mixins.js";
12
- import { t as contextualHelpDefinition } from "./definition30.js";
12
+ import { t as contextualHelpDefinition } from "./definition25.js";
13
13
  import { DOM, Observable, attr, html, nullableNumberConverter, observable, ref, slotted, when } from "@microsoft/fast-element";
14
14
  import { classNames } from "@microsoft/fast-web-utilities";
15
15
  //#region src/lib/text-area/text-area.scss?inline
@@ -90,7 +90,7 @@ var TextAreaResize = {
90
90
  * @component text-area
91
91
  * @slot helper-text - Describes how to use the text-area. Alternative to the `helper-text` attribute.
92
92
  * @event {CustomEvent<undefined>} change - Emits a custom 'change' event when the textarea emits a change event
93
- * @vueModel modelValue value input `event.currentTarget.value`
93
+ * @vueModel modelValue value input,@lazy:change `event.currentTarget.value`
94
94
  * @testAction fill fill #control
95
95
  * @testAction clear clear #control
96
96
  * @testRef control shadow .control
package/unbundled/definition72.cjs CHANGED
@@ -2,10 +2,9 @@ const require_vivid_element = require("./vivid-element.cjs");
2
2
  const require_definition = require("./definition.cjs");
3
3
  const require_definition$1 = require("./definition7.cjs");
4
4
  const require_definition$2 = require("./definition10.cjs");
5
- const require_definition$3 = require("./definition25.cjs");
5
+ const require_definition$3 = require("./definition26.cjs");
6
6
  const require_picker_field_template = require("./picker-field.template.cjs");
7
7
  const require_time_selection_picker_template = require("./time-selection-picker.template.cjs");
8
- require("@microsoft/fast-element");
9
8
  //#region src/lib/time-picker/time-picker.template.ts
10
9
  var TimePickerTemplate = (context) => {
11
10
  return require_picker_field_template.PickerFieldTemplate(context, require_time_selection_picker_template.TimeSelectionPickerTemplate(context, 6), {
package/unbundled/definition72.js CHANGED
@@ -2,10 +2,9 @@ import { o as defineVividComponent, s as createRegisterFunction } from "./vivid-
2
2
  import { n as visuallyHiddenDefinition } from "./definition.js";
3
3
  import { t as buttonDefinition } from "./definition7.js";
4
4
  import { t as popupDefinition } from "./definition10.js";
5
- import { n as textFieldDefinition } from "./definition25.js";
5
+ import { n as textFieldDefinition } from "./definition26.js";
6
6
  import { r as picker_field_default, t as PickerFieldTemplate } from "./picker-field.template.js";
7
7
  import { n as TimePicker, s as inlineTimePickerDefinition, t as TimeSelectionPickerTemplate } from "./time-selection-picker.template.js";
8
- import "@microsoft/fast-element";
9
8
  //#region src/lib/time-picker/time-picker.template.ts
10
9
  var TimePickerTemplate = (context) => {
11
10
  return PickerFieldTemplate(context, TimeSelectionPickerTemplate(context, 6), {