@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
@@ -4,7 +4,7 @@ const definition$1 = require('./definition27.cjs');
4
4
  const definition = require('./definition63.cjs');
5
5
  const definition$2 = require('./definition35.cjs');
6
6
  const textField = require('./text-field.cjs');
7
- const defineVividComponent = require('./defineVividComponent.cjs');
7
+ const vividElement = require('./vivid-element.cjs');
8
8
  const listbox = require('./listbox.cjs');
9
9
  const formAssociated = require('./form-associated.cjs');
10
10
  const affix = require('./affix.cjs');
@@ -12,7 +12,6 @@ const strings = require('./strings.cjs');
12
12
  const numbers = require('./numbers.cjs');
13
13
  const applyMixins = require('./apply-mixins2.cjs');
14
14
  const formElements = require('./form-elements.cjs');
15
- const listbox$1 = require('./listbox2.cjs');
16
15
  const index = require('./index.cjs');
17
16
  const ref = require('./ref.cjs');
18
17
  const slotted = require('./slotted.cjs');
@@ -114,7 +113,7 @@ let Combobox = class extends FormAssociatedCombobox {
114
113
  this.ariaControls = this.listboxId;
115
114
  this.ariaExpanded = "true";
116
115
  this.focusAndScrollOptionIntoView();
117
- defineVividComponent.DOM.queueUpdate(() => this.focus());
116
+ vividElement.DOM.queueUpdate(() => this.focus());
118
117
  return;
119
118
  }
120
119
  this.ariaControls = "";
@@ -128,12 +127,12 @@ let Combobox = class extends FormAssociatedCombobox {
128
127
  * Overrides `Listbox.options`.
129
128
  */
130
129
  get options() {
131
- defineVividComponent.Observable.track(this, "options");
130
+ vividElement.Observable.track(this, "options");
132
131
  return this.filteredOptions.length ? this.filteredOptions : this._options;
133
132
  }
134
133
  set options(value) {
135
134
  this._options = value;
136
- defineVividComponent.Observable.notify(this, "options");
135
+ vividElement.Observable.notify(this, "options");
137
136
  }
138
137
  /**
139
138
  * Updates the placeholder on the proxy element.
@@ -150,7 +149,7 @@ let Combobox = class extends FormAssociatedCombobox {
150
149
  * @public
151
150
  */
152
151
  get value() {
153
- defineVividComponent.Observable.track(this, "value");
152
+ vividElement.Observable.track(this, "value");
154
153
  return this._value;
155
154
  }
156
155
  set value(next) {
@@ -167,7 +166,7 @@ let Combobox = class extends FormAssociatedCombobox {
167
166
  if (prev !== next) {
168
167
  this._value = next;
169
168
  super.valueChanged(prev, next);
170
- defineVividComponent.Observable.notify(this, "value");
169
+ vividElement.Observable.notify(this, "value");
171
170
  }
172
171
  }
173
172
  /**
@@ -504,26 +503,26 @@ let Combobox = class extends FormAssociatedCombobox {
504
503
  }
505
504
  };
506
505
  __decorateClass([
507
- defineVividComponent.attr({ attribute: "autocomplete", mode: "fromView" })
506
+ vividElement.attr({ attribute: "autocomplete", mode: "fromView" })
508
507
  ], Combobox.prototype, "autocomplete", 2);
509
508
  __decorateClass([
510
- defineVividComponent.attr
509
+ vividElement.attr
511
510
  ], Combobox.prototype, "appearance", 2);
512
511
  __decorateClass([
513
- defineVividComponent.attr
512
+ vividElement.attr
514
513
  ], Combobox.prototype, "placement", 2);
515
514
  __decorateClass([
516
- defineVividComponent.attr({ mode: "boolean", attribute: "fixed-dropdown" })
515
+ vividElement.attr({ mode: "boolean", attribute: "fixed-dropdown" })
517
516
  ], Combobox.prototype, "fixedDropdown", 2);
518
517
  __decorateClass([
519
- defineVividComponent.observable
518
+ vividElement.observable
520
519
  ], Combobox.prototype, "maxHeight", 2);
521
520
  __decorateClass([
522
- defineVividComponent.attr({ attribute: "open", mode: "boolean" })
521
+ vividElement.attr({ attribute: "open", mode: "boolean" })
523
522
  ], Combobox.prototype, "open", 2);
524
523
  // @ts-expect-error Type is incorrectly non-optional
525
524
  __decorateClass([
526
- defineVividComponent.attr
525
+ vividElement.attr
527
526
  ], Combobox.prototype, "placeholder", 2);
528
527
  Combobox = __decorateClass([
529
528
  formElements.formElements
@@ -531,7 +530,7 @@ Combobox = __decorateClass([
531
530
  applyMixins.applyMixins(Combobox, affix.AffixIcon);
532
531
 
533
532
  function renderLabel() {
534
- return defineVividComponent.html` <label for="control" class="label">
533
+ return vividElement.html` <label for="control" class="label">
535
534
  ${(x) => x.label}
536
535
  </label>`;
537
536
  }
@@ -554,14 +553,15 @@ function setFixedDropdownVarWidth(x) {
554
553
  }
555
554
  function renderInput(context) {
556
555
  const affixIconTemplate = affix.affixIconTemplateFactory(context);
557
- return defineVividComponent.html` <div class="${getStateClasses}" ${ref.ref("_anchor")}>
556
+ return vividElement.html` <div class="${getStateClasses}" ${ref.ref("_anchor")}>
558
557
  ${when.when((x) => x.label, renderLabel())}
559
558
  <div class="fieldset">
560
559
  <input
561
560
  id="control"
561
+ autocomplete="off"
562
562
  class="control"
563
563
  aria-activedescendant="${(x) => x.open ? x.ariaActiveDescendant : null}"
564
- aria-autocomplete="${(x) => x.ariaAutoComplete}"
564
+ aria-autocomplete="${(x) => x.autocomplete}"
565
565
  aria-controls="${(x) => x.listboxId}"
566
566
  aria-disabled="${(x) => x.ariaDisabled}"
567
567
  aria-expanded="${(x) => x.open}"
@@ -580,7 +580,7 @@ function renderInput(context) {
580
580
  }
581
581
  const comboboxTemplate = (context) => {
582
582
  const popupTag = context.tagFor(definition.Popup);
583
- return defineVividComponent.html`
583
+ return vividElement.html`
584
584
  <template
585
585
  aria-disabled="${(x) => x.ariaDisabled}"
586
586
  autocomplete="${(x) => x.autocomplete}"
@@ -605,7 +605,7 @@ const comboboxTemplate = (context) => {
605
605
  ?disabled="${(x) => x.disabled}"
606
606
  ${ref.ref("listbox")}>
607
607
  <slot ${slotted.slotted({
608
- filter: listbox$1.Listbox.slottedOptionFilter,
608
+ filter: listbox.Listbox.slottedOptionFilter,
609
609
  flatten: true,
610
610
  property: "slottedOptions"
611
611
  })}>
@@ -616,7 +616,7 @@ const comboboxTemplate = (context) => {
616
616
  `;
617
617
  };
618
618
 
619
- const comboboxDefinition = defineVividComponent.defineVividComponent(
619
+ const comboboxDefinition = vividElement.defineVividComponent(
620
620
  "combobox",
621
621
  Combobox,
622
622
  comboboxTemplate,
@@ -628,7 +628,7 @@ const comboboxDefinition = defineVividComponent.defineVividComponent(
628
628
  }
629
629
  }
630
630
  );
631
- const registerCombobox = defineVividComponent.createRegisterFunction(comboboxDefinition);
631
+ const registerCombobox = vividElement.createRegisterFunction(comboboxDefinition);
632
632
 
633
633
  exports.comboboxDefinition = comboboxDefinition;
634
634
  exports.registerCombobox = registerCombobox;
@@ -2,15 +2,14 @@ import { i as iconDefinition } from './definition27.js';
2
2
  import { P as Popup, p as popupDefinition } from './definition63.js';
3
3
  import { l as listboxOptionDefinition } from './definition35.js';
4
4
  import { s as styles$1 } from './text-field.js';
5
- import { D as DOM, O as Observable, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
5
+ import { D as DOM, O as Observable, a as attr, o as observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
6
6
  import { L as Listbox } from './listbox.js';
7
7
  import { F as FormAssociated } from './form-associated.js';
8
- import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
8
+ import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
9
9
  import { u as uniqueId } from './strings.js';
10
10
  import { l as limit } from './numbers.js';
11
11
  import { a as applyMixins } from './apply-mixins2.js';
12
12
  import { f as formElements } from './form-elements.js';
13
- import { a as Listbox$1 } from './listbox2.js';
14
13
  import { h as handleEscapeKeyAndStopPropogation } from './index.js';
15
14
  import { r as ref } from './ref.js';
16
15
  import { s as slotted } from './slotted.js';
@@ -557,9 +556,10 @@ function renderInput(context) {
557
556
  <div class="fieldset">
558
557
  <input
559
558
  id="control"
559
+ autocomplete="off"
560
560
  class="control"
561
561
  aria-activedescendant="${(x) => x.open ? x.ariaActiveDescendant : null}"
562
- aria-autocomplete="${(x) => x.ariaAutoComplete}"
562
+ aria-autocomplete="${(x) => x.autocomplete}"
563
563
  aria-controls="${(x) => x.listboxId}"
564
564
  aria-disabled="${(x) => x.ariaDisabled}"
565
565
  aria-expanded="${(x) => x.open}"
@@ -603,7 +603,7 @@ const comboboxTemplate = (context) => {
603
603
  ?disabled="${(x) => x.disabled}"
604
604
  ${ref("listbox")}>
605
605
  <slot ${slotted({
606
- filter: Listbox$1.slottedOptionFilter,
606
+ filter: Listbox.slottedOptionFilter,
607
607
  flatten: true,
608
608
  property: "slottedOptions"
609
609
  })}>
@@ -1,7 +1,6 @@
1
1
  'use strict';
2
2
 
3
3
  const definition = require('./definition27.cjs');
4
- const defineVividComponent = require('./defineVividComponent.cjs');
5
4
  const vividElement = require('./vivid-element.cjs');
6
5
  const keyCodes = require('./key-codes.cjs');
7
6
  const repeat = require('./repeat.cjs');
@@ -124,7 +123,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
124
123
  this.queueRowIndexUpdate = () => {
125
124
  if (!this.rowindexUpdateQueued) {
126
125
  this.rowindexUpdateQueued = true;
127
- defineVividComponent.DOM.queueUpdate(this.updateRowIndexes);
126
+ vividElement.DOM.queueUpdate(this.updateRowIndexes);
128
127
  }
129
128
  };
130
129
  this.updateRowIndexes = () => {
@@ -275,15 +274,16 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
275
274
  * @internal
276
275
  */
277
276
  noTabbingChanged() {
278
- if (this.noTabbing) {
279
- this.setAttribute("tabIndex", "-1");
280
- } else {
281
- this.setAttribute(
282
- "tabIndex",
283
- this.contains(document.activeElement) ? "-1" : "0"
284
- );
277
+ if (this.$fastController.isConnected) {
278
+ this.#setTabIndex();
285
279
  }
286
280
  }
281
+ #setTabIndex() {
282
+ this.setAttribute(
283
+ "tabIndex",
284
+ this.noTabbing || this.contains(document.activeElement) ? "-1" : "0"
285
+ );
286
+ }
287
287
  /**
288
288
  * @internal
289
289
  */
@@ -376,8 +376,9 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
376
376
  this.addEventListener(eventFocusOut, this.handleFocusOut);
377
377
  this.observer = new MutationObserver(this.onChildListChange);
378
378
  this.observer.observe(this, { childList: true });
379
- defineVividComponent.DOM.queueUpdate(this.queueRowIndexUpdate);
380
- defineVividComponent.Observable.getNotifier(this).subscribe(
379
+ vividElement.DOM.queueUpdate(this.queueRowIndexUpdate);
380
+ this.#setTabIndex();
381
+ vividElement.Observable.getNotifier(this).subscribe(
381
382
  this.#changeHandler,
382
383
  "columnDefinitions"
383
384
  );
@@ -397,7 +398,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
397
398
  this.observer.disconnect();
398
399
  this.rowsPlaceholder = null;
399
400
  this.generatedHeader = null;
400
- defineVividComponent.Observable.getNotifier(this).unsubscribe(
401
+ vividElement.Observable.getNotifier(this).unsubscribe(
401
402
  this.#changeHandler,
402
403
  "columnDefinitions"
403
404
  );
@@ -515,7 +516,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
515
516
  }
516
517
  if (this.pendingFocusUpdate === false) {
517
518
  this.pendingFocusUpdate = true;
518
- defineVividComponent.DOM.queueUpdate(() => this.updateFocus());
519
+ vividElement.DOM.queueUpdate(() => this.updateFocus());
519
520
  }
520
521
  }
521
522
  updateFocus() {
@@ -568,7 +569,7 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
568
569
  }
569
570
  selectionModeChanged(oldValue) {
570
571
  if (oldValue === void 0) {
571
- defineVividComponent.DOM.queueUpdate(this.#initSelections);
572
+ vividElement.DOM.queueUpdate(this.#initSelections);
572
573
  return;
573
574
  }
574
575
  this.#resetSelection();
@@ -591,50 +592,50 @@ const _DataGrid = class _DataGrid extends vividElement.VividElement {
591
592
  }
592
593
  };
593
594
  __decorateClass$2([
594
- defineVividComponent.attr({ attribute: "no-tabbing", mode: "boolean" })
595
+ vividElement.attr({ attribute: "no-tabbing", mode: "boolean" })
595
596
  ], _DataGrid.prototype, "noTabbing");
596
597
  __decorateClass$2([
597
- defineVividComponent.attr({ attribute: "generate-header" })
598
+ vividElement.attr({ attribute: "generate-header" })
598
599
  ], _DataGrid.prototype, "generateHeader");
599
600
  // @ts-expect-error Type is incorrectly non-optional
600
601
  __decorateClass$2([
601
- defineVividComponent.attr({ attribute: "grid-template-columns" })
602
+ vividElement.attr({ attribute: "grid-template-columns" })
602
603
  ], _DataGrid.prototype, "gridTemplateColumns");
603
604
  __decorateClass$2([
604
- defineVividComponent.observable
605
+ vividElement.observable
605
606
  ], _DataGrid.prototype, "rowsData");
606
607
  __decorateClass$2([
607
- defineVividComponent.observable
608
+ vividElement.observable
608
609
  ], _DataGrid.prototype, "columnDefinitions");
609
610
  __decorateClass$2([
610
- defineVividComponent.observable
611
+ vividElement.observable
611
612
  ], _DataGrid.prototype, "rowItemTemplate");
612
613
  __decorateClass$2([
613
- defineVividComponent.observable
614
+ vividElement.observable
614
615
  ], _DataGrid.prototype, "cellItemTemplate");
615
616
  __decorateClass$2([
616
- defineVividComponent.observable
617
+ vividElement.observable
617
618
  ], _DataGrid.prototype, "headerCellItemTemplate");
618
619
  __decorateClass$2([
619
- defineVividComponent.observable
620
+ vividElement.observable
620
621
  ], _DataGrid.prototype, "focusRowIndex");
621
622
  __decorateClass$2([
622
- defineVividComponent.observable
623
+ vividElement.observable
623
624
  ], _DataGrid.prototype, "focusColumnIndex");
624
625
  __decorateClass$2([
625
- defineVividComponent.observable
626
+ vividElement.observable
626
627
  ], _DataGrid.prototype, "defaultRowItemTemplate");
627
628
  __decorateClass$2([
628
- defineVividComponent.observable
629
+ vividElement.observable
629
630
  ], _DataGrid.prototype, "rowElementTag");
630
631
  __decorateClass$2([
631
- defineVividComponent.observable
632
+ vividElement.observable
632
633
  ], _DataGrid.prototype, "rowElements");
633
634
  __decorateClass$2([
634
- defineVividComponent.observable
635
+ vividElement.observable
635
636
  ], _DataGrid.prototype, "slottedRowElements");
636
637
  __decorateClass$2([
637
- defineVividComponent.attr({ attribute: "selection-mode" })
638
+ vividElement.attr({ attribute: "selection-mode" })
638
639
  ], _DataGrid.prototype, "selectionMode");
639
640
  let DataGrid = _DataGrid;
640
641
 
@@ -774,45 +775,45 @@ class DataGridRow extends vividElement.VividElement {
774
775
  }
775
776
  // @ts-expect-error Type is incorrectly non-optional
776
777
  __decorateClass$1([
777
- defineVividComponent.attr({ attribute: "grid-template-columns" })
778
+ vividElement.attr({ attribute: "grid-template-columns" })
778
779
  ], DataGridRow.prototype, "gridTemplateColumns");
779
780
  __decorateClass$1([
780
- defineVividComponent.attr({ attribute: "row-type" })
781
+ vividElement.attr({ attribute: "row-type" })
781
782
  ], DataGridRow.prototype, "rowType");
782
783
  __decorateClass$1([
783
- defineVividComponent.observable
784
+ vividElement.observable
784
785
  ], DataGridRow.prototype, "rowData");
785
786
  __decorateClass$1([
786
- defineVividComponent.observable
787
+ vividElement.observable
787
788
  ], DataGridRow.prototype, "columnDefinitions");
788
789
  __decorateClass$1([
789
- defineVividComponent.observable
790
+ vividElement.observable
790
791
  ], DataGridRow.prototype, "cellItemTemplate");
791
792
  __decorateClass$1([
792
- defineVividComponent.observable
793
+ vividElement.observable
793
794
  ], DataGridRow.prototype, "headerCellItemTemplate");
794
795
  __decorateClass$1([
795
- defineVividComponent.observable
796
+ vividElement.observable
796
797
  ], DataGridRow.prototype, "rowIndex");
797
798
  __decorateClass$1([
798
- defineVividComponent.observable
799
+ vividElement.observable
799
800
  ], DataGridRow.prototype, "activeCellItemTemplate");
800
801
  __decorateClass$1([
801
- defineVividComponent.observable
802
+ vividElement.observable
802
803
  ], DataGridRow.prototype, "defaultCellItemTemplate");
803
804
  __decorateClass$1([
804
- defineVividComponent.observable
805
+ vividElement.observable
805
806
  ], DataGridRow.prototype, "defaultHeaderCellItemTemplate");
806
807
  __decorateClass$1([
807
- defineVividComponent.observable
808
+ vividElement.observable
808
809
  ], DataGridRow.prototype, "cellElements");
809
810
  __decorateClass$1([
810
- defineVividComponent.attr({ attribute: "aria-selected" })
811
+ vividElement.attr({ attribute: "aria-selected" })
811
812
  ], DataGridRow.prototype, "ariaSelected");
812
813
 
813
814
  function createRowItemTemplate(context) {
814
815
  const rowTag = context.tagFor(DataGridRow);
815
- return defineVividComponent.html`
816
+ return vividElement.html`
816
817
  <${rowTag}
817
818
  :rowData="${(x) => x}"
818
819
  :cellItemTemplate="${(_, c) => c.parent.cellItemTemplate}"
@@ -840,7 +841,7 @@ function handleColumnSort(_, { event }) {
840
841
  const DataGridTemplate = (context) => {
841
842
  const rowItemTemplate = createRowItemTemplate(context);
842
843
  const rowTag = context.tagFor(DataGridRow);
843
- return defineVividComponent.html`
844
+ return vividElement.html`
844
845
  <template
845
846
  aria-multiselectable="${getMultiSelectAriaState}"
846
847
  role="grid"
@@ -870,12 +871,12 @@ var __decorateClass = (decorators, target, key, kind) => {
870
871
  if (result) __defProp(target, key, result);
871
872
  return result;
872
873
  };
873
- const defaultCellContentsTemplate = defineVividComponent.html`
874
+ const defaultCellContentsTemplate = vividElement.html`
874
875
  <template>
875
876
  ${(x) => x.rowData === null || x.columnDefinition === null || x.columnDefinition.columnDataKey === null ? null : x.rowData[x.columnDefinition.columnDataKey]}
876
877
  </template>
877
878
  `;
878
- const defaultHeaderCellContentsTemplate = defineVividComponent.html`
879
+ const defaultHeaderCellContentsTemplate = vividElement.html`
879
880
  <template>
880
881
  ${(x) => x.columnDefinition.title === void 0 ? x.columnDefinition.columnDataKey : x.columnDefinition.title}
881
882
  </template>
@@ -1092,27 +1093,27 @@ class DataGridCell extends vividElement.VividElement {
1092
1093
  }
1093
1094
  }
1094
1095
  __decorateClass([
1095
- defineVividComponent.attr({ attribute: "cell-type" })
1096
+ vividElement.attr({ attribute: "cell-type" })
1096
1097
  ], DataGridCell.prototype, "cellType");
1097
1098
  __decorateClass([
1098
- defineVividComponent.attr({ attribute: "grid-column" })
1099
+ vividElement.attr({ attribute: "grid-column" })
1099
1100
  ], DataGridCell.prototype, "gridColumn");
1100
1101
  __decorateClass([
1101
- defineVividComponent.observable
1102
+ vividElement.observable
1102
1103
  ], DataGridCell.prototype, "rowData");
1103
1104
  __decorateClass([
1104
- defineVividComponent.observable
1105
+ vividElement.observable
1105
1106
  ], DataGridCell.prototype, "columnDefinition");
1106
1107
  __decorateClass([
1107
- defineVividComponent.attr({ attribute: "aria-selected", mode: "fromView" })
1108
+ vividElement.attr({ attribute: "aria-selected", mode: "fromView" })
1108
1109
  ], DataGridCell.prototype, "ariaSelected");
1109
1110
  __decorateClass([
1110
- defineVividComponent.attr({ attribute: "aria-sort" })
1111
+ vividElement.attr({ attribute: "aria-sort" })
1111
1112
  ], DataGridCell.prototype, "ariaSort");
1112
1113
 
1113
1114
  function createCellItemTemplate(context) {
1114
1115
  const cellTag = context.tagFor(DataGridCell);
1115
- return defineVividComponent.html`
1116
+ return vividElement.html`
1116
1117
  <${cellTag}
1117
1118
  cell-type="${(x) => x.isRowHeader ? "rowheader" : void 0}"
1118
1119
  grid-column="${(_, c) => c.index + 1}"
@@ -1124,7 +1125,7 @@ function createCellItemTemplate(context) {
1124
1125
  }
1125
1126
  function createHeaderCellItemTemplate(context) {
1126
1127
  const cellTag = context.tagFor(DataGridCell);
1127
- return defineVividComponent.html`
1128
+ return vividElement.html`
1128
1129
  <${cellTag}
1129
1130
  cell-type="columnheader"
1130
1131
  grid-column="${(_, c) => c.index + 1}"
@@ -1135,7 +1136,7 @@ function createHeaderCellItemTemplate(context) {
1135
1136
  const DataGridRowTemplate = (context) => {
1136
1137
  const cellItemTemplate = createCellItemTemplate(context);
1137
1138
  const headerCellItemTemplate = createHeaderCellItemTemplate(context);
1138
- return defineVividComponent.html`
1139
+ return vividElement.html`
1139
1140
  <template
1140
1141
  role="row"
1141
1142
  class="${(x) => x.rowType !== "default" ? x.rowType : ""}"
@@ -1169,10 +1170,10 @@ function getSortIcon(x) {
1169
1170
  }
1170
1171
  function renderSortIcons(c) {
1171
1172
  const iconTag = c.tagFor(definition.Icon);
1172
- return defineVividComponent.html`
1173
+ return vividElement.html`
1173
1174
  ${when.when(
1174
1175
  shouldShowSortIcons,
1175
- defineVividComponent.html`
1176
+ vividElement.html`
1176
1177
  <${iconTag} class="header-icon" name="${getSortIcon}"></${iconTag}>
1177
1178
  `
1178
1179
  )}
@@ -1185,7 +1186,7 @@ function handleKeyDown(x, e) {
1185
1186
  return true;
1186
1187
  }
1187
1188
  const DataGridCellTemplate = (context) => {
1188
- return defineVividComponent.html`
1189
+ return vividElement.html`
1189
1190
  <template
1190
1191
  tabindex="-1"
1191
1192
  role="${(x) => DataGridCellRole[x.cellType] ?? DataGridCellRole.default}"
@@ -1200,7 +1201,7 @@ const DataGridCellTemplate = (context) => {
1200
1201
  `;
1201
1202
  };
1202
1203
 
1203
- const dataGridCellDefinition = defineVividComponent.defineVividComponent(
1204
+ const dataGridCellDefinition = vividElement.defineVividComponent(
1204
1205
  "data-grid-cell",
1205
1206
  DataGridCell,
1206
1207
  DataGridCellTemplate,
@@ -1209,7 +1210,7 @@ const dataGridCellDefinition = defineVividComponent.defineVividComponent(
1209
1210
  styles: dataGridCellStyles
1210
1211
  }
1211
1212
  );
1212
- const dataGridRowDefinition = defineVividComponent.defineVividComponent(
1213
+ const dataGridRowDefinition = vividElement.defineVividComponent(
1213
1214
  "data-grid-row",
1214
1215
  DataGridRow,
1215
1216
  DataGridRowTemplate,
@@ -1218,7 +1219,7 @@ const dataGridRowDefinition = defineVividComponent.defineVividComponent(
1218
1219
  styles: dataGridRowStyles
1219
1220
  }
1220
1221
  );
1221
- const dataGridDefinition = defineVividComponent.defineVividComponent(
1222
+ const dataGridDefinition = vividElement.defineVividComponent(
1222
1223
  "data-grid",
1223
1224
  DataGrid,
1224
1225
  DataGridTemplate,
@@ -1227,7 +1228,7 @@ const dataGridDefinition = defineVividComponent.defineVividComponent(
1227
1228
  styles: dataGridStyles
1228
1229
  }
1229
1230
  );
1230
- const registerDataGrid = defineVividComponent.createRegisterFunction(dataGridDefinition);
1231
+ const registerDataGrid = vividElement.createRegisterFunction(dataGridDefinition);
1231
1232
 
1232
1233
  exports.dataGridCellDefinition = dataGridCellDefinition;
1233
1234
  exports.dataGridDefinition = dataGridDefinition;
@@ -1,6 +1,5 @@
1
1
  import { I as Icon, i as iconDefinition } from './definition27.js';
2
- import { a as attr, o as observable, D as DOM, O as Observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
3
- import { V as VividElement } from './vivid-element.js';
2
+ import { a as attr, o as observable, V as VividElement, D as DOM, O as Observable, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
4
3
  import { d as keyEnd, g as keyHome, j as keyPageDown, l as keyPageUp, f as keyArrowDown, e as keyArrowUp, i as keyArrowRight, h as keyArrowLeft, b as keyEscape, m as keyFunction2, k as keyEnter, a as keySpace } from './key-codes.js';
5
4
  import { R as RepeatDirective } from './repeat.js';
6
5
  import { s as slotted, e as elements } from './slotted.js';
@@ -273,15 +272,16 @@ const _DataGrid = class _DataGrid extends VividElement {
273
272
  * @internal
274
273
  */
275
274
  noTabbingChanged() {
276
- if (this.noTabbing) {
277
- this.setAttribute("tabIndex", "-1");
278
- } else {
279
- this.setAttribute(
280
- "tabIndex",
281
- this.contains(document.activeElement) ? "-1" : "0"
282
- );
275
+ if (this.$fastController.isConnected) {
276
+ this.#setTabIndex();
283
277
  }
284
278
  }
279
+ #setTabIndex() {
280
+ this.setAttribute(
281
+ "tabIndex",
282
+ this.noTabbing || this.contains(document.activeElement) ? "-1" : "0"
283
+ );
284
+ }
285
285
  /**
286
286
  * @internal
287
287
  */
@@ -375,6 +375,7 @@ const _DataGrid = class _DataGrid extends VividElement {
375
375
  this.observer = new MutationObserver(this.onChildListChange);
376
376
  this.observer.observe(this, { childList: true });
377
377
  DOM.queueUpdate(this.queueRowIndexUpdate);
378
+ this.#setTabIndex();
378
379
  Observable.getNotifier(this).subscribe(
379
380
  this.#changeHandler,
380
381
  "columnDefinitions"
@@ -5,7 +5,7 @@ const definition = require('./definition11.cjs');
5
5
  const definition$2 = require('./definition55.cjs');
6
6
  const definition$3 = require('./definition22.cjs');
7
7
  const presentationDate = require('./presentationDate.cjs');
8
- const defineVividComponent = require('./defineVividComponent.cjs');
8
+ const vividElement = require('./vivid-element.cjs');
9
9
  const formElements = require('./form-elements.cjs');
10
10
 
11
11
  var __defProp = Object.defineProperty;
@@ -156,14 +156,14 @@ updateValueDueToUserInteraction_fn = function(newValue) {
156
156
  this.$emit("input");
157
157
  };
158
158
  __decorateClass([
159
- defineVividComponent.volatile
159
+ vividElement.volatile
160
160
  ], DatePicker.prototype, "_calendarButtonLabel", 1);
161
161
  DatePicker = __decorateClass([
162
162
  formElements.errorText,
163
163
  formElements.formElements
164
164
  ], DatePicker);
165
165
 
166
- const datePickerDefinition = defineVividComponent.defineVividComponent(
166
+ const datePickerDefinition = vividElement.defineVividComponent(
167
167
  "date-picker",
168
168
  DatePicker,
169
169
  presentationDate.DatePickerBaseTemplate,
@@ -175,7 +175,7 @@ const datePickerDefinition = defineVividComponent.defineVividComponent(
175
175
  }
176
176
  }
177
177
  );
178
- const registerDatePicker = defineVividComponent.createRegisterFunction(datePickerDefinition);
178
+ const registerDatePicker = vividElement.createRegisterFunction(datePickerDefinition);
179
179
 
180
180
  exports.datePickerDefinition = datePickerDefinition;
181
181
  exports.registerDatePicker = registerDatePicker;
@@ -3,7 +3,7 @@ import { b as buttonDefinition } from './definition11.js';
3
3
  import { t as textFieldDefinition } from './definition55.js';
4
4
  import { d as dividerDefinition } from './definition22.js';
5
5
  import { D as DatePickerBase, i as isValidDateStr, f as formatPresentationDate, p as parsePresentationDate, s as styles, a as DatePickerBaseTemplate } from './presentationDate.js';
6
- import { v as volatile, d as defineVividComponent, f as createRegisterFunction } from './defineVividComponent.js';
6
+ import { v as volatile, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
7
7
  import { e as errorText, f as formElements } from './form-elements.js';
8
8
 
9
9
  var __defProp = Object.defineProperty;