@vonage/vivid 3.0.0-next.121 → 3.0.0-next.123
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/header/index.js +4 -56
- package/index.js +21 -20
- package/layout/index.js +1 -1
- package/lib/components.d.ts +1 -0
- package/listbox/index.js +2 -2
- package/menu/index.js +3 -3
- 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 +1 -1
- package/option/index.js +1 -1
- package/package.json +1 -43
- package/popup/index.js +1 -1
- package/progress/index.js +1 -1
- package/progress-ring/index.js +1 -1
- package/radio/index.js +1 -1
- package/radio-group/index.js +1 -1
- package/shared/definition.js +1 -1
- package/shared/definition11.js +1 -1
- package/shared/definition12.js +1 -1
- package/shared/definition13.js +1 -1
- package/shared/definition14.js +1 -1
- package/shared/definition16.js +1 -1
- package/shared/definition17.js +1 -1
- package/shared/definition18.js +1 -1
- package/shared/definition19.js +1 -1
- package/shared/definition2.js +1 -1
- package/shared/definition20.js +46 -32
- package/shared/definition21.js +35 -1069
- package/shared/definition22.js +978 -161
- package/shared/definition23.js +211 -298
- package/shared/definition24.js +310 -1491
- package/shared/definition25.js +1492 -314
- package/shared/definition26.js +346 -13
- package/shared/definition27.js +12 -69
- package/shared/definition28.js +65 -21
- package/shared/definition29.js +20 -45
- package/shared/definition30.js +40 -78
- package/shared/definition31.js +76 -59
- package/shared/definition32.js +67 -35
- package/shared/definition33.js +31 -421
- package/shared/definition34.js +418 -69
- package/shared/definition35.js +66 -572
- package/shared/definition36.js +526 -81
- package/shared/definition37.js +85 -217
- package/shared/definition38.js +245 -85
- package/shared/definition39.js +109 -67
- package/shared/definition4.js +1 -1
- package/shared/definition40.js +77 -0
- package/shared/definition5.js +1 -1
- package/shared/definition6.js +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.js +1 -1
- package/shared/definition9.js +1 -1
- package/shared/form-elements.js +1 -1
- package/shared/patterns/form-elements/form-elements.d.ts +2 -2
- package/side-drawer/index.js +1 -1
- package/slider/index.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/switch/index.js +1 -1
- package/text-area/index.js +1 -1
- package/text-field/index.js +1 -1
- package/tooltip/index.js +2 -2
- package/vivid.api.json +105 -0
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { _ as __decorate, a as attr, b as __metadata, Q as __classPrivateFieldGet, h as html, r as registerFactory } from './index.js';
|
|
2
|
+
import { P as Popup, p as popupRegistries } from './definition25.js';
|
|
3
|
+
import { c as classNames } from './class-names.js';
|
|
4
|
+
|
|
5
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 21 Dec 2022 15:16:28 GMT\n */\n.control {\n pointer-events: none;\n}\n\n.tooltip {\n width: var(--tooltip-inline-size, 240px);\n}\n.tooltip-text {\n padding: 8px 12px;\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-typography-base-bold);\n}";
|
|
6
|
+
|
|
7
|
+
var _Tooltip_instances, _Tooltip_anchorUpdated, _Tooltip_addEventListener, _Tooltip_removeEventListener, _Tooltip_show, _Tooltip_hide;
|
|
8
|
+
class Tooltip extends Popup {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments);
|
|
11
|
+
_Tooltip_instances.add(this);
|
|
12
|
+
_Tooltip_show.set(this, () => {
|
|
13
|
+
this.open = true;
|
|
14
|
+
});
|
|
15
|
+
_Tooltip_hide.set(this, () => {
|
|
16
|
+
this.open = false;
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
connectedCallback() {
|
|
20
|
+
super.connectedCallback();
|
|
21
|
+
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_anchorUpdated).call(this);
|
|
22
|
+
}
|
|
23
|
+
disconnectedCallback() {
|
|
24
|
+
super.disconnectedCallback();
|
|
25
|
+
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListener).call(this);
|
|
26
|
+
}
|
|
27
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
28
|
+
super.attributeChangedCallback(name, oldValue, newValue);
|
|
29
|
+
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_anchorUpdated).call(this);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
_Tooltip_show = new WeakMap(), _Tooltip_hide = new WeakMap(), _Tooltip_instances = new WeakSet(), _Tooltip_anchorUpdated = function _Tooltip_anchorUpdated() {
|
|
33
|
+
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_removeEventListener).call(this);
|
|
34
|
+
__classPrivateFieldGet(this, _Tooltip_instances, "m", _Tooltip_addEventListener).call(this);
|
|
35
|
+
}, _Tooltip_addEventListener = function _Tooltip_addEventListener() {
|
|
36
|
+
var _a, _b, _c, _d;
|
|
37
|
+
(_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseover', __classPrivateFieldGet(this, _Tooltip_show, "f"));
|
|
38
|
+
(_b = this.anchorEl) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
|
|
39
|
+
(_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.addEventListener('focusin', __classPrivateFieldGet(this, _Tooltip_show, "f"));
|
|
40
|
+
(_d = this.anchorEl) === null || _d === void 0 ? void 0 : _d.addEventListener('focusout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
|
|
41
|
+
}, _Tooltip_removeEventListener = function _Tooltip_removeEventListener() {
|
|
42
|
+
var _a, _b, _c, _d;
|
|
43
|
+
(_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseover', __classPrivateFieldGet(this, _Tooltip_show, "f"));
|
|
44
|
+
(_b = this.anchorEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
|
|
45
|
+
(_c = this.anchorEl) === null || _c === void 0 ? void 0 : _c.removeEventListener('focusin', __classPrivateFieldGet(this, _Tooltip_show, "f"));
|
|
46
|
+
(_d = this.anchorEl) === null || _d === void 0 ? void 0 : _d.removeEventListener('focusout', __classPrivateFieldGet(this, _Tooltip_hide, "f"));
|
|
47
|
+
};
|
|
48
|
+
__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "text", void 0);
|
|
49
|
+
|
|
50
|
+
let _ = t => t,
|
|
51
|
+
_t;
|
|
52
|
+
const getClasses = ({
|
|
53
|
+
open
|
|
54
|
+
}) => classNames('control', ['open', Boolean(open)]);
|
|
55
|
+
const TooltipTemplate = context => {
|
|
56
|
+
const popupTag = context.tagFor(Popup);
|
|
57
|
+
return html(_t || (_t = _`
|
|
58
|
+
<${0} class="${0}" arrow alternate
|
|
59
|
+
placement=${0} open=${0} anchor=${0}
|
|
60
|
+
exportparts="vvd-theme-alternate">
|
|
61
|
+
<div class="tooltip" role="tooltip">
|
|
62
|
+
<header part="vvd-theme-alternate" class="tooltip-header">
|
|
63
|
+
<div class="tooltip-text">${0}</div>
|
|
64
|
+
</header>
|
|
65
|
+
</div>
|
|
66
|
+
</${0}>`), popupTag, getClasses, x => x.placement, x => x.open, x => x.anchor, x => x.text, popupTag);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
const tooltipDefinition = Tooltip.compose({
|
|
70
|
+
baseName: 'tooltip',
|
|
71
|
+
template: TooltipTemplate,
|
|
72
|
+
styles: css_248z
|
|
73
|
+
});
|
|
74
|
+
const tooltipRegistries = [tooltipDefinition(), ...popupRegistries];
|
|
75
|
+
const registerTooltip = registerFactory(tooltipRegistries);
|
|
76
|
+
|
|
77
|
+
export { tooltipRegistries as a, registerTooltip as r, tooltipDefinition as t };
|
package/shared/definition5.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
|
|
2
2
|
import { c as classNames } from './class-names.js';
|
|
3
3
|
|
|
4
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
4
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 21 Dec 2022 15:16:28 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n inline-size: inherit;\n vertical-align: middle;\n}\n.base {\n --_connotation-color-backdrop: var(--vvd-color-canvas);\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base::before {\n position: absolute;\n z-index: 1;\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n content: \"\";\n inset: 0;\n pointer-events: none;\n}\n.base:not(.tight) {\n padding: 4px;\n column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n border-radius: 6px;\n}\n\n.base.shape-pill {\n border-radius: 24px;\n}\n\n/* Separator */\n::slotted([role=separator]) {\n align-self: stretch;\n margin-block: 4px;\n}";
|
|
5
5
|
|
|
6
6
|
class ActionGroup extends FoundationElement {
|
|
7
7
|
constructor() {
|
package/shared/definition6.js
CHANGED
|
@@ -4,7 +4,7 @@ import { I as Icon } from './icon.js';
|
|
|
4
4
|
import { w as when } from './when.js';
|
|
5
5
|
import { c as classNames } from './class-names.js';
|
|
6
6
|
|
|
7
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
7
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 21 Dec 2022 15:16:28 GMT\n */\n.base {\n display: inline-flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_size);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n inline-size: var(--_size);\n vertical-align: middle;\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-firm: var(--vvd-color-cta-600);\n}\n.base:not(.connotation-cta) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\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-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base.size-condensed {\n --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size-condensed .initials {\n font: var(--vvd-typography-base-condensed-bold);\n}\n.base.size-condensed .icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8)) / 2);\n}\n.base.size-expanded {\n --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-expanded .initials {\n font: var(--vvd-typography-heading-4);\n}\n.base.size-expanded .icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) / 2);\n}\n.base:not(.size-condensed, .size-expanded) {\n --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.size-condensed, .size-expanded) .initials {\n font: var(--vvd-typography-base-extended-bold);\n}\n.base:not(.size-condensed, .size-expanded) .icon {\n font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);\n}\n.base:not(.shape-pill) {\n border-radius: 6px;\n}\n.base.shape-pill {\n border-radius: 50%;\n}\n.base .initials {\n text-transform: uppercase;\n}\n.base ::slotted(*) {\n block-size: 100%;\n inline-size: 100%;\n object-fit: cover;\n}";
|
|
8
8
|
|
|
9
9
|
class Avatar extends FoundationElement {}
|
|
10
10
|
__decorate([attr, __metadata("design:type", String)], Avatar.prototype, "connotation", void 0);
|
package/shared/definition7.js
CHANGED
|
@@ -12,7 +12,7 @@ __decorate([attr, __metadata("design:type", String)], Badge.prototype, "appearan
|
|
|
12
12
|
__decorate([attr, __metadata("design:type", String)], Badge.prototype, "text", void 0);
|
|
13
13
|
applyMixins(Badge, AffixIconWithTrailing);
|
|
14
14
|
|
|
15
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
15
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 21 Dec 2022 15:16:28 GMT\n */\n.base {\n --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_badge-block-size);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n column-gap: 8px;\n font: var(--vvd-typography-base-condensed-bold);\n max-inline-size: 100%;\n padding-inline: 8px;\n vertical-align: middle;\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-intermediate: var(--vvd-color-cta-500);\n --_connotation-color-soft: var(--vvd-color-cta-100);\n --_connotation-color-contrast: var(--vvd-color-cta-800);\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-intermediate: var(--vvd-color-success-500);\n --_connotation-color-soft: var(--vvd-color-success-100);\n --_connotation-color-contrast: var(--vvd-color-success-800);\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-intermediate: var(--vvd-color-alert-500);\n --_connotation-color-soft: var(--vvd-color-alert-100);\n --_connotation-color-contrast: var(--vvd-color-alert-800);\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-intermediate: var(--vvd-color-warning-300);\n --_connotation-color-soft: var(--vvd-color-warning-100);\n --_connotation-color-contrast: var(--vvd-color-warning-800);\n}\n.base.connotation-information {\n --_connotation-color-primary: var(--vvd-color-information-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-information-500);\n --_connotation-color-soft: var(--vvd-color-information-100);\n --_connotation-color-contrast: var(--vvd-color-information-800);\n}\n.base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n --_connotation-color-contrast: var(--vvd-color-neutral-800);\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-duotone {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-intermediate);\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.base.icon-only {\n contain: size;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .base.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .base.icon-only {\n inline-size: var(--_badge-block-size);\n }\n}\n\n.text {\n overflow: hidden;\n max-inline-size: 100%;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n border-radius: 4px;\n}\n\n.base.shape-pill {\n border-radius: 14px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}";
|
|
16
16
|
|
|
17
17
|
let _ = t => t,
|
|
18
18
|
_t,
|
package/shared/definition8.js
CHANGED
|
@@ -7,7 +7,7 @@ import { a as applyMixins } from './apply-mixins.js';
|
|
|
7
7
|
import { w as when } from './when.js';
|
|
8
8
|
import { c as classNames } from './class-names.js';
|
|
9
9
|
|
|
10
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
10
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 21 Dec 2022 15:16:28 GMT\n */\n.control {\n overflow: hidden;\n max-height: 160px;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-announcement {\n --_connotation-color-primary: var(--vvd-color-announcement-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-warning {\n --_connotation-color-primary: var(--vvd-color-warning-300);\n --_connotation-color-primary-text: var(--vvd-color-canvas-text);\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n --_connotation-color-primary: var(--vvd-color-information-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.control.removing {\n max-height: 0;\n}\n.control > .header {\n display: flex;\n min-height: 60px;\n align-items: center;\n justify-content: flex-start;\n font: var(--vvd-typography-base-bold);\n}\n.control > .header > .user-content {\n display: flex;\n flex: 1 0;\n align-items: center;\n justify-content: center;\n padding-inline: 16px;\n}\n.control > .header > .user-content > .icon {\n flex: 0 0 auto;\n font-size: 20px;\n margin-inline-end: 15px;\n}\n.control > .header > .user-content > .action-items {\n display: inline-block;\n flex: 0 0 auto;\n padding-inline-start: 15px;\n}\n.control > .header > .user-content > .message {\n padding: 20px 0;\n}\n.control > .header > .dismiss-button {\n --vvd-icon-button-color: inherit;\n flex: 0 0 auto;\n margin-inline-end: 8px;\n}";
|
|
11
11
|
|
|
12
12
|
var _Banner_handleRemoveEnd, _Banner_closeOnKeyDown;
|
|
13
13
|
const connotationIconMap = new Map([[Connotation.Information, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
|
package/shared/definition9.js
CHANGED
|
@@ -25,7 +25,7 @@ __decorate([attr({
|
|
|
25
25
|
__decorate([attr, __metadata("design:type", String)], Button.prototype, "label", void 0);
|
|
26
26
|
applyMixins(Button, AffixIconWithTrailing);
|
|
27
27
|
|
|
28
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
28
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 21 Dec 2022 15:16:28 GMT\n */\n:host {\n display: inline-block;\n}\n\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n border: 0 none;\n margin: 0;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_button-block-size);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n gap: var(--_button-icon-gap);\n vertical-align: middle;\n white-space: nowrap;\n /* Size */\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-cta-600);\n --_connotation-color-contrast: var(--vvd-color-cta-800);\n --_connotation-color-fierce: var(--vvd-color-cta-700);\n --_connotation-color-firm: var(--vvd-color-cta-600);\n --_connotation-color-soft: var(--vvd-color-cta-100);\n --_connotation-color-faint: var(--vvd-color-cta-50);\n}\n.control.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-success-600);\n --_connotation-color-contrast: var(--vvd-color-success-800);\n --_connotation-color-fierce: var(--vvd-color-success-700);\n --_connotation-color-firm: var(--vvd-color-success-600);\n --_connotation-color-soft: var(--vvd-color-success-100);\n --_connotation-color-faint: var(--vvd-color-success-50);\n}\n.control.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-alert-600);\n --_connotation-color-contrast: var(--vvd-color-alert-800);\n --_connotation-color-fierce: var(--vvd-color-alert-700);\n --_connotation-color-firm: var(--vvd-color-alert-600);\n --_connotation-color-soft: var(--vvd-color-alert-100);\n --_connotation-color-faint: var(--vvd-color-alert-50);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n --_connotation-color-contrast: var(--vvd-color-neutral-800);\n --_connotation-color-fierce: var(--vvd-color-neutral-700);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\n}\n.control.appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transparent;\n}\n.control.appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control: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.control:where(:disabled, .disabled).appearance-filled {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transparent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control: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.control:not(.icon-only) {\n inline-size: 100%;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .control {\n user-select: none;\n }\n}\n.control:not(:disabled) {\n cursor: pointer;\n}\n.control:disabled {\n cursor: not-allowed;\n}\n.control.icon-only {\n contain: size;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_button-block-size);\n }\n}\n.control:not(.stacked).size-condensed {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n font: var(--vvd-typography-base-condensed-bold);\n}\n.control:not(.stacked).size-condensed:not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 12px;\n}\n.control:not(.stacked).size-condensed .icon {\n font-size: 16px;\n}\n.control:not(.stacked).size-expanded {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n font: var(--vvd-typography-base-extended-bold);\n}\n.control:not(.stacked).size-expanded:not(.icon-only) {\n --_button-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:not(.stacked).size-expanded .icon {\n font-size: 24px;\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded) {\n --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n font: var(--vvd-typography-base-bold);\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded):not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 16px;\n}\n.control:not(.stacked):not(.size-condensed, .size-expanded) .icon {\n font-size: 20px;\n}\n.control.stacked {\n flex-direction: column;\n justify-content: center;\n --_button-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8)) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)));\n font: var(--vvd-typography-base-bold);\n}\n.control.stacked:not(.icon-only) {\n --_button-icon-gap: 10px;\n padding-inline: 16px;\n}\n.control.stacked .icon {\n font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill:not(.stacked)) {\n border-radius: 6px;\n}\n\n.control.shape-pill:not(.stacked):not(.icon-only) {\n border-radius: 24px;\n}\n.control.shape-pill:not(.stacked).icon-only {\n border-radius: 50%;\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}\n\n:not(:focus-visible) > .focus-indicator {\n display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n --focus-stroke-gap-color: transparent;\n}";
|
|
29
29
|
|
|
30
30
|
let _ = t => t,
|
|
31
31
|
_t;
|
package/shared/form-elements.js
CHANGED
|
@@ -224,7 +224,7 @@ class DelegatesARIATextbox {
|
|
|
224
224
|
applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
|
|
225
225
|
applyMixins(TextField, StartEnd, DelegatesARIATextbox);
|
|
226
226
|
|
|
227
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
227
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 21 Dec 2022 15:16:28 GMT\n */\n.message {\n display: flex;\n contain: inline-size;\n font: var(--vvd-typography-base-condensed);\n gap: 4px;\n grid-column: 1/-1;\n}\n.message-text {\n color: var(--vvd-color-canvas-text);\n}\n.helper-message .message-text {\n color: var(--_low-ink-color);\n}\n.message-icon {\n font-size: 16px;\n}\n.success-message .message-icon {\n color: var(--vvd-color-success-500);\n}\n.error-message .message-icon {\n color: var(--vvd-color-alert-500);\n}";
|
|
228
228
|
|
|
229
229
|
let _ = t => t,
|
|
230
230
|
_t,
|
|
@@ -18,10 +18,10 @@ export declare function formElements<T extends {
|
|
|
18
18
|
successText?: string | undefined;
|
|
19
19
|
charCount: boolean;
|
|
20
20
|
userValid: boolean;
|
|
21
|
-
"__#
|
|
21
|
+
"__#7518@#blurred": boolean;
|
|
22
22
|
readonly errorValidationMessage: any;
|
|
23
23
|
connectedCallback(): void;
|
|
24
|
-
"__#
|
|
24
|
+
"__#7518@#handleInvalidEvent": () => void;
|
|
25
25
|
disconnectedCallback(): void;
|
|
26
26
|
validate: () => void;
|
|
27
27
|
};
|
package/side-drawer/index.js
CHANGED
package/slider/index.js
CHANGED
package/styles/core/all.css
CHANGED
package/styles/core/theme.css
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Wed, 21 Dec 2022 15:16:28 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Wed, 21 Dec 2022 15:16:28 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Wed, 21 Dec 2022 15:16:28 GMT
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* Do not edit directly
|
|
15
|
-
* Generated on
|
|
15
|
+
* Generated on Wed, 21 Dec 2022 15:16:28 GMT
|
|
16
16
|
*/
|
|
17
17
|
@property --vvd-size-density {
|
|
18
18
|
syntax: "<integer>";
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Wed, 21 Dec 2022 15:16:28 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Wed, 21 Dec 2022 15:16:28 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Wed, 21 Dec 2022 15:16:28 GMT
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* Do not edit directly
|
|
15
|
-
* Generated on
|
|
15
|
+
* Generated on Wed, 21 Dec 2022 15:16:28 GMT
|
|
16
16
|
*/
|
|
17
17
|
@property --vvd-size-density {
|
|
18
18
|
syntax: "<integer>";
|
package/switch/index.js
CHANGED
package/text-area/index.js
CHANGED
package/text-field/index.js
CHANGED
package/tooltip/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { r as registerTooltip } from '../shared/
|
|
1
|
+
import { r as registerTooltip } from '../shared/definition40.js';
|
|
2
2
|
import '../shared/index.js';
|
|
3
|
-
import '../shared/
|
|
3
|
+
import '../shared/definition25.js';
|
|
4
4
|
import '../shared/definition9.js';
|
|
5
5
|
import '../shared/definition3.js';
|
|
6
6
|
import '../shared/icon.js';
|
package/vivid.api.json
CHANGED
|
@@ -350,6 +350,83 @@
|
|
|
350
350
|
"endIndex": 14
|
|
351
351
|
}
|
|
352
352
|
},
|
|
353
|
+
{
|
|
354
|
+
"kind": "Variable",
|
|
355
|
+
"canonicalReference": "@vonage/vivid!headerDefinition:var",
|
|
356
|
+
"docComment": "",
|
|
357
|
+
"excerptTokens": [
|
|
358
|
+
{
|
|
359
|
+
"kind": "Content",
|
|
360
|
+
"text": "headerDefinition: "
|
|
361
|
+
},
|
|
362
|
+
{
|
|
363
|
+
"kind": "Content",
|
|
364
|
+
"text": "(overrideDefinition?: import(\"@microsoft/fast-foundation\")."
|
|
365
|
+
},
|
|
366
|
+
{
|
|
367
|
+
"kind": "Reference",
|
|
368
|
+
"text": "OverrideFoundationElementDefinition",
|
|
369
|
+
"canonicalReference": "@microsoft/fast-foundation!OverrideFoundationElementDefinition:type"
|
|
370
|
+
},
|
|
371
|
+
{
|
|
372
|
+
"kind": "Content",
|
|
373
|
+
"text": "<"
|
|
374
|
+
},
|
|
375
|
+
{
|
|
376
|
+
"kind": "Reference",
|
|
377
|
+
"text": "FoundationElementDefinition",
|
|
378
|
+
"canonicalReference": "@microsoft/fast-foundation!FoundationElementDefinition:interface"
|
|
379
|
+
},
|
|
380
|
+
{
|
|
381
|
+
"kind": "Content",
|
|
382
|
+
"text": "> | undefined) => import(\"@microsoft/fast-foundation\")."
|
|
383
|
+
},
|
|
384
|
+
{
|
|
385
|
+
"kind": "Reference",
|
|
386
|
+
"text": "FoundationElementRegistry",
|
|
387
|
+
"canonicalReference": "@microsoft/fast-foundation!FoundationElementRegistry:class"
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"kind": "Content",
|
|
391
|
+
"text": "<"
|
|
392
|
+
},
|
|
393
|
+
{
|
|
394
|
+
"kind": "Reference",
|
|
395
|
+
"text": "FoundationElementDefinition",
|
|
396
|
+
"canonicalReference": "@microsoft/fast-foundation!FoundationElementDefinition:interface"
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
"kind": "Content",
|
|
400
|
+
"text": ", import(\"@microsoft/fast-element\")."
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
"kind": "Reference",
|
|
404
|
+
"text": "Constructable",
|
|
405
|
+
"canonicalReference": "@microsoft/fast-element!Constructable:type"
|
|
406
|
+
},
|
|
407
|
+
{
|
|
408
|
+
"kind": "Content",
|
|
409
|
+
"text": "<import(\"@microsoft/fast-foundation\")."
|
|
410
|
+
},
|
|
411
|
+
{
|
|
412
|
+
"kind": "Reference",
|
|
413
|
+
"text": "FoundationElement",
|
|
414
|
+
"canonicalReference": "@microsoft/fast-foundation!FoundationElement:class"
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
"kind": "Content",
|
|
418
|
+
"text": ">>"
|
|
419
|
+
}
|
|
420
|
+
],
|
|
421
|
+
"fileUrlPath": "../../dist/libs/components/lib/header/definition.d.ts",
|
|
422
|
+
"isReadonly": true,
|
|
423
|
+
"releaseTag": "Public",
|
|
424
|
+
"name": "headerDefinition",
|
|
425
|
+
"variableTypeTokenRange": {
|
|
426
|
+
"startIndex": 1,
|
|
427
|
+
"endIndex": 14
|
|
428
|
+
}
|
|
429
|
+
},
|
|
353
430
|
{
|
|
354
431
|
"kind": "Variable",
|
|
355
432
|
"canonicalReference": "@vonage/vivid!iconDefinition:var",
|
|
@@ -1991,6 +2068,34 @@
|
|
|
1991
2068
|
"endIndex": 3
|
|
1992
2069
|
}
|
|
1993
2070
|
},
|
|
2071
|
+
{
|
|
2072
|
+
"kind": "Variable",
|
|
2073
|
+
"canonicalReference": "@vonage/vivid!registerHeader:var",
|
|
2074
|
+
"docComment": "",
|
|
2075
|
+
"excerptTokens": [
|
|
2076
|
+
{
|
|
2077
|
+
"kind": "Content",
|
|
2078
|
+
"text": "registerHeader: "
|
|
2079
|
+
},
|
|
2080
|
+
{
|
|
2081
|
+
"kind": "Content",
|
|
2082
|
+
"text": "(prefix?: string) => import(\"@microsoft/fast-foundation\")."
|
|
2083
|
+
},
|
|
2084
|
+
{
|
|
2085
|
+
"kind": "Reference",
|
|
2086
|
+
"text": "DesignSystem",
|
|
2087
|
+
"canonicalReference": "@microsoft/fast-foundation!DesignSystem:interface"
|
|
2088
|
+
}
|
|
2089
|
+
],
|
|
2090
|
+
"fileUrlPath": "../../dist/libs/components/lib/header/definition.d.ts",
|
|
2091
|
+
"isReadonly": true,
|
|
2092
|
+
"releaseTag": "Public",
|
|
2093
|
+
"name": "registerHeader",
|
|
2094
|
+
"variableTypeTokenRange": {
|
|
2095
|
+
"startIndex": 1,
|
|
2096
|
+
"endIndex": 3
|
|
2097
|
+
}
|
|
2098
|
+
},
|
|
1994
2099
|
{
|
|
1995
2100
|
"kind": "Variable",
|
|
1996
2101
|
"canonicalReference": "@vonage/vivid!registerIcon:var",
|