@vonage/vivid 3.9.0 → 3.11.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 (136) hide show
  1. package/accordion/index.js +1 -0
  2. package/alert/index.js +28 -0
  3. package/avatar/index.js +1 -1
  4. package/badge/index.js +1 -1
  5. package/banner/index.js +3 -3
  6. package/breadcrumb/index.js +2 -1
  7. package/breadcrumb-item/index.js +1 -1
  8. package/button/index.js +2 -2
  9. package/calendar/index.js +1 -1
  10. package/calendar-event/index.js +1 -1
  11. package/card/index.js +3 -2
  12. package/checkbox/index.js +1 -1
  13. package/combobox/index.js +7 -6
  14. package/custom-elements.json +589 -377
  15. package/data-grid/index.js +3 -2
  16. package/dialog/index.js +5 -4
  17. package/divider/index.js +1 -1
  18. package/elevation/index.js +1 -1
  19. package/fab/index.js +1 -1
  20. package/header/index.js +2 -2
  21. package/index.js +54 -52
  22. package/layout/index.js +1 -1
  23. package/lib/alert/alert.d.ts +24 -0
  24. package/lib/alert/alert.template.d.ts +4 -0
  25. package/lib/alert/definition.d.ts +2 -0
  26. package/lib/alert/index.d.ts +1 -0
  27. package/lib/components.d.ts +1 -0
  28. package/lib/enums.d.ts +10 -9
  29. package/lib/layout/layout.d.ts +2 -0
  30. package/lib/pagination/definition.d.ts +3 -0
  31. package/lib/pagination/index.d.ts +1 -0
  32. package/lib/pagination/pagination.d.ts +18 -0
  33. package/lib/pagination/pagination.template.d.ts +4 -0
  34. package/lib/popup/popup.d.ts +2 -2
  35. package/lib/text-area/text-area.d.ts +2 -1
  36. package/lib/tooltip/tooltip.d.ts +10 -4
  37. package/listbox/index.js +3 -2
  38. package/menu/index.js +7 -6
  39. package/menu-item/index.js +1 -1
  40. package/nav/index.js +1 -1
  41. package/nav-disclosure/index.js +1 -1
  42. package/nav-item/index.js +1 -1
  43. package/note/index.js +1 -1
  44. package/number-field/index.js +4 -4
  45. package/option/index.js +1 -1
  46. package/package.json +1 -1
  47. package/pagination/index.js +329 -0
  48. package/popup/index.js +4 -4
  49. package/progress/index.js +1 -1
  50. package/progress-ring/index.js +1 -1
  51. package/radio/index.js +1 -1
  52. package/radio-group/index.js +3 -2
  53. package/select/index.js +7 -6
  54. package/shared/children.js +1 -1
  55. package/shared/definition.js +3 -2
  56. package/shared/definition10.js +46 -63
  57. package/shared/definition11.js +38 -92
  58. package/shared/definition12.js +96 -31
  59. package/shared/definition13.js +85 -757
  60. package/shared/definition14.js +32 -95
  61. package/shared/definition15.js +758 -100
  62. package/shared/definition16.js +103 -24
  63. package/shared/definition17.js +96 -154
  64. package/shared/definition18.js +108 -663
  65. package/shared/definition19.js +667 -1532
  66. package/shared/definition2.js +1 -1
  67. package/shared/definition20.js +1532 -223
  68. package/shared/definition21.js +183 -964
  69. package/shared/definition22.js +1034 -218
  70. package/shared/definition23.js +226 -67
  71. package/shared/definition24.js +68 -77
  72. package/shared/definition25.js +76 -47
  73. package/shared/definition26.js +46 -32
  74. package/shared/definition27.js +39 -49
  75. package/shared/definition28.js +48 -344
  76. package/shared/definition29.js +273 -282
  77. package/shared/definition30.js +356 -14
  78. package/shared/definition31.js +13 -67
  79. package/shared/definition32.js +65 -21
  80. package/shared/definition33.js +21 -39
  81. package/shared/definition34.js +31 -432
  82. package/shared/definition35.js +432 -76
  83. package/shared/definition36.js +82 -33
  84. package/shared/definition37.js +31 -422
  85. package/shared/definition38.js +358 -564
  86. package/shared/definition39.js +628 -75
  87. package/shared/definition4.js +1 -1
  88. package/shared/definition40.js +70 -573
  89. package/shared/definition41.js +538 -81
  90. package/shared/definition42.js +127 -47
  91. package/shared/definition43.js +51 -16
  92. package/shared/definition44.js +17 -425
  93. package/shared/definition45.js +421 -103
  94. package/shared/definition46.js +114 -19
  95. package/shared/definition47.js +19 -269
  96. package/shared/definition48.js +244 -86
  97. package/shared/definition49.js +110 -70
  98. package/shared/definition5.js +1 -1
  99. package/shared/definition50.js +88 -67
  100. package/shared/definition51.js +69 -294
  101. package/shared/definition52.js +305 -0
  102. package/shared/definition6.js +142 -45
  103. package/shared/definition7.js +97 -24
  104. package/shared/definition8.js +22 -103
  105. package/shared/definition9.js +62 -102
  106. package/shared/enums.js +10 -9
  107. package/shared/es.object.assign.js +1 -1
  108. package/shared/form-associated.js +1 -1
  109. package/shared/form-elements.js +2 -2
  110. package/shared/index.js +1 -1
  111. package/shared/listbox.js +2 -2
  112. package/shared/node-observation.js +74 -0
  113. package/shared/patterns/form-elements/form-elements.d.ts +4 -4
  114. package/shared/repeat.js +1 -1
  115. package/shared/slotted.js +3 -73
  116. package/shared/text-field.js +1 -1
  117. package/shared/text-field2.js +1 -1
  118. package/side-drawer/index.js +1 -1
  119. package/slider/index.js +1 -1
  120. package/styles/core/all.css +1 -1
  121. package/styles/core/theme.css +1 -1
  122. package/styles/core/typography.css +1 -1
  123. package/styles/tokens/theme-dark.css +4 -4
  124. package/styles/tokens/theme-light.css +4 -4
  125. package/switch/index.js +1 -1
  126. package/tab/index.js +1 -1
  127. package/tab-panel/index.js +1 -1
  128. package/tabs/index.js +4 -3
  129. package/tag/index.js +1 -1
  130. package/tag-group/index.js +1 -1
  131. package/text-area/index.js +1 -1
  132. package/text-field/index.js +1 -1
  133. package/tooltip/index.js +5 -5
  134. package/tree-item/index.js +2 -1
  135. package/tree-view/index.js +2 -1
  136. package/vivid.api.json +128 -16
@@ -1,111 +1,48 @@
1
- import { G as _export, i as descriptors, g as global$1, k as functionUncurryThis, B as hasOwnProperty_1, m as isCallable$1, f as objectDefineProperty, a4 as copyConstructorProperties$1, j as objectIsPrototypeOf, h as html, r as registerFactory } from './index.js';
2
- import { C as CalendarEvent } from './calendar-event.js';
3
- import './es.object.assign.js';
4
- import { t as toString$1 } from './to-string.js';
1
+ import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
2
+ import { i as iconRegistries } from './definition3.js';
3
+ import { f as focusRegistries } from './definition4.js';
4
+ import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
5
+ import { t as textAnchorTemplate } from './text-anchor.template.js';
6
+ import { I as Icon } from './icon.js';
5
7
  import { w as when } from './when.js';
6
8
  import { c as classNames } from './class-names.js';
7
9
 
8
- var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 24 Apr 2023 10:27:51 GMT\n */\n:host {\n display: contents;\n}\n\n.base {\n /* 4 as the indentation limit */\n /* per cell divider */\n /* per cell divider */\n --vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);\n position: absolute;\n z-index: var(--vvd-calendar-event--overlap-count);\n top: calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));\n overflow: hidden;\n box-sizing: border-box;\n padding: 4px 8px;\n background-color: var(--_appearance-color-fill);\n block-size: calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);\n border-radius: 6px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n inline-size: calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));\n margin-block-start: 2px;\n margin-inline-end: 8px;\n margin-inline-start: min(var(--vvd-calendar-event--indent), 32px);\n max-block-size: calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px);\n}\n.base.connotation-accent {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-neutral-800);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n.base.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-cta-800);\n --_connotation-color-soft: var(--vvd-color-cta-100);\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-success-800);\n --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-alert-800);\n --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base.connotation-warning {\n --_connotation-color-primary: var(--vvd-color-warning-300);\n --_connotation-color-primary-text: var(--vvd-color-canvas-text);\n --_connotation-color-contrast: var(--vvd-color-warning-800);\n --_connotation-color-soft: var(--vvd-color-warning-100);\n}\n.base.connotation-announcement {\n --_connotation-color-primary: var(--vvd-color-announcement-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-announcement-800);\n --_connotation-color-soft: var(--vvd-color-announcement-100);\n}\n.base:not(.connotation-accent, .connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-announcement) {\n --_connotation-color-primary: var(--vvd-color-information-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-information-800);\n --_connotation-color-soft: var(--vvd-color-information-100);\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.base.appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n@supports (contain: content) {\n .base {\n contain: strict;\n }\n}\n@supports not (contain: content) {\n .base {\n overflow: hidden;\n }\n}\n.base:focus {\n z-index: 2000;\n filter: var(--vvd-shadow-surface-8dp);\n outline: none;\n}\n\nh2 {\n margin: 0;\n font: var(--vvd-typography-base-condensed-bold);\n}\nh2 > strong {\n font: inherit;\n}\n\np {\n margin: 0;\n font: var(--vvd-typography-base-condensed);\n}";
10
+ var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 08 May 2023 11:40:49 GMT\n */\n.base {\n display: flex;\n align-items: center;\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base);\n}\n.base .separator {\n margin: 0 16px;\n color: var(--vvd-color-neutral-600);\n font-size: 12px;\n}\n\n.control {\n position: relative;\n font: inherit;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control:any-link {\n color: var(--vvd-color-cta-600);\n text-decoration: none;\n}\n.control:any-link:hover {\n text-decoration: underline;\n}\n\n.focus-indicator {\n --focus-inset: -4px -8px;\n --focus-stroke-gap-color: transparent;\n border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
9
11
 
10
- var $ = _export;
11
- var DESCRIPTORS = descriptors;
12
- var global = global$1;
13
- var uncurryThis = functionUncurryThis;
14
- var hasOwn = hasOwnProperty_1;
15
- var isCallable = isCallable$1;
16
- var isPrototypeOf = objectIsPrototypeOf;
17
- var toString = toString$1;
18
- var defineProperty = objectDefineProperty.f;
19
- var copyConstructorProperties = copyConstructorProperties$1;
20
-
21
- var NativeSymbol = global.Symbol;
22
- var SymbolPrototype = NativeSymbol && NativeSymbol.prototype;
23
-
24
- if (DESCRIPTORS && isCallable(NativeSymbol) && (!('description' in SymbolPrototype) ||
25
- // Safari 12 bug
26
- NativeSymbol().description !== undefined
27
- )) {
28
- var EmptyStringDescriptionStore = {};
29
- // wrap Symbol constructor for correct work with undefined description
30
- var SymbolWrapper = function Symbol() {
31
- var description = arguments.length < 1 || arguments[0] === undefined ? undefined : toString(arguments[0]);
32
- var result = isPrototypeOf(SymbolPrototype, this)
33
- ? new NativeSymbol(description)
34
- // in Edge 13, String(Symbol(undefined)) === 'Symbol(undefined)'
35
- : description === undefined ? NativeSymbol() : NativeSymbol(description);
36
- if (description === '') EmptyStringDescriptionStore[result] = true;
37
- return result;
38
- };
39
-
40
- copyConstructorProperties(SymbolWrapper, NativeSymbol);
41
- SymbolWrapper.prototype = SymbolPrototype;
42
- SymbolPrototype.constructor = SymbolWrapper;
43
-
44
- var NATIVE_SYMBOL = String(NativeSymbol('test')) == 'Symbol(test)';
45
- var thisSymbolValue = uncurryThis(SymbolPrototype.valueOf);
46
- var symbolDescriptiveString = uncurryThis(SymbolPrototype.toString);
47
- var regexp = /^Symbol\((.*)\)[^)]+$/;
48
- var replace = uncurryThis(''.replace);
49
- var stringSlice = uncurryThis(''.slice);
50
-
51
- defineProperty(SymbolPrototype, 'description', {
52
- configurable: true,
53
- get: function description() {
54
- var symbol = thisSymbolValue(this);
55
- if (hasOwn(EmptyStringDescriptionStore, symbol)) return '';
56
- var string = symbolDescriptiveString(symbol);
57
- var desc = NATIVE_SYMBOL ? stringSlice(string, 7, -1) : replace(string, regexp, '$1');
58
- return desc === '' ? undefined : desc;
59
- }
60
- });
61
-
62
- $({ global: true, constructor: true, forced: true }, {
63
- Symbol: SymbolWrapper
64
- });
12
+ class BreadcrumbItem extends BreadcrumbItem$1 {
13
+ constructor() {
14
+ super();
15
+ }
65
16
  }
17
+ __decorate([attr, __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
66
18
 
67
- let _ = t => t,
19
+ let _2 = t => t,
68
20
  _t,
69
21
  _t2,
70
- _t3;
71
- const getClasses = ({
72
- connotation,
73
- appearance
74
- }) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)]);
75
- const getStyles = ({
76
- start,
77
- duration,
78
- overlapCount
79
- }) => {
80
- const stylesObj = Object.assign(Object.assign(Object.assign({}, overlapCount && {
81
- '--vvd-calendar-event--overlap-count': overlapCount
82
- }), start && {
83
- '--vvd-calendar-event--start': start
84
- }), duration && {
85
- '--vvd-calendar-event--duration': duration
86
- });
87
- return Object.entries(stylesObj).map(entry => entry.join(':')).join(';');
22
+ _t3,
23
+ _t4;
24
+ const getClasses = _ => classNames('base');
25
+ const BreadcrumbItemTemplate = (context, definition) => {
26
+ const iconTag = context.tagFor(Icon);
27
+ return html(_t || (_t = _2`
28
+ <div role="listitem" class="${0}">
29
+ ${0}
30
+
31
+ ${0}
32
+
33
+ ${0}
34
+ </div>`), getClasses, when(x => x.text && !x.href, html(_t2 || (_t2 = _2`${0}`), x => x.text)), when(x => x.text && x.href && x.href.length > 0, html(_t3 || (_t3 = _2`${0}`), textAnchorTemplate(context))), when(x => x.separator, html(_t4 || (_t4 = _2`<${0} class="separator" name="chevron-right-solid"></${0}>`), iconTag, iconTag)));
88
35
  };
89
- const CalendarEventTemplate = () => html(_t || (_t = _`
90
- <div
91
- style="${0}"
92
- class="${0}"
93
- role="button"
94
- tabindex="0"
95
- >
96
- ${0}
97
- ${0}
98
- </div>`), getStyles, getClasses, when(x => x.heading, html(_t2 || (_t2 = _`<h2><strong>${0}</strong></h2>`), x => x.heading)), when(x => x.description, html(_t3 || (_t3 = _`<p>${0}</p>`), x => x.description)));
99
36
 
100
- const calendarEventDefinition = CalendarEvent.compose({
101
- baseName: 'calendar-event',
102
- template: CalendarEventTemplate,
37
+ const breadcrumbItemDefinition = BreadcrumbItem.compose({
38
+ baseName: 'breadcrumb-item',
39
+ template: BreadcrumbItemTemplate,
103
40
  styles: css_248z,
104
41
  shadowOptions: {
105
42
  delegatesFocus: true
106
43
  }
107
44
  });
108
- const calendarEventRegistries = [calendarEventDefinition()];
109
- const registerCalendarEvent = registerFactory(calendarEventRegistries);
45
+ const breadcrumbItemRegistries = [breadcrumbItemDefinition(), ...iconRegistries, ...focusRegistries];
46
+ const registerBreadcrumbItem = registerFactory(breadcrumbItemRegistries);
110
47
 
111
- export { calendarEventRegistries as a, calendarEventDefinition as c, registerCalendarEvent as r };
48
+ export { breadcrumbItemRegistries as a, breadcrumbItemDefinition as b, registerBreadcrumbItem as r };