@vonage/vivid 3.0.0-next.11 → 3.0.0-next.14
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/README.md +49 -4
- package/accordion-item/index.js +3 -8
- package/badge/index.js +8 -15
- package/banner/index.js +14 -5
- package/breadcrumb-item/index.js +3 -5
- package/button/index.js +24 -17
- package/calendar/index.js +1 -0
- package/card/index.js +136 -0
- package/elevation/index.js +1 -1
- package/icon/index.js +7 -3
- package/index.js +2 -1
- package/layout/index.js +1 -1
- package/lib/accordion-item/accordion-item.d.ts +2 -2
- package/lib/badge/badge.d.ts +4 -4
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +1 -1
- package/lib/button/button.d.ts +5 -4
- package/lib/card/card.d.ts +10 -0
- package/lib/card/card.template.d.ts +4 -0
- package/lib/card/index.d.ts +5 -0
- package/lib/enums.d.ts +8 -3
- package/lib/icon/icon.d.ts +3 -2
- package/lib/layout/layout.d.ts +3 -3
- package/lib/text-anchor/text-anchor.d.ts +1 -1
- package/lib/tooltip/tooltip.d.ts +1 -1
- package/package.json +1 -1
- package/popup/index.js +3 -2
- package/progress/index.js +3 -2
- package/progress-ring/index.js +1 -1
- package/shared/es.object.assign.js +2 -1
- package/shared/icon.js +5 -10
- package/shared/object-set-prototype-of.js +1009 -0
- package/shared/patterns/focus.d.ts +3 -0
- package/shared/patterns/index.d.ts +1 -0
- package/shared/text-anchor.js +2 -11
- package/shared/web.dom-collections.iterator.js +51 -1057
- package/side-drawer/index.js +1 -0
- package/sidenav-item/index.js +2 -1
- package/text/index.js +2 -1
- package/text-anchor/index.js +2 -1
- package/tooltip/index.js +2 -4
package/README.md
CHANGED
|
@@ -1,7 +1,52 @@
|
|
|
1
|
-
|
|
1
|
+
<div class="home-page-hero">
|
|
2
|
+
<a href="https://github.com/vonage/vivid-3">
|
|
3
|
+
<img src="/vivid-logo.svg" style="" alt="Vivid Logo" width="120">
|
|
4
|
+
</a>
|
|
5
|
+
<h1>Welcome to Vivid</h1>
|
|
2
6
|
|
|
3
|
-
|
|
7
|
+
[![codecov][codecov-shield]][codecov-url]
|
|
8
|
+
[![Contributors][contributors-shield]][contributors-url]
|
|
9
|
+
[![Forks][forks-shield]][forks-url]
|
|
10
|
+
[![Stargazers][stars-shield]][stars-url]
|
|
11
|
+
[![Issues][issues-shield]][issues-url]
|
|
12
|
+
[![Apache 2.0 License][license-shield]][license-url]
|
|
4
13
|
|
|
5
|
-
## Running unit tests
|
|
6
14
|
|
|
7
|
-
|
|
15
|
+
<h6>
|
|
16
|
+
Vonage's design system platform targeted to provide </br>incorporated, battery-charged web components.
|
|
17
|
+
</h6>
|
|
18
|
+
<a class="home-page-hero-docs-btn" href="https://vivid.deno.dev"><strong>Explore the docs</strong></a>
|
|
19
|
+
<div class="home-page-hero-docs-links">
|
|
20
|
+
<a href="https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=bug_report.md&title=">Report Bug</a>
|
|
21
|
+
<span>|</span>
|
|
22
|
+
<a href="https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=feature_request.md&title=">Request Feature</a>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
### Installation
|
|
27
|
+
|
|
28
|
+
run:
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
npm install codemirror
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
use:
|
|
35
|
+
|
|
36
|
+
```js
|
|
37
|
+
import '@vonage/vivid/button';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<vwc-button label="Click me"></vwc-button>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Roadmap
|
|
45
|
+
|
|
46
|
+
[view components status](https://github.com/orgs/Vonage/projects/6)
|
|
47
|
+
|
|
48
|
+
Follow our API planning on the [Vivid project components' view](https://github.com/orgs/Vonage/projects/3/views/13)
|
|
49
|
+
|
|
50
|
+
We publish a _next_ release on every successful merge to main, so you never need to wait for a new stable version to make use of any updates.
|
|
51
|
+
|
|
52
|
+
See the [open issues](https://github.com/vonage/vivid-3/issues) for a full list of proposed features (and known issues).
|
package/accordion-item/index.js
CHANGED
|
@@ -6,6 +6,7 @@ import { a as applyMixins } from '../shared/apply-mixins.js';
|
|
|
6
6
|
import { w as when } from '../shared/when.js';
|
|
7
7
|
import { c as classNames } from '../shared/class-names.js';
|
|
8
8
|
import '../icon/index.js';
|
|
9
|
+
import '../shared/object-set-prototype-of.js';
|
|
9
10
|
import '../shared/icon.js';
|
|
10
11
|
import '../shared/_has.js';
|
|
11
12
|
|
|
@@ -15,9 +16,7 @@ styleInject(css_248z);
|
|
|
15
16
|
class AccordionItem extends FoundationElement {
|
|
16
17
|
constructor() {
|
|
17
18
|
super(...arguments);
|
|
18
|
-
this.heading = '';
|
|
19
19
|
this.noIndicator = false;
|
|
20
|
-
this.meta = '';
|
|
21
20
|
this.open = false;
|
|
22
21
|
}
|
|
23
22
|
|
|
@@ -40,9 +39,7 @@ class AccordionItem extends FoundationElement {
|
|
|
40
39
|
|
|
41
40
|
}
|
|
42
41
|
|
|
43
|
-
__decorate([attr(
|
|
44
|
-
mode: 'fromView'
|
|
45
|
-
}), __metadata("design:type", Object)], AccordionItem.prototype, "heading", void 0);
|
|
42
|
+
__decorate([attr, __metadata("design:type", String)], AccordionItem.prototype, "heading", void 0);
|
|
46
43
|
|
|
47
44
|
__decorate([attr({
|
|
48
45
|
attribute: 'heading-level'
|
|
@@ -53,9 +50,7 @@ __decorate([attr({
|
|
|
53
50
|
attribute: 'no-indicator'
|
|
54
51
|
}), __metadata("design:type", Object)], AccordionItem.prototype, "noIndicator", void 0);
|
|
55
52
|
|
|
56
|
-
__decorate([attr(
|
|
57
|
-
mode: 'fromView'
|
|
58
|
-
}), __metadata("design:type", Object)], AccordionItem.prototype, "meta", void 0);
|
|
53
|
+
__decorate([attr, __metadata("design:type", String)], AccordionItem.prototype, "meta", void 0);
|
|
59
54
|
|
|
60
55
|
__decorate([attr({
|
|
61
56
|
mode: 'boolean'
|
package/badge/index.js
CHANGED
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
import '../icon/index.js';
|
|
2
2
|
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
3
|
-
import '../shared/web.dom-collections.iterator.js';
|
|
4
3
|
import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
|
|
5
4
|
import { a as applyMixins } from '../shared/apply-mixins.js';
|
|
6
5
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
7
6
|
import { c as classNames } from '../shared/class-names.js';
|
|
8
7
|
import '../shared/icon.js';
|
|
8
|
+
import '../shared/object-set-prototype-of.js';
|
|
9
9
|
import '../shared/_has.js';
|
|
10
10
|
import '../shared/when.js';
|
|
11
|
+
import '../shared/web.dom-collections.iterator.js';
|
|
11
12
|
|
|
12
|
-
class Badge extends FoundationElement {
|
|
13
|
-
constructor() {
|
|
14
|
-
super(...arguments);
|
|
15
|
-
this.text = '';
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
}
|
|
13
|
+
class Badge extends FoundationElement {}
|
|
19
14
|
|
|
20
15
|
__decorate([attr, __metadata("design:type", String)], Badge.prototype, "connotation", void 0);
|
|
21
16
|
|
|
@@ -23,15 +18,13 @@ __decorate([attr, __metadata("design:type", String)], Badge.prototype, "shape",
|
|
|
23
18
|
|
|
24
19
|
__decorate([attr, __metadata("design:type", String)], Badge.prototype, "appearance", void 0);
|
|
25
20
|
|
|
26
|
-
__decorate([attr, __metadata("design:type", String)], Badge.prototype, "
|
|
21
|
+
__decorate([attr, __metadata("design:type", String)], Badge.prototype, "density", void 0);
|
|
27
22
|
|
|
28
|
-
__decorate([attr(
|
|
29
|
-
mode: 'fromView'
|
|
30
|
-
}), __metadata("design:type", Object)], Badge.prototype, "text", void 0);
|
|
23
|
+
__decorate([attr, __metadata("design:type", String)], Badge.prototype, "text", void 0);
|
|
31
24
|
|
|
32
25
|
applyMixins(Badge, AffixIconWithTrailing);
|
|
33
26
|
|
|
34
|
-
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
|
|
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: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n --connotation-basis: var(--vvd-color-cta);\n --connotation-soft: var(--vvd-color-cta-20);\n --connotation-contrast: var(--vvd-color-cta-90);\n}\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-basis: var(--vvd-color-success);\n --connotation-soft: var(--vvd-color-success-20);\n --connotation-contrast: var(--vvd-color-success-90);\n}\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n --connotation-basis: var(--vvd-color-alert);\n --connotation-soft: var(--vvd-color-alert-20);\n --connotation-contrast: var(--vvd-color-alert-90);\n}\n.control.connotation-warning {\n --connotation: var(--vvd-color-warning);\n --on-connotation: var(--vvd-color-on-warning);\n --connotation-basis: var(--vvd-color-warning);\n --connotation-soft: var(--vvd-color-warning-20);\n --connotation-contrast: var(--vvd-color-warning-90);\n}\n.control.connotation-info {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n --connotation-basis: var(--vvd-color-info);\n --connotation-soft: var(--vvd-color-info-20);\n --connotation-contrast: var(--vvd-color-info-90);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-info) {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n --connotation-basis: var(--vvd-color-neutral);\n --connotation-soft: var(--vvd-color-neutral-20);\n --connotation-contrast: var(--vvd-color-neutral-90);\n}\n.control {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation);\n --_appearance-color-outline: transaprent;\n}\n.control.appearance-duotone {\n --_appearance-color-text: var(--connotation-contrast);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--connotation-basis);\n}\n.control.appearance-subtle {\n --_appearance-color-text: var(--connotation-contrast);\n --_appearance-color-fill: var(--connotation-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}";
|
|
35
28
|
styleInject(css_248z);
|
|
36
29
|
|
|
37
30
|
let _ = t => t,
|
|
@@ -41,9 +34,9 @@ const getClasses = ({
|
|
|
41
34
|
connotation,
|
|
42
35
|
appearance,
|
|
43
36
|
shape,
|
|
44
|
-
|
|
37
|
+
density,
|
|
45
38
|
iconTrailing
|
|
46
|
-
}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`
|
|
39
|
+
}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`density-${density}`, Boolean(density)], ['icon-trailing', iconTrailing]);
|
|
47
40
|
|
|
48
41
|
const badgeTemplate = context => {
|
|
49
42
|
const affixIconTemplate = affixIconTemplateFactory(context);
|
package/banner/index.js
CHANGED
|
@@ -7,6 +7,7 @@ import '../button/index.js';
|
|
|
7
7
|
import '../text-anchor/index.js';
|
|
8
8
|
import { w as when } from '../shared/when.js';
|
|
9
9
|
import { c as classNames } from '../shared/class-names.js';
|
|
10
|
+
import '../shared/object-set-prototype-of.js';
|
|
10
11
|
import '../shared/icon.js';
|
|
11
12
|
import '../shared/_has.js';
|
|
12
13
|
import '../icon/index.js';
|
|
@@ -16,7 +17,7 @@ import '../shared/text-anchor.js';
|
|
|
16
17
|
import '../shared/anchor.js';
|
|
17
18
|
import '../shared/text-anchor.template.js';
|
|
18
19
|
|
|
19
|
-
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: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-firm: var(--vvd-color-success-70);\n}\n
|
|
20
|
+
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: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-firm: var(--vvd-color-success-70);\n}\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n --connotation-firm: var(--vvd-color-alert-70);\n}\n.control.connotation-announcement {\n --connotation: var(--vvd-color-announcement);\n --on-connotation: var(--vvd-color-on-announcement);\n --connotation-firm: var(--vvd-color-announcement-70);\n}\n.control.connotation-warning {\n --connotation: var(--vvd-color-warning);\n --on-connotation: var(--vvd-color-on-warning);\n --connotation-firm: var(--vvd-color-warning-70);\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n --connotation-firm: var(--vvd-color-info-70);\n}\n.control {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation);\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}";
|
|
20
21
|
styleInject(css_248z);
|
|
21
22
|
|
|
22
23
|
var Connotation;
|
|
@@ -57,12 +58,20 @@ var Appearance;
|
|
|
57
58
|
Appearance["Ghost"] = "ghost";
|
|
58
59
|
})(Appearance || (Appearance = {}));
|
|
59
60
|
|
|
61
|
+
var Density;
|
|
62
|
+
|
|
63
|
+
(function (Density) {
|
|
64
|
+
Density["Condensed"] = "condensed";
|
|
65
|
+
Density["Normal"] = "normal";
|
|
66
|
+
Density["Extended"] = "extended";
|
|
67
|
+
})(Density || (Density = {}));
|
|
68
|
+
|
|
60
69
|
var Size;
|
|
61
70
|
|
|
62
71
|
(function (Size) {
|
|
63
|
-
Size["
|
|
64
|
-
Size["
|
|
65
|
-
Size["
|
|
72
|
+
Size["Small"] = "small";
|
|
73
|
+
Size["Medium"] = "medium";
|
|
74
|
+
Size["Large"] = "large";
|
|
66
75
|
})(Size || (Size = {}));
|
|
67
76
|
|
|
68
77
|
var Position;
|
|
@@ -175,7 +184,7 @@ const getClasses = _ => classNames('control', [`connotation-${_.connotation}`, !
|
|
|
175
184
|
function renderDismissButton() {
|
|
176
185
|
return html(_t || (_t = _2`
|
|
177
186
|
<vwc-button
|
|
178
|
-
|
|
187
|
+
density="condensed"
|
|
179
188
|
class="dismiss-button"
|
|
180
189
|
icon="close-line"
|
|
181
190
|
@click="${0}">
|
package/breadcrumb-item/index.js
CHANGED
|
@@ -6,12 +6,13 @@ import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
|
|
|
6
6
|
import { w as when } from '../shared/when.js';
|
|
7
7
|
import { c as classNames } from '../shared/class-names.js';
|
|
8
8
|
import '../shared/icon.js';
|
|
9
|
-
import '../shared/
|
|
9
|
+
import '../shared/object-set-prototype-of.js';
|
|
10
10
|
import '../shared/_has.js';
|
|
11
11
|
import '../shared/anchor.js';
|
|
12
12
|
import '../shared/apply-mixins.js';
|
|
13
13
|
import '../shared/aria-global.js';
|
|
14
14
|
import '../shared/affix.js';
|
|
15
|
+
import '../shared/web.dom-collections.iterator.js';
|
|
15
16
|
|
|
16
17
|
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.breadcrumb-item {\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.breadcrumb-item a {\n color: var(--vvd-color-cta-70);\n font: inherit;\n text-decoration: none;\n}\n.breadcrumb-item a:hover {\n text-decoration: underline;\n}\n.breadcrumb-item vwc-icon {\n margin: 0 16px;\n color: var(--vvd-color-neutral-70);\n font-size: 12px;\n}";
|
|
17
18
|
styleInject(css_248z);
|
|
@@ -19,14 +20,11 @@ styleInject(css_248z);
|
|
|
19
20
|
class BreadcrumbItem extends BreadcrumbItem$1 {
|
|
20
21
|
constructor() {
|
|
21
22
|
super();
|
|
22
|
-
this.text = '';
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
__decorate([attr(
|
|
28
|
-
mode: 'fromView'
|
|
29
|
-
}), __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
|
|
27
|
+
__decorate([attr, __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
|
|
30
28
|
|
|
31
29
|
let _2 = t => t,
|
|
32
30
|
_t,
|
package/button/index.js
CHANGED
|
@@ -8,6 +8,7 @@ import { A as ARIAGlobalStatesAndProperties, S as StartEnd, r as ref } from '../
|
|
|
8
8
|
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
9
9
|
import { c as classNames } from '../shared/class-names.js';
|
|
10
10
|
import '../shared/icon.js';
|
|
11
|
+
import '../shared/object-set-prototype-of.js';
|
|
11
12
|
import '../shared/_has.js';
|
|
12
13
|
import '../shared/when.js';
|
|
13
14
|
|
|
@@ -653,7 +654,7 @@ applyMixins(Button$1, StartEnd, DelegatesARIAButton);
|
|
|
653
654
|
class Button extends Button$1 {
|
|
654
655
|
constructor() {
|
|
655
656
|
super(...arguments);
|
|
656
|
-
this.
|
|
657
|
+
this.stacked = false;
|
|
657
658
|
}
|
|
658
659
|
|
|
659
660
|
}
|
|
@@ -664,20 +665,29 @@ __decorate([attr, __metadata("design:type", String)], Button.prototype, "shape",
|
|
|
664
665
|
|
|
665
666
|
__decorate([attr, __metadata("design:type", String)], Button.prototype, "appearance", void 0);
|
|
666
667
|
|
|
667
|
-
__decorate([attr, __metadata("design:type", String)], Button.prototype, "
|
|
668
|
+
__decorate([attr, __metadata("design:type", String)], Button.prototype, "density", void 0);
|
|
668
669
|
|
|
669
670
|
__decorate([attr({
|
|
670
|
-
mode: '
|
|
671
|
-
|
|
671
|
+
mode: 'boolean',
|
|
672
|
+
attribute: 'stacked'
|
|
673
|
+
}), __metadata("design:type", Object)], Button.prototype, "stacked", void 0);
|
|
674
|
+
|
|
675
|
+
__decorate([attr, __metadata("design:type", String)], Button.prototype, "label", void 0);
|
|
672
676
|
|
|
673
677
|
applyMixins(Button, AffixIconWithTrailing);
|
|
674
678
|
|
|
675
|
-
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 background-color: var(--_appearance-color-fill);\n block-size: var(--
|
|
679
|
+
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 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 outline: 0 none;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n --connotation-basis: var(--vvd-color-cta);\n --connotation-basis-increment: var(--vvd-color-cta-70);\n --connotation-contrast: var(--vvd-color-cta-90);\n --connotation-fierce: var(--vvd-color-cta-80);\n --connotation-firm: var(--vvd-color-cta-70);\n --connotation-soft: var(--vvd-color-cta-20);\n --connotation-pale: var(--vvd-color-cta-10);\n}\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-basis: var(--vvd-color-success);\n --connotation-basis-increment: var(--vvd-color-success-70);\n --connotation-contrast: var(--vvd-color-success-90);\n --connotation-fierce: var(--vvd-color-success-80);\n --connotation-firm: var(--vvd-color-success-70);\n --connotation-soft: var(--vvd-color-success-20);\n --connotation-pale: var(--vvd-color-success-10);\n}\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n --connotation-basis: var(--vvd-color-alert);\n --connotation-basis-increment: var(--vvd-color-alert-70);\n --connotation-contrast: var(--vvd-color-alert-90);\n --connotation-fierce: var(--vvd-color-alert-80);\n --connotation-firm: var(--vvd-color-alert-70);\n --connotation-soft: var(--vvd-color-alert-20);\n --connotation-pale: var(--vvd-color-alert-10);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n --connotation-basis: var(--vvd-color-neutral);\n --connotation-basis-increment: var(--vvd-color-neutral-90);\n --connotation-contrast: var(--vvd-color-neutral-90);\n --connotation-fierce: var(--vvd-color-neutral-80);\n --connotation-firm: var(--vvd-color-primary);\n --connotation-soft: var(--vvd-color-neutral-20);\n --connotation-pale: var(--vvd-color-neutral-10);\n}\n.control.appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation);\n --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n --_appearance-color-text: var(--connotation-firm);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--connotation-firm);\n}\n.control {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled).appearance-filled, .control.hovered:not(:disabled, .disabled).appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation-basis-increment);\n --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled).appearance-outlined, .control.hovered:not(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: var(--connotation-firm);\n --_appearance-color-fill: var(--connotation-pale);\n --_appearance-color-outline: var(--connotation-firm);\n}\n.control:hover:not(:disabled, .disabled), .control.hovered:not(:disabled, .disabled) {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: var(--connotation-pale);\n --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-filled, .control.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:disabled.appearance-outlined, .control.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:disabled, .control.disabled {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled).appearance-filled, .control.active:not(:disabled, .disabled).appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation-fierce);\n --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled).appearance-outlined, .control.active:not(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: var(--connotation-firm);\n --_appearance-color-fill: var(--connotation-soft);\n --_appearance-color-outline: var(--connotation-firm);\n}\n.control:active:not(:disabled, .disabled), .control.active:not(:disabled, .disabled) {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: var(--connotation-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:not(.stacked):not(.icon-trailing) .icon {\n margin-inline-end: var(--_button-icon-gap);\n}\n:not(.stacked).icon-trailing .icon {\n margin-inline-start: var(--_button-icon-gap);\n}\n.stacked:not(.icon-trailing) .icon {\n margin-block-end: var(--_button-icon-gap);\n}\n.stacked.icon-trailing .icon {\n margin-block-start: var(--_button-icon-gap);\n}\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}";
|
|
676
680
|
styleInject(css_248z);
|
|
677
681
|
|
|
682
|
+
let _$1 = t => t,
|
|
683
|
+
_t$1;
|
|
684
|
+
const focusTemplateFactory = context => {
|
|
685
|
+
const focusTag = context.tagFor(Focus);
|
|
686
|
+
return html(_t$1 || (_t$1 = _$1`<${0} class="focus-indicator"></${0}>`), focusTag, focusTag);
|
|
687
|
+
};
|
|
688
|
+
|
|
678
689
|
let _ = t => t,
|
|
679
|
-
_t
|
|
680
|
-
_t2;
|
|
690
|
+
_t;
|
|
681
691
|
|
|
682
692
|
const getAppearanceClassName = (appearance, disabled) => {
|
|
683
693
|
let className = `appearance-${appearance}`;
|
|
@@ -689,21 +699,18 @@ const getClasses = ({
|
|
|
689
699
|
connotation,
|
|
690
700
|
appearance,
|
|
691
701
|
shape,
|
|
692
|
-
|
|
702
|
+
density,
|
|
703
|
+
iconTrailing,
|
|
693
704
|
icon,
|
|
694
705
|
label,
|
|
695
706
|
disabled,
|
|
696
|
-
|
|
697
|
-
}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`
|
|
698
|
-
|
|
699
|
-
const focusTemplate = context => {
|
|
700
|
-
const focusTag = context.tagFor(Focus);
|
|
701
|
-
return html(_t || (_t = _`<${0} class="focus-indicator"></${0}>`), focusTag, focusTag);
|
|
702
|
-
};
|
|
707
|
+
stacked
|
|
708
|
+
}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`density-${density}`, Boolean(density)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing], ['stacked', Boolean(stacked)]);
|
|
703
709
|
|
|
704
710
|
const buttonTemplate = context => {
|
|
705
711
|
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
706
|
-
|
|
712
|
+
const focusTemplate = focusTemplateFactory(context);
|
|
713
|
+
return html(_t || (_t = _`
|
|
707
714
|
<button
|
|
708
715
|
class="${0}"
|
|
709
716
|
?autofocus="${0}"
|
|
@@ -744,7 +751,7 @@ const buttonTemplate = context => {
|
|
|
744
751
|
${0}
|
|
745
752
|
${0}
|
|
746
753
|
</button>
|
|
747
|
-
`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate
|
|
754
|
+
`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, x => affixIconTemplate(x.icon), x => x.label);
|
|
748
755
|
};
|
|
749
756
|
|
|
750
757
|
const vividButton = Button.compose({
|
package/calendar/index.js
CHANGED
|
@@ -5,6 +5,7 @@ import '../shared/web.dom-collections.iterator.js';
|
|
|
5
5
|
import '../shared/es.object.assign.js';
|
|
6
6
|
import { b as _has, _ as _curry1, a as _curry2 } from '../shared/_has.js';
|
|
7
7
|
import '../shared/class-names.js';
|
|
8
|
+
import '../shared/object-set-prototype-of.js';
|
|
8
9
|
|
|
9
10
|
/** @internal */
|
|
10
11
|
function newSplice(index, removed, addedCount) {
|
package/card/index.js
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
import '../elevation/index.js';
|
|
2
|
+
import '../icon/index.js';
|
|
3
|
+
import '../button/index.js';
|
|
4
|
+
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';
|
|
5
|
+
import { s as styleInject } from '../shared/style-inject.es.js';
|
|
6
|
+
import { s as slotted } from '../shared/slotted.js';
|
|
7
|
+
import { w as when } from '../shared/when.js';
|
|
8
|
+
import { c as classNames } from '../shared/class-names.js';
|
|
9
|
+
import '../shared/icon.js';
|
|
10
|
+
import '../shared/object-set-prototype-of.js';
|
|
11
|
+
import '../shared/_has.js';
|
|
12
|
+
import '../shared/index2.js';
|
|
13
|
+
import '../shared/web.dom-collections.iterator.js';
|
|
14
|
+
import '../shared/affix.js';
|
|
15
|
+
import '../shared/apply-mixins.js';
|
|
16
|
+
import '../shared/aria-global.js';
|
|
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 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}";
|
|
19
|
+
styleInject(css_248z);
|
|
20
|
+
|
|
21
|
+
class Card extends FoundationElement {}
|
|
22
|
+
|
|
23
|
+
__decorate([attr, __metadata("design:type", String)], Card.prototype, "heading", void 0);
|
|
24
|
+
|
|
25
|
+
__decorate([attr, __metadata("design:type", String)], Card.prototype, "subheading", void 0);
|
|
26
|
+
|
|
27
|
+
__decorate([attr, __metadata("design:type", String)], Card.prototype, "text", void 0);
|
|
28
|
+
|
|
29
|
+
__decorate([attr, __metadata("design:type", String)], Card.prototype, "icon", void 0);
|
|
30
|
+
|
|
31
|
+
__decorate([attr, __metadata("design:type", Number)], Card.prototype, "elevation", void 0);
|
|
32
|
+
|
|
33
|
+
__decorate([observable, __metadata("design:type", Array)], Card.prototype, "footerSlottedContent", void 0);
|
|
34
|
+
|
|
35
|
+
__decorate([observable, __metadata("design:type", Array)], Card.prototype, "graphicSlottedContent", void 0);
|
|
36
|
+
|
|
37
|
+
__decorate([observable, __metadata("design:type", Array)], Card.prototype, "hasMetaSlottedContent", void 0);
|
|
38
|
+
|
|
39
|
+
let _2 = t => t,
|
|
40
|
+
_t,
|
|
41
|
+
_t2,
|
|
42
|
+
_t3,
|
|
43
|
+
_t4,
|
|
44
|
+
_t5,
|
|
45
|
+
_t6,
|
|
46
|
+
_t7,
|
|
47
|
+
_t8;
|
|
48
|
+
|
|
49
|
+
const getClasses = _ => classNames('control', ['hide-footer', !_.footerSlottedContent || !_.footerSlottedContent.length], ['hide-header', shouldHideHeader(_)]);
|
|
50
|
+
|
|
51
|
+
function renderHeaderIcon() {
|
|
52
|
+
return html(_t || (_t = _2`
|
|
53
|
+
<vwc-icon class="icon" inline type="${0}"></vwc-icon>`), x => x.icon);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
function heading() {
|
|
57
|
+
return html(_t2 || (_t2 = _2`
|
|
58
|
+
<div class="header-title">${0}</div>
|
|
59
|
+
`), x => x.heading);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
function subheading() {
|
|
63
|
+
return html(_t3 || (_t3 = _2`
|
|
64
|
+
<div class="header-subheading">${0}</div>
|
|
65
|
+
`), x => x.subheading);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function headerContent() {
|
|
69
|
+
return html(_t4 || (_t4 = _2`
|
|
70
|
+
<div class="header-content">
|
|
71
|
+
${0}
|
|
72
|
+
${0}
|
|
73
|
+
</div>
|
|
74
|
+
`), when(x => x.heading, heading()), when(x => x.subheading, subheading()));
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
function renderHeader() {
|
|
78
|
+
return html(_t5 || (_t5 = _2`
|
|
79
|
+
<header class="header">
|
|
80
|
+
<slot name="graphic" ${0}>${0}</slot>
|
|
81
|
+
${0}
|
|
82
|
+
</header>`), slotted('graphicSlottedContent'), when(x => x.icon, renderHeaderIcon()), when(x => x.heading || x.subheading, headerContent()));
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function shouldHideHeader(card) {
|
|
86
|
+
return !card.heading && !card.subheading && !card.icon && (!card.graphicSlottedContent || !card.graphicSlottedContent.length);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
function renderMetaSlot() {
|
|
90
|
+
return html(_t6 || (_t6 = _2`
|
|
91
|
+
<slot name="meta" ${0}></slot>
|
|
92
|
+
`), slotted('metaSlottedContent'));
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
function text() {
|
|
96
|
+
return html(_t7 || (_t7 = _2`
|
|
97
|
+
<div class="text">${0}</div>
|
|
98
|
+
`), x => x.text);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
const CardTemplate = () => html(_t8 || (_t8 = _2`
|
|
102
|
+
<vwc-elevation dp=${0}>
|
|
103
|
+
<div class="${0}">
|
|
104
|
+
<div class="wrapper">
|
|
105
|
+
<div class="vwc-card-media">
|
|
106
|
+
<slot name="media"></slot>
|
|
107
|
+
</div>
|
|
108
|
+
<div class="content">
|
|
109
|
+
<slot name="content">
|
|
110
|
+
<div class="content-container">
|
|
111
|
+
${0}
|
|
112
|
+
${0}
|
|
113
|
+
</div>
|
|
114
|
+
${0}
|
|
115
|
+
</slot>
|
|
116
|
+
</div>
|
|
117
|
+
<div class="footer">
|
|
118
|
+
<slot name="footer" ${0}></slot>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</vwc-elevation>
|
|
123
|
+
`), x => {
|
|
124
|
+
var _a;
|
|
125
|
+
|
|
126
|
+
return (_a = x.elevation) !== null && _a !== void 0 ? _a : '4';
|
|
127
|
+
}, getClasses, renderHeader(), renderMetaSlot(), when(x => x.text, text()), slotted('footerSlottedContent'));
|
|
128
|
+
|
|
129
|
+
const vividCard = Card.compose({
|
|
130
|
+
baseName: 'card',
|
|
131
|
+
template: CardTemplate,
|
|
132
|
+
styles: css_248z
|
|
133
|
+
});
|
|
134
|
+
designSystem.register(vividCard());
|
|
135
|
+
|
|
136
|
+
export { vividCard };
|
package/elevation/index.js
CHANGED
|
@@ -6,7 +6,7 @@ class Elevation extends FoundationElement {}
|
|
|
6
6
|
|
|
7
7
|
__decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
|
|
8
8
|
|
|
9
|
-
var css_248z = ".control.dp-0
|
|
9
|
+
var css_248z = ".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
10
|
styleInject(css_248z);
|
|
11
11
|
|
|
12
12
|
let _ = t => t,
|
package/icon/index.js
CHANGED
|
@@ -3,10 +3,10 @@ import { s as styleInject } from '../shared/style-inject.es.js';
|
|
|
3
3
|
import { I as Icon } from '../shared/icon.js';
|
|
4
4
|
import { w as when } from '../shared/when.js';
|
|
5
5
|
import { c as classNames } from '../shared/class-names.js';
|
|
6
|
-
import '../shared/
|
|
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-primary {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n}\n
|
|
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-primary {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n}\n.control.connotation-announcement {\n --connotation: var(--vvd-color-announcement);\n --on-connotation: var(--vvd-color-on-announcement);\n}\n.control.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n}\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n}\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n}\n.control.connotation-info {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n}\n\n.control[class*=connotation] {\n color: var(--connotation);\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,
|
|
@@ -22,7 +22,11 @@ const iconTemplate = () => html(_t || (_t = _`
|
|
|
22
22
|
<figure class="${0}">
|
|
23
23
|
${0}
|
|
24
24
|
</figure>
|
|
25
|
-
`), getClasses, when(x => x.svg, x => html(_t2 || (_t2 = _`${0}`), x.svg)));
|
|
25
|
+
`), getClasses, when(x => isValidString(x.svg), x => html(_t2 || (_t2 = _`${0}`), x.svg)));
|
|
26
|
+
|
|
27
|
+
function isValidString(value) {
|
|
28
|
+
return typeof value === 'string' && value.length > 0;
|
|
29
|
+
}
|
|
26
30
|
|
|
27
31
|
const vividIcon = Icon.compose({
|
|
28
32
|
baseName: 'icon',
|
package/index.js
CHANGED
|
@@ -16,8 +16,9 @@ export { vividAccordionItem } from './accordion-item/index.js';
|
|
|
16
16
|
export { vividAccordion } from './accordion/index.js';
|
|
17
17
|
export { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
|
|
18
18
|
import './shared/text-anchor.js';
|
|
19
|
-
import './shared/web.dom-collections.iterator.js';
|
|
20
19
|
import './shared/affix.js';
|
|
20
|
+
import './shared/web.dom-collections.iterator.js';
|
|
21
|
+
import './shared/object-set-prototype-of.js';
|
|
21
22
|
import './shared/icon.js';
|
|
22
23
|
import './shared/_has.js';
|
|
23
24
|
import './shared/anchor.js';
|
package/layout/index.js
CHANGED
|
@@ -25,7 +25,7 @@ __decorate([attr({
|
|
|
25
25
|
attribute: 'auto-sizing'
|
|
26
26
|
}), __metadata("design:type", String)], Layout.prototype, "autoSizing", void 0);
|
|
27
27
|
|
|
28
|
-
var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n display: grid;\n grid-auto-rows: min-content;\n}\n.control.column-basis-
|
|
28
|
+
var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n display: grid;\n grid-auto-rows: min-content;\n}\n.control.column-basis-small {\n grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(10rem, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(20rem, 1fr)));\n}\n.control.column-basis-large {\n grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(30rem, 1fr)));\n}\n.control.column-basis-block {\n grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n gap: 16px;\n}\n.control:not(.column-spacing-small):not(.column-spacing-medium):not(.column-spacing-large), .control.column-spacing-medium {\n gap: 24px;\n}\n.control.column-spacing-large {\n gap: 32px;\n}\n.control.gutters-small {\n margin: 16px;\n}\n.control.gutters-medium {\n margin: 24px;\n}\n.control.gutters-large {\n margin: 32px;\n}\n.control.auto-sizing-fill {\n --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n --_auto-sizing: auto-fit;\n}";
|
|
29
29
|
styleInject(css_248z);
|
|
30
30
|
|
|
31
31
|
let _ = t => t,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
2
|
import { AffixIconWithTrailing } from '../../shared/patterns/affix';
|
|
3
3
|
export declare class AccordionItem extends FoundationElement {
|
|
4
|
-
heading
|
|
4
|
+
heading?: string;
|
|
5
5
|
headingLevel?: 2 | 3 | 4 | 5 | 6;
|
|
6
6
|
noIndicator: boolean;
|
|
7
|
-
meta
|
|
7
|
+
meta?: string;
|
|
8
8
|
open: boolean;
|
|
9
9
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
10
10
|
private emitEvent;
|