@vonage/vivid 5.1.0 → 5.3.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 (386) hide show
  1. package/accordion-item/definition.cjs +2 -1
  2. package/accordion-item/definition.js +2 -1
  3. package/alert/index.cjs +1 -1
  4. package/alert/index.js +1 -1
  5. package/audio-player/definition.cjs +41 -6
  6. package/audio-player/definition.js +41 -6
  7. package/audio-player/index.cjs +27 -25
  8. package/audio-player/index.js +88 -62
  9. package/badge/index.cjs +2 -2
  10. package/badge/index.js +4 -4
  11. package/banner/index.cjs +3 -3
  12. package/banner/index.js +6 -6
  13. package/breadcrumb-item/index.cjs +1 -1
  14. package/breadcrumb-item/index.js +1 -1
  15. package/bundled/affix.cjs +7 -7
  16. package/bundled/affix.js +5 -5
  17. package/bundled/anchored.cjs +1 -1
  18. package/bundled/anchored.js +6 -6
  19. package/bundled/attribute-binding-behaviour.cjs +1 -1
  20. package/bundled/attribute-binding-behaviour.js +15 -13
  21. package/bundled/base-color-picker.cjs +13 -0
  22. package/bundled/base-color-picker.js +194 -0
  23. package/bundled/button.cjs +1 -1
  24. package/bundled/button.js +2 -2
  25. package/bundled/calendar-picker.template.cjs +1 -1
  26. package/bundled/calendar-picker.template.js +21 -21
  27. package/bundled/char-count.cjs +1 -1
  28. package/bundled/char-count.js +1 -1
  29. package/bundled/children.cjs +1 -1
  30. package/bundled/children.js +28 -20
  31. package/bundled/definition.cjs +3 -3
  32. package/bundled/definition.js +38 -38
  33. package/bundled/definition10.cjs +72 -18
  34. package/bundled/definition10.js +351 -65
  35. package/bundled/definition11.cjs +19 -10
  36. package/bundled/definition11.js +66 -37
  37. package/bundled/definition12.cjs +10 -1
  38. package/bundled/definition12.js +38 -14
  39. package/bundled/definition13.cjs +1 -73
  40. package/bundled/definition13.js +15 -354
  41. package/bundled/definition15.cjs +1 -1
  42. package/bundled/definition15.js +1 -1
  43. package/bundled/definition16.cjs +2 -2
  44. package/bundled/definition16.js +8 -8
  45. package/bundled/definition17.cjs +7 -7
  46. package/bundled/definition17.js +17 -17
  47. package/bundled/definition19.cjs +17 -14
  48. package/bundled/definition19.js +85 -77
  49. package/bundled/definition2.cjs +9 -5
  50. package/bundled/definition2.js +21 -17
  51. package/bundled/definition22.cjs +9 -9
  52. package/bundled/definition22.js +31 -31
  53. package/bundled/definition3.cjs +1 -1
  54. package/bundled/definition3.js +1 -1
  55. package/bundled/definition6.cjs +6 -6
  56. package/bundled/definition6.js +34 -31
  57. package/bundled/definition7.cjs +1 -1
  58. package/bundled/definition7.js +6 -6
  59. package/bundled/definition8.cjs +2 -2
  60. package/bundled/definition8.js +4 -4
  61. package/bundled/definition9.cjs +1 -1
  62. package/bundled/definition9.js +1 -1
  63. package/bundled/delegates-aria.cjs +1 -1
  64. package/bundled/delegates-aria.js +59 -46
  65. package/bundled/form-associated.cjs +1 -1
  66. package/bundled/form-associated.js +3 -3
  67. package/bundled/host-semantics.cjs +1 -1
  68. package/bundled/host-semantics.js +48 -34
  69. package/bundled/localized.cjs +1 -1
  70. package/bundled/localized.js +43 -31
  71. package/bundled/mixins.cjs +18 -18
  72. package/bundled/mixins.js +99 -93
  73. package/bundled/normalize.cjs +1 -0
  74. package/bundled/normalize.js +7 -0
  75. package/bundled/picker-field.template.cjs +18 -13
  76. package/bundled/picker-field.template.js +45 -37
  77. package/bundled/ref.cjs +1 -1
  78. package/bundled/ref.js +8 -25
  79. package/bundled/repeat.cjs +1 -1
  80. package/bundled/repeat.js +459 -233
  81. package/bundled/slider.template.cjs +1 -1
  82. package/bundled/slider.template.js +2 -2
  83. package/bundled/slotted.cjs +1 -1
  84. package/bundled/slotted.js +62 -45
  85. package/bundled/text-field.cjs +1 -1
  86. package/bundled/text-field.js +1 -1
  87. package/bundled/time-selection-picker.template.cjs +1 -1
  88. package/bundled/time-selection-picker.template.js +5 -5
  89. package/bundled/vivid-element.cjs +1 -1
  90. package/bundled/vivid-element.js +2126 -1172
  91. package/bundled/when.cjs +1 -1
  92. package/bundled/when.js +8 -7
  93. package/bundled/with-contextual-help.cjs +1 -1
  94. package/bundled/with-contextual-help.js +17 -7
  95. package/calendar/definition.cjs +1 -1
  96. package/calendar/definition.js +2 -2
  97. package/calendar/index.cjs +1 -1
  98. package/calendar/index.js +6 -6
  99. package/calendar-event/index.cjs +1 -1
  100. package/calendar-event/index.js +1 -1
  101. package/card/definition.cjs +10 -2
  102. package/card/definition.js +10 -2
  103. package/card/index.cjs +19 -11
  104. package/card/index.js +35 -27
  105. package/color-picker/definition.cjs +1079 -0
  106. package/color-picker/definition.js +1073 -0
  107. package/color-picker/index.cjs +127 -0
  108. package/color-picker/index.js +726 -0
  109. package/combobox/definition.cjs +13 -6
  110. package/combobox/definition.js +14 -7
  111. package/combobox/index.cjs +15 -11
  112. package/combobox/index.js +82 -75
  113. package/contextual-help/index.cjs +1 -1
  114. package/contextual-help/index.js +1 -1
  115. package/custom-elements.json +1621 -325
  116. package/data-grid/definition.cjs +862 -27
  117. package/data-grid/definition.js +863 -28
  118. package/data-grid/index.cjs +25 -25
  119. package/data-grid/index.js +175 -168
  120. package/date-picker/index.cjs +1 -1
  121. package/date-picker/index.js +2 -2
  122. package/date-range-picker/index.cjs +1 -1
  123. package/date-range-picker/index.js +2 -2
  124. package/date-time-picker/index.cjs +1 -1
  125. package/date-time-picker/index.js +2 -2
  126. package/dial-pad/definition.cjs +55 -1
  127. package/dial-pad/definition.js +56 -2
  128. package/dial-pad/index.cjs +21 -18
  129. package/dial-pad/index.js +138 -104
  130. package/dialog/definition.cjs +4 -1
  131. package/dialog/definition.js +4 -1
  132. package/dialog/index.cjs +21 -18
  133. package/dialog/index.js +43 -40
  134. package/empty-state/definition.cjs +7 -2
  135. package/empty-state/definition.js +7 -2
  136. package/empty-state/index.cjs +10 -5
  137. package/empty-state/index.js +18 -13
  138. package/fab/index.cjs +2 -2
  139. package/fab/index.js +4 -4
  140. package/file-picker/definition.cjs +16 -7
  141. package/file-picker/definition.js +17 -8
  142. package/file-picker/index.cjs +12 -9
  143. package/file-picker/index.js +103 -93
  144. package/icon/definition.cjs +10 -6
  145. package/icon/definition.js +10 -6
  146. package/index.cjs +4 -0
  147. package/index.js +1 -0
  148. package/lib/accordion-item/accordion-item.d.ts +2 -2
  149. package/lib/action-group/action-group.d.ts +2 -2
  150. package/lib/alert/alert.d.ts +4 -4
  151. package/lib/audio-player/audio-player.d.ts +6 -2
  152. package/lib/avatar/avatar.d.ts +2 -2
  153. package/lib/badge/badge.d.ts +2 -2
  154. package/lib/banner/banner.d.ts +6 -6
  155. package/lib/breadcrumb/breadcrumb.d.ts +2 -2
  156. package/lib/breadcrumb-item/breadcrumb-item.d.ts +2 -2
  157. package/lib/button/button.d.ts +6 -6
  158. package/lib/button/button.template.d.ts +2 -1
  159. package/lib/calendar/calendar.d.ts +1 -1
  160. package/lib/calendar-event/calendar-event.d.ts +2 -2
  161. package/lib/card/card.d.ts +2 -2
  162. package/lib/checkbox/checkbox.d.ts +12 -12
  163. package/lib/color-picker/color-picker.d.ts +2420 -0
  164. package/lib/color-picker/color-picker.template.d.ts +3 -0
  165. package/lib/color-picker/definition.d.ts +4 -0
  166. package/lib/color-picker/locale.d.ts +9 -0
  167. package/lib/combobox/combobox.d.ts +495 -78
  168. package/lib/components.d.ts +1 -0
  169. package/lib/data-grid/data-grid-cell.d.ts +4 -4
  170. package/lib/data-grid/data-grid-row.d.ts +3 -4
  171. package/lib/data-grid/data-grid.d.ts +1 -2
  172. package/lib/date-picker/date-picker.d.ts +906 -894
  173. package/lib/date-range-picker/date-range-picker.d.ts +596 -590
  174. package/lib/date-time-picker/date-time-picker.d.ts +907 -895
  175. package/lib/dial-pad/dial-pad.d.ts +3 -2
  176. package/lib/dial-pad/dial-pad.template.d.ts +1 -1
  177. package/lib/dial-pad/locale.d.ts +1 -0
  178. package/lib/dialog/dialog.d.ts +4 -4
  179. package/lib/divider/divider.d.ts +2 -2
  180. package/lib/fab/fab.d.ts +2 -2
  181. package/lib/file-picker/file-picker.d.ts +495 -78
  182. package/lib/header/header.d.ts +2 -2
  183. package/lib/menu/menu.d.ts +5 -4
  184. package/lib/menu-item/menu-item.d.ts +4 -4
  185. package/lib/nav/nav.d.ts +2 -2
  186. package/lib/nav-disclosure/nav-disclosure.d.ts +4 -4
  187. package/lib/nav-item/nav-item.d.ts +4 -4
  188. package/lib/note/note.d.ts +2 -2
  189. package/lib/number-field/number-field.d.ts +19 -18
  190. package/lib/option/option.d.ts +4 -4
  191. package/lib/pagination/pagination.d.ts +2 -2
  192. package/lib/progress/progress.d.ts +2 -2
  193. package/lib/progress-ring/progress-ring.d.ts +2 -2
  194. package/lib/radio/radio.d.ts +6 -6
  195. package/lib/radio-group/radio-group.d.ts +2 -2
  196. package/lib/range-slider/range-slider.d.ts +6 -6
  197. package/lib/rich-text-editor/menubar/menubar.d.ts +2 -2
  198. package/lib/rich-text-editor/rich-text-editor.d.ts +2 -2
  199. package/lib/searchable-select/option-tag.d.ts +2 -2
  200. package/lib/searchable-select/searchable-select.d.ts +521 -104
  201. package/lib/select/select.d.ts +484 -67
  202. package/lib/selectable-box/selectable-box.d.ts +2 -2
  203. package/lib/simple-color-picker/locale.d.ts +0 -1
  204. package/lib/simple-color-picker/simple-color-picker.d.ts +47 -821
  205. package/lib/slider/slider.d.ts +6 -6
  206. package/lib/split-button/split-button.d.ts +6 -6
  207. package/lib/switch/switch.d.ts +4 -4
  208. package/lib/tab/tab.d.ts +6 -6
  209. package/lib/tab-panel/tab-panel.d.ts +2 -2
  210. package/lib/tag/tag.d.ts +6 -6
  211. package/lib/tag-group/tag-group.d.ts +2 -2
  212. package/lib/tag-name-map.d.ts +2 -1
  213. package/lib/text-area/text-area.d.ts +17 -16
  214. package/lib/text-field/text-field.d.ts +19 -18
  215. package/lib/time-picker/time-picker.d.ts +579 -573
  216. package/lib/toggletip/toggletip.d.ts +4 -4
  217. package/lib/tooltip/tooltip.d.ts +2 -2
  218. package/lib/tree-item/tree-item.d.ts +4 -4
  219. package/lib/tree-view/tree-view.d.ts +2 -2
  220. package/lib/video-player/video-player.d.ts +2 -2
  221. package/locales/de-DE.cjs +15 -3
  222. package/locales/de-DE.js +15 -3
  223. package/locales/en-GB.cjs +15 -3
  224. package/locales/en-GB.js +15 -3
  225. package/locales/en-US.cjs +15 -3
  226. package/locales/en-US.js +15 -3
  227. package/locales/ja-JP.cjs +15 -3
  228. package/locales/ja-JP.js +15 -3
  229. package/locales/zh-CN.cjs +15 -3
  230. package/locales/zh-CN.js +15 -3
  231. package/menu/definition.cjs +8 -4
  232. package/menu/definition.js +9 -5
  233. package/note/index.cjs +2 -2
  234. package/note/index.js +4 -4
  235. package/number-field/definition.cjs +3 -3
  236. package/number-field/definition.js +4 -4
  237. package/number-field/index.cjs +8 -8
  238. package/number-field/index.js +41 -40
  239. package/option/index.cjs +1 -1
  240. package/option/index.js +1 -1
  241. package/package.json +5 -5
  242. package/pagination/definition.cjs +2 -1
  243. package/pagination/definition.js +2 -1
  244. package/pagination/index.cjs +12 -12
  245. package/pagination/index.js +59 -59
  246. package/progress/index.cjs +1 -1
  247. package/progress/index.js +1 -1
  248. package/radio/definition.cjs +9 -9
  249. package/radio/definition.js +10 -10
  250. package/radio-group/definition.cjs +2 -1
  251. package/radio-group/definition.js +2 -1
  252. package/radio-group/index.cjs +5 -5
  253. package/radio-group/index.js +80 -77
  254. package/range-slider/index.cjs +1 -1
  255. package/range-slider/index.js +1 -1
  256. package/rich-text-editor/definition.cjs +1 -1
  257. package/rich-text-editor/definition.js +2 -2
  258. package/rich-text-editor/index.cjs +2 -2
  259. package/rich-text-editor/index.js +3 -3
  260. package/searchable-select/definition.cjs +30 -21
  261. package/searchable-select/definition.js +31 -22
  262. package/searchable-select/index.cjs +28 -25
  263. package/searchable-select/index.js +149 -140
  264. package/select/definition.cjs +15 -7
  265. package/select/definition.js +16 -8
  266. package/selectable-box/definition.cjs +1 -1
  267. package/selectable-box/definition.js +1 -1
  268. package/selectable-box/index.cjs +3 -3
  269. package/selectable-box/index.js +20 -20
  270. package/shared/aria/aria-change-subscription.d.ts +0 -1
  271. package/shared/aria/aria-mixin.d.ts +2 -2
  272. package/shared/aria/delegate-aria-behavior.d.ts +5 -10
  273. package/shared/aria/delegates-aria.d.ts +3 -3
  274. package/shared/aria/host-semantics-behavior.d.ts +5 -8
  275. package/shared/aria/host-semantics.d.ts +3 -3
  276. package/shared/color-picker/base-color-picker.d.ts +436 -0
  277. package/shared/color-picker/index.d.ts +1 -0
  278. package/shared/color-picker/locale.d.ts +3 -0
  279. package/shared/color-picker/utils.d.ts +1 -0
  280. package/shared/deprecation/replaced-props.d.ts +317 -2
  281. package/shared/design-system/defineVividComponent.d.ts +2 -2
  282. package/shared/feedback/feedback-message.d.ts +2 -2
  283. package/shared/feedback/mixins.d.ts +4 -4
  284. package/shared/foundation/button/button.d.ts +4 -4
  285. package/shared/foundation/form-associated/form-associated.d.ts +4 -4
  286. package/shared/foundation/vivid-element/vivid-element.d.ts +335 -8
  287. package/shared/localization/Locale.d.ts +4 -0
  288. package/shared/patterns/affix.d.ts +4 -4
  289. package/shared/patterns/anchored.d.ts +4 -4
  290. package/shared/patterns/char-count/char-count.d.ts +2 -2
  291. package/shared/patterns/form-elements/form-element.d.ts +4 -4
  292. package/shared/patterns/form-elements/index.d.ts +1 -0
  293. package/shared/patterns/form-elements/with-contextual-help.d.ts +7 -6
  294. package/shared/patterns/form-elements/with-error-text.d.ts +6 -6
  295. package/shared/patterns/form-elements/with-success-text.d.ts +2 -2
  296. package/shared/patterns/linkable.d.ts +2 -2
  297. package/shared/patterns/localized.d.ts +2 -2
  298. package/shared/patterns/trapped-focus.d.ts +2 -2
  299. package/shared/picker-field/mixins/calendar-picker.d.ts +454 -451
  300. package/shared/picker-field/mixins/calendar-picker.template.d.ts +454 -451
  301. package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +2 -2
  302. package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +600 -594
  303. package/shared/picker-field/mixins/single-date-picker.d.ts +746 -737
  304. package/shared/picker-field/mixins/single-value-picker.d.ts +451 -448
  305. package/shared/picker-field/mixins/time-selection-picker.d.ts +580 -574
  306. package/shared/picker-field/mixins/time-selection-picker.template.d.ts +579 -573
  307. package/shared/picker-field/picker-field.d.ts +495 -78
  308. package/shared/templating/attribute-binding-behaviour.d.ts +3 -4
  309. package/shared/templating/render-in-light-dom.d.ts +13 -12
  310. package/side-drawer/index.cjs +1 -1
  311. package/side-drawer/index.js +1 -1
  312. package/simple-color-picker/definition.cjs +28 -215
  313. package/simple-color-picker/definition.js +29 -216
  314. package/simple-color-picker/index.cjs +9 -21
  315. package/simple-color-picker/index.js +71 -185
  316. package/styles/core/all.css +1 -1
  317. package/styles/core/theme.css +1 -1
  318. package/styles/core/typography.css +1 -1
  319. package/styles/tokens/theme-dark.css +4 -4
  320. package/styles/tokens/theme-light.css +4 -4
  321. package/styles/tokens/vivid-2-compat.css +1 -1
  322. package/switch/index.cjs +2 -2
  323. package/switch/index.js +4 -4
  324. package/tabs/definition.cjs +1 -1
  325. package/tabs/definition.js +2 -2
  326. package/tabs/index.cjs +2 -2
  327. package/tabs/index.js +16 -16
  328. package/tag/index.cjs +1 -1
  329. package/tag/index.js +1 -1
  330. package/text-area/definition.cjs +1 -1
  331. package/text-area/definition.js +1 -1
  332. package/text-area/index.cjs +3 -3
  333. package/text-area/index.js +9 -9
  334. package/text-field/definition.cjs +3 -3
  335. package/text-field/definition.js +4 -4
  336. package/text-field/index.cjs +1 -1
  337. package/text-field/index.js +1 -1
  338. package/time-picker/index.cjs +1 -1
  339. package/time-picker/index.js +2 -2
  340. package/toggletip/definition.cjs +1 -1
  341. package/toggletip/definition.js +2 -2
  342. package/tree-view/definition.cjs +1 -1
  343. package/tree-view/definition.js +2 -2
  344. package/tree-view/index.cjs +2 -2
  345. package/tree-view/index.js +6 -6
  346. package/unbundled/_commonjsHelpers.cjs +36 -0
  347. package/unbundled/_commonjsHelpers.js +32 -0
  348. package/unbundled/affix.cjs +1 -1
  349. package/unbundled/affix.js +1 -1
  350. package/unbundled/attribute-binding-behaviour.cjs +11 -10
  351. package/unbundled/attribute-binding-behaviour.js +11 -10
  352. package/unbundled/base-color-picker.cjs +278 -0
  353. package/unbundled/base-color-picker.js +275 -0
  354. package/unbundled/button.cjs +1 -1
  355. package/unbundled/button.js +2 -2
  356. package/unbundled/calendar-picker.template.cjs +3 -3
  357. package/unbundled/calendar-picker.template.js +4 -4
  358. package/unbundled/definition2.cjs +1 -1
  359. package/unbundled/definition2.js +2 -2
  360. package/unbundled/definition3.cjs +2 -1
  361. package/unbundled/definition3.js +2 -1
  362. package/unbundled/delegates-aria.cjs +67 -33
  363. package/unbundled/delegates-aria.js +69 -35
  364. package/unbundled/form-associated.cjs +2 -2
  365. package/unbundled/form-associated.js +3 -3
  366. package/unbundled/host-semantics.cjs +47 -22
  367. package/unbundled/host-semantics.js +48 -23
  368. package/unbundled/mixins.cjs +34 -27
  369. package/unbundled/mixins.js +35 -28
  370. package/unbundled/picker-field.template.cjs +13 -5
  371. package/unbundled/picker-field.template.js +14 -6
  372. package/unbundled/text-field.cjs +1 -1
  373. package/unbundled/text-field.js +1 -1
  374. package/unbundled/time-selection-picker.template.cjs +4 -4
  375. package/unbundled/time-selection-picker.template.js +5 -5
  376. package/unbundled/vivid-element.cjs +22 -15
  377. package/unbundled/vivid-element.js +23 -15
  378. package/unbundled/with-contextual-help.cjs +11 -0
  379. package/unbundled/with-contextual-help.js +11 -0
  380. package/video-player/definition.cjs +69007 -1
  381. package/video-player/definition.js +69007 -1
  382. package/video-player/index.cjs +35 -35
  383. package/video-player/index.js +1358 -1384
  384. package/visually-hidden/index.cjs +1 -1
  385. package/visually-hidden/index.js +1 -1
  386. package/vivid.api.json +347 -69
package/unbundled/picker-field.template.js CHANGED
@@ -1,8 +1,9 @@
1
- import { Observable, defaultExecutionContext, attr, observable, ref, slotted, html } from '@microsoft/fast-element';
1
+ import { Observable, ExecutionContext, attr, observable, ref, slotted, html } from '@microsoft/fast-element';
2
2
  import { h as handleEscapeKeyAndStopPropogation } from './index.js';
3
3
  import { a as WithFeedback } from './mixins.js';
4
4
  import { F as FormAssociated } from './form-associated.js';
5
5
  import { V as VividElement } from './vivid-element.js';
6
+ import { W as WithContextualHelp } from './with-contextual-help.js';
6
7
  import { W as WithErrorText } from './with-error-text.js';
7
8
  import { F as FormElement } from './form-element.js';
8
9
  import { L as Localized } from './localized.js';
@@ -55,9 +56,11 @@ var __decorateClass = (decorators, target, key, kind) => {
55
56
  if (result) __defProp(target, key, result);
56
57
  return result;
57
58
  };
58
- class PickerField extends WithFeedback(
59
- WithErrorText(
60
- FormElement(TrappedFocus(Localized(FormAssociated(VividElement))))
59
+ class PickerField extends WithContextualHelp(
60
+ WithFeedback(
61
+ WithErrorText(
62
+ FormElement(TrappedFocus(Localized(FormAssociated(VividElement))))
63
+ )
61
64
  )
62
65
  ) {
63
66
  // --- Core ---
@@ -141,10 +144,10 @@ class PickerField extends WithFeedback(
141
144
  () => this.locale,
142
145
  this.#localeChangeHandler
143
146
  );
144
- this.#localeChangeObserver.observe(this, defaultExecutionContext);
147
+ this.#localeChangeObserver.observe(this, ExecutionContext.default);
145
148
  }
146
149
  #stopObservingLocaleChanges() {
147
- this.#localeChangeObserver.disconnect();
150
+ this.#localeChangeObserver.dispose();
148
151
  }
149
152
  #dismissOnClickOutside;
150
153
  #openPopupIfPossible() {
@@ -248,6 +251,11 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
248
251
  name='helper-text'
249
252
  ${slotted("_helperTextSlottedContent")}
250
253
  ></slot>
254
+ <slot
255
+ slot='${(x) => x._contextualHelpSlottedContent?.length ? "contextual-help" : void 0}'
256
+ name='contextual-help'
257
+ ${slotted("_contextualHelpSlottedContent")}
258
+ ></slot>
251
259
  <${buttonTag}
252
260
  id='picker-button'
253
261
  ${ref("_pickerButtonEl")}
package/unbundled/text-field.cjs CHANGED
@@ -1,5 +1,5 @@
1
1
  'use strict';
2
2
 
3
- const styles = ".label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,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;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}";
3
+ const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,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;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
4
4
 
5
5
  exports.styles = styles;
package/unbundled/text-field.js CHANGED
@@ -1,3 +1,3 @@
1
- const styles = ".label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,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;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}";
1
+ const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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)}.base: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}}.base.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)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;align-items:center;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,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(*)){.base:not(.has-activedescendant) .wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,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;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
2
2
 
3
3
  export { styles as s };
package/unbundled/time-selection-picker.template.cjs CHANGED
@@ -562,10 +562,10 @@ const TimeSelectionPicker = (Base) => {
562
562
  () => this._use12hClock,
563
563
  this.#clockChangeHandler
564
564
  );
565
- this.#clockChangeObserver.observe(this, fastElement.defaultExecutionContext);
565
+ this.#clockChangeObserver.observe(this, fastElement.ExecutionContext.default);
566
566
  }
567
567
  #stopObservingClockChanges() {
568
- this.#clockChangeObserver.disconnect();
568
+ this.#clockChangeObserver.dispose();
569
569
  }
570
570
  /**
571
571
  * @internal
@@ -588,7 +588,7 @@ const TimeSelectionPicker = (Base) => {
588
588
  _onPickerButtonClick() {
589
589
  super._onPickerButtonClick();
590
590
  if (this._popupOpen) {
591
- fastElement.DOM.processUpdates();
591
+ fastElement.Updates.process();
592
592
  this._inlineTimePickerEl.scrollSelectedOptionsToTop();
593
593
  }
594
594
  }
@@ -748,7 +748,7 @@ class TimePicker extends TimeSelectionPicker(
748
748
  _onPickerButtonClick() {
749
749
  super._onPickerButtonClick();
750
750
  if (this._popupOpen) {
751
- fastElement.DOM.processUpdates();
751
+ fastElement.Updates.process();
752
752
  this._focusableElsWithinDialog()[0]?.focus();
753
753
  }
754
754
  }
package/unbundled/time-selection-picker.template.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { V as VividElement, d as defineVividComponent } from './vivid-element.js';
2
- import { when, html, repeat, observable, attr, nullableNumberConverter, Observable, defaultExecutionContext, DOM, volatile, ref } from '@microsoft/fast-element';
2
+ import { when, html, repeat, observable, attr, nullableNumberConverter, Observable, ExecutionContext, Updates, volatile, ref } from '@microsoft/fast-element';
3
3
  import { i as ignoreEventInFocusTraps, a as PickerField } from './picker-field.template.js';
4
4
  import { S as SingleValuePicker } from './single-value-picker.js';
5
5
  import { classNames } from '@microsoft/fast-web-utilities';
@@ -560,10 +560,10 @@ const TimeSelectionPicker = (Base) => {
560
560
  () => this._use12hClock,
561
561
  this.#clockChangeHandler
562
562
  );
563
- this.#clockChangeObserver.observe(this, defaultExecutionContext);
563
+ this.#clockChangeObserver.observe(this, ExecutionContext.default);
564
564
  }
565
565
  #stopObservingClockChanges() {
566
- this.#clockChangeObserver.disconnect();
566
+ this.#clockChangeObserver.dispose();
567
567
  }
568
568
  /**
569
569
  * @internal
@@ -586,7 +586,7 @@ const TimeSelectionPicker = (Base) => {
586
586
  _onPickerButtonClick() {
587
587
  super._onPickerButtonClick();
588
588
  if (this._popupOpen) {
589
- DOM.processUpdates();
589
+ Updates.process();
590
590
  this._inlineTimePickerEl.scrollSelectedOptionsToTop();
591
591
  }
592
592
  }
@@ -746,7 +746,7 @@ class TimePicker extends TimeSelectionPicker(
746
746
  _onPickerButtonClick() {
747
747
  super._onPickerButtonClick();
748
748
  if (this._popupOpen) {
749
- DOM.processUpdates();
749
+ Updates.process();
750
750
  this._focusableElsWithinDialog()[0]?.focus();
751
751
  }
752
752
  }
package/unbundled/vivid-element.cjs CHANGED
@@ -34,20 +34,22 @@ const createRegisterFunction = (definition) => (prefix = "vwc") => {
34
34
  (dependency) => [dependency.type, prefixed(dependency.name)]
35
35
  )
36
36
  ]);
37
+ const tagFor = (type2, convertToString) => {
38
+ if (!tagByDependencyType.has(type2)) {
39
+ throw new Error(
40
+ `Could not get tag for ${type2.name} as it is not a dependency of ${componentDefinition.name}.`
41
+ );
42
+ }
43
+ const tagNameStr = tagByDependencyType.get(type2);
44
+ return convertToString ? tagNameStr : fastElement.html.partial(tagNameStr);
45
+ };
37
46
  const elementDefinitionContext = {
38
- tagFor(type2) {
39
- if (!tagByDependencyType.has(type2)) {
40
- throw new Error(
41
- `Could not get tag for ${type2.name} as it is not a dependency of ${componentDefinition.name}.`
42
- );
43
- }
44
- return tagByDependencyType.get(type2);
45
- },
47
+ tagFor,
46
48
  tagForNonDependency(name) {
47
49
  return prefixed(name);
48
50
  }
49
51
  };
50
- new fastElement.FASTElementDefinition(type, {
52
+ fastElement.FASTElementDefinition.compose(type, {
51
53
  ...componentDefinition.options,
52
54
  template: resolve(
53
55
  componentDefinition.template,
@@ -79,9 +81,6 @@ const getSubscribers = (source) => {
79
81
  const subscribeToAriaPropertyChanges = (source, listener) => {
80
82
  getSubscribers(source).push(listener);
81
83
  };
82
- const unsubscribeFromAriaPropertyChanges = (source, listener) => {
83
- getSubscribers(source).splice(getSubscribers(source).indexOf(listener), 1);
84
- };
85
84
  const publishAriaPropertyChange = (source, changedAriaProperty) => {
86
85
  getSubscribers(source).forEach((s) => s(source, changedAriaProperty));
87
86
  };
@@ -208,7 +207,16 @@ const AriaMixin = (Base) => {
208
207
  return AriaMixinElement;
209
208
  };
210
209
 
211
- const locateReplacedPropMetadata = fastElement.createMetadataLocator();
210
+ function createMetadataLocator() {
211
+ const metadataMap = /* @__PURE__ */ new WeakMap();
212
+ return (target) => {
213
+ if (!metadataMap.has(target)) {
214
+ metadataMap.set(target, []);
215
+ }
216
+ return metadataMap.get(target);
217
+ };
218
+ }
219
+ const locateReplacedPropMetadata = createMetadataLocator();
212
220
  const replaces = (config) => ($target, $prop) => {
213
221
  locateReplacedPropMetadata($target.constructor).push({
214
222
  newPropertyName: $prop,
@@ -260,7 +268,7 @@ const ReplacedPropHandling = (Base) => {
260
268
 
261
269
  class VividElement extends AriaMixin(ReplacedPropHandling(fastElement.FASTElement)) {
262
270
  static {
263
- this.VIVID_VERSION = "5.1.0";
271
+ this.VIVID_VERSION = "5.3.0";
264
272
  }
265
273
  /**
266
274
  * Add data-vvd-component attribute with component name globally,
@@ -280,4 +288,3 @@ exports.createRegisterFunction = createRegisterFunction;
280
288
  exports.defineVividComponent = defineVividComponent;
281
289
  exports.replaces = replaces;
282
290
  exports.subscribeToAriaPropertyChanges = subscribeToAriaPropertyChanges;
283
- exports.unsubscribeFromAriaPropertyChanges = unsubscribeFromAriaPropertyChanges;
package/unbundled/vivid-element.js CHANGED
@@ -1,4 +1,4 @@
1
- import { FASTElementDefinition, DOM, attr, createMetadataLocator, Observable, FASTElement } from '@microsoft/fast-element';
1
+ import { FASTElementDefinition, html, DOM, attr, Observable, FASTElement } from '@microsoft/fast-element';
2
2
 
3
3
  function resolve(templateOrResolveFunction, ctx) {
4
4
  if (templateOrResolveFunction instanceof Function) {
@@ -32,20 +32,22 @@ const createRegisterFunction = (definition) => (prefix = "vwc") => {
32
32
  (dependency) => [dependency.type, prefixed(dependency.name)]
33
33
  )
34
34
  ]);
35
+ const tagFor = (type2, convertToString) => {
36
+ if (!tagByDependencyType.has(type2)) {
37
+ throw new Error(
38
+ `Could not get tag for ${type2.name} as it is not a dependency of ${componentDefinition.name}.`
39
+ );
40
+ }
41
+ const tagNameStr = tagByDependencyType.get(type2);
42
+ return convertToString ? tagNameStr : html.partial(tagNameStr);
43
+ };
35
44
  const elementDefinitionContext = {
36
- tagFor(type2) {
37
- if (!tagByDependencyType.has(type2)) {
38
- throw new Error(
39
- `Could not get tag for ${type2.name} as it is not a dependency of ${componentDefinition.name}.`
40
- );
41
- }
42
- return tagByDependencyType.get(type2);
43
- },
45
+ tagFor,
44
46
  tagForNonDependency(name) {
45
47
  return prefixed(name);
46
48
  }
47
49
  };
48
- new FASTElementDefinition(type, {
50
+ FASTElementDefinition.compose(type, {
49
51
  ...componentDefinition.options,
50
52
  template: resolve(
51
53
  componentDefinition.template,
@@ -77,9 +79,6 @@ const getSubscribers = (source) => {
77
79
  const subscribeToAriaPropertyChanges = (source, listener) => {
78
80
  getSubscribers(source).push(listener);
79
81
  };
80
- const unsubscribeFromAriaPropertyChanges = (source, listener) => {
81
- getSubscribers(source).splice(getSubscribers(source).indexOf(listener), 1);
82
- };
83
82
  const publishAriaPropertyChange = (source, changedAriaProperty) => {
84
83
  getSubscribers(source).forEach((s) => s(source, changedAriaProperty));
85
84
  };
@@ -206,6 +205,15 @@ const AriaMixin = (Base) => {
206
205
  return AriaMixinElement;
207
206
  };
208
207
 
208
+ function createMetadataLocator() {
209
+ const metadataMap = /* @__PURE__ */ new WeakMap();
210
+ return (target) => {
211
+ if (!metadataMap.has(target)) {
212
+ metadataMap.set(target, []);
213
+ }
214
+ return metadataMap.get(target);
215
+ };
216
+ }
209
217
  const locateReplacedPropMetadata = createMetadataLocator();
210
218
  const replaces = (config) => ($target, $prop) => {
211
219
  locateReplacedPropMetadata($target.constructor).push({
@@ -258,7 +266,7 @@ const ReplacedPropHandling = (Base) => {
258
266
 
259
267
  class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
260
268
  static {
261
- this.VIVID_VERSION = "5.1.0";
269
+ this.VIVID_VERSION = "5.3.0";
262
270
  }
263
271
  /**
264
272
  * Add data-vvd-component attribute with component name globally,
@@ -271,4 +279,4 @@ class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
271
279
  }
272
280
  }
273
281
 
274
- export { VividElement as V, ariaAttributeName as a, ariaMixinProperties as b, createRegisterFunction as c, defineVividComponent as d, replaces as r, subscribeToAriaPropertyChanges as s, unsubscribeFromAriaPropertyChanges as u };
282
+ export { VividElement as V, ariaAttributeName as a, ariaMixinProperties as b, createRegisterFunction as c, defineVividComponent as d, replaces as r, subscribeToAriaPropertyChanges as s };
package/unbundled/with-contextual-help.cjs CHANGED
@@ -19,6 +19,17 @@ const WithContextualHelp = (Base) => {
19
19
  get _hasContextualHelp() {
20
20
  return (this._contextualHelpSlottedContent?.length ?? 0) > 0;
21
21
  }
22
+ /**
23
+ * @internal
24
+ */
25
+ _isFromContextualHelp(e) {
26
+ const path = e.composedPath();
27
+ return path.some(
28
+ (t) => t?.closest?.(
29
+ '[slot="contextual-help"],[data-vvd-component="contextual-help"]'
30
+ )
31
+ );
32
+ }
22
33
  }
23
34
  __decorateClass([
24
35
  fastElement.observable
package/unbundled/with-contextual-help.js CHANGED
@@ -17,6 +17,17 @@ const WithContextualHelp = (Base) => {
17
17
  get _hasContextualHelp() {
18
18
  return (this._contextualHelpSlottedContent?.length ?? 0) > 0;
19
19
  }
20
+ /**
21
+ * @internal
22
+ */
23
+ _isFromContextualHelp(e) {
24
+ const path = e.composedPath();
25
+ return path.some(
26
+ (t) => t?.closest?.(
27
+ '[slot="contextual-help"],[data-vvd-component="contextual-help"]'
28
+ )
29
+ );
30
+ }
20
31
  }
21
32
  __decorateClass([
22
33
  observable