@vonage/vivid 3.50.0 → 3.50.1

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 (184) 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/audio-player/index.cjs +0 -2
  8. package/audio-player/index.js +0 -2
  9. package/banner/index.cjs +0 -2
  10. package/banner/index.js +0 -2
  11. package/breadcrumb-item/index.cjs +0 -2
  12. package/breadcrumb-item/index.js +0 -2
  13. package/button/index.cjs +0 -2
  14. package/button/index.js +0 -2
  15. package/card/index.cjs +1 -1
  16. package/card/index.js +1 -1
  17. package/checkbox/index.cjs +0 -2
  18. package/checkbox/index.js +0 -2
  19. package/combobox/index.cjs +6 -6
  20. package/combobox/index.js +6 -6
  21. package/custom-elements.json +33 -187
  22. package/data-grid/index.cjs +0 -2
  23. package/data-grid/index.js +0 -2
  24. package/date-picker/index.cjs +4 -4
  25. package/date-picker/index.js +4 -4
  26. package/date-range-picker/index.cjs +3 -3
  27. package/date-range-picker/index.js +3 -3
  28. package/dialog/index.cjs +1 -4
  29. package/dialog/index.js +1 -4
  30. package/elevation/index.cjs +1 -1
  31. package/elevation/index.js +1 -1
  32. package/fab/index.cjs +0 -2
  33. package/fab/index.js +0 -2
  34. package/file-picker/index.cjs +1 -2
  35. package/file-picker/index.js +1 -2
  36. package/focus/index.cjs +1 -1
  37. package/focus/index.js +1 -1
  38. package/header/index.cjs +1 -1
  39. package/header/index.js +1 -1
  40. package/index.cjs +3 -3
  41. package/index.js +3 -3
  42. package/lib/file-picker/file-picker.d.ts +2 -2
  43. package/lib/menu/definition.d.ts +2 -2
  44. package/lib/radio-group/definition.d.ts +2 -2
  45. package/lib/switch/switch.d.ts +2 -2
  46. package/listbox/index.cjs +4 -12
  47. package/listbox/index.js +4 -12
  48. package/menu/index.cjs +2 -4
  49. package/menu/index.js +2 -4
  50. package/menu-item/index.cjs +0 -2
  51. package/menu-item/index.js +0 -2
  52. package/nav-disclosure/index.cjs +0 -2
  53. package/nav-disclosure/index.js +0 -2
  54. package/nav-item/index.cjs +0 -2
  55. package/nav-item/index.js +0 -2
  56. package/number-field/index.cjs +1 -2
  57. package/number-field/index.js +1 -2
  58. package/option/index.cjs +0 -5
  59. package/option/index.js +0 -5
  60. package/package.json +1 -1
  61. package/pagination/index.cjs +0 -2
  62. package/pagination/index.js +0 -2
  63. package/popup/index.cjs +2 -4
  64. package/popup/index.js +2 -4
  65. package/radio/index.cjs +0 -2
  66. package/radio/index.js +0 -2
  67. package/select/index.cjs +2 -5
  68. package/select/index.js +2 -5
  69. package/selectable-box/index.cjs +0 -3
  70. package/selectable-box/index.js +0 -3
  71. package/shared/definition.cjs +2 -6
  72. package/shared/definition.js +2 -6
  73. package/shared/definition11.cjs +1 -2
  74. package/shared/definition11.js +1 -2
  75. package/shared/definition14.cjs +1 -1
  76. package/shared/definition14.js +1 -1
  77. package/shared/definition15.cjs +2 -3
  78. package/shared/definition15.js +2 -3
  79. package/shared/definition16.cjs +2 -2
  80. package/shared/definition16.js +2 -2
  81. package/shared/definition17.cjs +1 -4
  82. package/shared/definition17.js +1 -4
  83. package/shared/definition18.cjs +3 -5
  84. package/shared/definition18.js +1 -3
  85. package/shared/definition19.cjs +3 -5
  86. package/shared/definition19.js +1 -3
  87. package/shared/definition20.cjs +2 -5
  88. package/shared/definition20.js +2 -5
  89. package/shared/definition23.cjs +1 -2
  90. package/shared/definition23.js +1 -2
  91. package/shared/definition24.cjs +2 -5
  92. package/shared/definition24.js +2 -5
  93. package/shared/definition25.cjs +1 -1
  94. package/shared/definition25.js +1 -1
  95. package/shared/definition28.cjs +2 -3
  96. package/shared/definition28.js +2 -3
  97. package/shared/definition29.cjs +1 -1
  98. package/shared/definition29.js +1 -1
  99. package/shared/definition30.cjs +2 -3
  100. package/shared/definition30.js +2 -3
  101. package/shared/definition31.cjs +2 -3
  102. package/shared/definition31.js +2 -3
  103. package/shared/definition34.cjs +1 -1
  104. package/shared/definition34.js +1 -1
  105. package/shared/definition35.cjs +2 -7
  106. package/shared/definition35.js +2 -7
  107. package/shared/definition4.cjs +4 -4
  108. package/shared/definition4.js +5 -5
  109. package/shared/definition40.cjs +1 -2
  110. package/shared/definition40.js +1 -2
  111. package/shared/definition41.cjs +6 -7
  112. package/shared/definition41.js +5 -6
  113. package/shared/definition42.cjs +5 -10
  114. package/shared/definition42.js +3 -8
  115. package/shared/definition44.cjs +1 -2
  116. package/shared/definition44.js +1 -2
  117. package/shared/definition45.cjs +1 -2
  118. package/shared/definition45.js +1 -2
  119. package/shared/definition46.cjs +1 -2
  120. package/shared/definition46.js +1 -2
  121. package/shared/definition48.cjs +2 -6
  122. package/shared/definition48.js +2 -6
  123. package/shared/definition5.cjs +1 -2
  124. package/shared/definition5.js +1 -2
  125. package/shared/definition51.cjs +2 -6
  126. package/shared/definition51.js +2 -6
  127. package/shared/definition52.cjs +2 -3
  128. package/shared/definition52.js +2 -3
  129. package/shared/definition53.cjs +1 -1
  130. package/shared/definition53.js +1 -1
  131. package/shared/definition54.cjs +1 -1
  132. package/shared/definition54.js +1 -1
  133. package/shared/definition55.cjs +1 -1
  134. package/shared/definition55.js +1 -1
  135. package/shared/definition56.cjs +1 -1
  136. package/shared/definition56.js +1 -1
  137. package/shared/definition57.cjs +2 -6
  138. package/shared/definition57.js +2 -6
  139. package/shared/definition59.cjs +42 -11
  140. package/shared/definition59.js +41 -11
  141. package/shared/definition60.cjs +1782 -23
  142. package/shared/definition60.js +1781 -22
  143. package/shared/definition61.cjs +11 -1801
  144. package/shared/definition61.js +11 -1800
  145. package/shared/definition9.cjs +1 -2
  146. package/shared/definition9.js +1 -2
  147. package/shared/icon.cjs +1 -1
  148. package/shared/icon.js +1 -1
  149. package/shared/presentationDate.cjs +6 -11
  150. package/shared/presentationDate.js +6 -11
  151. package/shared/text-field.cjs +1 -1
  152. package/shared/text-field.js +1 -1
  153. package/slider/index.cjs +0 -2
  154. package/slider/index.js +0 -2
  155. package/split-button/index.cjs +0 -2
  156. package/split-button/index.js +0 -2
  157. package/styles/core/all.css +1 -1
  158. package/styles/core/theme.css +1 -1
  159. package/styles/core/typography.css +1 -1
  160. package/styles/tokens/theme-dark.css +4 -4
  161. package/styles/tokens/theme-light.css +4 -4
  162. package/styles/tokens/vivid-2-compat.css +1 -1
  163. package/switch/index.cjs +0 -2
  164. package/switch/index.js +0 -2
  165. package/tab/index.cjs +0 -3
  166. package/tab/index.js +0 -3
  167. package/tabs/index.cjs +0 -3
  168. package/tabs/index.js +0 -3
  169. package/tag/index.cjs +0 -3
  170. package/tag/index.js +0 -3
  171. package/text-area/index.cjs +0 -2
  172. package/text-area/index.js +0 -2
  173. package/text-field/index.cjs +1 -1
  174. package/text-field/index.js +1 -1
  175. package/time-picker/index.cjs +3 -3
  176. package/time-picker/index.js +3 -3
  177. package/toggletip/index.cjs +2 -4
  178. package/toggletip/index.js +2 -4
  179. package/tooltip/index.cjs +2 -4
  180. package/tooltip/index.js +2 -4
  181. package/tree-item/index.cjs +0 -3
  182. package/tree-item/index.js +0 -3
  183. package/vivid.api.json +6 -42
  184. package/style.css +0 -1
@@ -1,13 +1,10 @@
1
1
  import { F as FoundationElement, O as Observable, _ as __decorate, o as observable, 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 ARIAGlobalStatesAndProperties } from './aria-global.js';
6
5
  import { S as StartEnd } from './start-end.js';
7
6
  import { a as applyMixins } from './apply-mixins.js';
8
7
  import { i as isHTMLElement } from './dom.js';
9
- import { f as focusTemplateFactory } from './focus2.js';
10
- import './index2.js';
11
8
  import { w as when } from './when.js';
12
9
  import { c as classNames } from './class-names.js';
13
10
 
@@ -258,7 +255,6 @@ const getClasses = ({
258
255
  );
259
256
  const ListboxOptionTemplate = (context) => {
260
257
  const affixIconTemplate = affixIconTemplateFactory(context);
261
- const focusTemplate = focusTemplateFactory(context);
262
258
  return html`
263
259
  <template
264
260
  aria-checked="${(x) => x.ariaChecked}"
@@ -268,7 +264,6 @@ const ListboxOptionTemplate = (context) => {
268
264
  aria-setsize="${(x) => x.ariaSetSize}"
269
265
  role="option">
270
266
  <div class="${getClasses}">
271
- ${() => focusTemplate}
272
267
  ${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
273
268
  ${when((x) => x.text, html`<div class="text">${(x) => x.text}</div>`)}
274
269
  </div>
@@ -276,14 +271,14 @@ const ListboxOptionTemplate = (context) => {
276
271
  `;
277
272
  };
278
273
 
279
- const styles = ":host([disabled]){cursor:not-allowed}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-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:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.focus-indicator{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent}:host(:not([aria-checked=true])) .focus-indicator{display:none}\n";
274
+ const styles = ":host([disabled]){cursor:not-allowed}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);border-radius:8px;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-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:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base .text{font:var(--vvd-typography-base)}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
280
275
 
281
276
  const listboxOptionDefinition = ListboxOption.compose({
282
277
  baseName: "option",
283
278
  template: ListboxOptionTemplate,
284
279
  styles
285
280
  });
286
- const listboxOptionRegistries = [listboxOptionDefinition(), ...iconRegistries, ...focusRegistries];
281
+ const listboxOptionRegistries = [listboxOptionDefinition(), ...iconRegistries];
287
282
  const registerOption = registerFactory(listboxOptionRegistries);
288
283
 
289
284
  export { ListboxOption as L, listboxOptionRegistries as a, isListboxOption as i, listboxOptionDefinition as l, registerOption as r };
@@ -2,7 +2,7 @@
2
2
 
3
3
  const index = require('./index.cjs');
4
4
  const definition$2 = require('./definition11.cjs');
5
- const definition = require('./definition60.cjs');
5
+ const definition = require('./definition59.cjs');
6
6
  const definition$1 = require('./definition26.cjs');
7
7
  const enums = require('./enums.cjs');
8
8
  const affix = require('./affix.cjs');
@@ -13,7 +13,7 @@ const button = require('./button.cjs');
13
13
  const when = require('./when.cjs');
14
14
  const classNames = require('./class-names.cjs');
15
15
 
16
- const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline-end:0;inset-inline-start:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block-end:auto;inset-block-start:0}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}.base{display:flex;align-items:center;padding:16px;background-color:var(--vvd-color-neutral-50);border-radius:8px;color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .icon{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}\n";
16
+ const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline-end:0;inset-inline-start:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block-end:auto;inset-block-start:0}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}.base{display:flex;align-items:center;padding:16px;background-color:var(--vvd-color-neutral-50);border-radius:8px;color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}\n";
17
17
 
18
18
  var __defProp = Object.defineProperty;
19
19
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -149,7 +149,7 @@ const getControlClasses = ({ open, placement, strategy }) => classNames.classNam
149
149
  );
150
150
  function renderIcon(context) {
151
151
  const affixIconTemplate = affix.affixIconTemplateFactory(context);
152
- return index.html`${(x) => affixIconTemplate(x.conditionedIcon)}`;
152
+ return index.html`${(x) => affixIconTemplate(x.conditionedIcon, affix.IconWrapper.Slot)}`;
153
153
  }
154
154
  function renderDismissButton(buttonTag) {
155
155
  return index.html`
@@ -172,7 +172,7 @@ const AlertTemplate = (context) => {
172
172
  aria-live="assertive"
173
173
  >
174
174
  <div part="vvd-theme-alternate" class="${getClasses}">
175
- ${when.when((x) => x.icon || x.connotation, renderIcon(context))}
175
+ ${renderIcon(context)}
176
176
  <div class="alert-text">
177
177
  ${when.when((x) => x.headline, index.html`<header class="headline">${(x) => x.headline}</header>`)}
178
178
  ${when.when((x) => x.text, index.html`<div class="main-text">${(x) => x.text}</div>`)}
@@ -1,9 +1,9 @@
1
1
  import { a as attr, F as FoundationElement, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
2
2
  import { a as buttonRegistries } from './definition11.js';
3
- import { E as Elevation, e as elevationRegistries } from './definition60.js';
3
+ import { E as Elevation, e as elevationRegistries } from './definition59.js';
4
4
  import { a as iconRegistries } from './definition26.js';
5
5
  import { C as Connotation } from './enums.js';
6
- import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
6
+ import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
7
7
  import './index2.js';
8
8
  import { L as Localized } from './localized.js';
9
9
  import { a as applyMixins } from './apply-mixins.js';
@@ -11,7 +11,7 @@ import { B as Button$1 } from './button.js';
11
11
  import { w as when } from './when.js';
12
12
  import { c as classNames } from './class-names.js';
13
13
 
14
- const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline-end:0;inset-inline-start:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block-end:auto;inset-block-start:0}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}.base{display:flex;align-items:center;padding:16px;background-color:var(--vvd-color-neutral-50);border-radius:8px;color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base .icon{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}\n";
14
+ const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline-end:0;inset-inline-start:0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block-end:auto;inset-block-start:0}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}.base{display:flex;align-items:center;padding:16px;background-color:var(--vvd-color-neutral-50);border-radius:8px;color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}\n";
15
15
 
16
16
  var __defProp = Object.defineProperty;
17
17
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -147,7 +147,7 @@ const getControlClasses = ({ open, placement, strategy }) => classNames(
147
147
  );
148
148
  function renderIcon(context) {
149
149
  const affixIconTemplate = affixIconTemplateFactory(context);
150
- return html`${(x) => affixIconTemplate(x.conditionedIcon)}`;
150
+ return html`${(x) => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}`;
151
151
  }
152
152
  function renderDismissButton(buttonTag) {
153
153
  return html`
@@ -170,7 +170,7 @@ const AlertTemplate = (context) => {
170
170
  aria-live="assertive"
171
171
  >
172
172
  <div part="vvd-theme-alternate" class="${getClasses}">
173
- ${when((x) => x.icon || x.connotation, renderIcon(context))}
173
+ ${renderIcon(context)}
174
174
  <div class="alert-text">
175
175
  ${when((x) => x.headline, html`<header class="headline">${(x) => x.headline}</header>`)}
176
176
  ${when((x) => x.text, html`<div class="main-text">${(x) => x.text}</div>`)}
@@ -1,7 +1,6 @@
1
1
  'use strict';
2
2
 
3
3
  const index = require('./index.cjs');
4
- const definition = require('./definition59.cjs');
5
4
  const radio = require('./radio.cjs');
6
5
  const when = require('./when.cjs');
7
6
  const classNames = require('./class-names.cjs');
@@ -38,7 +37,7 @@ const radioDefinition = radio.Radio.compose({
38
37
  template: RadioTemplate,
39
38
  styles
40
39
  });
41
- const radioRegistries = [radioDefinition(), ...definition.focusRegistries];
40
+ const radioRegistries = [radioDefinition()];
42
41
  const registerRadio = index.registerFactory(radioRegistries);
43
42
 
44
43
  exports.radioDefinition = radioDefinition;
@@ -1,5 +1,4 @@
1
1
  import { h as html, r as registerFactory } from './index.js';
2
- import { f as focusRegistries } from './definition59.js';
3
2
  import { R as Radio } from './radio.js';
4
3
  import { w as when } from './when.js';
5
4
  import { c as classNames } from './class-names.js';
@@ -36,7 +35,7 @@ const radioDefinition = Radio.compose({
36
35
  template: RadioTemplate,
37
36
  styles
38
37
  });
39
- const radioRegistries = [radioDefinition(), ...focusRegistries];
38
+ const radioRegistries = [radioDefinition()];
40
39
  const registerRadio = registerFactory(radioRegistries);
41
40
 
42
41
  export { radioRegistries as a, registerRadio as b, radioDefinition as r };
@@ -1,9 +1,8 @@
1
1
  'use strict';
2
2
 
3
3
  const index = require('./index.cjs');
4
- const definition$2 = require('./definition59.cjs');
5
- const definition = require('./definition61.cjs');
6
- const definition$3 = require('./definition26.cjs');
4
+ const definition = require('./definition60.cjs');
5
+ const definition$2 = require('./definition26.cjs');
7
6
  const definition$1 = require('./definition35.cjs');
8
7
  const affix = require('./affix.cjs');
9
8
  const index$1 = require('./index2.cjs');
@@ -516,7 +515,7 @@ index.__decorate([
516
515
  applyMixins.applyMixins(DelegatesARIASelect, listbox.DelegatesARIAListbox);
517
516
  applyMixins.applyMixins(Select$1, startEnd.StartEnd, DelegatesARIASelect);
518
517
 
519
- const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.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-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_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-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_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-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_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-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.connotation-success{--_connotation-color-primary: var(--vvd-select-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-select-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-select-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-select-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-select-success-fierce, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-select-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-select-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-select-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-select-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-select-alert-fierce, var(--vvd-color-alert-700))}.control:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.icon{display:flex;flex-shrink:0}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}\n";
518
+ const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.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-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_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-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_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-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_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-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control: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)}.control:where(.error):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control: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)}.control:where(.success):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.icon{display:flex;flex-shrink:0}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}\n";
520
519
 
521
520
  var __defProp = Object.defineProperty;
522
521
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -596,8 +595,8 @@ const getStateClasses = ({
596
595
  [`appearance-${appearance}`, Boolean(appearance)],
597
596
  [`shape-${shape}`, Boolean(shape)],
598
597
  ["has-meta", Boolean(metaSlottedContent?.length)],
599
- ["error connotation-alert", Boolean(errorValidationMessage)],
600
- ["success connotation-success", !!successText],
598
+ ["error", Boolean(errorValidationMessage)],
599
+ ["success", !!successText],
601
600
  ["has-meta", Boolean(metaSlottedContent?.length)]
602
601
  );
603
602
  function renderLabel() {
@@ -686,7 +685,7 @@ const selectDefinition = Select.compose({
686
685
  template: SelectTemplate,
687
686
  styles
688
687
  });
689
- const selectRegistries = [selectDefinition(), ...definition$2.focusRegistries, ...definition.popupRegistries, ...definition$3.iconRegistries, ...definition$1.listboxOptionRegistries];
688
+ const selectRegistries = [selectDefinition(), ...definition.popupRegistries, ...definition$2.iconRegistries, ...definition$1.listboxOptionRegistries];
690
689
  const registerSelect = index.registerFactory(selectRegistries);
691
690
 
692
691
  exports.registerSelect = registerSelect;
@@ -1,6 +1,5 @@
1
1
  import { D as DOM, O as Observable, _ as __decorate, a as attr, v as volatile, o as observable, h as html, r as registerFactory } from './index.js';
2
- import { f as focusRegistries } from './definition59.js';
3
- import { P as Popup, p as popupRegistries } from './definition61.js';
2
+ import { P as Popup, p as popupRegistries } from './definition60.js';
4
3
  import { a as iconRegistries } from './definition26.js';
5
4
  import { L as ListboxOption, a as listboxOptionRegistries } from './definition35.js';
6
5
  import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
@@ -514,7 +513,7 @@ __decorate([
514
513
  applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
515
514
  applyMixins(Select$1, StartEnd, DelegatesARIASelect);
516
515
 
517
- const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.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-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_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-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_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-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_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-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.connotation-success{--_connotation-color-primary: var(--vvd-select-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-select-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-select-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-select-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-select-success-fierce, var(--vvd-color-success-700))}.control.connotation-alert{--_connotation-color-primary: var(--vvd-select-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-select-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-select-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-select-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-select-alert-fierce, var(--vvd-color-alert-700))}.control:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.icon{display:flex;flex-shrink:0}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}\n";
516
+ const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:var(--_select-control-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.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-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_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-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_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-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_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-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control: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)}.control:where(.error):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control: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)}.control:where(.success):where(:not(:disabled,.disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.icon{display:flex;flex-shrink:0}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}\n";
518
517
 
519
518
  var __defProp = Object.defineProperty;
520
519
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -594,8 +593,8 @@ const getStateClasses = ({
594
593
  [`appearance-${appearance}`, Boolean(appearance)],
595
594
  [`shape-${shape}`, Boolean(shape)],
596
595
  ["has-meta", Boolean(metaSlottedContent?.length)],
597
- ["error connotation-alert", Boolean(errorValidationMessage)],
598
- ["success connotation-success", !!successText],
596
+ ["error", Boolean(errorValidationMessage)],
597
+ ["success", !!successText],
599
598
  ["has-meta", Boolean(metaSlottedContent?.length)]
600
599
  );
601
600
  function renderLabel() {
@@ -684,7 +683,7 @@ const selectDefinition = Select.compose({
684
683
  template: SelectTemplate,
685
684
  styles
686
685
  });
687
- const selectRegistries = [selectDefinition(), ...focusRegistries, ...popupRegistries, ...iconRegistries, ...listboxOptionRegistries];
686
+ const selectRegistries = [selectDefinition(), ...popupRegistries, ...iconRegistries, ...listboxOptionRegistries];
688
687
  const registerSelect = registerFactory(selectRegistries);
689
688
 
690
689
  export { selectRegistries as a, registerSelect as r, selectDefinition as s };
@@ -2,15 +2,13 @@
2
2
 
3
3
  const index = require('./index.cjs');
4
4
  const definition = require('./definition15.cjs');
5
- const definition$1 = require('./definition59.cjs');
6
- const definition$2 = require('./definition40.cjs');
7
- const focus = require('./focus2.cjs');
5
+ const definition$1 = require('./definition40.cjs');
8
6
  const enums = require('./enums.cjs');
9
7
  const radio$1 = require('./radio.cjs');
10
8
  const classNames = require('./class-names.cjs');
11
9
  const when = require('./when.cjs');
12
10
 
13
- const styles = "@supports selector(:focus-visible){.base:focus-visible{outline:none}}:host{display:flex}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base.connotation-cta{--_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_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-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.focus-indicator{--focus-stroke-gap-color: transparent;--focus-inset: -1px;pointer-events:none}.base:not(:focus-visible)>.focus-indicator{display:none}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
11
+ const styles = ":host{display:flex}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base.connotation-cta{--_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_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-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
14
12
 
15
13
  var __defProp = Object.defineProperty;
16
14
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -91,7 +89,7 @@ function checkbox(context) {
91
89
  <${checkboxTag}
92
90
  aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
93
91
  @change="${(x) => handleControlChange(x)}"
94
- class="control checkbox"
92
+ class="control checkbox"
95
93
  connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
96
94
  :checked="${(x) => x.checked}"
97
95
  inert="${(x) => x.clickableBox || x.clickable ? true : null}"
@@ -104,7 +102,7 @@ function radio(context) {
104
102
  <${radioTag}
105
103
  aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
106
104
  @change="${(x) => handleControlChange(x)}"
107
- class="control radio"
105
+ class="control radio"
108
106
  connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
109
107
  :checked="${(x) => x.checked}"
110
108
  inert="${(x) => x.clickableBox || x.clickable ? true : null}"
@@ -112,7 +110,6 @@ function radio(context) {
112
110
  `;
113
111
  }
114
112
  const SelectableBoxTemplate = (context) => {
115
- const focusTemplate = focus.focusTemplateFactory(context);
116
113
  return index.html`<template role="presentation">
117
114
  <div
118
115
  class="${getClasses}"
@@ -123,7 +120,6 @@ const SelectableBoxTemplate = (context) => {
123
120
  @keydown="${(x, c) => x._handleKeydown(c.event)}"
124
121
  @click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
125
122
  >
126
- ${(x) => x.clickableBox || x.clickable ? focusTemplate : ""}
127
123
  ${checkbox(context)}
128
124
  ${radio(context)}
129
125
  <slot></slot>
@@ -142,8 +138,7 @@ const selectableBoxDefinition = SelectableBox.compose({
142
138
  const selectableBoxRegistries = [
143
139
  selectableBoxDefinition(),
144
140
  ...definition.checkboxRegistries,
145
- ...definition$1.focusRegistries,
146
- ...definition$2.radioRegistries
141
+ ...definition$1.radioRegistries
147
142
  ];
148
143
  const registerSelectableBox = index.registerFactory(selectableBoxRegistries);
149
144
 
@@ -1,14 +1,12 @@
1
1
  import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
2
2
  import { C as Checkbox, a as checkboxRegistries } from './definition15.js';
3
- import { f as focusRegistries } from './definition59.js';
4
3
  import { a as radioRegistries } from './definition40.js';
5
- import { f as focusTemplateFactory } from './focus2.js';
6
4
  import { C as Connotation } from './enums.js';
7
5
  import { R as Radio } from './radio.js';
8
6
  import { c as classNames } from './class-names.js';
9
7
  import { w as when } from './when.js';
10
8
 
11
- const styles = "@supports selector(:focus-visible){.base:focus-visible{outline:none}}:host{display:flex}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base.connotation-cta{--_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_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-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.focus-indicator{--focus-stroke-gap-color: transparent;--focus-inset: -1px;pointer-events:none}.base:not(:focus-visible)>.focus-indicator{display:none}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
9
+ const styles = ":host{display:flex}.base{position:relative;padding:var(--selectable-box-spacing, 16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);border-radius:8px;inline-size:100%;padding-block-start:calc(var(--selectable-box-spacing, 16px) + 36px);text-align:start}.base.connotation-cta{--_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));--_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100))}.base{--_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-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.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))}.base.tight{overflow:hidden;min-height:calc(var(--selectable-box-spacing, 16px) * 2 + 22px);padding:0}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing, 16px);inset-inline-end:var(--selectable-box-spacing, 16px)}\n";
12
10
 
13
11
  var __defProp = Object.defineProperty;
14
12
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -89,7 +87,7 @@ function checkbox(context) {
89
87
  <${checkboxTag}
90
88
  aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
91
89
  @change="${(x) => handleControlChange(x)}"
92
- class="control checkbox"
90
+ class="control checkbox"
93
91
  connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
94
92
  :checked="${(x) => x.checked}"
95
93
  inert="${(x) => x.clickableBox || x.clickable ? true : null}"
@@ -102,7 +100,7 @@ function radio(context) {
102
100
  <${radioTag}
103
101
  aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
104
102
  @change="${(x) => handleControlChange(x)}"
105
- class="control radio"
103
+ class="control radio"
106
104
  connotation="${(x) => x.connotation === "cta" ? Connotation.CTA : Connotation.Accent}"
107
105
  :checked="${(x) => x.checked}"
108
106
  inert="${(x) => x.clickableBox || x.clickable ? true : null}"
@@ -110,7 +108,6 @@ function radio(context) {
110
108
  `;
111
109
  }
112
110
  const SelectableBoxTemplate = (context) => {
113
- const focusTemplate = focusTemplateFactory(context);
114
111
  return html`<template role="presentation">
115
112
  <div
116
113
  class="${getClasses}"
@@ -121,7 +118,6 @@ const SelectableBoxTemplate = (context) => {
121
118
  @keydown="${(x, c) => x._handleKeydown(c.event)}"
122
119
  @click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
123
120
  >
124
- ${(x) => x.clickableBox || x.clickable ? focusTemplate : ""}
125
121
  ${checkbox(context)}
126
122
  ${radio(context)}
127
123
  <slot></slot>
@@ -140,7 +136,6 @@ const selectableBoxDefinition = SelectableBox.compose({
140
136
  const selectableBoxRegistries = [
141
137
  selectableBoxDefinition(),
142
138
  ...checkboxRegistries,
143
- ...focusRegistries,
144
139
  ...radioRegistries
145
140
  ];
146
141
  const registerSelectableBox = registerFactory(selectableBoxRegistries);
@@ -1,7 +1,6 @@
1
1
  'use strict';
2
2
 
3
3
  const index = require('./index.cjs');
4
- const definition = require('./definition59.cjs');
5
4
  const direction = require('./direction.cjs');
6
5
  const numbers = require('./numbers.cjs');
7
6
  const formAssociated = require('./form-associated.cjs');
@@ -598,7 +597,7 @@ const sliderDefinition = Slider.compose({
598
597
  delegatesFocus: true
599
598
  }
600
599
  });
601
- const sliderRegistries = [sliderDefinition(), ...definition.focusRegistries];
600
+ const sliderRegistries = [sliderDefinition()];
602
601
  const registerSlider = index.registerFactory(sliderRegistries);
603
602
 
604
603
  exports.Slider = Slider;
@@ -1,5 +1,4 @@
1
1
  import { F as FoundationElement, _ as __decorate, a as attr, o as observable, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
2
- import { f as focusRegistries } from './definition59.js';
3
2
  import { D as Direction, g as getDirection } from './direction.js';
4
3
  import { l as limit$1 } from './numbers.js';
5
4
  import { F as FormAssociated } from './form-associated.js';
@@ -596,7 +595,7 @@ const sliderDefinition = Slider.compose({
596
595
  delegatesFocus: true
597
596
  }
598
597
  });
599
- const sliderRegistries = [sliderDefinition(), ...focusRegistries];
598
+ const sliderRegistries = [sliderDefinition()];
600
599
  const registerSlider = registerFactory(sliderRegistries);
601
600
 
602
601
  export { Slider as S, sliderRegistries as a, registerSlider as r, sliderDefinition as s };
@@ -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
  const affix = require('./affix.cjs');
7
6
  require('./index2.cjs');
8
7
  const localized = require('./localized.cjs');
@@ -144,7 +143,7 @@ const splitButtonDefinition = SplitButton.compose({
144
143
  delegatesFocus: true
145
144
  }
146
145
  });
147
- const splitButtonRegistries = [splitButtonDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
146
+ const splitButtonRegistries = [splitButtonDefinition(), ...definition.iconRegistries];
148
147
  const registerSplitButton = index.registerFactory(splitButtonRegistries);
149
148
 
150
149
  exports.registerSplitButton = registerSplitButton;
@@ -1,6 +1,5 @@
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 './index2.js';
6
5
  import { L as Localized } from './localized.js';
@@ -142,7 +141,7 @@ const splitButtonDefinition = SplitButton.compose({
142
141
  delegatesFocus: true
143
142
  }
144
143
  });
145
- const splitButtonRegistries = [splitButtonDefinition(), ...iconRegistries, ...focusRegistries];
144
+ const splitButtonRegistries = [splitButtonDefinition(), ...iconRegistries];
146
145
  const registerSplitButton = registerFactory(splitButtonRegistries);
147
146
 
148
147
  export { splitButtonRegistries as a, registerSplitButton as r, splitButtonDefinition as s };
@@ -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
  const formAssociated = require('./form-associated.cjs');
7
6
  const keyCodes = require('./key-codes.cjs');
8
7
  const when = require('./when.cjs');
@@ -158,7 +157,7 @@ const switchDefinition = Switch.compose({
158
157
  delegatesFocus: true
159
158
  }
160
159
  });
161
- const switchRegistries = [switchDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
160
+ const switchRegistries = [switchDefinition(), ...definition.iconRegistries];
162
161
  const registerSwitch = index.registerFactory(switchRegistries);
163
162
 
164
163
  exports.registerSwitch = registerSwitch;
@@ -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';
@@ -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 };
@@ -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;