@vonage/vivid 3.0.0-next.12 → 3.0.0-next.15
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/badge/index.js +4 -4
- package/banner/index.js +13 -5
- package/button/index.js +30 -16
- package/card/index.js +136 -0
- package/elevation/index.js +1 -1
- package/icon/index.js +1 -1
- package/layout/index.js +1 -1
- package/lib/badge/badge.d.ts +3 -3
- package/lib/button/button.d.ts +4 -3
- 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 +2 -1
- package/lib/layout/layout.d.ts +3 -3
- package/lib/progress-ring/progress-ring.d.ts +1 -0
- package/package.json +1 -1
- package/popup/index.js +1 -1
- package/progress/index.js +1 -1
- package/progress-ring/index.js +8 -3
- package/shared/patterns/focus.d.ts +3 -0
- package/shared/patterns/index.d.ts +1 -0
- package/text/index.js +1 -1
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/badge/index.js
CHANGED
|
@@ -18,13 +18,13 @@ __decorate([attr, __metadata("design:type", String)], Badge.prototype, "shape",
|
|
|
18
18
|
|
|
19
19
|
__decorate([attr, __metadata("design:type", String)], Badge.prototype, "appearance", void 0);
|
|
20
20
|
|
|
21
|
-
__decorate([attr, __metadata("design:type", String)], Badge.prototype, "
|
|
21
|
+
__decorate([attr, __metadata("design:type", String)], Badge.prototype, "density", void 0);
|
|
22
22
|
|
|
23
23
|
__decorate([attr, __metadata("design:type", String)], Badge.prototype, "text", void 0);
|
|
24
24
|
|
|
25
25
|
applyMixins(Badge, AffixIconWithTrailing);
|
|
26
26
|
|
|
27
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n column-gap: 8px;\n vertical-align: middle;\n}\n.control
|
|
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}";
|
|
28
28
|
styleInject(css_248z);
|
|
29
29
|
|
|
30
30
|
let _ = t => t,
|
|
@@ -34,9 +34,9 @@ const getClasses = ({
|
|
|
34
34
|
connotation,
|
|
35
35
|
appearance,
|
|
36
36
|
shape,
|
|
37
|
-
|
|
37
|
+
density,
|
|
38
38
|
iconTrailing
|
|
39
|
-
}) => 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]);
|
|
40
40
|
|
|
41
41
|
const badgeTemplate = context => {
|
|
42
42
|
const affixIconTemplate = affixIconTemplateFactory(context);
|
package/banner/index.js
CHANGED
|
@@ -17,7 +17,7 @@ import '../shared/text-anchor.js';
|
|
|
17
17
|
import '../shared/anchor.js';
|
|
18
18
|
import '../shared/text-anchor.template.js';
|
|
19
19
|
|
|
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
|
|
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}";
|
|
21
21
|
styleInject(css_248z);
|
|
22
22
|
|
|
23
23
|
var Connotation;
|
|
@@ -58,12 +58,20 @@ var Appearance;
|
|
|
58
58
|
Appearance["Ghost"] = "ghost";
|
|
59
59
|
})(Appearance || (Appearance = {}));
|
|
60
60
|
|
|
61
|
+
var Density;
|
|
62
|
+
|
|
63
|
+
(function (Density) {
|
|
64
|
+
Density["Condensed"] = "condensed";
|
|
65
|
+
Density["Normal"] = "normal";
|
|
66
|
+
Density["Extended"] = "extended";
|
|
67
|
+
})(Density || (Density = {}));
|
|
68
|
+
|
|
61
69
|
var Size;
|
|
62
70
|
|
|
63
71
|
(function (Size) {
|
|
64
|
-
Size["
|
|
65
|
-
Size["
|
|
66
|
-
Size["
|
|
72
|
+
Size["Small"] = "small";
|
|
73
|
+
Size["Medium"] = "medium";
|
|
74
|
+
Size["Large"] = "large";
|
|
67
75
|
})(Size || (Size = {}));
|
|
68
76
|
|
|
69
77
|
var Position;
|
|
@@ -176,7 +184,7 @@ const getClasses = _ => classNames('control', [`connotation-${_.connotation}`, !
|
|
|
176
184
|
function renderDismissButton() {
|
|
177
185
|
return html(_t || (_t = _2`
|
|
178
186
|
<vwc-button
|
|
179
|
-
|
|
187
|
+
density="condensed"
|
|
180
188
|
class="dismiss-button"
|
|
181
189
|
icon="close-line"
|
|
182
190
|
@click="${0}">
|
package/button/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import '../icon/index.js';
|
|
2
2
|
import { F as Focus } from '../shared/index2.js';
|
|
3
3
|
import { e as emptyArray, D as DOM, a as attr, o as observable, F as FoundationElement, _ as __decorate, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
4
|
+
import '../shared/web.dom-collections.iterator.js';
|
|
4
5
|
import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
|
|
5
6
|
import { a as applyMixins } from '../shared/apply-mixins.js';
|
|
6
7
|
import { A as ARIAGlobalStatesAndProperties, S as StartEnd, r as ref } from '../shared/aria-global.js';
|
|
@@ -10,7 +11,6 @@ import '../shared/icon.js';
|
|
|
10
11
|
import '../shared/object-set-prototype-of.js';
|
|
11
12
|
import '../shared/_has.js';
|
|
12
13
|
import '../shared/when.js';
|
|
13
|
-
import '../shared/web.dom-collections.iterator.js';
|
|
14
14
|
|
|
15
15
|
/**
|
|
16
16
|
* Key Code values
|
|
@@ -651,7 +651,13 @@ __decorate([
|
|
|
651
651
|
applyMixins(DelegatesARIAButton, ARIAGlobalStatesAndProperties);
|
|
652
652
|
applyMixins(Button$1, StartEnd, DelegatesARIAButton);
|
|
653
653
|
|
|
654
|
-
class Button extends Button$1 {
|
|
654
|
+
class Button extends Button$1 {
|
|
655
|
+
constructor() {
|
|
656
|
+
super(...arguments);
|
|
657
|
+
this.stacked = false;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
}
|
|
655
661
|
|
|
656
662
|
__decorate([attr, __metadata("design:type", String)], Button.prototype, "connotation", void 0);
|
|
657
663
|
|
|
@@ -659,18 +665,29 @@ __decorate([attr, __metadata("design:type", String)], Button.prototype, "shape",
|
|
|
659
665
|
|
|
660
666
|
__decorate([attr, __metadata("design:type", String)], Button.prototype, "appearance", void 0);
|
|
661
667
|
|
|
662
|
-
__decorate([attr, __metadata("design:type", String)], Button.prototype, "
|
|
668
|
+
__decorate([attr, __metadata("design:type", String)], Button.prototype, "density", void 0);
|
|
669
|
+
|
|
670
|
+
__decorate([attr({
|
|
671
|
+
mode: 'boolean',
|
|
672
|
+
attribute: 'stacked'
|
|
673
|
+
}), __metadata("design:type", Object)], Button.prototype, "stacked", void 0);
|
|
663
674
|
|
|
664
675
|
__decorate([attr, __metadata("design:type", String)], Button.prototype, "label", void 0);
|
|
665
676
|
|
|
666
677
|
applyMixins(Button, AffixIconWithTrailing);
|
|
667
678
|
|
|
668
|
-
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}";
|
|
669
680
|
styleInject(css_248z);
|
|
670
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
|
+
|
|
671
689
|
let _ = t => t,
|
|
672
|
-
_t
|
|
673
|
-
_t2;
|
|
690
|
+
_t;
|
|
674
691
|
|
|
675
692
|
const getAppearanceClassName = (appearance, disabled) => {
|
|
676
693
|
let className = `appearance-${appearance}`;
|
|
@@ -682,21 +699,18 @@ const getClasses = ({
|
|
|
682
699
|
connotation,
|
|
683
700
|
appearance,
|
|
684
701
|
shape,
|
|
685
|
-
|
|
702
|
+
density,
|
|
703
|
+
iconTrailing,
|
|
686
704
|
icon,
|
|
687
705
|
label,
|
|
688
706
|
disabled,
|
|
689
|
-
|
|
690
|
-
}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [getAppearanceClassName(appearance, disabled), Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], [`
|
|
691
|
-
|
|
692
|
-
const focusTemplate = context => {
|
|
693
|
-
const focusTag = context.tagFor(Focus);
|
|
694
|
-
return html(_t || (_t = _`<${0} class="focus-indicator"></${0}>`), focusTag, focusTag);
|
|
695
|
-
};
|
|
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)]);
|
|
696
709
|
|
|
697
710
|
const buttonTemplate = context => {
|
|
698
711
|
const affixIconTemplate = affixIconTemplateFactory(context);
|
|
699
|
-
|
|
712
|
+
const focusTemplate = focusTemplateFactory(context);
|
|
713
|
+
return html(_t || (_t = _`
|
|
700
714
|
<button
|
|
701
715
|
class="${0}"
|
|
702
716
|
?autofocus="${0}"
|
|
@@ -737,7 +751,7 @@ const buttonTemplate = context => {
|
|
|
737
751
|
${0}
|
|
738
752
|
${0}
|
|
739
753
|
</button>
|
|
740
|
-
`), 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);
|
|
741
755
|
};
|
|
742
756
|
|
|
743
757
|
const vividButton = Button.compose({
|
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
|
@@ -6,7 +6,7 @@ import { c as classNames } from '../shared/class-names.js';
|
|
|
6
6
|
import '../shared/object-set-prototype-of.js';
|
|
7
7
|
import '../shared/_has.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = ":host {\n display: inline-block;\n vertical-align: sub;\n}\n\n.control {\n display: flex;\n margin: unset;\n color: currentColor;\n contain: strict;\n}\n.control.connotation-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,
|
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,
|
package/lib/badge/badge.d.ts
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
2
|
import { AffixIconWithTrailing } from '../../shared/patterns/affix';
|
|
3
|
-
import type { Appearance, Connotation,
|
|
3
|
+
import type { Appearance, Connotation, Density, Shape } from '../enums.js';
|
|
4
4
|
declare type BadgeConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Info>;
|
|
5
5
|
declare type BadgeAppearance = Extract<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
|
|
6
6
|
declare type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
|
|
7
|
-
declare type
|
|
7
|
+
declare type BadgeDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;
|
|
8
8
|
export declare class Badge extends FoundationElement {
|
|
9
9
|
connotation?: BadgeConnotation;
|
|
10
10
|
shape?: BadgeShape;
|
|
11
11
|
appearance?: BadgeAppearance;
|
|
12
|
-
|
|
12
|
+
density?: BadgeDensity;
|
|
13
13
|
text?: string;
|
|
14
14
|
}
|
|
15
15
|
export interface Badge extends AffixIconWithTrailing {
|
package/lib/button/button.d.ts
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import { Button as FoundationButton } from '@microsoft/fast-foundation';
|
|
2
|
-
import type { Appearance, Connotation,
|
|
2
|
+
import type { Appearance, Connotation, Density, Shape } from '../enums.js';
|
|
3
3
|
import { AffixIconWithTrailing } from '../../shared/patterns/affix';
|
|
4
4
|
declare type ButtonConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Success | Connotation.Alert>;
|
|
5
5
|
export declare type ButtonAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
|
|
6
6
|
declare type ButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
|
|
7
|
-
declare type
|
|
7
|
+
declare type ButtonDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;
|
|
8
8
|
export declare class Button extends FoundationButton {
|
|
9
9
|
connotation?: ButtonConnotation;
|
|
10
10
|
shape?: ButtonShape;
|
|
11
11
|
appearance?: ButtonAppearance;
|
|
12
|
-
|
|
12
|
+
density?: ButtonDensity;
|
|
13
|
+
stacked: boolean;
|
|
13
14
|
label?: string;
|
|
14
15
|
}
|
|
15
16
|
export interface Button extends AffixIconWithTrailing {
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
|
+
export declare class Card extends FoundationElement {
|
|
3
|
+
heading?: string;
|
|
4
|
+
subheading?: string;
|
|
5
|
+
text?: string;
|
|
6
|
+
icon?: string;
|
|
7
|
+
elevation?: 0 | 2 | 4 | 8 | 12 | 16 | 24;
|
|
8
|
+
graphicSlottedContent?: HTMLElement[];
|
|
9
|
+
hasMetaSlottedContent?: HTMLElement[];
|
|
10
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { ViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
|
|
3
|
+
import type { Card } from './card';
|
|
4
|
+
export declare const CardTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Card>;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import '../elevation';
|
|
2
|
+
import '../icon';
|
|
3
|
+
import '../button';
|
|
4
|
+
import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
|
|
5
|
+
export declare const vividCard: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
|
package/lib/enums.d.ts
CHANGED
|
@@ -24,10 +24,15 @@ export declare enum Appearance {
|
|
|
24
24
|
Subtle = "subtle",
|
|
25
25
|
Ghost = "ghost"
|
|
26
26
|
}
|
|
27
|
+
export declare enum Density {
|
|
28
|
+
Condensed = "condensed",
|
|
29
|
+
Normal = "normal",
|
|
30
|
+
Extended = "extended"
|
|
31
|
+
}
|
|
27
32
|
export declare enum Size {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
33
|
+
Small = "small",
|
|
34
|
+
Medium = "medium",
|
|
35
|
+
Large = "large"
|
|
31
36
|
}
|
|
32
37
|
export declare enum Position {
|
|
33
38
|
Top = "TOP",
|
package/lib/icon/icon.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { FoundationElement } from '@microsoft/fast-foundation';
|
|
2
2
|
import type { Connotation, Size } from '../enums';
|
|
3
3
|
declare type IconConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Announcement | Connotation.Success | Connotation.Alert | Connotation.Info>;
|
|
4
|
+
declare type IconSize = Extract<Size, Size.Small | Size.Medium | Size.Large>;
|
|
4
5
|
export declare class Icon extends FoundationElement {
|
|
5
6
|
connotation?: IconConnotation;
|
|
6
|
-
size?:
|
|
7
|
+
size?: IconSize;
|
|
7
8
|
svg?: string;
|
|
8
9
|
type?: string;
|
|
9
10
|
typeChanged(): Promise<void>;
|
package/lib/layout/layout.d.ts
CHANGED
|
@@ -4,9 +4,9 @@ export declare enum AUTO_SIZING {
|
|
|
4
4
|
Fit = "fit",
|
|
5
5
|
Fill = "fill"
|
|
6
6
|
}
|
|
7
|
-
declare type Gutters = Extract<Size, Size.
|
|
8
|
-
declare type ColumnSpacing = Extract<Size, Size.
|
|
9
|
-
declare type ColumnBasis = Extract<Size, Size.
|
|
7
|
+
declare type Gutters = Extract<Size, Size.Small | Size.Medium | Size.Large>;
|
|
8
|
+
declare type ColumnSpacing = Extract<Size, Size.Small | Size.Medium | Size.Large>;
|
|
9
|
+
declare type ColumnBasis = Extract<Size, Size.Small | Size.Medium | Size.Large> | 'block';
|
|
10
10
|
export declare class Layout extends FoundationElement {
|
|
11
11
|
gutters?: Gutters;
|
|
12
12
|
columnBasis?: ColumnBasis;
|
|
@@ -3,4 +3,5 @@ import type { Connotation } from '../enums';
|
|
|
3
3
|
export declare type ProgressRingConnotation = Connotation.Primary | Connotation.Success | Connotation.Alert | Connotation.CTA;
|
|
4
4
|
export declare class ProgressRing extends BaseProgress {
|
|
5
5
|
connotation?: ProgressRingConnotation;
|
|
6
|
+
density?: -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3;
|
|
6
7
|
}
|
package/package.json
CHANGED
package/popup/index.js
CHANGED
|
@@ -2053,7 +2053,7 @@ const popupTemplate = () => html(_t || (_t = _`
|
|
|
2053
2053
|
${0}
|
|
2054
2054
|
</div>
|
|
2055
2055
|
</div>
|
|
2056
|
-
</vwc-elevation>`), ref('popupEl'), getClasses, x => x.open ? 'false' : 'true', x => x.alternate ? 'vvd-theme-alternate' : '', when(x => x.dismissible, html(_t2 || (_t2 = _`<vwc-button
|
|
2056
|
+
</vwc-elevation>`), ref('popupEl'), getClasses, x => x.open ? 'false' : 'true', x => x.alternate ? 'vvd-theme-alternate' : '', when(x => x.dismissible, html(_t2 || (_t2 = _`<vwc-button density="condensed" @click="${0}"
|
|
2057
2057
|
class="dismissible" icon="close-small-solid" shape="pill"></vwc-button>`), x => x.open = false)), when(x => x.arrow, html(_t3 || (_t3 = _`<div class="arrow" ${0}></div>`), ref('arrowEl'))));
|
|
2058
2058
|
|
|
2059
2059
|
const VIVIDPopup = Popup.compose({
|
package/progress/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import { B as BaseProgress } from '../shared/base-progress.js';
|
|
|
6
6
|
import { w as when } from '../shared/when.js';
|
|
7
7
|
import { c as classNames } from '../shared/class-names.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = ".base {\n height: 6px;\n align-items: center;\n margin: 0;\n outline: none;\n}\n.base.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n}\n
|
|
9
|
+
var css_248z = ".base {\n height: 6px;\n align-items: center;\n margin: 0;\n outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n}\n.base:not(.connotation-pacific).connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n}\n.base:not(.connotation-pacific).connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n}\n.base:not(.connotation-pacific):not(.connotation-cta, .connotation-alert, .connotation-success) {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n}\n.base.connotation-pacific {\n --connotation: linear-gradient(to right, var(--vvd-color-info-30), var(--vvd-color-cta-70));\n}\n\n.indeterminate {\n display: flex;\n overflow: hidden;\n width: 100%;\n height: 100%;\n border-radius: 3px;\n}\n\n.progress {\n position: relative;\n display: flex;\n align-items: center;\n background-color: var(--vvd-color-neutral-20);\n block-size: 100%;\n inline-size: 100%;\n}\n.progress .indeterminate {\n background-color: var(--connotation);\n}\n\n.determinate {\n background-color: var(--connotation);\n block-size: 100%;\n border-radius: 3px;\n transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n background-image: var(--connotation);\n}\n\n.indeterminate-indicator-1, .indeterminate-indicator-2 {\n position: absolute;\n animation: indeterminate-1 2s infinite;\n animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n background-color: var(--vvd-color-neutral-20);\n block-size: 100%;\n inline-size: 30%;\n opacity: 0;\n}\n\n.indeterminate-indicator-2 {\n animation: indeterminate-2 2s infinite;\n inline-size: 60%;\n}\n\n.connotation-pacific .indeterminate-indicator-1, .connotation-pacific .indeterminate-indicator-2 {\n background-image: var(--connotation);\n}\n\n.reverse .indeterminate-indicator-1, .reverse .indeterminate-indicator-2 {\n animation-direction: reverse;\n}\n.reverse .determinate {\n position: absolute;\n right: 0;\n}\n\n.base.shape-sharp .determinate, .base.shape-sharp .indeterminate {\n border-radius: 0;\n}\n\n.base.paused .indeterminate-indicator-1,\n.base.paused .indeterminate-indicator-2 {\n animation-play-state: paused;\n background-color: var(--connotation);\n}\n\n.base.paused .determinate {\n background-color: var(--vvd-color-neutral-40);\n}\n\n@keyframes indeterminate-1 {\n 0% {\n opacity: 1;\n transform: translateX(-100%);\n }\n 70% {\n opacity: 1;\n transform: translateX(300%);\n }\n 70.01% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n transform: translateX(300%);\n }\n}\n@keyframes indeterminate-2 {\n 0% {\n opacity: 0;\n transform: translateX(-150%);\n }\n 29.99% {\n opacity: 0;\n }\n 30% {\n opacity: 1;\n transform: translateX(-150%);\n }\n 100% {\n opacity: 1;\n transform: translateX(166.66%);\n }\n}";
|
|
10
10
|
styleInject(css_248z);
|
|
11
11
|
|
|
12
12
|
var classof = classofRaw;
|
package/progress-ring/index.js
CHANGED
|
@@ -4,19 +4,24 @@ import { B as BaseProgress } from '../shared/base-progress.js';
|
|
|
4
4
|
import { w as when } from '../shared/when.js';
|
|
5
5
|
import { c as classNames } from '../shared/class-names.js';
|
|
6
6
|
|
|
7
|
-
var css_248z = ".base {\n
|
|
7
|
+
var css_248z = ".base {\n align-items: center;\n block-size: var(--_density);\n inline-size: var(--_density);\n outline: none;\n}\n.base.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n}\n.base.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n}\n.base.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n}\n.base.density-4 {\n --_density: calc(4 * 4px);\n}\n.base.density-5 {\n --_density: calc(5 * 4px);\n}\n.base.density-6 {\n --_density: calc(6 * 4px);\n}\n.base.density-7 {\n --_density: calc(7 * 4px);\n}\n.base.density-8 {\n --_density: calc(8 * 4px);\n}\n.base.density-10 {\n --_density: calc(10 * 4px);\n}\n.base.density-11 {\n --_density: calc(11 * 4px);\n}\n.base.density-12 {\n --_density: calc(12 * 4px);\n}\n.base:not(.density-4, .density-5, .density-6, .density-7, .density-8, .density-10, .density-11, .density-12) {\n --_density: calc(9 * 4px);\n}\n\n.progress {\n width: 100%;\n height: 100%;\n}\n\n.background {\n fill: none;\n stroke: transparent;\n stroke-width: 2px;\n}\n\n.determinate {\n fill: none;\n stroke: var(--connotation);\n stroke-linecap: round;\n stroke-width: 2px;\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n animation: spin-infinite 2s linear infinite;\n fill: none;\n stroke: var(--connotation);\n stroke-linecap: round;\n stroke-width: 2px;\n transform: rotate(-90deg);\n transform-origin: 50% 50%;\n transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n animation-play-state: paused;\n stroke: var(--vvd-color-neutral);\n}\n\n.base.paused .determinate {\n stroke: var(--vvd-color-neutral);\n}\n\n@keyframes spin-infinite {\n 0% {\n stroke-dasharray: 0.01px 43.97px;\n transform: rotate(0deg);\n }\n 50% {\n stroke-dasharray: 21.99px 21.99px;\n transform: rotate(450deg);\n }\n 100% {\n stroke-dasharray: 0.01px 43.97px;\n transform: rotate(1080deg);\n }\n}";
|
|
8
8
|
styleInject(css_248z);
|
|
9
9
|
|
|
10
10
|
class ProgressRing extends BaseProgress {}
|
|
11
11
|
|
|
12
|
-
__decorate([attr
|
|
12
|
+
__decorate([attr, __metadata("design:type", String)], ProgressRing.prototype, "connotation", void 0);
|
|
13
|
+
|
|
14
|
+
__decorate([attr, __metadata("design:type", Number)], ProgressRing.prototype, "density", void 0);
|
|
13
15
|
|
|
14
16
|
let _2 = t => t,
|
|
15
17
|
_t,
|
|
16
18
|
_t2,
|
|
17
19
|
_t3;
|
|
18
20
|
|
|
19
|
-
const getClasses =
|
|
21
|
+
const getClasses = ({
|
|
22
|
+
connotation,
|
|
23
|
+
density
|
|
24
|
+
}) => classNames('base', [`connotation-${connotation}`, !!connotation], [`density-${(density ? Number(density) : 0) + 9}`, !!density]);
|
|
20
25
|
|
|
21
26
|
const progressSegments = 44;
|
|
22
27
|
const ProgressRingTemplate = _ => html(_t || (_t = _2`
|
package/text/index.js
CHANGED
|
@@ -4,7 +4,7 @@ import '../shared/web.dom-collections.iterator.js';
|
|
|
4
4
|
import { c as classNames } from '../shared/class-names.js';
|
|
5
5
|
import '../shared/object-set-prototype-of.js';
|
|
6
6
|
|
|
7
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control:not(.tight):not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1:not(.tight), .control.font-face-body-1-bold:not(.tight), .control.font-face-body-1-code:not(.tight), .control.font-face-body-1-link:not(.tight), .control.font-face-body-2:not(.tight), .control.font-face-body-2-bold:not(.tight), .control.font-face-body-2-code:not(.tight), .control.font-face-body-2-link:not(.tight), .control.font-face-subtitle-1:not(.tight), .control.font-face-subtitle-2:not(.tight), .control.font-face-title-1:not(.tight), .control.font-face-title-2:not(.tight), .control.font-face-headline-1:not(.tight), .control.font-face-headline-2:not(.tight) {\n display: block;\n margin: var(--font-face-margin, 0);\n}\n\n.control {\n color: var(--connotation);\n}\n.control.font-face-body-1 {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-bold {\n font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-code {\n font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-link {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-body-2 {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-bold {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-code {\n font: 400 ultra-condensed 14px / 20px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-link {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-button {\n font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-button-dense {\n font: 600 ultra-condensed 12px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-button-enlarge {\n font: 600 ultra-condensed 16px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-bold {\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-code {\n font: 400 ultra-condensed 12px / 16px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-link {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-headline-1 {\n font: 500 condensed 66px / 88px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-headline-2 {\n font: 500 condensed 52px / 68px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-subtitle-1 {\n font: 500 condensed 26px / 36px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-subtitle-2 {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-title-1 {\n font: 500 condensed 40px / 52px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-title-2 {\n font: 500 condensed 32px / 44px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2) {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.connotation-primary {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n}\n
|
|
7
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control:not(.tight):not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1:not(.tight), .control.font-face-body-1-bold:not(.tight), .control.font-face-body-1-code:not(.tight), .control.font-face-body-1-link:not(.tight), .control.font-face-body-2:not(.tight), .control.font-face-body-2-bold:not(.tight), .control.font-face-body-2-code:not(.tight), .control.font-face-body-2-link:not(.tight), .control.font-face-subtitle-1:not(.tight), .control.font-face-subtitle-2:not(.tight), .control.font-face-title-1:not(.tight), .control.font-face-title-2:not(.tight), .control.font-face-headline-1:not(.tight), .control.font-face-headline-2:not(.tight) {\n display: block;\n margin: var(--font-face-margin, 0);\n}\n\n.control {\n color: var(--connotation);\n}\n.control.font-face-body-1 {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-bold {\n font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-code {\n font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-link {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-body-2 {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-bold {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-code {\n font: 400 ultra-condensed 14px / 20px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-link {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-button {\n font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-button-dense {\n font: 600 ultra-condensed 12px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-button-enlarge {\n font: 600 ultra-condensed 16px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-bold {\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-code {\n font: 400 ultra-condensed 12px / 16px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-link {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-headline-1 {\n font: 500 condensed 66px / 88px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-headline-2 {\n font: 500 condensed 52px / 68px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-subtitle-1 {\n font: 500 condensed 26px / 36px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-subtitle-2 {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-title-1 {\n font: 500 condensed 40px / 52px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-title-2 {\n font: 500 condensed 32px / 44px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2) {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.connotation-primary {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\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-announcement {\n --connotation: var(--vvd-color-announcement);\n --on-connotation: var(--vvd-color-on-announcement);\n}\n.control.connotation-info {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n}\n.control.font-face-headline-1, .control.font-face-headline-2 {\n --font-face-margin: 2.5rem 0;\n}\n.control.font-face-title-1, .control.font-face-title-2 {\n --font-face-margin: 2rem 0;\n}\n.control.font-face-subtitle-1, .control.font-face-subtitle-2 {\n --font-face-margin: 1.5rem 0;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1, .control.font-face-body-1-bold, .control.font-face-body-1-code, .control.font-face-body-1-link, .control.font-face-body-2, .control.font-face-body-2-bold, .control.font-face-body-2-code, .control.font-face-body-2-link {\n --font-face-margin: 1rem 0;\n}\n\n::slotted(:where(h1, h2, h3, h4, h5, h6, p)) {\n margin: initial;\n}\n\n::slotted(*) {\n color: inherit;\n font: inherit;\n}";
|
|
8
8
|
styleInject(css_248z);
|
|
9
9
|
|
|
10
10
|
class Text extends FoundationElement {
|