@vonage/vivid 3.8.0 → 3.10.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 (124) hide show
  1. package/alert/index.js +28 -0
  2. package/avatar/index.js +1 -1
  3. package/badge/index.js +1 -1
  4. package/banner/index.js +3 -3
  5. package/breadcrumb/index.js +1 -1
  6. package/breadcrumb-item/index.js +1 -1
  7. package/button/index.js +2 -2
  8. package/calendar/index.js +1 -1
  9. package/calendar-event/index.js +1 -1
  10. package/card/index.js +2 -2
  11. package/checkbox/index.js +1 -1
  12. package/combobox/index.js +6 -6
  13. package/custom-elements.json +269 -27
  14. package/data-grid/index.js +1 -1
  15. package/dialog/index.js +4 -4
  16. package/divider/index.js +1 -1
  17. package/elevation/index.js +1 -1
  18. package/fab/index.js +1 -1
  19. package/header/index.js +2 -2
  20. package/index.js +51 -50
  21. package/layout/index.js +1 -1
  22. package/lib/alert/alert.d.ts +24 -0
  23. package/lib/alert/alert.template.d.ts +4 -0
  24. package/lib/alert/definition.d.ts +2 -0
  25. package/lib/alert/index.d.ts +1 -0
  26. package/lib/components.d.ts +1 -0
  27. package/lib/text-area/text-area.d.ts +2 -1
  28. package/lib/text-field/text-field.d.ts +2 -1
  29. package/lib/tooltip/tooltip.d.ts +1 -0
  30. package/listbox/index.js +2 -2
  31. package/menu/index.js +6 -6
  32. package/menu-item/index.js +1 -1
  33. package/nav/index.js +1 -1
  34. package/nav-disclosure/index.js +1 -1
  35. package/nav-item/index.js +1 -1
  36. package/note/index.js +1 -1
  37. package/number-field/index.js +4 -4
  38. package/option/index.js +1 -1
  39. package/package.json +1 -1
  40. package/popup/index.js +4 -4
  41. package/progress/index.js +1 -1
  42. package/progress-ring/index.js +1 -1
  43. package/radio/index.js +1 -1
  44. package/radio-group/index.js +1 -1
  45. package/select/index.js +6 -6
  46. package/shared/definition.js +1 -1
  47. package/shared/definition10.js +46 -63
  48. package/shared/definition11.js +38 -92
  49. package/shared/definition12.js +96 -31
  50. package/shared/definition13.js +84 -757
  51. package/shared/definition14.js +32 -95
  52. package/shared/definition15.js +758 -100
  53. package/shared/definition16.js +103 -24
  54. package/shared/definition17.js +96 -154
  55. package/shared/definition18.js +108 -663
  56. package/shared/definition19.js +667 -1532
  57. package/shared/definition2.js +1 -1
  58. package/shared/definition20.js +1544 -223
  59. package/shared/definition21.js +183 -964
  60. package/shared/definition22.js +1037 -222
  61. package/shared/definition23.js +226 -67
  62. package/shared/definition24.js +68 -77
  63. package/shared/definition25.js +76 -47
  64. package/shared/definition26.js +46 -32
  65. package/shared/definition27.js +35 -49
  66. package/shared/definition28.js +48 -344
  67. package/shared/definition29.js +273 -282
  68. package/shared/definition30.js +356 -14
  69. package/shared/definition31.js +13 -67
  70. package/shared/definition32.js +65 -21
  71. package/shared/definition33.js +21 -39
  72. package/shared/definition34.js +31 -432
  73. package/shared/definition35.js +432 -76
  74. package/shared/definition36.js +82 -33
  75. package/shared/definition37.js +31 -422
  76. package/shared/definition38.js +357 -568
  77. package/shared/definition39.js +628 -75
  78. package/shared/definition4.js +1 -1
  79. package/shared/definition40.js +70 -573
  80. package/shared/definition41.js +538 -81
  81. package/shared/definition42.js +127 -47
  82. package/shared/definition43.js +51 -16
  83. package/shared/definition44.js +17 -425
  84. package/shared/definition45.js +421 -103
  85. package/shared/definition46.js +114 -19
  86. package/shared/definition47.js +19 -269
  87. package/shared/definition48.js +245 -87
  88. package/shared/definition49.js +110 -68
  89. package/shared/definition5.js +1 -1
  90. package/shared/definition50.js +80 -67
  91. package/shared/definition51.js +69 -295
  92. package/shared/definition52.js +305 -0
  93. package/shared/definition6.js +142 -45
  94. package/shared/definition7.js +95 -23
  95. package/shared/definition8.js +22 -103
  96. package/shared/definition9.js +62 -102
  97. package/shared/es.object.assign.js +1 -1
  98. package/shared/form-associated.js +1 -1
  99. package/shared/form-elements.js +46 -7
  100. package/shared/index.js +1 -1
  101. package/shared/listbox.js +2 -2
  102. package/shared/patterns/form-elements/form-elements.d.ts +16 -2
  103. package/shared/repeat.js +1 -1
  104. package/shared/text-field.js +1 -1
  105. package/shared/text-field2.js +1 -1
  106. package/side-drawer/index.js +1 -1
  107. package/slider/index.js +1 -1
  108. package/styles/core/all.css +1 -1
  109. package/styles/core/theme.css +1 -1
  110. package/styles/core/typography.css +1 -1
  111. package/styles/tokens/theme-dark.css +4 -4
  112. package/styles/tokens/theme-light.css +4 -4
  113. package/switch/index.js +1 -1
  114. package/tab/index.js +1 -1
  115. package/tab-panel/index.js +1 -1
  116. package/tabs/index.js +3 -3
  117. package/tag/index.js +1 -1
  118. package/tag-group/index.js +1 -1
  119. package/text-area/index.js +1 -1
  120. package/text-field/index.js +1 -1
  121. package/tooltip/index.js +5 -5
  122. package/tree-item/index.js +1 -1
  123. package/tree-view/index.js +1 -1
  124. package/vivid.api.json +91 -0
@@ -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 Tue, 18 Apr 2023 16:20:35 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 Thu, 27 Apr 2023 09:20:45 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 };