@vonage/vivid 3.5.0 → 3.7.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.
- package/README.md +31 -14
- package/banner/index.js +2 -0
- package/breadcrumb/index.js +1 -1
- package/breadcrumb-item/index.js +1 -1
- package/button/index.js +2 -0
- package/calendar/index.js +1 -1
- package/calendar-event/index.js +1 -1
- package/card/index.js +2 -2
- package/checkbox/index.js +1 -1
- package/combobox/index.js +6 -4
- package/custom-elements.json +302 -0
- package/data-grid/index.js +1 -1
- package/dialog/index.js +4 -2
- package/divider/index.js +1 -1
- package/elevation/index.js +1 -1
- package/fab/index.js +1 -1
- package/header/index.js +2 -2
- package/index.js +26 -26
- package/layout/index.js +1 -1
- package/lib/accordion-item/accordion-item.d.ts +3 -0
- package/lib/action-group/action-group.d.ts +2 -0
- package/lib/button/button.d.ts +1 -0
- package/lib/button/button.template.d.ts +1 -1
- package/lib/select/select.d.ts +2 -3
- package/listbox/index.js +2 -2
- package/menu/index.js +6 -4
- package/menu-item/index.js +1 -1
- package/nav/index.js +1 -1
- package/nav-disclosure/index.js +1 -1
- package/nav-item/index.js +1 -1
- package/note/index.js +1 -1
- package/number-field/index.js +4 -2
- package/option/index.js +1 -1
- package/package.json +1 -1
- package/popup/index.js +4 -2
- package/progress/index.js +1 -1
- package/progress-ring/index.js +1 -1
- package/select/index.js +5 -3
- package/shared/definition.js +1 -1
- package/shared/definition10.js +69 -91
- package/shared/definition11.js +91 -40
- package/shared/definition12.js +31 -755
- package/shared/definition13.js +754 -93
- package/shared/definition14.js +100 -103
- package/shared/definition15.js +106 -24
- package/shared/definition16.js +24 -164
- package/shared/definition17.js +108 -663
- package/shared/definition18.js +667 -1533
- package/shared/definition19.js +1545 -223
- package/shared/definition2.js +8 -7
- package/shared/definition20.js +183 -964
- package/shared/definition21.js +1037 -222
- package/shared/definition22.js +226 -67
- package/shared/definition23.js +68 -77
- package/shared/definition24.js +76 -47
- package/shared/definition25.js +46 -32
- package/shared/definition26.js +35 -49
- package/shared/definition27.js +48 -344
- package/shared/definition28.js +273 -282
- package/shared/definition29.js +356 -14
- package/shared/definition30.js +13 -67
- package/shared/definition31.js +65 -21
- package/shared/definition32.js +21 -39
- package/shared/definition33.js +31 -432
- package/shared/definition34.js +432 -76
- package/shared/definition35.js +76 -59
- package/shared/definition36.js +3 -3
- package/shared/definition37.js +1 -1
- package/shared/definition38.js +7 -6
- package/shared/definition39.js +1 -1
- package/shared/definition4.js +1 -1
- package/shared/definition41.js +1 -1
- package/shared/definition42.js +1 -1
- package/shared/definition44.js +1 -1
- package/shared/definition45.js +1 -1
- package/shared/definition47.js +2 -2
- package/shared/definition48.js +1 -1
- package/shared/definition5.js +10 -3
- package/shared/definition6.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.js +1 -1
- package/shared/definition9.js +14 -4
- package/shared/form-elements.js +1 -1
- package/shared/icon.js +1 -1
- package/shared/listbox.js +1 -1
- package/shared/patterns/form-elements/form-elements.d.ts +2 -2
- package/shared/text-field.js +1 -1
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +4 -4
- package/styles/tokens/theme-light.css +4 -4
- package/tooltip/index.js +4 -2
package/shared/definition2.js
CHANGED
|
@@ -76,7 +76,7 @@ __decorate([
|
|
|
76
76
|
], AccordionItem$1.prototype, "id", void 0);
|
|
77
77
|
applyMixins(AccordionItem$1, StartEnd);
|
|
78
78
|
|
|
79
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon,
|
|
79
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 03 Apr 2023 14:02:24 GMT\n */\n:host {\n display: flex;\n box-sizing: border-box;\n flex-direction: column;\n}\n\n.heading-container {\n margin: 0;\n}\n\n.heading-button {\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n padding: 16px;\n border: none;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n cursor: pointer;\n text-align: left;\n}\n.heading-button {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.heading-button:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.heading-button:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transparent;\n}\n.heading-button {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports selector(:focus-visible) {\n .heading-button:focus {\n outline: none;\n }\n}\n.heading-button.size-condensed {\n font: var(--vvd-typography-base-bold);\n gap: 12px;\n}\n.heading-button:not(.size-condensed) {\n font: var(--vvd-typography-heading-4);\n gap: 16px;\n}\n\n.heading-content {\n flex: auto;\n}\n\n.meta {\n overflow: hidden;\n max-width: 20%;\n flex-shrink: 0;\n color: var(--vvd-color-neutral-600);\n text-align: end;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.heading-button:not(.size-condensed) .meta {\n font: var(--vvd-typography-base-bold);\n}\n.heading-button.size-condensed .meta {\n font: var(--vvd-typography-base-condensed-bold);\n}\n\n.region {\n display: none;\n padding: 8px 32px 24px 16px;\n}\n:host([expanded]) .region {\n display: block;\n}\n.region:not(.size-condensed).padded {\n padding-inline-start: 52px;\n}\n.region.size-condensed.padded {\n padding-inline-start: 44px;\n}\n\n.icon {\n color: var(--vvd-color-neutral-600);\n}\n:host(:not([icon-trailing])) .icon:last-of-type {\n color: var(--_appearance-color-text);\n}\n.heading-button:not(.size-condensed) .icon {\n font: inherit;\n}\n.heading-button.size-condensed .icon {\n font: var(--vvd-typography-base-extended);\n}\n\nbutton:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
|
|
80
80
|
|
|
81
81
|
class AccordionItem extends AccordionItem$1 {
|
|
82
82
|
constructor() {
|
|
@@ -90,6 +90,7 @@ __decorate([attr({
|
|
|
90
90
|
attribute: 'no-indicator'
|
|
91
91
|
}), __metadata("design:type", Object)], AccordionItem.prototype, "noIndicator", void 0);
|
|
92
92
|
__decorate([attr, __metadata("design:type", String)], AccordionItem.prototype, "meta", void 0);
|
|
93
|
+
__decorate([attr, __metadata("design:type", String)], AccordionItem.prototype, "size", void 0);
|
|
93
94
|
applyMixins(AccordionItem, AffixIconWithTrailing);
|
|
94
95
|
|
|
95
96
|
let _ = t => t,
|
|
@@ -102,7 +103,7 @@ const header = (context, hTag) => {
|
|
|
102
103
|
return html(_t || (_t = _`
|
|
103
104
|
<${0} class="heading-container">
|
|
104
105
|
<button
|
|
105
|
-
class="heading-button"
|
|
106
|
+
class="heading-button ${0}"
|
|
106
107
|
id="${0}"
|
|
107
108
|
aria-expanded="${0}"
|
|
108
109
|
aria-controls="${0}-panel"
|
|
@@ -112,17 +113,17 @@ const header = (context, hTag) => {
|
|
|
112
113
|
${0}
|
|
113
114
|
|
|
114
115
|
${0}
|
|
115
|
-
|
|
116
|
+
|
|
116
117
|
<span class="heading-content">${0}</span>
|
|
117
118
|
|
|
118
119
|
${0}
|
|
119
120
|
|
|
120
121
|
${0}
|
|
121
122
|
${0}
|
|
122
|
-
|
|
123
|
+
|
|
123
124
|
</button>
|
|
124
125
|
</${0}>
|
|
125
|
-
`), hTag, x => x.id, x => x.expanded, x => x.id, (x, c) => x.clickHandler(c.event), ref('expandbutton'), () => focusTemplate, x => x.icon && !x.iconTrailing ? affixIconTemplate(x.icon) : null, x => x.heading, when(x => x.meta, html(_t2 || (_t2 = _`<span class="meta">${0}</span>`), x => x.meta)), x => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null, x => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(x.expanded ? 'chevron-up-solid' : 'chevron-down-solid') : null, hTag);
|
|
126
|
+
`), hTag, x => x.size ? `size-${x.size}` : '', x => x.id, x => x.expanded, x => x.id, (x, c) => x.clickHandler(c.event), ref('expandbutton'), () => focusTemplate, x => x.icon && !x.iconTrailing ? affixIconTemplate(x.icon) : null, x => x.heading, when(x => x.meta, html(_t2 || (_t2 = _`<span class="meta">${0}</span>`), x => x.meta)), x => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null, x => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(x.expanded ? 'chevron-up-solid' : 'chevron-down-solid') : null, hTag);
|
|
126
127
|
};
|
|
127
128
|
const AccordionItemTemplate = context => html(_t3 || (_t3 = _`
|
|
128
129
|
${0}
|
|
@@ -130,11 +131,11 @@ const AccordionItemTemplate = context => html(_t3 || (_t3 = _`
|
|
|
130
131
|
id="${0}-panel"
|
|
131
132
|
aria-labelledby="${0}"
|
|
132
133
|
role="region"
|
|
133
|
-
class="region ${0}"
|
|
134
|
+
class="region ${0} ${0}"
|
|
134
135
|
>
|
|
135
136
|
<slot></slot>
|
|
136
137
|
</div>
|
|
137
|
-
`), x => header(context, 'h' + x.headinglevel), x => x.id, x => x.id, x => x.icon && !x.iconTrailing ? 'padded' : '');
|
|
138
|
+
`), x => header(context, 'h' + x.headinglevel), x => x.id, x => x.id, x => x.icon && !x.iconTrailing ? 'padded' : '', x => x.size ? `size-${x.size}` : '');
|
|
138
139
|
|
|
139
140
|
const accordionItemDefinition = AccordionItem.compose({
|
|
140
141
|
baseName: 'accordion-item',
|