@vonage/vivid 3.32.0 → 3.35.0

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 (221) hide show
  1. package/accordion/index.js +5 -5
  2. package/accordion-item/index.js +4 -4
  3. package/action-group/index.js +1 -1
  4. package/alert/index.js +6 -6
  5. package/avatar/index.js +2 -2
  6. package/badge/index.js +2 -2
  7. package/banner/index.js +5 -5
  8. package/breadcrumb/index.js +1 -1
  9. package/breadcrumb-item/index.js +3 -3
  10. package/button/index.js +4 -4
  11. package/calendar/index.js +1 -1
  12. package/calendar-event/index.js +1 -1
  13. package/card/index.js +3 -3
  14. package/checkbox/index.js +5 -3
  15. package/combobox/index.js +8 -8
  16. package/custom-elements.json +256 -18
  17. package/data-grid/index.js +2 -2
  18. package/date-picker/index.js +9 -9
  19. package/dialog/index.js +6 -6
  20. package/divider/index.js +1 -1
  21. package/elevation/index.js +1 -1
  22. package/empty-state/index.js +2 -2
  23. package/fab/index.js +4 -4
  24. package/file-picker/index.js +5 -5
  25. package/focus/index.js +1 -1
  26. package/header/index.js +2 -2
  27. package/icon/index.js +1 -1
  28. package/index.js +59 -59
  29. package/layout/index.js +1 -1
  30. package/lib/avatar/avatar.d.ts +1 -1
  31. package/lib/calendar/calendar.d.ts +1 -1
  32. package/lib/date-picker/calendar/dateStr.d.ts +1 -0
  33. package/lib/date-picker/calendar/month.d.ts +1 -0
  34. package/lib/date-picker/calendar/year.d.ts +2 -0
  35. package/lib/date-picker/date-picker.d.ts +2 -0
  36. package/lib/icon/icon.d.ts +0 -1
  37. package/lib/listbox/listbox.d.ts +9 -1
  38. package/lib/progress-ring/progress-ring.d.ts +1 -1
  39. package/lib/text-field/text-field.d.ts +1 -0
  40. package/listbox/index.js +20 -16
  41. package/locales/en-GB.js +48 -14
  42. package/locales/en-US.js +48 -14
  43. package/locales/ja-JP.js +48 -14
  44. package/locales/zh-CN.js +48 -14
  45. package/menu/index.js +8 -8
  46. package/menu-item/index.js +4 -4
  47. package/nav/index.js +1 -1
  48. package/nav-disclosure/index.js +3 -3
  49. package/nav-item/index.js +3 -3
  50. package/note/index.js +2 -3
  51. package/number-field/index.js +6 -6
  52. package/option/index.js +3 -3
  53. package/package.json +2 -16
  54. package/pagination/index.js +5 -5
  55. package/popup/index.js +6 -6
  56. package/progress/index.js +1 -1
  57. package/progress-ring/index.js +1 -1
  58. package/radio/index.js +2 -2
  59. package/radio-group/index.js +1 -1
  60. package/select/index.js +8 -8
  61. package/shared/affix.js +25 -9
  62. package/shared/apply-mixins.js +1 -1
  63. package/shared/breadcrumb-item.js +5 -5
  64. package/shared/button.js +13 -13
  65. package/shared/calendar-event.js +36 -16
  66. package/shared/definition.js +133 -194
  67. package/shared/definition10.js +225 -40
  68. package/shared/definition11.js +36 -32
  69. package/shared/definition12.js +763 -98
  70. package/shared/definition13.js +125 -89
  71. package/shared/definition14.js +207 -27
  72. package/shared/definition15.js +710 -731
  73. package/shared/definition16.js +1289 -47
  74. package/shared/definition17.js +6113 -93
  75. package/shared/definition18.js +242 -164
  76. package/shared/definition19.js +47 -692
  77. package/shared/definition2.js +199 -117
  78. package/shared/definition20.js +59 -1671
  79. package/shared/definition21.js +95 -255
  80. package/shared/definition22.js +2218 -1167
  81. package/shared/definition23.js +61 -5784
  82. package/shared/definition24.js +28 -117
  83. package/shared/definition25.js +52 -66
  84. package/shared/definition26.js +391 -214
  85. package/shared/definition27.js +441 -34
  86. package/shared/definition28.js +85 -73
  87. package/shared/definition29.js +21 -2283
  88. package/shared/definition3.js +61 -24
  89. package/shared/definition30.js +13 -49
  90. package/shared/definition31.js +54 -39
  91. package/shared/definition32.js +413 -375
  92. package/shared/definition33.js +223 -304
  93. package/shared/definition34.js +197 -13
  94. package/shared/definition35.js +88 -73
  95. package/shared/definition36.js +75 -25
  96. package/shared/definition37.js +434 -34
  97. package/shared/definition38.js +32 -432
  98. package/shared/definition39.js +677 -187
  99. package/shared/definition4.js +157 -12
  100. package/shared/definition40.js +95 -48
  101. package/shared/definition41.js +577 -31
  102. package/shared/definition42.js +126 -424
  103. package/shared/definition43.js +114 -618
  104. package/shared/definition44.js +24 -80
  105. package/shared/definition45.js +71 -543
  106. package/shared/definition46.js +499 -92
  107. package/shared/definition47.js +19 -133
  108. package/shared/definition48.js +129 -52
  109. package/shared/definition49.js +281 -17
  110. package/shared/definition5.js +71 -36
  111. package/shared/definition50.js +153 -484
  112. package/shared/definition51.js +131 -98
  113. package/shared/definition52.js +131 -16
  114. package/shared/definition53.js +80 -264
  115. package/shared/definition54.js +293 -118
  116. package/shared/definition55.js +12 -117
  117. package/shared/definition56.js +39 -68
  118. package/shared/definition57.js +166 -288
  119. package/shared/definition6.js +56 -111
  120. package/shared/definition7.js +120 -195
  121. package/shared/definition8.js +58 -23
  122. package/shared/definition9.js +92 -66
  123. package/shared/focus.js +2 -1
  124. package/shared/focus2.js +1 -1
  125. package/shared/form-associated.js +2 -2
  126. package/shared/icon.js +48 -27
  127. package/shared/index.js +7 -27
  128. package/shared/index2.js +108 -80
  129. package/shared/key-codes.js +1 -1
  130. package/shared/listbox.js +88 -11
  131. package/shared/patterns/form-elements/form-elements.d.ts +4 -4
  132. package/shared/radio.js +23 -7
  133. package/shared/repeat.js +1 -1
  134. package/shared/text-anchor.js +21 -4
  135. package/shared/text-anchor.template.js +37 -40
  136. package/shared/text-field.js +2 -2
  137. package/shared/text-field2.js +15 -15
  138. package/shared/tree-item.js +12 -12
  139. package/side-drawer/index.js +1 -1
  140. package/slider/index.js +2 -2
  141. package/split-button/index.js +3 -3
  142. package/style.css +6106 -0
  143. package/styles/core/all.css +1 -1
  144. package/styles/core/theme.css +1 -1
  145. package/styles/core/typography.css +1 -1
  146. package/styles/tokens/theme-dark.css +4 -4
  147. package/styles/tokens/theme-light.css +4 -4
  148. package/styles/tokens/vivid-2-compat.css +1 -1
  149. package/switch/index.js +3 -3
  150. package/tab/index.js +3 -3
  151. package/tab-panel/index.js +1 -1
  152. package/tabs/index.js +5 -5
  153. package/tag/index.js +3 -3
  154. package/tag-group/index.js +1 -1
  155. package/text-anchor/index.js +1 -1
  156. package/text-area/index.js +3 -3
  157. package/text-field/index.js +3 -3
  158. package/toggletip/index.js +7 -7
  159. package/tooltip/index.js +7 -7
  160. package/tree-item/index.js +3 -3
  161. package/tree-view/index.js +1 -1
  162. package/vivid.api.json +10 -1
  163. package/lib/accordion/index.d.ts +0 -1
  164. package/lib/accordion-item/index.d.ts +0 -1
  165. package/lib/action-group/index.d.ts +0 -1
  166. package/lib/alert/index.d.ts +0 -1
  167. package/lib/avatar/index.d.ts +0 -1
  168. package/lib/badge/index.d.ts +0 -1
  169. package/lib/banner/index.d.ts +0 -1
  170. package/lib/breadcrumb/index.d.ts +0 -1
  171. package/lib/breadcrumb-item/index.d.ts +0 -1
  172. package/lib/button/index.d.ts +0 -1
  173. package/lib/calendar/index.d.ts +0 -1
  174. package/lib/calendar-event/index.d.ts +0 -1
  175. package/lib/card/index.d.ts +0 -1
  176. package/lib/checkbox/index.d.ts +0 -1
  177. package/lib/combobox/index.d.ts +0 -1
  178. package/lib/data-grid/index.d.ts +0 -1
  179. package/lib/date-picker/index.d.ts +0 -1
  180. package/lib/dialog/index.d.ts +0 -1
  181. package/lib/divider/index.d.ts +0 -1
  182. package/lib/elevation/index.d.ts +0 -1
  183. package/lib/empty-state/index.d.ts +0 -1
  184. package/lib/fab/index.d.ts +0 -1
  185. package/lib/file-picker/index.d.ts +0 -1
  186. package/lib/focus/index.d.ts +0 -1
  187. package/lib/header/index.d.ts +0 -1
  188. package/lib/icon/index.d.ts +0 -1
  189. package/lib/layout/index.d.ts +0 -1
  190. package/lib/listbox/index.d.ts +0 -1
  191. package/lib/menu/index.d.ts +0 -1
  192. package/lib/menu-item/index.d.ts +0 -1
  193. package/lib/nav/index.d.ts +0 -1
  194. package/lib/nav-disclosure/index.d.ts +0 -1
  195. package/lib/nav-item/index.d.ts +0 -1
  196. package/lib/note/index.d.ts +0 -1
  197. package/lib/number-field/index.d.ts +0 -1
  198. package/lib/option/index.d.ts +0 -1
  199. package/lib/pagination/index.d.ts +0 -1
  200. package/lib/popup/index.d.ts +0 -1
  201. package/lib/progress/index.d.ts +0 -1
  202. package/lib/progress-ring/index.d.ts +0 -1
  203. package/lib/radio/index.d.ts +0 -1
  204. package/lib/radio-group/index.d.ts +0 -1
  205. package/lib/select/index.d.ts +0 -1
  206. package/lib/side-drawer/index.d.ts +0 -1
  207. package/lib/slider/index.d.ts +0 -1
  208. package/lib/split-button/index.d.ts +0 -1
  209. package/lib/switch/index.d.ts +0 -1
  210. package/lib/tab/index.d.ts +0 -1
  211. package/lib/tab-panel/index.d.ts +0 -1
  212. package/lib/tabs/index.d.ts +0 -1
  213. package/lib/tag/index.d.ts +0 -1
  214. package/lib/tag-group/index.d.ts +0 -1
  215. package/lib/text-anchor/index.d.ts +0 -1
  216. package/lib/text-area/index.d.ts +0 -1
  217. package/lib/text-field/index.d.ts +0 -1
  218. package/lib/toggletip/index.d.ts +0 -1
  219. package/lib/tooltip/index.d.ts +0 -1
  220. package/lib/tree-item/index.d.ts +0 -1
  221. package/lib/tree-view/index.d.ts +0 -1
@@ -1,87 +1,31 @@
1
- import { F as FoundationElement, d as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
2
- import { w as when } from './when.js';
3
- import { c as classNames } from './class-names.js';
1
+ import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
4
2
 
5
- var _SideDrawer_instances, _SideDrawer_close, _SideDrawer_open;
6
- class SideDrawer extends FoundationElement {
7
- constructor() {
8
- super(...arguments);
9
- _SideDrawer_instances.add(this);
10
- this.alternate = false;
11
- this.modal = false;
12
- this.open = false;
13
- this.trailing = false;
14
- }
15
- attributeChangedCallback(name, oldValue, newValue) {
16
- super.attributeChangedCallback(name, oldValue, newValue);
17
- switch (name) {
18
- case 'open':
19
- {
20
- this.open ? __classPrivateFieldGet(this, _SideDrawer_instances, "m", _SideDrawer_open).call(this) : __classPrivateFieldGet(this, _SideDrawer_instances, "m", _SideDrawer_close).call(this);
21
- }
22
- }
23
- }
24
- }
25
- _SideDrawer_instances = new WeakSet(), _SideDrawer_close = function _SideDrawer_close() {
26
- this.$emit('close', undefined, {
27
- bubbles: false
28
- });
29
- }, _SideDrawer_open = function _SideDrawer_open() {
30
- this.$emit('open', undefined, {
31
- bubbles: false
32
- });
3
+ /**
4
+ * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
5
+ *
6
+ * @slot - The default slot for the tabpanel content
7
+ *
8
+ * @public
9
+ */
10
+ let TabPanel$1 = class TabPanel extends FoundationElement {
33
11
  };
34
- __decorate([attr({
35
- mode: 'boolean'
36
- }), __metadata("design:type", Object)], SideDrawer.prototype, "alternate", void 0);
37
- __decorate([attr({
38
- mode: 'boolean'
39
- }), __metadata("design:type", Object)], SideDrawer.prototype, "modal", void 0);
40
- __decorate([attr({
41
- mode: 'boolean'
42
- }), __metadata("design:type", Object)], SideDrawer.prototype, "open", void 0);
43
- __decorate([attr({
44
- mode: 'boolean'
45
- }), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
46
-
47
- var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 22 Aug 2023 13:37:39 GMT\n */\n.control {\n position: fixed;\n z-index: 1;\n background-color: var(--vvd-color-canvas);\n color: var(--vvd-color-canvas-text);\n inline-size: 280px;\n inset-block: 0;\n overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n background-color: var(--vvd-color-canvas);\n color: var(--vvd-color-canvas-text);\n color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n .control {\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n}\n\n.scrim {\n background-color: var(--vvd-color-canvas-text, currentColor);\n opacity: 0.5;\n position: fixed;\n inset: 0;\n}\n.scrim:not(.open) {\n display: none;\n}";
48
-
49
- const getClasses = ({
50
- modal,
51
- open,
52
- trailing
53
- }) => classNames('control', ['modal', modal], ['open', open], ['trailing', trailing]);
54
- const getScrimClasses = ({
55
- open
56
- }) => classNames('scrim', ['open', open]);
57
- const sideDrawerTemplate = () => html`
58
- <aside class="${getClasses}" part="base ${x => x.alternate ? 'vvd-theme-alternate' : ''}"
59
- @keydown="${(x, c) => handleKeydown(x, c.event)}">
60
- <slot></slot>
61
- </aside>
62
12
 
63
- <div class="side-drawer-app-content" ?inert="${x => x.open && x.modal}">
64
- <slot name="app-content"></slot>
65
- </div>
13
+ class TabPanel extends TabPanel$1 {
14
+ }
66
15
 
67
- ${when(x => x.modal, html`<div class="${getScrimClasses}" @click="${x => x.open = false}"></div>`)}
68
- `;
69
- const handleKeydown = (x, {
70
- key
71
- }) => {
72
- if (key === 'Escape') {
73
- x.open = false;
74
- } else {
75
- return true;
76
- }
77
- };
16
+ function TabPanelTemplate() {
17
+ return html`
18
+ <template slot="tabpanel" role="tabpanel">
19
+ <slot></slot>
20
+ </template>
21
+ `;
22
+ }
78
23
 
79
- const sideDrawerDefinition = SideDrawer.compose({
80
- baseName: 'side-drawer',
81
- template: sideDrawerTemplate,
82
- styles: css_248z
24
+ const tabPanelDefinition = TabPanel.compose({
25
+ baseName: "tab-panel",
26
+ template: TabPanelTemplate
83
27
  });
84
- const sideDrawerRegistries = [sideDrawerDefinition()];
85
- const registerSideDrawer = registerFactory(sideDrawerRegistries);
28
+ const tabPanelRegistries = [tabPanelDefinition()];
29
+ const registerTabPanel = registerFactory(tabPanelRegistries);
86
30
 
87
- export { sideDrawerRegistries as a, registerSideDrawer as r, sideDrawerDefinition as s };
31
+ export { tabPanelRegistries as a, registerTabPanel as r, tabPanelDefinition as t };