@vonage/vivid 3.32.0 → 3.35.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 (221) hide show
  1. package/accordion/index.js +5 -5
  2. package/accordion-item/index.js +4 -4
  3. package/action-group/index.js +1 -1
  4. package/alert/index.js +6 -6
  5. package/avatar/index.js +2 -2
  6. package/badge/index.js +2 -2
  7. package/banner/index.js +5 -5
  8. package/breadcrumb/index.js +1 -1
  9. package/breadcrumb-item/index.js +3 -3
  10. package/button/index.js +4 -4
  11. package/calendar/index.js +1 -1
  12. package/calendar-event/index.js +1 -1
  13. package/card/index.js +3 -3
  14. package/checkbox/index.js +5 -3
  15. package/combobox/index.js +8 -8
  16. package/custom-elements.json +256 -18
  17. package/data-grid/index.js +2 -2
  18. package/date-picker/index.js +9 -9
  19. package/dialog/index.js +6 -6
  20. package/divider/index.js +1 -1
  21. package/elevation/index.js +1 -1
  22. package/empty-state/index.js +2 -2
  23. package/fab/index.js +4 -4
  24. package/file-picker/index.js +5 -5
  25. package/focus/index.js +1 -1
  26. package/header/index.js +2 -2
  27. package/icon/index.js +1 -1
  28. package/index.js +59 -59
  29. package/layout/index.js +1 -1
  30. package/lib/avatar/avatar.d.ts +1 -1
  31. package/lib/calendar/calendar.d.ts +1 -1
  32. package/lib/date-picker/calendar/dateStr.d.ts +1 -0
  33. package/lib/date-picker/calendar/month.d.ts +1 -0
  34. package/lib/date-picker/calendar/year.d.ts +2 -0
  35. package/lib/date-picker/date-picker.d.ts +2 -0
  36. package/lib/icon/icon.d.ts +0 -1
  37. package/lib/listbox/listbox.d.ts +9 -1
  38. package/lib/progress-ring/progress-ring.d.ts +1 -1
  39. package/lib/text-field/text-field.d.ts +1 -0
  40. package/listbox/index.js +20 -16
  41. package/locales/en-GB.js +48 -14
  42. package/locales/en-US.js +48 -14
  43. package/locales/ja-JP.js +48 -14
  44. package/locales/zh-CN.js +48 -14
  45. package/menu/index.js +8 -8
  46. package/menu-item/index.js +4 -4
  47. package/nav/index.js +1 -1
  48. package/nav-disclosure/index.js +3 -3
  49. package/nav-item/index.js +3 -3
  50. package/note/index.js +2 -3
  51. package/number-field/index.js +6 -6
  52. package/option/index.js +3 -3
  53. package/package.json +2 -16
  54. package/pagination/index.js +5 -5
  55. package/popup/index.js +6 -6
  56. package/progress/index.js +1 -1
  57. package/progress-ring/index.js +1 -1
  58. package/radio/index.js +2 -2
  59. package/radio-group/index.js +1 -1
  60. package/select/index.js +8 -8
  61. package/shared/affix.js +25 -9
  62. package/shared/apply-mixins.js +1 -1
  63. package/shared/breadcrumb-item.js +5 -5
  64. package/shared/button.js +13 -13
  65. package/shared/calendar-event.js +36 -16
  66. package/shared/definition.js +133 -194
  67. package/shared/definition10.js +225 -40
  68. package/shared/definition11.js +36 -32
  69. package/shared/definition12.js +763 -98
  70. package/shared/definition13.js +125 -89
  71. package/shared/definition14.js +207 -27
  72. package/shared/definition15.js +710 -731
  73. package/shared/definition16.js +1289 -47
  74. package/shared/definition17.js +6113 -93
  75. package/shared/definition18.js +242 -164
  76. package/shared/definition19.js +47 -692
  77. package/shared/definition2.js +199 -117
  78. package/shared/definition20.js +59 -1671
  79. package/shared/definition21.js +95 -255
  80. package/shared/definition22.js +2218 -1167
  81. package/shared/definition23.js +61 -5784
  82. package/shared/definition24.js +28 -117
  83. package/shared/definition25.js +52 -66
  84. package/shared/definition26.js +391 -214
  85. package/shared/definition27.js +441 -34
  86. package/shared/definition28.js +85 -73
  87. package/shared/definition29.js +21 -2283
  88. package/shared/definition3.js +61 -24
  89. package/shared/definition30.js +13 -49
  90. package/shared/definition31.js +54 -39
  91. package/shared/definition32.js +413 -375
  92. package/shared/definition33.js +223 -304
  93. package/shared/definition34.js +197 -13
  94. package/shared/definition35.js +88 -73
  95. package/shared/definition36.js +75 -25
  96. package/shared/definition37.js +434 -34
  97. package/shared/definition38.js +32 -432
  98. package/shared/definition39.js +677 -187
  99. package/shared/definition4.js +157 -12
  100. package/shared/definition40.js +95 -48
  101. package/shared/definition41.js +577 -31
  102. package/shared/definition42.js +126 -424
  103. package/shared/definition43.js +114 -618
  104. package/shared/definition44.js +24 -80
  105. package/shared/definition45.js +71 -543
  106. package/shared/definition46.js +499 -92
  107. package/shared/definition47.js +19 -133
  108. package/shared/definition48.js +129 -52
  109. package/shared/definition49.js +281 -17
  110. package/shared/definition5.js +71 -36
  111. package/shared/definition50.js +153 -484
  112. package/shared/definition51.js +131 -98
  113. package/shared/definition52.js +131 -16
  114. package/shared/definition53.js +80 -264
  115. package/shared/definition54.js +293 -118
  116. package/shared/definition55.js +12 -117
  117. package/shared/definition56.js +39 -68
  118. package/shared/definition57.js +166 -288
  119. package/shared/definition6.js +56 -111
  120. package/shared/definition7.js +120 -195
  121. package/shared/definition8.js +58 -23
  122. package/shared/definition9.js +92 -66
  123. package/shared/focus.js +2 -1
  124. package/shared/focus2.js +1 -1
  125. package/shared/form-associated.js +2 -2
  126. package/shared/icon.js +48 -27
  127. package/shared/index.js +7 -27
  128. package/shared/index2.js +108 -80
  129. package/shared/key-codes.js +1 -1
  130. package/shared/listbox.js +88 -11
  131. package/shared/patterns/form-elements/form-elements.d.ts +4 -4
  132. package/shared/radio.js +23 -7
  133. package/shared/repeat.js +1 -1
  134. package/shared/text-anchor.js +21 -4
  135. package/shared/text-anchor.template.js +37 -40
  136. package/shared/text-field.js +2 -2
  137. package/shared/text-field2.js +15 -15
  138. package/shared/tree-item.js +12 -12
  139. package/side-drawer/index.js +1 -1
  140. package/slider/index.js +2 -2
  141. package/split-button/index.js +3 -3
  142. package/style.css +6106 -0
  143. package/styles/core/all.css +1 -1
  144. package/styles/core/theme.css +1 -1
  145. package/styles/core/typography.css +1 -1
  146. package/styles/tokens/theme-dark.css +4 -4
  147. package/styles/tokens/theme-light.css +4 -4
  148. package/styles/tokens/vivid-2-compat.css +1 -1
  149. package/switch/index.js +3 -3
  150. package/tab/index.js +3 -3
  151. package/tab-panel/index.js +1 -1
  152. package/tabs/index.js +5 -5
  153. package/tag/index.js +3 -3
  154. package/tag-group/index.js +1 -1
  155. package/text-anchor/index.js +1 -1
  156. package/text-area/index.js +3 -3
  157. package/text-field/index.js +3 -3
  158. package/toggletip/index.js +7 -7
  159. package/tooltip/index.js +7 -7
  160. package/tree-item/index.js +3 -3
  161. package/tree-view/index.js +1 -1
  162. package/vivid.api.json +10 -1
  163. package/lib/accordion/index.d.ts +0 -1
  164. package/lib/accordion-item/index.d.ts +0 -1
  165. package/lib/action-group/index.d.ts +0 -1
  166. package/lib/alert/index.d.ts +0 -1
  167. package/lib/avatar/index.d.ts +0 -1
  168. package/lib/badge/index.d.ts +0 -1
  169. package/lib/banner/index.d.ts +0 -1
  170. package/lib/breadcrumb/index.d.ts +0 -1
  171. package/lib/breadcrumb-item/index.d.ts +0 -1
  172. package/lib/button/index.d.ts +0 -1
  173. package/lib/calendar/index.d.ts +0 -1
  174. package/lib/calendar-event/index.d.ts +0 -1
  175. package/lib/card/index.d.ts +0 -1
  176. package/lib/checkbox/index.d.ts +0 -1
  177. package/lib/combobox/index.d.ts +0 -1
  178. package/lib/data-grid/index.d.ts +0 -1
  179. package/lib/date-picker/index.d.ts +0 -1
  180. package/lib/dialog/index.d.ts +0 -1
  181. package/lib/divider/index.d.ts +0 -1
  182. package/lib/elevation/index.d.ts +0 -1
  183. package/lib/empty-state/index.d.ts +0 -1
  184. package/lib/fab/index.d.ts +0 -1
  185. package/lib/file-picker/index.d.ts +0 -1
  186. package/lib/focus/index.d.ts +0 -1
  187. package/lib/header/index.d.ts +0 -1
  188. package/lib/icon/index.d.ts +0 -1
  189. package/lib/layout/index.d.ts +0 -1
  190. package/lib/listbox/index.d.ts +0 -1
  191. package/lib/menu/index.d.ts +0 -1
  192. package/lib/menu-item/index.d.ts +0 -1
  193. package/lib/nav/index.d.ts +0 -1
  194. package/lib/nav-disclosure/index.d.ts +0 -1
  195. package/lib/nav-item/index.d.ts +0 -1
  196. package/lib/note/index.d.ts +0 -1
  197. package/lib/number-field/index.d.ts +0 -1
  198. package/lib/option/index.d.ts +0 -1
  199. package/lib/pagination/index.d.ts +0 -1
  200. package/lib/popup/index.d.ts +0 -1
  201. package/lib/progress/index.d.ts +0 -1
  202. package/lib/progress-ring/index.d.ts +0 -1
  203. package/lib/radio/index.d.ts +0 -1
  204. package/lib/radio-group/index.d.ts +0 -1
  205. package/lib/select/index.d.ts +0 -1
  206. package/lib/side-drawer/index.d.ts +0 -1
  207. package/lib/slider/index.d.ts +0 -1
  208. package/lib/split-button/index.d.ts +0 -1
  209. package/lib/switch/index.d.ts +0 -1
  210. package/lib/tab/index.d.ts +0 -1
  211. package/lib/tab-panel/index.d.ts +0 -1
  212. package/lib/tabs/index.d.ts +0 -1
  213. package/lib/tag/index.d.ts +0 -1
  214. package/lib/tag-group/index.d.ts +0 -1
  215. package/lib/text-anchor/index.d.ts +0 -1
  216. package/lib/text-area/index.d.ts +0 -1
  217. package/lib/text-field/index.d.ts +0 -1
  218. package/lib/toggletip/index.d.ts +0 -1
  219. package/lib/tooltip/index.d.ts +0 -1
  220. package/lib/tree-item/index.d.ts +0 -1
  221. package/lib/tree-view/index.d.ts +0 -1
@@ -1,3 +1,3 @@
1
- var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n display: inline-grid;\n width: 100%;\n gap: 4px;\n grid-template-columns: min-content 1fr max-content;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-600);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n /* @cssprop [--vvd-text-field-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-text-field-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-text-field-success-backdrop=var(--vvd-color-success-50)] */\n --_connotation-color-backdrop: var(--vvd-text-field-success-backdrop, var(--vvd-color-success-50));\n /* @cssprop [--vvd-text-field-success-intermediate=var(--vvd-color-success-500)] */\n --_connotation-color-intermediate: var(--vvd-text-field-success-intermediate, var(--vvd-color-success-500));\n /* @cssprop [--vvd-text-field-success-firm=var(--vvd-color-success-600)] */\n --_connotation-color-firm: var(--vvd-text-field-success-firm, var(--vvd-color-success-600));\n /* @cssprop [--vvd-text-field-success-faint=var(--vvd-color-success-50)] */\n --_connotation-color-faint: var(--vvd-text-field-success-faint, var(--vvd-color-success-50));\n /* @cssprop [--vvd-text-field-success-soft=var(--vvd-color-success-100)] */\n --_connotation-color-soft: var(--vvd-text-field-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n /* @cssprop [--vvd-text-field-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-text-field-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-text-field-alert-backdrop=var(--vvd-color-alert-50)] */\n --_connotation-color-backdrop: var(--vvd-text-field-alert-backdrop, var(--vvd-color-alert-50));\n /* @cssprop [--vvd-text-field-alert-intermediate=var(--vvd-color-alert-500)] */\n --_connotation-color-intermediate: var(--vvd-text-field-alert-intermediate, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-text-field-alert-firm=var(--vvd-color-alert-600)] */\n --_connotation-color-firm: var(--vvd-text-field-alert-firm, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-text-field-alert-faint=var(--vvd-color-alert-50)] */\n --_connotation-color-faint: var(--vvd-text-field-alert-faint, var(--vvd-color-alert-50));\n /* @cssprop [--vvd-text-field-alert-soft=var(--vvd-color-alert-100)] */\n --_connotation-color-soft: var(--vvd-text-field-alert-soft, var(--vvd-color-alert-100));\n}\n.base:not(.connotation-success, .connotation-alert) {\n /* @cssprop [--vvd-text-field-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-text-field-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-text-field-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-text-field-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-text-field-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-text-field-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-text-field-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label {\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-typography-base);\n grid-column: 1/4;\n grid-row: 1;\n}\n.char-count + .label {\n grid-column: 1/3;\n}\n\n.char-count {\n color: var(--_low-ink-color);\n font: var(--vvd-typography-base);\n grid-column: 3/4;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n font: var(--vvd-typography-base);\n grid-column: 1/4;\n padding-block: 0;\n transition: color 0.2s, box-shadow 0.2s, background-color 0.2s;\n /* Shape */\n}\n.fieldset:focus-visible {\n outline: none;\n}\n.base > .fieldset {\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n border-radius: 24px;\n}\n\n.wrapper {\n position: relative;\n block-size: 100%;\n border-radius: inherit;\n inline-size: 100%;\n}\n.wrapper:focus-visible {\n outline: none;\n}\n\n.control {\n width: 100%;\n box-sizing: border-box;\n border: 0 none;\n appearance: none; /* for box-shadow visibility on IOS */\n background-color: transparent;\n block-size: 100%;\n border-radius: inherit;\n color: inherit;\n font: inherit;\n padding-block: 0;\n padding-inline-end: var(--_text-field-gutter);\n padding-inline-start: var(--_text-field-gutter);\n}\n.control:disabled {\n cursor: not-allowed;\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n.control:focus-visible {\n outline: none;\n}\n.base.action-items .control {\n padding-inline-end: var(--text-field-inline-end-padding, calc(var(--_text-field-icon-size) + var(--_text-field-gutter)));\n}\n\n.action-items-wrapper {\n position: absolute;\n inset-inline-end: calc(var(--_text-field-gutter) / 4);\n}\n.base:not(.action-items) .action-items-wrapper {\n display: none;\n}\n\n.icon {\n position: absolute;\n z-index: 1;\n color: var(--_low-ink-color);\n font-size: var(--_text-field-icon-size);\n inset-inline-start: var(--_text-field-gutter);\n line-height: 1;\n}\n.icon + .wrapper .control {\n padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.wrapper:not(:focus-visible, :focus-within) > .focus-indicator, .fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n display: none;\n}";
1
+ const styles = "/**\n * Do not edit directly\n * Generated on Wed, 06 Sep 2023 09:40:36 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n --_text-field-gutter: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2.5);\n --_text-field-icon-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n display: inline-grid;\n width: 100%;\n gap: 4px;\n grid-template-columns: min-content 1fr max-content;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-300);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-600);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n /* @cssprop [--vvd-text-field-success-primary=var(--vvd-color-success-500)] */\n --_connotation-color-primary: var(--vvd-text-field-success-primary, var(--vvd-color-success-500));\n /* @cssprop [--vvd-text-field-success-backdrop=var(--vvd-color-success-50)] */\n --_connotation-color-backdrop: var(--vvd-text-field-success-backdrop, var(--vvd-color-success-50));\n /* @cssprop [--vvd-text-field-success-intermediate=var(--vvd-color-success-500)] */\n --_connotation-color-intermediate: var(--vvd-text-field-success-intermediate, var(--vvd-color-success-500));\n /* @cssprop [--vvd-text-field-success-firm=var(--vvd-color-success-600)] */\n --_connotation-color-firm: var(--vvd-text-field-success-firm, var(--vvd-color-success-600));\n /* @cssprop [--vvd-text-field-success-faint=var(--vvd-color-success-50)] */\n --_connotation-color-faint: var(--vvd-text-field-success-faint, var(--vvd-color-success-50));\n /* @cssprop [--vvd-text-field-success-soft=var(--vvd-color-success-100)] */\n --_connotation-color-soft: var(--vvd-text-field-success-soft, var(--vvd-color-success-100));\n}\n.base.connotation-alert {\n /* @cssprop [--vvd-text-field-alert-primary=var(--vvd-color-alert-500)] */\n --_connotation-color-primary: var(--vvd-text-field-alert-primary, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-text-field-alert-backdrop=var(--vvd-color-alert-50)] */\n --_connotation-color-backdrop: var(--vvd-text-field-alert-backdrop, var(--vvd-color-alert-50));\n /* @cssprop [--vvd-text-field-alert-intermediate=var(--vvd-color-alert-500)] */\n --_connotation-color-intermediate: var(--vvd-text-field-alert-intermediate, var(--vvd-color-alert-500));\n /* @cssprop [--vvd-text-field-alert-firm=var(--vvd-color-alert-600)] */\n --_connotation-color-firm: var(--vvd-text-field-alert-firm, var(--vvd-color-alert-600));\n /* @cssprop [--vvd-text-field-alert-faint=var(--vvd-color-alert-50)] */\n --_connotation-color-faint: var(--vvd-text-field-alert-faint, var(--vvd-color-alert-50));\n /* @cssprop [--vvd-text-field-alert-soft=var(--vvd-color-alert-100)] */\n --_connotation-color-soft: var(--vvd-text-field-alert-soft, var(--vvd-color-alert-100));\n}\n.base:not(.connotation-success, .connotation-alert) {\n /* @cssprop [--vvd-text-field-accent-primary=var(--vvd-color-canvas-text)] */\n --_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-text-field-accent-backdrop=var(--vvd-color-canvas)] */\n --_connotation-color-backdrop: var(--vvd-text-field-accent-backdrop, var(--vvd-color-canvas));\n /* @cssprop [--vvd-text-field-accent-intermediate=var(--vvd-color-neutral-500)] */\n --_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));\n /* @cssprop [--vvd-text-field-accent-firm=var(--vvd-color-canvas-text)] */\n --_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));\n /* @cssprop [--vvd-text-field-accent-faint=var(--vvd-color-neutral-50)] */\n --_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));\n /* @cssprop [--vvd-text-field-accent-soft=var(--vvd-color-neutral-100)] */\n --_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100));\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label {\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-typography-base);\n grid-column: 1/4;\n grid-row: 1;\n}\n.char-count + .label {\n grid-column: 1/3;\n}\n\n.char-count {\n color: var(--_low-ink-color);\n font: var(--vvd-typography-base);\n grid-column: 3/4;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n font: var(--vvd-typography-base);\n grid-column: 1/4;\n padding-block: 0;\n transition: color 0.2s, background-color 0.2s;\n /* Shape */\n}\n.fieldset::after {\n position: absolute;\n display: block;\n block-size: 100%;\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n content: \"\";\n inline-size: 100%;\n pointer-events: none;\n transition: box-shadow 0.2s;\n}\n.fieldset:focus-visible {\n outline: none;\n}\n.base > .fieldset {\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n border-radius: 24px;\n}\n\n.wrapper {\n block-size: 100%;\n border-radius: inherit;\n inline-size: 100%;\n}\n.wrapper:focus-visible {\n outline: none;\n}\n\n.control {\n width: 100%;\n box-sizing: border-box;\n border: 0 none;\n appearance: none; /* for box-shadow visibility on IOS */\n background-color: transparent;\n block-size: 100%;\n border-radius: inherit;\n color: inherit;\n font: inherit;\n padding-block: 0;\n padding-inline-end: var(--_text-field-gutter);\n padding-inline-start: var(--_text-field-gutter);\n}\n.control:disabled {\n cursor: not-allowed;\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n.control:focus-visible {\n outline: none;\n}\n.has-icon .control {\n padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);\n}\n\n.icon {\n position: absolute;\n z-index: 1;\n color: var(--_low-ink-color);\n font-size: var(--_text-field-icon-size);\n inset-block-start: 50%;\n inset-inline-start: calc(100% + var(--_text-field-gutter));\n line-height: 1;\n transform: translateY(-50%);\n}\n\n.leading-items-wrapper {\n position: relative;\n}\n.base.no-leading .leading-items-wrapper {\n display: none;\n}\n\n.action-items-wrapper {\n margin-inline-end: 4px;\n}\n.base:not(.action-items) .action-items-wrapper {\n display: none;\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.wrapper:not(:focus-visible, :focus-within) > .focus-indicator, .fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n display: none;\n}";
2
2
 
3
- export { css_248z as c };
3
+ export { styles as s };
@@ -59,7 +59,7 @@ const TextFieldType = {
59
59
  *
60
60
  * @public
61
61
  */
62
- class TextField extends FormAssociatedTextField {
62
+ let TextField$1 = class TextField extends FormAssociatedTextField {
63
63
  constructor() {
64
64
  super(...arguments);
65
65
  /**
@@ -178,40 +178,40 @@ class TextField extends FormAssociatedTextField {
178
178
  validate() {
179
179
  super.validate(this.control);
180
180
  }
181
- }
181
+ };
182
182
  __decorate([
183
183
  attr({ attribute: "readonly", mode: "boolean" })
184
- ], TextField.prototype, "readOnly", void 0);
184
+ ], TextField$1.prototype, "readOnly", void 0);
185
185
  __decorate([
186
186
  attr({ mode: "boolean" })
187
- ], TextField.prototype, "autofocus", void 0);
187
+ ], TextField$1.prototype, "autofocus", void 0);
188
188
  __decorate([
189
189
  attr
190
- ], TextField.prototype, "placeholder", void 0);
190
+ ], TextField$1.prototype, "placeholder", void 0);
191
191
  __decorate([
192
192
  attr
193
- ], TextField.prototype, "type", void 0);
193
+ ], TextField$1.prototype, "type", void 0);
194
194
  __decorate([
195
195
  attr
196
- ], TextField.prototype, "list", void 0);
196
+ ], TextField$1.prototype, "list", void 0);
197
197
  __decorate([
198
198
  attr({ converter: nullableNumberConverter })
199
- ], TextField.prototype, "maxlength", void 0);
199
+ ], TextField$1.prototype, "maxlength", void 0);
200
200
  __decorate([
201
201
  attr({ converter: nullableNumberConverter })
202
- ], TextField.prototype, "minlength", void 0);
202
+ ], TextField$1.prototype, "minlength", void 0);
203
203
  __decorate([
204
204
  attr
205
- ], TextField.prototype, "pattern", void 0);
205
+ ], TextField$1.prototype, "pattern", void 0);
206
206
  __decorate([
207
207
  attr({ converter: nullableNumberConverter })
208
- ], TextField.prototype, "size", void 0);
208
+ ], TextField$1.prototype, "size", void 0);
209
209
  __decorate([
210
210
  attr({ mode: "boolean" })
211
- ], TextField.prototype, "spellcheck", void 0);
211
+ ], TextField$1.prototype, "spellcheck", void 0);
212
212
  __decorate([
213
213
  observable
214
- ], TextField.prototype, "defaultSlottedNodes", void 0);
214
+ ], TextField$1.prototype, "defaultSlottedNodes", void 0);
215
215
  /**
216
216
  * Includes ARIA states and properties relating to the ARIA textbox role
217
217
  *
@@ -220,6 +220,6 @@ __decorate([
220
220
  class DelegatesARIATextbox {
221
221
  }
222
222
  applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
223
- applyMixins(TextField, StartEnd, DelegatesARIATextbox);
223
+ applyMixins(TextField$1, StartEnd, DelegatesARIATextbox);
224
224
 
225
- export { DelegatesARIATextbox as D, TextField as T };
225
+ export { DelegatesARIATextbox as D, TextField$1 as T };
@@ -29,7 +29,7 @@ function isTreeItemElement(el) {
29
29
  *
30
30
  * @public
31
31
  */
32
- class TreeItem extends FoundationElement {
32
+ let TreeItem$1 = class TreeItem extends FoundationElement {
33
33
  constructor() {
34
34
  super(...arguments);
35
35
  /**
@@ -121,31 +121,31 @@ class TreeItem extends FoundationElement {
121
121
  });
122
122
  return treeChildren ? treeChildren.length : 0;
123
123
  }
124
- }
124
+ };
125
125
  __decorate([
126
126
  attr({ mode: "boolean" })
127
- ], TreeItem.prototype, "expanded", void 0);
127
+ ], TreeItem$1.prototype, "expanded", void 0);
128
128
  __decorate([
129
129
  attr({ mode: "boolean" })
130
- ], TreeItem.prototype, "selected", void 0);
130
+ ], TreeItem$1.prototype, "selected", void 0);
131
131
  __decorate([
132
132
  attr({ mode: "boolean" })
133
- ], TreeItem.prototype, "disabled", void 0);
133
+ ], TreeItem$1.prototype, "disabled", void 0);
134
134
  __decorate([
135
135
  observable
136
- ], TreeItem.prototype, "focusable", void 0);
136
+ ], TreeItem$1.prototype, "focusable", void 0);
137
137
  __decorate([
138
138
  observable
139
- ], TreeItem.prototype, "childItems", void 0);
139
+ ], TreeItem$1.prototype, "childItems", void 0);
140
140
  __decorate([
141
141
  observable
142
- ], TreeItem.prototype, "items", void 0);
142
+ ], TreeItem$1.prototype, "items", void 0);
143
143
  __decorate([
144
144
  observable
145
- ], TreeItem.prototype, "nested", void 0);
145
+ ], TreeItem$1.prototype, "nested", void 0);
146
146
  __decorate([
147
147
  observable
148
- ], TreeItem.prototype, "renderCollapsedChildren", void 0);
149
- applyMixins(TreeItem, StartEnd);
148
+ ], TreeItem$1.prototype, "renderCollapsedChildren", void 0);
149
+ applyMixins(TreeItem$1, StartEnd);
150
150
 
151
- export { TreeItem as T, isTreeItemElement as i };
151
+ export { TreeItem$1 as T, isTreeItemElement as i };
@@ -1,4 +1,4 @@
1
- import { r as registerSideDrawer } from '../shared/definition44.js';
1
+ import { r as registerSideDrawer } from '../shared/definition40.js';
2
2
  import '../shared/index.js';
3
3
  import '../shared/when.js';
4
4
  import '../shared/class-names.js';
package/slider/index.js CHANGED
@@ -1,6 +1,6 @@
1
- import { r as registerSlider } from '../shared/definition45.js';
1
+ import { r as registerSlider } from '../shared/definition41.js';
2
2
  import '../shared/index.js';
3
- import '../shared/definition4.js';
3
+ import '../shared/definition55.js';
4
4
  import '../shared/focus.js';
5
5
  import '../shared/direction.js';
6
6
  import '../shared/numbers.js';
@@ -1,11 +1,11 @@
1
- import { r as registerSplitButton } from '../shared/definition46.js';
1
+ import { r as registerSplitButton } from '../shared/definition42.js';
2
2
  import '../shared/index.js';
3
- import '../shared/definition3.js';
3
+ import '../shared/definition24.js';
4
4
  import '../shared/icon.js';
5
5
  import '../shared/_has.js';
6
6
  import '../shared/class-names.js';
7
7
  import '../shared/when.js';
8
- import '../shared/definition4.js';
8
+ import '../shared/definition55.js';
9
9
  import '../shared/focus.js';
10
10
  import '../shared/affix.js';
11
11
  import '../shared/apply-mixins.js';