@vonage/vivid 3.50.0 → 3.51.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 (194) hide show
  1. package/accordion/index.cjs +0 -2
  2. package/accordion/index.js +0 -2
  3. package/accordion-item/index.cjs +0 -2
  4. package/accordion-item/index.js +0 -2
  5. package/alert/index.cjs +1 -3
  6. package/alert/index.js +1 -3
  7. package/appearance-ui/index.cjs +1 -1
  8. package/appearance-ui/index.js +1 -1
  9. package/audio-player/index.cjs +0 -2
  10. package/audio-player/index.js +0 -2
  11. package/banner/index.cjs +0 -2
  12. package/banner/index.js +0 -2
  13. package/breadcrumb-item/index.cjs +0 -2
  14. package/breadcrumb-item/index.js +0 -2
  15. package/button/index.cjs +0 -2
  16. package/button/index.js +0 -2
  17. package/card/index.cjs +1 -1
  18. package/card/index.js +1 -1
  19. package/checkbox/index.cjs +0 -2
  20. package/checkbox/index.js +0 -2
  21. package/combobox/index.cjs +6 -6
  22. package/combobox/index.js +6 -6
  23. package/custom-elements.json +231 -200
  24. package/data-grid/index.cjs +0 -2
  25. package/data-grid/index.js +0 -2
  26. package/date-picker/index.cjs +4 -4
  27. package/date-picker/index.js +4 -4
  28. package/date-range-picker/index.cjs +3 -3
  29. package/date-range-picker/index.js +3 -3
  30. package/dialog/index.cjs +1 -4
  31. package/dialog/index.js +1 -4
  32. package/elevation/index.cjs +1 -1
  33. package/elevation/index.js +1 -1
  34. package/fab/index.cjs +0 -2
  35. package/fab/index.js +0 -2
  36. package/file-picker/index.cjs +1 -2
  37. package/file-picker/index.js +1 -2
  38. package/focus/index.cjs +1 -1
  39. package/focus/index.js +1 -1
  40. package/header/index.cjs +1 -1
  41. package/header/index.js +1 -1
  42. package/index.cjs +3 -3
  43. package/index.js +3 -3
  44. package/lib/button/button.d.ts +7 -0
  45. package/lib/file-picker/file-picker.d.ts +2 -2
  46. package/lib/menu/definition.d.ts +2 -2
  47. package/lib/radio-group/definition.d.ts +2 -2
  48. package/lib/switch/switch.d.ts +2 -2
  49. package/listbox/index.cjs +4 -12
  50. package/listbox/index.js +4 -12
  51. package/menu/index.cjs +2 -4
  52. package/menu/index.js +2 -4
  53. package/menu-item/index.cjs +0 -2
  54. package/menu-item/index.js +0 -2
  55. package/nav-disclosure/index.cjs +0 -2
  56. package/nav-disclosure/index.js +0 -2
  57. package/nav-item/index.cjs +0 -2
  58. package/nav-item/index.js +0 -2
  59. package/number-field/index.cjs +1 -2
  60. package/number-field/index.js +1 -2
  61. package/option/index.cjs +0 -5
  62. package/option/index.js +0 -5
  63. package/package.json +1 -1
  64. package/pagination/index.cjs +0 -2
  65. package/pagination/index.js +0 -2
  66. package/popup/index.cjs +2 -4
  67. package/popup/index.js +2 -4
  68. package/radio/index.cjs +0 -2
  69. package/radio/index.js +0 -2
  70. package/select/index.cjs +2 -5
  71. package/select/index.js +2 -5
  72. package/selectable-box/index.cjs +0 -3
  73. package/selectable-box/index.js +0 -3
  74. package/shared/anchored.cjs +20 -1
  75. package/shared/anchored.js +21 -3
  76. package/shared/definition.cjs +2 -6
  77. package/shared/definition.js +2 -6
  78. package/shared/definition11.cjs +94 -40
  79. package/shared/definition11.js +94 -40
  80. package/shared/definition14.cjs +1 -1
  81. package/shared/definition14.js +1 -1
  82. package/shared/definition15.cjs +2 -3
  83. package/shared/definition15.js +2 -3
  84. package/shared/definition16.cjs +2 -2
  85. package/shared/definition16.js +2 -2
  86. package/shared/definition17.cjs +1 -4
  87. package/shared/definition17.js +1 -4
  88. package/shared/definition18.cjs +3 -5
  89. package/shared/definition18.js +1 -3
  90. package/shared/definition19.cjs +3 -5
  91. package/shared/definition19.js +1 -3
  92. package/shared/definition20.cjs +2 -5
  93. package/shared/definition20.js +2 -5
  94. package/shared/definition23.cjs +1 -2
  95. package/shared/definition23.js +1 -2
  96. package/shared/definition24.cjs +2 -5
  97. package/shared/definition24.js +2 -5
  98. package/shared/definition25.cjs +1 -1
  99. package/shared/definition25.js +1 -1
  100. package/shared/definition28.cjs +2 -3
  101. package/shared/definition28.js +3 -4
  102. package/shared/definition29.cjs +5 -2
  103. package/shared/definition29.js +5 -2
  104. package/shared/definition30.cjs +2 -3
  105. package/shared/definition30.js +2 -3
  106. package/shared/definition31.cjs +2 -3
  107. package/shared/definition31.js +2 -3
  108. package/shared/definition34.cjs +1 -1
  109. package/shared/definition34.js +1 -1
  110. package/shared/definition35.cjs +2 -7
  111. package/shared/definition35.js +2 -7
  112. package/shared/definition4.cjs +4 -4
  113. package/shared/definition4.js +5 -5
  114. package/shared/definition40.cjs +1 -2
  115. package/shared/definition40.js +1 -2
  116. package/shared/definition41.cjs +6 -7
  117. package/shared/definition41.js +5 -6
  118. package/shared/definition42.cjs +5 -10
  119. package/shared/definition42.js +3 -8
  120. package/shared/definition44.cjs +1 -2
  121. package/shared/definition44.js +1 -2
  122. package/shared/definition45.cjs +1 -2
  123. package/shared/definition45.js +1 -2
  124. package/shared/definition46.cjs +2 -3
  125. package/shared/definition46.js +2 -3
  126. package/shared/definition48.cjs +2 -6
  127. package/shared/definition48.js +2 -6
  128. package/shared/definition5.cjs +1 -2
  129. package/shared/definition5.js +1 -2
  130. package/shared/definition51.cjs +2 -6
  131. package/shared/definition51.js +2 -6
  132. package/shared/definition52.cjs +2 -3
  133. package/shared/definition52.js +2 -3
  134. package/shared/definition53.cjs +1 -1
  135. package/shared/definition53.js +1 -1
  136. package/shared/definition54.cjs +1 -1
  137. package/shared/definition54.js +1 -1
  138. package/shared/definition55.cjs +7 -3
  139. package/shared/definition55.js +8 -4
  140. package/shared/definition56.cjs +4 -2
  141. package/shared/definition56.js +5 -3
  142. package/shared/definition57.cjs +2 -6
  143. package/shared/definition57.js +2 -6
  144. package/shared/definition59.cjs +42 -11
  145. package/shared/definition59.js +41 -11
  146. package/shared/definition6.cjs +1 -1
  147. package/shared/definition6.js +1 -1
  148. package/shared/definition60.cjs +1782 -23
  149. package/shared/definition60.js +1781 -22
  150. package/shared/definition61.cjs +11 -1801
  151. package/shared/definition61.js +11 -1800
  152. package/shared/definition7.cjs +1 -1
  153. package/shared/definition7.js +1 -1
  154. package/shared/definition9.cjs +1 -2
  155. package/shared/definition9.js +1 -2
  156. package/shared/icon.cjs +1 -1
  157. package/shared/icon.js +1 -1
  158. package/shared/patterns/anchored.d.ts +4 -0
  159. package/shared/presentationDate.cjs +6 -11
  160. package/shared/presentationDate.js +6 -11
  161. package/shared/text-field.cjs +1 -1
  162. package/shared/text-field.js +1 -1
  163. package/slider/index.cjs +0 -2
  164. package/slider/index.js +0 -2
  165. package/split-button/index.cjs +0 -2
  166. package/split-button/index.js +0 -2
  167. package/styles/core/all.css +1 -1
  168. package/styles/core/theme.css +1 -1
  169. package/styles/core/typography.css +1 -1
  170. package/styles/tokens/theme-dark.css +4 -4
  171. package/styles/tokens/theme-light.css +4 -4
  172. package/styles/tokens/vivid-2-compat.css +1 -1
  173. package/switch/index.cjs +0 -2
  174. package/switch/index.js +0 -2
  175. package/tab/index.cjs +0 -3
  176. package/tab/index.js +0 -3
  177. package/tabs/index.cjs +0 -3
  178. package/tabs/index.js +0 -3
  179. package/tag/index.cjs +0 -3
  180. package/tag/index.js +0 -3
  181. package/text-area/index.cjs +0 -2
  182. package/text-area/index.js +0 -2
  183. package/text-field/index.cjs +1 -1
  184. package/text-field/index.js +1 -1
  185. package/time-picker/index.cjs +3 -3
  186. package/time-picker/index.js +3 -3
  187. package/toggletip/index.cjs +2 -4
  188. package/toggletip/index.js +2 -4
  189. package/tooltip/index.cjs +2 -4
  190. package/tooltip/index.js +2 -4
  191. package/tree-item/index.cjs +0 -3
  192. package/tree-item/index.js +0 -3
  193. package/vivid.api.json +6 -42
  194. package/style.css +0 -1
package/shared/definition46.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
2
2
  import { a as iconRegistries } from './definition26.js';
3
- import { f as focusRegistries } from './definition59.js';
4
3
  import { C as CheckableFormAssociated } from './form-associated.js';
5
4
  import { a as keySpace, k as keyEnter } from './key-codes.js';
6
5
  import { w as when } from './when.js';
@@ -96,7 +95,7 @@ __decorate([
96
95
  observable
97
96
  ], Switch$1.prototype, "defaultSlottedNodes", void 0);
98
97
 
99
- const styles = ":host(.disabled){cursor:not-allowed}.control{display:inline-flex;border-radius:14px;gap:8px;--focus-inset: -4px;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500))}.control.connotation-alert{--_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500))}.control.connotation-success{--_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500))}.control:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500))}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control: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)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control: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)}.control:where(:disabled,.disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control: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)}.control:where(.readonly):where(:not(:disabled,.disabled)).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.control: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))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8);display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:40px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.checked-indicator{--_switch-checked-indicator-size: calc(calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);block-size:var(--_switch-checked-indicator-size);border-radius:inherit;inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}\n";
98
+ const styles = ":host(.disabled){cursor:not-allowed}.control{display:inline-flex;border-radius:14px;gap:8px;--focus-inset: -4px;--focus-stroke-gap-color: transparent}.control.connotation-cta{--_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-fierce: var(--vvd-switch-cta-fierce, var(--vvd-color-cta-700))}.control.connotation-alert{--_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-fierce: var(--vvd-switch-alert-fierce, var(--vvd-color-alert-700))}.control.connotation-success{--_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));--_connotation-color-fierce: var(--vvd-switch-success-fierce, var(--vvd-color-success-700))}.control:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-fierce: var(--vvd-switch-accent-fierce, var(--vvd-color-neutral-700))}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control: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)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control: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)}.control:where(:disabled,.disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control: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)}.control:where(.readonly):where(:not(:disabled,.disabled)).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.control: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))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size:calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8);display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:40px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.checked-indicator{--_switch-checked-indicator-size: calc(calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);block-size:var(--_switch-checked-indicator-size);border-radius:inherit;inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}\n";
100
99
 
101
100
  var __defProp = Object.defineProperty;
102
101
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -156,7 +155,7 @@ const switchDefinition = Switch.compose({
156
155
  delegatesFocus: true
157
156
  }
158
157
  });
159
- const switchRegistries = [switchDefinition(), ...iconRegistries, ...focusRegistries];
158
+ const switchRegistries = [switchDefinition(), ...iconRegistries];
160
159
  const registerSwitch = registerFactory(switchRegistries);
161
160
 
162
161
  export { switchRegistries as a, registerSwitch as r, switchDefinition as s };
package/shared/definition48.cjs CHANGED
@@ -2,10 +2,8 @@
2
2
 
3
3
  const index = require('./index.cjs');
4
4
  const definition = require('./definition26.cjs');
5
- const definition$1 = require('./definition59.cjs');
6
5
  const affix = require('./affix.cjs');
7
6
  const applyMixins = require('./apply-mixins.cjs');
8
- const focus = require('./focus2.cjs');
9
7
  const classNames = require('./class-names.cjs');
10
8
 
11
9
  /**
@@ -21,7 +19,7 @@ index.__decorate([
21
19
  index.attr({ mode: "boolean" })
22
20
  ], Tab$1.prototype, "disabled", void 0);
23
21
 
24
- const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300))}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(.vertical) .base{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}.focus-indicator{--focus-stroke-gap-color: transparent}:host(:not(:focus-visible)) .focus-indicator{display:none}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;background:currentColor;block-size:2px;border-radius:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}\n";
22
+ const styles = ":host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300))}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(.vertical) .base{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;background:currentColor;block-size:2px;border-radius:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}\n";
25
23
 
26
24
  var __defProp = Object.defineProperty;
27
25
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -74,11 +72,9 @@ const getClasses = ({
74
72
  );
75
73
  function TabTemplate(context) {
76
74
  const affixIconTemplate = affix.affixIconTemplateFactory(context);
77
- const focusTemplate = focus.focusTemplateFactory(context);
78
75
  return index.html`
79
76
  <template slot="tab" role="tab" aria-disabled="${(x) => x.disabled}" aria-selected="${(x) => x.ariaSelected}">
80
77
  <div class="${getClasses}" >
81
- ${() => focusTemplate}
82
78
  ${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
83
79
  ${(x) => x.label}
84
80
  </div>
@@ -90,7 +86,7 @@ const tabDefinition = Tab.compose({
90
86
  template: TabTemplate,
91
87
  styles
92
88
  });
93
- const tabRegistries = [tabDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
89
+ const tabRegistries = [tabDefinition(), ...definition.iconRegistries];
94
90
  const registerTab = index.registerFactory(tabRegistries);
95
91
 
96
92
  exports.registerTab = registerTab;
package/shared/definition48.js CHANGED
@@ -1,9 +1,7 @@
1
1
  import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
2
2
  import { a as iconRegistries } from './definition26.js';
3
- import { f as focusRegistries } from './definition59.js';
4
3
  import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
5
4
  import { a as applyMixins } from './apply-mixins.js';
6
- import { f as focusTemplateFactory } from './focus2.js';
7
5
  import { c as classNames } from './class-names.js';
8
6
 
9
7
  /**
@@ -19,7 +17,7 @@ __decorate([
19
17
  attr({ mode: "boolean" })
20
18
  ], Tab$1.prototype, "disabled", void 0);
21
19
 
22
- const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300))}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(.vertical) .base{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}.focus-indicator{--focus-stroke-gap-color: transparent}:host(:not(:focus-visible)) .focus-indicator{display:none}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;background:currentColor;block-size:2px;border-radius:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}\n";
20
+ const styles = ":host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}.base{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300))}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(.vertical) .base{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}:host(:not(.vertical)) .base:after{position:absolute;background:currentColor;block-size:2px;border-radius:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}\n";
23
21
 
24
22
  var __defProp = Object.defineProperty;
25
23
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -72,11 +70,9 @@ const getClasses = ({
72
70
  );
73
71
  function TabTemplate(context) {
74
72
  const affixIconTemplate = affixIconTemplateFactory(context);
75
- const focusTemplate = focusTemplateFactory(context);
76
73
  return html`
77
74
  <template slot="tab" role="tab" aria-disabled="${(x) => x.disabled}" aria-selected="${(x) => x.ariaSelected}">
78
75
  <div class="${getClasses}" >
79
- ${() => focusTemplate}
80
76
  ${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
81
77
  ${(x) => x.label}
82
78
  </div>
@@ -88,7 +84,7 @@ const tabDefinition = Tab.compose({
88
84
  template: TabTemplate,
89
85
  styles
90
86
  });
91
- const tabRegistries = [tabDefinition(), ...iconRegistries, ...focusRegistries];
87
+ const tabRegistries = [tabDefinition(), ...iconRegistries];
92
88
  const registerTab = registerFactory(tabRegistries);
93
89
 
94
90
  export { tabRegistries as a, registerTab as r, tabDefinition as t };
package/shared/definition5.cjs CHANGED
@@ -3,7 +3,6 @@
3
3
  const index = require('./index.cjs');
4
4
  const definition = require('./definition11.cjs');
5
5
  const definition$1 = require('./definition44.cjs');
6
- const definition$2 = require('./definition59.cjs');
7
6
  require('./affix.cjs');
8
7
  require('./index2.cjs');
9
8
  const localized = require('./localized.cjs');
@@ -191,7 +190,7 @@ const audioPlayerDefinition = AudioPlayer.compose({
191
190
  template: AudioPlayerTemplate,
192
191
  styles
193
192
  });
194
- const audioPlayerRegistries = [audioPlayerDefinition(), ...definition.buttonRegistries, ...definition$1.sliderRegistries, ...definition$2.focusRegistries];
193
+ const audioPlayerRegistries = [audioPlayerDefinition(), ...definition.buttonRegistries, ...definition$1.sliderRegistries];
195
194
  const registerAudioPlayer = index.registerFactory(audioPlayerRegistries);
196
195
 
197
196
  exports.audioPlayerDefinition = audioPlayerDefinition;
package/shared/definition5.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
2
2
  import { B as Button, a as buttonRegistries } from './definition11.js';
3
3
  import { S as Slider, a as sliderRegistries } from './definition44.js';
4
- import { f as focusRegistries } from './definition59.js';
5
4
  import './affix.js';
6
5
  import './index2.js';
7
6
  import { L as Localized } from './localized.js';
@@ -189,7 +188,7 @@ const audioPlayerDefinition = AudioPlayer.compose({
189
188
  template: AudioPlayerTemplate,
190
189
  styles
191
190
  });
192
- const audioPlayerRegistries = [audioPlayerDefinition(), ...buttonRegistries, ...sliderRegistries, ...focusRegistries];
191
+ const audioPlayerRegistries = [audioPlayerDefinition(), ...buttonRegistries, ...sliderRegistries];
193
192
  const registerAudioPlayer = registerFactory(audioPlayerRegistries);
194
193
 
195
194
  export { audioPlayerDefinition as a, audioPlayerRegistries as b, registerAudioPlayer as r };
package/shared/definition51.cjs CHANGED
@@ -2,10 +2,8 @@
2
2
 
3
3
  const index = require('./index.cjs');
4
4
  const definition = require('./definition26.cjs');
5
- const definition$1 = require('./definition59.cjs');
6
5
  const affix = require('./affix.cjs');
7
6
  const applyMixins = require('./apply-mixins.cjs');
8
- const focus = require('./focus2.cjs');
9
7
  const icon = require('./icon.cjs');
10
8
  const when = require('./when.cjs');
11
9
  const classNames = require('./class-names.cjs');
@@ -83,7 +81,7 @@ __decorateClass([
83
81
  ], Tag.prototype, "selected", 2);
84
82
  applyMixins.applyMixins(Tag, affix.AffixIcon);
85
83
 
86
- const styles = ".base{--tag-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-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-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:14px}@supports selector(:focus-visible){.base:focus-visible{outline:none}}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;background-color:var(--_appearance-color-fill);border-radius:inherit;cursor:pointer}.focus-indicator{--focus-stroke-gap-color: transparent}.base:not(:focus-visible) .focus-indicator{display:none}\n";
84
+ const styles = ".base{--tag-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-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-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_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:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:14px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;background-color:var(--_appearance-color-fill);border-radius:inherit;cursor:pointer}\n";
87
85
 
88
86
  const getClasses = ({
89
87
  connotation,
@@ -115,7 +113,6 @@ function renderDismissButton(iconTag) {
115
113
  const tagTemplate = (context) => {
116
114
  const affixIconTemplate = affix.affixIconTemplateFactory(context);
117
115
  const iconTag = context.tagFor(icon.Icon);
118
- const focusTemplate = focus.focusTemplateFactory(context);
119
116
  return index.html`
120
117
  <span class="${getClasses}"
121
118
  role="option"
@@ -131,7 +128,6 @@ const tagTemplate = (context) => {
131
128
  (x) => x.selectable && x.selected,
132
129
  index.html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
133
130
  )}
134
- ${() => focusTemplate}
135
131
  </span>`;
136
132
  };
137
133
 
@@ -143,7 +139,7 @@ const tagDefinition = Tag.compose({
143
139
  delegatesFocus: true
144
140
  }
145
141
  });
146
- const tagRegistries = [tagDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
142
+ const tagRegistries = [tagDefinition(), ...definition.iconRegistries];
147
143
  const registerTag = index.registerFactory(tagRegistries);
148
144
 
149
145
  exports.registerTag = registerTag;
package/shared/definition51.js CHANGED
@@ -1,9 +1,7 @@
1
1
  import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
2
2
  import { a as iconRegistries } from './definition26.js';
3
- import { f as focusRegistries } from './definition59.js';
4
3
  import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
5
4
  import { a as applyMixins } from './apply-mixins.js';
6
- import { f as focusTemplateFactory } from './focus2.js';
7
5
  import { I as Icon } from './icon.js';
8
6
  import { w as when } from './when.js';
9
7
  import { c as classNames } from './class-names.js';
@@ -81,7 +79,7 @@ __decorateClass([
81
79
  ], Tag.prototype, "selected", 2);
82
80
  applyMixins(Tag, AffixIcon);
83
81
 
84
- const styles = ".base{--tag-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-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-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:14px}@supports selector(:focus-visible){.base:focus-visible{outline:none}}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;background-color:var(--_appearance-color-fill);border-radius:inherit;cursor:pointer}.focus-indicator{--focus-stroke-gap-color: transparent}.base:not(:focus-visible) .focus-indicator{display:none}\n";
82
+ const styles = ".base{--tag-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--tag-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-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_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:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(:active,.active):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base:where(:disabled,.disabled).appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:14px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{display:flex;align-items:center;background-color:var(--_appearance-color-fill);border-radius:inherit;cursor:pointer}\n";
85
83
 
86
84
  const getClasses = ({
87
85
  connotation,
@@ -113,7 +111,6 @@ function renderDismissButton(iconTag) {
113
111
  const tagTemplate = (context) => {
114
112
  const affixIconTemplate = affixIconTemplateFactory(context);
115
113
  const iconTag = context.tagFor(Icon);
116
- const focusTemplate = focusTemplateFactory(context);
117
114
  return html`
118
115
  <span class="${getClasses}"
119
116
  role="option"
@@ -129,7 +126,6 @@ const tagTemplate = (context) => {
129
126
  (x) => x.selectable && x.selected,
130
127
  html`<${iconTag} class="selectable-icon" name="check-circle-solid"></${iconTag}>`
131
128
  )}
132
- ${() => focusTemplate}
133
129
  </span>`;
134
130
  };
135
131
 
@@ -141,7 +137,7 @@ const tagDefinition = Tag.compose({
141
137
  delegatesFocus: true
142
138
  }
143
139
  });
144
- const tagRegistries = [tagDefinition(), ...iconRegistries, ...focusRegistries];
140
+ const tagRegistries = [tagDefinition(), ...iconRegistries];
145
141
  const registerTag = registerFactory(tagRegistries);
146
142
 
147
143
  export { registerTag as r, tagDefinition as t };
package/shared/definition52.cjs CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  const index = require('./index.cjs');
4
4
  const definition = require('./definition26.cjs');
5
- const definition$1 = require('./definition59.cjs');
6
5
  require('./affix.cjs');
7
6
  const index$1 = require('./index2.cjs');
8
7
  const Reflector = require('./Reflector.cjs');
@@ -190,7 +189,7 @@ index.__decorate([
190
189
  ], TextArea$1.prototype, "defaultSlottedNodes", void 0);
191
190
  applyMixins.applyMixins(TextArea$1, textField.DelegatesARIATextbox);
192
191
 
193
- const styles = ":host{display:inline-block}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}.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-primary);--_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-primary);--_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-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{padding:8px 16px;border:0 none;appearance:none;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus{outline:2px solid var(--focus-stroke-color, currentColor);outline-offset:-2px}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}\n";
192
+ const styles = ":host{display:inline-block}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}.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-primary);--_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-primary);--_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-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{padding:8px 16px;border:0 none;appearance:none;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow: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))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}\n";
194
193
 
195
194
  var __defProp = Object.defineProperty;
196
195
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -296,7 +295,7 @@ const textAreaDefinition = TextArea.compose({
296
295
  delegatesFocus: true
297
296
  }
298
297
  });
299
- const textAreaRegistries = [textAreaDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
298
+ const textAreaRegistries = [textAreaDefinition(), ...definition.iconRegistries];
300
299
  const registerTextArea = index.registerFactory(textAreaRegistries);
301
300
 
302
301
  exports.registerTextArea = registerTextArea;
package/shared/definition52.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable, h as html, r as registerFactory } from './index.js';
2
2
  import { a as iconRegistries } from './definition26.js';
3
- import { f as focusRegistries } from './definition59.js';
4
3
  import './affix.js';
5
4
  import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './index2.js';
6
5
  import { R as Reflector } from './Reflector.js';
@@ -188,7 +187,7 @@ __decorate([
188
187
  ], TextArea$1.prototype, "defaultSlottedNodes", void 0);
189
188
  applyMixins(TextArea$1, DelegatesARIATextbox);
190
189
 
191
- const styles = ":host{display:inline-block}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}.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-primary);--_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-primary);--_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-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{padding:8px 16px;border:0 none;appearance:none;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus{outline:2px solid var(--focus-stroke-color, currentColor);outline-offset:-2px}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}\n";
190
+ const styles = ":host{display:inline-block}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}.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-primary);--_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-primary);--_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-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{padding:8px 16px;border:0 none;appearance:none;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);grid-column:1/-1;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow: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))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}\n";
192
191
 
193
192
  var __defProp = Object.defineProperty;
194
193
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -294,7 +293,7 @@ const textAreaDefinition = TextArea.compose({
294
293
  delegatesFocus: true
295
294
  }
296
295
  });
297
- const textAreaRegistries = [textAreaDefinition(), ...iconRegistries, ...focusRegistries];
296
+ const textAreaRegistries = [textAreaDefinition(), ...iconRegistries];
298
297
  const registerTextArea = registerFactory(textAreaRegistries);
299
298
 
300
299
  export { textAreaRegistries as a, registerTextArea as r, textAreaDefinition as t };
package/shared/definition53.cjs CHANGED
@@ -1,7 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  const index = require('./index.cjs');
4
- const definition$1 = require('./definition59.cjs');
4
+ const definition$1 = require('./definition61.cjs');
5
5
  const definition = require('./definition26.cjs');
6
6
  const affix = require('./affix.cjs');
7
7
  const index$1 = require('./index2.cjs');
package/shared/definition53.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { a as attr, o as observable, h as html, r as registerFactory } from './index.js';
2
- import { f as focusRegistries } from './definition59.js';
2
+ import { f as focusRegistries } from './definition61.js';
3
3
  import { a as iconRegistries } from './definition26.js';
4
4
  import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
5
5
  import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './index2.js';
package/shared/definition54.cjs CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  const index = require('./index.cjs');
4
4
  const definition$1 = require('./definition53.cjs');
5
- const definition = require('./definition61.cjs');
5
+ const definition = require('./definition60.cjs');
6
6
  const definition$2 = require('./definition11.cjs');
7
7
  require('./affix.cjs');
8
8
  const index$1 = require('./index2.cjs');
package/shared/definition54.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { F as FoundationElement, a as attr, D as DOM, n as nullableNumberConverter, o as observable, h as html, r as registerFactory } from './index.js';
2
2
  import { T as TextField, a as textFieldRegistries } from './definition53.js';
3
- import { P as Popup, p as popupRegistries } from './definition61.js';
3
+ import { P as Popup, p as popupRegistries } from './definition60.js';
4
4
  import { B as Button, a as buttonRegistries } from './definition11.js';
5
5
  import './affix.js';
6
6
  import { e as errorText, f as formElements, a as FormElementHelperText } from './index2.js';
package/shared/definition55.cjs CHANGED
@@ -1,12 +1,12 @@
1
1
  'use strict';
2
2
 
3
3
  const index = require('./index.cjs');
4
- const definition = require('./definition61.cjs');
4
+ const definition = require('./definition60.cjs');
5
5
  const anchored = require('./anchored.cjs');
6
6
  const when = require('./when.cjs');
7
7
  const classNames = require('./class-names.cjs');
8
8
 
9
- const styles = ".control{display:inline-block}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}\n";
9
+ const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}\n";
10
10
 
11
11
  var __defProp = Object.defineProperty;
12
12
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -31,7 +31,9 @@ let Toggletip = class extends index.FoundationElement {
31
31
  index.DOM.queueUpdate(() => this.open = true);
32
32
  };
33
33
  this.#closeOnClickOutside = (e) => {
34
- if (!this.contains(e.target))
34
+ const clickedOutside = !this.contains(e.target);
35
+ const clickedOnAnchor = this._anchorEl?.contains(e.target);
36
+ if (clickedOutside || clickedOnAnchor)
35
37
  this.open = false;
36
38
  };
37
39
  this.#closeOnEscape = (e) => {
@@ -114,7 +116,9 @@ Toggletip = __decorateClass([
114
116
  const getClasses = (_) => classNames.classNames("control");
115
117
  const ToggletipTemplate = (context) => {
116
118
  const popup = context.tagFor(definition.Popup);
119
+ const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
117
120
  return index.html`
121
+ ${anchorSlotTemplate}
118
122
  <${popup}
119
123
  class="${getClasses}"
120
124
  arrow
package/shared/definition55.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { a as attr, F as FoundationElement, D as DOM, h as html, r as registerFactory } from './index.js';
2
- import { P as Popup, p as popupRegistries } from './definition61.js';
3
- import { a as anchored } from './anchored.js';
2
+ import { P as Popup, p as popupRegistries } from './definition60.js';
3
+ import { b as anchored, a as anchorSlotTemplateFactory } from './anchored.js';
4
4
  import { w as when } from './when.js';
5
5
  import { c as classNames } from './class-names.js';
6
6
 
7
- const styles = ".control{display:inline-block}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}\n";
7
+ const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}\n";
8
8
 
9
9
  var __defProp = Object.defineProperty;
10
10
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -29,7 +29,9 @@ let Toggletip = class extends FoundationElement {
29
29
  DOM.queueUpdate(() => this.open = true);
30
30
  };
31
31
  this.#closeOnClickOutside = (e) => {
32
- if (!this.contains(e.target))
32
+ const clickedOutside = !this.contains(e.target);
33
+ const clickedOnAnchor = this._anchorEl?.contains(e.target);
34
+ if (clickedOutside || clickedOnAnchor)
33
35
  this.open = false;
34
36
  };
35
37
  this.#closeOnEscape = (e) => {
@@ -112,7 +114,9 @@ Toggletip = __decorateClass([
112
114
  const getClasses = (_) => classNames("control");
113
115
  const ToggletipTemplate = (context) => {
114
116
  const popup = context.tagFor(Popup);
117
+ const anchorSlotTemplate = anchorSlotTemplateFactory();
115
118
  return html`
119
+ ${anchorSlotTemplate}
116
120
  <${popup}
117
121
  class="${getClasses}"
118
122
  arrow
package/shared/definition56.cjs CHANGED
@@ -1,11 +1,11 @@
1
1
  'use strict';
2
2
 
3
3
  const index = require('./index.cjs');
4
- const definition = require('./definition61.cjs');
4
+ const definition = require('./definition60.cjs');
5
5
  const anchored = require('./anchored.cjs');
6
6
  const classNames = require('./class-names.cjs');
7
7
 
8
- const styles = ".control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}\n";
8
+ const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}\n";
9
9
 
10
10
  var __defProp = Object.defineProperty;
11
11
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -101,7 +101,9 @@ const getClasses = ({
101
101
  );
102
102
  const TooltipTemplate = (context) => {
103
103
  const popupTag = context.tagFor(definition.Popup);
104
+ const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
104
105
  return index.html`
106
+ ${anchorSlotTemplate}
105
107
  <${popupTag} class="${getClasses}" arrow alternate
106
108
  :placement=${(x) => x.placement}
107
109
  :anchor="${(x) => x._anchorEl}"
package/shared/definition56.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
2
- import { P as Popup, p as popupRegistries } from './definition61.js';
3
- import { a as anchored } from './anchored.js';
2
+ import { P as Popup, p as popupRegistries } from './definition60.js';
3
+ import { b as anchored, a as anchorSlotTemplateFactory } from './anchored.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
 
6
- const styles = ".control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}\n";
6
+ const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}\n";
7
7
 
8
8
  var __defProp = Object.defineProperty;
9
9
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -99,7 +99,9 @@ const getClasses = ({
99
99
  );
100
100
  const TooltipTemplate = (context) => {
101
101
  const popupTag = context.tagFor(Popup);
102
+ const anchorSlotTemplate = anchorSlotTemplateFactory();
102
103
  return html`
104
+ ${anchorSlotTemplate}
103
105
  <${popupTag} class="${getClasses}" arrow alternate
104
106
  :placement=${(x) => x.placement}
105
107
  :anchor="${(x) => x._anchorEl}"