@vonage/vivid 4.19.0 → 4.21.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 (176) hide show
  1. package/custom-elements.json +1648 -525
  2. package/lib/accordion-item/accordion-item.d.ts +332 -5
  3. package/lib/action-group/action-group.d.ts +3 -2
  4. package/lib/alert/alert.d.ts +654 -6
  5. package/lib/audio-player/audio-player.d.ts +330 -5
  6. package/lib/avatar/avatar.d.ts +5 -4
  7. package/lib/badge/badge.d.ts +334 -7
  8. package/lib/banner/banner.d.ts +662 -15
  9. package/lib/button/button.d.ts +335 -8
  10. package/lib/calendar-event/calendar-event.d.ts +3 -2
  11. package/lib/card/card.d.ts +2 -1
  12. package/lib/checkbox/checkbox.d.ts +2 -1
  13. package/lib/combobox/combobox.d.ts +335 -6
  14. package/lib/date-picker/date-picker.d.ts +12 -12
  15. package/lib/date-range-picker/date-range-picker.d.ts +6 -6
  16. package/lib/date-time-picker/date-time-picker.d.ts +12 -12
  17. package/lib/dial-pad/dial-pad.d.ts +328 -4
  18. package/lib/dialog/dialog.d.ts +326 -4
  19. package/lib/empty-state/empty-state.d.ts +3 -2
  20. package/lib/fab/fab.d.ts +333 -6
  21. package/lib/file-picker/file-picker.d.ts +334 -4
  22. package/lib/icon/icon.d.ts +2 -1
  23. package/lib/layout/layout.d.ts +6 -5
  24. package/lib/menu-item/menu-item.d.ts +332 -10
  25. package/lib/nav-disclosure/nav-disclosure.d.ts +330 -6
  26. package/lib/nav-item/nav-item.d.ts +329 -4
  27. package/lib/note/note.d.ts +329 -4
  28. package/lib/number-field/number-field.d.ts +658 -6
  29. package/lib/option/option.d.ts +330 -4
  30. package/lib/pagination/pagination.d.ts +3 -2
  31. package/lib/radio/radio.d.ts +2 -1
  32. package/lib/range-slider/range-slider.d.ts +330 -3
  33. package/lib/rich-text-editor/facades/prose-mirror-vivid.schema.d.ts +3 -2
  34. package/lib/rich-text-editor/facades/vivid-prose-mirror.facade.d.ts +1 -0
  35. package/lib/rich-text-editor/rich-text-editor.d.ts +1 -0
  36. package/lib/searchable-select/option-tag.d.ts +330 -5
  37. package/lib/searchable-select/searchable-select.d.ts +660 -5
  38. package/lib/select/select.d.ts +336 -6
  39. package/lib/slider/slider.d.ts +326 -4
  40. package/lib/split-button/split-button.d.ts +667 -20
  41. package/lib/tab/tab.d.ts +658 -7
  42. package/lib/tabs/tabs.d.ts +2 -1
  43. package/lib/tag/tag.d.ts +333 -7
  44. package/lib/text-anchor/text-anchor.d.ts +331 -5
  45. package/lib/text-field/text-field.d.ts +333 -6
  46. package/lib/time-picker/time-picker.d.ts +6 -6
  47. package/lib/tree-item/tree-item.d.ts +329 -4
  48. package/lib/video-player/video-player.d.ts +328 -4
  49. package/package.json +1 -1
  50. package/shared/_has.cjs +0 -4
  51. package/shared/_has.js +0 -4
  52. package/shared/affix.cjs +25 -19
  53. package/shared/affix.js +26 -20
  54. package/shared/apply-mixins.js +1 -1
  55. package/shared/calendar-picker.template.cjs +1 -1
  56. package/shared/calendar-picker.template.js +1 -1
  57. package/shared/children.js +1 -1
  58. package/shared/definition.cjs +2 -4
  59. package/shared/definition.js +2 -4
  60. package/shared/definition11.cjs +2 -4
  61. package/shared/definition11.js +2 -4
  62. package/shared/definition13.cjs +85 -159
  63. package/shared/definition13.js +85 -159
  64. package/shared/definition15.cjs +1 -1
  65. package/shared/definition15.js +1 -1
  66. package/shared/definition16.cjs +2 -3
  67. package/shared/definition16.js +2 -3
  68. package/shared/definition17.cjs +2 -2
  69. package/shared/definition17.js +2 -2
  70. package/shared/definition21.cjs +2 -4
  71. package/shared/definition21.js +2 -4
  72. package/shared/definition22.cjs +2 -4
  73. package/shared/definition22.js +2 -4
  74. package/shared/definition25.cjs +2 -4
  75. package/shared/definition25.js +2 -4
  76. package/shared/definition26.cjs +3 -3
  77. package/shared/definition26.js +3 -3
  78. package/shared/definition28.cjs +27 -38
  79. package/shared/definition28.js +27 -38
  80. package/shared/definition30.cjs +4 -11
  81. package/shared/definition30.js +4 -11
  82. package/shared/definition31.cjs +2 -4
  83. package/shared/definition31.js +2 -4
  84. package/shared/definition32.cjs +2 -4
  85. package/shared/definition32.js +2 -4
  86. package/shared/definition34.cjs +1 -3
  87. package/shared/definition34.js +1 -3
  88. package/shared/definition35.cjs +6 -6
  89. package/shared/definition35.js +6 -6
  90. package/shared/definition36.cjs +1 -1
  91. package/shared/definition36.js +1 -1
  92. package/shared/definition37.cjs +5 -1
  93. package/shared/definition37.js +5 -1
  94. package/shared/definition4.cjs +1 -7
  95. package/shared/definition4.js +1 -7
  96. package/shared/definition41.cjs +1 -1
  97. package/shared/definition41.js +1 -1
  98. package/shared/definition42.cjs +3 -5
  99. package/shared/definition42.js +3 -5
  100. package/shared/definition43.cjs +219 -28
  101. package/shared/definition43.js +216 -25
  102. package/shared/definition44.cjs +9 -10
  103. package/shared/definition44.js +9 -10
  104. package/shared/definition45.cjs +3 -4
  105. package/shared/definition45.js +3 -4
  106. package/shared/definition46.cjs +1 -1
  107. package/shared/definition46.js +1 -1
  108. package/shared/definition47.cjs +1 -1
  109. package/shared/definition47.js +1 -1
  110. package/shared/definition48.cjs +3 -5
  111. package/shared/definition48.js +3 -5
  112. package/shared/definition49.cjs +4 -7
  113. package/shared/definition49.js +4 -7
  114. package/shared/definition5.cjs +1 -3
  115. package/shared/definition5.js +2 -4
  116. package/shared/definition50.cjs +1 -1
  117. package/shared/definition50.js +1 -1
  118. package/shared/definition52.cjs +2 -5
  119. package/shared/definition52.js +2 -5
  120. package/shared/definition53.cjs +1 -1
  121. package/shared/definition53.js +1 -1
  122. package/shared/definition55.cjs +2 -4
  123. package/shared/definition55.js +2 -4
  124. package/shared/definition56.cjs +1 -1
  125. package/shared/definition56.js +1 -1
  126. package/shared/definition57.cjs +3 -2
  127. package/shared/definition57.js +3 -2
  128. package/shared/definition61.cjs +2 -4
  129. package/shared/definition61.js +2 -4
  130. package/shared/definition63.cjs +2 -4
  131. package/shared/definition63.js +2 -4
  132. package/shared/definition65.cjs +1 -1
  133. package/shared/definition65.js +1 -1
  134. package/shared/definition7.cjs +1 -3
  135. package/shared/definition7.js +1 -3
  136. package/shared/definition8.cjs +2 -5
  137. package/shared/definition8.js +2 -5
  138. package/shared/definition9.cjs +1 -1
  139. package/shared/definition9.js +1 -1
  140. package/shared/form-associated.js +1 -1
  141. package/shared/localized.cjs +10 -4
  142. package/shared/localized.js +10 -4
  143. package/shared/option.cjs +1 -3
  144. package/shared/option.js +2 -4
  145. package/shared/patterns/affix.d.ts +659 -7
  146. package/shared/patterns/localized.d.ts +328 -3
  147. package/shared/patterns/trapped-focus.d.ts +329 -6
  148. package/shared/picker-field/mixins/calendar-picker.d.ts +3 -3
  149. package/shared/picker-field/mixins/calendar-picker.template.d.ts +3 -3
  150. package/shared/picker-field/mixins/inline-time-picker/inline-time-picker.d.ts +328 -4
  151. package/shared/picker-field/mixins/min-max-calendar-picker.d.ts +6 -6
  152. package/shared/picker-field/mixins/single-date-picker.d.ts +9 -9
  153. package/shared/picker-field/mixins/single-value-picker.d.ts +3 -3
  154. package/shared/picker-field/mixins/time-selection-picker.d.ts +6 -6
  155. package/shared/picker-field/mixins/time-selection-picker.template.d.ts +6 -6
  156. package/shared/picker-field/picker-field.d.ts +655 -3
  157. package/shared/picker-field.template.cjs +33 -35
  158. package/shared/picker-field.template.js +33 -35
  159. package/shared/ref.js +1 -1
  160. package/shared/slotted.js +1 -1
  161. package/shared/text-anchor.cjs +2 -2
  162. package/shared/text-anchor.js +2 -2
  163. package/shared/text-field.cjs +1 -1
  164. package/shared/text-field.js +1 -1
  165. package/shared/time-selection-picker.template.cjs +3 -5
  166. package/shared/time-selection-picker.template.js +4 -6
  167. package/shared/utils/enums.d.ts +1 -0
  168. package/shared/vivid-element.cjs +1 -1
  169. package/shared/vivid-element.js +2 -2
  170. package/styles/core/all.css +2 -2
  171. package/styles/core/theme.css +2 -2
  172. package/styles/core/typography.css +1 -1
  173. package/styles/tokens/theme-dark.css +4 -4
  174. package/styles/tokens/theme-light.css +4 -4
  175. package/styles/tokens/vivid-2-compat.css +1 -1
  176. package/vivid.api.json +187 -990
package/shared/definition7.cjs CHANGED
@@ -3,7 +3,6 @@
3
3
  const vividElement = require('./vivid-element.cjs');
4
4
  const definition = require('./definition28.cjs');
5
5
  const affix = require('./affix.cjs');
6
- const applyMixins = require('./apply-mixins.cjs');
7
6
  const classNames = require('./class-names.cjs');
8
7
  const when = require('./when.cjs');
9
8
 
@@ -16,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
16
15
  if (result) __defProp(target, key, result);
17
16
  return result;
18
17
  };
19
- class Badge extends vividElement.VividElement {
18
+ class Badge extends affix.AffixIconWithTrailing(vividElement.VividElement) {
20
19
  }
21
20
  __decorateClass([
22
21
  vividElement.attr
@@ -30,7 +29,6 @@ __decorateClass([
30
29
  __decorateClass([
31
30
  vividElement.attr
32
31
  ], Badge.prototype, "text");
33
- applyMixins.applyMixins(Badge, affix.AffixIconWithTrailing);
34
32
 
35
33
  const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-badge-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-badge-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-badge-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-badge-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-badge-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-badge-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-badge-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-badge-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
36
34
 
package/shared/definition7.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
2
2
  import { i as iconDefinition } from './definition28.js';
3
3
  import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
4
- import { a as applyMixins } from './apply-mixins.js';
5
4
  import { c as classNames } from './class-names.js';
6
5
  import { w as when } from './when.js';
7
6
 
@@ -14,7 +13,7 @@ var __decorateClass = (decorators, target, key, kind) => {
14
13
  if (result) __defProp(target, key, result);
15
14
  return result;
16
15
  };
17
- class Badge extends VividElement {
16
+ class Badge extends AffixIconWithTrailing(VividElement) {
18
17
  }
19
18
  __decorateClass([
20
19
  attr
@@ -28,7 +27,6 @@ __decorateClass([
28
27
  __decorateClass([
29
28
  attr
30
29
  ], Badge.prototype, "text");
31
- applyMixins(Badge, AffixIconWithTrailing);
32
30
 
33
31
  const styles = ":host{display:inline-block}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-badge-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-fierce-primary: var(--vvd-badge-success-fierce-primary, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-fierce-primary: var(--vvd-badge-alert-fierce-primary, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-fierce-primary: var(--vvd-badge-warning-fierce-primary, var(--vvd-color-warning-300));--_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-fierce-primary: var(--vvd-badge-information-fierce-primary, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-fierce-primary: var(--vvd-badge-announcement-fierce-primary, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-badge-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-badge-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
34
32
 
package/shared/definition8.cjs CHANGED
@@ -3,10 +3,9 @@
3
3
  const definition = require('./definition11.cjs');
4
4
  const definition$1 = require('./definition28.cjs');
5
5
  const vividElement = require('./vivid-element.cjs');
6
- const applyMixins = require('./apply-mixins.cjs');
7
6
  const enums = require('./enums.cjs');
8
- const affix = require('./affix.cjs');
9
7
  const delegatesAria = require('./delegates-aria.cjs');
8
+ const affix = require('./affix.cjs');
10
9
  const localized = require('./localized.cjs');
11
10
  const classNames = require('./class-names.cjs');
12
11
  const slotted = require('./slotted.cjs');
@@ -31,7 +30,7 @@ const connotationIconMap = /* @__PURE__ */ new Map([
31
30
  [enums.Connotation.Alert, "error-solid"]
32
31
  ]);
33
32
  const defaultConnotation = (connotation = enums.Connotation.Information) => connotationIconMap.get(connotation);
34
- class Banner extends delegatesAria.DelegatesAria(vividElement.VividElement) {
33
+ class Banner extends affix.AffixIcon(localized.Localized(delegatesAria.DelegatesAria(vividElement.VividElement))) {
35
34
  constructor() {
36
35
  super(...arguments);
37
36
  this.dismissButtonAriaLabel = null;
@@ -90,8 +89,6 @@ __decorateClass([
90
89
  __decorateClass([
91
90
  vividElement.observable
92
91
  ], Banner.prototype, "actionItemsSlottedContent");
93
- applyMixins.applyMixins(Banner, affix.AffixIcon);
94
- applyMixins.applyMixins(Banner, localized.Localized);
95
92
 
96
93
  const getClasses = (_) => classNames.classNames("control", [`connotation-${_.connotation}`, !!_.connotation]);
97
94
  function renderDismissButton(buttonTag) {
package/shared/definition8.js CHANGED
@@ -1,10 +1,9 @@
1
1
  import { B as Button, b as buttonDefinition } from './definition11.js';
2
2
  import { i as iconDefinition } from './definition28.js';
3
3
  import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
4
- import { a as applyMixins } from './apply-mixins.js';
5
4
  import { C as Connotation } from './enums.js';
6
- import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
7
5
  import { D as DelegatesAria } from './delegates-aria.js';
6
+ import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
8
7
  import { L as Localized } from './localized.js';
9
8
  import { c as classNames } from './class-names.js';
10
9
  import { s as slotted } from './slotted.js';
@@ -29,7 +28,7 @@ const connotationIconMap = /* @__PURE__ */ new Map([
29
28
  [Connotation.Alert, "error-solid"]
30
29
  ]);
31
30
  const defaultConnotation = (connotation = Connotation.Information) => connotationIconMap.get(connotation);
32
- class Banner extends DelegatesAria(VividElement) {
31
+ class Banner extends AffixIcon(Localized(DelegatesAria(VividElement))) {
33
32
  constructor() {
34
33
  super(...arguments);
35
34
  this.dismissButtonAriaLabel = null;
@@ -88,8 +87,6 @@ __decorateClass([
88
87
  __decorateClass([
89
88
  observable
90
89
  ], Banner.prototype, "actionItemsSlottedContent");
91
- applyMixins(Banner, AffixIcon);
92
- applyMixins(Banner, Localized);
93
90
 
94
91
  const getClasses = (_) => classNames("control", [`connotation-${_.connotation}`, !!_.connotation]);
95
92
  function renderDismissButton(buttonTag) {
package/shared/definition9.cjs CHANGED
@@ -7,7 +7,7 @@ const textAnchor_template = require('./text-anchor.template.cjs');
7
7
  const classNames = require('./class-names.cjs');
8
8
  const when = require('./when.cjs');
9
9
 
10
- const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.control:focus-visible{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));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
10
+ const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
11
11
 
12
12
  const getClasses = (_) => classNames.classNames("base");
13
13
  const BreadcrumbItemTemplate = (context) => {
package/shared/definition9.js CHANGED
@@ -5,7 +5,7 @@ import { t as textAnchorTemplate } from './text-anchor.template.js';
5
5
  import { c as classNames } from './class-names.js';
6
6
  import { w as when } from './when.js';
7
7
 
8
- const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{border-radius:2px;font:inherit}.control:focus-visible{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));--focus-stroke-gap-color: transparent;--focus-inset: -4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
8
+ const styles = ".base{display:flex;align-items:center;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.base .separator{margin:0 16px;color:var(--vvd-color-neutral-600);font-size:12px}.control{font:inherit}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%);--focus-stroke-gap-color: transparent;--focus-block-size-addition: 8px;--focus-border-radius: 4px}.control:any-link{color:var(--vvd-color-cta-600);text-decoration:none}.control:any-link:hover{text-decoration:underline}";
9
9
 
10
10
  const getClasses = (_) => classNames("base");
11
11
  const BreadcrumbItemTemplate = (context) => {
package/shared/form-associated.js CHANGED
@@ -1,4 +1,4 @@
1
- import { a as attr, o as observable, c as booleanConverter, e as emptyArray, D as DOM } from './vivid-element.js';
1
+ import { a as attr, b as booleanConverter, o as observable, e as emptyArray, D as DOM } from './vivid-element.js';
2
2
  import { k as keyEnter } from './key-codes.js';
3
3
 
4
4
  const proxySlotName = "form-associated-proxy";
package/shared/localized.cjs CHANGED
@@ -25,11 +25,17 @@ const setLocale = (locale) => {
25
25
  currentLocale.locale = locale;
26
26
  };
27
27
 
28
- class Localized {
29
- get locale() {
30
- return currentLocale.locale;
28
+ const Localized = (Base) => {
29
+ class LocalizedElement extends Base {
30
+ /**
31
+ * @internal
32
+ */
33
+ get locale() {
34
+ return currentLocale.locale;
35
+ }
31
36
  }
32
- }
37
+ return LocalizedElement;
38
+ };
33
39
 
34
40
  exports.Localized = Localized;
35
41
  exports.setLocale = setLocale;
package/shared/localized.js CHANGED
@@ -23,10 +23,16 @@ const setLocale = (locale) => {
23
23
  currentLocale.locale = locale;
24
24
  };
25
25
 
26
- class Localized {
27
- get locale() {
28
- return currentLocale.locale;
26
+ const Localized = (Base) => {
27
+ class LocalizedElement extends Base {
28
+ /**
29
+ * @internal
30
+ */
31
+ get locale() {
32
+ return currentLocale.locale;
33
+ }
29
34
  }
30
- }
35
+ return LocalizedElement;
36
+ };
31
37
 
32
38
  export { Localized as L, setLocale as s };
package/shared/option.cjs CHANGED
@@ -1,6 +1,5 @@
1
1
  'use strict';
2
2
 
3
- const applyMixins = require('./apply-mixins.cjs');
4
3
  const affix = require('./affix.cjs');
5
4
  const vividElement = require('./vivid-element.cjs');
6
5
  const dom = require('./dom.cjs');
@@ -18,7 +17,7 @@ var __decorateClass = (decorators, target, key, kind) => {
18
17
  function isListboxOption(el) {
19
18
  return dom.isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
20
19
  }
21
- class ListboxOption extends vividElement.VividElement {
20
+ class ListboxOption extends affix.AffixIconWithTrailing(vividElement.VividElement) {
22
21
  constructor(text, value, defaultSelected, selected) {
23
22
  super();
24
23
  this.defaultSelected = false;
@@ -184,7 +183,6 @@ __decorateClass([
184
183
  __decorateClass([
185
184
  vividElement.volatile
186
185
  ], ListboxOption.prototype, "_matchedRange", 1);
187
- applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing);
188
186
 
189
187
  exports.ListboxOption = ListboxOption;
190
188
  exports.isListboxOption = isListboxOption;
package/shared/option.js CHANGED
@@ -1,6 +1,5 @@
1
- import { a as applyMixins } from './apply-mixins.js';
2
1
  import { A as AffixIconWithTrailing } from './affix.js';
3
- import { V as VividElement, O as Observable, o as observable, a as attr, v as volatile } from './vivid-element.js';
2
+ import { O as Observable, V as VividElement, o as observable, a as attr, v as volatile } from './vivid-element.js';
4
3
  import { i as isHTMLElement } from './dom.js';
5
4
 
6
5
  var __defProp = Object.defineProperty;
@@ -16,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
16
15
  function isListboxOption(el) {
17
16
  return isHTMLElement(el) && (el.getAttribute("role") === "option" || el instanceof HTMLOptionElement);
18
17
  }
19
- class ListboxOption extends VividElement {
18
+ class ListboxOption extends AffixIconWithTrailing(VividElement) {
20
19
  constructor(text, value, defaultSelected, selected) {
21
20
  super();
22
21
  this.defaultSelected = false;
@@ -182,6 +181,5 @@ __decorateClass([
182
181
  __decorateClass([
183
182
  volatile
184
183
  ], ListboxOption.prototype, "_matchedRange", 1);
185
- applyMixins(ListboxOption, AffixIconWithTrailing);
186
184
 
187
185
  export { ListboxOption as L, isListboxOption as i };