@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
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: 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}.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: 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}.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,7 +1,7 @@
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');
package/shared/definition55.js CHANGED
@@ -1,5 +1,5 @@
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';
2
+ import { P as Popup, p as popupRegistries } from './definition60.js';
3
3
  import { a as anchored } from './anchored.js';
4
4
  import { w as when } from './when.js';
5
5
  import { c as classNames } from './class-names.js';
package/shared/definition56.cjs CHANGED
@@ -1,7 +1,7 @@
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
 
package/shared/definition56.js CHANGED
@@ -1,5 +1,5 @@
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';
2
+ import { P as Popup, p as popupRegistries } from './definition60.js';
3
3
  import { a as anchored } from './anchored.js';
4
4
  import { c as classNames } from './class-names.js';
5
5
 
package/shared/definition57.cjs CHANGED
@@ -2,19 +2,17 @@
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 treeItem = require('./tree-item.cjs');
8
7
  const applyMixins = require('./apply-mixins.cjs');
9
8
  const icon = require('./icon.cjs');
10
- const focus = require('./focus2.cjs');
11
9
  const slotted = require('./slotted.cjs');
12
10
  const children = require('./children.cjs');
13
11
  const when = require('./when.cjs');
14
12
  const classNames = require('./class-names.cjs');
15
13
  const ref = require('./ref.cjs');
16
14
 
17
- const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-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(--_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;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control: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}.control: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}.control:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100))}@supports selector(:focus-visible){.control:focus-visible{outline:none}}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block:4px;padding-inline-start:48px}:host(:not(:focus-visible)) .focus-indicator{display:none}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
15
+ const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-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(--_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;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control: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}.control: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}.control:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}: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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
18
16
 
19
17
  var __defProp = Object.defineProperty;
20
18
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -55,7 +53,6 @@ const expandCollapseButton = (context) => {
55
53
  };
56
54
  const TreeItemTemplate = (context) => {
57
55
  const affixIconTemplate = affix.affixIconTemplateFactory(context);
58
- const focusTemplate = focus.focusTemplateFactory(context);
59
56
  return index.html`
60
57
  <template
61
58
  role="treeitem"
@@ -69,7 +66,6 @@ const TreeItemTemplate = (context) => {
69
66
  ${children.children({ property: "childItems", filter: slotted.elements(context.tagFor(TreeItem)) })}
70
67
  >
71
68
  <div class="${getClasses}">
72
- ${() => focusTemplate}
73
69
  ${when.when((x) => x.childItems && x.childItems.length > 0, expandCollapseButton(context))}
74
70
  ${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
75
71
  ${(x) => x.text}
@@ -91,7 +87,7 @@ const treeItemDefinition = TreeItem.compose(
91
87
  styles
92
88
  }
93
89
  );
94
- const treeItemRegistries = [treeItemDefinition(), ...definition.iconRegistries, ...definition$1.focusRegistries];
90
+ const treeItemRegistries = [treeItemDefinition(), ...definition.iconRegistries];
95
91
  const registerTreeItem = index.registerFactory(treeItemRegistries);
96
92
 
97
93
  exports.registerTreeItem = registerTreeItem;
package/shared/definition57.js CHANGED
@@ -1,18 +1,16 @@
1
1
  import { 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 { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
5
4
  import { T as TreeItem$1 } from './tree-item.js';
6
5
  import { a as applyMixins } from './apply-mixins.js';
7
6
  import { I as Icon } from './icon.js';
8
- import { f as focusTemplateFactory } from './focus2.js';
9
7
  import { e as elements, s as slotted } from './slotted.js';
10
8
  import { c as children } from './children.js';
11
9
  import { w as when } from './when.js';
12
10
  import { c as classNames } from './class-names.js';
13
11
  import { r as ref } from './ref.js';
14
12
 
15
- const styles = "@supports selector(:focus-visible){:host(:focus-visible){outline:none}}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-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(--_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;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control: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}.control: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}.control:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100))}@supports selector(:focus-visible){.control:focus-visible{outline:none}}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block:4px;padding-inline-start:48px}:host(:not(:focus-visible)) .focus-indicator{display:none}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
13
+ const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-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(--_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;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control: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}.control: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}.control:where(.selected,[aria-current]):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected,[aria-current]):where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}: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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
16
14
 
17
15
  var __defProp = Object.defineProperty;
18
16
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -53,7 +51,6 @@ const expandCollapseButton = (context) => {
53
51
  };
54
52
  const TreeItemTemplate = (context) => {
55
53
  const affixIconTemplate = affixIconTemplateFactory(context);
56
- const focusTemplate = focusTemplateFactory(context);
57
54
  return html`
58
55
  <template
59
56
  role="treeitem"
@@ -67,7 +64,6 @@ const TreeItemTemplate = (context) => {
67
64
  ${children({ property: "childItems", filter: elements(context.tagFor(TreeItem)) })}
68
65
  >
69
66
  <div class="${getClasses}">
70
- ${() => focusTemplate}
71
67
  ${when((x) => x.childItems && x.childItems.length > 0, expandCollapseButton(context))}
72
68
  ${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
73
69
  ${(x) => x.text}
@@ -89,7 +85,7 @@ const treeItemDefinition = TreeItem.compose(
89
85
  styles
90
86
  }
91
87
  );
92
- const treeItemRegistries = [treeItemDefinition(), ...iconRegistries, ...focusRegistries];
88
+ const treeItemRegistries = [treeItemDefinition(), ...iconRegistries];
93
89
  const registerTreeItem = registerFactory(treeItemRegistries);
94
90
 
95
91
  export { treeItemRegistries as a, registerTreeItem as r, treeItemDefinition as t };
package/shared/definition59.cjs CHANGED
@@ -1,20 +1,51 @@
1
1
  'use strict';
2
2
 
3
3
  const index = require('./index.cjs');
4
- const focus = require('./focus.cjs');
4
+ const classNames = require('./class-names.cjs');
5
5
 
6
- const styles = ":host{display:contents;border-radius:inherit}.control{position:absolute;z-index:1;box-sizing:border-box;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);inset:var(--focus-inset, 0);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:-2px}\n";
6
+ var __defProp = Object.defineProperty;
7
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
8
+ var __decorateClass = (decorators, target, key, kind) => {
9
+ var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
10
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
11
+ if (decorator = decorators[i])
12
+ result = (kind ? decorator(target, key, result) : decorator(result)) || result;
13
+ if (kind && result)
14
+ __defProp(target, key, result);
15
+ return result;
16
+ };
17
+ class Elevation extends index.FoundationElement {
18
+ }
19
+ __decorateClass([
20
+ index.attr
21
+ ], Elevation.prototype, "dp", 2);
22
+ __decorateClass([
23
+ index.attr({ attribute: "no-shadow", mode: "boolean" })
24
+ ], Elevation.prototype, "noShadow", 2);
7
25
 
8
- const focusTemplate = () => index.html`
9
- <span class="control"></span>`;
26
+ const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp)}.control.dp-4{--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp)}.control.dp-8{--_elevation-fill: var(--vvd-color-surface-8dp);--_elevation-shadow: var(--vvd-shadow-surface-8dp)}.control.dp-12{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control.dp-16{--_elevation-fill: var(--vvd-color-surface-16dp);--_elevation-shadow: var(--vvd-shadow-surface-16dp)}.control.dp-24{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--vvd-color-surface-2dp);--_elevation-shadow: var(--vvd-shadow-surface-2dp)}.control ::slotted(*){position:relative;isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;background:var(--_elevation-fill);block-size:100%;border-radius:inherit;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control.no-shadow ::slotted(*):before{filter:none}\n";
10
27
 
11
- const focusDefinition = focus.Focus.compose({
12
- baseName: "focus",
13
- template: focusTemplate,
28
+ const getClasses = ({
29
+ dp,
30
+ noShadow
31
+ }) => classNames.classNames(
32
+ "control",
33
+ [`dp-${dp}`, Boolean(dp)],
34
+ ["no-shadow", Boolean(noShadow)]
35
+ );
36
+ const elevationTemplate = () => index.html`
37
+ <div class="${getClasses}" part="base">
38
+ <slot></slot>
39
+ </div>`;
40
+
41
+ const elevationDefinition = Elevation.compose({
42
+ baseName: "elevation",
43
+ template: elevationTemplate,
14
44
  styles
15
45
  });
16
- const focusRegistries = [focusDefinition()];
17
- const registerFocus = index.registerFactory(focusRegistries);
46
+ const elevationRegistries = [elevationDefinition()];
47
+ const registerElevation = index.registerFactory(elevationRegistries);
18
48
 
19
- exports.focusRegistries = focusRegistries;
20
- exports.registerFocus = registerFocus;
49
+ exports.Elevation = Elevation;
50
+ exports.elevationRegistries = elevationRegistries;
51
+ exports.registerElevation = registerElevation;