@vonage/vivid 4.11.0 → 4.12.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 (96) hide show
  1. package/custom-elements.json +899 -442
  2. package/lib/accordion/accordion.d.ts +21 -2
  3. package/lib/accordion-item/accordion-item.d.ts +6 -2
  4. package/lib/calendar/calendar.d.ts +1 -1
  5. package/lib/date-picker/date-picker.d.ts +1 -0
  6. package/lib/fab/fab.d.ts +2 -2
  7. package/lib/radio/radio.d.ts +12 -2
  8. package/lib/radio/radio.form-associated.d.ts +10 -0
  9. package/lib/radio-group/radio-group.d.ts +20 -2
  10. package/lib/tab/tab.d.ts +3 -2
  11. package/lib/tab-panel/tab-panel.d.ts +2 -2
  12. package/lib/tabs/tabs.d.ts +30 -9
  13. package/package.json +1 -1
  14. package/shared/date-picker/date-picker-base.d.ts +1 -0
  15. package/shared/definition.cjs +29 -72
  16. package/shared/definition.js +30 -73
  17. package/shared/definition16.cjs +1 -2
  18. package/shared/definition16.js +1 -2
  19. package/shared/definition17.cjs +2 -2
  20. package/shared/definition17.js +2 -2
  21. package/shared/definition18.cjs +6 -1
  22. package/shared/definition18.js +6 -1
  23. package/shared/definition19.cjs +17 -8
  24. package/shared/definition19.js +17 -8
  25. package/shared/definition2.cjs +154 -187
  26. package/shared/definition2.js +157 -190
  27. package/shared/definition20.cjs +1 -1
  28. package/shared/definition20.js +1 -1
  29. package/shared/definition24.cjs +11 -11
  30. package/shared/definition24.js +11 -11
  31. package/shared/definition29.cjs +2 -2
  32. package/shared/definition29.js +2 -2
  33. package/shared/definition35.cjs +1 -1
  34. package/shared/definition35.js +1 -1
  35. package/shared/definition40.cjs +226 -399
  36. package/shared/definition40.js +229 -402
  37. package/shared/definition42.cjs +3 -2
  38. package/shared/definition42.js +3 -2
  39. package/shared/definition43.cjs +1 -0
  40. package/shared/definition43.js +1 -0
  41. package/shared/definition44.cjs +1 -1
  42. package/shared/definition44.js +1 -1
  43. package/shared/definition47.cjs +3 -2
  44. package/shared/definition47.js +3 -2
  45. package/shared/definition49.cjs +1 -1
  46. package/shared/definition49.js +1 -1
  47. package/shared/definition5.cjs +1 -1
  48. package/shared/definition5.js +1 -1
  49. package/shared/definition50.cjs +1 -11
  50. package/shared/definition50.js +1 -11
  51. package/shared/definition51.cjs +4 -14
  52. package/shared/definition51.js +5 -15
  53. package/shared/definition52.cjs +269 -19
  54. package/shared/definition52.js +273 -23
  55. package/shared/definition57.cjs +26 -4
  56. package/shared/definition57.js +27 -5
  57. package/shared/definition58.cjs +1 -1
  58. package/shared/definition58.js +1 -1
  59. package/shared/definition59.cjs +1 -1
  60. package/shared/definition59.js +1 -1
  61. package/shared/definition61.cjs +1 -1
  62. package/shared/definition61.js +1 -1
  63. package/shared/definition62.cjs +17 -8
  64. package/shared/definition62.js +17 -8
  65. package/shared/definition64.cjs +55 -30
  66. package/shared/definition64.js +55 -30
  67. package/shared/form-associated.cjs +1 -1
  68. package/shared/form-associated.js +1 -1
  69. package/shared/foundation/button/button.d.ts +1 -1
  70. package/shared/foundation/button/button.template.d.ts +2 -2
  71. package/shared/icon.cjs +1 -1
  72. package/shared/icon.js +1 -1
  73. package/shared/index.cjs +1 -0
  74. package/shared/index.js +1 -1
  75. package/shared/key-codes.cjs +1 -94
  76. package/shared/key-codes.js +2 -89
  77. package/shared/key-codes2.cjs +87 -1
  78. package/shared/key-codes2.js +83 -2
  79. package/shared/listbox.cjs +6 -7
  80. package/shared/listbox.js +3 -4
  81. package/shared/numbers.cjs +0 -12
  82. package/shared/numbers.js +1 -12
  83. package/shared/presentationDate.cjs +14 -0
  84. package/shared/presentationDate.js +15 -1
  85. package/shared/radio.cjs +92 -117
  86. package/shared/radio.js +93 -118
  87. package/shared/slider.template.cjs +2 -15
  88. package/shared/slider.template.js +2 -14
  89. package/shared/strings.cjs +26 -0
  90. package/shared/strings.js +25 -1
  91. package/styles/core/all.css +1 -1
  92. package/styles/core/theme.css +1 -1
  93. package/styles/core/typography.css +1 -1
  94. package/styles/tokens/theme-dark.css +4 -4
  95. package/styles/tokens/theme-light.css +4 -4
  96. package/styles/tokens/vivid-2-compat.css +1 -1
@@ -1,205 +1,165 @@
1
- import { F as FoundationElement, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
2
- import { A as AccordionItem$1, b as accordionItemRegistries } from './definition.js';
3
- import { d as keyEnd, g as keyHome, f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
1
+ import { F as FoundationElement, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
2
+ import { A as AccordionItem, b as accordionItemRegistries } from './definition.js';
3
+ import { a as keyEnd, b as keyHome, c as keyArrowDown, d as keyArrowUp } from './key-codes.js';
4
4
  import { w as wrapInBounds } from './numbers.js';
5
5
  import { s as slotted, e as elements } from './slotted.js';
6
6
  import { c as classNames } from './class-names.js';
7
7
 
8
- /**
9
- * Expand mode for {@link Accordion}
10
- * @public
11
- */
8
+ const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
9
+
10
+ var __defProp = Object.defineProperty;
11
+ var __decorateClass = (decorators, target, key, kind) => {
12
+ var result = void 0 ;
13
+ for (var i = decorators.length - 1, decorator; i >= 0; i--)
14
+ if (decorator = decorators[i])
15
+ result = (decorator(target, key, result) ) || result;
16
+ if (result) __defProp(target, key, result);
17
+ return result;
18
+ };
12
19
  const AccordionExpandMode = {
13
- /**
14
- * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
15
- */
16
- single: "single",
17
- /**
18
- * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
19
- */
20
- multi: "multi",
20
+ /**
21
+ * Designates only a single {@link @microsoft/fast-foundation#(AccordionItem:class) } can be open a time.
22
+ */
23
+ single: "single",
24
+ /**
25
+ * Designates multiple {@link @microsoft/fast-foundation#(AccordionItem:class) | AccordionItems} can be open simultaneously.
26
+ */
27
+ multi: "multi"
21
28
  };
22
- /**
23
- * An Accordion Custom HTML Element
24
- * Implements {@link https://www.w3.org/TR/wai-aria-practices-1.1/#accordion | ARIA Accordion}.
25
- *
26
- * @fires change - Fires a custom 'change' event when the active item changes
27
- * @csspart item - The slot for the accordion items
28
- * @public
29
- *
30
- * @remarks
31
- * Designed to be used with {@link @microsoft/fast-foundation#accordionTemplate} and {@link @microsoft/fast-foundation#(AccordionItem:class)}.
32
- */
33
- let Accordion$1 = class Accordion extends FoundationElement {
34
- constructor() {
35
- super(...arguments);
36
- /**
37
- * Controls the expand mode of the Accordion, either allowing
38
- * single or multiple item expansion.
39
- * @public
40
- *
41
- * @remarks
42
- * HTML attribute: expand-mode
43
- */
44
- this.expandmode = AccordionExpandMode.multi;
45
- this.activeItemIndex = 0;
46
- this.change = () => {
47
- this.$emit("change", this.activeid);
48
- };
49
- this.setItems = () => {
50
- var _a;
51
- if (this.accordionItems.length === 0) {
52
- return;
53
- }
54
- this.accordionIds = this.getItemIds();
55
- this.accordionItems.forEach((item, index) => {
56
- if (item instanceof AccordionItem$1) {
57
- item.addEventListener("change", this.activeItemChange);
58
- if (this.isSingleExpandMode()) {
59
- this.activeItemIndex !== index
60
- ? (item.expanded = false)
61
- : (item.expanded = true);
62
- }
63
- }
64
- const itemId = this.accordionIds[index];
65
- item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
66
- this.activeid = this.accordionIds[this.activeItemIndex];
67
- item.addEventListener("keydown", this.handleItemKeyDown);
68
- item.addEventListener("focus", this.handleItemFocus);
69
- });
70
- if (this.isSingleExpandMode()) {
71
- const expandedItem = (_a = this.findExpandedItem()) !== null && _a !== void 0 ? _a : this.accordionItems[0];
72
- expandedItem.setAttribute("aria-disabled", "true");
73
- }
74
- };
75
- this.removeItemListeners = (oldValue) => {
76
- oldValue.forEach((item, index) => {
77
- item.removeEventListener("change", this.activeItemChange);
78
- item.removeEventListener("keydown", this.handleItemKeyDown);
79
- item.removeEventListener("focus", this.handleItemFocus);
80
- });
81
- };
82
- this.activeItemChange = (event) => {
83
- if (event.defaultPrevented || event.target !== event.currentTarget) {
84
- return;
85
- }
86
- event.preventDefault();
87
- const selectedItem = event.target;
88
- this.activeid = selectedItem.getAttribute("id");
89
- if (this.isSingleExpandMode()) {
90
- this.resetItems();
91
- selectedItem.expanded = true;
92
- selectedItem.setAttribute("aria-disabled", "true");
93
- this.accordionItems.forEach((item) => {
94
- if (!item.hasAttribute("disabled") && item.id !== this.activeid) {
95
- item.removeAttribute("aria-disabled");
96
- }
97
- });
98
- }
99
- this.activeItemIndex = Array.from(this.accordionItems).indexOf(selectedItem);
100
- this.change();
101
- };
102
- this.handleItemKeyDown = (event) => {
103
- // only handle the keydown if the event target is the accordion item
104
- // prevents arrow keys from moving focus to accordion headers when focus is on accordion item panel content
105
- if (event.target !== event.currentTarget) {
106
- return;
107
- }
108
- this.accordionIds = this.getItemIds();
109
- switch (event.key) {
110
- case keyArrowUp:
111
- event.preventDefault();
112
- this.adjust(-1);
113
- break;
114
- case keyArrowDown:
115
- event.preventDefault();
116
- this.adjust(1);
117
- break;
118
- case keyHome:
119
- this.activeItemIndex = 0;
120
- this.focusItem();
121
- break;
122
- case keyEnd:
123
- this.activeItemIndex = this.accordionItems.length - 1;
124
- this.focusItem();
125
- break;
126
- }
127
- };
128
- this.handleItemFocus = (event) => {
129
- // update the active item index if the focus moves to an accordion item via a different method other than the up and down arrow key actions
130
- // only do so if the focus is actually on the accordion item and not on any of its children
131
- if (event.target === event.currentTarget) {
132
- const focusedItem = event.target;
133
- const focusedIndex = (this.activeItemIndex = Array.from(this.accordionItems).indexOf(focusedItem));
134
- if (this.activeItemIndex !== focusedIndex && focusedIndex !== -1) {
135
- this.activeItemIndex = focusedIndex;
136
- this.activeid = this.accordionIds[this.activeItemIndex];
137
- }
138
- }
139
- };
140
- }
141
- /**
142
- * @internal
143
- */
144
- accordionItemsChanged(oldValue, newValue) {
145
- if (this.$fastController.isConnected) {
146
- this.removeItemListeners(oldValue);
147
- this.setItems();
148
- }
149
- }
150
- findExpandedItem() {
151
- for (let item = 0; item < this.accordionItems.length; item++) {
152
- if (this.accordionItems[item].getAttribute("expanded") === "true") {
153
- return this.accordionItems[item];
29
+ class Accordion extends FoundationElement {
30
+ constructor() {
31
+ super(...arguments);
32
+ /* eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value */
33
+ this.expandmode = AccordionExpandMode.single;
34
+ this.activeItemIndex = 0;
35
+ this.change = () => {
36
+ this.$emit("change", this.activeid);
37
+ };
38
+ this.setItems = () => {
39
+ if (this.accordionItems.length === 0) {
40
+ return;
41
+ }
42
+ this.accordionIds = this.getItemIds();
43
+ this.activeid = this.accordionIds[this.activeItemIndex];
44
+ this.accordionItems.forEach((item, index) => {
45
+ if (item instanceof AccordionItem) {
46
+ item.addEventListener("change", this.activeItemChange);
47
+ if (this.isSingleExpandMode()) {
48
+ const expandedItem = this.findExpandedItem();
49
+ if (expandedItem === null && index === 0) {
50
+ item.expanded = true;
51
+ } else {
52
+ item !== this.findExpandedItem() ? item.expanded = false : item.expanded = true;
154
53
  }
54
+ }
155
55
  }
156
- return null;
157
- }
158
- resetItems() {
159
- this.accordionItems.forEach((item, index) => {
160
- item.expanded = false;
161
- });
162
- }
163
- getItemIds() {
164
- return this.accordionItems.map((accordionItem) => {
165
- return accordionItem.getAttribute("id");
56
+ const itemId = this.accordionIds[index];
57
+ item.setAttribute(
58
+ "id",
59
+ typeof itemId !== "string" ? `accordion-${index + 1}` : itemId
60
+ );
61
+ item.addEventListener("keydown", this.handleItemKeyDown);
62
+ });
63
+ if (this.isSingleExpandMode()) {
64
+ const expandedItem = this.findExpandedItem() ?? this.accordionItems[0];
65
+ expandedItem.setAttribute("aria-disabled", "true");
66
+ }
67
+ };
68
+ this.removeItemListeners = (oldValue) => {
69
+ oldValue.forEach((item) => {
70
+ item.removeEventListener("change", this.activeItemChange);
71
+ item.removeEventListener("keydown", this.handleItemKeyDown);
72
+ });
73
+ };
74
+ this.activeItemChange = (event) => {
75
+ if (event.defaultPrevented || event.target !== event.currentTarget) {
76
+ return;
77
+ }
78
+ event.preventDefault();
79
+ const selectedItem = event.target;
80
+ this.activeid = selectedItem.getAttribute("id");
81
+ if (this.isSingleExpandMode()) {
82
+ this.resetItems();
83
+ selectedItem.expanded = true;
84
+ selectedItem.setAttribute("aria-disabled", "true");
85
+ this.accordionItems.forEach((item) => {
86
+ if (!item.hasAttribute("disabled") && item.id !== this.activeid) {
87
+ item.removeAttribute("aria-disabled");
88
+ }
166
89
  });
90
+ }
91
+ this.activeItemIndex = Array.from(this.accordionItems).indexOf(
92
+ selectedItem
93
+ );
94
+ this.change();
95
+ };
96
+ this.handleItemKeyDown = (event) => {
97
+ if (event.target !== event.currentTarget) {
98
+ return;
99
+ }
100
+ this.accordionIds = this.getItemIds();
101
+ switch (event.key) {
102
+ case keyArrowUp:
103
+ event.preventDefault();
104
+ this.adjust(event.target, -1);
105
+ break;
106
+ case keyArrowDown:
107
+ event.preventDefault();
108
+ this.adjust(event.target, 1);
109
+ break;
110
+ case keyHome:
111
+ this.focusItem(0);
112
+ break;
113
+ case keyEnd:
114
+ this.focusItem(this.accordionItems.length - 1);
115
+ break;
116
+ }
117
+ };
118
+ }
119
+ /**
120
+ * @internal
121
+ */
122
+ accordionItemsChanged(oldValue) {
123
+ if (this.$fastController.isConnected) {
124
+ this.removeItemListeners(oldValue);
125
+ this.setItems();
167
126
  }
168
- isSingleExpandMode() {
169
- return this.expandmode === AccordionExpandMode.single;
170
- }
171
- adjust(adjustment) {
172
- this.activeItemIndex = wrapInBounds(0, this.accordionItems.length - 1, this.activeItemIndex + adjustment);
173
- this.focusItem();
127
+ }
128
+ findExpandedItem() {
129
+ for (let item = 0; item < this.accordionItems.length; item++) {
130
+ if (this.accordionItems[item].hasAttribute("expanded") === true) {
131
+ return this.accordionItems[item];
132
+ }
174
133
  }
175
- focusItem() {
176
- const element = this.accordionItems[this.activeItemIndex];
177
- if (element instanceof AccordionItem$1) {
178
- element.expandbutton.focus();
179
- }
134
+ return null;
135
+ }
136
+ resetItems() {
137
+ this.accordionItems.forEach((item) => {
138
+ item.expanded = false;
139
+ });
140
+ }
141
+ getItemIds() {
142
+ return this.accordionItems.map((accordionItem) => {
143
+ return accordionItem.getAttribute("id");
144
+ });
145
+ }
146
+ isSingleExpandMode() {
147
+ return this.expandmode !== AccordionExpandMode.multi;
148
+ }
149
+ adjust(item, adjustment) {
150
+ this.focusItem(
151
+ wrapInBounds(
152
+ 0,
153
+ this.accordionItems.length - 1,
154
+ this.accordionItems.indexOf(item) + adjustment
155
+ )
156
+ );
157
+ }
158
+ focusItem(index) {
159
+ const element = this.accordionItems[index];
160
+ if (element instanceof AccordionItem) {
161
+ element.expandbutton.focus();
180
162
  }
181
- };
182
- __decorate([
183
- attr({ attribute: "expand-mode" })
184
- ], Accordion$1.prototype, "expandmode", void 0);
185
- __decorate([
186
- observable
187
- ], Accordion$1.prototype, "accordionItems", void 0);
188
-
189
- const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
190
-
191
- class Accordion extends Accordion$1 {
192
- constructor() {
193
- super(...arguments);
194
- /**
195
- * Controls the expand mode of the Accordion, either allowing
196
- * single or multiple item expansion.
197
- * @public
198
- *
199
- * @remarks
200
- * HTML attribute: expand-mode
201
- */
202
- this.expandmode = AccordionExpandMode.single;
203
163
  }
204
164
  closeAll() {
205
165
  if (this.expandmode === AccordionExpandMode.multi) {
@@ -209,6 +169,13 @@ class Accordion extends Accordion$1 {
209
169
  }
210
170
  }
211
171
  }
172
+ __decorateClass([
173
+ attr({ attribute: "expand-mode" })
174
+ ], Accordion.prototype, "expandmode");
175
+ // @ts-expect-error Type is incorrectly non-optional
176
+ __decorateClass([
177
+ observable
178
+ ], Accordion.prototype, "accordionItems");
212
179
 
213
180
  const getClasses = (_) => classNames("base");
214
181
  const AccordionTemplate = () => html`
@@ -10,7 +10,7 @@ const when = require('./when.cjs');
10
10
  const classNames = require('./class-names.cjs');
11
11
  const ref = require('./ref.cjs');
12
12
  const repeat = require('./repeat.cjs');
13
- const keyCodes = require('./key-codes2.cjs');
13
+ const keyCodes = require('./key-codes.cjs');
14
14
 
15
15
  const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}";
16
16
 
@@ -8,7 +8,7 @@ import { w as when } from './when.js';
8
8
  import { c as classNames } from './class-names.js';
9
9
  import { r as ref } from './ref.js';
10
10
  import { r as repeat } from './repeat.js';
11
- import { b as keyEnter } from './key-codes2.js';
11
+ import { g as keyEnter } from './key-codes.js';
12
12
 
13
13
  const styles = ":host{display:inline-block;margin:16px;inline-size:230px}.base{display:grid;box-sizing:border-box;grid-template-rows:80px 1fr auto}.base.no-input{grid-template-rows:1fr auto}.digits{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);inline-size:100%}.phone-field{align-self:flex-start;grid-column:1/-1}.digit-btn{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.digit-btn:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.digit-btn:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.digit-btn{--_connotation-color-contrast: var(--vvd-dial-pad-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-dial-pad-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-dial-pad-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-dial-pad-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-dial-pad-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-dial-pad-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-dial-pad-accent-dim, var(--vvd-color-neutral-200))}.digit-btn{--vvd-button-accent-firm: var(--_appearance-color-text);display:flex;overflow:hidden;flex-direction:column;border-radius:16px;box-shadow:0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.digit-btn:not(.disabled) .digit-btn-num{color:var(--vvd-color-canvas-text)}.call-btn{margin-top:32px;grid-column:1/-1}";
14
14
 
@@ -29,7 +29,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
29
29
  if (result) __defProp$1(target, key, result);
30
30
  return result;
31
31
  };
32
- class FoundationButton extends FormAssociatedButton {
32
+ class VividFoundationButton extends FormAssociatedButton {
33
33
  constructor() {
34
34
  super(...arguments);
35
35
  /**
@@ -131,28 +131,28 @@ class FoundationButton extends FormAssociatedButton {
131
131
  }
132
132
  __decorateClass$1([
133
133
  index.attr({ mode: "boolean" })
134
- ], FoundationButton.prototype, "autofocus");
134
+ ], VividFoundationButton.prototype, "autofocus");
135
135
  __decorateClass$1([
136
136
  index.attr({ attribute: "form" })
137
- ], FoundationButton.prototype, "formId");
137
+ ], VividFoundationButton.prototype, "formId");
138
138
  __decorateClass$1([
139
139
  index.attr
140
- ], FoundationButton.prototype, "formaction");
140
+ ], VividFoundationButton.prototype, "formaction");
141
141
  __decorateClass$1([
142
142
  index.attr
143
- ], FoundationButton.prototype, "formenctype");
143
+ ], VividFoundationButton.prototype, "formenctype");
144
144
  __decorateClass$1([
145
145
  index.attr
146
- ], FoundationButton.prototype, "formmethod");
146
+ ], VividFoundationButton.prototype, "formmethod");
147
147
  __decorateClass$1([
148
148
  index.attr({ mode: "boolean" })
149
- ], FoundationButton.prototype, "formnovalidate");
149
+ ], VividFoundationButton.prototype, "formnovalidate");
150
150
  __decorateClass$1([
151
151
  index.attr
152
- ], FoundationButton.prototype, "formtarget");
152
+ ], VividFoundationButton.prototype, "formtarget");
153
153
  __decorateClass$1([
154
154
  index.attr
155
- ], FoundationButton.prototype, "type");
155
+ ], VividFoundationButton.prototype, "type");
156
156
  class DelegatesARIAButton {
157
157
  }
158
158
  __decorateClass$1([
@@ -162,7 +162,7 @@ __decorateClass$1([
162
162
  index.attr({ attribute: "aria-pressed" })
163
163
  ], DelegatesARIAButton.prototype, "ariaPressed");
164
164
  applyMixins.applyMixins(DelegatesARIAButton, ariaGlobal.ARIAGlobalStatesAndProperties);
165
- applyMixins.applyMixins(FoundationButton, DelegatesARIAButton);
165
+ applyMixins.applyMixins(VividFoundationButton, DelegatesARIAButton);
166
166
 
167
167
  var __defProp = Object.defineProperty;
168
168
  var __decorateClass = (decorators, target, key, kind) => {
@@ -173,7 +173,7 @@ var __decorateClass = (decorators, target, key, kind) => {
173
173
  if (result) __defProp(target, key, result);
174
174
  return result;
175
175
  };
176
- class Fab extends FoundationButton {
176
+ class Fab extends VividFoundationButton {
177
177
  }
178
178
  __decorateClass([
179
179
  index.attr
@@ -27,7 +27,7 @@ var __decorateClass$1 = (decorators, target, key, kind) => {
27
27
  if (result) __defProp$1(target, key, result);
28
28
  return result;
29
29
  };
30
- class FoundationButton extends FormAssociatedButton {
30
+ class VividFoundationButton extends FormAssociatedButton {
31
31
  constructor() {
32
32
  super(...arguments);
33
33
  /**
@@ -129,28 +129,28 @@ class FoundationButton extends FormAssociatedButton {
129
129
  }
130
130
  __decorateClass$1([
131
131
  attr({ mode: "boolean" })
132
- ], FoundationButton.prototype, "autofocus");
132
+ ], VividFoundationButton.prototype, "autofocus");
133
133
  __decorateClass$1([
134
134
  attr({ attribute: "form" })
135
- ], FoundationButton.prototype, "formId");
135
+ ], VividFoundationButton.prototype, "formId");
136
136
  __decorateClass$1([
137
137
  attr
138
- ], FoundationButton.prototype, "formaction");
138
+ ], VividFoundationButton.prototype, "formaction");
139
139
  __decorateClass$1([
140
140
  attr
141
- ], FoundationButton.prototype, "formenctype");
141
+ ], VividFoundationButton.prototype, "formenctype");
142
142
  __decorateClass$1([
143
143
  attr
144
- ], FoundationButton.prototype, "formmethod");
144
+ ], VividFoundationButton.prototype, "formmethod");
145
145
  __decorateClass$1([
146
146
  attr({ mode: "boolean" })
147
- ], FoundationButton.prototype, "formnovalidate");
147
+ ], VividFoundationButton.prototype, "formnovalidate");
148
148
  __decorateClass$1([
149
149
  attr
150
- ], FoundationButton.prototype, "formtarget");
150
+ ], VividFoundationButton.prototype, "formtarget");
151
151
  __decorateClass$1([
152
152
  attr
153
- ], FoundationButton.prototype, "type");
153
+ ], VividFoundationButton.prototype, "type");
154
154
  class DelegatesARIAButton {
155
155
  }
156
156
  __decorateClass$1([
@@ -160,7 +160,7 @@ __decorateClass$1([
160
160
  attr({ attribute: "aria-pressed" })
161
161
  ], DelegatesARIAButton.prototype, "ariaPressed");
162
162
  applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
163
- applyMixins(FoundationButton, DelegatesARIAButton);
163
+ applyMixins(VividFoundationButton, DelegatesARIAButton);
164
164
 
165
165
  var __defProp = Object.defineProperty;
166
166
  var __decorateClass = (decorators, target, key, kind) => {
@@ -171,7 +171,7 @@ var __decorateClass = (decorators, target, key, kind) => {
171
171
  if (result) __defProp(target, key, result);
172
172
  return result;
173
173
  };
174
- class Fab extends FoundationButton {
174
+ class Fab extends VividFoundationButton {
175
175
  }
176
176
  __decorateClass([
177
177
  attr
@@ -2,12 +2,12 @@
2
2
 
3
3
  const index = require('./index.cjs');
4
4
  const definition = require('./definition27.cjs');
5
- const keyCodes$1 = require('./key-codes2.cjs');
5
+ const keyCodes$1 = require('./key-codes.cjs');
6
6
  const affix = require('./affix.cjs');
7
7
  const applyMixins = require('./apply-mixins.cjs');
8
8
  const startEnd = require('./start-end.cjs');
9
9
  const direction = require('./direction.cjs');
10
- const keyCodes = require('./key-codes.cjs');
10
+ const keyCodes = require('./key-codes2.cjs');
11
11
  const icon = require('./icon.cjs');
12
12
  const anchored = require('./anchored.cjs');
13
13
  const dom = require('./dom.cjs');
@@ -1,11 +1,11 @@
1
1
  import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
2
2
  import { a as iconRegistries } from './definition27.js';
3
- import { k as keyArrowLeft$1, a as keyArrowRight$1, g as keySpace$1, b as keyEnter$1 } from './key-codes2.js';
3
+ import { e as keyArrowLeft$1, f as keyArrowRight$1, k as keySpace$1, g as keyEnter$1 } from './key-codes.js';
4
4
  import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
5
5
  import { a as applyMixins } from './apply-mixins.js';
6
6
  import { S as StartEnd } from './start-end.js';
7
7
  import { D as Direction, g as getDirection } from './direction.js';
8
- import { i as keyArrowLeft, h as keyArrowRight, a as keySpace, k as keyEnter, g as keyHome, d as keyEnd, e as keyArrowUp, f as keyArrowDown } from './key-codes.js';
8
+ import { i as keyArrowLeft, h as keyArrowRight, a as keySpace, k as keyEnter, g as keyHome, d as keyEnd, e as keyArrowUp, f as keyArrowDown } from './key-codes2.js';
9
9
  import { I as Icon } from './icon.js';
10
10
  import { b as anchored } from './anchored.js';
11
11
  import { i as isHTMLElement } from './dom.js';
@@ -6,7 +6,7 @@ const definition$1 = require('./definition22.cjs');
6
6
  const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
7
7
  const formAssociated = require('./form-associated.cjs');
8
8
  const textField = require('./text-field2.cjs');
9
- const keyCodes = require('./key-codes2.cjs');
9
+ const keyCodes = require('./key-codes.cjs');
10
10
  const formElements = require('./form-elements.cjs');
11
11
  const affix = require('./affix.cjs');
12
12
  const localized = require('./localized.cjs');
@@ -4,7 +4,7 @@ import { D as Divider, a as dividerRegistries } from './definition22.js';
4
4
  import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
5
5
  import { F as FormAssociated } from './form-associated.js';
6
6
  import { D as DelegatesARIATextbox } from './text-field2.js';
7
- import { e as keyArrowDown, f as keyArrowUp } from './key-codes2.js';
7
+ import { c as keyArrowDown, d as keyArrowUp } from './key-codes.js';
8
8
  import { e as errorText, f as formElements, F as FormElementSuccessText, a as FormElementHelperText, b as FormElementCharCount, g as getFeedbackTemplate } from './form-elements.js';
9
9
  import { A as AffixIcon } from './affix.js';
10
10
  import { L as Localized } from './localized.js';