@vonage/vivid 3.0.0-next.64 → 3.0.0-next.66
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 +1 -1
- package/action-group/index.js +1 -1
- package/avatar/index.js +1 -1
- package/badge/index.js +1 -1
- package/banner/index.js +3 -1
- package/breadcrumb/index.js +1 -0
- package/breadcrumb-item/index.js +6 -2
- package/button/index.js +3 -1
- package/calendar/index.js +1 -1
- package/calendar-event/index.js +1 -1
- package/card/index.js +1 -1
- package/checkbox/index.js +7 -3
- package/dialog/index.js +3 -1
- package/divider/index.js +1 -1
- package/fab/index.js +7 -2
- package/focus/index.js +1 -1
- package/header/index.js +1 -1
- package/index.js +12 -6
- package/lib/components.d.ts +9 -5
- package/lib/menu/index.d.ts +1 -0
- package/lib/menu/menu.d.ts +4 -1
- package/lib/menu-item/index.d.ts +3 -0
- package/lib/menu-item/menu-item.d.ts +7 -0
- package/lib/menu-item/menu-item.template.d.ts +5 -0
- package/menu/index.js +20 -299
- package/menu-item/index.js +19 -0
- package/nav-disclosure/index.js +1 -1
- package/nav-item/index.js +6 -2
- package/note/index.js +1 -1
- package/package.json +12 -11
- package/popup/index.js +2 -0
- package/progress/index.js +1 -1
- package/progress-ring/index.js +1 -1
- package/shared/anchor.js +2 -1
- package/shared/aria-global.js +2 -49
- package/shared/breadcrumb-item.js +1 -1
- package/shared/button.js +2 -1
- package/shared/form-associated.js +2 -90
- package/shared/form-elements.js +2 -1
- package/shared/index3.js +1 -1
- package/shared/index4.js +371 -0
- package/shared/key-codes.js +90 -0
- package/shared/patterns/form-elements.d.ts +1 -1
- package/shared/start-end.js +50 -0
- 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 +3 -3
- package/styles/tokens/theme-light.css +3 -3
- package/text-anchor/index.js +1 -0
- package/text-area/index.js +3 -1
- package/text-field/index.js +3 -1
- package/tooltip/index.js +3 -1
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Sun, 25 Sep 2022 05:00:43 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Sun, 25 Sep 2022 05:00:43 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Sun, 25 Sep 2022 05:00:43 GMT
|
|
12
12
|
*/
|
|
13
13
|
.vvd-root, ::part(vvd-root) {
|
|
14
14
|
--vvd-color-scheme: dark;
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Sun, 25 Sep 2022 05:00:43 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Sun, 25 Sep 2022 05:00:43 GMT
|
|
8
8
|
*/
|
|
9
9
|
/**
|
|
10
10
|
* Do not edit directly
|
|
11
|
-
* Generated on
|
|
11
|
+
* Generated on Sun, 25 Sep 2022 05:00:43 GMT
|
|
12
12
|
*/
|
|
13
13
|
.vvd-root, ::part(vvd-root) {
|
|
14
14
|
--vvd-color-scheme: light;
|
package/text-anchor/index.js
CHANGED
|
@@ -12,6 +12,7 @@ import '../shared/_has.js';
|
|
|
12
12
|
import '../shared/anchor.js';
|
|
13
13
|
import '../shared/apply-mixins.js';
|
|
14
14
|
import '../shared/aria-global.js';
|
|
15
|
+
import '../shared/start-end.js';
|
|
15
16
|
import '../shared/ref.js';
|
|
16
17
|
import '../shared/focus2.js';
|
|
17
18
|
import '../shared/focus.js';
|
package/text-area/index.js
CHANGED
|
@@ -10,10 +10,12 @@ import { r as ref } from '../shared/ref.js';
|
|
|
10
10
|
import { c as classNames } from '../shared/class-names.js';
|
|
11
11
|
import '../shared/focus.js';
|
|
12
12
|
import '../shared/aria-global.js';
|
|
13
|
+
import '../shared/start-end.js';
|
|
13
14
|
import '../shared/web.dom-collections.iterator.js';
|
|
14
15
|
import '../shared/export.js';
|
|
15
16
|
import '../shared/object-keys.js';
|
|
16
17
|
import '../shared/iterators.js';
|
|
18
|
+
import '../shared/key-codes.js';
|
|
17
19
|
import '../shared/icon.js';
|
|
18
20
|
import '../shared/to-string.js';
|
|
19
21
|
import '../shared/_has.js';
|
|
@@ -195,7 +197,7 @@ __decorate([
|
|
|
195
197
|
], TextArea$1.prototype, "defaultSlottedNodes", void 0);
|
|
196
198
|
applyMixins(TextArea$1, DelegatesARIATextbox);
|
|
197
199
|
|
|
198
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
200
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 25 Sep 2022 05:00:43 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(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\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: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(.error):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-alert-500);\n --_appearance-color-fill: var(--vvd-color-alert-100);\n --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: transparent;\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\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(--vvd-color-neutral-400);\n pointer-events: none;\n}\n\n.label {\n contain: inline-size;\n font: var(--vvd-font-base);\n grid-column: 1/4;\n grid-row: 1;\n line-height: 20px;\n}\n.base:not(.disabled) .label {\n color: var(--vvd-color-canvas-text);\n}\n.base.disabled .label {\n color: var(--vvd-color-neutral-400);\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n border-radius: 6px;\n grid-column: 1/4;\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-font-base);\n min-block-size: 40px;\n transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control::placeholder {\n color: var(--_low-ink-color);\n}\n\n.helper-text {\n color: var(--_low-ink-color);\n font: var(--vvd-font-base-condensed);\n grid-column: 1/4;\n}\n\n.error-message {\n display: flex;\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-font-base-condensed);\n grid-column: 2/4;\n}\n.error-message-icon {\n color: var(--vvd-color-alert-500);\n font-size: 16px;\n grid-column: 1/2;\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}";
|
|
199
201
|
|
|
200
202
|
let TextArea = class TextArea extends TextArea$1 {};
|
|
201
203
|
|
package/text-field/index.js
CHANGED
|
@@ -17,7 +17,9 @@ import '../shared/_has.js';
|
|
|
17
17
|
import '../shared/web.dom-collections.iterator.js';
|
|
18
18
|
import '../shared/object-keys.js';
|
|
19
19
|
import '../shared/form-associated.js';
|
|
20
|
+
import '../shared/key-codes.js';
|
|
20
21
|
import '../shared/aria-global.js';
|
|
22
|
+
import '../shared/start-end.js';
|
|
21
23
|
|
|
22
24
|
let TextField = class TextField extends TextField$1 {};
|
|
23
25
|
|
|
@@ -32,7 +34,7 @@ __decorate([attr, __metadata("design:type", String)], TextField.prototype, "auto
|
|
|
32
34
|
TextField = __decorate([formElements], TextField);
|
|
33
35
|
applyMixins(TextField, AffixIcon);
|
|
34
36
|
|
|
35
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
37
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 25 Sep 2022 05:00:43 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(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\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: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(.error):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-alert-500);\n --_appearance-color-fill: var(--vvd-color-alert-100);\n --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: transparent;\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\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(--vvd-color-neutral-400);\n}\n\n.label {\n contain: inline-size;\n font: var(--vvd-font-base);\n grid-column: 1/4;\n grid-row: 1;\n}\n.char-count + .label {\n grid-column: 1/3;\n}\n.base:not(.disabled) .label {\n color: var(--vvd-color-canvas-text);\n}\n.base.disabled .label {\n color: var(--vvd-color-neutral-400);\n}\n\n.char-count {\n color: var(--_low-ink-color);\n font: var(--vvd-font-base);\n grid-column: 3/4;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n color: var(--_appearance-color-text);\n grid-column: 1/4;\n transition: color 0.2s;\n /* Size */\n /* Shape */\n}\n.base:not(.density-extended) > .fieldset {\n block-size: 40px;\n}\n.base.density-extended > .fieldset {\n block-size: 48px;\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: inherit;\n font: var(--vvd-font-base);\n padding-inline-end: 16px;\n padding-inline-start: 16px;\n transition: box-shadow 0.2s, background-color 0.2s;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control::placeholder {\n color: var(--_low-ink-color);\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.helper-text {\n color: var(--_low-ink-color);\n font: var(--vvd-font-base-condensed);\n grid-column: 1/4;\n margin-inline-start: 16px;\n}\n\n.error-message {\n display: flex;\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-font-base-condensed);\n grid-column: 2/4;\n}\n.error-message-icon {\n color: var(--vvd-color-alert-500);\n font-size: 16px;\n grid-column: 1/2;\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}";
|
|
36
38
|
|
|
37
39
|
let _ = t => t,
|
|
38
40
|
_t,
|
package/tooltip/index.js
CHANGED
|
@@ -17,13 +17,15 @@ import '../shared/affix.js';
|
|
|
17
17
|
import '../shared/button.js';
|
|
18
18
|
import '../shared/apply-mixins.js';
|
|
19
19
|
import '../shared/form-associated.js';
|
|
20
|
+
import '../shared/key-codes.js';
|
|
20
21
|
import '../shared/aria-global.js';
|
|
22
|
+
import '../shared/start-end.js';
|
|
21
23
|
import '../shared/ref.js';
|
|
22
24
|
import '../shared/focus2.js';
|
|
23
25
|
import '../shared/object-keys.js';
|
|
24
26
|
import '../shared/es.object.assign.js';
|
|
25
27
|
|
|
26
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
28
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 25 Sep 2022 05:00:43 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-font-base-bold);\n}";
|
|
27
29
|
|
|
28
30
|
class Tooltip extends FoundationElement {
|
|
29
31
|
constructor() {
|