@vonage/vivid 3.0.0-next.115 → 3.0.0-next.117
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/accordion/index.js +1 -1
- package/accordion-item/index.js +8 -12
- package/action-group/index.js +1 -1
- package/avatar/index.js +12 -6
- package/badge/index.js +1 -1
- package/banner/index.js +13 -5
- package/breadcrumb-item/index.js +13 -10
- package/button/index.js +1 -1
- package/calendar/index.js +2 -2
- package/calendar-event/index.js +1 -1
- package/card/index.js +20 -12
- package/checkbox/index.js +1 -1
- package/custom-elements.json +10 -10
- package/dialog/index.js +29 -11
- package/divider/index.js +1 -1
- package/fab/index.js +1 -1
- package/focus/index.js +1 -1
- package/header/index.js +1 -1
- package/index.js +7 -7
- package/lib/popup/popup.d.ts +1 -1
- package/listbox/index.js +2 -2
- package/menu/index.js +1 -1
- package/menu-item/index.js +1 -1
- package/nav-disclosure/index.js +4 -3
- package/nav-item/index.js +1 -1
- package/note/index.js +9 -6
- package/number-field/index.js +2 -2
- package/option/index.js +1 -1
- package/package.json +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/affix.js +1 -1
- package/shared/form-associated.js +1 -1
- package/shared/form-elements.js +2 -2
- package/shared/index.js +1 -1
- package/shared/listbox-option.js +1 -1
- package/shared/menu-item.js +1 -1
- package/shared/patterns/affix.d.ts +1 -1
- package/shared/patterns/form-elements/form-elements.d.ts +2 -2
- package/shared/popup.js +5 -5
- package/shared/ref.js +1 -1
- package/shared/slotted.js +1 -1
- package/side-drawer/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 +7 -4
|
@@ -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
|
+
"__#7288@#blurred": boolean;
|
|
22
22
|
readonly errorValidationMessage: any;
|
|
23
23
|
connectedCallback(): void;
|
|
24
|
-
"__#
|
|
24
|
+
"__#7288@#handleInvalidEvent": () => void;
|
|
25
25
|
disconnectedCallback(): void;
|
|
26
26
|
validate: () => void;
|
|
27
27
|
};
|
package/shared/popup.js
CHANGED
|
@@ -1355,7 +1355,7 @@ const computePosition = (reference, floating, options) => computePosition$1(refe
|
|
|
1355
1355
|
...options
|
|
1356
1356
|
});
|
|
1357
1357
|
|
|
1358
|
-
var _Popup_instances, _Popup_arrowPosition_get, _Popup_padding_get, _Popup_distance_get, _Popup_strategy_get, _Popup_middleware_get, _Popup_cleanup, _Popup_assignPopupPosition, _Popup_assignArrowPosition,
|
|
1358
|
+
var _Popup_instances, _Popup_arrowPosition_get, _Popup_padding_get, _Popup_distance_get, _Popup_strategy_get, _Popup_middleware_get, _Popup_cleanup, _Popup_assignPopupPosition, _Popup_assignArrowPosition, _Popup_getAnchor, _Popup_handleKeydown;
|
|
1359
1359
|
class Popup extends FoundationElement {
|
|
1360
1360
|
constructor() {
|
|
1361
1361
|
super(...arguments);
|
|
@@ -1387,7 +1387,7 @@ class Popup extends FoundationElement {
|
|
|
1387
1387
|
case 'anchor':
|
|
1388
1388
|
{
|
|
1389
1389
|
(_a = this.anchorEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', __classPrivateFieldGet(this, _Popup_handleKeydown, "f"));
|
|
1390
|
-
this.anchorEl = __classPrivateFieldGet(this, _Popup_instances, "m",
|
|
1390
|
+
this.anchorEl = __classPrivateFieldGet(this, _Popup_instances, "m", _Popup_getAnchor).call(this);
|
|
1391
1391
|
(_b = this.anchorEl) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', __classPrivateFieldGet(this, _Popup_handleKeydown, "f"));
|
|
1392
1392
|
break;
|
|
1393
1393
|
}
|
|
@@ -1461,8 +1461,8 @@ _Popup_cleanup = new WeakMap(), _Popup_handleKeydown = new WeakMap(), _Popup_ins
|
|
|
1461
1461
|
bottom: '',
|
|
1462
1462
|
[side]: '-4px'
|
|
1463
1463
|
});
|
|
1464
|
-
},
|
|
1465
|
-
return document.getElementById(this.anchor);
|
|
1464
|
+
}, _Popup_getAnchor = function _Popup_getAnchor() {
|
|
1465
|
+
return this.anchor instanceof HTMLElement ? this.anchor : document.getElementById(this.anchor);
|
|
1466
1466
|
};
|
|
1467
1467
|
__decorate([attr({
|
|
1468
1468
|
mode: 'boolean'
|
|
@@ -1479,6 +1479,6 @@ __decorate([attr({
|
|
|
1479
1479
|
__decorate([attr({
|
|
1480
1480
|
mode: 'fromView'
|
|
1481
1481
|
}), __metadata("design:type", String)], Popup.prototype, "placement", void 0);
|
|
1482
|
-
__decorate([attr, __metadata("design:type",
|
|
1482
|
+
__decorate([attr, __metadata("design:type", Object)], Popup.prototype, "anchor", void 0);
|
|
1483
1483
|
|
|
1484
1484
|
export { Popup as P };
|
package/shared/ref.js
CHANGED
package/shared/slotted.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { a2 as Observable, $ as emptyArray, a1 as AttachedBehaviorHTMLDirective } from './index.js';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Creates a function that can be used to filter a Node array, selecting only elements.
|
package/side-drawer/index.js
CHANGED
|
@@ -40,7 +40,7 @@ __decorate([attr({
|
|
|
40
40
|
mode: 'boolean'
|
|
41
41
|
}), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
|
|
42
42
|
|
|
43
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
43
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 13 Dec 2022 13:35:20 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);\n opacity: 0.5;\n position: fixed;\n inset: 0;\n}\n.scrim:not(.open) {\n display: none;\n}";
|
|
44
44
|
|
|
45
45
|
let _ = t => t,
|
|
46
46
|
_t,
|
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 Tue, 13 Dec 2022 13:35:20 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Tue, 13 Dec 2022 13:35:20 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Tue, 13 Dec 2022 13:35:20 GMT
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* Do not edit directly
|
|
15
|
-
* Generated on
|
|
15
|
+
* Generated on Tue, 13 Dec 2022 13:35:20 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 Tue, 13 Dec 2022 13:35:20 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Tue, 13 Dec 2022 13:35:20 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Tue, 13 Dec 2022 13:35:20 GMT
|
|
12
12
|
*/
|
|
13
13
|
/**
|
|
14
14
|
* Do not edit directly
|
|
15
|
-
* Generated on
|
|
15
|
+
* Generated on Tue, 13 Dec 2022 13:35:20 GMT
|
|
16
16
|
*/
|
|
17
17
|
@property --vvd-size-density {
|
|
18
18
|
syntax: "<integer>";
|
package/switch/index.js
CHANGED
|
@@ -102,7 +102,7 @@ __decorate([
|
|
|
102
102
|
observable
|
|
103
103
|
], Switch$1.prototype, "defaultSlottedNodes", void 0);
|
|
104
104
|
|
|
105
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
105
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 13 Dec 2022 13:35:20 GMT\n */\n.control {\n display: inline-flex;\n gap: 8px;\n}\n.control.connotation-cta {\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary: var(--vvd-color-cta-500);\n --_connotation-color-primary-increment: var(--vvd-color-cta-600);\n --_connotation-color-backdrop: var(--vvd-color-cta-50);\n --_connotation-color-firm: var(--vvd-color-cta-600);\n --_connotation-color-intermediate: var(--vvd-color-cta-500);\n}\n.control.connotation-alert {\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-primary-increment: var(--vvd-color-alert-600);\n --_connotation-color-backdrop: var(--vvd-color-alert-50);\n --_connotation-color-firm: var(--vvd-color-alert-600);\n --_connotation-color-intermediate: var(--vvd-color-alert-500);\n}\n.control.connotation-success {\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-primary-increment: var(--vvd-color-success-600);\n --_connotation-color-backdrop: var(--vvd-color-success-50);\n --_connotation-color-firm: var(--vvd-color-success-600);\n --_connotation-color-intermediate: var(--vvd-color-success-500);\n}\n.control:not(.connotation-cta, .connotation-alert, .connotation-success) {\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n --_connotation-color-backdrop: var(--vvd-color-canvas);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n}\n.control {\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.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:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\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(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\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(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-neutral-800);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-500);\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)).appearance-filled {\n --_appearance-color-text: var(--vvd-color-neutral-800);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: transparent;\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\n.switch {\n --_switch-inline-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 1.8);\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n border-radius: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / .5);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n inline-size: var(--_switch-inline-size);\n transition: all 0.2s ease-in-out 0s;\n}\n\n.checked-indicator {\n --_switch-checked-indicator-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / 1.6667);\n --_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);\n block-size: var(--_switch-checked-indicator-size);\n border-radius: inherit;\n inline-size: var(--_switch-checked-indicator-size);\n margin-inline-start: auto;\n transition: all 0.2s ease-in-out 0s;\n}\n.control.appearance-filled .checked-indicator {\n background-color: var(--vvd-color-neutral-100);\n}\n.control:not(.appearance-filled) .checked-indicator {\n background-color: var(--_appearance-color-outline);\n}\n.control:not(.checked) .checked-indicator {\n transform: translateX(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)));\n}\n.control.checked .checked-indicator {\n transform: translateX(calc(-1 * var(--_switch-gutter)));\n}\n\n.label {\n color: var(--vvd-color-canvas-text);\n cursor: pointer;\n font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n --focus-inset: -4px;\n --focus-stroke-gap-color: transparent;\n border-radius: 14px;\n}\n.control:not(:focus-visible) .focus-indicator {\n display: none;\n}";
|
|
106
106
|
|
|
107
107
|
class Switch extends Switch$1 {}
|
|
108
108
|
__decorate([attr, __metadata("design:type", String)], Switch.prototype, "label", void 0);
|
package/text-area/index.js
CHANGED
|
@@ -194,7 +194,7 @@ __decorate([
|
|
|
194
194
|
], TextArea$1.prototype, "defaultSlottedNodes", void 0);
|
|
195
195
|
applyMixins(TextArea$1, DelegatesARIATextbox);
|
|
196
196
|
|
|
197
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
197
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 13 Dec 2022 13:35:20 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n display: inline-grid;\n width: 100%;\n gap: 4px;\n grid-template-columns: 1fr max-content;\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:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-neutral-800);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-500);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-backdrop: var(--vvd-color-success-50);\n --_connotation-color-intermediate: var(--vvd-color-success-500);\n --_connotation-color-firm: var(--vvd-color-success-600);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-backdrop: var(--vvd-color-alert-50);\n --_connotation-color-intermediate: var(--vvd-color-alert-500);\n --_connotation-color-firm: var(--vvd-color-alert-600);\n}\n.base:not(.connotation-success, .connotation-alert) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-backdrop: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n --_low-ink-color: var(--_appearance-color-text);\n pointer-events: none;\n}\n\n.label {\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-typography-base);\n grid-column: 1/3;\n grid-row: 1;\n line-height: 20px;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n border-radius: 6px;\n grid-column: 1/3;\n}\n\n.control {\n width: 100%;\n padding: 8px 16px;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n font: var(--vvd-typography-base);\n min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n}\n.control:disabled {\n cursor: not-allowed;\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n display: none;\n}";
|
|
198
198
|
|
|
199
199
|
let TextArea = class TextArea extends TextArea$1 {};
|
|
200
200
|
__decorate([attr, __metadata("design:type", String)], TextArea.prototype, "wrap", void 0);
|
package/text-field/index.js
CHANGED
|
@@ -24,7 +24,7 @@ __decorate([attr, __metadata("design:type", String)], TextField.prototype, "auto
|
|
|
24
24
|
TextField = __decorate([formElements], TextField);
|
|
25
25
|
applyMixins(TextField, AffixIcon);
|
|
26
26
|
|
|
27
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
27
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 13 Dec 2022 13:35:20 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n display: inline-grid;\n width: 100%;\n gap: 4px;\n grid-template-columns: min-content 1fr max-content;\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:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--_connotation-color-backdrop);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-neutral-800);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: var(--vvd-color-neutral-500);\n}\n.base:where(.readonly):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-backdrop: var(--vvd-color-success-50);\n --_connotation-color-intermediate: var(--vvd-color-success-500);\n --_connotation-color-firm: var(--vvd-color-success-600);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-backdrop: var(--vvd-color-alert-50);\n --_connotation-color-intermediate: var(--vvd-color-alert-500);\n --_connotation-color-firm: var(--vvd-color-alert-600);\n}\n.base:not(.connotation-success, .connotation-alert) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-backdrop: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n --_low-ink-color: var(--_appearance-color-text);\n}\n\n.label {\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-typography-base);\n grid-column: 1/4;\n grid-row: 1;\n}\n.char-count + .label {\n grid-column: 1/3;\n}\n\n.char-count {\n color: var(--_low-ink-color);\n font: var(--vvd-typography-base);\n grid-column: 3/4;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n grid-column: 1/4;\n transition: color 0.2s;\n /* Shape */\n}\n.base > .fieldset {\n block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n.base:not(.shape-pill) .fieldset {\n border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n border-radius: 24px;\n}\n\n.control {\n width: 100%;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n block-size: 100%;\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n font: var(--vvd-typography-base);\n padding-inline-end: 16px;\n padding-inline-start: 16px;\n transition: box-shadow 0.2s, background-color 0.2s;\n}\n.control:disabled {\n cursor: not-allowed;\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */\n}\n.control::placeholder, .control:disabled::placeholder {\n opacity: 1; /* 2. correct opacity on iOS */\n -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n\n.icon {\n position: absolute;\n z-index: 1;\n color: var(--_low-ink-color);\n font-size: 20px;\n inset-inline-start: 16px;\n}\n.icon + .control {\n padding-inline-start: 44px;\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n display: none;\n}";
|
|
28
28
|
|
|
29
29
|
let _ = t => t,
|
|
30
30
|
_t,
|
package/tooltip/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import { c as classNames } from '../shared/class-names.js';
|
|
|
6
6
|
import '../shared/es.object.assign.js';
|
|
7
7
|
import '../shared/key-codes.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
9
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 13 Dec 2022 13:35:20 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}";
|
|
10
10
|
|
|
11
11
|
var _Tooltip_instances, _Tooltip_anchorUpdated, _Tooltip_addEventListener, _Tooltip_removeEventListener, _Tooltip_show, _Tooltip_hide;
|
|
12
12
|
class Tooltip extends Popup {
|
|
@@ -56,8 +56,10 @@ let _ = t => t,
|
|
|
56
56
|
const getClasses = ({
|
|
57
57
|
open
|
|
58
58
|
}) => classNames('control', ['open', Boolean(open)]);
|
|
59
|
-
const TooltipTemplate =
|
|
60
|
-
|
|
59
|
+
const TooltipTemplate = context => {
|
|
60
|
+
const popupTag = context.tagFor(Popup);
|
|
61
|
+
return html(_t || (_t = _`
|
|
62
|
+
<${0} class="${0}" arrow alternate
|
|
61
63
|
placement=${0} open=${0} anchor=${0}
|
|
62
64
|
exportparts="vvd-theme-alternate">
|
|
63
65
|
<div class="tooltip" role="tooltip">
|
|
@@ -65,7 +67,8 @@ placement=${0} open=${0} anchor=${0}
|
|
|
65
67
|
<div class="tooltip-text">${0}</div>
|
|
66
68
|
</header>
|
|
67
69
|
</div>
|
|
68
|
-
|
|
70
|
+
</${0}>`), popupTag, getClasses, x => x.placement, x => x.open, x => x.anchor, x => x.text, popupTag);
|
|
71
|
+
};
|
|
69
72
|
|
|
70
73
|
const prefix = getPrefix(import.meta.url);
|
|
71
74
|
const vividTooltip = Tooltip.compose({
|