@vonage/vivid 4.14.0 → 4.14.2

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 (218) hide show
  1. package/custom-elements.json +152 -197
  2. package/lib/divider/divider.d.ts +1 -1
  3. package/lib/divider/divider.template.d.ts +1 -1
  4. package/lib/elevation/elevation.d.ts +1 -0
  5. package/lib/radio/radio.form-associated.d.ts +2 -0
  6. package/lib/tabs/tabs.d.ts +0 -5
  7. package/lib/text-anchor/text-anchor.d.ts +2 -2
  8. package/lib/tree-item/tree-item.d.ts +2 -2
  9. package/lib/tree-view/tree-view.d.ts +2 -2
  10. package/package.json +1 -1
  11. package/shared/affix.cjs +8 -8
  12. package/shared/affix.js +2 -2
  13. package/shared/anchor.cjs +10 -10
  14. package/shared/anchor.js +1 -1
  15. package/shared/anchored.cjs +6 -6
  16. package/shared/anchored.js +1 -1
  17. package/shared/apply-mixins.cjs +3 -3
  18. package/shared/apply-mixins.js +1 -1
  19. package/shared/apply-mixins2.cjs +3 -3
  20. package/shared/apply-mixins2.js +1 -1
  21. package/shared/applyMixinsWithObservables.cjs +3 -3
  22. package/shared/applyMixinsWithObservables.js +1 -1
  23. package/shared/aria-global.cjs +20 -20
  24. package/shared/aria-global.js +1 -1
  25. package/shared/base-progress.cjs +7 -8
  26. package/shared/base-progress.js +2 -3
  27. package/shared/breadcrumb-item.cjs +2 -3
  28. package/shared/breadcrumb-item.js +1 -2
  29. package/shared/button.cjs +10 -11
  30. package/shared/button.js +1 -2
  31. package/shared/calendar-event.cjs +7 -8
  32. package/shared/calendar-event.js +1 -2
  33. package/shared/children.cjs +2 -2
  34. package/shared/children.js +1 -1
  35. package/shared/definition.cjs +14 -15
  36. package/shared/definition.js +2 -3
  37. package/shared/definition10.cjs +5 -6
  38. package/shared/definition10.js +1 -2
  39. package/shared/definition11.cjs +29 -29
  40. package/shared/definition11.js +2 -2
  41. package/shared/definition12.cjs +6 -6
  42. package/shared/definition12.js +1 -1
  43. package/shared/definition13.cjs +13 -14
  44. package/shared/definition13.js +1 -2
  45. package/shared/definition14.cjs +23 -24
  46. package/shared/definition14.js +1 -2
  47. package/shared/definition15.cjs +15 -16
  48. package/shared/definition15.js +1 -2
  49. package/shared/definition16.cjs +21 -21
  50. package/shared/definition16.js +5 -5
  51. package/shared/definition17.cjs +62 -61
  52. package/shared/definition17.js +10 -9
  53. package/shared/definition18.cjs +4 -4
  54. package/shared/definition18.js +1 -1
  55. package/shared/definition19.cjs +12 -12
  56. package/shared/definition19.js +1 -1
  57. package/shared/definition2.cjs +6 -7
  58. package/shared/definition2.js +1 -2
  59. package/shared/definition20.cjs +20 -21
  60. package/shared/definition20.js +1 -2
  61. package/shared/definition21.cjs +27 -28
  62. package/shared/definition21.js +3 -4
  63. package/shared/definition22.cjs +7 -7
  64. package/shared/definition22.js +3 -3
  65. package/shared/definition23.cjs +10 -11
  66. package/shared/definition23.js +1 -2
  67. package/shared/definition24.cjs +8 -8
  68. package/shared/definition24.js +3 -3
  69. package/shared/definition25.cjs +13 -14
  70. package/shared/definition25.js +1 -2
  71. package/shared/definition26.cjs +5 -6
  72. package/shared/definition26.js +1 -2
  73. package/shared/definition27.cjs +12 -13
  74. package/shared/definition27.js +2 -3
  75. package/shared/definition28.cjs +9 -10
  76. package/shared/definition28.js +2 -3
  77. package/shared/definition29.cjs +44 -45
  78. package/shared/definition29.js +3 -4
  79. package/shared/definition3.cjs +8 -9
  80. package/shared/definition3.js +1 -2
  81. package/shared/definition30.cjs +9 -10
  82. package/shared/definition30.js +2 -3
  83. package/shared/definition31.cjs +5 -5
  84. package/shared/definition31.js +2 -2
  85. package/shared/definition32.cjs +3 -4
  86. package/shared/definition32.js +1 -2
  87. package/shared/definition33.cjs +6 -7
  88. package/shared/definition33.js +2 -3
  89. package/shared/definition34.cjs +112 -45
  90. package/shared/definition34.js +73 -6
  91. package/shared/definition35.cjs +9 -209
  92. package/shared/definition35.js +4 -202
  93. package/shared/definition36.cjs +15 -16
  94. package/shared/definition36.js +1 -2
  95. package/shared/definition37.cjs +9 -9
  96. package/shared/definition37.js +1 -1
  97. package/shared/definition38.cjs +10 -10
  98. package/shared/definition38.js +1 -1
  99. package/shared/definition39.cjs +12 -13
  100. package/shared/definition39.js +1 -2
  101. package/shared/definition4.cjs +19 -20
  102. package/shared/definition4.js +2 -3
  103. package/shared/definition40.cjs +61 -13
  104. package/shared/definition40.js +52 -4
  105. package/shared/definition41.cjs +29 -30
  106. package/shared/definition41.js +1 -2
  107. package/shared/definition42.cjs +52 -53
  108. package/shared/definition42.js +3 -4
  109. package/shared/definition43.cjs +40 -40
  110. package/shared/definition43.js +6 -6
  111. package/shared/definition44.cjs +14 -15
  112. package/shared/definition44.js +1 -2
  113. package/shared/definition45.cjs +9 -10
  114. package/shared/definition45.js +1 -2
  115. package/shared/definition46.cjs +26 -27
  116. package/shared/definition46.js +1 -2
  117. package/shared/definition47.cjs +17 -18
  118. package/shared/definition47.js +2 -3
  119. package/shared/definition48.cjs +9 -10
  120. package/shared/definition48.js +1 -2
  121. package/shared/definition49.cjs +3 -4
  122. package/shared/definition49.js +1 -2
  123. package/shared/definition5.cjs +30 -31
  124. package/shared/definition5.js +1 -2
  125. package/shared/definition50.cjs +12 -13
  126. package/shared/definition50.js +2 -3
  127. package/shared/definition51.cjs +109 -72
  128. package/shared/definition51.js +78 -41
  129. package/shared/definition52.cjs +4 -5
  130. package/shared/definition52.js +1 -2
  131. package/shared/definition53.cjs +15 -16
  132. package/shared/definition53.js +2 -3
  133. package/shared/definition54.cjs +20 -21
  134. package/shared/definition54.js +1 -2
  135. package/shared/definition55.cjs +5 -5
  136. package/shared/definition55.js +1 -1
  137. package/shared/definition56.cjs +18 -19
  138. package/shared/definition56.js +1 -2
  139. package/shared/definition57.cjs +10 -11
  140. package/shared/definition57.js +1 -2
  141. package/shared/definition58.cjs +7 -8
  142. package/shared/definition58.js +1 -2
  143. package/shared/definition59.cjs +16 -17
  144. package/shared/definition59.js +3 -4
  145. package/shared/definition6.cjs +11 -12
  146. package/shared/definition6.js +1 -2
  147. package/shared/definition60.cjs +9 -10
  148. package/shared/definition60.js +2 -3
  149. package/shared/definition61.cjs +27 -30
  150. package/shared/definition61.js +17 -20
  151. package/shared/definition62.cjs +12 -9
  152. package/shared/definition62.js +8 -5
  153. package/shared/definition63.cjs +13 -14
  154. package/shared/definition63.js +1 -2
  155. package/shared/definition7.cjs +9 -10
  156. package/shared/definition7.js +2 -3
  157. package/shared/definition8.cjs +14 -15
  158. package/shared/definition8.js +2 -3
  159. package/shared/definition9.cjs +7 -7
  160. package/shared/definition9.js +1 -1
  161. package/shared/form-associated.cjs +14 -14
  162. package/shared/form-associated.js +1 -1
  163. package/shared/form-associated2.cjs +10 -10
  164. package/shared/form-associated2.js +1 -1
  165. package/shared/form-elements.cjs +13 -13
  166. package/shared/form-elements.js +1 -1
  167. package/shared/foundation/progress/base-progress.d.ts +2 -2
  168. package/shared/foundation-element.cjs +11 -11
  169. package/shared/foundation-element.js +1 -1
  170. package/shared/key-codes2.cjs +0 -56
  171. package/shared/key-codes2.js +1 -53
  172. package/shared/listbox.cjs +15 -16
  173. package/shared/listbox.js +2 -3
  174. package/shared/localized.cjs +2 -2
  175. package/shared/localized.js +1 -1
  176. package/shared/option.cjs +205 -0
  177. package/shared/option.js +202 -0
  178. package/shared/presentationDate.cjs +42 -43
  179. package/shared/presentationDate.js +1 -2
  180. package/shared/ref.cjs +2 -2
  181. package/shared/ref.js +1 -1
  182. package/shared/repeat.cjs +15 -15
  183. package/shared/repeat.js +1 -1
  184. package/shared/slider.template.cjs +4 -4
  185. package/shared/slider.template.js +1 -1
  186. package/shared/slotted.cjs +4 -4
  187. package/shared/slotted.js +1 -1
  188. package/shared/start-end.cjs +52 -0
  189. package/shared/start-end.js +50 -0
  190. package/shared/text-anchor.cjs +5 -6
  191. package/shared/text-anchor.js +3 -4
  192. package/shared/text-anchor.template.cjs +2 -2
  193. package/shared/text-anchor.template.js +1 -1
  194. package/shared/text-field2.cjs +23 -24
  195. package/shared/text-field2.js +2 -3
  196. package/shared/vivid-element.cjs +2610 -2
  197. package/shared/vivid-element.js +2591 -2
  198. package/styles/core/all.css +40 -1
  199. package/styles/core/theme.css +40 -1
  200. package/styles/core/typography.css +1 -1
  201. package/styles/tokens/theme-dark.css +25 -4
  202. package/styles/tokens/theme-light.css +25 -4
  203. package/styles/tokens/vivid-2-compat.css +1 -1
  204. package/text-anchor/index.cjs +3 -3
  205. package/text-anchor/index.js +1 -1
  206. package/lib/listbox/definition.d.ts +0 -2
  207. package/lib/listbox/listbox.d.ts +0 -14
  208. package/lib/listbox/listbox.template.d.ts +0 -2
  209. package/listbox/index.cjs +0 -54
  210. package/listbox/index.js +0 -52
  211. package/shared/aria-global2.cjs +0 -75
  212. package/shared/aria-global2.js +0 -73
  213. package/shared/defineVividComponent.cjs +0 -2612
  214. package/shared/defineVividComponent.js +0 -2592
  215. package/shared/listbox2.cjs +0 -1268
  216. package/shared/listbox2.js +0 -1265
  217. package/shared/strings2.cjs +0 -37
  218. package/shared/strings2.js +0 -33
@@ -2,17 +2,15 @@
2
2
 
3
3
  const definition = require('./definition11.cjs');
4
4
  const definition$1 = require('./definition22.cjs');
5
- const defineVividComponent = require('./defineVividComponent.cjs');
5
+ const vividElement = require('./vivid-element.cjs');
6
6
  const definition$2 = require('./definition27.cjs');
7
7
  const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
8
8
  const formAssociated$1 = require('./form-associated.cjs');
9
- const vividElement = require('./vivid-element.cjs');
10
9
  const foundationElement = require('./foundation-element.cjs');
11
10
  const applyMixins = require('./apply-mixins2.cjs');
12
11
  const formAssociated = require('./form-associated2.cjs');
13
- const ariaGlobal = require('./aria-global2.cjs');
14
- const keyCodes = require('./key-codes2.cjs');
15
- const keyCodes$1 = require('./key-codes.cjs');
12
+ const startEnd = require('./start-end.cjs');
13
+ const keyCodes = require('./key-codes.cjs');
16
14
  const formElements = require('./form-elements.cjs');
17
15
  const affix = require('./affix.cjs');
18
16
  const localized = require('./localized.cjs');
@@ -21,6 +19,75 @@ const when = require('./when.cjs');
21
19
  const ref = require('./ref.cjs');
22
20
  const classNames = require('./class-names.cjs');
23
21
 
22
+ /**
23
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
24
+ * The following global states and properties are supported by all roles and by all base markup elements.
25
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
26
+ *
27
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
28
+ *
29
+ * @public
30
+ */
31
+ class ARIAGlobalStatesAndProperties {
32
+ }
33
+ foundationElement.__decorate([
34
+ vividElement.attr({ attribute: "aria-atomic" })
35
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
36
+ foundationElement.__decorate([
37
+ vividElement.attr({ attribute: "aria-busy" })
38
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
39
+ foundationElement.__decorate([
40
+ vividElement.attr({ attribute: "aria-controls" })
41
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
42
+ foundationElement.__decorate([
43
+ vividElement.attr({ attribute: "aria-current" })
44
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
45
+ foundationElement.__decorate([
46
+ vividElement.attr({ attribute: "aria-describedby" })
47
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
48
+ foundationElement.__decorate([
49
+ vividElement.attr({ attribute: "aria-details" })
50
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
51
+ foundationElement.__decorate([
52
+ vividElement.attr({ attribute: "aria-disabled" })
53
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
54
+ foundationElement.__decorate([
55
+ vividElement.attr({ attribute: "aria-errormessage" })
56
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
57
+ foundationElement.__decorate([
58
+ vividElement.attr({ attribute: "aria-flowto" })
59
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
60
+ foundationElement.__decorate([
61
+ vividElement.attr({ attribute: "aria-haspopup" })
62
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
63
+ foundationElement.__decorate([
64
+ vividElement.attr({ attribute: "aria-hidden" })
65
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
66
+ foundationElement.__decorate([
67
+ vividElement.attr({ attribute: "aria-invalid" })
68
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
69
+ foundationElement.__decorate([
70
+ vividElement.attr({ attribute: "aria-keyshortcuts" })
71
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
72
+ foundationElement.__decorate([
73
+ vividElement.attr({ attribute: "aria-label" })
74
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
75
+ foundationElement.__decorate([
76
+ vividElement.attr({ attribute: "aria-labelledby" })
77
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
78
+ foundationElement.__decorate([
79
+ vividElement.attr({ attribute: "aria-live" })
80
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
81
+ foundationElement.__decorate([
82
+ vividElement.attr({ attribute: "aria-owns" })
83
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
84
+ foundationElement.__decorate([
85
+ vividElement.attr({ attribute: "aria-relevant" })
86
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
87
+ foundationElement.__decorate([
88
+ vividElement.attr({ attribute: "aria-roledescription" })
89
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
90
+
24
91
  class _TextField extends foundationElement.FoundationElement {
25
92
  }
26
93
  /**
@@ -152,7 +219,7 @@ class TextField extends FormAssociatedTextField {
152
219
  this.proxy.setAttribute("type", this.type);
153
220
  this.validate();
154
221
  if (this.autofocus) {
155
- defineVividComponent.DOM.queueUpdate(() => {
222
+ vividElement.DOM.queueUpdate(() => {
156
223
  this.focus();
157
224
  });
158
225
  }
@@ -197,37 +264,37 @@ class TextField extends FormAssociatedTextField {
197
264
  }
198
265
  }
199
266
  foundationElement.__decorate([
200
- defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
267
+ vividElement.attr({ attribute: "readonly", mode: "boolean" })
201
268
  ], TextField.prototype, "readOnly", void 0);
202
269
  foundationElement.__decorate([
203
- defineVividComponent.attr({ mode: "boolean" })
270
+ vividElement.attr({ mode: "boolean" })
204
271
  ], TextField.prototype, "autofocus", void 0);
205
272
  foundationElement.__decorate([
206
- defineVividComponent.attr
273
+ vividElement.attr
207
274
  ], TextField.prototype, "placeholder", void 0);
208
275
  foundationElement.__decorate([
209
- defineVividComponent.attr
276
+ vividElement.attr
210
277
  ], TextField.prototype, "type", void 0);
211
278
  foundationElement.__decorate([
212
- defineVividComponent.attr
279
+ vividElement.attr
213
280
  ], TextField.prototype, "list", void 0);
214
281
  foundationElement.__decorate([
215
- defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
282
+ vividElement.attr({ converter: vividElement.nullableNumberConverter })
216
283
  ], TextField.prototype, "maxlength", void 0);
217
284
  foundationElement.__decorate([
218
- defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
285
+ vividElement.attr({ converter: vividElement.nullableNumberConverter })
219
286
  ], TextField.prototype, "minlength", void 0);
220
287
  foundationElement.__decorate([
221
- defineVividComponent.attr
288
+ vividElement.attr
222
289
  ], TextField.prototype, "pattern", void 0);
223
290
  foundationElement.__decorate([
224
- defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
291
+ vividElement.attr({ converter: vividElement.nullableNumberConverter })
225
292
  ], TextField.prototype, "size", void 0);
226
293
  foundationElement.__decorate([
227
- defineVividComponent.attr({ mode: "boolean" })
294
+ vividElement.attr({ mode: "boolean" })
228
295
  ], TextField.prototype, "spellcheck", void 0);
229
296
  foundationElement.__decorate([
230
- defineVividComponent.observable
297
+ vividElement.observable
231
298
  ], TextField.prototype, "defaultSlottedNodes", void 0);
232
299
  /**
233
300
  * Includes ARIA states and properties relating to the ARIA textbox role
@@ -236,8 +303,8 @@ foundationElement.__decorate([
236
303
  */
237
304
  class DelegatesARIATextbox {
238
305
  }
239
- applyMixins.applyMixins(DelegatesARIATextbox, ariaGlobal.ARIAGlobalStatesAndProperties);
240
- applyMixins.applyMixins(TextField, keyCodes.StartEnd, DelegatesARIATextbox);
306
+ applyMixins.applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
307
+ applyMixins.applyMixins(TextField, startEnd.StartEnd, DelegatesARIATextbox);
241
308
 
242
309
  const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base{--_connotation-color-primary: var(--vvd-text-field-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-field-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-field-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-field-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-field-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-field-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-field-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-field-accent-soft, var(--vvd-color-neutral-100))}.base{--_text-field-gutter-start: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-gutter-end: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_text-field-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 8px;--_text-field-pill-border-radius: 24px;display:inline-grid;width:100%;gap:4px;grid-template-columns:min-content 1fr max-content}.base.size-condensed{--_text-field-gutter-start: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-gutter-end: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-icon-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_text-field-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_text-field-border-radius: 4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text)}.label:not(slot),.label::slotted(label){box-sizing:initial!important;padding:initial!important;margin:initial!important;color:var(--vvd-color-canvas-text)!important;contain:inline-size!important;font:var(--vvd-typography-base);grid-column:1/4;grid-row:1}.char-count+.label:not(slot),.char-count+.label::slotted(label){grid-column:1/3}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:3/4}.fieldset{position:relative;display:flex;align-items:center;background-color:var(--_appearance-color-fill);font:var(--vvd-typography-base);grid-column:1/4;padding-block:0;transition:color .2s,background-color .2s}.fieldset:after{position:absolute;display:block;border-radius:inherit;block-size:100%;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inline-size:100%;pointer-events:none;transition:box-shadow .2s}.fieldset:focus-visible{outline:none}.base>.fieldset{block-size:var(--_text-field-block-size)}.base:not(.shape-pill) .fieldset{border-radius:var(--_text-field-border-radius)}.base.shape-pill .fieldset{border-radius:var(--_text-field-pill-border-radius)}.wrapper{border-radius:inherit;block-size:100%;inline-size:100%}.control{border-radius:inherit;text-align:start}.control:not(slot),.control::slotted(input){width:100%!important;box-sizing:border-box!important;border:0 none!important;border-radius:inherit!important;margin:initial!important;appearance:none!important;background-color:transparent!important;block-size:100%!important;color:inherit!important;font:inherit;outline:transparent;padding-block:0!important;padding-inline:var(--_text-field-gutter-start) var(--_text-field-gutter-end)!important;text-align:inherit}.control:not(slot):disabled,.control::slotted(input:disabled){cursor:not-allowed!important;opacity:1!important;-webkit-text-fill-color:var(--_appearance-color-text)!important}.control:not(slot)::placeholder{opacity:1!important;-webkit-text-fill-color:var(--_low-ink-color)!important}.control::slotted(input:-webkit-autofill),.control:not(slot):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--_appearance-color-fill) inset;-webkit-text-fill-color:var(--_appearance-color-text)!important}.has-icon .control:not(slot),.has-icon .control::slotted(input){padding-inline-start:calc(var(--_text-field-icon-size) + var(--_text-field-gutter-start) * 2)!important}.icon{position:absolute;z-index:1;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:calc(100% + var(--_text-field-gutter-start));line-height:1;transform:translateY(-50%)}.leading-items-wrapper{position:relative}.base.no-leading .leading-items-wrapper{display:none}.action-items-wrapper{margin-inline-end:4px}.base:not(.action-items) .action-items-wrapper{display:none}@supports selector(:has(*)){.fieldset:has(.wrapper .control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow: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 not selector(:has(*)){.wrapper:focus-within:after{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}:host([internal-part]) .fieldset{background-color:transparent;font:var(--vvd-typography-heading-4);line-height:1.1}:host([internal-part]) .fieldset:not(:focus-within):after{block-size:1px;inset-block-end:0}@supports selector(:has(*)){:host([internal-part]) .fieldset:has(.action-items-wrapper:focus-within):after{block-size:1px;inset-block-end:0}}:host([internal-part]) .control{text-align:center}slot[name=_mirrored-helper-text]{display:none}.base{--_text-field-gutter-end: 70px}.control::-webkit-outer-spin-button,.control::-webkit-inner-spin-button{appearance:none}.control-buttons{position:absolute;z-index:1;right:3px;display:flex}.readonly .control-buttons,.disabled .control-buttons{pointer-events:none}.control-buttons .divider{margin-block:8px}.control-buttons>*{flex-shrink:0}";
243
310
 
@@ -397,7 +464,7 @@ let NumberField = class extends FormAssociatedNumberField {
397
464
  this.validate();
398
465
  this._presentationValue = __privateMethod(this, _NumberField_instances, valueToPresentationValue_fn).call(this, this.value);
399
466
  if (this.autofocus) {
400
- defineVividComponent.DOM.queueUpdate(() => {
467
+ vividElement.DOM.queueUpdate(() => {
401
468
  this.focus();
402
469
  });
403
470
  }
@@ -443,10 +510,10 @@ let NumberField = class extends FormAssociatedNumberField {
443
510
  handleKeyDown(e) {
444
511
  const key = e.key;
445
512
  switch (key) {
446
- case keyCodes$1.keyArrowUp:
513
+ case keyCodes.keyArrowUp:
447
514
  this.stepUp();
448
515
  return false;
449
- case keyCodes$1.keyArrowDown:
516
+ case keyCodes.keyArrowDown:
450
517
  this.stepDown();
451
518
  return false;
452
519
  }
@@ -468,58 +535,58 @@ presentationValueToValue_fn = function(presentationValue) {
468
535
  return validNumber.test(candidate) ? candidate : "";
469
536
  };
470
537
  __decorateClass([
471
- defineVividComponent.attr({ attribute: "readonly", mode: "boolean" })
538
+ vividElement.attr({ attribute: "readonly", mode: "boolean" })
472
539
  ], NumberField.prototype, "readOnly", 2);
473
540
  __decorateClass([
474
- defineVividComponent.attr({ mode: "boolean" })
541
+ vividElement.attr({ mode: "boolean" })
475
542
  ], NumberField.prototype, "autofocus", 2);
476
543
  __decorateClass([
477
- defineVividComponent.attr
544
+ vividElement.attr
478
545
  ], NumberField.prototype, "placeholder", 2);
479
546
  __decorateClass([
480
- defineVividComponent.attr
547
+ vividElement.attr
481
548
  ], NumberField.prototype, "list", 2);
482
549
  __decorateClass([
483
- defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
550
+ vividElement.attr({ converter: vividElement.nullableNumberConverter })
484
551
  ], NumberField.prototype, "maxlength", 2);
485
552
  __decorateClass([
486
- defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
553
+ vividElement.attr({ converter: vividElement.nullableNumberConverter })
487
554
  ], NumberField.prototype, "minlength", 2);
488
555
  __decorateClass([
489
- defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
556
+ vividElement.attr({ converter: vividElement.nullableNumberConverter })
490
557
  ], NumberField.prototype, "size", 2);
491
558
  __decorateClass([
492
- defineVividComponent.attr()
559
+ vividElement.attr()
493
560
  ], NumberField.prototype, "scale", 2);
494
561
  __decorateClass([
495
- defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
562
+ vividElement.attr({ converter: vividElement.nullableNumberConverter })
496
563
  ], NumberField.prototype, "step", 2);
497
564
  __decorateClass([
498
- defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
565
+ vividElement.attr({ converter: vividElement.nullableNumberConverter })
499
566
  ], NumberField.prototype, "max", 2);
500
567
  __decorateClass([
501
- defineVividComponent.attr({ converter: defineVividComponent.nullableNumberConverter })
568
+ vividElement.attr({ converter: vividElement.nullableNumberConverter })
502
569
  ], NumberField.prototype, "min", 2);
503
570
  __decorateClass([
504
- defineVividComponent.observable
571
+ vividElement.observable
505
572
  ], NumberField.prototype, "defaultSlottedNodes", 2);
506
573
  __decorateClass([
507
- defineVividComponent.observable
574
+ vividElement.observable
508
575
  ], NumberField.prototype, "_presentationValue", 2);
509
576
  __decorateClass([
510
- defineVividComponent.attr({ attribute: "increment-button-aria-label" })
577
+ vividElement.attr({ attribute: "increment-button-aria-label" })
511
578
  ], NumberField.prototype, "incrementButtonAriaLabel", 2);
512
579
  __decorateClass([
513
- defineVividComponent.attr({ attribute: "decrement-button-aria-label" })
580
+ vividElement.attr({ attribute: "decrement-button-aria-label" })
514
581
  ], NumberField.prototype, "decrementButtonAriaLabel", 2);
515
582
  __decorateClass([
516
- defineVividComponent.attr
583
+ vividElement.attr
517
584
  ], NumberField.prototype, "appearance", 2);
518
585
  __decorateClass([
519
- defineVividComponent.attr
586
+ vividElement.attr
520
587
  ], NumberField.prototype, "shape", 2);
521
588
  __decorateClass([
522
- defineVividComponent.attr
589
+ vividElement.attr
523
590
  ], NumberField.prototype, "autoComplete", 2);
524
591
  NumberField = __decorateClass([
525
592
  formElements.errorText,
@@ -559,7 +626,7 @@ const getStateClasses = ({
559
626
  [`size-${scale}`, Boolean(scale)]
560
627
  );
561
628
  function renderLabel() {
562
- return defineVividComponent.html` <label for="control" class="label">
629
+ return vividElement.html` <label for="control" class="label">
563
630
  ${(x) => x.label}
564
631
  </label>`;
565
632
  }
@@ -572,7 +639,7 @@ function getTabIndex(numberField) {
572
639
  function numberControlButtons(context) {
573
640
  const buttonTag = context.tagFor(definition.Button);
574
641
  const dividerTag = context.tagFor(definition$1.Divider);
575
- return defineVividComponent.html`
642
+ return vividElement.html`
576
643
  <div class="control-buttons"
577
644
  ?inert="${(x) => x.disabled || x.readOnly}">
578
645
  <${buttonTag} id="subtract" icon="minus-line"
@@ -596,7 +663,7 @@ function numberControlButtons(context) {
596
663
  `;
597
664
  }
598
665
  const NumberFieldTemplate = (context) => {
599
- return defineVividComponent.html`
666
+ return vividElement.html`
600
667
  <div class="base ${getStateClasses}">
601
668
  ${when.when((x) => x.label, renderLabel())}
602
669
  <div class="fieldset">
@@ -645,7 +712,7 @@ const NumberFieldTemplate = (context) => {
645
712
  `;
646
713
  };
647
714
 
648
- const numberFieldDefinition = defineVividComponent.defineVividComponent(
715
+ const numberFieldDefinition = vividElement.defineVividComponent(
649
716
  "number-field",
650
717
  NumberField,
651
718
  NumberFieldTemplate,
@@ -657,7 +724,7 @@ const numberFieldDefinition = defineVividComponent.defineVividComponent(
657
724
  }
658
725
  }
659
726
  );
660
- const registerNumberField = defineVividComponent.createRegisterFunction(
727
+ const registerNumberField = vividElement.createRegisterFunction(
661
728
  numberFieldDefinition
662
729
  );
663
730
 
@@ -1,24 +1,91 @@
1
1
  import { B as Button, b as buttonDefinition } from './definition11.js';
2
2
  import { D as Divider, d as dividerDefinition } from './definition22.js';
3
- import { a as attr, n as nullableNumberConverter, o as observable, D as DOM, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
3
+ import { a as attr, n as nullableNumberConverter, o as observable, D as DOM, V as VividElement, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
4
4
  import { i as iconDefinition } from './definition27.js';
5
5
  import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
6
6
  import { F as FormAssociated$1 } from './form-associated.js';
7
- import { V as VividElement } from './vivid-element.js';
8
- import { F as FoundationElement, _ as __decorate } from './foundation-element.js';
7
+ import { _ as __decorate, F as FoundationElement } from './foundation-element.js';
9
8
  import { a as applyMixins } from './apply-mixins2.js';
10
9
  import { F as FormAssociated } from './form-associated2.js';
11
- import { A as ARIAGlobalStatesAndProperties } from './aria-global2.js';
12
- import { S as StartEnd } from './key-codes2.js';
10
+ import { S as StartEnd } from './start-end.js';
13
11
  import { f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
14
12
  import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './form-elements.js';
15
- import { A as AffixIcon } from './affix.js';
13
+ import { b as AffixIcon } from './affix.js';
16
14
  import { L as Localized } from './localized.js';
17
15
  import { S as Shape } from './enums.js';
18
16
  import { w as when } from './when.js';
19
17
  import { r as ref } from './ref.js';
20
18
  import { c as classNames } from './class-names.js';
21
19
 
20
+ /**
21
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
22
+ * The following global states and properties are supported by all roles and by all base markup elements.
23
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
24
+ *
25
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
26
+ *
27
+ * @public
28
+ */
29
+ class ARIAGlobalStatesAndProperties {
30
+ }
31
+ __decorate([
32
+ attr({ attribute: "aria-atomic" })
33
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
34
+ __decorate([
35
+ attr({ attribute: "aria-busy" })
36
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
37
+ __decorate([
38
+ attr({ attribute: "aria-controls" })
39
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
40
+ __decorate([
41
+ attr({ attribute: "aria-current" })
42
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
43
+ __decorate([
44
+ attr({ attribute: "aria-describedby" })
45
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
46
+ __decorate([
47
+ attr({ attribute: "aria-details" })
48
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
49
+ __decorate([
50
+ attr({ attribute: "aria-disabled" })
51
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
52
+ __decorate([
53
+ attr({ attribute: "aria-errormessage" })
54
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
55
+ __decorate([
56
+ attr({ attribute: "aria-flowto" })
57
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
58
+ __decorate([
59
+ attr({ attribute: "aria-haspopup" })
60
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
61
+ __decorate([
62
+ attr({ attribute: "aria-hidden" })
63
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
64
+ __decorate([
65
+ attr({ attribute: "aria-invalid" })
66
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
67
+ __decorate([
68
+ attr({ attribute: "aria-keyshortcuts" })
69
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
70
+ __decorate([
71
+ attr({ attribute: "aria-label" })
72
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
73
+ __decorate([
74
+ attr({ attribute: "aria-labelledby" })
75
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
76
+ __decorate([
77
+ attr({ attribute: "aria-live" })
78
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
79
+ __decorate([
80
+ attr({ attribute: "aria-owns" })
81
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
82
+ __decorate([
83
+ attr({ attribute: "aria-relevant" })
84
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
85
+ __decorate([
86
+ attr({ attribute: "aria-roledescription" })
87
+ ], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
88
+
22
89
  class _TextField extends FoundationElement {
23
90
  }
24
91
  /**