@vonage/vivid 4.21.1 → 4.23.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 (231) hide show
  1. package/custom-elements.json +2055 -640
  2. package/index.cjs +1 -1
  3. package/index.js +2 -2
  4. package/lib/accordion-item/accordion-item.d.ts +11 -5
  5. package/lib/action-group/action-group.d.ts +8 -6
  6. package/lib/alert/alert.d.ts +21 -9
  7. package/lib/audio-player/audio-player.d.ts +13 -6
  8. package/lib/badge/badge.d.ts +11 -5
  9. package/lib/banner/banner.d.ts +26 -12
  10. package/lib/breadcrumb/breadcrumb.d.ts +333 -1
  11. package/lib/breadcrumb/breadcrumb.template.d.ts +2 -3
  12. package/lib/breadcrumb-item/breadcrumb-item.d.ts +8 -6
  13. package/lib/button/button.d.ts +11 -5
  14. package/lib/calendar/calendar.d.ts +3 -1
  15. package/lib/calendar-event/calendar-event.d.ts +333 -1
  16. package/lib/checkbox/checkbox.d.ts +8 -6
  17. package/lib/combobox/combobox.d.ts +11 -5
  18. package/lib/date-picker/date-picker.d.ts +74 -50
  19. package/lib/date-range-picker/date-range-picker.d.ts +38 -26
  20. package/lib/date-time-picker/date-time-picker.d.ts +76 -52
  21. package/lib/dial-pad/dial-pad.d.ts +11 -5
  22. package/lib/dialog/dialog.d.ts +16 -8
  23. package/lib/divider/divider.d.ts +8 -6
  24. package/lib/enums.d.ts +0 -4
  25. package/lib/fab/fab.d.ts +11 -5
  26. package/lib/file-picker/file-picker.d.ts +338 -1
  27. package/lib/header/header.d.ts +333 -1
  28. package/lib/menu/menu.d.ts +16 -8
  29. package/lib/menu-item/menu-item.d.ts +338 -2
  30. package/lib/nav/nav.d.ts +333 -1
  31. package/lib/nav-disclosure/nav-disclosure.d.ts +16 -8
  32. package/lib/nav-item/nav-item.d.ts +11 -5
  33. package/lib/note/note.d.ts +11 -5
  34. package/lib/number-field/number-field.d.ts +26 -12
  35. package/lib/option/option.d.ts +341 -3
  36. package/lib/progress/progress.d.ts +8 -6
  37. package/lib/progress-ring/progress-ring.d.ts +8 -6
  38. package/lib/radio-group/radio-group.d.ts +333 -1
  39. package/lib/range-slider/range-slider.d.ts +11 -5
  40. package/lib/rich-text-editor/facades/prose-mirror-vivid.schema.d.ts +1 -1
  41. package/lib/rich-text-editor/facades/vivid-prose-mirror.facade.d.ts +7 -1
  42. package/lib/rich-text-editor/menubar/consts.d.ts +18 -0
  43. package/lib/rich-text-editor/menubar/menubar.d.ts +3 -0
  44. package/lib/rich-text-editor/rich-text-editor.d.ts +14 -3
  45. package/lib/searchable-select/option-tag.d.ts +14 -6
  46. package/lib/searchable-select/searchable-select.d.ts +349 -7
  47. package/lib/select/select.d.ts +339 -3
  48. package/lib/selectable-box/selectable-box.d.ts +8 -6
  49. package/lib/slider/slider.d.ts +16 -8
  50. package/lib/split-button/split-button.d.ts +26 -12
  51. package/lib/switch/switch.d.ts +8 -6
  52. package/lib/tab/tab.d.ts +349 -7
  53. package/lib/tab-panel/tab-panel.d.ts +333 -1
  54. package/lib/tabs/definition.d.ts +1 -0
  55. package/lib/tabs/tabs.d.ts +6 -1
  56. package/lib/tag/tag.d.ts +338 -2
  57. package/lib/tag-group/tag-group.d.ts +8 -6
  58. package/lib/text-anchor/text-anchor.d.ts +16 -8
  59. package/lib/text-area/text-area.d.ts +8 -6
  60. package/lib/text-field/text-field.d.ts +16 -8
  61. package/lib/time-picker/time-picker.d.ts +38 -26
  62. package/lib/toggletip/toggletip.d.ts +9 -3
  63. package/lib/tooltip/tooltip.d.ts +9 -3
  64. package/lib/tree-item/tree-item.d.ts +338 -2
  65. package/lib/tree-view/tree-view.d.ts +333 -1
  66. package/lib/video-player/video-player.d.ts +14 -6
  67. package/package.json +1 -1
  68. package/shared/affix.js +1 -1
  69. package/shared/aria/aria-change-subscription.d.ts +6 -0
  70. package/shared/aria/aria-mixin.d.ts +338 -0
  71. package/shared/aria/delegate-aria-behavior.d.ts +31 -0
  72. package/shared/aria/delegates-aria.d.ts +14 -9
  73. package/shared/aria/host-semantics-behavior.d.ts +22 -0
  74. package/shared/aria/host-semantics.d.ts +337 -0
  75. package/shared/attribute-binding-behaviour.cjs +41 -0
  76. package/shared/attribute-binding-behaviour.js +39 -0
  77. package/shared/calendar-event.cjs +2 -1
  78. package/shared/calendar-event.js +2 -1
  79. package/shared/definition.js +1 -1
  80. package/shared/definition10.cjs +8 -2
  81. package/shared/definition10.js +9 -3
  82. package/shared/definition11.cjs +4 -28
  83. package/shared/definition11.js +5 -29
  84. package/shared/definition12.cjs +4 -1
  85. package/shared/definition12.js +5 -2
  86. package/shared/definition13.js +1 -1
  87. package/shared/definition14.js +1 -1
  88. package/shared/definition15.cjs +9 -8
  89. package/shared/definition15.js +11 -10
  90. package/shared/definition16.cjs +1 -1
  91. package/shared/definition16.js +2 -2
  92. package/shared/definition17.js +1 -1
  93. package/shared/definition18.js +1 -1
  94. package/shared/definition19.cjs +3 -0
  95. package/shared/definition19.js +4 -1
  96. package/shared/definition2.js +1 -1
  97. package/shared/definition20.js +1 -1
  98. package/shared/definition21.js +1 -1
  99. package/shared/definition22.cjs +3 -2
  100. package/shared/definition22.js +5 -4
  101. package/shared/definition23.cjs +4 -2
  102. package/shared/definition23.js +6 -4
  103. package/shared/definition24.js +1 -1
  104. package/shared/definition25.cjs +2 -14
  105. package/shared/definition25.js +3 -15
  106. package/shared/definition26.cjs +15 -2
  107. package/shared/definition26.js +16 -3
  108. package/shared/definition27.cjs +3 -2
  109. package/shared/definition27.js +4 -3
  110. package/shared/definition28.cjs +1 -1
  111. package/shared/definition28.js +2 -2
  112. package/shared/definition29.js +1 -1
  113. package/shared/definition3.cjs +4 -3
  114. package/shared/definition3.js +6 -5
  115. package/shared/definition30.cjs +34 -34
  116. package/shared/definition30.js +36 -36
  117. package/shared/definition31.cjs +6 -4
  118. package/shared/definition31.js +8 -6
  119. package/shared/definition32.js +1 -1
  120. package/shared/definition33.cjs +7 -2
  121. package/shared/definition33.js +8 -3
  122. package/shared/definition34.js +1 -1
  123. package/shared/definition35.cjs +3 -14
  124. package/shared/definition35.js +5 -16
  125. package/shared/definition36.cjs +8 -5
  126. package/shared/definition36.js +9 -6
  127. package/shared/definition37.js +1 -1
  128. package/shared/definition38.cjs +7 -8
  129. package/shared/definition38.js +9 -10
  130. package/shared/definition39.cjs +7 -8
  131. package/shared/definition39.js +9 -10
  132. package/shared/definition4.cjs +1 -1
  133. package/shared/definition4.js +2 -2
  134. package/shared/definition40.cjs +8 -5
  135. package/shared/definition40.js +9 -6
  136. package/shared/definition41.cjs +1 -1
  137. package/shared/definition41.js +2 -2
  138. package/shared/definition42.js +1 -1
  139. package/shared/definition43.cjs +506 -93
  140. package/shared/definition43.js +502 -89
  141. package/shared/definition44.cjs +27 -10
  142. package/shared/definition44.js +28 -11
  143. package/shared/definition45.cjs +12 -6
  144. package/shared/definition45.js +13 -7
  145. package/shared/definition46.cjs +18 -6
  146. package/shared/definition46.js +20 -8
  147. package/shared/definition47.js +1 -1
  148. package/shared/definition48.js +1 -1
  149. package/shared/definition49.cjs +10 -3
  150. package/shared/definition49.js +12 -5
  151. package/shared/definition5.cjs +7 -2
  152. package/shared/definition5.js +8 -3
  153. package/shared/definition50.cjs +8 -7
  154. package/shared/definition50.js +10 -9
  155. package/shared/definition51.cjs +3 -2
  156. package/shared/definition51.js +4 -3
  157. package/shared/definition52.cjs +8 -4
  158. package/shared/definition52.js +9 -5
  159. package/shared/definition53.cjs +5 -0
  160. package/shared/definition53.js +6 -2
  161. package/shared/definition54.cjs +4 -3
  162. package/shared/definition54.js +6 -5
  163. package/shared/definition55.cjs +7 -4
  164. package/shared/definition55.js +8 -5
  165. package/shared/definition56.cjs +69 -15
  166. package/shared/definition56.js +70 -16
  167. package/shared/definition57.cjs +163 -112
  168. package/shared/definition57.js +165 -114
  169. package/shared/definition58.js +1 -1
  170. package/shared/definition59.js +1 -1
  171. package/shared/definition6.js +1 -1
  172. package/shared/definition60.js +1 -1
  173. package/shared/definition61.cjs +8 -5
  174. package/shared/definition61.js +9 -6
  175. package/shared/definition62.cjs +5 -2
  176. package/shared/definition62.js +6 -3
  177. package/shared/definition63.js +1 -1
  178. package/shared/definition64.js +1 -1
  179. package/shared/definition65.js +1 -1
  180. package/shared/definition7.js +1 -1
  181. package/shared/definition8.cjs +4 -2
  182. package/shared/definition8.js +6 -4
  183. package/shared/definition9.js +1 -1
  184. package/shared/delegates-aria.cjs +106 -56
  185. package/shared/delegates-aria.js +107 -58
  186. package/shared/enums.cjs +0 -6
  187. package/shared/enums.js +1 -6
  188. package/shared/foundation/button/button.d.ts +8 -6
  189. package/shared/foundation/vivid-element/vivid-element.d.ts +339 -1
  190. package/shared/host-semantics.cjs +65 -0
  191. package/shared/host-semantics.js +62 -0
  192. package/shared/option.cjs +7 -1
  193. package/shared/option.js +7 -1
  194. package/shared/patterns/affix.d.ts +22 -10
  195. package/shared/patterns/anchored.d.ts +18 -6
  196. package/shared/patterns/localized.d.ts +11 -5
  197. package/shared/patterns/trapped-focus.d.ts +11 -5
  198. package/shared/picker-field/mixins/calendar-picker.d.ts +19 -13
  199. package/shared/picker-field/mixins/calendar-picker.template.d.ts +19 -13
  200. package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +11 -5
  201. package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +38 -26
  202. package/shared/picker-field/mixins/single-date-picker.d.ts +55 -37
  203. package/shared/picker-field/mixins/single-value-picker.d.ts +17 -11
  204. package/shared/picker-field/mixins/time-selection-picker.d.ts +38 -26
  205. package/shared/picker-field/mixins/time-selection-picker.template.d.ts +38 -26
  206. package/shared/picker-field/picker-field.d.ts +21 -9
  207. package/shared/picker-field.template.js +1 -1
  208. package/shared/repeat.js +1 -1
  209. package/shared/single-value-picker.cjs +3 -0
  210. package/shared/single-value-picker.js +3 -0
  211. package/shared/slider.template.cjs +10 -9
  212. package/shared/slider.template.js +10 -9
  213. package/shared/templating/attribute-binding-behaviour.d.ts +15 -0
  214. package/shared/templating/render-in-light-dom.d.ts +22 -0
  215. package/shared/text-anchor.template.cjs +2 -13
  216. package/shared/text-anchor.template.js +2 -13
  217. package/shared/text-field.cjs +1 -1
  218. package/shared/text-field.js +1 -1
  219. package/shared/time-selection-picker.template.js +1 -1
  220. package/shared/vivid-element.cjs +96 -2
  221. package/shared/vivid-element.js +93 -3
  222. package/styles/core/all.css +1 -1
  223. package/styles/core/theme.css +1 -1
  224. package/styles/core/typography.css +1 -1
  225. package/styles/tokens/theme-dark.css +4 -4
  226. package/styles/tokens/theme-light.css +4 -4
  227. package/styles/tokens/vivid-2-compat.css +1 -1
  228. package/text-anchor/index.js +1 -1
  229. package/vivid.api.json +316 -70
  230. package/shared/Reflector.cjs +0 -71
  231. package/shared/Reflector.js +0 -69
package/shared/definition35.js CHANGED
@@ -1,20 +1,20 @@
1
1
  import { B as Button, b as buttonDefinition } from './definition11.js';
2
2
  import { D as Divider, d as dividerDefinition } from './definition23.js';
3
- import { V as VividElement, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
3
+ import { V as VividElement, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
4
4
  import { i as iconDefinition } from './definition28.js';
5
5
  import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
6
- import { D as DelegatesAria } from './delegates-aria.js';
6
+ import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
7
7
  import { F as FormAssociated } from './form-associated.js';
8
8
  import { b as AffixIcon } from './affix.js';
9
- import { L as Localized } from './localized.js';
10
9
  import { f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
10
+ import { L as Localized } from './localized.js';
11
11
  import { F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
12
12
  import { S as Shape } from './enums.js';
13
13
  import { c as classNames } from './class-names.js';
14
14
  import { w as when } from './when.js';
15
15
  import { r as ref } from './ref.js';
16
16
 
17
- const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base: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(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
17
+ const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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(--vvd-color-neutral-700)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base: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(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.wrapper:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
18
18
 
19
19
  class _NumberField extends VividElement {
20
20
  }
@@ -395,18 +395,7 @@ const NumberFieldTemplate = (context) => {
395
395
  ?spellcheck="${(x) => x.spellcheck}"
396
396
  :value="${(x) => x._presentationValue}"
397
397
  type="text"
398
- aria-atomic="${(x) => x.ariaAtomic}"
399
- aria-busy="${(x) => x.ariaBusy}"
400
- aria-current="${(x) => x.ariaCurrent}"
401
- aria-disabled="${(x) => x.ariaDisabled}"
402
- aria-haspopup="${(x) => x.ariaHasPopup}"
403
- aria-hidden="${(x) => x.ariaHidden}"
404
- aria-invalid="${(x) => x.ariaInvalid}"
405
- aria-keyshortcuts="${(x) => x.ariaKeyShortcuts}"
406
- aria-label="${(x) => x.ariaLabel}"
407
- aria-live="${(x) => x.ariaLive}"
408
- aria-relevant="${(x) => x.ariaRelevant}"
409
- aria-roledescription="${(x) => x.ariaRoleDescription}"
398
+ ${delegateAria()}
410
399
  ${ref("control")}
411
400
  />
412
401
  </div>
package/shared/definition36.cjs CHANGED
@@ -4,6 +4,7 @@ const definition = require('./definition28.cjs');
4
4
  const vividElement = require('./vivid-element.cjs');
5
5
  const option = require('./option.cjs');
6
6
  const affix = require('./affix.cjs');
7
+ const hostSemantics = require('./host-semantics.cjs');
7
8
  const classNames = require('./class-names.cjs');
8
9
  const when = require('./when.cjs');
9
10
 
@@ -20,10 +21,12 @@ const ListboxOptionTemplate = (context) => {
20
21
  const iconTag = context.tagFor(definition.Icon);
21
22
  return vividElement.html`
22
23
  <template
23
- role="option"
24
- aria-checked="${(x) => x.checked}"
25
- aria-selected="${(x) => x.selected}"
26
- aria-disabled="${(x) => x.disabled}"
24
+ ${hostSemantics.applyHostSemantics({
25
+ role: "option",
26
+ ariaChecked: (x) => x.checked,
27
+ ariaSelected: (x) => x.selected,
28
+ ariaDisabled: (x) => x.disabled
29
+ })}
27
30
  style="${(x) => x._isNotMatching ? "display: none" : ""}"
28
31
  >
29
32
  <div class="${getClasses}">
@@ -51,7 +54,7 @@ const ListboxOptionTemplate = (context) => {
51
54
  `;
52
55
  };
53
56
 
54
- const styles = ":host([disabled]){cursor:not-allowed}.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}.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:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
57
+ const styles = ":host([disabled]){cursor:not-allowed}.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}.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:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
55
58
 
56
59
  const listboxOptionDefinition = vividElement.defineVividComponent(
57
60
  "option",
package/shared/definition36.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { I as Icon, i as iconDefinition } from './definition28.js';
2
- import { h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
2
+ import { h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
3
3
  import { L as ListboxOption } from './option.js';
4
4
  import { a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
5
+ import { a as applyHostSemantics } from './host-semantics.js';
5
6
  import { c as classNames } from './class-names.js';
6
7
  import { w as when } from './when.js';
7
8
 
@@ -18,10 +19,12 @@ const ListboxOptionTemplate = (context) => {
18
19
  const iconTag = context.tagFor(Icon);
19
20
  return html`
20
21
  <template
21
- role="option"
22
- aria-checked="${(x) => x.checked}"
23
- aria-selected="${(x) => x.selected}"
24
- aria-disabled="${(x) => x.disabled}"
22
+ ${applyHostSemantics({
23
+ role: "option",
24
+ ariaChecked: (x) => x.checked,
25
+ ariaSelected: (x) => x.selected,
26
+ ariaDisabled: (x) => x.disabled
27
+ })}
25
28
  style="${(x) => x._isNotMatching ? "display: none" : ""}"
26
29
  >
27
30
  <div class="${getClasses}">
@@ -49,7 +52,7 @@ const ListboxOptionTemplate = (context) => {
49
52
  `;
50
53
  };
51
54
 
52
- const styles = ":host([disabled]){cursor:not-allowed}.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}.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:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
55
+ const styles = ":host([disabled]){cursor:not-allowed}.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}.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:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
53
56
 
54
57
  const listboxOptionDefinition = defineVividComponent(
55
58
  "option",
package/shared/definition37.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { B as Button, b as buttonDefinition } from './definition11.js';
2
- import { V as VividElement, a as attr, o as observable, v as volatile, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
2
+ import { V as VividElement, a as attr, o as observable, v as volatile, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
3
3
  import { b as Size, S as Shape } from './enums.js';
4
4
  import { e as elements } from './slotted.js';
5
5
  import { c as classNames } from './class-names.js';
package/shared/definition38.cjs CHANGED
@@ -33,16 +33,15 @@ const getClasses = ({ connotation, size, paused }) => classNames.classNames(
33
33
  [`size-${size}`, !!size]
34
34
  );
35
35
  const progressSegments = 44;
36
- const ProgressRingTemplate = vividElement.html`<template
37
- role="${(x) => x.ariaLabel ? "presentation" : null}"
38
- >
36
+ const ProgressRingTemplate = vividElement.html`<template>
39
37
  <div
40
- role="progressbar"
41
- aria-label="${(x) => x.ariaLabel}"
42
- aria-valuenow="${(x) => x.value}"
43
- aria-valuemin="${(x) => x.min}"
44
- aria-valuemax="${(x) => x.max}"
45
38
  class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
39
+ ${delegatesAria.delegateAria({
40
+ role: "progressbar",
41
+ ariaValueNow: (x) => x.value,
42
+ ariaValueMin: (x) => x.min,
43
+ ariaValueMax: (x) => x.max
44
+ })}
46
45
  >
47
46
  ${when.when(
48
47
  (x) => typeof x.value === "number",
package/shared/definition38.js CHANGED
@@ -1,6 +1,6 @@
1
- import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
1
+ import { a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
2
2
  import { B as BaseProgress } from './base-progress.js';
3
- import { D as DelegatesAria } from './delegates-aria.js';
3
+ import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
  import { w as when } from './when.js';
6
6
 
@@ -31,16 +31,15 @@ const getClasses = ({ connotation, size, paused }) => classNames(
31
31
  [`size-${size}`, !!size]
32
32
  );
33
33
  const progressSegments = 44;
34
- const ProgressRingTemplate = html`<template
35
- role="${(x) => x.ariaLabel ? "presentation" : null}"
36
- >
34
+ const ProgressRingTemplate = html`<template>
37
35
  <div
38
- role="progressbar"
39
- aria-label="${(x) => x.ariaLabel}"
40
- aria-valuenow="${(x) => x.value}"
41
- aria-valuemin="${(x) => x.min}"
42
- aria-valuemax="${(x) => x.max}"
43
36
  class="${(x) => x.paused ? "paused" : ""} ${getClasses}"
37
+ ${delegateAria({
38
+ role: "progressbar",
39
+ ariaValueNow: (x) => x.value,
40
+ ariaValueMin: (x) => x.min,
41
+ ariaValueMax: (x) => x.max
42
+ })}
44
43
  >
45
44
  ${when(
46
45
  (x) => typeof x.value === "number",
package/shared/definition39.cjs CHANGED
@@ -52,16 +52,15 @@ function indeterminate() {
52
52
  <span class="indicator-2"></span>
53
53
  </span>`;
54
54
  }
55
- const ProgressTemplate = vividElement.html`<template
56
- role="${(x) => x.ariaLabel ? "presentation" : null}"
57
- >
55
+ const ProgressTemplate = vividElement.html`<template>
58
56
  <div
59
- role="progressbar"
60
- aria-label="${(x) => x.ariaLabel}"
61
- aria-valuenow="${(x) => x.value}"
62
- aria-valuemin="${(x) => x.min}"
63
- aria-valuemax="${(x) => x.max}"
64
57
  class="${getClasses}"
58
+ ${delegatesAria.delegateAria({
59
+ role: "progressbar",
60
+ ariaValueNow: (x) => x.value,
61
+ ariaValueMin: (x) => x.min,
62
+ ariaValueMax: (x) => x.max
63
+ })}
65
64
  >
66
65
  <div class="progress">
67
66
  ${when.when((x) => typeof x.value === "number", determinate())}
package/shared/definition39.js CHANGED
@@ -1,6 +1,6 @@
1
- import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
1
+ import { a as attr, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
2
2
  import { B as BaseProgress } from './base-progress.js';
3
- import { D as DelegatesAria } from './delegates-aria.js';
3
+ import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
  import { w as when } from './when.js';
6
6
 
@@ -50,16 +50,15 @@ function indeterminate() {
50
50
  <span class="indicator-2"></span>
51
51
  </span>`;
52
52
  }
53
- const ProgressTemplate = html`<template
54
- role="${(x) => x.ariaLabel ? "presentation" : null}"
55
- >
53
+ const ProgressTemplate = html`<template>
56
54
  <div
57
- role="progressbar"
58
- aria-label="${(x) => x.ariaLabel}"
59
- aria-valuenow="${(x) => x.value}"
60
- aria-valuemin="${(x) => x.min}"
61
- aria-valuemax="${(x) => x.max}"
62
55
  class="${getClasses}"
56
+ ${delegateAria({
57
+ role: "progressbar",
58
+ ariaValueNow: (x) => x.value,
59
+ ariaValueMin: (x) => x.min,
60
+ ariaValueMax: (x) => x.max
61
+ })}
63
62
  >
64
63
  <div class="progress">
65
64
  ${when((x) => typeof x.value === "number", determinate())}
package/shared/definition4.cjs CHANGED
@@ -11,7 +11,7 @@ const localized = require('./localized.cjs');
11
11
  const classNames = require('./class-names.cjs');
12
12
  const when = require('./when.cjs');
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.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.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_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{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 .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 .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.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}";
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.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.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_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{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 .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 .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.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:16px}";
15
15
 
16
16
  var __defProp = Object.defineProperty;
17
17
  var __decorateClass = (decorators, target, key, kind) => {
package/shared/definition4.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { B as Button, b as buttonDefinition } from './definition11.js';
2
2
  import { E as Elevation, e as elevationDefinition } from './definition64.js';
3
- import { V as VividElement, a as attr, n as nullableNumberConverter, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
3
+ import { V as VividElement, a as attr, n as nullableNumberConverter, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
4
4
  import { i as iconDefinition } from './definition28.js';
5
5
  import { C as Connotation } from './enums.js';
6
6
  import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
@@ -9,7 +9,7 @@ import { L as Localized } from './localized.js';
9
9
  import { c as classNames } from './class-names.js';
10
10
  import { w as when } from './when.js';
11
11
 
12
- 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.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.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_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{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 .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 .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.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}";
12
+ 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.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.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_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{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 .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 .alert-text .headline+::slotted([slot=main i]:first-child):before,.base .alert-text .main-text+::slotted([slot=main i]:first-child):before{display:block;margin-top:8px;content:\"\"}.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:16px}";
13
13
 
14
14
  var __defProp = Object.defineProperty;
15
15
  var __decorateClass = (decorators, target, key, kind) => {
package/shared/definition40.cjs CHANGED
@@ -3,6 +3,7 @@
3
3
  const vividElement = require('./vivid-element.cjs');
4
4
  const definition = require('./definition41.cjs');
5
5
  const keyCodes = require('./key-codes.cjs');
6
+ const hostSemantics = require('./host-semantics.cjs');
6
7
  const aria = require('./aria.cjs');
7
8
  const slotted = require('./slotted.cjs');
8
9
  const when = require('./when.cjs');
@@ -18,7 +19,7 @@ var __decorateClass = (decorators, target, key, kind) => {
18
19
  if (result) __defProp(target, key, result);
19
20
  return result;
20
21
  };
21
- class RadioGroup extends vividElement.VividElement {
22
+ class RadioGroup extends hostSemantics.HostSemantics(vividElement.VividElement) {
22
23
  constructor() {
23
24
  super(...arguments);
24
25
  this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
@@ -250,10 +251,12 @@ __decorateClass([
250
251
  const RadioGroupTemplate = (context) => {
251
252
  return vividElement.html`
252
253
  <template
253
- role="radiogroup"
254
- aria-disabled="${(x) => x.disabled}"
255
- aria-readonly="${(x) => x.readOnly}"
256
- aria-orientation="${(x) => x.orientation}"
254
+ ${hostSemantics.applyHostSemantics({
255
+ role: "radiogroup",
256
+ ariaDisabled: (x) => x.disabled,
257
+ ariaReadOnly: (x) => x.readOnly,
258
+ ariaOrientation: (x) => x.orientation
259
+ })}
257
260
  @keydown="${(x, c) => x.keydownHandler(c.event)}"
258
261
  @focusin="${(x, c) => x.focusInHandler(c.event)}"
259
262
  >
package/shared/definition40.js CHANGED
@@ -1,6 +1,7 @@
1
- import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
1
+ import { V as VividElement, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
2
2
  import { R as Radio, r as radioDefinition } from './definition41.js';
3
3
  import { i as keyArrowRight, h as keyArrowLeft, e as keyArrowUp, f as keyArrowDown, k as keyEnter } from './key-codes.js';
4
+ import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
4
5
  import { O as Orientation } from './aria.js';
5
6
  import { s as slotted, e as elements } from './slotted.js';
6
7
  import { w as when } from './when.js';
@@ -16,7 +17,7 @@ var __decorateClass = (decorators, target, key, kind) => {
16
17
  if (result) __defProp(target, key, result);
17
18
  return result;
18
19
  };
19
- class RadioGroup extends VividElement {
20
+ class RadioGroup extends HostSemantics(VividElement) {
20
21
  constructor() {
21
22
  super(...arguments);
22
23
  this.orientation = // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
@@ -248,10 +249,12 @@ __decorateClass([
248
249
  const RadioGroupTemplate = (context) => {
249
250
  return html`
250
251
  <template
251
- role="radiogroup"
252
- aria-disabled="${(x) => x.disabled}"
253
- aria-readonly="${(x) => x.readOnly}"
254
- aria-orientation="${(x) => x.orientation}"
252
+ ${applyHostSemantics({
253
+ role: "radiogroup",
254
+ ariaDisabled: (x) => x.disabled,
255
+ ariaReadOnly: (x) => x.readOnly,
256
+ ariaOrientation: (x) => x.orientation
257
+ })}
255
258
  @keydown="${(x, c) => x.keydownHandler(c.event)}"
256
259
  @focusin="${(x, c) => x.focusInHandler(c.event)}"
257
260
  >
package/shared/definition41.cjs CHANGED
@@ -6,7 +6,7 @@ const keyCodes = require('./key-codes.cjs');
6
6
  const classNames = require('./class-names.cjs');
7
7
  const when = require('./when.cjs');
8
8
 
9
- const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.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)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@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-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
9
+ const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.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(--vvd-color-neutral-500)}.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(--vvd-color-neutral-700)}.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)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@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-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
10
10
 
11
11
  class _Radio extends vividElement.VividElement {
12
12
  }
package/shared/definition41.js CHANGED
@@ -1,10 +1,10 @@
1
- import { V as VividElement, D as DOM, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
1
+ import { V as VividElement, D as DOM, a as attr, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
2
2
  import { C as CheckableFormAssociated } from './form-associated.js';
3
3
  import { a as keySpace } from './key-codes.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
  import { w as when } from './when.js';
6
6
 
7
- const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.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)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@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-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
7
+ const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.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(--vvd-color-neutral-500)}.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(--vvd-color-neutral-700)}.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)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@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-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
8
8
 
9
9
  class _Radio extends VividElement {
10
10
  }
package/shared/definition42.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { P as Popup, a as PlacementStrategy, p as popupDefinition } from './definition65.js';
2
- import { V as VividElement, o as observable, a as attr, n as nullableNumberConverter, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
2
+ import { V as VividElement, o as observable, a as attr, n as nullableNumberConverter, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
3
3
  import { g as keyHome, d as keyEnd, e as keyArrowUp, h as keyArrowLeft, f as keyArrowDown, i as keyArrowRight } from './key-codes.js';
4
4
  import { F as FormAssociated } from './form-associated.js';
5
5
  import { i as inverseLerp, l as lerp, r as roundToStepValue, d as defaultToOneConverter, g as getMarkersTemplate } from './slider.template.js';