@vonage/vivid 3.0.0-next.18 → 3.0.0-next.20
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/action-group/index.js +34 -0
- package/badge/index.js +1 -1
- package/banner/index.js +1 -1
- package/breadcrumb/index.js +2 -0
- package/button/index.js +1 -1
- package/calendar/index.js +4 -0
- package/card/index.js +1 -1
- package/fab/index.js +1 -1
- package/icon/index.js +1 -1
- package/index.js +2 -0
- package/lib/action-group/action-group.d.ts +9 -0
- package/lib/action-group/action-group.template.d.ts +4 -0
- package/lib/action-group/index.d.ts +2 -0
- package/lib/badge/badge.d.ts +1 -1
- package/lib/button/button.d.ts +1 -1
- package/lib/components.d.ts +2 -0
- package/lib/enums.d.ts +1 -2
- package/lib/fab/fab.d.ts +1 -1
- package/lib/icon/icon.d.ts +1 -1
- package/lib/progress/progress.d.ts +1 -1
- package/lib/progress-ring/progress-ring.d.ts +1 -1
- package/lib/text/text.d.ts +1 -1
- package/note/index.js +1 -1
- package/package.json +6 -5
- package/popup/index.js +19 -22
- package/progress/index.js +3 -3
- package/progress-ring/index.js +4 -3
- package/shared/anchor.js +8 -1
- package/shared/base-progress.js +5 -0
- package/shared/button.js +8 -1
- package/shared/enums.js +1 -2
- package/shared/es.object.assign.js +6 -6
- package/shared/icon.js +509 -462
- package/shared/index.js +55 -54
- package/shared/object-set-prototype-of.js +220 -199
- package/shared/web.dom-collections.iterator.js +22 -21
- package/text/index.js +1 -1
- package/text-field/index.js +31 -9
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
2
|
+
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
3
|
+
import { c as classNames } from '../shared/class-names.js';
|
|
4
|
+
|
|
5
|
+
var css_248z = ".base {\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n padding: 4px;\n background-color: var(--_appearance-color-fill);\n box-shadow: 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n column-gap: 4px;\n vertical-align: middle;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-on-canvas);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-neutral-50);\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\n/* Shape */\n.base:not(.shape-pill) {\n border-radius: 6px;\n}\n\n.base.shape-pill {\n border-radius: 24px;\n}\n\n::slotted([role=separator]) {\n width: 1px;\n align-self: stretch;\n background-color: var(--vvd-color-neutral-30);\n margin-block: 4px;\n}";
|
|
6
|
+
styleInject(css_248z);
|
|
7
|
+
|
|
8
|
+
class ActionGroup extends FoundationElement {}
|
|
9
|
+
|
|
10
|
+
__decorate([attr, __metadata("design:type", String)], ActionGroup.prototype, "shape", void 0);
|
|
11
|
+
|
|
12
|
+
__decorate([attr, __metadata("design:type", String)], ActionGroup.prototype, "appearance", void 0);
|
|
13
|
+
|
|
14
|
+
let _ = t => t,
|
|
15
|
+
_t;
|
|
16
|
+
|
|
17
|
+
const getClasses = ({
|
|
18
|
+
appearance,
|
|
19
|
+
shape
|
|
20
|
+
}) => classNames('base', [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)]);
|
|
21
|
+
|
|
22
|
+
const ActionGroupTemplate = () => html(_t || (_t = _`
|
|
23
|
+
<div class="${0}">
|
|
24
|
+
<slot></slot>
|
|
25
|
+
</div>`), getClasses);
|
|
26
|
+
|
|
27
|
+
const vividActionGroup = ActionGroup.compose({
|
|
28
|
+
baseName: 'action-group',
|
|
29
|
+
template: ActionGroupTemplate,
|
|
30
|
+
styles: css_248z
|
|
31
|
+
});
|
|
32
|
+
designSystem.register(vividActionGroup());
|
|
33
|
+
|
|
34
|
+
export { vividActionGroup };
|
package/badge/index.js
CHANGED
|
@@ -24,7 +24,7 @@ __decorate([attr, __metadata("design:type", String)], Badge.prototype, "text", v
|
|
|
24
24
|
|
|
25
25
|
applyMixins(Badge, AffixIconWithTrailing);
|
|
26
26
|
|
|
27
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n column-gap: 8px;\n vertical-align: middle;\n}\n.control.connotation-cta {\n --
|
|
27
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n column-gap: 8px;\n vertical-align: middle;\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n --_connotation-color-on-primary: var(--vvd-color-on-cta);\n --_connotation-color-intermediate: var(--vvd-color-cta);\n --_connotation-color-soft: var(--vvd-color-cta-20);\n --_connotation-color-contrast: var(--vvd-color-cta-90);\n}\n.control.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success);\n --_connotation-color-on-primary: var(--vvd-color-on-success);\n --_connotation-color-intermediate: var(--vvd-color-success);\n --_connotation-color-soft: var(--vvd-color-success-20);\n --_connotation-color-contrast: var(--vvd-color-success-90);\n}\n.control.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert);\n --_connotation-color-on-primary: var(--vvd-color-on-alert);\n --_connotation-color-intermediate: var(--vvd-color-alert);\n --_connotation-color-soft: var(--vvd-color-alert-20);\n --_connotation-color-contrast: var(--vvd-color-alert-90);\n}\n.control.connotation-warning {\n --_connotation-color-primary: var(--vvd-color-warning);\n --_connotation-color-on-primary: var(--vvd-color-on-warning);\n --_connotation-color-intermediate: var(--vvd-color-warning);\n --_connotation-color-soft: var(--vvd-color-warning-20);\n --_connotation-color-contrast: var(--vvd-color-warning-90);\n}\n.control.connotation-info {\n --_connotation-color-primary: var(--vvd-color-info);\n --_connotation-color-on-primary: var(--vvd-color-on-info);\n --_connotation-color-intermediate: var(--vvd-color-info);\n --_connotation-color-soft: var(--vvd-color-info-20);\n --_connotation-color-contrast: var(--vvd-color-info-90);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-info) {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n --_connotation-color-on-primary: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-neutral);\n --_connotation-color-soft: var(--vvd-color-neutral-20);\n --_connotation-color-contrast: var(--vvd-color-neutral-90);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control.appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.control.appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n\n/* Size */\n.control:not(.density-condensed):not(.density-extended) {\n block-size: 24px;\n padding-inline: 10px;\n}\n\n.control.density-condensed {\n block-size: 20px;\n padding-inline: 8px;\n}\n\n.control.density-extended {\n block-size: 28px;\n padding-inline: 12px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n border-radius: 4px;\n}\n\n.control.shape-pill {\n border-radius: 14px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}";
|
|
28
28
|
styleInject(css_248z);
|
|
29
29
|
|
|
30
30
|
let _ = t => t,
|
package/banner/index.js
CHANGED
|
@@ -21,7 +21,7 @@ import '../shared/text-anchor.js';
|
|
|
21
21
|
import '../shared/anchor.js';
|
|
22
22
|
import '../shared/text-anchor.template.js';
|
|
23
23
|
|
|
24
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n overflow: hidden;\n max-height: 10rem;\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 --
|
|
24
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n overflow: hidden;\n max-height: 10rem;\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);\n --_connotation-color-on-primary: var(--vvd-color-on-success);\n}\n.control.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert);\n --_connotation-color-on-primary: var(--vvd-color-on-alert);\n}\n.control.connotation-announcement {\n --_connotation-color-primary: var(--vvd-color-announcement);\n --_connotation-color-on-primary: var(--vvd-color-on-announcement);\n}\n.control.connotation-warning {\n --_connotation-color-primary: var(--vvd-color-warning);\n --_connotation-color-on-primary: var(--vvd-color-on-warning);\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n --_connotation-color-primary: var(--vvd-color-info);\n --_connotation-color-on-primary: var(--vvd-color-on-info);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control.removing {\n max-height: 0;\n}\n.control > .header {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n min-height: 60px;\n align-items: center;\n justify-content: flex-start;\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}";
|
|
25
25
|
styleInject(css_248z);
|
|
26
26
|
|
|
27
27
|
var _Banner_handleRemoveEnd, _Banner_closeOnKeyDown;
|
package/breadcrumb/index.js
CHANGED
package/button/index.js
CHANGED
|
@@ -40,7 +40,7 @@ __decorate([attr, __metadata("design:type", String)], Button.prototype, "label",
|
|
|
40
40
|
|
|
41
41
|
applyMixins(Button, AffixIconWithTrailing);
|
|
42
42
|
|
|
43
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n outline: 0 none;\n}\n\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: 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 outline: 0 none;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-cta {\n --
|
|
43
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n outline: 0 none;\n}\n\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: 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 outline: 0 none;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n --_connotation-color-on-primary: var(--vvd-color-on-cta);\n --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n --_connotation-color-contrast: var(--vvd-color-cta-90);\n --_connotation-color-fierce: var(--vvd-color-cta-80);\n --_connotation-color-firm: var(--vvd-color-cta-70);\n --_connotation-color-soft: var(--vvd-color-cta-20);\n --_connotation-color-faint: var(--vvd-color-cta-10);\n}\n.control.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success);\n --_connotation-color-on-primary: var(--vvd-color-on-success);\n --_connotation-color-primary-increment: var(--vvd-color-success-70);\n --_connotation-color-contrast: var(--vvd-color-success-90);\n --_connotation-color-fierce: var(--vvd-color-success-80);\n --_connotation-color-firm: var(--vvd-color-success-70);\n --_connotation-color-soft: var(--vvd-color-success-20);\n --_connotation-color-faint: var(--vvd-color-success-10);\n}\n.control.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert);\n --_connotation-color-on-primary: var(--vvd-color-on-alert);\n --_connotation-color-primary-increment: var(--vvd-color-alert-70);\n --_connotation-color-contrast: var(--vvd-color-alert-90);\n --_connotation-color-fierce: var(--vvd-color-alert-80);\n --_connotation-color-firm: var(--vvd-color-alert-70);\n --_connotation-color-soft: var(--vvd-color-alert-20);\n --_connotation-color-faint: var(--vvd-color-alert-10);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n --_connotation-color-on-primary: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n --_connotation-color-contrast: var(--vvd-color-neutral-90);\n --_connotation-color-fierce: var(--vvd-color-neutral-80);\n --_connotation-color-firm: var(--vvd-color-on-canvas);\n --_connotation-color-soft: var(--vvd-color-neutral-20);\n --_connotation-color-faint: var(--vvd-color-neutral-10);\n}\n.control.appearance-filled {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-filled {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).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)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-filled {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: var(--vvd-color-neutral-30);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transaprent;\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: transaprent;\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).density-condensed {\n --_button-block-size: 32px;\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control:not(.stacked).density-condensed:not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 12px;\n}\n.control:not(.stacked).density-condensed .icon {\n font-size: 16px;\n}\n.control:not(.stacked).density-extended {\n --_button-block-size: 48px;\n font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control:not(.stacked).density-extended:not(.icon-only) {\n --_button-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:not(.stacked).density-extended .icon {\n font-size: 24px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) {\n --_button-block-size: 40px;\n font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended):not(.icon-only) {\n --_button-icon-gap: 8px;\n padding-inline: 16px;\n}\n.control:not(.stacked):not(.density-condensed, .density-extended) .icon {\n font-size: 20px;\n}\n.control.stacked {\n flex-direction: column;\n justify-content: center;\n --_button-block-size: 68px;\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\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) > .focus-indicator {\n display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n --focus-stroke-gap-color: transparent;\n}";
|
|
44
44
|
styleInject(css_248z);
|
|
45
45
|
|
|
46
46
|
let _ = t => t,
|
package/calendar/index.js
CHANGED
|
@@ -362,6 +362,10 @@ class ArrayObserver extends SubscriberSet {
|
|
|
362
362
|
enumerable: false,
|
|
363
363
|
});
|
|
364
364
|
}
|
|
365
|
+
subscribe(subscriber) {
|
|
366
|
+
this.flush();
|
|
367
|
+
super.subscribe(subscriber);
|
|
368
|
+
}
|
|
365
369
|
addSplice(splice) {
|
|
366
370
|
if (this.splices === void 0) {
|
|
367
371
|
this.splices = [splice];
|
package/card/index.js
CHANGED
|
@@ -18,7 +18,7 @@ import '../shared/apply-mixins.js';
|
|
|
18
18
|
import '../shared/focus2.js';
|
|
19
19
|
import '../shared/aria-global.js';
|
|
20
20
|
|
|
21
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n block-size: 100%;\n border-radius: 6px;\n}\n\n.wrapper {\n display: flex;\n overflow: hidden;\n flex-flow: column;\n block-size: inherit;\n border-radius: inherit;\n color: var(--vvd-color-on-canvas);\n}\n\n.content {\n display: flex;\n flex-flow: column;\n padding: 1.5rem;\n}\n.content-container {\n display: flex;\n gap: 0.5rem;\n}\n\n.header {\n display: flex;\n flex: 1;\n align-items: flex-start;\n gap: 0.5rem;\n}\n.header-content {\n flex: 1;\n}\n.header-title, .header-subheading {\n /* stylelint-disable value-no-vendor-prefix */\n display: -webkit-box;\n /* stylelint-enable value-no-vendor-prefix */\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n.header-title {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n -webkit-line-clamp: var(--heading-line-clamp);\n}\n.header-subheading {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n -webkit-line-clamp: var(--subheading-line-clamp);\n}\n.hide-header .header {\n display: none;\n}\n\n.header-subheading,\n.text {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n color: var(--vvd-color-neutral-70);\n}\n\n.text {\n padding-right: 8px;\n margin-top: 12px;\n}\n\n.footer {\n display: inline-flex;\n flex-direction: column;\n align-items: flex-end;\n padding-bottom: 1.5rem;\n margin-top: auto;\n padding-inline: 1.5rem;\n}\n.hide-footer .footer {\n display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n flex-shrink: 0;\n align-self: baseline;\n margin-block-start: 4px;\n}\n\n.icon {\n font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n flex-shrink: 0;\n align-self: flex-start;\n margin-block-start: -0.5rem;\n margin-inline-end: -0.5rem;\n margin-inline-start: auto;\n}\n\nvwc-elevation {\n block-size: inherit;\n}\nvwc-elevation::part(base) {\n block-size: inherit;\n}";
|
|
21
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n display: block;\n}\n@supports ((block-size: -moz-fit-content) or (block-size: fit-content)) and ((inline-size: -moz-fit-content) or (inline-size: fit-content)) {\n :host {\n block-size: -moz-fit-content;\n block-size: fit-content;\n inline-size: -moz-fit-content;\n inline-size: fit-content;\n }\n}\n\n.control {\n block-size: 100%;\n border-radius: 6px;\n}\n\n.wrapper {\n display: flex;\n overflow: hidden;\n flex-flow: column;\n block-size: inherit;\n border-radius: inherit;\n color: var(--vvd-color-on-canvas);\n}\n\n.content {\n display: flex;\n flex-flow: column;\n padding: 1.5rem;\n}\n.content-container {\n display: flex;\n gap: 0.5rem;\n}\n\n.header {\n display: flex;\n flex: 1;\n align-items: flex-start;\n gap: 0.5rem;\n}\n.header-content {\n flex: 1;\n}\n.header-title, .header-subheading {\n /* stylelint-disable value-no-vendor-prefix */\n display: -webkit-box;\n /* stylelint-enable value-no-vendor-prefix */\n overflow: hidden;\n -webkit-box-orient: vertical;\n}\n.header-title {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n -webkit-line-clamp: var(--heading-line-clamp);\n}\n.header-subheading {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n -webkit-line-clamp: var(--subheading-line-clamp);\n}\n.hide-header .header {\n display: none;\n}\n\n.header-subheading,\n.text {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n color: var(--vvd-color-neutral-70);\n}\n\n.text {\n padding-right: 8px;\n margin-top: 12px;\n}\n\n.footer {\n display: inline-flex;\n flex-direction: column;\n align-items: flex-end;\n padding-bottom: 1.5rem;\n margin-top: auto;\n padding-inline: 1.5rem;\n}\n.hide-footer .footer {\n display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n flex-shrink: 0;\n align-self: baseline;\n margin-block-start: 4px;\n}\n\n.icon {\n font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n flex-shrink: 0;\n align-self: flex-start;\n margin-block-start: -0.5rem;\n margin-inline-end: -0.5rem;\n margin-inline-start: auto;\n}\n\nvwc-elevation {\n block-size: inherit;\n}\nvwc-elevation::part(base) {\n block-size: inherit;\n}";
|
|
22
22
|
styleInject(css_248z);
|
|
23
23
|
|
|
24
24
|
class Card extends FoundationElement {}
|
package/fab/index.js
CHANGED
|
@@ -15,7 +15,7 @@ import '../shared/when.js';
|
|
|
15
15
|
import '../shared/focus.js';
|
|
16
16
|
import '../shared/web.dom-collections.iterator.js';
|
|
17
17
|
|
|
18
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n --_fab-block-size: 48px;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_fab-block-size);\n border-radius: 24px;\n color: var(--_appearance-color-text);\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n outline: 0 none;\n vertical-align: middle;\n}\n.control.connotation-cta {\n --
|
|
18
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n --_fab-block-size: 48px;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_fab-block-size);\n border-radius: 24px;\n color: var(--_appearance-color-text);\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n outline: 0 none;\n vertical-align: middle;\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n --_connotation-color-on-primary: var(--vvd-color-on-cta);\n --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n --_connotation-color-contrast: var(--vvd-color-cta-90);\n --_connotation-color-fierce: var(--vvd-color-cta-80);\n --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control:not(.connotation-cta) {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n --_connotation-color-on-primary: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n --_connotation-color-contrast: var(--vvd-color-neutral-90);\n --_connotation-color-fierce: var(--vvd-color-neutral-80);\n --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: var(--vvd-color-neutral-30);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transaprent;\n}\n.control.icon-only {\n border-radius: 50%;\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(--_fab-block-size);\n }\n}\n.control:not(.icon-only) {\n --fab-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:disabled {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n cursor: not-allowed;\n}\n.control:not(:disabled) {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n cursor: pointer;\n}\n.control:not(:disabled):active {\n --_elevation-fill: var(--vvd-color-surface-8dp);\n --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n\n/* Icon */\n.icon {\n font-size: 24px;\n}\n.icon-trailing .icon {\n order: 1;\n}\n\n:not(:focus) .focus-indicator {\n display: none;\n}";
|
|
19
19
|
styleInject(css_248z);
|
|
20
20
|
|
|
21
21
|
class Fab extends Button {}
|
package/icon/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import { c as classNames } from '../shared/class-names.js';
|
|
|
6
6
|
import '../shared/object-set-prototype-of.js';
|
|
7
7
|
import '../shared/_has.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = ":host {\n display: inline-block;\n vertical-align: sub;\n}\n\n.control {\n display: flex;\n margin: unset;\n color: currentColor;\n contain: strict;\n}\n.control.connotation-
|
|
9
|
+
var css_248z = ":host {\n display: inline-block;\n vertical-align: sub;\n}\n\n.control {\n display: flex;\n margin: unset;\n color: currentColor;\n contain: strict;\n}\n.control.connotation-accent {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n}\n.control.connotation-announcement {\n --_connotation-color-primary: var(--vvd-color-announcement);\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n}\n.control.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success);\n}\n.control.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert);\n}\n.control.connotation-info {\n --_connotation-color-primary: var(--vvd-color-info);\n}\n\n.control[class*=connotation] {\n color: var(--_connotation-color-basis);\n}\n\nsvg {\n margin: auto;\n block-size: inherit;\n inline-size: inherit;\n}\n\n/* Size */\n.control:not(.size-small):not(.size-medium):not(.size-large) {\n block-size: 1em;\n inline-size: 1em;\n}\n\n.control.size-small {\n block-size: 16px;\n inline-size: 16px;\n}\n\n.control.size-medium {\n block-size: 24px;\n inline-size: 24px;\n}\n\n.control.size-large {\n block-size: 32px;\n inline-size: 32px;\n}";
|
|
10
10
|
styleInject(css_248z);
|
|
11
11
|
|
|
12
12
|
let _ = t => t,
|
package/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { vividAccordion } from './accordion/index.js';
|
|
2
2
|
export { vividAccordionItem } from './accordion-item/index.js';
|
|
3
|
+
export { vividActionGroup } from './action-group/index.js';
|
|
3
4
|
export { vividBadge } from './badge/index.js';
|
|
4
5
|
export { vividBanner } from './banner/index.js';
|
|
5
6
|
export { vividBreadcrumb } from './breadcrumb/index.js';
|
|
@@ -18,6 +19,7 @@ export { vividProgressRing } from './progress-ring/index.js';
|
|
|
18
19
|
export { vividSideDrawer } from './side-drawer/index.js';
|
|
19
20
|
export { vividSidenavItem } from './sidenav-item/index.js';
|
|
20
21
|
export { vividText } from './text/index.js';
|
|
22
|
+
export { vividTextfield } from './text-field/index.js';
|
|
21
23
|
export { vividTooltip } from './tooltip/index.js';
|
|
22
24
|
export { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
|
|
23
25
|
import './shared/style-inject.es.js';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
+
import type { Appearance, Shape } from '../enums.js';
|
|
3
|
+
export declare type ActionGroupAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
|
|
4
|
+
declare type ActionGroupShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
|
|
5
|
+
export declare class ActionGroup extends FoundationElement {
|
|
6
|
+
shape?: ActionGroupShape;
|
|
7
|
+
appearance?: ActionGroupAppearance;
|
|
8
|
+
}
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { ViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
|
|
3
|
+
import type { ActionGroup } from './action-group';
|
|
4
|
+
export declare const ActionGroupTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<ActionGroup>;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
|
|
2
|
+
export declare const vividActionGroup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
|
package/lib/badge/badge.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
2
|
import { AffixIconWithTrailing } from '../../shared/patterns/affix';
|
|
3
3
|
import type { Appearance, Connotation, Density, Shape } from '../enums.js';
|
|
4
|
-
declare type BadgeConnotation = Extract<Connotation, Connotation.
|
|
4
|
+
declare type BadgeConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Info>;
|
|
5
5
|
declare type BadgeAppearance = Extract<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
|
|
6
6
|
declare type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
|
|
7
7
|
declare type BadgeDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;
|
package/lib/button/button.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Button as FoundationButton } from '@microsoft/fast-foundation';
|
|
2
2
|
import type { Appearance, Connotation, Density, Shape } from '../enums.js';
|
|
3
3
|
import { AffixIconWithTrailing } from '../../shared/patterns/affix';
|
|
4
|
-
declare type ButtonConnotation = Extract<Connotation, Connotation.
|
|
4
|
+
declare type ButtonConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert>;
|
|
5
5
|
export declare type ButtonAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
|
|
6
6
|
declare type ButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
|
|
7
7
|
declare type ButtonDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;
|
package/lib/components.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export * from './accordion';
|
|
2
2
|
export * from './accordion-item';
|
|
3
|
+
export * from './action-group';
|
|
3
4
|
export * from './badge';
|
|
4
5
|
export * from './banner';
|
|
5
6
|
export * from './breadcrumb';
|
|
@@ -18,4 +19,5 @@ export * from './progress-ring';
|
|
|
18
19
|
export * from './side-drawer';
|
|
19
20
|
export * from './sidenav-item';
|
|
20
21
|
export * from './text';
|
|
22
|
+
export * from './text-field';
|
|
21
23
|
export * from './tooltip';
|
package/lib/enums.d.ts
CHANGED
package/lib/fab/fab.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Button as FoundationButton } from '@microsoft/fast-foundation';
|
|
2
2
|
import type { Connotation } from '../enums.js';
|
|
3
3
|
import { AffixIconWithTrailing } from '../../shared/patterns/affix';
|
|
4
|
-
export declare type FabConnotation = Extract<Connotation, Connotation.
|
|
4
|
+
export declare type FabConnotation = Extract<Connotation, Connotation.CTA | Connotation.Accent>;
|
|
5
5
|
export declare class Fab extends FoundationButton {
|
|
6
6
|
connotation?: FabConnotation;
|
|
7
7
|
label?: string;
|
package/lib/icon/icon.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
2
|
import type { Connotation, Size } from '../enums';
|
|
3
|
-
declare type IconConnotation = Extract<Connotation, Connotation.
|
|
3
|
+
declare type IconConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Announcement | Connotation.Success | Connotation.Alert | Connotation.Info>;
|
|
4
4
|
declare type IconSize = Extract<Size, Size.Small | Size.Medium | Size.Large>;
|
|
5
5
|
export declare class Icon extends FoundationElement {
|
|
6
6
|
connotation?: IconConnotation;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BaseProgress } from '@microsoft/fast-foundation';
|
|
2
2
|
import type { Connotation, ConnotationDecorative, Shape } from '../enums';
|
|
3
|
-
export declare type ProgressConnotation = Connotation.
|
|
3
|
+
export declare type ProgressConnotation = Connotation.Accent | Connotation.Success | Connotation.Alert | Connotation.CTA | ConnotationDecorative.Pacific;
|
|
4
4
|
export declare type ProgressShape = Shape.Rounded | Shape.Sharp;
|
|
5
5
|
export declare class Progress extends BaseProgress {
|
|
6
6
|
shape?: ProgressShape;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { BaseProgress } from '@microsoft/fast-foundation';
|
|
2
2
|
import type { Connotation } from '../enums';
|
|
3
|
-
export declare type ProgressRingConnotation = Connotation.
|
|
3
|
+
export declare type ProgressRingConnotation = Connotation.Accent | Connotation.Success | Connotation.Alert | Connotation.CTA;
|
|
4
4
|
export declare class ProgressRing extends BaseProgress {
|
|
5
5
|
connotation?: ProgressRingConnotation;
|
|
6
6
|
density?: -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3;
|
package/lib/text/text.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
2
|
import type { Connotation } from '../enums.js';
|
|
3
3
|
import type { VVDFontFace } from '../../../../../node_modules/@vonage/vivid-tokens/dist/types/typography/font-faces';
|
|
4
|
-
declare type TextConnotation = Extract<Connotation, Connotation.
|
|
4
|
+
declare type TextConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Announcement | Connotation.Info>;
|
|
5
5
|
export declare class Text extends FoundationElement {
|
|
6
6
|
connotation?: TextConnotation;
|
|
7
7
|
fontFace?: VVDFontFace;
|
package/note/index.js
CHANGED
|
@@ -12,7 +12,7 @@ import '../shared/icon.js';
|
|
|
12
12
|
import '../shared/object-set-prototype-of.js';
|
|
13
13
|
import '../shared/_has.js';
|
|
14
14
|
|
|
15
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n display: flex;\n align-items: stretch;\n padding: 20px;\n border-left: 8px solid var(--
|
|
15
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n display: flex;\n align-items: stretch;\n padding: 20px;\n border-left: 8px solid var(--_connotation-color-primary);\n background-color: var(--vvd-color-canvas);\n border-radius: 6px;\n box-shadow: inset 0 1px 0 0 var(--vvd-color-neutral-40), inset -1px 0 0 0 var(--vvd-color-neutral-40), inset 0 -1px 0 0 var(--vvd-color-neutral-40);\n color: var(--vvd-color-on-canvas);\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success);\n}\n.base.connotation-info {\n --_connotation-color-primary: var(--vvd-color-info);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base.connotation-warning {\n --_connotation-color-primary: var(--vvd-color-warning);\n}\n.base:not(.connotation-success, .connotation-info, .connotation-alert, .connotation-warning) {\n --_connotation-color-primary: var(--vvd-color-announcement);\n}\n@supports (contain: content) {\n .base {\n contain: content;\n }\n}\n@supports not (contain: content) {\n .base {\n overflow: hidden;\n }\n}\n\n.icon {\n align-self: flex-start;\n font-size: 24px;\n margin-inline-end: 16px;\n}\n\n.text {\n display: flex;\n min-height: 24px;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n text-align: start;\n}\n.text .heading {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.text .message {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}";
|
|
16
16
|
styleInject(css_248z);
|
|
17
17
|
|
|
18
18
|
class Note extends FoundationElement {}
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vonage/vivid",
|
|
3
|
-
"version": "3.0.0-next.
|
|
3
|
+
"version": "3.0.0-next.20",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"module": "./index.esm.js",
|
|
6
6
|
"main": "./index.js",
|
|
7
7
|
"exports": {
|
|
8
8
|
"./accordion": "./accordion",
|
|
9
9
|
"./accordion-item": "./accordion-item",
|
|
10
|
+
"./action-group": "./action-group",
|
|
10
11
|
"./badge": "./badge",
|
|
11
12
|
"./banner": "./banner",
|
|
12
13
|
"./breadcrumb": "./breadcrumb",
|
|
@@ -30,11 +31,11 @@
|
|
|
30
31
|
},
|
|
31
32
|
"typings": "./index.d.ts",
|
|
32
33
|
"dependencies": {
|
|
33
|
-
"@microsoft/fast-element": "^1.
|
|
34
|
-
"@microsoft/fast-foundation": "^2.
|
|
35
|
-
"@microsoft/fast-web-utilities": "^5.
|
|
34
|
+
"@microsoft/fast-element": "^1.10.2",
|
|
35
|
+
"@microsoft/fast-foundation": "^2.46.9",
|
|
36
|
+
"@microsoft/fast-web-utilities": "^5.4.1",
|
|
36
37
|
"ramda": "^0.27.2",
|
|
37
|
-
"@floating-ui/dom": "^0.5.
|
|
38
|
+
"@floating-ui/dom": "^0.5.2"
|
|
38
39
|
},
|
|
39
40
|
"peerDependencies": {}
|
|
40
41
|
}
|
package/popup/index.js
CHANGED
|
@@ -4,7 +4,7 @@ import { F as FoundationElement, c as __classPrivateFieldGet, g as __classPrivat
|
|
|
4
4
|
import { t as toString$3, s as speciesConstructor$1, f as functionApply } from '../shared/icon.js';
|
|
5
5
|
import { a as objectCreate } from '../shared/web.dom-collections.iterator.js';
|
|
6
6
|
import '../shared/es.object.assign.js';
|
|
7
|
-
import { b as anObject$3, g as fails$5,
|
|
7
|
+
import { b as anObject$3, g as fails$5, z as global$3, u as functionCall, D as functionUncurryThis, T as shared$1, y as internalState, _ as _export, w as wellKnownSymbol$2, l as defineBuiltIn$1, r as createNonEnumerableProperty$1, M as isObject$1, A as classofRaw, P as requireObjectCoercible$2, U as toIntegerOrInfinity$1, V as toPropertyKey$1, a as objectDefineProperty, m as createPropertyDescriptor$1, O as lengthOfArrayLike$1, W as toAbsoluteIndex$1, j as isCallable$1, X as toLength$1, N as getMethod$1 } from '../shared/object-set-prototype-of.js';
|
|
8
8
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
9
9
|
import { w as when } from '../shared/when.js';
|
|
10
10
|
import { r as ref } from '../shared/aria-global.js';
|
|
@@ -25,6 +25,7 @@ var anObject$2 = anObject$3;
|
|
|
25
25
|
var regexpFlags$1 = function () {
|
|
26
26
|
var that = anObject$2(this);
|
|
27
27
|
var result = '';
|
|
28
|
+
if (that.hasIndices) result += 'd';
|
|
28
29
|
if (that.global) result += 'g';
|
|
29
30
|
if (that.ignoreCase) result += 'i';
|
|
30
31
|
if (that.multiline) result += 'm';
|
|
@@ -35,10 +36,10 @@ var regexpFlags$1 = function () {
|
|
|
35
36
|
};
|
|
36
37
|
|
|
37
38
|
var fails$4 = fails$5;
|
|
38
|
-
var global$
|
|
39
|
+
var global$2 = global$3;
|
|
39
40
|
|
|
40
41
|
// babel-minify and Closure Compiler transpiles RegExp('a', 'y') -> /a/y and it causes SyntaxError
|
|
41
|
-
var $RegExp$2 = global$
|
|
42
|
+
var $RegExp$2 = global$2.RegExp;
|
|
42
43
|
|
|
43
44
|
var UNSUPPORTED_Y$2 = fails$4(function () {
|
|
44
45
|
var re = $RegExp$2('a', 'y');
|
|
@@ -66,10 +67,10 @@ var regexpStickyHelpers = {
|
|
|
66
67
|
};
|
|
67
68
|
|
|
68
69
|
var fails$3 = fails$5;
|
|
69
|
-
var global$
|
|
70
|
+
var global$1 = global$3;
|
|
70
71
|
|
|
71
72
|
// babel-minify and Closure Compiler transpiles RegExp('.', 's') -> /./s and it causes SyntaxError
|
|
72
|
-
var $RegExp$1 = global$
|
|
73
|
+
var $RegExp$1 = global$1.RegExp;
|
|
73
74
|
|
|
74
75
|
var regexpUnsupportedDotAll = fails$3(function () {
|
|
75
76
|
var re = $RegExp$1('.', 's');
|
|
@@ -77,10 +78,10 @@ var regexpUnsupportedDotAll = fails$3(function () {
|
|
|
77
78
|
});
|
|
78
79
|
|
|
79
80
|
var fails$2 = fails$5;
|
|
80
|
-
var global
|
|
81
|
+
var global = global$3;
|
|
81
82
|
|
|
82
83
|
// babel-minify and Closure Compiler transpiles RegExp('(?<a>b)', 'g') -> /(?<a>b)/g and it causes SyntaxError
|
|
83
|
-
var $RegExp = global
|
|
84
|
+
var $RegExp = global.RegExp;
|
|
84
85
|
|
|
85
86
|
var regexpUnsupportedNcg = fails$2(function () {
|
|
86
87
|
var re = $RegExp('(?<a>b)', 'g');
|
|
@@ -217,7 +218,7 @@ $({ target: 'RegExp', proto: true, forced: /./.exec !== exec$1 }, {
|
|
|
217
218
|
// TODO: Remove from `core-js@4` since it's moved to entry points
|
|
218
219
|
|
|
219
220
|
var uncurryThis$2 = functionUncurryThis;
|
|
220
|
-
var
|
|
221
|
+
var defineBuiltIn = defineBuiltIn$1;
|
|
221
222
|
var regexpExec$2 = regexpExec$3;
|
|
222
223
|
var fails$1 = fails$5;
|
|
223
224
|
var wellKnownSymbol$1 = wellKnownSymbol$2;
|
|
@@ -281,8 +282,8 @@ var fixRegexpWellKnownSymbolLogic = function (KEY, exec, FORCED, SHAM) {
|
|
|
281
282
|
return { done: false };
|
|
282
283
|
});
|
|
283
284
|
|
|
284
|
-
|
|
285
|
-
|
|
285
|
+
defineBuiltIn(String.prototype, KEY, methods[0]);
|
|
286
|
+
defineBuiltIn(RegExpPrototype, SYMBOL, methods[1]);
|
|
286
287
|
}
|
|
287
288
|
|
|
288
289
|
if (SHAM) createNonEnumerableProperty(RegExpPrototype[SYMBOL], 'sham', true);
|
|
@@ -356,32 +357,30 @@ var createProperty$1 = function (object, key, value) {
|
|
|
356
357
|
else object[propertyKey] = value;
|
|
357
358
|
};
|
|
358
359
|
|
|
359
|
-
var global$1 = global$5;
|
|
360
360
|
var toAbsoluteIndex = toAbsoluteIndex$1;
|
|
361
361
|
var lengthOfArrayLike = lengthOfArrayLike$1;
|
|
362
362
|
var createProperty = createProperty$1;
|
|
363
363
|
|
|
364
|
-
var Array
|
|
364
|
+
var $Array = Array;
|
|
365
365
|
var max$2 = Math.max;
|
|
366
366
|
|
|
367
367
|
var arraySliceSimple = function (O, start, end) {
|
|
368
368
|
var length = lengthOfArrayLike(O);
|
|
369
369
|
var k = toAbsoluteIndex(start, length);
|
|
370
370
|
var fin = toAbsoluteIndex(end === undefined ? length : end, length);
|
|
371
|
-
var result = Array
|
|
371
|
+
var result = $Array(max$2(fin - k, 0));
|
|
372
372
|
for (var n = 0; k < fin; k++, n++) createProperty(result, n, O[k]);
|
|
373
373
|
result.length = n;
|
|
374
374
|
return result;
|
|
375
375
|
};
|
|
376
376
|
|
|
377
|
-
var global = global$5;
|
|
378
377
|
var call$1 = functionCall;
|
|
379
378
|
var anObject$1 = anObject$3;
|
|
380
379
|
var isCallable = isCallable$1;
|
|
381
380
|
var classof = classofRaw;
|
|
382
381
|
var regexpExec$1 = regexpExec$3;
|
|
383
382
|
|
|
384
|
-
var TypeError =
|
|
383
|
+
var $TypeError = TypeError;
|
|
385
384
|
|
|
386
385
|
// `RegExpExec` abstract operation
|
|
387
386
|
// https://tc39.es/ecma262/#sec-regexpexec
|
|
@@ -393,7 +392,7 @@ var regexpExecAbstract = function (R, S) {
|
|
|
393
392
|
return result;
|
|
394
393
|
}
|
|
395
394
|
if (classof(R) === 'RegExp') return call$1(regexpExec$1, R, S);
|
|
396
|
-
throw TypeError('RegExp#exec called on incompatible receiver');
|
|
395
|
+
throw $TypeError('RegExp#exec called on incompatible receiver');
|
|
397
396
|
};
|
|
398
397
|
|
|
399
398
|
var apply = functionApply;
|
|
@@ -824,9 +823,7 @@ async function detectOverflow(middlewareArguments, options) {
|
|
|
824
823
|
} : rects.reference,
|
|
825
824
|
offsetParent: await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)),
|
|
826
825
|
strategy
|
|
827
|
-
}) : rects[elementContext]);
|
|
828
|
-
// 0 or negative = within the clipping rect
|
|
829
|
-
|
|
826
|
+
}) : rects[elementContext]);
|
|
830
827
|
return {
|
|
831
828
|
top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
|
|
832
829
|
bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
|
|
@@ -1726,9 +1723,9 @@ function getOverflowAncestors(node, list) {
|
|
|
1726
1723
|
}
|
|
1727
1724
|
|
|
1728
1725
|
function contains(parent, child) {
|
|
1729
|
-
const rootNode = child
|
|
1726
|
+
const rootNode = child.getRootNode == null ? void 0 : child.getRootNode(); // First, attempt with faster native method
|
|
1730
1727
|
|
|
1731
|
-
if (parent
|
|
1728
|
+
if (parent.contains(child)) {
|
|
1732
1729
|
return true;
|
|
1733
1730
|
} // then fallback to custom implementation with Shadow DOM support
|
|
1734
1731
|
else if (rootNode && isShadowRoot(rootNode)) {
|
|
@@ -2069,7 +2066,7 @@ __decorate([attr({
|
|
|
2069
2066
|
|
|
2070
2067
|
__decorate([attr, __metadata("design:type", String)], Popup.prototype, "anchor", void 0);
|
|
2071
2068
|
|
|
2072
|
-
var css_248z = ".control {\n background-color: var(--vvd-color-surface-4dp);\n border-radius: inherit;\n contain: layout;\n inline-size: -moz-fit-content;\n inline-size: fit-content;\n}\n.control:not(.open) {\n display: none;\n}\n\n.popup-wrapper {\n position: fixed;\n border-radius: 6px;\n}\n\n.popup-content {\n display: grid;\n color: var(--vvd-color-on-canvas)
|
|
2069
|
+
var css_248z = ".control {\n background-color: var(--vvd-color-surface-4dp);\n border-radius: inherit;\n contain: layout;\n inline-size: -moz-fit-content;\n inline-size: fit-content;\n}\n.control:not(.open) {\n display: none;\n}\n\n.popup-wrapper {\n position: fixed;\n border-radius: 6px;\n}\n\n.popup-content {\n display: grid;\n color: var(--vvd-color-on-canvas); /* neutral-100 */\n}\n.dismissible .popup-content {\n align-content: start;\n grid-template-columns: 1fr auto;\n}\n\n.arrow {\n position: absolute;\n z-index: -1;\n width: 8px;\n height: 8px;\n background-color: var(--vvd-color-surface-4dp);\n transform: rotate(45deg);\n}\n\n.dismissible-button {\n align-self: flex-start;\n margin-block-start: 0.25rem;\n margin-inline-end: 0.25rem;\n}";
|
|
2073
2070
|
styleInject(css_248z);
|
|
2074
2071
|
|
|
2075
2072
|
let _ = t => t,
|
package/progress/index.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
2
2
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
3
3
|
import '../shared/web.dom-collections.iterator.js';
|
|
4
|
-
import {
|
|
4
|
+
import { A as classofRaw, _ as _export, D as functionUncurryThis } from '../shared/object-set-prototype-of.js';
|
|
5
5
|
import { B as BaseProgress } from '../shared/base-progress.js';
|
|
6
6
|
import { w as when } from '../shared/when.js';
|
|
7
7
|
import { c as classNames } from '../shared/class-names.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = ".base {\n height: 6px;\n align-items: center;\n margin: 0;\n outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n --
|
|
9
|
+
var css_248z = ".base {\n height: 6px;\n align-items: center;\n margin: 0;\n outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n}\n.base:not(.connotation-pacific).connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base:not(.connotation-pacific).connotation-success {\n --_connotation-color-primary: var(--vvd-color-success);\n}\n.base:not(.connotation-pacific):not(.connotation-cta, .connotation-alert, .connotation-success) {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n}\n.base.connotation-pacific {\n --_connotation-color-primary: linear-gradient(to right, var(--vvd-color-info-30), var(--vvd-color-cta-70));\n}\n\n.indeterminate {\n display: flex;\n overflow: hidden;\n width: 100%;\n height: 100%;\n border-radius: 3px;\n}\n\n.progress {\n position: relative;\n display: flex;\n align-items: center;\n background-color: var(--vvd-color-neutral-20);\n block-size: 100%;\n inline-size: 100%;\n}\n.progress .indeterminate {\n background-color: var(--_connotation-color-primary);\n}\n\n.determinate {\n background-color: var(--_connotation-color-primary);\n block-size: 100%;\n border-radius: 3px;\n transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n background-image: var(--_connotation-color-primary);\n}\n\n.indeterminate-indicator-1, .indeterminate-indicator-2 {\n position: absolute;\n animation: indeterminate-1 2s infinite;\n animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n background-color: var(--vvd-color-neutral-20);\n block-size: 100%;\n inline-size: 30%;\n opacity: 0;\n}\n\n.indeterminate-indicator-2 {\n animation: indeterminate-2 2s infinite;\n inline-size: 60%;\n}\n\n.connotation-pacific .indeterminate-indicator-1, .connotation-pacific .indeterminate-indicator-2 {\n background-image: var(--_connotation-color-primary);\n}\n\n.reverse .indeterminate-indicator-1, .reverse .indeterminate-indicator-2 {\n animation-direction: reverse;\n}\n.reverse .determinate {\n position: absolute;\n right: 0;\n}\n\n.base.shape-sharp .determinate, .base.shape-sharp .indeterminate {\n border-radius: 0;\n}\n\n.base.paused .indeterminate-indicator-1,\n.base.paused .indeterminate-indicator-2 {\n animation-play-state: paused;\n background-color: var(--_connotation-color-primary);\n}\n\n.base.paused .determinate {\n background-color: var(--vvd-color-neutral-40);\n}\n\n@keyframes indeterminate-1 {\n 0% {\n opacity: 1;\n transform: translateX(-100%);\n }\n 70% {\n opacity: 1;\n transform: translateX(300%);\n }\n 70.01% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n transform: translateX(300%);\n }\n}\n@keyframes indeterminate-2 {\n 0% {\n opacity: 0;\n transform: translateX(-150%);\n }\n 29.99% {\n opacity: 0;\n }\n 30% {\n opacity: 1;\n transform: translateX(-150%);\n }\n 100% {\n opacity: 1;\n transform: translateX(166.66%);\n }\n}";
|
|
10
10
|
styleInject(css_248z);
|
|
11
11
|
|
|
12
12
|
var classof = classofRaw;
|
|
13
13
|
|
|
14
14
|
// `IsArray` abstract operation
|
|
15
15
|
// https://tc39.es/ecma262/#sec-isarray
|
|
16
|
-
// eslint-disable-next-line es/no-array-isarray -- safe
|
|
16
|
+
// eslint-disable-next-line es-x/no-array-isarray -- safe
|
|
17
17
|
var isArray$1 = Array.isArray || function isArray(argument) {
|
|
18
18
|
return classof(argument) == 'Array';
|
|
19
19
|
};
|