@vonage/vivid 5.5.0 → 5.6.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 (297) hide show
  1. package/LICENSE.md +201 -0
  2. package/accordion/definition.cjs +5 -0
  3. package/accordion/definition.js +5 -0
  4. package/accordion/index.cjs +1 -1
  5. package/accordion/index.js +14 -3
  6. package/alert/definition.cjs +4 -12
  7. package/alert/definition.js +5 -13
  8. package/alert/index.cjs +11 -11
  9. package/alert/index.js +33 -37
  10. package/audio-player/definition.cjs +4 -0
  11. package/audio-player/definition.js +4 -0
  12. package/audio-player/index.cjs +1 -1
  13. package/audio-player/index.js +8 -2
  14. package/banner/definition.cjs +2 -4
  15. package/banner/definition.js +2 -4
  16. package/banner/index.cjs +2 -2
  17. package/banner/index.js +1 -1
  18. package/breadcrumb/definition.cjs +1 -0
  19. package/breadcrumb/definition.js +1 -0
  20. package/breadcrumb/index.cjs +1 -1
  21. package/breadcrumb/index.js +1 -0
  22. package/bundled/affix.js +1 -1
  23. package/bundled/anchored.cjs +1 -1
  24. package/bundled/anchored.js +6 -6
  25. package/bundled/attribute-binding-behaviour.cjs +1 -1
  26. package/bundled/attribute-binding-behaviour.js +3 -1
  27. package/bundled/base-color-picker.cjs +1 -1
  28. package/bundled/base-color-picker.js +9 -3
  29. package/bundled/base-progress.cjs +1 -1
  30. package/bundled/base-progress.js +3 -0
  31. package/bundled/button.cjs +1 -1
  32. package/bundled/button.js +14 -10
  33. package/bundled/calendar-picker.template.cjs +1 -1
  34. package/bundled/calendar-picker.template.js +2 -0
  35. package/bundled/definition10.cjs +7 -7
  36. package/bundled/definition10.js +27 -17
  37. package/bundled/definition11.cjs +2 -2
  38. package/bundled/definition11.js +5 -5
  39. package/bundled/definition12.cjs +1 -1
  40. package/bundled/definition12.js +1 -0
  41. package/bundled/definition17.cjs +1 -1
  42. package/bundled/definition17.js +4 -1
  43. package/bundled/definition18.cjs +1 -1
  44. package/bundled/definition18.js +13 -2
  45. package/bundled/definition19.cjs +6 -6
  46. package/bundled/definition19.js +68 -33
  47. package/bundled/definition2.cjs +8 -9
  48. package/bundled/definition2.js +67 -75
  49. package/bundled/definition22.cjs +1 -1
  50. package/bundled/definition22.js +1 -0
  51. package/bundled/definition3.cjs +1 -1
  52. package/bundled/definition3.js +1 -0
  53. package/bundled/definition5.cjs +1 -1
  54. package/bundled/definition5.js +9 -3
  55. package/bundled/definition6.cjs +1 -1
  56. package/bundled/definition6.js +1 -0
  57. package/bundled/definition7.cjs +1 -1
  58. package/bundled/definition7.js +7 -4
  59. package/bundled/definition8.cjs +1 -1
  60. package/bundled/definition8.js +1 -0
  61. package/bundled/definition9.cjs +6 -6
  62. package/bundled/definition9.js +545 -488
  63. package/bundled/delegates-aria.cjs +1 -1
  64. package/bundled/delegates-aria.js +3 -1
  65. package/bundled/form-associated.cjs +1 -1
  66. package/bundled/form-associated.js +11 -3
  67. package/bundled/host-semantics.js +4 -4
  68. package/bundled/listbox.cjs +1 -1
  69. package/bundled/listbox.js +21 -3
  70. package/bundled/localized.cjs +1 -1
  71. package/bundled/localized.js +137 -67
  72. package/bundled/mixins.cjs +4 -4
  73. package/bundled/mixins.js +10 -7
  74. package/bundled/picker-field.template.cjs +1 -1
  75. package/bundled/picker-field.template.js +1 -0
  76. package/bundled/scrollIntoView.cjs +1 -1
  77. package/bundled/scrollIntoView.js +4 -1
  78. package/bundled/text-field.cjs +1 -1
  79. package/bundled/text-field.js +1 -1
  80. package/bundled/time-selection-picker.template.cjs +2 -2
  81. package/bundled/time-selection-picker.template.js +3 -0
  82. package/bundled/vivid-element.cjs +4 -4
  83. package/bundled/vivid-element.js +529 -492
  84. package/calendar/definition.cjs +2 -0
  85. package/calendar/definition.js +2 -0
  86. package/calendar/index.cjs +1 -1
  87. package/calendar/index.js +2 -0
  88. package/checkbox/definition.cjs +1 -0
  89. package/checkbox/definition.js +1 -0
  90. package/color-picker/definition.cjs +5 -0
  91. package/color-picker/definition.js +5 -0
  92. package/color-picker/index.cjs +1 -1
  93. package/color-picker/index.js +5 -0
  94. package/combobox/definition.cjs +17 -6
  95. package/combobox/definition.js +17 -6
  96. package/combobox/index.cjs +14 -9
  97. package/combobox/index.js +53 -41
  98. package/custom-elements.json +6985 -542
  99. package/data-grid/definition.cjs +105 -7
  100. package/data-grid/definition.js +105 -7
  101. package/data-grid/index.cjs +52 -38
  102. package/data-grid/index.js +313 -242
  103. package/date-range-picker/definition.cjs +2 -0
  104. package/date-range-picker/definition.js +2 -0
  105. package/date-range-picker/index.cjs +1 -1
  106. package/date-range-picker/index.js +5 -1
  107. package/dial-pad/definition.cjs +9 -0
  108. package/dial-pad/definition.js +9 -0
  109. package/dial-pad/index.cjs +2 -2
  110. package/dial-pad/index.js +36 -12
  111. package/dialog/definition.cjs +1 -0
  112. package/dialog/definition.js +1 -0
  113. package/dialog/index.cjs +1 -1
  114. package/dialog/index.js +1 -0
  115. package/fab/definition.cjs +1 -0
  116. package/fab/definition.js +1 -0
  117. package/fab/index.cjs +1 -1
  118. package/fab/index.js +1 -0
  119. package/file-picker/definition.cjs +7 -2
  120. package/file-picker/definition.js +7 -2
  121. package/file-picker/index.cjs +6 -6
  122. package/file-picker/index.js +82 -73
  123. package/icon/definition.cjs +12 -21
  124. package/icon/definition.js +13 -22
  125. package/index.cjs +21 -0
  126. package/index.js +1 -1
  127. package/lib/data-grid/locale.d.ts +5 -0
  128. package/lib/date-picker/date-picker.d.ts +38 -38
  129. package/lib/date-range-picker/date-range-picker.d.ts +20 -20
  130. package/lib/date-time-picker/date-time-picker.d.ts +40 -40
  131. package/lib/icon/icon.d.ts +0 -1
  132. package/lib/menu/menu.d.ts +4 -4
  133. package/lib/rich-text-editor/definition.d.ts +3 -2
  134. package/lib/rich-text-editor/locale.d.ts +29 -3
  135. package/lib/rich-text-editor/popover.d.ts +19 -0
  136. package/lib/rich-text-editor/rich-text-editor.d.ts +16 -45
  137. package/lib/rich-text-editor/rich-text-editor.template.d.ts +2 -2
  138. package/lib/rich-text-editor/rte/config.d.ts +18 -0
  139. package/lib/rich-text-editor/rte/document.d.ts +28 -0
  140. package/lib/rich-text-editor/rte/exports.d.ts +23 -0
  141. package/lib/rich-text-editor/rte/feature.d.ts +46 -0
  142. package/lib/rich-text-editor/rte/features/internal/basic-text-blocks.d.ts +33 -0
  143. package/lib/rich-text-editor/rte/features/internal/foreign-html.d.ts +11 -0
  144. package/lib/rich-text-editor/rte/features/internal/history.d.ts +10 -0
  145. package/lib/rich-text-editor/rte/features/internal/text-style.d.ts +18 -0
  146. package/lib/rich-text-editor/rte/html-parser.d.ts +24 -0
  147. package/lib/rich-text-editor/rte/html-serializer.d.ts +30 -0
  148. package/lib/rich-text-editor/rte/instance.d.ts +57 -0
  149. package/lib/rich-text-editor/rte/utils/default-textblock.d.ts +2 -0
  150. package/lib/rich-text-editor/rte/utils/impl.d.ts +1 -0
  151. package/lib/rich-text-editor/rte/utils/textblock-attrs.d.ts +29 -0
  152. package/lib/rich-text-editor/rte/utils/textblock-marks.d.ts +10 -0
  153. package/lib/rich-text-editor/rte/utils/ui.d.ts +109 -0
  154. package/lib/simple-color-picker/simple-color-picker.d.ts +4 -4
  155. package/lib/text-area/text-area.d.ts +1 -1
  156. package/lib/text-field/text-field.d.ts +1 -1
  157. package/lib/time-picker/time-picker.d.ts +20 -20
  158. package/lib/toggletip/toggletip.d.ts +4 -4
  159. package/lib/tooltip/tooltip.d.ts +4 -4
  160. package/locales/de-DE.cjs +42 -4
  161. package/locales/de-DE.js +42 -4
  162. package/locales/en-GB.cjs +43 -5
  163. package/locales/en-GB.js +43 -5
  164. package/locales/en-US.cjs +43 -5
  165. package/locales/en-US.js +43 -5
  166. package/locales/ja-JP.cjs +43 -5
  167. package/locales/ja-JP.js +43 -5
  168. package/locales/zh-CN.cjs +43 -5
  169. package/locales/zh-CN.js +43 -5
  170. package/menu/definition.cjs +1 -0
  171. package/menu/definition.js +1 -0
  172. package/number-field/definition.cjs +5 -3
  173. package/number-field/definition.js +5 -3
  174. package/number-field/index.cjs +5 -3
  175. package/number-field/index.js +31 -29
  176. package/package.json +76 -62
  177. package/pagination/definition.cjs +2 -0
  178. package/pagination/definition.js +2 -0
  179. package/pagination/index.cjs +1 -1
  180. package/pagination/index.js +2 -0
  181. package/radio/definition.cjs +4 -0
  182. package/radio/definition.js +4 -0
  183. package/range-slider/definition.cjs +2 -1
  184. package/range-slider/definition.js +2 -1
  185. package/range-slider/index.cjs +1 -1
  186. package/range-slider/index.js +3 -1
  187. package/rich-text-editor/definition.cjs +17942 -1074
  188. package/rich-text-editor/definition.js +17926 -1079
  189. package/rich-text-editor/index.cjs +29 -130
  190. package/rich-text-editor/index.js +5565 -2474
  191. package/searchable-select/definition.cjs +6 -2
  192. package/searchable-select/definition.js +6 -2
  193. package/searchable-select/index.cjs +1 -1
  194. package/searchable-select/index.js +11 -7
  195. package/select/definition.cjs +17 -2
  196. package/select/definition.js +17 -2
  197. package/shared/patterns/anchored.d.ts +8 -8
  198. package/shared/patterns/char-count/char-count.d.ts +1 -1
  199. package/shared/patterns/localized.d.ts +386 -0
  200. package/shared/picker-field/mixins/calendar-picker.d.ts +10 -10
  201. package/shared/picker-field/mixins/calendar-picker.template.d.ts +10 -10
  202. package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +20 -20
  203. package/shared/picker-field/mixins/single-date-picker.d.ts +28 -28
  204. package/shared/picker-field/mixins/single-value-picker.d.ts +8 -8
  205. package/shared/picker-field/mixins/time-selection-picker.d.ts +20 -20
  206. package/shared/picker-field/mixins/time-selection-picker.template.d.ts +20 -20
  207. package/shared/utils/promise.d.ts +7 -0
  208. package/simple-color-picker/definition.cjs +3 -0
  209. package/simple-color-picker/definition.js +3 -0
  210. package/simple-color-picker/index.cjs +1 -1
  211. package/simple-color-picker/index.js +3 -0
  212. package/slider/definition.cjs +7 -1
  213. package/slider/definition.js +7 -1
  214. package/styles/core/all.css +5 -1
  215. package/styles/core/theme.css +5 -1
  216. package/styles/core/typography.css +1 -1
  217. package/styles/tokens/theme-dark.css +4 -4
  218. package/styles/tokens/theme-light.css +4 -4
  219. package/styles/tokens/vivid-2-compat.css +1 -1
  220. package/switch/definition.cjs +1 -0
  221. package/switch/definition.js +1 -0
  222. package/switch/index.cjs +1 -1
  223. package/switch/index.js +1 -0
  224. package/tabs/definition.cjs +2 -0
  225. package/tabs/definition.js +2 -0
  226. package/tabs/index.cjs +1 -1
  227. package/tabs/index.js +2 -0
  228. package/text-area/definition.cjs +13 -7
  229. package/text-area/definition.js +13 -7
  230. package/text-area/index.cjs +6 -6
  231. package/text-area/index.js +20 -14
  232. package/text-field/definition.cjs +16 -6
  233. package/text-field/definition.js +16 -6
  234. package/toggletip/definition.cjs +5 -1
  235. package/toggletip/definition.js +5 -1
  236. package/tooltip/definition.cjs +4 -1
  237. package/tooltip/definition.js +4 -1
  238. package/tree-view/definition.cjs +28 -6
  239. package/tree-view/definition.js +28 -6
  240. package/tree-view/index.cjs +1 -1
  241. package/tree-view/index.js +28 -6
  242. package/unbundled/_commonjsHelpers.cjs +0 -26
  243. package/unbundled/_commonjsHelpers.js +1 -26
  244. package/unbundled/attribute-binding-behaviour.cjs +1 -0
  245. package/unbundled/attribute-binding-behaviour.js +1 -0
  246. package/unbundled/base-color-picker.cjs +9 -3
  247. package/unbundled/base-color-picker.js +9 -3
  248. package/unbundled/base-progress.cjs +3 -0
  249. package/unbundled/base-progress.js +3 -0
  250. package/unbundled/button.cjs +14 -10
  251. package/unbundled/button.js +14 -10
  252. package/unbundled/calendar-picker.template.cjs +2 -0
  253. package/unbundled/calendar-picker.template.js +2 -0
  254. package/unbundled/definition.cjs +1 -0
  255. package/unbundled/definition.js +1 -0
  256. package/unbundled/definition2.cjs +4 -1
  257. package/unbundled/definition2.js +4 -1
  258. package/unbundled/definition3.cjs +1 -0
  259. package/unbundled/definition3.js +1 -0
  260. package/unbundled/definition4.cjs +1 -0
  261. package/unbundled/definition4.js +1 -0
  262. package/unbundled/definition5.cjs +3 -2
  263. package/unbundled/definition5.js +4 -3
  264. package/unbundled/delegates-aria.cjs +1 -0
  265. package/unbundled/delegates-aria.js +1 -0
  266. package/unbundled/form-associated.cjs +4 -0
  267. package/unbundled/form-associated.js +4 -0
  268. package/unbundled/listbox.cjs +16 -1
  269. package/unbundled/listbox.js +16 -1
  270. package/unbundled/localized.cjs +36 -0
  271. package/unbundled/localized.js +37 -2
  272. package/unbundled/mixins.cjs +2 -0
  273. package/unbundled/mixins.js +2 -0
  274. package/unbundled/picker-field.template.cjs +1 -0
  275. package/unbundled/picker-field.template.js +1 -0
  276. package/unbundled/scrollIntoView.cjs +1 -0
  277. package/unbundled/scrollIntoView.js +1 -0
  278. package/unbundled/text-field.cjs +1 -1
  279. package/unbundled/text-field.js +1 -1
  280. package/unbundled/time-selection-picker.template.cjs +3 -0
  281. package/unbundled/time-selection-picker.template.js +3 -0
  282. package/unbundled/vivid-element.cjs +1 -1
  283. package/unbundled/vivid-element.js +1 -1
  284. package/video-player/definition.cjs +54 -44
  285. package/video-player/definition.js +50 -40
  286. package/video-player/index.cjs +28 -28
  287. package/video-player/index.js +1448 -1442
  288. package/vivid.api.json +6463 -6099
  289. package/lib/rich-text-editor/facades/prose-mirror-vivid.schema.d.ts +0 -4
  290. package/lib/rich-text-editor/facades/vivid-prose-mirror.facade.d.ts +0 -18
  291. package/lib/rich-text-editor/image-placeholder/definition.d.ts +0 -2
  292. package/lib/rich-text-editor/image-placeholder/image-placeholder.d.ts +0 -7
  293. package/lib/rich-text-editor/image-placeholder/image-placeholder.template.d.ts +0 -4
  294. package/lib/rich-text-editor/menubar/consts.d.ts +0 -18
  295. package/lib/rich-text-editor/menubar/definition.d.ts +0 -2
  296. package/lib/rich-text-editor/menubar/menubar.d.ts +0 -386
  297. package/lib/rich-text-editor/menubar/menubar.template.d.ts +0 -4
package/styles/tokens/theme-dark.css CHANGED
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 28 Oct 2025 11:07:11 GMT
3
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Tue, 28 Oct 2025 11:07:11 GMT
7
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Tue, 28 Oct 2025 11:07:11 GMT
11
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Tue, 28 Oct 2025 11:07:11 GMT
15
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
package/styles/tokens/theme-light.css CHANGED
@@ -1,18 +1,18 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 28 Oct 2025 11:07:11 GMT
3
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
4
4
  */
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Tue, 28 Oct 2025 11:07:11 GMT
7
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
8
8
  */
9
9
  /**
10
10
  * Do not edit directly
11
- * Generated on Tue, 28 Oct 2025 11:07:11 GMT
11
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
12
12
  */
13
13
  /**
14
14
  * Do not edit directly
15
- * Generated on Tue, 28 Oct 2025 11:07:11 GMT
15
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
16
16
  */
17
17
  @property --vvd-size-density {
18
18
  syntax: "<integer>";
package/styles/tokens/vivid-2-compat.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Tue, 28 Oct 2025 11:07:11 GMT
3
+ * Generated on Mon, 08 Dec 2025 18:08:07 GMT
4
4
  */
5
5
  .vvd-root, ::part(vvd-root),
6
6
  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
package/switch/definition.cjs CHANGED
@@ -59,6 +59,7 @@ class Switch extends delegatesAria.DelegatesAria(
59
59
  * @internal
60
60
  */
61
61
  readOnlyChanged() {
62
+ /* v8 ignore if -- @preserve */
62
63
  if (this.proxy instanceof HTMLInputElement) {
63
64
  this.proxy.readOnly = this.readOnly;
64
65
  }
package/switch/definition.js CHANGED
@@ -55,6 +55,7 @@ class Switch extends DelegatesAria(
55
55
  * @internal
56
56
  */
57
57
  readOnlyChanged() {
58
+ /* v8 ignore if -- @preserve */
58
59
  if (this.proxy instanceof HTMLInputElement) {
59
60
  this.proxy.readOnly = this.readOnly;
60
61
  }
package/switch/index.cjs CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";const d=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),s=require("../bundled/delegates-aria.cjs"),p=require("../bundled/form-associated.cjs"),v=require("../bundled/key-codes.cjs"),h=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs"),m=':host(.disabled){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-fierce: var(--vvd-switch-cta-fierce, var(--vvd-color-cta-700))}.control.connotation-alert{--_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-fierce: var(--vvd-switch-alert-fierce, var(--vvd-color-alert-700))}.control.connotation-success{--_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));--_connotation-color-fierce: var(--vvd-switch-success-fierce, var(--vvd-color-success-700))}.control.connotation-announcement{--_connotation-color-primary-text: var(--vvd-switch-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-increment: var(--vvd-switch-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-switch-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-intermediate: var(--vvd-switch-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-fierce: var(--vvd-switch-announcement-fierce, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-alert,.connotation-success,.connotation-announcement){--_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-fierce: var(--vvd-switch-accent-fierce, var(--vvd-color-neutral-700))}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.control{display:inline-flex;border-radius:16px;gap:8px;outline:none}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8) ;display:flex;box-sizing:border-box;flex-shrink:0;align-items:center;border-radius:40px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.control:focus-visible .switch{position:relative}.control:focus-visible .switch:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;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));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 6px}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);border-radius:inherit;block-size:var(--_switch-checked-indicator-size);inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';var _=Object.defineProperty,t=(o,r,i,x)=>{for(var a=void 0,n=o.length-1,l;n>=0;n--)(l=o[n])&&(a=l(r,i,a)||a);return a&&_(r,i,a),a};class c extends s.DelegatesAria(p.CheckableFormAssociated(e.VividElement)){constructor(){super(),this.proxy=document.createElement("input"),this.initialValue="on",this.keypressHandler=r=>{(r.key===v.keySpace||r.key===v.keyEnter)&&(this.checked=!this.checked)},this.clickHandler=()=>{!this.disabled&&!this.readOnly&&(this.checked=!this.checked)},this.checked=this.defaultChecked}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly),this.readOnly?this.classList.add("readonly"):this.classList.remove("readonly")}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","checkbox"),this.updateForm()}updateForm(){const r=this.checked?this.value:null;this.setFormValue(r,r)}}t([e.attr],c.prototype,"label");t([e.attr],c.prototype,"connotation");t([e.attr({attribute:"readonly",mode:"boolean"})],c.prototype,"readOnly");t([e.observable],c.prototype,"defaultSlottedNodes");const y=o=>u.classNames("control",["appearance-filled",o.checked],["checked",o.checked],["disabled",o.disabled],["readonly",o.readOnly],[`connotation-${o.connotation}`,!!o.checked&&!!o.connotation]),f=e.html`
1
+ "use strict";const d=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),s=require("../bundled/delegates-aria.cjs"),p=require("../bundled/form-associated.cjs"),v=require("../bundled/key-codes.cjs"),h=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs"),m=':host(.disabled){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-fierce: var(--vvd-switch-cta-fierce, var(--vvd-color-cta-700))}.control.connotation-alert{--_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-fierce: var(--vvd-switch-alert-fierce, var(--vvd-color-alert-700))}.control.connotation-success{--_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));--_connotation-color-fierce: var(--vvd-switch-success-fierce, var(--vvd-color-success-700))}.control.connotation-announcement{--_connotation-color-primary-text: var(--vvd-switch-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-increment: var(--vvd-switch-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-switch-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-intermediate: var(--vvd-switch-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-fierce: var(--vvd-switch-announcement-fierce, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-alert,.connotation-success,.connotation-announcement){--_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-fierce: var(--vvd-switch-accent-fierce, var(--vvd-color-neutral-700))}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.control{display:inline-flex;border-radius:16px;gap:8px;outline:none}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8) ;display:flex;box-sizing:border-box;flex-shrink:0;align-items:center;border-radius:40px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.control:focus-visible .switch{position:relative}.control:focus-visible .switch:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;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));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 6px}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);border-radius:inherit;block-size:var(--_switch-checked-indicator-size);inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';var _=Object.defineProperty,t=(o,r,i,x)=>{for(var a=void 0,n=o.length-1,l;n>=0;n--)(l=o[n])&&(a=l(r,i,a)||a);return a&&_(r,i,a),a};class c extends s.DelegatesAria(p.CheckableFormAssociated(e.VividElement)){constructor(){super(),this.proxy=document.createElement("input"),this.initialValue="on",this.keypressHandler=r=>{(r.key===v.keySpace||r.key===v.keyEnter)&&(this.checked=!this.checked)},this.clickHandler=()=>{!this.disabled&&!this.readOnly&&(this.checked=!this.checked)},this.checked=this.defaultChecked}readOnlyChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly),this.readOnly?this.classList.add("readonly"):this.classList.remove("readonly")}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type","checkbox"),this.updateForm()}updateForm(){const r=this.checked?this.value:null;this.setFormValue(r,r)}}t([e.attr],c.prototype,"label");t([e.attr],c.prototype,"connotation");t([e.attr({attribute:"readonly",mode:"boolean"})],c.prototype,"readOnly");t([e.observable],c.prototype,"defaultSlottedNodes");const y=o=>u.classNames("control",["appearance-filled",o.checked],["checked",o.checked],["disabled",o.disabled],["readonly",o.readOnly],[`connotation-${o.connotation}`,!!o.checked&&!!o.connotation]),f=e.html`
2
2
  <template>
3
3
  <div
4
4
  class="${y}"
package/switch/index.js CHANGED
@@ -26,6 +26,7 @@ class e extends m(
26
26
  * @internal
27
27
  */
28
28
  readOnlyChanged() {
29
+ /* v8 ignore if -- @preserve */
29
30
  this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly), this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
30
31
  }
31
32
  /**
package/tabs/definition.cjs CHANGED
@@ -193,6 +193,7 @@ class Tabs extends vividElement.VividElement {
193
193
  for (const [index, tab] of this._pairedTabs.entries()) {
194
194
  const panel = this.tabpanels[index];
195
195
  const isActiveTab = tab.id === this.activeid;
196
+ /* v8 ignore else -- @preserve */
196
197
  if (tab instanceof tab_definition.VwcTabElement) {
197
198
  tab.active = isActiveTab;
198
199
  }
@@ -241,6 +242,7 @@ class Tabs extends vividElement.VividElement {
241
242
  * @internal
242
243
  */
243
244
  _onActiveIndicatorTransitionend(event) {
245
+ /* v8 ignore else -- @preserve */
244
246
  if (event.propertyName === "transform") {
245
247
  this.#isTransitioningTransform = false;
246
248
  }
package/tabs/definition.js CHANGED
@@ -189,6 +189,7 @@ class Tabs extends VividElement {
189
189
  for (const [index, tab] of this._pairedTabs.entries()) {
190
190
  const panel = this.tabpanels[index];
191
191
  const isActiveTab = tab.id === this.activeid;
192
+ /* v8 ignore else -- @preserve */
192
193
  if (tab instanceof Tab) {
193
194
  tab.active = isActiveTab;
194
195
  }
@@ -237,6 +238,7 @@ class Tabs extends VividElement {
237
238
  * @internal
238
239
  */
239
240
  _onActiveIndicatorTransitionend(event) {
241
+ /* v8 ignore else -- @preserve */
240
242
  if (event.propertyName === "transform") {
241
243
  this.#isTransitioningTransform = false;
242
244
  }
package/tabs/index.cjs CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";const w=require("../bundled/definition20.cjs"),k=require("../bundled/definition21.cjs"),o=require("../bundled/vivid-element.cjs"),d=require("../bundled/key-codes.cjs"),u=require("../bundled/strings.cjs"),T=require("../bundled/numbers.cjs"),h=require("../bundled/ref.cjs"),p=require("../bundled/slotted.cjs"),_=require("../bundled/class-names.cjs"),z=':host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){block-size:var(--tabs-block-size, auto);grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:"";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{flex-direction:column;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.base.orientation-horizontal .tabs{flex-direction:row;border-bottom:1px solid var(--vvd-color-neutral-300)}.tablist{position:relative;display:grid;overflow:hidden;box-sizing:border-box;color:var(--_appearance-color-text)}.base.layout-stretch .tablist{--_tab-justify-content: center;--_tabs-tablist-column: 1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column: auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);block-size:fit-content;grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;min-block-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);grid-auto-flow:column;grid-template-rows:auto auto;inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.tablist-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{align-items:center;margin-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base.scroll .tabpanel{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;border-radius:2px;block-size:var(--_tabs-active-indicator-stroke-width);grid-area:2/1;inline-size:calc(var(--_tabs-active-tab-inline-size));inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}';var C=Object.defineProperty,l=(a,t,e,i)=>{for(var s=void 0,r=a.length-1,b;r>=0;r--)(b=a[r])&&(s=b(t,e,s)||s);return s&&C(t,e,s),s};const I="--_tabs-active-tab-inline-size",c={vertical:"vertical",horizontal:"horizontal"},$=a=>a===c.horizontal?c.vertical:c.horizontal,v=a=>a===c.horizontal?"gridColumn":"gridRow",A=a=>a===c.horizontal?"translateX":"translateY",g=a=>a===c.horizontal?"offsetLeft":"offsetTop",S=a=>a.getAttribute("aria-disabled")!=="true"&&!a.disabled&&!a.hasAttribute("hidden"),m=(a,t)=>a.length===t.length&&a.every((e,i)=>e===t[i]);class n extends o.VividElement{constructor(){super(...arguments),this.orientation=c.horizontal,this.tabs=[],this.tabpanels=[],this.#i=!1,this.#a=void 0,this.#n=t=>{const e=t.currentTarget;this._validTabs.includes(e)&&this.#r(e)},this.#l=t=>{const e=this._validTabs,i=this.activetab;if(!i)return;const[s,r]=this.orientation===c.horizontal?[d.keyArrowLeft,d.keyArrowRight]:[d.keyArrowUp,d.keyArrowDown],b={[s]:()=>e[(e.indexOf(i)-1+e.length)%e.length],[r]:()=>e[(e.indexOf(i)+1)%e.length],[d.keyHome]:()=>e[0],[d.keyEnd]:()=>e[e.length-1]};b[t.key]&&(t.preventDefault(),this.#r(b[t.key]()))},this.#t=!1,this.scrollablePanel=!1,this._actionItemsSlottedContent=[],this.activeindicator=!0}orientationChanged(){this._registerTabsChange(),this.$fastController.isConnected&&o.Updates.enqueue(()=>this.#s(!1))}tabsChanged(){for(const t of this.tabs)t.id||(t.id=`tab-${u.uniqueId()}`),t.addEventListener("click",this.#n),t.addEventListener("keydown",this.#l);this._registerTabsChange()}tabpanelsChanged(){for(const t of this.tabpanels)t.id||(t.id=`panel-${u.uniqueId()}`);this._registerTabsChange()}#d(){return m(this.tabs,this._tabsSlot.assignedNodes())&&m(this.tabpanels,this._tabPanelsSlot.assignedNodes())}get _pairedTabs(){return this.tabs.slice(0,Math.min(this.tabs.length,this.tabpanels.length))}get _validTabs(){return this._pairedTabs.filter(S)}activeidChanged(){this._registerTabsChange()}get activetab(){return this._validTabs.find(t=>t.id===this.activeid)??null}#r(t){this.activeid=t.id,t.focus(),this.$emit("change",t)}#i;_registerTabsChange(){this.#i||(this.#i=!0,window.queueMicrotask(()=>{this.$fastController.isConnected&&this.#d()&&this.#h(),this.#i=!1}))}#a;#h(){const t=this._validTabs;let e=this.activeid;if((!t.length||e&&!t.find(i=>i.id===e))&&(e=void 0),!e&&t.length&&(e=t[0].id),this.activeid!==e&&(this.activeid=e,this.$emit("change",this.activetab)),this.#v(),this.activeid!==this.#a){if(this.activetab){const i=this.#a!==void 0;this.#f(this.activetab,i),this.#s(i)}this.#a=this.activeid}else this.#s(this.#t)}#v(){for(const[t,e]of this._pairedTabs.entries()){const i=this.tabpanels[t],s=e.id===this.activeid;e instanceof w.Tab&&(e.active=s),e.setAttribute("aria-controls",i.id),e.setAttribute("tabindex",s?"0":"-1"),s&&this.connotation?e.setAttribute("connotation",this.connotation):e.removeAttribute("connotation"),e.classList.toggle("vertical",this.orientation===c.vertical),e.style[v($(this.orientation))]="",e.style[v(this.orientation)]=`${t+1}`,i.setAttribute("aria-labelledby",e.id),i.hidden=!s}}#n;#l;adjust(t){const e=this._validTabs,i=e.findIndex(r=>r.id===this.activeid);if(i===-1)return;const s=T.limit(0,e.length-1,i+t);this.#r(e[s])}#t;_onActiveIndicatorTransitionend(t){t.propertyName==="transform"&&(this.#t=!1)}#p(){this.#t=!1,this.activeIndicatorRef.classList.remove("activeIndicatorTransition")}#s(t){const e=this._pairedTabs.findIndex(x=>x.id===this.activeid);if(e===-1)return;const i=this.activeIndicatorRef,s=i[g(this.orientation)];i.style[v(this.orientation)]=`${e+1}`;const r=i[g(this.orientation)];i.style[v(this.orientation)]="";const b=r-s,y=i.style.transform,f=`${A(this.orientation)}(${b}px)`;t?(i.classList.add("activeIndicatorTransition"),y!==f&&(this.#t=!0)):this.#p(),i.style.transform=f,i.style.setProperty(I,this.tabs[e].getBoundingClientRect().width+"px")}connotationChanged(){this._registerTabsChange()}#c(){this.#b.dispatchEvent(new Event("scroll"))}#o;connectedCallback(){super.connectedCallback(),this._registerTabsChange(),requestAnimationFrame(()=>this.#c()),this.#o=new ResizeObserver(()=>{this.#s(this.#t),this.#c()}),this.#o.observe(this.#b),this.#o.observe(this.tablist)}disconnectedCallback(){super.disconnectedCallback(),this.#o.disconnect()}get#e(){return this.shadowRoot.querySelector(".tablist-wrapper")}get#b(){return this.tablist.parentElement}#f(t,e=!0){const i=this.tabs.findIndex(b=>b===t);let s=0,r=0;this.orientation===c.vertical?(i===this.tabs.length-1&&(r=this.#e.scrollHeight),i>0&&i<this.tabs.length-1&&(r=t.offsetTop-this.#e.offsetHeight/2+t.offsetHeight/2)):(i===this.tabs.length-1&&(s=this.#e.scrollWidth),i>0&&i<this.tabs.length-1&&(s=t.offsetLeft-this.#e.offsetWidth/2+t.offsetWidth/2)),this.#e.scrollTo({top:r,left:s,behavior:e?"smooth":"instant"})}}l([o.attr],n.prototype,"orientation");l([o.observable],n.prototype,"tabs");l([o.observable],n.prototype,"tabpanels");l([o.attr],n.prototype,"activeid");l([o.observable],n.prototype,"activeIndicatorRef");l([o.observable],n.prototype,"tablist");l([o.attr],n.prototype,"connotation");l([o.attr],n.prototype,"gutters");l([o.attr({mode:"boolean",attribute:"scrollable-panel"})],n.prototype,"scrollablePanel");l([o.attr({attribute:"tabs-layout"})],n.prototype,"tabsLayout");l([o.observable],n.prototype,"_actionItemsSlottedContent");l([o.attr({mode:"boolean"})],n.prototype,"activeindicator");const L=({connotation:a,orientation:t,gutters:e,scrollablePanel:i,tabsLayout:s,_actionItemsSlottedContent:r})=>_.classNames("base",`layout-${s??"align-start"}`,[`connotation-${a}`,!!a],[`orientation-${t}`,!!t],`gutters-${e??"small"}`,["scroll",!!i],["has-action-items",!!r.length]);function q(a,t){return t.scrollWidth<=t.clientWidth?(a.classList.toggle("start-scroll",!1),a.classList.toggle("end-scroll",!1),!0):!1}function E(a,t){a.classList.toggle("start-scroll",t.scrollLeft>0)}function P(a,t){a.classList.toggle("end-scroll",t.scrollLeft+1<t.scrollWidth-t.clientWidth)}function O(a,{event:t}){const e=t.currentTarget,i=e.parentElement;q(i,e)||(E(i,e),P(i,e))}const R=o.html`
1
+ "use strict";const w=require("../bundled/definition20.cjs"),k=require("../bundled/definition21.cjs"),o=require("../bundled/vivid-element.cjs"),d=require("../bundled/key-codes.cjs"),u=require("../bundled/strings.cjs"),T=require("../bundled/numbers.cjs"),h=require("../bundled/ref.cjs"),p=require("../bundled/slotted.cjs"),_=require("../bundled/class-names.cjs"),z=':host{display:block}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-firm: var(--vvd-tabs-cta-firm, var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-tabs-accent-firm, var(--vvd-color-canvas-text))}.base{--_tabs-tablist-gutter: 8px;--_tabs-active-indicator-stroke-width: 2px;display:grid;box-sizing:border-box}.base.orientation-vertical{overflow:hidden;block-size:inherit;grid-template-columns:auto 1fr;grid-template-rows:1fr}.base:not(.orientation-vertical){block-size:var(--tabs-block-size, auto);grid-template-columns:1fr;grid-template-rows:auto 1fr;max-block-size:100%}.base.layout-stretch .scroll-shadow{flex:1}.base:not(.orientation-vertical) .scroll-shadow{position:relative;overflow:hidden;isolation:isolate}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.start-scroll:after,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:before,.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{position:absolute;content:"";inline-size:10px;inset-block:0;opacity:0;transition:opacity .1s}.base:not(.orientation-vertical) .scroll-shadow.start-scroll:before{z-index:1;box-shadow:inset 7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-start:0;opacity:.2}.base:not(.orientation-vertical) .scroll-shadow.end-scroll:after{box-shadow:inset -7px 1px 5px -3px var(--vvd-color-neutral-950);inset-inline-end:0;opacity:.2}.tabs{display:flex;overflow:hidden}.base.orientation-vertical .tabs{flex-direction:column;box-shadow:1px 0 0 0 var(--vvd-color-neutral-300)}.base.orientation-horizontal .tabs{flex-direction:row;border-bottom:1px solid var(--vvd-color-neutral-300)}.tablist{position:relative;display:grid;overflow:hidden;box-sizing:border-box;color:var(--_appearance-color-text)}.base.layout-stretch .tablist{--_tab-justify-content: center;--_tabs-tablist-column: 1fr}.tablist .base:not(.layout-stretch){--_tabs-tablist-column: auto}.base.orientation-vertical .tablist{padding:var(--_tabs-tablist-gutter);block-size:fit-content;grid-row:1/2;grid-template-columns:auto 1fr;grid-template-rows:auto;inline-size:100%;min-block-size:100%;place-self:flex-start end;row-gap:var(--_tabs-tablist-gutter)}.base:not(.orientation-vertical) .tablist{justify-content:flex-start;column-gap:var(--_tabs-tablist-gutter);grid-auto-columns:var(--_tabs-tablist-column);grid-auto-flow:column;grid-template-rows:auto auto;inline-size:fit-content;min-inline-size:100%;padding-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical .tablist{padding-block-end:0}.base.has-action-items:not(.orientation-vertical) .tablist{padding-inline-end:0}.tablist-wrapper{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.tablist-wrapper{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.tablist-wrapper ::-webkit-scrollbar{width:4px}.tablist-wrapper ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.tablist-wrapper ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base:not(.orientation-vertical) .tablist-wrapper{overflow:auto hidden;align-self:end;inline-size:100%}.base.orientation-vertical .tablist-wrapper{overflow:hidden auto;block-size:100%}.tablist-wrapper::-webkit-scrollbar{display:none}slot[name=action-items]{display:flex}.base.has-action-items.orientation-horizontal slot[name=action-items]{align-items:center;margin-inline:var(--_tabs-tablist-gutter)}.base.has-action-items.orientation-vertical slot[name=action-items]{margin-block:var(--_tabs-tablist-gutter)}.tabpanel{box-sizing:border-box;block-size:100%;min-block-size:0;min-inline-size:0}.base.scroll .tabpanel{overflow-y:auto;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.base.scroll .tabpanel{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.base.scroll .tabpanel ::-webkit-scrollbar{width:4px}.base.scroll .tabpanel ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.base.scroll .tabpanel ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.base.gutters-small .tabpanel{padding:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) - (1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))))}.active-indicator{background:currentColor;margin-inline-start:calc(var(--_tabs-tablist-gutter) * -1)}.base.orientation-vertical .active-indicator{align-self:center;border-radius:2px;block-size:80%;grid-area:1/1;inline-size:var(--_tabs-active-indicator-stroke-width)}.base:not(.orientation-vertical) .active-indicator{position:absolute;z-index:1;border-radius:2px;block-size:var(--_tabs-active-indicator-stroke-width);grid-area:2/1;inline-size:calc(var(--_tabs-active-tab-inline-size));inset-block-end:0;inset-inline-start:8px}.activeIndicatorTransition{transition:transform .2s ease-out 0s,inline-size .2s ease-out 0s}';var C=Object.defineProperty,l=(a,t,e,i)=>{for(var s=void 0,r=a.length-1,b;r>=0;r--)(b=a[r])&&(s=b(t,e,s)||s);return s&&C(t,e,s),s};const I="--_tabs-active-tab-inline-size",c={vertical:"vertical",horizontal:"horizontal"},$=a=>a===c.horizontal?c.vertical:c.horizontal,v=a=>a===c.horizontal?"gridColumn":"gridRow",A=a=>a===c.horizontal?"translateX":"translateY",g=a=>a===c.horizontal?"offsetLeft":"offsetTop",S=a=>a.getAttribute("aria-disabled")!=="true"&&!a.disabled&&!a.hasAttribute("hidden"),m=(a,t)=>a.length===t.length&&a.every((e,i)=>e===t[i]);class n extends o.VividElement{constructor(){super(...arguments),this.orientation=c.horizontal,this.tabs=[],this.tabpanels=[],this.#i=!1,this.#a=void 0,this.#n=t=>{const e=t.currentTarget;this._validTabs.includes(e)&&this.#r(e)},this.#l=t=>{const e=this._validTabs,i=this.activetab;if(!i)return;const[s,r]=this.orientation===c.horizontal?[d.keyArrowLeft,d.keyArrowRight]:[d.keyArrowUp,d.keyArrowDown],b={[s]:()=>e[(e.indexOf(i)-1+e.length)%e.length],[r]:()=>e[(e.indexOf(i)+1)%e.length],[d.keyHome]:()=>e[0],[d.keyEnd]:()=>e[e.length-1]};b[t.key]&&(t.preventDefault(),this.#r(b[t.key]()))},this.#t=!1,this.scrollablePanel=!1,this._actionItemsSlottedContent=[],this.activeindicator=!0}orientationChanged(){this._registerTabsChange(),this.$fastController.isConnected&&o.Updates.enqueue(()=>this.#s(!1))}tabsChanged(){for(const t of this.tabs)t.id||(t.id=`tab-${u.uniqueId()}`),t.addEventListener("click",this.#n),t.addEventListener("keydown",this.#l);this._registerTabsChange()}tabpanelsChanged(){for(const t of this.tabpanels)t.id||(t.id=`panel-${u.uniqueId()}`);this._registerTabsChange()}#d(){return m(this.tabs,this._tabsSlot.assignedNodes())&&m(this.tabpanels,this._tabPanelsSlot.assignedNodes())}get _pairedTabs(){return this.tabs.slice(0,Math.min(this.tabs.length,this.tabpanels.length))}get _validTabs(){return this._pairedTabs.filter(S)}activeidChanged(){this._registerTabsChange()}get activetab(){return this._validTabs.find(t=>t.id===this.activeid)??null}#r(t){this.activeid=t.id,t.focus(),this.$emit("change",t)}#i;_registerTabsChange(){this.#i||(this.#i=!0,window.queueMicrotask(()=>{this.$fastController.isConnected&&this.#d()&&this.#h(),this.#i=!1}))}#a;#h(){const t=this._validTabs;let e=this.activeid;if((!t.length||e&&!t.find(i=>i.id===e))&&(e=void 0),!e&&t.length&&(e=t[0].id),this.activeid!==e&&(this.activeid=e,this.$emit("change",this.activetab)),this.#v(),this.activeid!==this.#a){if(this.activetab){const i=this.#a!==void 0;this.#f(this.activetab,i),this.#s(i)}this.#a=this.activeid}else this.#s(this.#t)}#v(){for(const[t,e]of this._pairedTabs.entries()){const i=this.tabpanels[t],s=e.id===this.activeid;/* v8 ignore else -- @preserve */e instanceof w.Tab&&(e.active=s),e.setAttribute("aria-controls",i.id),e.setAttribute("tabindex",s?"0":"-1"),s&&this.connotation?e.setAttribute("connotation",this.connotation):e.removeAttribute("connotation"),e.classList.toggle("vertical",this.orientation===c.vertical),e.style[v($(this.orientation))]="",e.style[v(this.orientation)]=`${t+1}`,i.setAttribute("aria-labelledby",e.id),i.hidden=!s}}#n;#l;adjust(t){const e=this._validTabs,i=e.findIndex(r=>r.id===this.activeid);if(i===-1)return;const s=T.limit(0,e.length-1,i+t);this.#r(e[s])}#t;_onActiveIndicatorTransitionend(t){/* v8 ignore else -- @preserve */t.propertyName==="transform"&&(this.#t=!1)}#p(){this.#t=!1,this.activeIndicatorRef.classList.remove("activeIndicatorTransition")}#s(t){const e=this._pairedTabs.findIndex(x=>x.id===this.activeid);if(e===-1)return;const i=this.activeIndicatorRef,s=i[g(this.orientation)];i.style[v(this.orientation)]=`${e+1}`;const r=i[g(this.orientation)];i.style[v(this.orientation)]="";const b=r-s,y=i.style.transform,f=`${A(this.orientation)}(${b}px)`;t?(i.classList.add("activeIndicatorTransition"),y!==f&&(this.#t=!0)):this.#p(),i.style.transform=f,i.style.setProperty(I,this.tabs[e].getBoundingClientRect().width+"px")}connotationChanged(){this._registerTabsChange()}#c(){this.#b.dispatchEvent(new Event("scroll"))}#o;connectedCallback(){super.connectedCallback(),this._registerTabsChange(),requestAnimationFrame(()=>this.#c()),this.#o=new ResizeObserver(()=>{this.#s(this.#t),this.#c()}),this.#o.observe(this.#b),this.#o.observe(this.tablist)}disconnectedCallback(){super.disconnectedCallback(),this.#o.disconnect()}get#e(){return this.shadowRoot.querySelector(".tablist-wrapper")}get#b(){return this.tablist.parentElement}#f(t,e=!0){const i=this.tabs.findIndex(b=>b===t);let s=0,r=0;this.orientation===c.vertical?(i===this.tabs.length-1&&(r=this.#e.scrollHeight),i>0&&i<this.tabs.length-1&&(r=t.offsetTop-this.#e.offsetHeight/2+t.offsetHeight/2)):(i===this.tabs.length-1&&(s=this.#e.scrollWidth),i>0&&i<this.tabs.length-1&&(s=t.offsetLeft-this.#e.offsetWidth/2+t.offsetWidth/2)),this.#e.scrollTo({top:r,left:s,behavior:e?"smooth":"instant"})}}l([o.attr],n.prototype,"orientation");l([o.observable],n.prototype,"tabs");l([o.observable],n.prototype,"tabpanels");l([o.attr],n.prototype,"activeid");l([o.observable],n.prototype,"activeIndicatorRef");l([o.observable],n.prototype,"tablist");l([o.attr],n.prototype,"connotation");l([o.attr],n.prototype,"gutters");l([o.attr({mode:"boolean",attribute:"scrollable-panel"})],n.prototype,"scrollablePanel");l([o.attr({attribute:"tabs-layout"})],n.prototype,"tabsLayout");l([o.observable],n.prototype,"_actionItemsSlottedContent");l([o.attr({mode:"boolean"})],n.prototype,"activeindicator");const L=({connotation:a,orientation:t,gutters:e,scrollablePanel:i,tabsLayout:s,_actionItemsSlottedContent:r})=>_.classNames("base",`layout-${s??"align-start"}`,[`connotation-${a}`,!!a],[`orientation-${t}`,!!t],`gutters-${e??"small"}`,["scroll",!!i],["has-action-items",!!r.length]);function q(a,t){return t.scrollWidth<=t.clientWidth?(a.classList.toggle("start-scroll",!1),a.classList.toggle("end-scroll",!1),!0):!1}function E(a,t){a.classList.toggle("start-scroll",t.scrollLeft>0)}function P(a,t){a.classList.toggle("end-scroll",t.scrollLeft+1<t.scrollWidth-t.clientWidth)}function O(a,{event:t}){const e=t.currentTarget,i=e.parentElement;q(i,e)||(E(i,e),P(i,e))}const R=o.html`
2
2
  <template>
3
3
  <div class="${L}">
4
4
  <div class="tabs">
package/tabs/index.js CHANGED
@@ -120,6 +120,7 @@ class r extends _ {
120
120
  #v() {
121
121
  for (const [t, a] of this._pairedTabs.entries()) {
122
122
  const e = this.tabpanels[t], s = a.id === this.activeid;
123
+ /* v8 ignore else -- @preserve */
123
124
  a instanceof x && (a.active = s), a.setAttribute("aria-controls", e.id), a.setAttribute("tabindex", s ? "0" : "-1"), s && this.connotation ? a.setAttribute("connotation", this.connotation) : a.removeAttribute("connotation"), a.classList.toggle(
124
125
  "vertical",
125
126
  this.orientation === l.vertical
@@ -152,6 +153,7 @@ class r extends _ {
152
153
  * @internal
153
154
  */
154
155
  _onActiveIndicatorTransitionend(t) {
156
+ /* v8 ignore else -- @preserve */
155
157
  t.propertyName === "transform" && (this.#t = !1);
156
158
  }
157
159
  #p() {
package/text-area/definition.cjs CHANGED
@@ -16,7 +16,7 @@ const withSuccessText = require('../unbundled/with-success-text.cjs');
16
16
  const formElement = require('../unbundled/form-element.cjs');
17
17
  const fastWebUtilities = require('@microsoft/fast-web-utilities');
18
18
 
19
- const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
19
+ const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);line-height:20px}.label-wrapper{grid-column:1/2;grid-row:1}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}";
20
20
 
21
21
  class Reflector {
22
22
  #reflectedProperties = /* @__PURE__ */ new Map();
@@ -129,6 +129,7 @@ class TextArea extends withContextualHelp.WithContextualHelp(
129
129
  * @internal
130
130
  */
131
131
  readOnlyChanged() {
132
+ /* v8 ignore if -- @preserve */
132
133
  if (this.proxy instanceof HTMLTextAreaElement) {
133
134
  this.proxy.readOnly = this.readOnly;
134
135
  }
@@ -137,6 +138,7 @@ class TextArea extends withContextualHelp.WithContextualHelp(
137
138
  * @internal
138
139
  */
139
140
  autofocusChanged() {
141
+ /* v8 ignore if -- @preserve */
140
142
  if (this.proxy instanceof HTMLTextAreaElement) {
141
143
  this.proxy.autofocus = this.autofocus;
142
144
  }
@@ -145,6 +147,7 @@ class TextArea extends withContextualHelp.WithContextualHelp(
145
147
  * @internal
146
148
  */
147
149
  listChanged() {
150
+ /* v8 ignore if -- @preserve */
148
151
  if (this.proxy instanceof HTMLTextAreaElement) {
149
152
  this.proxy.setAttribute("list", this.list);
150
153
  }
@@ -153,6 +156,7 @@ class TextArea extends withContextualHelp.WithContextualHelp(
153
156
  * @internal
154
157
  */
155
158
  maxlengthChanged() {
159
+ /* v8 ignore if -- @preserve */
156
160
  if (this.proxy instanceof HTMLTextAreaElement) {
157
161
  this.proxy.maxLength = this.maxlength;
158
162
  }
@@ -161,6 +165,7 @@ class TextArea extends withContextualHelp.WithContextualHelp(
161
165
  * @internal
162
166
  */
163
167
  minlengthChanged() {
168
+ /* v8 ignore if -- @preserve */
164
169
  if (this.proxy instanceof HTMLTextAreaElement) {
165
170
  this.proxy.minLength = this.minlength;
166
171
  }
@@ -169,6 +174,7 @@ class TextArea extends withContextualHelp.WithContextualHelp(
169
174
  * @internal
170
175
  */
171
176
  spellcheckChanged() {
177
+ /* v8 ignore if -- @preserve */
172
178
  if (this.proxy instanceof HTMLTextAreaElement) {
173
179
  this.proxy.spellcheck = this.spellcheck;
174
180
  }
@@ -290,20 +296,20 @@ function renderLabel() {
290
296
  const TextAreaTemplate = (context) => {
291
297
  return fastElement.html`
292
298
  <div class="${getClasses}">
293
- <div
294
- class="label-suffix"
295
- ?hidden=${(x) => !(x.charCount && x.maxlength) && !x._hasContextualHelp}
296
- >
297
- ${fastElement.when(
299
+ ${fastElement.when(
298
300
  (x) => x.charCount && x.maxlength,
299
301
  (x) => x._getCharCountTemplate(context)
300
302
  )}
303
+ <div
304
+ class="label-wrapper"
305
+ ?hidden=${(x) => !x.label && !x._hasContextualHelp}
306
+ >
307
+ ${fastElement.when((x) => x.label, renderLabel())}
301
308
  <slot
302
309
  name="contextual-help"
303
310
  ${fastElement.slotted("_contextualHelpSlottedContent")}
304
311
  ></slot>
305
312
  </div>
306
- ${fastElement.when((x) => x.label, renderLabel())}
307
313
  <textarea
308
314
  class="control"
309
315
  id="control"
package/text-area/definition.js CHANGED
@@ -12,7 +12,7 @@ import { W as WithSuccessText } from '../unbundled/with-success-text.js';
12
12
  import { F as FormElement } from '../unbundled/form-element.js';
13
13
  import { classNames } from '@microsoft/fast-web-utilities';
14
14
 
15
- const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
15
+ const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);line-height:20px}.label-wrapper{grid-column:1/2;grid-row:1}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}";
16
16
 
17
17
  class Reflector {
18
18
  #reflectedProperties = /* @__PURE__ */ new Map();
@@ -125,6 +125,7 @@ class TextArea extends WithContextualHelp(
125
125
  * @internal
126
126
  */
127
127
  readOnlyChanged() {
128
+ /* v8 ignore if -- @preserve */
128
129
  if (this.proxy instanceof HTMLTextAreaElement) {
129
130
  this.proxy.readOnly = this.readOnly;
130
131
  }
@@ -133,6 +134,7 @@ class TextArea extends WithContextualHelp(
133
134
  * @internal
134
135
  */
135
136
  autofocusChanged() {
137
+ /* v8 ignore if -- @preserve */
136
138
  if (this.proxy instanceof HTMLTextAreaElement) {
137
139
  this.proxy.autofocus = this.autofocus;
138
140
  }
@@ -141,6 +143,7 @@ class TextArea extends WithContextualHelp(
141
143
  * @internal
142
144
  */
143
145
  listChanged() {
146
+ /* v8 ignore if -- @preserve */
144
147
  if (this.proxy instanceof HTMLTextAreaElement) {
145
148
  this.proxy.setAttribute("list", this.list);
146
149
  }
@@ -149,6 +152,7 @@ class TextArea extends WithContextualHelp(
149
152
  * @internal
150
153
  */
151
154
  maxlengthChanged() {
155
+ /* v8 ignore if -- @preserve */
152
156
  if (this.proxy instanceof HTMLTextAreaElement) {
153
157
  this.proxy.maxLength = this.maxlength;
154
158
  }
@@ -157,6 +161,7 @@ class TextArea extends WithContextualHelp(
157
161
  * @internal
158
162
  */
159
163
  minlengthChanged() {
164
+ /* v8 ignore if -- @preserve */
160
165
  if (this.proxy instanceof HTMLTextAreaElement) {
161
166
  this.proxy.minLength = this.minlength;
162
167
  }
@@ -165,6 +170,7 @@ class TextArea extends WithContextualHelp(
165
170
  * @internal
166
171
  */
167
172
  spellcheckChanged() {
173
+ /* v8 ignore if -- @preserve */
168
174
  if (this.proxy instanceof HTMLTextAreaElement) {
169
175
  this.proxy.spellcheck = this.spellcheck;
170
176
  }
@@ -286,20 +292,20 @@ function renderLabel() {
286
292
  const TextAreaTemplate = (context) => {
287
293
  return html`
288
294
  <div class="${getClasses}">
289
- <div
290
- class="label-suffix"
291
- ?hidden=${(x) => !(x.charCount && x.maxlength) && !x._hasContextualHelp}
292
- >
293
- ${when(
295
+ ${when(
294
296
  (x) => x.charCount && x.maxlength,
295
297
  (x) => x._getCharCountTemplate(context)
296
298
  )}
299
+ <div
300
+ class="label-wrapper"
301
+ ?hidden=${(x) => !x.label && !x._hasContextualHelp}
302
+ >
303
+ ${when((x) => x.label, renderLabel())}
297
304
  <slot
298
305
  name="contextual-help"
299
306
  ${slotted("_contextualHelpSlottedContent")}
300
307
  ></slot>
301
308
  </div>
302
- ${when((x) => x.label, renderLabel())}
303
309
  <textarea
304
310
  class="control"
305
311
  id="control"
package/text-area/index.cjs CHANGED
@@ -1,18 +1,18 @@
1
- "use strict";const r=require("../bundled/vivid-element.cjs"),p=require("../bundled/mixins.cjs"),u=require("../bundled/definition14.cjs"),h=require("../bundled/definition13.cjs"),d=require("../bundled/delegates-aria.cjs"),b=require("../bundled/form-associated.cjs"),x=require("../bundled/with-contextual-help.cjs"),f=require("../bundled/char-count.cjs"),m=require("../bundled/with-error-text.cjs"),_=require("../bundled/with-success-text.cjs"),g=require("../bundled/form-element.cjs"),v=require("../bundled/when.cjs"),y=require("../bundled/slotted.cjs"),w=require("../bundled/ref.cjs"),k=require("../bundled/class-names.cjs"),C=":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";class ${#e=new Map;#a;#r;constructor(e,a){this.#a=e,this.#r=a}attribute(e,a){this.#o(e,{type:"attribute",destination:a})}booleanAttribute(e,a){this.#o(e,{type:"boolean-attribute",destination:a})}property(e,a,l=!1){this.#o(e,{type:"property",destination:a,skipIfEqual:l})}destroy(){const e=r.Observable.getNotifier(this.#a);for(const a of this.#e.keys())e.unsubscribe(this.#t,a);this.#e.clear()}#o(e,a){this.#e.set(e,a),r.Observable.getNotifier(this.#a).subscribe(this.#t,e),this.#t.handleChange(this.#a,e)}#t={handleChange:(e,a)=>{const l=this.#e.get(a),t=e[a];switch(l.type){case"boolean-attribute":r.DOM.setBooleanAttribute(this.#r,l.destination,!!t);break;case"attribute":r.DOM.setAttribute(this.#r,l.destination,t);break;case"property":if(l.skipIfEqual&&this.#r[l.destination]===t)return;this.#r[l.destination]=t;break}}}}var T=Object.defineProperty,n=(c,e,a,l)=>{for(var t=void 0,s=c.length-1,i;s>=0;s--)(i=c[s])&&(t=i(e,a,t)||t);return t&&T(e,a,t),t};const z={none:"none"};class o extends x.WithContextualHelp(p.WithFeedback(f.WithCharCount(m.WithErrorText(_.WithSuccessText(g.FormElement(d.DelegatesAria(b.FormAssociated(r.VividElement)))))))){constructor(){super(...arguments),this.proxy=document.createElement("textarea"),this.resize=z.none,this.cols=20,this.handleTextInput=()=>{this.value=this.control.value}}readOnlyChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.readOnly=this.readOnly)}autofocusChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.autofocus=this.autofocus)}listChanged(){this.proxy instanceof HTMLTextAreaElement&&this.proxy.setAttribute("list",this.list)}maxlengthChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.maxLength=this.maxlength)}minlengthChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.minLength=this.minlength)}spellcheckChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.spellcheck=this.spellcheck)}select(){this.control.select()}valueChanged(e,a){super.valueChanged(e,a),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}handleChange(){this.$emit("change")}validate(){super.validate(this.control)}#e;connectedCallback(){super.connectedCallback(),this.#e=new $(this,this.control),this.#e.property("value","value",!0),this._renderCharCountRemaining()}disconnectedCallback(){super.disconnectedCallback(),this.#e.destroy()}}n([r.attr({mode:"boolean"})],o.prototype,"readOnly");n([r.attr],o.prototype,"resize");n([r.attr({mode:"boolean"})],o.prototype,"autofocus");n([r.attr({attribute:"form"})],o.prototype,"formId");n([r.attr],o.prototype,"list");n([r.attr({converter:r.nullableNumberConverter})],o.prototype,"maxlength");n([r.attr({converter:r.nullableNumberConverter})],o.prototype,"minlength");n([r.attr],o.prototype,"placeholder");n([r.attr({converter:r.nullableNumberConverter,mode:"fromView"})],o.prototype,"cols");n([r.attr({converter:r.nullableNumberConverter,mode:"fromView"})],o.prototype,"rows");n([r.attr({mode:"boolean"})],o.prototype,"spellcheck");n([r.observable],o.prototype,"defaultSlottedNodes");n([r.attr],o.prototype,"wrap");const A=({value:c,errorValidationMessage:e,disabled:a,placeholder:l,readOnly:t,successText:s})=>k.classNames("base",["readonly",t],["placeholder",!!l],["disabled",a],["error",!!e],["has-value",!!c],["success",!!s]);function q(){return r.html` <label for="control" class="label">
1
+ "use strict";const r=require("../bundled/vivid-element.cjs"),p=require("../bundled/mixins.cjs"),u=require("../bundled/definition14.cjs"),h=require("../bundled/definition13.cjs"),d=require("../bundled/delegates-aria.cjs"),b=require("../bundled/form-associated.cjs"),x=require("../bundled/with-contextual-help.cjs"),f=require("../bundled/char-count.cjs"),m=require("../bundled/with-error-text.cjs"),_=require("../bundled/with-success-text.cjs"),y=require("../bundled/form-element.cjs"),v=require("../bundled/when.cjs"),g=require("../bundled/slotted.cjs"),w=require("../bundled/ref.cjs"),k=require("../bundled/class-names.cjs"),C=".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);line-height:20px}.label-wrapper{grid-column:1/2;grid-row:1}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}";class ${#e=new Map;#a;#r;constructor(e,a){this.#a=e,this.#r=a}attribute(e,a){this.#o(e,{type:"attribute",destination:a})}booleanAttribute(e,a){this.#o(e,{type:"boolean-attribute",destination:a})}property(e,a,l=!1){this.#o(e,{type:"property",destination:a,skipIfEqual:l})}destroy(){const e=r.Observable.getNotifier(this.#a);for(const a of this.#e.keys())e.unsubscribe(this.#t,a);this.#e.clear()}#o(e,a){this.#e.set(e,a),r.Observable.getNotifier(this.#a).subscribe(this.#t,e),this.#t.handleChange(this.#a,e)}#t={handleChange:(e,a)=>{const l=this.#e.get(a),t=e[a];switch(l.type){case"boolean-attribute":r.DOM.setBooleanAttribute(this.#r,l.destination,!!t);break;case"attribute":r.DOM.setAttribute(this.#r,l.destination,t);break;case"property":if(l.skipIfEqual&&this.#r[l.destination]===t)return;this.#r[l.destination]=t;break}}}}var T=Object.defineProperty,n=(c,e,a,l)=>{for(var t=void 0,s=c.length-1,i;s>=0;s--)(i=c[s])&&(t=i(e,a,t)||t);return t&&T(e,a,t),t};const z={none:"none"};class o extends x.WithContextualHelp(p.WithFeedback(f.WithCharCount(m.WithErrorText(_.WithSuccessText(y.FormElement(d.DelegatesAria(b.FormAssociated(r.VividElement)))))))){constructor(){super(...arguments),this.proxy=document.createElement("textarea"),this.resize=z.none,this.cols=20,this.handleTextInput=()=>{this.value=this.control.value}}readOnlyChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLTextAreaElement&&(this.proxy.readOnly=this.readOnly)}autofocusChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLTextAreaElement&&(this.proxy.autofocus=this.autofocus)}listChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLTextAreaElement&&this.proxy.setAttribute("list",this.list)}maxlengthChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLTextAreaElement&&(this.proxy.maxLength=this.maxlength)}minlengthChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLTextAreaElement&&(this.proxy.minLength=this.minlength)}spellcheckChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLTextAreaElement&&(this.proxy.spellcheck=this.spellcheck)}select(){this.control.select()}valueChanged(e,a){super.valueChanged(e,a),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}handleChange(){this.$emit("change")}validate(){super.validate(this.control)}#e;connectedCallback(){super.connectedCallback(),this.#e=new $(this,this.control),this.#e.property("value","value",!0),this._renderCharCountRemaining()}disconnectedCallback(){super.disconnectedCallback(),this.#e.destroy()}}n([r.attr({mode:"boolean"})],o.prototype,"readOnly");n([r.attr],o.prototype,"resize");n([r.attr({mode:"boolean"})],o.prototype,"autofocus");n([r.attr({attribute:"form"})],o.prototype,"formId");n([r.attr],o.prototype,"list");n([r.attr({converter:r.nullableNumberConverter})],o.prototype,"maxlength");n([r.attr({converter:r.nullableNumberConverter})],o.prototype,"minlength");n([r.attr],o.prototype,"placeholder");n([r.attr({converter:r.nullableNumberConverter,mode:"fromView"})],o.prototype,"cols");n([r.attr({converter:r.nullableNumberConverter,mode:"fromView"})],o.prototype,"rows");n([r.attr({mode:"boolean"})],o.prototype,"spellcheck");n([r.observable],o.prototype,"defaultSlottedNodes");n([r.attr],o.prototype,"wrap");const A=({value:c,errorValidationMessage:e,disabled:a,placeholder:l,readOnly:t,successText:s})=>k.classNames("base",["readonly",t],["placeholder",!!l],["disabled",a],["error",!!e],["has-value",!!c],["success",!!s]);function q(){return r.html` <label for="control" class="label">
2
2
  ${c=>c.label}
3
3
  </label>`}const E=c=>r.html`
4
4
  <div class="${A}">
5
+ ${v.when(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(c))}
5
6
  <div
6
- class="label-suffix"
7
- ?hidden=${e=>!(e.charCount&&e.maxlength)&&!e._hasContextualHelp}
7
+ class="label-wrapper"
8
+ ?hidden=${e=>!e.label&&!e._hasContextualHelp}
8
9
  >
9
- ${v.when(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(c))}
10
+ ${v.when(e=>e.label,q())}
10
11
  <slot
11
12
  name="contextual-help"
12
- ${y.slotted("_contextualHelpSlottedContent")}
13
+ ${g.slotted("_contextualHelpSlottedContent")}
13
14
  ></slot>
14
15
  </div>
15
- ${v.when(e=>e.label,q())}
16
16
  <textarea
17
17
  class="control"
18
18
  id="control"