@vonage/vivid 3.0.0-next.93 → 3.0.0-next.94
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 +2 -1
- package/action-group/index.js +1 -1
- package/avatar/index.js +2 -1
- package/badge/index.js +2 -1
- package/banner/index.js +2 -1
- package/breadcrumb-item/index.js +2 -1
- package/button/index.js +1 -0
- package/calendar/index.js +1 -1
- package/calendar-event/index.js +1 -1
- package/card/index.js +2 -1
- package/checkbox/index.js +2 -1
- package/dialog/index.js +2 -1
- package/fab/index.js +2 -1
- package/focus/index.js +1 -1
- package/header/index.js +1 -1
- package/icon/index.js +1 -0
- package/index.js +4 -0
- package/lib/components.d.ts +1 -0
- package/lib/slider/index.d.ts +3 -0
- package/lib/slider/slider.d.ts +4 -0
- package/lib/slider/slider.template.d.ts +4 -0
- package/listbox/index.js +3 -18
- package/listbox-option/index.js +1 -0
- package/menu/index.js +1 -0
- package/menu-item/index.js +1 -0
- package/nav-disclosure/index.js +2 -1
- package/nav-item/index.js +2 -1
- package/note/index.js +2 -1
- package/number-field/index.js +5 -60
- package/package.json +4 -3
- package/popup/index.js +1 -0
- 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/es.object.assign.js +1 -1
- package/shared/es.regexp.to-string.js +59 -0
- package/shared/export.js +1 -1
- package/shared/form-elements.js +1 -1
- package/shared/icon.js +10 -45
- package/shared/index2.js +1 -1
- package/shared/index4.js +1 -1
- package/shared/index5.js +1 -1
- package/shared/index7.js +1 -1
- package/shared/numbers.js +25 -0
- package/shared/object-keys.js +1 -1
- package/shared/patterns/form-elements/form-elements.d.ts +1 -1
- package/shared/string-trim.js +40 -0
- package/shared/web.dom-collections.iterator.js +1 -1
- package/side-drawer/index.js +1 -1
- package/slider/index.js +596 -0
- 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/text-anchor/index.js +1 -0
- package/text-area/index.js +2 -1
- package/text-field/index.js +2 -1
- package/tooltip/index.js +2 -1
package/text-anchor/index.js
CHANGED
|
@@ -8,6 +8,7 @@ import '../shared/object-keys.js';
|
|
|
8
8
|
import '../shared/iterators.js';
|
|
9
9
|
import '../shared/icon.js';
|
|
10
10
|
import '../shared/to-string.js';
|
|
11
|
+
import '../shared/string-trim.js';
|
|
11
12
|
import '../shared/_has.js';
|
|
12
13
|
import '../shared/anchor.js';
|
|
13
14
|
import '../shared/apply-mixins.js';
|
package/text-area/index.js
CHANGED
|
@@ -14,6 +14,7 @@ import '../shared/icon.js';
|
|
|
14
14
|
import '../shared/export.js';
|
|
15
15
|
import '../shared/iterators.js';
|
|
16
16
|
import '../shared/to-string.js';
|
|
17
|
+
import '../shared/string-trim.js';
|
|
17
18
|
import '../shared/_has.js';
|
|
18
19
|
import '../shared/web.dom-collections.iterator.js';
|
|
19
20
|
import '../shared/object-keys.js';
|
|
@@ -198,7 +199,7 @@ __decorate([
|
|
|
198
199
|
], TextArea$1.prototype, "defaultSlottedNodes", void 0);
|
|
199
200
|
applyMixins(TextArea$1, DelegatesARIATextbox);
|
|
200
201
|
|
|
201
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
202
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 08 Nov 2022 16:43:57 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(--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: transparent;\n --_appearance-color-outline: transparent;\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: transparent;\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: transparent;\n --_appearance-color-outline: transparent;\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: transparent;\n --_appearance-color-outline: transparent;\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.base:where(.success):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-success-100);\n --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: transparent;\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-underpin: var(--vvd-color-neutral-400);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\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-typography-base);\n grid-column: 1/3;\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/3;\n}\n.success .fieldset {\n --focus-stroke-color: var(--vvd-color-success-500);\n}\n.error .fieldset {\n --focus-stroke-color: var(--vvd-color-alert-500);\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 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\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.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}";
|
|
202
203
|
|
|
203
204
|
let TextArea = class TextArea extends TextArea$1 {};
|
|
204
205
|
__decorate([attr, __metadata("design:type", String)], TextArea.prototype, "wrap", void 0);
|
package/text-field/index.js
CHANGED
|
@@ -13,6 +13,7 @@ import '../shared/icon.js';
|
|
|
13
13
|
import '../shared/export.js';
|
|
14
14
|
import '../shared/iterators.js';
|
|
15
15
|
import '../shared/to-string.js';
|
|
16
|
+
import '../shared/string-trim.js';
|
|
16
17
|
import '../shared/_has.js';
|
|
17
18
|
import '../shared/web.dom-collections.iterator.js';
|
|
18
19
|
import '../shared/object-keys.js';
|
|
@@ -28,7 +29,7 @@ __decorate([attr, __metadata("design:type", String)], TextField.prototype, "auto
|
|
|
28
29
|
TextField = __decorate([formElements], TextField);
|
|
29
30
|
applyMixins(TextField, AffixIcon);
|
|
30
31
|
|
|
31
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
32
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 08 Nov 2022 16:43:57 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: transparent;\n --_appearance-color-outline: transparent;\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: transparent;\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: transparent;\n --_appearance-color-outline: transparent;\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: transparent;\n --_appearance-color-outline: transparent;\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.base:where(.success):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-success-100);\n --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: transparent;\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n.base {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-underpin: var(--vvd-color-neutral-400);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\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-typography-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-typography-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 /* Shape */\n}\n.success .fieldset {\n --focus-stroke-color: var(--vvd-color-success-500);\n}\n.error .fieldset {\n --focus-stroke-color: var(--vvd-color-alert-500);\n}\n.base > .fieldset {\n block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\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-typography-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.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}";
|
|
32
33
|
|
|
33
34
|
let _ = t => t,
|
|
34
35
|
_t,
|
package/tooltip/index.js
CHANGED
|
@@ -9,6 +9,7 @@ import '../shared/icon.js';
|
|
|
9
9
|
import '../shared/export.js';
|
|
10
10
|
import '../shared/iterators.js';
|
|
11
11
|
import '../shared/to-string.js';
|
|
12
|
+
import '../shared/string-trim.js';
|
|
12
13
|
import '../shared/_has.js';
|
|
13
14
|
import '../shared/when.js';
|
|
14
15
|
import '../focus/index.js';
|
|
@@ -25,7 +26,7 @@ import '../shared/focus2.js';
|
|
|
25
26
|
import '../shared/es.object.assign.js';
|
|
26
27
|
import '../shared/object-keys.js';
|
|
27
28
|
|
|
28
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
29
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Tue, 08 Nov 2022 16:43:57 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}";
|
|
29
30
|
|
|
30
31
|
class Tooltip extends FoundationElement {
|
|
31
32
|
constructor() {
|