@vonage/vivid 3.54.0 → 3.55.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 (291) hide show
  1. package/accordion/index.cjs +0 -14
  2. package/accordion/index.js +0 -14
  3. package/accordion-item/index.cjs +0 -11
  4. package/accordion-item/index.js +0 -11
  5. package/action-group/index.cjs +0 -2
  6. package/action-group/index.js +0 -2
  7. package/alert/index.cjs +0 -23
  8. package/alert/index.js +0 -23
  9. package/appearance-ui/index.cjs +11 -12
  10. package/appearance-ui/index.js +11 -12
  11. package/audio-player/index.cjs +0 -28
  12. package/audio-player/index.js +0 -28
  13. package/avatar/index.cjs +0 -6
  14. package/avatar/index.js +0 -6
  15. package/badge/index.cjs +0 -9
  16. package/badge/index.js +0 -9
  17. package/banner/index.cjs +0 -22
  18. package/banner/index.js +0 -22
  19. package/breadcrumb/index.cjs +0 -8
  20. package/breadcrumb/index.js +0 -8
  21. package/breadcrumb-item/index.cjs +0 -15
  22. package/breadcrumb-item/index.js +0 -15
  23. package/button/index.cjs +0 -18
  24. package/button/index.js +0 -18
  25. package/calendar/index.cjs +0 -4
  26. package/calendar/index.js +0 -4
  27. package/calendar-event/index.cjs +0 -4
  28. package/calendar-event/index.js +0 -4
  29. package/card/index.cjs +0 -9
  30. package/card/index.js +0 -9
  31. package/checkbox/index.cjs +0 -14
  32. package/checkbox/index.js +0 -14
  33. package/combobox/index.cjs +0 -31
  34. package/combobox/index.js +0 -31
  35. package/custom-elements.json +132 -141
  36. package/data-grid/index.cjs +0 -11
  37. package/data-grid/index.js +0 -11
  38. package/date-picker/index.cjs +0 -34
  39. package/date-picker/index.js +0 -34
  40. package/date-range-picker/index.cjs +0 -34
  41. package/date-range-picker/index.js +0 -34
  42. package/dial-pad/index.cjs +0 -28
  43. package/dial-pad/index.js +0 -28
  44. package/dialog/index.cjs +0 -23
  45. package/dialog/index.js +0 -23
  46. package/divider/index.cjs +0 -3
  47. package/divider/index.js +0 -3
  48. package/elevation/index.cjs +0 -2
  49. package/elevation/index.js +0 -2
  50. package/empty-state/index.cjs +0 -7
  51. package/empty-state/index.js +0 -7
  52. package/fab/index.cjs +0 -15
  53. package/fab/index.js +0 -15
  54. package/file-picker/index.cjs +0 -23
  55. package/file-picker/index.js +0 -23
  56. package/header/index.cjs +0 -3
  57. package/header/index.js +0 -3
  58. package/icon/index.cjs +0 -5
  59. package/icon/index.js +0 -5
  60. package/index.cjs +0 -44
  61. package/index.js +0 -44
  62. package/layout/index.cjs +0 -2
  63. package/layout/index.js +0 -2
  64. package/lib/combobox/combobox.d.ts +1 -0
  65. package/lib/dial-pad/dial-pad.d.ts +1 -0
  66. package/lib/menu/menu.d.ts +1 -3
  67. package/listbox/index.cjs +1 -15
  68. package/listbox/index.js +1 -15
  69. package/menu/index.cjs +0 -25
  70. package/menu/index.js +0 -25
  71. package/menu-item/index.cjs +0 -15
  72. package/menu-item/index.js +0 -15
  73. package/nav/index.cjs +0 -1
  74. package/nav/index.js +0 -1
  75. package/nav-disclosure/index.cjs +0 -10
  76. package/nav-disclosure/index.js +0 -10
  77. package/nav-item/index.cjs +0 -15
  78. package/nav-item/index.js +0 -15
  79. package/note/index.cjs +0 -11
  80. package/note/index.js +0 -11
  81. package/number-field/index.cjs +0 -26
  82. package/number-field/index.js +0 -26
  83. package/option/index.cjs +0 -13
  84. package/option/index.js +0 -13
  85. package/package.json +1 -1
  86. package/pagination/index.cjs +0 -21
  87. package/pagination/index.js +0 -21
  88. package/popup/index.cjs +0 -20
  89. package/popup/index.js +0 -20
  90. package/progress/index.cjs +0 -4
  91. package/progress/index.js +0 -4
  92. package/progress-ring/index.cjs +0 -4
  93. package/progress-ring/index.js +0 -4
  94. package/radio/index.cjs +0 -6
  95. package/radio/index.js +0 -6
  96. package/radio-group/index.cjs +0 -9
  97. package/radio-group/index.js +0 -9
  98. package/range-slider/index.cjs +0 -17
  99. package/range-slider/index.js +0 -17
  100. package/select/index.cjs +0 -31
  101. package/select/index.js +0 -31
  102. package/selectable-box/index.cjs +0 -18
  103. package/selectable-box/index.js +0 -18
  104. package/shared/affix.cjs +6 -7
  105. package/shared/affix.js +6 -7
  106. package/shared/anchored.cjs +39 -46
  107. package/shared/anchored.js +39 -46
  108. package/shared/calendar-event.cjs +10 -11
  109. package/shared/calendar-event.js +10 -11
  110. package/shared/definition.cjs +8 -9
  111. package/shared/definition.js +8 -9
  112. package/shared/definition10.cjs +1 -1
  113. package/shared/definition10.js +1 -1
  114. package/shared/definition11.cjs +20 -21
  115. package/shared/definition11.js +20 -21
  116. package/shared/definition12.cjs +1 -1
  117. package/shared/definition12.js +1 -1
  118. package/shared/definition13.cjs +9 -14
  119. package/shared/definition13.js +9 -14
  120. package/shared/definition14.cjs +13 -14
  121. package/shared/definition14.js +13 -14
  122. package/shared/definition15.cjs +1 -1
  123. package/shared/definition15.js +1 -1
  124. package/shared/definition16.cjs +16 -3
  125. package/shared/definition16.js +16 -3
  126. package/shared/definition17.cjs +155 -166
  127. package/shared/definition17.js +155 -166
  128. package/shared/definition19.cjs +2 -2
  129. package/shared/definition19.js +2 -2
  130. package/shared/definition2.cjs +1 -1
  131. package/shared/definition2.js +1 -1
  132. package/shared/definition20.cjs +22 -19
  133. package/shared/definition20.js +22 -19
  134. package/shared/definition21.cjs +17 -18
  135. package/shared/definition21.js +17 -18
  136. package/shared/definition22.cjs +2 -2
  137. package/shared/definition22.js +2 -2
  138. package/shared/definition23.cjs +7 -8
  139. package/shared/definition23.js +7 -8
  140. package/shared/definition24.cjs +7 -8
  141. package/shared/definition24.js +7 -8
  142. package/shared/definition25.cjs +2 -2
  143. package/shared/definition25.js +2 -2
  144. package/shared/definition26.cjs +6 -7
  145. package/shared/definition26.js +6 -7
  146. package/shared/definition27.cjs +2 -2
  147. package/shared/definition27.js +2 -2
  148. package/shared/definition28.cjs +9 -10
  149. package/shared/definition28.js +9 -10
  150. package/shared/definition29.cjs +23 -49
  151. package/shared/definition29.js +23 -49
  152. package/shared/definition3.cjs +9 -10
  153. package/shared/definition3.js +9 -10
  154. package/shared/definition30.cjs +4 -2
  155. package/shared/definition30.js +4 -2
  156. package/shared/definition31.cjs +9 -10
  157. package/shared/definition31.js +9 -10
  158. package/shared/definition32.cjs +1 -1
  159. package/shared/definition32.js +1 -1
  160. package/shared/definition33.cjs +1 -1
  161. package/shared/definition33.js +1 -1
  162. package/shared/definition34.cjs +6 -7
  163. package/shared/definition34.js +6 -7
  164. package/shared/definition35.cjs +1 -1
  165. package/shared/definition35.js +1 -1
  166. package/shared/definition36.cjs +6 -7
  167. package/shared/definition36.js +6 -7
  168. package/shared/definition37.cjs +1 -1
  169. package/shared/definition37.js +1 -1
  170. package/shared/definition38.cjs +7 -8
  171. package/shared/definition38.js +7 -8
  172. package/shared/definition39.cjs +8 -9
  173. package/shared/definition39.js +8 -9
  174. package/shared/definition4.cjs +14 -15
  175. package/shared/definition4.js +14 -15
  176. package/shared/definition40.cjs +7 -8
  177. package/shared/definition40.js +7 -8
  178. package/shared/definition41.cjs +1 -1
  179. package/shared/definition41.js +1 -1
  180. package/shared/definition42.cjs +3 -3
  181. package/shared/definition42.js +3 -3
  182. package/shared/definition43.cjs +1 -1
  183. package/shared/definition43.js +1 -1
  184. package/shared/definition44.cjs +11 -12
  185. package/shared/definition44.js +11 -12
  186. package/shared/definition45.cjs +8 -9
  187. package/shared/definition45.js +8 -9
  188. package/shared/definition46.cjs +9 -10
  189. package/shared/definition46.js +9 -10
  190. package/shared/definition47.cjs +15 -16
  191. package/shared/definition47.js +15 -16
  192. package/shared/definition48.cjs +6 -7
  193. package/shared/definition48.js +6 -7
  194. package/shared/definition5.cjs +17 -18
  195. package/shared/definition5.js +17 -18
  196. package/shared/definition50.cjs +9 -10
  197. package/shared/definition50.js +9 -10
  198. package/shared/definition51.cjs +8 -9
  199. package/shared/definition51.js +8 -9
  200. package/shared/definition52.cjs +5 -6
  201. package/shared/definition52.js +5 -6
  202. package/shared/definition53.cjs +12 -13
  203. package/shared/definition53.js +12 -13
  204. package/shared/definition54.cjs +2 -2
  205. package/shared/definition54.js +2 -2
  206. package/shared/definition55.cjs +1 -11
  207. package/shared/definition55.js +1 -11
  208. package/shared/definition56.cjs +1 -1
  209. package/shared/definition56.js +1 -1
  210. package/shared/definition57.cjs +1 -1
  211. package/shared/definition57.js +1 -1
  212. package/shared/definition58.cjs +1 -1
  213. package/shared/definition58.js +1 -1
  214. package/shared/definition59.cjs +5 -6
  215. package/shared/definition59.js +5 -6
  216. package/shared/definition6.cjs +10 -11
  217. package/shared/definition6.js +10 -11
  218. package/shared/definition60.cjs +1 -1
  219. package/shared/definition60.js +1 -1
  220. package/shared/definition61.cjs +11 -15
  221. package/shared/definition61.js +11 -15
  222. package/shared/definition62.cjs +6 -7
  223. package/shared/definition62.js +6 -7
  224. package/shared/definition63.cjs +11 -15
  225. package/shared/definition63.js +11 -15
  226. package/shared/definition7.cjs +8 -9
  227. package/shared/definition7.js +8 -9
  228. package/shared/definition8.cjs +13 -14
  229. package/shared/definition8.js +13 -14
  230. package/shared/definition9.cjs +5 -6
  231. package/shared/definition9.js +5 -6
  232. package/shared/icon.cjs +3 -7
  233. package/shared/icon.js +3 -7
  234. package/shared/index.cjs +38 -19
  235. package/shared/index.js +38 -19
  236. package/shared/index2.cjs +16 -19
  237. package/shared/index2.js +16 -19
  238. package/shared/listbox.cjs +6 -7
  239. package/shared/listbox.js +6 -7
  240. package/shared/presentationDate.cjs +40 -50
  241. package/shared/presentationDate.js +40 -50
  242. package/shared/radio.cjs +6 -7
  243. package/shared/radio.js +6 -7
  244. package/shared/slider.template.cjs +1 -1
  245. package/shared/slider.template.js +1 -1
  246. package/shared/text-anchor.cjs +6 -7
  247. package/shared/text-anchor.js +6 -7
  248. package/shared/text-field.cjs +1 -1
  249. package/shared/text-field.js +1 -1
  250. package/side-drawer/index.cjs +0 -3
  251. package/side-drawer/index.js +0 -3
  252. package/slider/index.cjs +0 -10
  253. package/slider/index.js +0 -10
  254. package/split-button/index.cjs +0 -13
  255. package/split-button/index.js +0 -13
  256. package/styles/core/all.css +1 -1
  257. package/styles/core/theme.css +1 -1
  258. package/styles/core/typography.css +1 -1
  259. package/styles/tokens/theme-dark.css +4 -4
  260. package/styles/tokens/theme-light.css +4 -4
  261. package/styles/tokens/vivid-2-compat.css +1 -1
  262. package/switch/index.cjs +0 -8
  263. package/switch/index.js +0 -8
  264. package/tab/index.cjs +0 -9
  265. package/tab/index.js +0 -9
  266. package/tab-panel/index.cjs +0 -1
  267. package/tab-panel/index.js +0 -1
  268. package/tabs/index.cjs +0 -16
  269. package/tabs/index.js +0 -16
  270. package/tag/index.cjs +0 -9
  271. package/tag/index.js +0 -9
  272. package/tag-group/index.cjs +0 -2
  273. package/tag-group/index.js +0 -2
  274. package/text-anchor/index.cjs +0 -10
  275. package/text-anchor/index.js +0 -10
  276. package/text-area/index.cjs +0 -19
  277. package/text-area/index.js +0 -19
  278. package/text-field/index.cjs +0 -20
  279. package/text-field/index.js +0 -20
  280. package/time-picker/index.cjs +0 -31
  281. package/time-picker/index.js +0 -31
  282. package/toggletip/index.cjs +0 -22
  283. package/toggletip/index.js +0 -22
  284. package/tooltip/index.cjs +0 -22
  285. package/tooltip/index.js +0 -22
  286. package/tree-item/index.cjs +0 -14
  287. package/tree-item/index.js +0 -14
  288. package/tree-view/index.cjs +0 -9
  289. package/tree-view/index.js +0 -9
  290. package/video-player/index.cjs +0 -12
  291. package/video-player/index.js +0 -12
@@ -203,13 +203,12 @@ applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
203
203
  applyMixins(ListboxOption$1, StartEnd, DelegatesARIAListboxOption);
204
204
 
205
205
  var __defProp = Object.defineProperty;
206
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
207
206
  var __decorateClass = (decorators, target, key, kind) => {
208
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
207
+ var result = void 0 ;
209
208
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
210
209
  if (decorator = decorators[i])
211
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
212
- if (kind && result)
210
+ result = (decorator(target, key, result) ) || result;
211
+ if (result)
213
212
  __defProp(target, key, result);
214
213
  return result;
215
214
  };
@@ -233,12 +232,12 @@ __decorateClass([
233
232
  attr({
234
233
  attribute: "text"
235
234
  })
236
- ], ListboxOption.prototype, "_text", 2);
235
+ ], ListboxOption.prototype, "_text");
237
236
  __decorateClass([
238
237
  attr({
239
238
  attribute: "label"
240
239
  })
241
- ], ListboxOption.prototype, "_label", 2);
240
+ ], ListboxOption.prototype, "_label");
242
241
  applyMixins(ListboxOption, AffixIconWithTrailing);
243
242
 
244
243
  const getClasses = ({ icon, disabled, selected, checked }) => classNames(
@@ -267,7 +266,7 @@ const ListboxOptionTemplate = (context) => {
267
266
  `;
268
267
  };
269
268
 
270
- const styles = ":host([disabled]){cursor:not-allowed}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
269
+ const styles = ":host([disabled]){cursor:not-allowed}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
271
270
 
272
271
  const listboxOptionDefinition = ListboxOption.compose({
273
272
  baseName: "option",
@@ -10,7 +10,7 @@ const repeat = require('./repeat.cjs');
10
10
  const classNames = require('./class-names.cjs');
11
11
  const when = require('./when.cjs');
12
12
 
13
- const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button[size=normal]{--base-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}\n";
13
+ const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
14
14
 
15
15
  var __defProp = Object.defineProperty;
16
16
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -8,7 +8,7 @@ import { r as repeat } from './repeat.js';
8
8
  import { c as classNames } from './class-names.js';
9
9
  import { w as when } from './when.js';
10
10
 
11
- const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button[size=condensed]{--base-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button[size=normal]{--base-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}\n";
11
+ const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
12
12
 
13
13
  var __defProp = Object.defineProperty;
14
14
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5,16 +5,15 @@ const baseProgress = require('./base-progress.cjs');
5
5
  const when = require('./when.cjs');
6
6
  const classNames = require('./class-names.cjs');
7
7
 
8
- const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.base.size--5{--_size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--4{--_size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--3{--_size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--2{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--1{--_size:calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-1{--_size:calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-2{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-3{--_size:calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-4{--_size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-5{--_size:calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}\n";
8
+ const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
9
9
 
10
10
  var __defProp = Object.defineProperty;
11
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
12
11
  var __decorateClass = (decorators, target, key, kind) => {
13
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
12
+ var result = void 0 ;
14
13
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
15
14
  if (decorator = decorators[i])
16
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
17
- if (kind && result)
15
+ result = (decorator(target, key, result) ) || result;
16
+ if (result)
18
17
  __defProp(target, key, result);
19
18
  return result;
20
19
  };
@@ -26,13 +25,13 @@ class ProgressRing extends baseProgress.BaseProgress {
26
25
  }
27
26
  __decorateClass([
28
27
  index.attr({ attribute: "aria-label" })
29
- ], ProgressRing.prototype, "ariaLabel", 2);
28
+ ], ProgressRing.prototype, "ariaLabel");
30
29
  __decorateClass([
31
30
  index.attr
32
- ], ProgressRing.prototype, "connotation", 2);
31
+ ], ProgressRing.prototype, "connotation");
33
32
  __decorateClass([
34
33
  index.attr
35
- ], ProgressRing.prototype, "size", 2);
34
+ ], ProgressRing.prototype, "size");
36
35
 
37
36
  const getClasses = ({ connotation, size, paused }) => classNames.classNames(
38
37
  "base",
@@ -3,16 +3,15 @@ import { B as BaseProgress } from './base-progress.js';
3
3
  import { w as when } from './when.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
 
6
- const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))))}.base.size--5{--_size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--4{--_size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--3{--_size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--2{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size--1{--_size:calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-1{--_size:calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-2{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-3{--_size:calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-4{--_size:calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-5{--_size:calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}\n";
6
+ const styles = ".base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500))}.base.connotation-success{--_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
7
7
 
8
8
  var __defProp = Object.defineProperty;
9
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
10
9
  var __decorateClass = (decorators, target, key, kind) => {
11
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
10
+ var result = void 0 ;
12
11
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
13
12
  if (decorator = decorators[i])
14
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
15
- if (kind && result)
13
+ result = (decorator(target, key, result) ) || result;
14
+ if (result)
16
15
  __defProp(target, key, result);
17
16
  return result;
18
17
  };
@@ -24,13 +23,13 @@ class ProgressRing extends BaseProgress {
24
23
  }
25
24
  __decorateClass([
26
25
  attr({ attribute: "aria-label" })
27
- ], ProgressRing.prototype, "ariaLabel", 2);
26
+ ], ProgressRing.prototype, "ariaLabel");
28
27
  __decorateClass([
29
28
  attr
30
- ], ProgressRing.prototype, "connotation", 2);
29
+ ], ProgressRing.prototype, "connotation");
31
30
  __decorateClass([
32
31
  attr
33
- ], ProgressRing.prototype, "size", 2);
32
+ ], ProgressRing.prototype, "size");
34
33
 
35
34
  const getClasses = ({ connotation, size, paused }) => classNames(
36
35
  "base",
@@ -5,16 +5,15 @@ const baseProgress = require('./base-progress.cjs');
5
5
  const when = require('./when.cjs');
6
6
  const classNames = require('./class-names.cjs');
7
7
 
8
- const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}\n";
8
+ const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
9
9
 
10
10
  var __defProp = Object.defineProperty;
11
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
12
11
  var __decorateClass = (decorators, target, key, kind) => {
13
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
12
+ var result = void 0 ;
14
13
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
15
14
  if (decorator = decorators[i])
16
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
17
- if (kind && result)
15
+ result = (decorator(target, key, result) ) || result;
16
+ if (result)
18
17
  __defProp(target, key, result);
19
18
  return result;
20
19
  };
@@ -27,16 +26,16 @@ class Progress extends baseProgress.BaseProgress {
27
26
  }
28
27
  __decorateClass([
29
28
  index.attr({ attribute: "aria-label" })
30
- ], Progress.prototype, "ariaLabel", 2);
29
+ ], Progress.prototype, "ariaLabel");
31
30
  __decorateClass([
32
31
  index.attr()
33
- ], Progress.prototype, "shape", 2);
32
+ ], Progress.prototype, "shape");
34
33
  __decorateClass([
35
34
  index.attr()
36
- ], Progress.prototype, "connotation", 2);
35
+ ], Progress.prototype, "connotation");
37
36
  __decorateClass([
38
37
  index.attr({ mode: "boolean" })
39
- ], Progress.prototype, "reverse", 2);
38
+ ], Progress.prototype, "reverse");
40
39
 
41
40
  const getClasses = ({ connotation, shape, reverse, paused }) => classNames.classNames(
42
41
  "base",
@@ -3,16 +3,15 @@ import { B as BaseProgress } from './base-progress.js';
3
3
  import { w as when } from './when.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
 
6
- const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}\n";
6
+ const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
7
7
 
8
8
  var __defProp = Object.defineProperty;
9
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
10
9
  var __decorateClass = (decorators, target, key, kind) => {
11
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
10
+ var result = void 0 ;
12
11
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
13
12
  if (decorator = decorators[i])
14
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
15
- if (kind && result)
13
+ result = (decorator(target, key, result) ) || result;
14
+ if (result)
16
15
  __defProp(target, key, result);
17
16
  return result;
18
17
  };
@@ -25,16 +24,16 @@ class Progress extends BaseProgress {
25
24
  }
26
25
  __decorateClass([
27
26
  attr({ attribute: "aria-label" })
28
- ], Progress.prototype, "ariaLabel", 2);
27
+ ], Progress.prototype, "ariaLabel");
29
28
  __decorateClass([
30
29
  attr()
31
- ], Progress.prototype, "shape", 2);
30
+ ], Progress.prototype, "shape");
32
31
  __decorateClass([
33
32
  attr()
34
- ], Progress.prototype, "connotation", 2);
33
+ ], Progress.prototype, "connotation");
35
34
  __decorateClass([
36
35
  attr({ mode: "boolean" })
37
- ], Progress.prototype, "reverse", 2);
36
+ ], Progress.prototype, "reverse");
38
37
 
39
38
  const getClasses = ({ connotation, shape, reverse, paused }) => classNames(
40
39
  "base",
@@ -13,16 +13,15 @@ const button = require('./button.cjs');
13
13
  const when = require('./when.cjs');
14
14
  const classNames = require('./class-names.cjs');
15
15
 
16
- const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}\n";
16
+ const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
17
17
 
18
18
  var __defProp = Object.defineProperty;
19
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
20
19
  var __decorateClass = (decorators, target, key, kind) => {
21
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
20
+ var result = void 0 ;
22
21
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
23
22
  if (decorator = decorators[i])
24
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
25
- if (kind && result)
23
+ result = (decorator(target, key, result) ) || result;
24
+ if (result)
26
25
  __defProp(target, key, result);
27
26
  return result;
28
27
  };
@@ -110,37 +109,37 @@ class Alert extends index.FoundationElement {
110
109
  }
111
110
  __decorateClass([
112
111
  index.attr({ attribute: "dismiss-button-aria-label" })
113
- ], Alert.prototype, "dismissButtonAriaLabel", 2);
112
+ ], Alert.prototype, "dismissButtonAriaLabel");
114
113
  __decorateClass([
115
114
  index.attr({ mode: "boolean" })
116
- ], Alert.prototype, "removable", 2);
115
+ ], Alert.prototype, "removable");
117
116
  __decorateClass([
118
117
  index.attr({ mode: "fromView" })
119
- ], Alert.prototype, "placement", 2);
118
+ ], Alert.prototype, "placement");
120
119
  __decorateClass([
121
120
  index.attr
122
- ], Alert.prototype, "headline", 2);
121
+ ], Alert.prototype, "headline");
123
122
  __decorateClass([
124
123
  index.attr
125
- ], Alert.prototype, "text", 2);
124
+ ], Alert.prototype, "text");
126
125
  __decorateClass([
127
126
  index.attr
128
- ], Alert.prototype, "icon", 2);
127
+ ], Alert.prototype, "icon");
129
128
  __decorateClass([
130
129
  index.attr({
131
130
  mode: "fromView",
132
131
  converter: index.nullableNumberConverter
133
132
  })
134
- ], Alert.prototype, "timeoutms", 2);
133
+ ], Alert.prototype, "timeoutms");
135
134
  __decorateClass([
136
135
  index.attr
137
- ], Alert.prototype, "connotation", 2);
136
+ ], Alert.prototype, "connotation");
138
137
  __decorateClass([
139
138
  index.attr
140
- ], Alert.prototype, "strategy", 2);
139
+ ], Alert.prototype, "strategy");
141
140
  __decorateClass([
142
141
  index.attr({ mode: "boolean" })
143
- ], Alert.prototype, "open", 2);
142
+ ], Alert.prototype, "open");
144
143
  applyMixins.applyMixins(Alert, affix.AffixIcon);
145
144
  applyMixins.applyMixins(Alert, localized.Localized);
146
145
 
@@ -11,16 +11,15 @@ import { B as Button$1 } from './button.js';
11
11
  import { w as when } from './when.js';
12
12
  import { c as classNames } from './class-names.js';
13
13
 
14
- const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}\n";
14
+ const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
15
15
 
16
16
  var __defProp = Object.defineProperty;
17
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
18
17
  var __decorateClass = (decorators, target, key, kind) => {
19
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
18
+ var result = void 0 ;
20
19
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
21
20
  if (decorator = decorators[i])
22
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
23
- if (kind && result)
21
+ result = (decorator(target, key, result) ) || result;
22
+ if (result)
24
23
  __defProp(target, key, result);
25
24
  return result;
26
25
  };
@@ -108,37 +107,37 @@ class Alert extends FoundationElement {
108
107
  }
109
108
  __decorateClass([
110
109
  attr({ attribute: "dismiss-button-aria-label" })
111
- ], Alert.prototype, "dismissButtonAriaLabel", 2);
110
+ ], Alert.prototype, "dismissButtonAriaLabel");
112
111
  __decorateClass([
113
112
  attr({ mode: "boolean" })
114
- ], Alert.prototype, "removable", 2);
113
+ ], Alert.prototype, "removable");
115
114
  __decorateClass([
116
115
  attr({ mode: "fromView" })
117
- ], Alert.prototype, "placement", 2);
116
+ ], Alert.prototype, "placement");
118
117
  __decorateClass([
119
118
  attr
120
- ], Alert.prototype, "headline", 2);
119
+ ], Alert.prototype, "headline");
121
120
  __decorateClass([
122
121
  attr
123
- ], Alert.prototype, "text", 2);
122
+ ], Alert.prototype, "text");
124
123
  __decorateClass([
125
124
  attr
126
- ], Alert.prototype, "icon", 2);
125
+ ], Alert.prototype, "icon");
127
126
  __decorateClass([
128
127
  attr({
129
128
  mode: "fromView",
130
129
  converter: nullableNumberConverter
131
130
  })
132
- ], Alert.prototype, "timeoutms", 2);
131
+ ], Alert.prototype, "timeoutms");
133
132
  __decorateClass([
134
133
  attr
135
- ], Alert.prototype, "connotation", 2);
134
+ ], Alert.prototype, "connotation");
136
135
  __decorateClass([
137
136
  attr
138
- ], Alert.prototype, "strategy", 2);
137
+ ], Alert.prototype, "strategy");
139
138
  __decorateClass([
140
139
  attr({ mode: "boolean" })
141
- ], Alert.prototype, "open", 2);
140
+ ], Alert.prototype, "open");
142
141
  applyMixins(Alert, AffixIcon);
143
142
  applyMixins(Alert, Localized);
144
143
 
@@ -3,11 +3,11 @@
3
3
  const index = require('./index.cjs');
4
4
  const direction = require('./direction.cjs');
5
5
  const keyCodes = require('./key-codes.cjs');
6
- const aria = require('./aria.cjs');
6
+ const aria = require('./aria2.cjs');
7
7
  const radio = require('./radio.cjs');
8
8
  const slotted = require('./slotted.cjs');
9
9
  const when = require('./when.cjs');
10
- const aria$1 = require('./aria2.cjs');
10
+ const aria$1 = require('./aria.cjs');
11
11
 
12
12
  /**
13
13
  * An Radio Group Custom HTML Element.
@@ -395,16 +395,15 @@ index.__decorate([
395
395
  index.observable
396
396
  ], RadioGroup$1.prototype, "slottedRadioButtons", void 0);
397
397
 
398
- const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}\n";
398
+ const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
399
399
 
400
400
  var __defProp = Object.defineProperty;
401
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
402
401
  var __decorateClass = (decorators, target, key, kind) => {
403
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
402
+ var result = void 0 ;
404
403
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
405
404
  if (decorator = decorators[i])
406
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
407
- if (kind && result)
405
+ result = (decorator(target, key, result) ) || result;
406
+ if (result)
408
407
  __defProp(target, key, result);
409
408
  return result;
410
409
  };
@@ -412,7 +411,7 @@ class RadioGroup extends RadioGroup$1 {
412
411
  }
413
412
  __decorateClass([
414
413
  index.attr
415
- ], RadioGroup.prototype, "label", 2);
414
+ ], RadioGroup.prototype, "label");
416
415
 
417
416
  const RadioGroupTemplate = (context) => {
418
417
  return index.html`
@@ -1,11 +1,11 @@
1
1
  import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
2
2
  import { D as Direction, g as getDirection } from './direction.js';
3
3
  import { h as keyArrowRight, i as keyArrowLeft, A as ArrowKeys, e as keyArrowUp, f as keyArrowDown, k as keyEnter } from './key-codes.js';
4
- import { O as Orientation } from './aria.js';
4
+ import { O as Orientation } from './aria2.js';
5
5
  import { R as Radio } from './radio.js';
6
6
  import { s as slotted, e as elements } from './slotted.js';
7
7
  import { w as when } from './when.js';
8
- import { O as Orientation$1 } from './aria2.js';
8
+ import { O as Orientation$1 } from './aria.js';
9
9
 
10
10
  /**
11
11
  * An Radio Group Custom HTML Element.
@@ -393,16 +393,15 @@ __decorate([
393
393
  observable
394
394
  ], RadioGroup$1.prototype, "slottedRadioButtons", void 0);
395
395
 
396
- const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}\n";
396
+ const styles = ".positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}label+.positioning-region{margin-block-start:8px}label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
397
397
 
398
398
  var __defProp = Object.defineProperty;
399
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
400
399
  var __decorateClass = (decorators, target, key, kind) => {
401
- var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
400
+ var result = void 0 ;
402
401
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
403
402
  if (decorator = decorators[i])
404
- result = (kind ? decorator(target, key, result) : decorator(result)) || result;
405
- if (kind && result)
403
+ result = (decorator(target, key, result) ) || result;
404
+ if (result)
406
405
  __defProp(target, key, result);
407
406
  return result;
408
407
  };
@@ -410,7 +409,7 @@ class RadioGroup extends RadioGroup$1 {
410
409
  }
411
410
  __decorateClass([
412
411
  attr
413
- ], RadioGroup.prototype, "label", 2);
412
+ ], RadioGroup.prototype, "label");
414
413
 
415
414
  const RadioGroupTemplate = (context) => {
416
415
  return html`
@@ -5,7 +5,7 @@ const radio = require('./radio.cjs');
5
5
  const when = require('./when.cjs');
6
6
  const classNames = require('./class-names.cjs');
7
7
 
8
- const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,: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(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,: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:where(.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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}\n";
8
+ const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,: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(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,: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:where(.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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}";
9
9
 
10
10
  const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames.classNames(
11
11
  "base",
@@ -3,7 +3,7 @@ import { R as Radio } from './radio.js';
3
3
  import { w as when } from './when.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
 
6
- const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,: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(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,: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:where(.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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}\n";
6
+ const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base:where(.hover,: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(--_connotation-color-fierce)}.base:where(.checked,:checked):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base:where(.checked,:checked):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base:where(.disabled,: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:where(.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)}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:\"\";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-inset: -3px;--focus-stroke-gap-color: transparent}:host(:focus-visible) .control:before{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:inherit;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));content:\"\";inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}.focus-indicator{--focus-inset: -3px;--focus-stroke-gap-color: transparent;border-radius:50%}:host(:not(:focus-visible)) .focus-indicator{display:none}";
7
7
 
8
8
  const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames(
9
9
  "base",