@vonage/vivid 3.0.0-next.26 → 3.0.0-next.29
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 +2 -2
- package/accordion-item/index.js +12 -7
- package/breadcrumb/index.js +17 -16
- package/breadcrumb-item/index.js +2 -2
- package/button/index.js +1 -1
- package/card/index.js +1 -1
- package/checkbox/index.js +1 -1
- package/elevation/index.js +4 -31
- package/fab/index.js +1 -1
- package/header/index.js +29 -52
- package/index.js +2 -2
- package/lib/accordion-item/index.d.ts +0 -1
- package/lib/breadcrumb/breadcrumb.template.d.ts +4 -0
- package/lib/elevation/elevation.d.ts +1 -0
- package/lib/header/header.d.ts +1 -7
- package/lib/header/index.d.ts +1 -0
- package/lib/side-drawer/side-drawer.d.ts +0 -1
- package/package.json +1 -1
- package/popup/index.js +1 -1
- package/shared/index2.js +37 -0
- package/side-drawer/index.js +7 -16
- package/sidenav-item/index.js +5 -2
- package/text-field/index.js +1 -1
- package/tooltip/index.js +1 -1
package/accordion/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h
|
|
|
2
2
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
3
3
|
import { c as classNames } from '../shared/class-names.js';
|
|
4
4
|
|
|
5
|
-
var css_248z = ".
|
|
5
|
+
var css_248z = ".base {\n display: flex;\n flex-direction: column;\n}\n\n::slotted(vwc-accordion-item:not(:only-of-type)) {\n border-bottom: 1px solid var(--vvd-color-neutral-30);\n}";
|
|
6
6
|
styleInject(css_248z);
|
|
7
7
|
|
|
8
8
|
class Accordion extends FoundationElement {
|
|
@@ -45,7 +45,7 @@ __decorate([attr({
|
|
|
45
45
|
let _2 = t => t,
|
|
46
46
|
_t;
|
|
47
47
|
|
|
48
|
-
const getClasses = _ => classNames('
|
|
48
|
+
const getClasses = _ => classNames('base');
|
|
49
49
|
|
|
50
50
|
const AccordionTemplate = () => html(_t || (_t = _2`<div class="${0}">
|
|
51
51
|
<slot></slot>
|
package/accordion-item/index.js
CHANGED
|
@@ -16,7 +16,7 @@ import '../shared/_has.js';
|
|
|
16
16
|
import '../shared/focus.js';
|
|
17
17
|
import '../shared/object-keys.js';
|
|
18
18
|
|
|
19
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.body {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n padding-left: 48px;\n}\n\n.
|
|
19
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.body {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n padding-left: 48px;\n}\n\n.base {\n display: flex;\n flex-direction: column;\n}\n.base:not(.open) .body {\n display: none;\n}\n\n.header {\n padding: 0;\n margin: 0;\n}\n\n.button {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n padding: 16px;\n border: 0 none;\n margin: 0;\n background: transparent;\n cursor: pointer;\n}\n@supports selector(:focus-visible) {\n .button:focus {\n outline: none;\n }\n}\n.button:hover {\n background: var(--vvd-color-neutral-10);\n}\n.button .heading-text {\n flex-grow: 1;\n margin-inline-end: auto;\n text-align: left;\n}\n.button .meta {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n overflow: hidden;\n max-width: 20%;\n flex-shrink: 0;\n color: var(--vvd-color-neutral-70);\n margin-inline-start: 16px;\n text-align: end;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.button .indicator {\n display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n margin-inline-start: 16px;\n}\n.button .icon {\n margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}\n\n.button:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
|
|
20
20
|
styleInject(css_248z);
|
|
21
21
|
|
|
22
22
|
class AccordionItem extends FoundationElement {
|
|
@@ -69,7 +69,9 @@ let _ = t => t,
|
|
|
69
69
|
_t2,
|
|
70
70
|
_t3,
|
|
71
71
|
_t4,
|
|
72
|
-
_t5
|
|
72
|
+
_t5,
|
|
73
|
+
_t6,
|
|
74
|
+
_t7;
|
|
73
75
|
const PANEL = 'panel';
|
|
74
76
|
|
|
75
77
|
const getClasses = ({
|
|
@@ -77,7 +79,7 @@ const getClasses = ({
|
|
|
77
79
|
iconTrailing,
|
|
78
80
|
icon,
|
|
79
81
|
noIndicator
|
|
80
|
-
}) => classNames('
|
|
82
|
+
}) => classNames('base', ['open', open], ['icon', Boolean(icon)], ['icon-trailing', iconTrailing], ['no-indicator', noIndicator]);
|
|
81
83
|
|
|
82
84
|
const AccordionItemTemplate = context => html(_t || (_t = _`
|
|
83
85
|
<div class="${0}">
|
|
@@ -113,15 +115,18 @@ const renderHeaderButton = context => {
|
|
|
113
115
|
</span>
|
|
114
116
|
</button>
|
|
115
117
|
`), x => x.open = !x.open, x => x.open, PANEL, () => focusTemplate, x => affixIconTemplate(x.icon), x => x.heading, when(x => x.meta, html(_t4 || (_t4 = _`<span class="meta">${0}</span>`), x => x.meta)), when(x => !x.noIndicator && !x.iconTrailing, html(_t5 || (_t5 = _`
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
`))));
|
|
118
|
+
${0}
|
|
119
|
+
${0}
|
|
120
|
+
`), when(x => !x.open, html(_t6 || (_t6 = _`<vwc-icon type='chevron-down-solid'></vwc-icon>`))), when(x => x.open, html(_t7 || (_t7 = _`<vwc-icon type='chevron-up-solid'></vwc-icon>`))))));
|
|
119
121
|
};
|
|
120
122
|
|
|
121
123
|
const vividAccordionItem = AccordionItem.compose({
|
|
122
124
|
baseName: 'accordion-item',
|
|
123
125
|
template: AccordionItemTemplate,
|
|
124
|
-
styles: css_248z
|
|
126
|
+
styles: css_248z,
|
|
127
|
+
shadowOptions: {
|
|
128
|
+
delegatesFocus: true
|
|
129
|
+
}
|
|
125
130
|
});
|
|
126
131
|
designSystem.register(vividAccordionItem());
|
|
127
132
|
|
package/breadcrumb/index.js
CHANGED
|
@@ -1,26 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, o as observable, h as html, d as designSystem } from '../shared/index.js';
|
|
2
|
+
import { s as slotted, e as elements } from '../shared/slotted.js';
|
|
2
3
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
3
4
|
import { B as BreadcrumbItem } from '../shared/breadcrumb-item.js';
|
|
4
|
-
import { s as slotted, e as elements } from '../shared/slotted.js';
|
|
5
5
|
import '../shared/anchor.js';
|
|
6
6
|
import '../shared/apply-mixins.js';
|
|
7
7
|
import '../shared/aria-global.js';
|
|
8
8
|
import '../shared/ref.js';
|
|
9
9
|
|
|
10
|
-
/**
|
|
11
|
-
* The template for the {@link @microsoft/fast-foundation#Breadcrumb} component.
|
|
12
|
-
* @public
|
|
13
|
-
*/
|
|
14
|
-
const breadcrumbTemplate = (context, definition) => html `
|
|
15
|
-
<template role="navigation">
|
|
16
|
-
<div role="list" class="list" part="list">
|
|
17
|
-
<slot
|
|
18
|
-
${slotted({ property: "slottedBreadcrumbItems", filter: elements() })}
|
|
19
|
-
></slot>
|
|
20
|
-
</div>
|
|
21
|
-
</template>
|
|
22
|
-
`;
|
|
23
|
-
|
|
24
10
|
/**
|
|
25
11
|
* A Breadcrumb Custom HTML Element.
|
|
26
12
|
* @slot - The default slot for the breadcrumb items
|
|
@@ -88,6 +74,21 @@ __decorate([
|
|
|
88
74
|
observable
|
|
89
75
|
], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
|
|
90
76
|
|
|
77
|
+
let _ = t => t,
|
|
78
|
+
_t;
|
|
79
|
+
const breadcrumbTemplate = () => html(_t || (_t = _`
|
|
80
|
+
<nav aria-label="breadcrumbs" class="base">
|
|
81
|
+
<div role="list" class="list">
|
|
82
|
+
<slot
|
|
83
|
+
${0}
|
|
84
|
+
></slot>
|
|
85
|
+
</div>
|
|
86
|
+
</nav>
|
|
87
|
+
`), slotted({
|
|
88
|
+
property: 'slottedBreadcrumbItems',
|
|
89
|
+
filter: elements()
|
|
90
|
+
}));
|
|
91
|
+
|
|
91
92
|
var css_248z = ".list {\n display: flex;\n}";
|
|
92
93
|
styleInject(css_248z);
|
|
93
94
|
|
package/breadcrumb-item/index.js
CHANGED
|
@@ -21,7 +21,7 @@ import '../shared/web.dom-collections.iterator.js';
|
|
|
21
21
|
import '../shared/object-keys.js';
|
|
22
22
|
import '../shared/focus2.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.base {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n align-items: center;\n color: var(--vvd-color-on-canvas);\n}\n.base vwc-icon {\n margin: 0 16px;\n color: var(--vvd-color-neutral-70);\n font-size: 12px;\n}\n\n.control {\n position: relative;\n font: inherit;\n outline:
|
|
24
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n align-items: center;\n color: var(--vvd-color-on-canvas);\n}\n.base vwc-icon {\n margin: 0 16px;\n color: var(--vvd-color-neutral-70);\n font-size: 12px;\n}\n\n.control {\n position: relative;\n font: inherit;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control:any-link {\n color: var(--vvd-color-cta-70);\n text-decoration: none;\n}\n.control:any-link:hover {\n text-decoration: underline;\n}\n\n.control:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
|
|
25
25
|
styleInject(css_248z);
|
|
26
26
|
|
|
27
27
|
class BreadcrumbItem extends BreadcrumbItem$1 {
|
|
@@ -42,7 +42,7 @@ let _2 = t => t,
|
|
|
42
42
|
const getClasses = _ => classNames('base');
|
|
43
43
|
|
|
44
44
|
const BreadcrumbItemTemplate = (context, definition) => html(_t || (_t = _2`
|
|
45
|
-
<div
|
|
45
|
+
<div role="listitem" class="${0}">
|
|
46
46
|
${0}
|
|
47
47
|
|
|
48
48
|
${0}
|
package/button/index.js
CHANGED
|
@@ -45,7 +45,7 @@ __decorate([attr, __metadata("design:type", String)], Button.prototype, "label",
|
|
|
45
45
|
|
|
46
46
|
applyMixins(Button, AffixIconWithTrailing);
|
|
47
47
|
|
|
48
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n
|
|
48
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\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 vertical-align: middle;\n white-space: nowrap;\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@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control:not(:disabled) {\n cursor: pointer;\n}\n.control:disabled {\n cursor: not-allowed;\n}\n.control.icon-only {\n contain: size;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_button-block-size);\n }\n}\n.control:not(.stacked).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-visible) > .focus-indicator {\n display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n --focus-stroke-gap-color: transparent;\n}";
|
|
49
49
|
styleInject(css_248z);
|
|
50
50
|
|
|
51
51
|
let _ = t => t,
|
package/card/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '../
|
|
1
|
+
import '../shared/index2.js';
|
|
2
2
|
import '../icon/index.js';
|
|
3
3
|
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o as observable, h as html, d as designSystem } from '../shared/index.js';
|
|
4
4
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
package/checkbox/index.js
CHANGED
|
@@ -92,7 +92,7 @@ __decorate([
|
|
|
92
92
|
observable
|
|
93
93
|
], Checkbox$1.prototype, "indeterminate", void 0);
|
|
94
94
|
|
|
95
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n
|
|
95
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n.base {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n --_connotation-color-on-primary: var(--vvd-color-canvas);\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:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-on-canvas);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-on-canvas);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: var(--vvd-color-neutral-20);\n --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n --_appearance-color-text: var(--vvd-color-on-canvas);\n --_appearance-color-fill: var(--vvd-color-neutral-20);\n --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:indeterminate, .indeterminate):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: var(--_connotation-color-primary);\n}\n@supports selector(:focus-visible) {\n .base:focus {\n outline: none;\n }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n .base {\n -webkit-user-select: none;\n user-select: none;\n }\n}\n\n.control {\n position: relative;\n display: inline-flex;\n width: 24px;\n height: 24px;\n align-items: center;\n justify-content: center;\n background-color: var(--_appearance-color-fill);\n border-radius: 3px;\n box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n cursor: pointer;\n}\n\n.indicator {\n font-size: 16px;\n}\n.base:not(.checked) .indicator.checkmark {\n display: none;\n}\n\n.base:not(.indeterminate) .indicator.minus, .base.checked .indicator.minus {\n display: none;\n}\n\nlabel {\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-on-canvas);\n cursor: pointer;\n}\n\n.focus-indicator {\n --focus-inset: -3px;\n --focus-stroke-gap-color: transparent;\n border-radius: 6px;\n}\n.base:not(:focus-visible) .focus-indicator {\n display: none;\n}";
|
|
96
96
|
styleInject(css_248z);
|
|
97
97
|
|
|
98
98
|
const keySpace = ' ';
|
package/elevation/index.js
CHANGED
|
@@ -1,31 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
class Elevation extends FoundationElement {}
|
|
6
|
-
|
|
7
|
-
__decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
|
|
8
|
-
|
|
9
|
-
var css_248z = ":host {\n display: contents;\n}\n\n.control {\n display: contents;\n}\n.control.dp-0 {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-4 {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n --_elevation-fill: var(--vvd-color-surface-8dp);\n --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n --_elevation-fill: var(--vvd-color-surface-16dp);\n --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n --_elevation-fill: var(--vvd-color-surface-2dp);\n --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n background-color: var(--_elevation-fill);\n filter: var(--_elevation-shadow);\n}";
|
|
10
|
-
styleInject(css_248z);
|
|
11
|
-
|
|
12
|
-
let _ = t => t,
|
|
13
|
-
_t;
|
|
14
|
-
|
|
15
|
-
const getClasses = ({
|
|
16
|
-
dp
|
|
17
|
-
}) => classNames('control', [`dp-${dp}`, Boolean(dp)]);
|
|
18
|
-
|
|
19
|
-
const elevationTemplate = () => html(_t || (_t = _`
|
|
20
|
-
<div class="${0}" part="base">
|
|
21
|
-
<slot></slot>
|
|
22
|
-
</div>`), getClasses);
|
|
23
|
-
|
|
24
|
-
const vividElevation = Elevation.compose({
|
|
25
|
-
baseName: 'elevation',
|
|
26
|
-
template: elevationTemplate,
|
|
27
|
-
styles: css_248z
|
|
28
|
-
});
|
|
29
|
-
designSystem.register(vividElevation());
|
|
30
|
-
|
|
31
|
-
export { vividElevation };
|
|
1
|
+
import '../shared/index.js';
|
|
2
|
+
export { v as vividElevation } from '../shared/index2.js';
|
|
3
|
+
import '../shared/style-inject.es.js';
|
|
4
|
+
import '../shared/class-names.js';
|
package/fab/index.js
CHANGED
|
@@ -20,7 +20,7 @@ import '../shared/object-keys.js';
|
|
|
20
20
|
import '../shared/form-associated.js';
|
|
21
21
|
import '../shared/aria-global.js';
|
|
22
22
|
|
|
23
|
-
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 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\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, var(--_elevation-fill));\n block-size: var(--_fab-block-size);\n border-radius: var(--_fab-border-radius);\n color: var(--_appearance-color-text, var(--vvd-color-on-canvas));\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n
|
|
23
|
+
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 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\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, var(--_elevation-fill));\n block-size: var(--_fab-block-size);\n border-radius: var(--_fab-border-radius);\n color: var(--_appearance-color-text, var(--vvd-color-on-canvas));\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n transition: background-color 0.15s linear, filter 0.15s linear;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-accent {\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.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 {\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@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control.density-extended {\n --_fab-border-radius: 30px;\n --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n --_fab-border-radius: 24px;\n --_fab-block-size: 40px;\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):hover {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon {\n font-size: 20px;\n}\n.icon-trailing .icon {\n order: 1;\n}\n\n:not(:focus-visible) .focus-indicator {\n display: none;\n}";
|
|
24
24
|
styleInject(css_248z);
|
|
25
25
|
|
|
26
26
|
class Fab extends Button {}
|
package/header/index.js
CHANGED
|
@@ -1,84 +1,61 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { E as Elevation } from '../shared/index2.js';
|
|
2
|
+
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
2
3
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
3
4
|
import '../shared/web.dom-collections.iterator.js';
|
|
4
|
-
import { w as when } from '../shared/when.js';
|
|
5
5
|
import { c as classNames } from '../shared/class-names.js';
|
|
6
6
|
import '../shared/export.js';
|
|
7
7
|
import '../shared/object-keys.js';
|
|
8
8
|
import '../shared/iterators.js';
|
|
9
9
|
|
|
10
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n
|
|
10
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n --_header-block-size: 64px;\n block-size: var(--_header-block-size);\n inline-size: 100%;\n}\n.base .header-content {\n display: inline-flex;\n align-items: center;\n column-gap: 4px;\n}\n\n.container {\n display: flex;\n box-sizing: border-box;\n justify-content: space-between;\n block-size: inherit;\n color: var(--vvd-color-on-canvas);\n column-gap: 12px;\n padding-block: 8px;\n padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n background-color: var(--vvd-color-canvas);\n}\n\n.app-content {\n --_header-block-size: 64px;\n}";
|
|
11
11
|
styleInject(css_248z);
|
|
12
12
|
|
|
13
|
-
var _Header_updateElevatedState;
|
|
14
13
|
class Header extends FoundationElement {
|
|
15
14
|
constructor() {
|
|
16
15
|
super(...arguments);
|
|
17
|
-
this.
|
|
16
|
+
this.elevationShadow = false;
|
|
18
17
|
this.alternate = false;
|
|
19
|
-
this._elevated = false;
|
|
20
|
-
|
|
21
|
-
_Header_updateElevatedState.set(this, () => {
|
|
22
|
-
this._elevated = !this._elevated;
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
connectedCallback() {
|
|
27
|
-
super.connectedCallback();
|
|
28
|
-
window.addEventListener('scroll', __classPrivateFieldGet(this, _Header_updateElevatedState, "f"));
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
disconnectedCallback() {
|
|
32
|
-
super.disconnectedCallback();
|
|
33
|
-
window.removeEventListener('scroll', __classPrivateFieldGet(this, _Header_updateElevatedState, "f"));
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
get elevated() {
|
|
37
|
-
return this._elevated && false || this.fixed && window.pageYOffset > 0;
|
|
38
18
|
}
|
|
39
19
|
|
|
40
20
|
}
|
|
41
|
-
_Header_updateElevatedState = new WeakMap();
|
|
42
|
-
|
|
43
|
-
__decorate([attr, __metadata("design:type", String)], Header.prototype, "heading", void 0);
|
|
44
21
|
|
|
45
22
|
__decorate([attr({
|
|
23
|
+
attribute: 'elevation-shadow',
|
|
46
24
|
mode: 'boolean'
|
|
47
|
-
}), __metadata("design:type", Object)], Header.prototype, "
|
|
25
|
+
}), __metadata("design:type", Object)], Header.prototype, "elevationShadow", void 0);
|
|
48
26
|
|
|
49
27
|
__decorate([attr({
|
|
50
28
|
mode: 'boolean'
|
|
51
29
|
}), __metadata("design:type", Object)], Header.prototype, "alternate", void 0);
|
|
52
30
|
|
|
53
|
-
__decorate([observable, __metadata("design:type", Object)], Header.prototype, "_elevated", void 0);
|
|
54
|
-
|
|
55
|
-
__decorate([volatile, __metadata("design:type", Object), __metadata("design:paramtypes", [])], Header.prototype, "elevated", null);
|
|
56
|
-
|
|
57
31
|
let _ = t => t,
|
|
58
|
-
_t
|
|
59
|
-
_t2;
|
|
32
|
+
_t;
|
|
60
33
|
|
|
61
|
-
const
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
elevated
|
|
65
|
-
}) => classNames('control', ['fixed', Boolean(fixed)], ['alternate', Boolean(alternate)], ['elevated', Boolean(elevated)]);
|
|
34
|
+
const getPartAlternate = ({
|
|
35
|
+
alternate
|
|
36
|
+
}) => classNames(['vvd-theme-alternate', Boolean(alternate)]);
|
|
66
37
|
|
|
67
|
-
const headerTemplate =
|
|
38
|
+
const headerTemplate = context => {
|
|
39
|
+
const elevationTag = context.tagFor(Elevation);
|
|
68
40
|
return html(_t || (_t = _`
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
41
|
+
<${0} dp="4" ?no-shadow=${0}>
|
|
42
|
+
<header class="base" part="base">
|
|
43
|
+
<!-- a container is needed to distinguish the surface background color of the
|
|
44
|
+
element from its shadow when applying elevation with alternate -->
|
|
45
|
+
<div class="container" part="${0}">
|
|
46
|
+
<section class="header-content">
|
|
47
|
+
<slot></slot>
|
|
48
|
+
</section>
|
|
49
|
+
<section class="header-content" role="toolbar">
|
|
50
|
+
<slot name="actionItems"></slot>
|
|
51
|
+
</section>
|
|
52
|
+
</div>
|
|
53
|
+
</header>
|
|
54
|
+
</${0}>
|
|
78
55
|
<div class="app-content">
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
`),
|
|
56
|
+
<slot name="app-content"></slot>
|
|
57
|
+
</div>
|
|
58
|
+
`), elevationTag, x => !x.elevationShadow, getPartAlternate, elevationTag);
|
|
82
59
|
};
|
|
83
60
|
|
|
84
61
|
const vividHeader = Header.compose({
|
package/index.js
CHANGED
|
@@ -9,7 +9,7 @@ export { vividButton } from './button/index.js';
|
|
|
9
9
|
export { vividCalendar } from './calendar/index.js';
|
|
10
10
|
export { vividCalendarEvent } from './calendar-event/index.js';
|
|
11
11
|
export { vividCard } from './card/index.js';
|
|
12
|
-
export { vividElevation } from './
|
|
12
|
+
export { v as vividElevation } from './shared/index2.js';
|
|
13
13
|
export { vividFab } from './fab/index.js';
|
|
14
14
|
export { vividIcon } from './icon/index.js';
|
|
15
15
|
export { vividLayout } from './layout/index.js';
|
|
@@ -45,9 +45,9 @@ import './shared/button.js';
|
|
|
45
45
|
import './shared/form-associated.js';
|
|
46
46
|
import './shared/aria-global.js';
|
|
47
47
|
import './shared/ref.js';
|
|
48
|
+
import './shared/slotted.js';
|
|
48
49
|
import './shared/breadcrumb-item.js';
|
|
49
50
|
import './shared/anchor.js';
|
|
50
|
-
import './shared/slotted.js';
|
|
51
51
|
import './shared/text-anchor.template.js';
|
|
52
52
|
import './shared/calendar-event.js';
|
|
53
53
|
import './shared/es.object.assign.js';
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import '../icon';
|
|
2
2
|
import '../focus';
|
|
3
3
|
import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
|
|
4
|
-
import '../icon';
|
|
5
4
|
export declare const vividAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { ViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
|
|
3
|
+
import type { Breadcrumb } from './breadcrumb';
|
|
4
|
+
export declare const breadcrumbTemplate: FoundationElementTemplate<ViewTemplate<Breadcrumb>>;
|
package/lib/header/header.d.ts
CHANGED
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
2
|
export declare class Header extends FoundationElement {
|
|
3
|
-
|
|
4
|
-
heading?: string;
|
|
5
|
-
fixed: boolean;
|
|
3
|
+
elevationShadow: boolean;
|
|
6
4
|
alternate: boolean;
|
|
7
|
-
_elevated: boolean;
|
|
8
|
-
connectedCallback(): void;
|
|
9
|
-
disconnectedCallback(): void;
|
|
10
|
-
get elevated(): boolean;
|
|
11
5
|
}
|
package/lib/header/index.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
+
import '../elevation';
|
|
1
2
|
import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
|
|
2
3
|
export declare const vividHeader: (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/package.json
CHANGED
package/popup/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '../
|
|
1
|
+
import '../shared/index2.js';
|
|
2
2
|
import '../button/index.js';
|
|
3
3
|
import { F as FoundationElement, c as __classPrivateFieldGet, i as __classPrivateFieldSet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
4
4
|
import { s as speciesConstructor$1, f as functionApply } from '../shared/icon.js';
|
package/shared/index2.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from './index.js';
|
|
2
|
+
import { s as styleInject } from './style-inject.es.js';
|
|
3
|
+
import { c as classNames } from './class-names.js';
|
|
4
|
+
|
|
5
|
+
class Elevation extends FoundationElement {}
|
|
6
|
+
|
|
7
|
+
__decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
|
|
8
|
+
|
|
9
|
+
__decorate([attr({
|
|
10
|
+
attribute: 'no-shadow',
|
|
11
|
+
mode: 'boolean'
|
|
12
|
+
}), __metadata("design:type", Boolean)], Elevation.prototype, "noShadow", void 0);
|
|
13
|
+
|
|
14
|
+
var css_248z = ":host {\n display: contents;\n}\n\n.control {\n display: contents;\n}\n.control.dp-0 {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-4 {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n --_elevation-fill: var(--vvd-color-surface-8dp);\n --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n --_elevation-fill: var(--vvd-color-surface-16dp);\n --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n --_elevation-fill: var(--vvd-color-surface-2dp);\n --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n background-color: var(--_elevation-fill);\n filter: var(--_elevation-shadow);\n transition: background-color 0.15s linear, filter 0.15s linear;\n}\n.control.no-shadow ::slotted(*) {\n filter: none;\n}";
|
|
15
|
+
styleInject(css_248z);
|
|
16
|
+
|
|
17
|
+
let _ = t => t,
|
|
18
|
+
_t;
|
|
19
|
+
|
|
20
|
+
const getClasses = ({
|
|
21
|
+
dp,
|
|
22
|
+
noShadow
|
|
23
|
+
}) => classNames('control', [`dp-${dp}`, Boolean(dp)], ['no-shadow', Boolean(noShadow)]);
|
|
24
|
+
|
|
25
|
+
const elevationTemplate = () => html(_t || (_t = _`
|
|
26
|
+
<div class="${0}" part="base">
|
|
27
|
+
<slot></slot>
|
|
28
|
+
</div>`), getClasses);
|
|
29
|
+
|
|
30
|
+
const vividElevation = Elevation.compose({
|
|
31
|
+
baseName: 'elevation',
|
|
32
|
+
template: elevationTemplate,
|
|
33
|
+
styles: css_248z
|
|
34
|
+
});
|
|
35
|
+
designSystem.register(vividElevation());
|
|
36
|
+
|
|
37
|
+
export { Elevation as E, vividElevation as v };
|
package/side-drawer/index.js
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata,
|
|
1
|
+
import { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html$2, d as designSystem } from '../shared/index.js';
|
|
2
2
|
import '../shared/web.dom-collections.iterator.js';
|
|
3
3
|
import { V as commonjsGlobal } from '../shared/export.js';
|
|
4
4
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
5
5
|
import { w as when } from '../shared/when.js';
|
|
6
6
|
import { r as ref } from '../shared/ref.js';
|
|
7
|
-
import { s as slotted } from '../shared/slotted.js';
|
|
8
7
|
import { c as classNames } from '../shared/class-names.js';
|
|
9
8
|
import '../shared/object-keys.js';
|
|
10
9
|
import '../shared/iterators.js';
|
|
@@ -8599,9 +8598,7 @@ __decorate([attr({
|
|
|
8599
8598
|
|
|
8600
8599
|
__decorate([attr, __metadata("design:type", String)], SideDrawer.prototype, "position", void 0);
|
|
8601
8600
|
|
|
8602
|
-
|
|
8603
|
-
|
|
8604
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n display: flex;\n block-size: 100vh;\n}\n\n:host([position=end]) {\n flex-direction: row-reverse;\n}\n\n.control {\n position: fixed;\n z-index: var(--side-drawer-z-index, 6);\n top: auto;\n bottom: 0;\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-shrink: 0;\n background-color: var(--side-drawer-background-color, var(--vvd-color-canvas));\n block-size: inherit;\n color: var(--side-drawer-color, var(--vvd-color-on-canvas));\n inline-size: var(--side-drawer-inline-size, 280px);\n}\n.control.alternate {\n background-color: var(--vvd-color-canvas);\n}\n.control:not(.open).end {\n transform: translateX(100%);\n}\n.control:not(.open):not(.end) {\n transform: translateX(-100%);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n margin-inline-start: var(--side-drawer-inline-size, 280px);\n}\n.control.control.open:not(.modal).end + .side-drawer-app-content {\n margin-inline-end: var(--side-drawer-inline-size, 280px);\n margin-inline-start: 0;\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.side-drawer-header {\n font: 500 condensed 26px / 36px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n height: 64px;\n flex-shrink: 0;\n align-items: center;\n padding-inline-end: var(--side-drawer-padding-header, 16px);\n padding-inline-start: var(--side-drawer-padding-header, 16px);\n}\n:not(.withHeader) .side-drawer-header {\n display: none;\n}\n\n.side-drawer-content {\n background-color: inherit;\n margin-block: 12px;\n overflow-y: auto;\n padding-inline-end: var(--side-drawer-padding-body, 16px);\n padding-inline-start: var(--side-drawer-padding-body, 16px);\n}\n\n.modal:not(.end) {\n inset-inline-start: 0;\n}\n.modal.end {\n inset-inline-end: 0;\n}\n\n.scrim {\n background-color: var(--vvd-color-on-canvas);\n opacity: 0.5;\n position: fixed;\n z-index: calc(--side-drawer-z-index - 1);\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n.scrim:not(.open) {\n display: none;\n}";
|
|
8601
|
+
var css_248z = ".control {\n position: fixed;\n background-color: var(--vvd-color-canvas);\n color: var(--vvd-color-on-canvas);\n inline-size: 280px;\n inset-block: 0;\n overflow-y: auto;\n}\n.control.modal {\n z-index: 1;\n}\n.control.alternate {\n background-color: var(--vvd-color-canvas);\n}\n.control.position-end {\n inset-inline-end: 0;\n}\n.control:not(.open).position-end {\n transform: translateX(100%);\n}\n.control:not(.open):not(.position-end) {\n transform: translateX(-100%);\n}\n.control.open:not(.modal).position-end + .side-drawer-app-content {\n margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.position-end) + .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-on-canvas);\n opacity: 0.5;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n.scrim:not(.open) {\n display: none;\n}";
|
|
8605
8602
|
styleInject(css_248z);
|
|
8606
8603
|
|
|
8607
8604
|
let _ = t => t,
|
|
@@ -8612,25 +8609,19 @@ const getClasses = ({
|
|
|
8612
8609
|
alternate,
|
|
8613
8610
|
modal,
|
|
8614
8611
|
open,
|
|
8615
|
-
position
|
|
8616
|
-
|
|
8617
|
-
}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], ['end', position === 'end'], ['withHeader', Boolean(headerSlottedContent === null || headerSlottedContent === void 0 ? void 0 : headerSlottedContent.length)]);
|
|
8612
|
+
position
|
|
8613
|
+
}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], [`position-${position}`, Boolean(position)]);
|
|
8618
8614
|
|
|
8619
8615
|
const getScrimClasses = ({
|
|
8620
8616
|
open
|
|
8621
8617
|
}) => classNames('scrim', ['open', open]);
|
|
8622
8618
|
|
|
8623
8619
|
const sideDrawerTemplate = () => html$2(_t || (_t = _`
|
|
8624
|
-
<aside class="${0}" part="${0}"
|
|
8620
|
+
<aside class="${0}" part="base ${0}"
|
|
8625
8621
|
@keydown="${0}" ${0}>
|
|
8626
8622
|
|
|
8627
|
-
|
|
8628
|
-
<slot name="header" ${0}></slot>
|
|
8629
|
-
</header>
|
|
8623
|
+
<slot></slot>
|
|
8630
8624
|
|
|
8631
|
-
<div class="side-drawer-content">
|
|
8632
|
-
<slot></slot>
|
|
8633
|
-
</div>
|
|
8634
8625
|
</aside>
|
|
8635
8626
|
|
|
8636
8627
|
<div class="side-drawer-app-content">
|
|
@@ -8638,7 +8629,7 @@ const sideDrawerTemplate = () => html$2(_t || (_t = _`
|
|
|
8638
8629
|
</div>
|
|
8639
8630
|
|
|
8640
8631
|
${0}
|
|
8641
|
-
`), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', (x, c) => handleKeydown(x, c.event), ref('asideEl'),
|
|
8632
|
+
`), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', (x, c) => handleKeydown(x, c.event), ref('asideEl'), when(x => x.modal, html$2(_t2 || (_t2 = _`<div class="${0}" ${0} @click="${0}"></div>`), getScrimClasses, ref('scrimEl'), x => x.open = false)));
|
|
8642
8633
|
|
|
8643
8634
|
const handleKeydown = (x, {
|
|
8644
8635
|
key
|
package/sidenav-item/index.js
CHANGED
|
@@ -21,7 +21,7 @@ import '../shared/aria-global.js';
|
|
|
21
21
|
import '../shared/ref.js';
|
|
22
22
|
import '../shared/focus2.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 font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: transparent;\n border-radius: 6px;\n color: var(--vvd-color-on-canvas);\n gap: 8px;\n -webkit-hyphens: auto;\n hyphens: auto;\n inline-size: 100%;\n min-block-size: 40px;\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 font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: transparent;\n border-radius: 6px;\n color: var(--vvd-color-on-canvas);\n gap: 8px;\n -webkit-hyphens: auto;\n hyphens: auto;\n inline-size: 100%;\n min-block-size: 40px;\n padding-block: 10px;\n padding-inline: 8px;\n text-decoration: none;\n vertical-align: middle;\n word-break: break-word;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control.icon-only {\n display: flex;\n block-size: 40px;\n inline-size: 40px;\n place-content: center;\n}\n\n.control:focus {\n background-color: var(--vvd-color-neutral-20);\n}\n\n.control:not(:focus-visible) .focus-indicator {\n display: none;\n}\n\n.icon {\n font-size: 20px;\n}";
|
|
25
25
|
styleInject(css_248z);
|
|
26
26
|
|
|
27
27
|
class SidenavItem extends TextAnchor {}
|
|
@@ -36,7 +36,10 @@ const SidenavItemTemplate = (context, definition) => html(_t || (_t = _`
|
|
|
36
36
|
const vividSidenavItem = SidenavItem.compose({
|
|
37
37
|
baseName: 'sidenav-item',
|
|
38
38
|
template: SidenavItemTemplate,
|
|
39
|
-
styles: css_248z
|
|
39
|
+
styles: css_248z,
|
|
40
|
+
shadowOptions: {
|
|
41
|
+
delegatesFocus: true
|
|
42
|
+
}
|
|
40
43
|
});
|
|
41
44
|
designSystem.register(vividSidenavItem());
|
|
42
45
|
|
package/text-field/index.js
CHANGED
|
@@ -293,7 +293,7 @@ __decorate([volatile, __metadata("design:type", Object), __metadata("design:para
|
|
|
293
293
|
|
|
294
294
|
applyMixins(TextField, AffixIcon);
|
|
295
295
|
|
|
296
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 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-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.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-on-canvas);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-on-canvas);\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-50);\n --_appearance-color-fill: var(--vvd-color-neutral-20);\n --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-50);\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-on-canvas);\n --_appearance-color-fill: var(--vvd-color-neutral-20);\n --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-50);\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);\n --_appearance-color-fill: var(--vvd-color-alert-20);\n --_appearance-color-outline: var(--vvd-color-alert);\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 ((-webkit-user-select: none) or (user-select: none)) {\n .base {\n -webkit-user-select: none;\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-70);\n}\n.base.disabled {\n --_low-ink-color: var(--vvd-color-neutral-50);\n}\n\n.label {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n contain: inline-size;\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-on-canvas);\n}\n.base.disabled .label {\n color: var(--vvd-color-neutral-50);\n}\n\n.char-count {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n color: var(--_low-ink-color);\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 font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\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
|
|
296
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 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-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.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-on-canvas);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-on-canvas);\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-50);\n --_appearance-color-fill: var(--vvd-color-neutral-20);\n --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-50);\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-on-canvas);\n --_appearance-color-fill: var(--vvd-color-neutral-20);\n --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-50);\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);\n --_appearance-color-fill: var(--vvd-color-alert-20);\n --_appearance-color-outline: var(--vvd-color-alert);\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 ((-webkit-user-select: none) or (user-select: none)) {\n .base {\n -webkit-user-select: none;\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-70);\n}\n.base.disabled {\n --_low-ink-color: var(--vvd-color-neutral-50);\n}\n\n.label {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n contain: inline-size;\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-on-canvas);\n}\n.base.disabled .label {\n color: var(--vvd-color-neutral-50);\n}\n\n.char-count {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n color: var(--_low-ink-color);\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 font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\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 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 inset-inline-start: 16px;\n}\n.icon + .control {\n padding-inline-start: 44px;\n}\n\n.helper-text {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n color: var(--_low-ink-color);\n grid-column: 1/4;\n margin-inline-start: 16px;\n}\n\n.error-message {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n color: var(--vvd-color-on-canvas);\n contain: inline-size;\n grid-column: 2/4;\n}\n.error-message-icon {\n color: var(--vvd-color-alert);\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}";
|
|
297
297
|
styleInject(css_248z);
|
|
298
298
|
|
|
299
299
|
let _ = t => t,
|
package/tooltip/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h
|
|
|
3
3
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
4
4
|
import '../shared/web.dom-collections.iterator.js';
|
|
5
5
|
import { c as classNames } from '../shared/class-names.js';
|
|
6
|
-
import '../
|
|
6
|
+
import '../shared/index2.js';
|
|
7
7
|
import '../button/index.js';
|
|
8
8
|
import '../icon/index.js';
|
|
9
9
|
import '../shared/icon.js';
|