@vonage/vivid 5.24.0 → 5.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (331) hide show
  1. package/README.md +1 -1
  2. package/avatar/index.cjs +10 -10
  3. package/avatar/index.js +4 -3
  4. package/breadcrumb-item/index.cjs +9 -5
  5. package/breadcrumb-item/index.js +11 -6
  6. package/bundled/affix.cjs +1 -1
  7. package/bundled/affix.js +1 -1
  8. package/bundled/definition10.cjs +2 -1
  9. package/bundled/definition10.js +3 -2
  10. package/bundled/definition11.cjs +4 -4
  11. package/bundled/definition11.js +4 -3
  12. package/bundled/definition12.cjs +1 -1
  13. package/bundled/definition12.js +1 -0
  14. package/bundled/definition15.cjs +5 -5
  15. package/bundled/definition15.js +4 -3
  16. package/bundled/definition17.cjs +7 -7
  17. package/bundled/definition17.js +22 -109
  18. package/bundled/definition18.cjs +3 -3
  19. package/bundled/definition18.js +9 -31
  20. package/bundled/definition19.cjs +19 -19
  21. package/bundled/definition19.js +3 -2
  22. package/bundled/definition21.cjs +8 -8
  23. package/bundled/definition21.js +5 -4
  24. package/bundled/definition22.cjs +2 -2
  25. package/bundled/definition22.js +2 -2
  26. package/bundled/definition24.cjs +4 -4
  27. package/bundled/definition24.js +4 -3
  28. package/bundled/definition25.cjs +3 -3
  29. package/bundled/definition25.js +32 -28
  30. package/bundled/definition3.cjs +5 -5
  31. package/bundled/definition3.js +10 -40
  32. package/bundled/definition4.cjs +6 -6
  33. package/bundled/definition4.js +4 -3
  34. package/bundled/definition6.cjs +11 -11
  35. package/bundled/definition6.js +4 -3
  36. package/bundled/definition9.cjs +12 -6
  37. package/bundled/definition9.js +66 -43
  38. package/bundled/extractOptions.cjs +1 -1
  39. package/bundled/extractOptions.js +2 -2
  40. package/bundled/icon.cjs +1 -0
  41. package/bundled/icon.js +34 -0
  42. package/bundled/listbox.cjs +1 -1
  43. package/bundled/listbox.js +5 -2
  44. package/bundled/mixins.cjs +8 -8
  45. package/bundled/mixins.js +4 -3
  46. package/bundled/optgroup.cjs +1 -0
  47. package/bundled/optgroup.js +27 -0
  48. package/bundled/option.cjs +1 -0
  49. package/bundled/option.js +93 -0
  50. package/bundled/vivid-element.cjs +1 -1
  51. package/bundled/vivid-element.js +1 -1
  52. package/card/index.cjs +22 -22
  53. package/card/index.js +4 -3
  54. package/color-picker/index.cjs +18 -18
  55. package/color-picker/index.js +4 -3
  56. package/combobox/index.cjs +7 -7
  57. package/combobox/index.js +4 -2
  58. package/custom-elements.json +4159 -3847
  59. package/data-grid/index.cjs +24 -24
  60. package/data-grid/index.js +4 -3
  61. package/dial-pad/index.cjs +21 -21
  62. package/dial-pad/index.js +4 -3
  63. package/dialog/index.cjs +14 -14
  64. package/dialog/index.js +4 -3
  65. package/empty-state/index.cjs +3 -3
  66. package/empty-state/index.js +4 -3
  67. package/file-picker/index.cjs +7 -7
  68. package/file-picker/index.js +4 -3
  69. package/icon/definition.cjs +2 -1
  70. package/icon/definition.js +2 -1
  71. package/index.cjs +148 -141
  72. package/index.js +41 -37
  73. package/lib/accordion-item/accordion-item.d.ts +1 -0
  74. package/lib/combobox/combobox.d.ts +1 -1
  75. package/lib/components.d.ts +1 -0
  76. package/lib/dial-pad/dial-pad.d.ts +0 -1
  77. package/lib/listbox/definition.d.ts +3 -0
  78. package/lib/listbox/index.d.ts +1 -0
  79. package/lib/listbox/listbox.d.ts +1302 -0
  80. package/lib/listbox/listbox.template.d.ts +3 -0
  81. package/lib/listbox/variations.browser-spec.d.ts +1 -0
  82. package/lib/menu/menu.d.ts +0 -1
  83. package/lib/number-field/number-field.d.ts +0 -1
  84. package/lib/rich-text-editor/rte/features/base.d.ts +1 -0
  85. package/lib/rich-text-editor/rte/utils/default-textblock.d.ts +2 -2
  86. package/lib/tag-name-map.d.ts +2 -1
  87. package/lib/text-field/text-field.d.ts +1 -0
  88. package/lib/toggletip/toggletip.d.ts +1 -0
  89. package/lib/tooltip/tooltip.d.ts +1 -0
  90. package/listbox/definition.cjs +5 -0
  91. package/listbox/definition.js +2 -0
  92. package/listbox/index.cjs +11 -0
  93. package/listbox/index.js +540 -0
  94. package/nav/definition.cjs +1 -1
  95. package/nav/definition.js +1 -1
  96. package/nav-disclosure/definition.cjs +1 -1
  97. package/nav-disclosure/definition.js +1 -1
  98. package/nav-disclosure/index.cjs +4 -4
  99. package/nav-disclosure/index.js +4 -3
  100. package/nav-item/definition.cjs +1 -1
  101. package/nav-item/definition.js +1 -1
  102. package/note/definition.cjs +1 -1
  103. package/note/definition.js +1 -1
  104. package/number-field/definition.cjs +1 -1
  105. package/number-field/definition.js +1 -1
  106. package/optgroup/definition.cjs +2 -1
  107. package/optgroup/definition.js +2 -1
  108. package/option/definition.cjs +2 -1
  109. package/option/definition.js +2 -1
  110. package/package.json +8 -7
  111. package/pagination/definition.cjs +1 -1
  112. package/pagination/definition.js +1 -1
  113. package/platform-switch/definition.cjs +1 -1
  114. package/platform-switch/definition.js +1 -1
  115. package/popover/definition.cjs +1 -1
  116. package/popover/definition.js +1 -1
  117. package/popover/index.cjs +5 -5
  118. package/popover/index.js +4 -3
  119. package/progress/definition.cjs +1 -1
  120. package/progress/definition.js +1 -1
  121. package/radio/definition.cjs +1 -1
  122. package/radio/definition.js +1 -1
  123. package/radio-group/definition.cjs +1 -1
  124. package/radio-group/definition.js +1 -1
  125. package/range-slider/definition.cjs +1 -1
  126. package/range-slider/definition.js +1 -1
  127. package/rich-text-editor/definition.cjs +1 -1
  128. package/rich-text-editor/definition.js +1 -1
  129. package/rich-text-editor/index.cjs +13 -13
  130. package/rich-text-editor/index.js +22 -19
  131. package/rich-text-view/definition.cjs +1 -1
  132. package/rich-text-view/definition.js +1 -1
  133. package/searchable-select/definition.cjs +1 -1
  134. package/searchable-select/definition.js +1 -1
  135. package/searchable-select/index.cjs +23 -23
  136. package/searchable-select/index.js +10 -7
  137. package/select/definition.cjs +1 -1
  138. package/select/definition.js +1 -1
  139. package/selectable-box/definition.cjs +1 -1
  140. package/selectable-box/definition.js +1 -1
  141. package/shared/listbox/commands.d.ts +17 -0
  142. package/shared/listbox/move.d.ts +6 -0
  143. package/shared/listbox/options.d.ts +12 -0
  144. package/shared/listbox/selection.d.ts +28 -0
  145. package/shared/listbox/state.d.ts +26 -0
  146. package/shared/listbox/typeahead.d.ts +8 -0
  147. package/shared/listbox/with-options-filter.d.ts +440 -0
  148. package/shared/listbox/with-options.d.ts +862 -0
  149. package/side-drawer/definition.cjs +1 -1
  150. package/side-drawer/definition.js +1 -1
  151. package/simple-color-picker/definition.cjs +1 -1
  152. package/simple-color-picker/definition.js +1 -1
  153. package/simple-color-picker/index.cjs +6 -6
  154. package/simple-color-picker/index.js +4 -3
  155. package/split-button/definition.cjs +1 -1
  156. package/split-button/definition.js +1 -1
  157. package/status/definition.cjs +1 -1
  158. package/status/definition.js +1 -1
  159. package/switch/definition.cjs +1 -1
  160. package/switch/definition.js +1 -1
  161. package/tab/definition.cjs +1 -1
  162. package/tab/definition.js +1 -1
  163. package/tab-panel/definition.cjs +1 -1
  164. package/tab-panel/definition.js +1 -1
  165. package/table/definition.cjs +1 -1
  166. package/table/definition.js +1 -1
  167. package/table/index.cjs +13 -13
  168. package/table/index.js +4 -3
  169. package/tabs/definition.cjs +1 -1
  170. package/tabs/definition.js +1 -1
  171. package/tag/definition.cjs +1 -1
  172. package/tag/definition.js +1 -1
  173. package/tag/index.cjs +11 -11
  174. package/tag/index.js +4 -3
  175. package/tag-group/definition.cjs +1 -1
  176. package/tag-group/definition.js +1 -1
  177. package/text-area/definition.cjs +1 -1
  178. package/text-area/definition.js +1 -1
  179. package/time-picker/definition.cjs +1 -1
  180. package/time-picker/definition.js +1 -1
  181. package/tree-item/definition.cjs +1 -1
  182. package/tree-item/definition.js +1 -1
  183. package/tree-view/definition.cjs +1 -1
  184. package/tree-view/definition.js +1 -1
  185. package/unbundled/affix.cjs +2 -2
  186. package/unbundled/affix.js +1 -1
  187. package/unbundled/base-progress.cjs +1 -1
  188. package/unbundled/base-progress.js +1 -1
  189. package/unbundled/button.cjs +2 -2
  190. package/unbundled/button.js +2 -2
  191. package/unbundled/definition.cjs +2 -65
  192. package/unbundled/definition.js +4 -61
  193. package/unbundled/definition11.cjs +4 -3
  194. package/unbundled/definition11.js +3 -2
  195. package/unbundled/definition12.cjs +3 -2
  196. package/unbundled/definition12.js +3 -2
  197. package/unbundled/definition14.cjs +2 -1
  198. package/unbundled/definition14.js +2 -1
  199. package/unbundled/definition17.cjs +9 -4
  200. package/unbundled/definition17.js +9 -4
  201. package/unbundled/definition2.cjs +7 -2
  202. package/unbundled/definition2.js +8 -3
  203. package/unbundled/definition21.cjs +2 -1
  204. package/unbundled/definition21.js +2 -1
  205. package/unbundled/definition23.cjs +2 -1
  206. package/unbundled/definition23.js +2 -1
  207. package/unbundled/definition24.cjs +6 -4
  208. package/unbundled/definition24.js +6 -4
  209. package/unbundled/definition25.cjs +2 -1
  210. package/unbundled/definition25.js +2 -1
  211. package/unbundled/definition26.cjs +7 -4
  212. package/unbundled/definition26.js +7 -4
  213. package/unbundled/definition27.cjs +39 -5
  214. package/unbundled/definition27.js +40 -6
  215. package/unbundled/definition28.cjs +4 -3
  216. package/unbundled/definition28.js +4 -3
  217. package/unbundled/definition29.cjs +5 -168
  218. package/unbundled/definition29.js +11 -162
  219. package/unbundled/definition30.cjs +2 -63
  220. package/unbundled/definition30.js +5 -54
  221. package/unbundled/definition31.cjs +5 -3
  222. package/unbundled/definition31.js +5 -3
  223. package/unbundled/definition32.cjs +2 -1
  224. package/unbundled/definition32.js +2 -1
  225. package/unbundled/definition35.cjs +2 -1
  226. package/unbundled/definition35.js +2 -1
  227. package/unbundled/definition37.cjs +1 -1
  228. package/unbundled/definition37.js +1 -1
  229. package/unbundled/definition39.cjs +1 -1
  230. package/unbundled/definition39.js +1 -1
  231. package/unbundled/definition40.cjs +4 -2
  232. package/unbundled/definition40.js +4 -2
  233. package/unbundled/definition41.cjs +11 -6
  234. package/unbundled/definition41.js +11 -6
  235. package/unbundled/definition42.cjs +5 -4
  236. package/unbundled/definition42.js +5 -4
  237. package/unbundled/definition44.cjs +3 -2
  238. package/unbundled/definition44.js +3 -2
  239. package/unbundled/definition45.cjs +2 -2
  240. package/unbundled/definition45.js +2 -2
  241. package/unbundled/definition49.cjs +583 -79
  242. package/unbundled/definition49.js +579 -76
  243. package/unbundled/definition50.cjs +71 -33
  244. package/unbundled/definition50.js +67 -29
  245. package/unbundled/definition51.cjs +54 -23
  246. package/unbundled/definition51.js +52 -18
  247. package/unbundled/definition52.cjs +23 -39
  248. package/unbundled/definition52.js +17 -36
  249. package/unbundled/definition53.cjs +29 -314
  250. package/unbundled/definition53.js +27 -312
  251. package/unbundled/definition54.cjs +302 -195
  252. package/unbundled/definition54.js +298 -191
  253. package/unbundled/definition55.cjs +210 -40
  254. package/unbundled/definition55.js +206 -36
  255. package/unbundled/definition56.cjs +42 -266
  256. package/unbundled/definition56.js +38 -262
  257. package/unbundled/definition57.cjs +270 -50
  258. package/unbundled/definition57.js +267 -46
  259. package/unbundled/definition58.cjs +48 -146
  260. package/unbundled/definition58.js +47 -143
  261. package/unbundled/definition59.cjs +127 -225
  262. package/unbundled/definition59.js +122 -223
  263. package/unbundled/definition6.cjs +2 -1
  264. package/unbundled/definition6.js +2 -1
  265. package/unbundled/definition60.cjs +199 -418
  266. package/unbundled/definition60.js +196 -415
  267. package/unbundled/definition61.cjs +442 -3738
  268. package/unbundled/definition61.js +432 -3565
  269. package/unbundled/definition62.cjs +3717 -730
  270. package/unbundled/definition62.js +3544 -720
  271. package/unbundled/definition63.cjs +770 -97
  272. package/unbundled/definition63.js +767 -94
  273. package/unbundled/definition64.cjs +100 -999
  274. package/unbundled/definition64.js +98 -994
  275. package/unbundled/definition65.cjs +991 -93
  276. package/unbundled/definition65.js +985 -90
  277. package/unbundled/definition66.cjs +109 -73
  278. package/unbundled/definition66.js +105 -63
  279. package/unbundled/definition67.cjs +69 -155
  280. package/unbundled/definition67.js +60 -152
  281. package/unbundled/definition68.cjs +155 -119
  282. package/unbundled/definition68.js +151 -115
  283. package/unbundled/definition69.cjs +124 -49
  284. package/unbundled/definition69.js +120 -45
  285. package/unbundled/definition70.cjs +51 -85
  286. package/unbundled/definition70.js +50 -81
  287. package/unbundled/definition71.cjs +91 -19
  288. package/unbundled/definition71.js +86 -14
  289. package/unbundled/definition72.cjs +20 -87
  290. package/unbundled/definition72.js +14 -84
  291. package/unbundled/definition73.cjs +77 -294
  292. package/unbundled/definition73.js +72 -217
  293. package/unbundled/definition74.cjs +289 -311
  294. package/unbundled/definition74.js +219 -306
  295. package/unbundled/definition75.cjs +326 -26
  296. package/unbundled/definition75.js +317 -23
  297. package/unbundled/definition76.cjs +27 -122
  298. package/unbundled/definition76.js +22 -118
  299. package/unbundled/definition77.cjs +105 -232
  300. package/unbundled/definition77.js +101 -228
  301. package/unbundled/definition78.cjs +259 -26
  302. package/unbundled/definition78.js +249 -23
  303. package/unbundled/definition79.cjs +29 -148
  304. package/unbundled/definition79.js +27 -133
  305. package/unbundled/definition80.cjs +118 -173
  306. package/unbundled/definition80.js +109 -169
  307. package/unbundled/definition81.cjs +181 -477
  308. package/unbundled/definition81.js +176 -471
  309. package/unbundled/definition82.cjs +517 -0
  310. package/unbundled/definition82.js +497 -0
  311. package/unbundled/extractOptions.cjs +5 -5
  312. package/unbundled/extractOptions.js +2 -2
  313. package/unbundled/icon.cjs +67 -0
  314. package/unbundled/icon.js +61 -0
  315. package/unbundled/linkable.cjs +1 -1
  316. package/unbundled/linkable.js +1 -1
  317. package/unbundled/listbox.cjs +8 -3
  318. package/unbundled/listbox.js +7 -2
  319. package/unbundled/mixins.cjs +2 -1
  320. package/unbundled/mixins.js +2 -1
  321. package/unbundled/optgroup.cjs +66 -0
  322. package/unbundled/optgroup.js +54 -0
  323. package/unbundled/option.cjs +176 -0
  324. package/unbundled/option.js +164 -0
  325. package/unbundled/time-selection-picker.template.cjs +1 -1
  326. package/unbundled/time-selection-picker.template.js +1 -1
  327. package/unbundled/vivid-element.cjs +1 -1
  328. package/unbundled/vivid-element.js +1 -1
  329. package/video-player/definition.cjs +1 -1
  330. package/video-player/definition.js +1 -1
  331. package/vivid.api.json +336 -193
package/README.md CHANGED
@@ -2,4 +2,4 @@
2
2
 
3
3
  The component library of the Vivid design system, provided as a set of web components.
4
4
 
5
- [View Documentation](https://vivid.vonage.com/)
5
+ [View Documentation](https://apps.vivid.vonage.com/)
package/avatar/index.cjs CHANGED
@@ -1,18 +1,18 @@
1
- const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/definition3.cjs`),a=require(`../bundled/delegates-aria.cjs`),o=require(`../bundled/linkable.cjs`);var s=`:host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-avatar-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-avatar-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-avatar-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-avatar-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-avatar-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-avatar-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-avatar-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-avatar-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-avatar-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-avatar-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--vvd-avatar-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-avatar-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-avatar-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-avatar-accent-contrast,var(--vvd-color-neutral-800))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.base:not(.size-condensed,.size-expanded){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{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))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}`,c=class extends o.t(e.t){constructor(...e){super(...e),this.clickable=!1}};n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m],c.prototype,`shape`,void 0),n.t([e.m],c.prototype,`appearance`,void 0),n.t([e.m],c.prototype,`size`,void 0),n.t([e.m],c.prototype,`icon`,void 0),n.t([e.m],c.prototype,`initials`,void 0),n.t([e.m({mode:`boolean`,attribute:`clickable`})],c.prototype,`clickable`,void 0);var l=e=>r.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`appearance-${e.appearance}`,!!e.appearance],[`shape-${e.shape}`,!!e.shape],[`size-${e.size}`,!!e.size]);function u(t){return e.p`
1
+ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/definition3.cjs`),a=require(`../bundled/icon.cjs`),o=require(`../bundled/delegates-aria.cjs`),s=require(`../bundled/linkable.cjs`);var c=`:host{display:inline-block}.base.connotation-cta{--_connotation-color-primary:var(--vvd-avatar-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-avatar-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-cta-firm,var(--vvd-color-cta-600));--_connotation-color-firm-all:var(--vvd-avatar-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-avatar-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-avatar-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-avatar-cta-soft,var(--vvd-color-cta-100));--_connotation-color-contrast:var(--vvd-avatar-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-avatar-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-avatar-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-avatar-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-firm-all:var(--vvd-avatar-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-fierce:var(--vvd-avatar-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-avatar-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-avatar-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-contrast:var(--vvd-avatar-accent-contrast,var(--vvd-color-neutral-800))}.base{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}.base.appearance-outlined{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-300)}.base.appearance-duotone{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text:var(--_connotation-color-contrast);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base{border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle;border:none;justify-content:center;align-items:center;display:inline-flex;overflow:hidden}.base.size-condensed{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2);line-height:1}.base.size-expanded{--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8)) / 2);line-height:1}.base:is(a,button){cursor:pointer;--focus-stroke-gap-color:transparent}.base:not(.shape-pill){--_avatar-border-radius:8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius:4px}.base:not(.size-condensed,.size-expanded){--_size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);line-height:1}.base:is(a,button):focus-visible{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))}.base.shape-pill{--_avatar-border-radius:50%}.base .initials{text-transform:uppercase}.base ::slotted([slot=graphic]){object-fit:cover;block-size:100%;inline-size:100%}`,l=class extends s.t(e.t){constructor(...e){super(...e),this.clickable=!1}};n.t([e.m],l.prototype,`connotation`,void 0),n.t([e.m],l.prototype,`shape`,void 0),n.t([e.m],l.prototype,`appearance`,void 0),n.t([e.m],l.prototype,`size`,void 0),n.t([e.m],l.prototype,`icon`,void 0),n.t([e.m],l.prototype,`initials`,void 0),n.t([e.m({mode:`boolean`,attribute:`clickable`})],l.prototype,`clickable`,void 0);var u=e=>r.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`appearance-${e.appearance}`,!!e.appearance],[`shape-${e.shape}`,!!e.shape],[`size-${e.size}`,!!e.size]);function d(t){return e.p`
2
2
  <${t} name="${e=>e.icon?e.icon:`user-line`}"></${t}>
3
- `}function d(){return e.p`
3
+ `}function f(){return e.p`
4
4
  <span class="initials">${({initials:e})=>e.substring(0,2)}</span>
5
- `}function f(t,n){return t.href?t._renderLinkElement(n,l):t.clickable?e.p`<button
5
+ `}function p(t,n){return t.href?t._renderLinkElement(n,u):t.clickable?e.p`<button
6
6
  type="button"
7
- class="${l}"
8
- ${a.n()}
7
+ class="${u}"
8
+ ${o.n()}
9
9
  >
10
10
  ${n}
11
- </button>`:e.p`<span class="${l}">${n}</span>`}var p=e.u(`avatar`,c,n=>{let r=n.tagFor(i.r);return e.p`
12
- ${n=>f(n,e.p`<slot name="graphic">
13
- ${t.t(e=>e.initials,d())}
11
+ </button>`:e.p`<span class="${u}">${n}</span>`}var m=e.u(`avatar`,l,n=>{let r=n.tagFor(a.t);return e.p`
12
+ ${n=>p(n,e.p`<slot name="graphic">
13
+ ${t.t(e=>e.initials,f())}
14
14
  ${t.t(e=>!e.initials,e.p`<span class="icon"
15
- ><slot name="icon">${u(r)}</slot></span
15
+ ><slot name="icon">${d(r)}</slot></span
16
16
  >`)}</slot
17
17
  >`)}
18
- `},[i.t],{styles:s});e.d(p)();
18
+ `},[i.t],{styles:c});e.d(m)();
package/avatar/index.js CHANGED
@@ -2,7 +2,8 @@ import { d as e, m as t, p as n, t as r, u as i } from "../bundled/vivid-element
2
2
  import { t as a } from "../bundled/when.js";
3
3
  import { t as o } from "../bundled/decorate.js";
4
4
  import { t as s } from "../bundled/class-names.js";
5
- import { r as c, t as l } from "../bundled/definition3.js";
5
+ import { t as c } from "../bundled/definition3.js";
6
+ import { t as l } from "../bundled/icon.js";
6
7
  import { n as u } from "../bundled/delegates-aria.js";
7
8
  import { t as d } from "../bundled/linkable.js";
8
9
  //#region src/lib/avatar/avatar.scss?inline
@@ -40,7 +41,7 @@ function _(e, t) {
40
41
  //#endregion
41
42
  //#region src/lib/avatar/index.ts
42
43
  e(i("avatar", p, (e) => {
43
- let t = e.tagFor(c);
44
+ let t = e.tagFor(l);
44
45
  return n`
45
46
  ${(e) => _(e, n`<slot name="graphic">
46
47
  ${a((e) => e.initials, g())}
@@ -49,5 +50,5 @@ e(i("avatar", p, (e) => {
49
50
  >`)}</slot
50
51
  >`)}
51
52
  `;
52
- }, [l], { styles: f }))();
53
+ }, [c], { styles: f }))();
53
54
  //#endregion
@@ -1,5 +1,9 @@
1
- const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/definition3.cjs`),i=require(`../bundled/breadcrumb-item.cjs`);var a=`.base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.control{font:inherit}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{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:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}`,o=e=>n.t(`base`),s=e.u(`breadcrumb-item`,i.t,n=>{let i=n.tagFor(r.r);return e.p` <div role="listitem" class="${o}">
2
- ${t.t(e=>e.text&&!e.href,e.p`${e=>e.text}`)}
3
- ${t.t(e=>e.text&&e.href&&e.href.length>0,e.p`${t=>t._renderLinkElement(e.p`${e=>e.text}`,`control`)}`)}
4
- ${t.t(e=>e.separator,e.p`<${i} class="separator" name="chevron-right-solid"></${i}>`)}
5
- </div>`},[r.t],{styles:a,shadowOptions:{delegatesFocus:!0}});e.d(s)();
1
+ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/definition3.cjs`),i=require(`../bundled/icon.cjs`),a=require(`../bundled/breadcrumb-item.cjs`);var o=`:host{flex:0 auto;min-inline-size:0}.base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;min-inline-size:0;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.text{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;display:block;overflow:hidden}.control{font:inherit;min-inline-size:0;display:block}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{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:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}`,s=e=>n.t(`base`),c=e.u(`breadcrumb-item`,a.t,n=>{let r=n.tagFor(i.t);return e.p` <div role="listitem" class="${s}">
2
+ ${t.t(e=>e.text&&!e.href,e.p`<span class="text" title="${e=>e.text}"
3
+ >${e=>e.text}</span
4
+ >`)}
5
+ ${t.t(e=>e.text&&e.href&&e.href.length>0,e.p`${t=>t._renderLinkElement(e.p`<span class="text" title="${e=>e.text}"
6
+ >${e=>e.text}</span
7
+ >`,`control`)}`)}
8
+ ${t.t(e=>e.separator,e.p`<${r} class="separator" name="chevron-right-solid"></${r}>`)}
9
+ </div>`},[r.t],{styles:o,shadowOptions:{delegatesFocus:!0}});e.d(c)();
@@ -1,20 +1,25 @@
1
1
  import { d as e, p as t, u as n } from "../bundled/vivid-element.js";
2
2
  import { t as r } from "../bundled/when.js";
3
3
  import { t as i } from "../bundled/class-names.js";
4
- import { r as a, t as o } from "../bundled/definition3.js";
4
+ import { t as a } from "../bundled/definition3.js";
5
+ import { t as o } from "../bundled/icon.js";
5
6
  import { t as s } from "../bundled/breadcrumb-item.js";
6
7
  //#region src/lib/breadcrumb-item/breadcrumb-item.scss?inline
7
- var c = ".base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.control{font:inherit}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{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:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}", l = (e) => i("base");
8
+ var c = ":host{flex:0 auto;min-inline-size:0}.base{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);align-items:center;min-inline-size:0;display:flex}.base .separator{color:var(--vvd-color-neutral-600);margin:0 16px;font-size:12px}.text{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;display:block;overflow:hidden}.control{font:inherit;min-inline-size:0;display:block}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{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:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));--focus-stroke-gap-color:transparent;--focus-block-size-addition:8px;--focus-border-radius:4px;display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}@media (hover:hover){.control:any-link:hover{text-decoration:underline}}", l = (e) => i("base");
8
9
  //#endregion
9
10
  //#region src/lib/breadcrumb-item/index.ts
10
11
  e(n("breadcrumb-item", s, (e) => {
11
- let n = e.tagFor(a);
12
+ let n = e.tagFor(o);
12
13
  return t` <div role="listitem" class="${l}">
13
- ${r((e) => e.text && !e.href, t`${(e) => e.text}`)}
14
- ${r((e) => e.text && e.href && e.href.length > 0, t`${(e) => e._renderLinkElement(t`${(e) => e.text}`, "control")}`)}
14
+ ${r((e) => e.text && !e.href, t`<span class="text" title="${(e) => e.text}"
15
+ >${(e) => e.text}</span
16
+ >`)}
17
+ ${r((e) => e.text && e.href && e.href.length > 0, t`${(e) => e._renderLinkElement(t`<span class="text" title="${(e) => e.text}"
18
+ >${(e) => e.text}</span
19
+ >`, "control")}`)}
15
20
  ${r((e) => e.separator, t`<${n} class="separator" name="chevron-right-solid"></${n}>`)}
16
21
  </div>`;
17
- }, [o], {
22
+ }, [a], {
18
23
  styles: c,
19
24
  shadowOptions: { delegatesFocus: !0 }
20
25
  }))();
package/bundled/affix.cjs CHANGED
@@ -1,4 +1,4 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./decorate.cjs`),r=require(`./definition3.cjs`);var i=t=>{class r extends t{}return n.t([e.m],r.prototype,`icon`,void 0),n.t([e.A],r.prototype,`iconSlottedContent`,void 0),r},a=t=>{class r extends i(t){constructor(...e){super(...e),this.iconTrailing=!1}}return n.t([e.m({mode:`boolean`,attribute:`icon-trailing`})],r.prototype,`iconTrailing`,void 0),r},o={Slot:!1,Span:!0},s={Hidden:`true`,Visible:`false`},c=n=>{let i=n.tagFor(r.r);return(n,r=o.Span,a=s.Hidden,c={label:``,announceOnUpdate:!1})=>{if(!n&&!r)return e.p`<slot
1
+ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./decorate.cjs`),r=require(`./icon.cjs`);var i=t=>{class r extends t{}return n.t([e.m],r.prototype,`icon`,void 0),n.t([e.A],r.prototype,`iconSlottedContent`,void 0),r},a=t=>{class r extends i(t){constructor(...e){super(...e),this.iconTrailing=!1}}return n.t([e.m({mode:`boolean`,attribute:`icon-trailing`})],r.prototype,`iconTrailing`,void 0),r},o={Slot:!1,Span:!0},s={Hidden:`true`,Visible:`false`},c=n=>{let i=n.tagFor(r.t);return(n,r=o.Span,a=s.Hidden,c={label:``,announceOnUpdate:!1})=>{if(!n&&!r)return e.p`<slot
2
2
  name="icon"
3
3
  aria-hidden="${()=>a}"
4
4
  ${t.t(`iconSlottedContent`)}
package/bundled/affix.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { A as e, m as t, p as n } from "./vivid-element.js";
2
2
  import { t as r } from "./slotted.js";
3
3
  import { t as i } from "./decorate.js";
4
- import { r as a } from "./definition3.js";
4
+ import { t as a } from "./icon.js";
5
5
  //#region src/shared/patterns/affix.ts
6
6
  var o = (n) => {
7
7
  class r extends n {}
@@ -1,4 +1,4 @@
1
- const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./class-names.cjs`),a=require(`./definition8.cjs`),o=require(`./anchored.cjs`),s=require(`./dialog.cjs`);var c=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}`,l=class extends e.t(o.t(t.t)){constructor(...e){super(...e),this.#e=null,this.alternate=!1,this.placement=`right`,this.open=!1,this.#i=()=>{this.open||t.M.enqueue(()=>this.open=!0)},this.#o=e=>{let t=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(t||n)&&(this.open=!1)},this.#s=e=>{e.key===`Escape`&&(this.open=!1)}}#e;openChanged(e,t){e!==void 0&&(t?this.setAttribute(`role`,`status`):this.removeAttribute(`role`),this.#a(),this._anchorEl&&this.#n(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#a()}_anchorElChanged(e,t){e&&this.#r(e),t&&this.#t(t)}#t(e){e.addEventListener(`click`,this.#i,!0),this.#e=e.ariaLabel,e.ariaLabel=this.locale.toggletip.anchorLabel(e.ariaLabel||``),this.#n(e)}#n(e){e.setAttribute(`aria-expanded`,this.open.toString()),e.setAttribute(`data-expanded`,this.open.toString())}#r(e){e.removeEventListener(`click`,this.#i,!0),e.removeAttribute(`aria-expanded`),e.removeAttribute(`data-expanded`),e.ariaLabel&&=this.#e}#i;#a(){document.removeEventListener(`click`,this.#o),document.removeEventListener(`keydown`,this.#s),this.open&&this.isConnected&&(document.addEventListener(`click`,this.#o),document.addEventListener(`keydown`,this.#s))}#o;#s};r.t([t.m],l.prototype,`headline`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`alternate`,void 0),r.t([t.m({mode:`fromView`})],l.prototype,`placement`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`open`,void 0);var u=e=>i.t(`control`),d=t.u(`toggletip`,l,e=>{let r=e.tagFor(a.i);return t.p`
1
+ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./class-names.cjs`),a=require(`./definition8.cjs`),o=require(`./anchored.cjs`),s=require(`./dialog.cjs`);var c=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:4px 0 0}.text-secondary:first-child{margin-block-start:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}`,l=class extends e.t(o.t(t.t)){constructor(...e){super(...e),this.#e=null,this.alternate=!1,this.placement=`right`,this.open=!1,this.#i=()=>{this.open||t.M.enqueue(()=>this.open=!0)},this.#o=e=>{let t=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(t||n)&&(this.open=!1)},this.#s=e=>{e.key===`Escape`&&(this.open=!1)}}#e;openChanged(e,t){e!==void 0&&(t?this.setAttribute(`role`,`status`):this.removeAttribute(`role`),this.#a(),this._anchorEl&&this.#n(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#a()}_anchorElChanged(e,t){e&&this.#r(e),t&&this.#t(t)}#t(e){e.addEventListener(`click`,this.#i,!0),this.#e=e.ariaLabel,e.ariaLabel=this.locale.toggletip.anchorLabel(e.ariaLabel||``),this.#n(e)}#n(e){e.setAttribute(`aria-expanded`,this.open.toString()),e.setAttribute(`data-expanded`,this.open.toString())}#r(e){e.removeEventListener(`click`,this.#i,!0),e.removeAttribute(`aria-expanded`),e.removeAttribute(`data-expanded`),e.ariaLabel&&=this.#e}#i;#a(){document.removeEventListener(`click`,this.#o),document.removeEventListener(`keydown`,this.#s),this.open&&this.isConnected&&(document.addEventListener(`click`,this.#o),document.addEventListener(`keydown`,this.#s))}#o;#s};r.t([t.m],l.prototype,`headline`,void 0),r.t([t.m({attribute:`text-secondary`})],l.prototype,`textSecondary`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`alternate`,void 0),r.t([t.m({mode:`fromView`})],l.prototype,`placement`,void 0),r.t([t.m({mode:`boolean`})],l.prototype,`open`,void 0);var u=e=>i.t(`control`),d=t.u(`toggletip`,l,e=>{let r=e.tagFor(a.i);return t.p`
2
2
  ${o.n()}
3
3
  <${r}
4
4
  @keydown="${(e,{event:t})=>!(e.open&&s.t(t))}"
@@ -12,6 +12,7 @@ const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`.
12
12
  >
13
13
  <div class="content-wrapper">
14
14
  ${n.t(e=>e.headline,t.p`<h2 class="headline">${e=>e.headline}</h2>`)}
15
+ ${n.t(e=>e.textSecondary,t.p`<p class="text-secondary">${e=>e.textSecondary}</p>`)}
15
16
  <slot></slot>
16
17
  <div class="action-items"><slot name="action-items"></slot></div>
17
18
  </div>
@@ -7,7 +7,7 @@ import { i as u, t as d } from "./definition8.js";
7
7
  import { n as f, t as p } from "./anchored.js";
8
8
  import { t as m } from "./dialog.js";
9
9
  //#region src/lib/toggletip/toggletip.scss?inline
10
- var h = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}", g = class extends e(p(a)) {
10
+ var h = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.text-secondary{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base);margin:4px 0 0}.text-secondary:first-child{margin-block-start:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}", g = class extends e(p(a)) {
11
11
  constructor(...e) {
12
12
  super(...e), this.#e = null, this.alternate = !1, this.placement = "right", this.open = !1, this.#i = () => {
13
13
  this.open || t.enqueue(() => this.open = !0);
@@ -49,7 +49,7 @@ var h = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-a
49
49
  #o;
50
50
  #s;
51
51
  };
52
- c([r], g.prototype, "headline", void 0), c([r({ mode: "boolean" })], g.prototype, "alternate", void 0), c([r({ mode: "fromView" })], g.prototype, "placement", void 0), c([r({ mode: "boolean" })], g.prototype, "open", void 0);
52
+ c([r], g.prototype, "headline", void 0), c([r({ attribute: "text-secondary" })], g.prototype, "textSecondary", void 0), c([r({ mode: "boolean" })], g.prototype, "alternate", void 0), c([r({ mode: "fromView" })], g.prototype, "placement", void 0), c([r({ mode: "boolean" })], g.prototype, "open", void 0);
53
53
  //#endregion
54
54
  //#region src/lib/toggletip/toggletip.template.ts
55
55
  var _ = (e) => l("control"), v = o("toggletip", g, (e) => {
@@ -68,6 +68,7 @@ var _ = (e) => l("control"), v = o("toggletip", g, (e) => {
68
68
  >
69
69
  <div class="content-wrapper">
70
70
  ${s((e) => e.headline, i`<h2 class="headline">${(e) => e.headline}</h2>`)}
71
+ ${s((e) => e.textSecondary, i`<p class="text-secondary">${(e) => e.textSecondary}</p>`)}
71
72
  <slot></slot>
72
73
  <div class="action-items"><slot name="action-items"></slot></div>
73
74
  </div>
@@ -1,10 +1,10 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./class-names.cjs`),r=require(`./definition3.cjs`),i=require(`./definition10.cjs`);var a=class extends e.t{constructor(...e){super(...e),this.placement=`right`}};t.t([e.m({mode:`fromView`})],a.prototype,`placement`,void 0);var o=e=>n.t(`control`),s=e.u(`contextual-help`,a,t=>{let n=t.tagFor(i.r),a=t.tagFor(r.r);return e.p`
1
+ const e=require(`./vivid-element.cjs`),t=require(`./decorate.cjs`),n=require(`./class-names.cjs`),r=require(`./definition3.cjs`),i=require(`./icon.cjs`),a=require(`./definition10.cjs`);var o=class extends e.t{constructor(...e){super(...e),this.placement=`right`}};t.t([e.m({mode:`fromView`})],o.prototype,`placement`,void 0);var s=e=>n.t(`control`),c=e.u(`contextual-help`,o,t=>{let n=t.tagFor(a.r),r=t.tagFor(i.t);return e.p`
2
2
  <${n} class="base" exportparts="vvd-theme-alternate">
3
- <button class="${o}" slot="anchor">
3
+ <button class="${s}" slot="anchor">
4
4
  <slot name="icon" slot="icon">
5
- <${a} name="help-solid"></${a}>
5
+ <${r} name="help-solid"></${r}>
6
6
  </slot>
7
7
  </button>
8
8
  <slot></slot>
9
9
  </${n}>
10
- `},[r.t,i.n],{styles:`.control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}`}),c=e.d(s);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});
10
+ `},[r.t,a.n],{styles:`.control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}`}),l=e.d(c);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return c}});
@@ -1,7 +1,8 @@
1
1
  import { d as e, m as t, p as n, t as r, u as i } from "./vivid-element.js";
2
2
  import { t as a } from "./decorate.js";
3
3
  import { t as o } from "./class-names.js";
4
- import { r as s, t as c } from "./definition3.js";
4
+ import { t as s } from "./definition3.js";
5
+ import { t as c } from "./icon.js";
5
6
  import { n as l, r as u } from "./definition10.js";
6
7
  //#region src/lib/contextual-help/contextual-help.ts
7
8
  var d = class extends r {
@@ -13,7 +14,7 @@ a([t({ mode: "fromView" })], d.prototype, "placement", void 0);
13
14
  //#endregion
14
15
  //#region src/lib/contextual-help/contextual-help.template.ts
15
16
  var f = (e) => o("control"), p = i("contextual-help", d, (e) => {
16
- let t = e.tagFor(u), r = e.tagFor(s);
17
+ let t = e.tagFor(u), r = e.tagFor(c);
17
18
  return n`
18
19
  <${t} class="base" exportparts="vvd-theme-alternate">
19
20
  <button class="${f}" slot="anchor">
@@ -24,6 +25,6 @@ var f = (e) => o("control"), p = i("contextual-help", d, (e) => {
24
25
  <slot></slot>
25
26
  </${t}>
26
27
  `;
27
- }, [c, l], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" }), m = e(p);
28
+ }, [s, l], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" }), m = e(p);
28
29
  //#endregion
29
30
  export { m as n, p as t };
@@ -1,4 +1,4 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./definition3.cjs`),c=require(`./affix.cjs`),l=require(`./delegates-aria.cjs`),u=require(`./form-associated.cjs`),d=require(`./render-in-light-dom.cjs`),f=require(`./mixins.cjs`),p=require(`./definition11.cjs`),m=require(`./form-element.cjs`),h=require(`./char-count.cjs`),g=require(`./with-contextual-help.cjs`),_=require(`./with-error-text.cjs`),v=require(`./with-success-text.cjs`),y=require(`./text-field.cjs`);var b={email:`email`,password:`password`,tel:`tel`,text:`text`,url:`url`},x=new e.w([`
1
+ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./definition3.cjs`),c=require(`./affix.cjs`),l=require(`./delegates-aria.cjs`),u=require(`./form-associated.cjs`),d=require(`./render-in-light-dom.cjs`),f=require(`./mixins.cjs`),p=require(`./definition11.cjs`),m=require(`./form-element.cjs`),h=require(`./char-count.cjs`),g=require(`./with-contextual-help.cjs`),_=require(`./with-error-text.cjs`),v=require(`./with-success-text.cjs`),y=require(`./text-field.cjs`);var b={email:`email`,password:`password`,search:`search`,tel:`tel`,text:`text`,url:`url`},x=new e.w([`
2
2
  ._vvd-3-text-field-safari-workaround::placeholder {
3
3
  opacity: 1 !important;
4
4
  -webkit-text-fill-color: var(--_low-ink-color) !important;
@@ -22,6 +22,7 @@ import { t as j } from "./text-field.js";
22
22
  var M = {
23
23
  email: "email",
24
24
  password: "password",
25
+ search: "search",
25
26
  tel: "tel",
26
27
  text: "text",
27
28
  url: "url"
@@ -1,19 +1,19 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./definition3.cjs`),s=require(`./delegates-aria.cjs`),c=require(`./form-associated.cjs`),l=require(`./mixins.cjs`),u=require(`./form-element.cjs`),d=require(`./with-error-text.cjs`),f=require(`./with-success-text.cjs`);var p=`:host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@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-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.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{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}`,m=class extends s.t(l.t(d.t(f.t(u.t(c.t(e.t)))))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}constructor(){super(),this.tabindex=null,this.proxy=document.createElement(`input`),this.initialValue=`on`,this.defaultSlottedNodes=[],this.indeterminate=!1,this.keypressHandler=e=>{if(e.target instanceof HTMLAnchorElement)return!0;if(!this.disabled&&!this.readOnly)switch(e.key){case` `:this.indeterminate&&=!1,this.checked=!this.checked;break}return!1},this.clickHandler=e=>e.target instanceof HTMLAnchorElement?!0:(!this.disabled&&!this.readOnly&&(this.indeterminate&&=!1,this.checked=!this.checked),!1),this.proxy.setAttribute(`type`,`checkbox`)}ariaCheckedChanged(e,t){super.ariaCheckedChanged(e,t),this.ariaChecked===`mixed`?this.indeterminate=!0:(this.indeterminate=!1,this.checked=this.ariaChecked===`true`)}checkedChanged(e,t){super.checkedChanged(e,t),this.ariaChecked=t?`true`:`false`,e!==void 0&&this.$emit(`input`)}};i.t([e.m({attribute:`tabindex`})],m.prototype,`tabindex`,void 0),i.t([e.m],m.prototype,`connotation`,void 0),i.t([e.m({attribute:`readonly`,mode:`boolean`})],m.prototype,`readOnly`,void 0),i.t([e.A],m.prototype,`defaultSlottedNodes`,void 0),i.t([e.m({attribute:`indeterminate`,mode:`boolean`})],m.prototype,`indeterminate`,void 0),i.t([e.A],m.prototype,`slottedContent`,void 0);var h=e.u(`checkbox`,m,i=>{let c=i.tagFor(o.r);return e.p`<template>
1
+ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./definition3.cjs`),s=require(`./icon.cjs`),c=require(`./delegates-aria.cjs`),l=require(`./form-associated.cjs`),u=require(`./mixins.cjs`),d=require(`./form-element.cjs`),f=require(`./with-error-text.cjs`),p=require(`./with-success-text.cjs`);var m=`:host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@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-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.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{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}`,h=class extends c.t(u.t(f.t(p.t(d.t(l.t(e.t)))))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}constructor(){super(),this.tabindex=null,this.proxy=document.createElement(`input`),this.initialValue=`on`,this.defaultSlottedNodes=[],this.indeterminate=!1,this.keypressHandler=e=>{if(e.target instanceof HTMLAnchorElement)return!0;if(!this.disabled&&!this.readOnly)switch(e.key){case` `:this.indeterminate&&=!1,this.checked=!this.checked;break}return!1},this.clickHandler=e=>e.target instanceof HTMLAnchorElement?!0:(!this.disabled&&!this.readOnly&&(this.indeterminate&&=!1,this.checked=!this.checked),!1),this.proxy.setAttribute(`type`,`checkbox`)}ariaCheckedChanged(e,t){super.ariaCheckedChanged(e,t),this.ariaChecked===`mixed`?this.indeterminate=!0:(this.indeterminate=!1,this.checked=this.ariaChecked===`true`)}checkedChanged(e,t){super.checkedChanged(e,t),this.ariaChecked=t?`true`:`false`,e!==void 0&&this.$emit(`input`)}};i.t([e.m({attribute:`tabindex`})],h.prototype,`tabindex`,void 0),i.t([e.m],h.prototype,`connotation`,void 0),i.t([e.m({attribute:`readonly`,mode:`boolean`})],h.prototype,`readOnly`,void 0),i.t([e.A],h.prototype,`defaultSlottedNodes`,void 0),i.t([e.m({attribute:`indeterminate`,mode:`boolean`})],h.prototype,`indeterminate`,void 0),i.t([e.A],h.prototype,`slottedContent`,void 0);var g=e.u(`checkbox`,h,i=>{let o=i.tagFor(s.t);return e.p`<template>
2
2
  <div
3
3
  ${n.t(`control`)}
4
4
  class="${e=>a.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`readonly`,e.readOnly],[`checked`,e.checked||e.indeterminate],[`disabled`,e.disabled],[`error connotation-alert`,!!e.errorValidationMessage],[`success connotation-success`,!!e.successText],[`hide-label`,!e.label&&!e.slottedContent?.length])}"
5
- ${s.n({role:`checkbox`,ariaChecked:e=>e.indeterminate?`mixed`:e.checked,ariaRequired:e=>e.required,ariaDisabled:e=>e.disabled,ariaReadOnly:e=>e.readOnly,ariaDescribedBy:e=>e._feedbackDescribedBy})}
5
+ ${c.n({role:`checkbox`,ariaChecked:e=>e.indeterminate?`mixed`:e.checked,ariaRequired:e=>e.required,ariaDisabled:e=>e.disabled,ariaReadOnly:e=>e.readOnly,ariaDescribedBy:e=>e._feedbackDescribedBy})}
6
6
  tabindex="${e=>e.tabindex===null?e.disabled?null:0:e.tabindex}"
7
7
  @keypress="${(e,t)=>e.keypressHandler(t.event)}"
8
8
  @click="${(e,t)=>e.clickHandler(t.event)}"
9
9
  >
10
10
  <div class="control">
11
- ${r.t(e=>e.checked&&!e.indeterminate,e.p`<${c} name="check-solid" class="icon"></${c}>`)}
12
- ${r.t(e=>e.indeterminate,e.p`<${c} name="minus-solid" class="icon"></${c}>`)}
11
+ ${r.t(e=>e.checked&&!e.indeterminate,e.p`<${o} name="check-solid" class="icon"></${o}>`)}
12
+ ${r.t(e=>e.indeterminate,e.p`<${o} name="minus-solid" class="icon"></${o}>`)}
13
13
  </div>
14
14
  ${e.p`<label
15
15
  >${e=>e.label}<slot ${t.t(`slottedContent`)}></slot
16
16
  ></label>`}
17
17
  </div>
18
18
  ${e=>e._getFeedbackTemplate(i)}
19
- </template>`},[o.t,l.r],{styles:p,shadowOptions:{delegatesFocus:!0}}),g=e.d(h);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});
19
+ </template>`},[o.t,u.r],{styles:m,shadowOptions:{delegatesFocus:!0}}),_=e.d(g);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}});
@@ -4,7 +4,8 @@ import { t as s } from "./ref.js";
4
4
  import { t as c } from "./when.js";
5
5
  import { t as l } from "./decorate.js";
6
6
  import { t as u } from "./class-names.js";
7
- import { r as d, t as f } from "./definition3.js";
7
+ import { t as d } from "./definition3.js";
8
+ import { t as f } from "./icon.js";
8
9
  import { n as p, t as m } from "./delegates-aria.js";
9
10
  import { t as h } from "./form-associated.js";
10
11
  import { r as g, t as _ } from "./mixins.js";
@@ -45,7 +46,7 @@ l([n({ attribute: "tabindex" })], S.prototype, "tabindex", void 0), l([n], S.pro
45
46
  //#endregion
46
47
  //#region src/lib/checkbox/definition.ts
47
48
  var C = a("checkbox", S, (e) => {
48
- let t = e.tagFor(d);
49
+ let t = e.tagFor(f);
49
50
  return r`<template>
50
51
  <div
51
52
  ${s("control")}
@@ -72,7 +73,7 @@ var C = a("checkbox", S, (e) => {
72
73
  </div>
73
74
  ${(t) => t._getFeedbackTemplate(e)}
74
75
  </template>`;
75
- }, [f, g], {
76
+ }, [d, g], {
76
77
  styles: x,
77
78
  shadowOptions: { delegatesFocus: !0 }
78
79
  }), w = t(C);
@@ -1,21 +1,21 @@
1
- const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./dom.cjs`),a=require(`./definition3.cjs`),o=require(`./affix.cjs`),s=require(`./host-semantics.cjs`);function c(e){return i.t(e)&&(e.getAttribute(`role`)===`option`||e instanceof HTMLOptionElement||e instanceof l)}var l=class extends s.t(o.n(e.t)){defaultSelectedChanged(){this.dirtySelected||(this.selected=this.defaultSelected,this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.defaultSelected)),this.proxy instanceof HTMLOptionElement&&(this.proxy.defaultSelected=this.defaultSelected)}disabledChanged(){this.proxy instanceof HTMLOptionElement&&(this.proxy.disabled=this.disabled)}get selectedAttribute(){return this.defaultSelected}set selectedAttribute(e){this.defaultSelected=e}selectedChanged(){this.dirtySelected||=!0,this.proxy instanceof HTMLOptionElement&&(this.proxy.selected=this.selected)}valueChanged(){if(typeof this.value!=`string`){this.value=``;return}this.proxy instanceof HTMLOptionElement&&(this.proxy.value=this.value)}get label(){return this._label??this.text}set label(e){this._label=e}set text(e){this._text=e}get text(){return this._text??``}_getAccessibleName(){return this.ariaLabel||`${this.text}${this.textSecondary?` ${this.textSecondary}`:``}`}get form(){return null}get _hasMatchedText(){return!!(this.matchedText??this._vvdSearchText)}get _matchedRange(){let e=this.matchedText??this._vvdSearchText;if(e){let t=this.text.toLowerCase().indexOf(e.toLowerCase());return t===-1?{from:0,to:0}:{from:t,to:t+e.length}}return{from:0,to:0}}constructor(e,t,n,r){super(),this.defaultSelected=!1,this.dirtySelected=!1,this.value=``,this._highlighted=!1,this._displayCheckmark=!1,this._vvdSearchText=``,this._isNotMatching=!1,e&&(this.text=e),t&&(this.value=t),n&&(this.defaultSelected=n),r&&(this.selected=r),this.proxy=new Option(this.text,this.value,this.defaultSelected,this.selected),this.proxy.disabled=this.disabled}connectedCallback(){super.connectedCallback(),this.dirtySelected||=(this.selected=this.defaultSelected,!1)}};n.t([e.m({converter:{fromView:e=>{if(e===!0||e===`true`)return!0;if(e===!1||e===`false`)return!1},toView:e=>e}})],l.prototype,`checked`,void 0),n.t([e.m({attribute:`selected`,mode:`boolean`})],l.prototype,`defaultSelected`,void 0),n.t([e.m({mode:`boolean`})],l.prototype,`disabled`,void 0),n.t([e.m({attribute:`current-selected`,mode:`boolean`})],l.prototype,`selected`,void 0),n.t([e.m({attribute:`value`})],l.prototype,`value`,void 0),n.t([e.m({attribute:`label`})],l.prototype,`_label`,void 0),n.t([e.m({attribute:`text`})],l.prototype,`_text`,void 0),n.t([e.m({attribute:`text-secondary`})],l.prototype,`textSecondary`,void 0),n.t([e.A],l.prototype,`_highlighted`,void 0),n.t([e.A],l.prototype,`_displayCheckmark`,void 0),n.t([e.m({attribute:`matched-text`})],l.prototype,`matchedText`,void 0),n.t([e.A],l.prototype,`_vvdSearchText`,void 0),n.t([e.j],l.prototype,`_hasMatchedText`,null),n.t([e.A],l.prototype,`_isNotMatching`,void 0),n.t([e.j],l.prototype,`_matchedRange`,null),n.t([e.m],l.prototype,`connotation`,void 0),n.t([e.m({attribute:`tag-connotation`})],l.prototype,`tagConnotation`,void 0);function u(){return e.p`${t.t(e=>e.text||e.textSecondary,e.p`<span class="text">
1
+ const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./class-names.cjs`),r=require(`./definition3.cjs`),i=require(`./icon.cjs`),a=require(`./affix.cjs`),o=require(`./host-semantics.cjs`),s=require(`./option.cjs`);function c(){return e.p`${t.t(e=>e.text||e.textSecondary,e.p`<span class="text">
2
2
  ${t.t(e=>e.text,e.p`<span class="text-primary">
3
3
  ${t.t(e=>e._hasMatchedText,e.p`${e=>e.text.slice(0,e._matchedRange.from)}<span class="match"
4
4
  >${e=>e.text.slice(e._matchedRange.from,e._matchedRange.to)}</span
5
5
  >`)}${e=>e.text.slice(e._matchedRange.to)}
6
6
  </span>`)}
7
7
  ${t.t(e=>e.textSecondary,e.p`<span class="text-secondary">${e=>e.textSecondary}</span>`)}
8
- </span>`)}`}var d=e.u(`option`,l,n=>{let i=o.a(n),c=n.tagFor(a.r);return e.p`
8
+ </span>`)}`}var l=e.u(`option`,s.t,r=>{let s=a.a(r),l=r.tagFor(i.t);return e.p`
9
9
  <template
10
- ${s.n({role:`option`,ariaChecked:e=>e.checked,ariaSelected:e=>e.selected,ariaDisabled:e=>e.disabled})}
10
+ ${o.n({role:`option`,ariaChecked:e=>e.checked,ariaSelected:e=>e.selected,ariaDisabled:e=>e.disabled})}
11
11
  style="${e=>e._isNotMatching?`display: none`:``}"
12
12
  >
13
13
  <div
14
- class="${e=>r.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`disabled`,e.disabled],[`selected`,e.selected],[`hover`,e._highlighted],[`highlighted`,e._highlighted],[`active`,!!e.checked],[`icon`,!!e.icon],[`two-lines`,!!e.text?.length&&!!e.textSecondary?.length])}"
14
+ class="${e=>n.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`disabled`,e.disabled],[`selected`,e.selected],[`highlighted`,e._highlighted],[`active`,!!e.checked],[`icon`,!!e.icon],[`two-lines`,!!e.text?.length&&!!e.textSecondary?.length])}"
15
15
  >
16
- ${e=>i(e.icon,o.i.Slot)} ${u()}
16
+ ${e=>s(e.icon,a.i.Slot)} ${c()}
17
17
  <slot name="trailing-meta"></slot>
18
- ${t.t(e=>e._displayCheckmark&&e.selected,e.p`<${c} class="checkmark" name="check-line"></${c}>`)}
18
+ ${t.t(e=>e._displayCheckmark&&e.selected,e.p`<${l} class="checkmark" name="check-line"></${l}>`)}
19
19
  </div>
20
20
  </template>
21
- `},[a.t],{styles:`:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-option-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-option-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-option-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-option-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-option-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-option-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-option-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-option-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-option-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-option-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-option-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-option-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-option-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-option-accent-dim,var(--vvd-color-neutral-200))}.base{--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)),.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.active,.base.highlighted{--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([current-selected]) .base:not(.highlighted,.active){--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-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:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}`}),f=e.d(d);Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});
21
+ `},[r.t],{styles:`:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-option-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-option-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-option-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-option-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-option-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-option-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-option-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-option-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-option-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-firm:var(--vvd-option-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-option-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-option-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-pale:var(--vvd-option-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-dim:var(--vvd-option-accent-dim,var(--vvd-color-neutral-200))}.base{--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)),.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-dim);--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text,var(--_appearance-color-text));font:var(--vvd-typography-base);align-items:center;gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2)}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 4)}.base.highlighted{--focus-stroke-gap-color:transparent;box-shadow:var(--_suppressable-focus-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:var(--_suppressable-focus-outline,1px solid var(--focus-stroke-color,var(--vvd-color-cta-500)));outline-offset:var(--_suppressable-focus-outline-offset,calc(-1px - var(--focus-inset,0px)))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}`}),u=e.d(l);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return l}});