@vonage/vivid 3.0.0-next.57 → 3.0.0-next.58
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 +19 -22
- package/accordion/index.js +1 -1
- package/accordion-item/index.js +1 -1
- package/action-group/index.js +1 -1
- package/avatar/index.js +1 -1
- package/badge/index.js +1 -1
- package/banner/index.js +1 -1
- package/breadcrumb-item/index.js +1 -1
- package/button/index.js +1 -1
- package/calendar/index.js +1 -1
- package/calendar-event/index.js +1 -1
- package/card/index.js +1 -1
- package/checkbox/index.js +1 -1
- package/dialog/index.js +1 -1
- package/divider/index.js +1 -1
- package/fab/index.js +1 -1
- package/focus/index.js +1 -1
- package/header/index.js +1 -1
- package/nav-disclosure/index.js +1 -1
- package/nav-item/index.js +1 -1
- package/note/index.js +1 -1
- package/package.json +1 -1
- package/progress/index.js +1 -1
- package/progress-ring/index.js +1 -1
- package/shared/patterns/form-elements.d.ts +1 -1
- package/side-drawer/index.js +2 -3
- package/styles/core/all.css +75 -0
- package/styles/core/theme.css +11 -0
- package/styles/core/typography.css +69 -0
- package/styles/{themes/dark.css → tokens/theme-dark.css} +25 -14
- package/styles/{themes/light.css → tokens/theme-light.css} +25 -14
- package/text-area/index.js +1 -1
- package/text-field/index.js +1 -1
- package/tooltip/index.js +1 -1
- package/styles/typography/desktop.css +0 -104
package/README.md
CHANGED
|
@@ -3,8 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
Essential UI **web components** for building modern web applications, bound to provide a **safe**, **simple** and **intuitive** interface.
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
|
|
8
7
|
|
|
9
8
|
## Installation
|
|
10
9
|
|
|
@@ -30,46 +29,44 @@ And include in HTML:
|
|
|
30
29
|
|
|
31
30
|
For a full list of components and API, explore the [components docs](https://vivid.deno.dev/components/accordion/) 📚.
|
|
32
31
|
|
|
33
|
-
###
|
|
32
|
+
### Tokens (Prerequisite)
|
|
34
33
|
|
|
35
|
-
The Vivid components library rely on a set of **
|
|
34
|
+
The Vivid components library rely on a set of **design tokens** (in the form of css custom properties).
|
|
36
35
|
|
|
37
|
-
|
|
36
|
+
Tokens should not affect the look of the application rather just provide a common set of identities (such as colors, typography, spacing etc') to be used by the components to look as intended.
|
|
38
37
|
|
|
39
|
-
|
|
38
|
+
As the task of loading css is not trivial, and may vary from project to project, this library does not provide any way to load the css. It is up to the author to load the css in the most appropriate manner for their project.
|
|
40
39
|
|
|
41
|
-
-
|
|
40
|
+
To **include the styles**, css files must be loaded into the project from the `node_modules/@vonage/vivid/styles/tokens` folder and *require a `vvd-root` class* selector to be present on the wrapping element (advisably `:root`).
|
|
42
41
|
|
|
43
|
-
|
|
42
|
+
Folder contains the following files:
|
|
44
43
|
|
|
45
|
-
|
|
44
|
+
- `theme-light.css` - Light theme
|
|
46
45
|
|
|
47
|
-
|
|
46
|
+
- `theme-dark.css` - Dark theme
|
|
48
47
|
|
|
49
|
-
|
|
48
|
+
Only one theme is required to be loaded.
|
|
50
49
|
|
|
51
|
-
|
|
50
|
+
### Fonts (Prerequisite)
|
|
52
51
|
|
|
53
|
-
|
|
52
|
+
- `node_modules/@vonage/vivid/styles/fonts/spezia.css` - Loads the *Spezia* variable font and defines its font face values. *Spezia* is Vonage's branded font and is required by most Vivid components. folder also contains the font files.
|
|
54
53
|
|
|
55
|
-
|
|
54
|
+
### Styles (Optional)
|
|
56
55
|
|
|
57
|
-
|
|
56
|
+
In Addition, this library provides a set of styles (combined with the tokens and fonts) that can be used to embody the Vivid design system into an application.
|
|
58
57
|
|
|
59
|
-
|
|
58
|
+
These styles are not required by vivid components directly. however, they do rely on the tokens and fonts 👆 to be loaded as components do.
|
|
60
59
|
|
|
61
|
-
-
|
|
60
|
+
- `node_modules/@vonage/vivid/styles/core/theme.css` - Sets theme related styles
|
|
62
61
|
|
|
63
|
-
|
|
62
|
+
- `node_modules/@vonage/vivid/styles/core/typography.css` - Sets typography related styles
|
|
64
63
|
|
|
65
|
-
|
|
64
|
+
- `node_modules/@vonage/vivid/styles/core/all.css` - Sets all the above styles
|
|
66
65
|
|
|
67
66
|
Note: scss users can simply [forward](https://sass-lang.com/documentation/at-rules/forward) the styles to their scss project:
|
|
68
67
|
|
|
69
68
|
```css
|
|
70
|
-
@forward 'node_modules/@vonage/vivid/styles/
|
|
71
|
-
@forward 'node_modules/@vonage/vivid/styles/typography/desktop.css';
|
|
72
|
-
@forward 'node_modules/@vonage/vivid/styles/themes/light.css';
|
|
69
|
+
@forward 'node_modules/@vonage/vivid/styles/[path to file].css';
|
|
73
70
|
```
|
|
74
71
|
|
|
75
72
|
## Support
|
package/accordion/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
|
|
2
2
|
import { c as classNames } from '../shared/class-names.js';
|
|
3
3
|
|
|
4
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
4
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.base {\n display: flex;\n flex-direction: column;\n}\n\n::slotted(vwc-accordion-item:not(:only-of-type)) {\n border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
|
|
5
5
|
|
|
6
6
|
class Accordion extends FoundationElement {
|
|
7
7
|
constructor() {
|
package/accordion-item/index.js
CHANGED
|
@@ -15,7 +15,7 @@ import '../shared/_has.js';
|
|
|
15
15
|
import '../shared/focus.js';
|
|
16
16
|
import '../shared/object-keys.js';
|
|
17
17
|
|
|
18
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
18
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.body {\n padding: 8px 32px 24px 16px;\n font: var(--vvd-font-base);\n}\n.icon:not(.icon-trailing) .body {\n padding-left: 48px;\n}\n\n.base {\n display: flex;\n flex-direction: column;\n}\n.base:not(.open) .body {\n display: none;\n}\n\n.header {\n padding: 0;\n margin: 0;\n}\n\n.button {\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n padding: 16px;\n border: 0 none;\n margin: 0;\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 cursor: pointer;\n font: var(--vvd-font-heading4);\n}\n.button {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.button:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.button:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n.button {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports selector(:focus-visible) {\n .button:focus {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .button {\n user-select: none;\n }\n}\n.button .heading-text {\n flex-grow: 1;\n margin-inline-end: auto;\n text-align: left;\n}\n.button .meta {\n overflow: hidden;\n max-width: 20%;\n flex-shrink: 0;\n color: var(--vvd-color-neutral-600);\n font: var(--vvd-font-base-bold);\n margin-inline-start: 16px;\n text-align: end;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.button .indicator {\n display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n margin-inline-start: 16px;\n}\n.button .icon {\n margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}\n\n.button:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
|
|
19
19
|
|
|
20
20
|
class AccordionItem extends FoundationElement {
|
|
21
21
|
constructor() {
|
package/action-group/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import '../shared/export.js';
|
|
|
5
5
|
import '../shared/object-keys.js';
|
|
6
6
|
import '../shared/iterators.js';
|
|
7
7
|
|
|
8
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
8
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n inline-size: inherit;\n vertical-align: middle;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base::before {\n position: absolute;\n z-index: 1;\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n content: \"\";\n inset: 0;\n pointer-events: none;\n}\n.base:not(.tight) {\n padding: 4px;\n column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n border-radius: 6px;\n}\n\n.base.shape-pill {\n border-radius: 24px;\n}\n\n/* Separator */\n::slotted(vwc-divider) {\n align-self: stretch;\n margin-block: 4px;\n}";
|
|
9
9
|
|
|
10
10
|
class ActionGroup extends FoundationElement {
|
|
11
11
|
constructor() {
|
package/avatar/index.js
CHANGED
|
@@ -8,7 +8,7 @@ import '../shared/to-string.js';
|
|
|
8
8
|
import '../shared/_has.js';
|
|
9
9
|
import '../shared/when.js';
|
|
10
10
|
|
|
11
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
11
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.base {\n display: inline-flex;\n overflow: hidden;\n align-items: center;\n justify-content: center;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_density);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n inline-size: var(--_density);\n vertical-align: middle;\n}\n.base.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-firm: var(--vvd-color-cta-600);\n}\n.base:not(.connotation-cta) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.base.appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base.density-condensed {\n --_density: 32px;\n}\n.base.density-condensed .icon {\n font-size: calc(32px / 2);\n}\n.base.density-extended {\n --_density: 48px;\n}\n.base.density-extended .icon {\n font-size: calc(48px / 2);\n}\n.base:not(.density-condensed, .density-extended) {\n --_density: 40px;\n}\n.base:not(.density-condensed, .density-extended) .icon {\n font-size: calc(40px / 2);\n}\n.base:not(.shape-pill) {\n border-radius: 6px;\n}\n.base.shape-pill {\n border-radius: 50%;\n}\n.base ::slotted(*) {\n block-size: 100%;\n inline-size: 100%;\n object-fit: cover;\n}";
|
|
12
12
|
|
|
13
13
|
class Avatar extends FoundationElement {}
|
|
14
14
|
|
package/badge/index.js
CHANGED
|
@@ -26,7 +26,7 @@ __decorate([attr, __metadata("design:type", String)], Badge.prototype, "text", v
|
|
|
26
26
|
|
|
27
27
|
applyMixins(Badge, AffixIconWithTrailing);
|
|
28
28
|
|
|
29
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
29
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.control {\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 font: var(--vvd-font-base-condensed-bold);\n vertical-align: middle;\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-cta-500);\n --_connotation-color-soft: var(--vvd-color-cta-100);\n --_connotation-color-contrast: var(--vvd-color-cta-800);\n}\n.control.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-success-500);\n --_connotation-color-soft: var(--vvd-color-success-100);\n --_connotation-color-contrast: var(--vvd-color-success-800);\n}\n.control.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-alert-500);\n --_connotation-color-soft: var(--vvd-color-alert-100);\n --_connotation-color-contrast: var(--vvd-color-alert-800);\n}\n.control.connotation-warning {\n --_connotation-color-primary: var(--vvd-color-warning-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-warning-500);\n --_connotation-color-soft: var(--vvd-color-warning-100);\n --_connotation-color-contrast: var(--vvd-color-warning-800);\n}\n.control.connotation-information {\n --_connotation-color-primary: var(--vvd-color-information-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-information-500);\n --_connotation-color-soft: var(--vvd-color-information-100);\n --_connotation-color-contrast: var(--vvd-color-information-800);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-intermediate: var(--vvd-color-neutral-500);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n --_connotation-color-contrast: var(--vvd-color-neutral-800);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control.appearance-duotone {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.control.appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n\n/* Size */\n.control:not(.density-condensed):not(.density-extended) {\n block-size: 24px;\n padding-inline: 10px;\n}\n\n.control.density-condensed {\n block-size: 20px;\n padding-inline: 8px;\n}\n\n.control.density-extended {\n block-size: 28px;\n padding-inline: 12px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n border-radius: 4px;\n}\n\n.control.shape-pill {\n border-radius: 14px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}";
|
|
30
30
|
|
|
31
31
|
let _ = t => t,
|
|
32
32
|
_t;
|
package/banner/index.js
CHANGED
|
@@ -21,7 +21,7 @@ import '../shared/ref.js';
|
|
|
21
21
|
import '../shared/focus2.js';
|
|
22
22
|
import '../shared/object-keys.js';
|
|
23
23
|
|
|
24
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
24
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.control {\n overflow: hidden;\n max-height: 160px;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-announcement {\n --_connotation-color-primary: var(--vvd-color-announcement-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control.connotation-warning {\n --_connotation-color-primary: var(--vvd-color-warning-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control:not(.connotation-success, .connotation-alert, .connotation-announcement, .connotation-warning) {\n --_connotation-color-primary: var(--vvd-color-information-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control.removing {\n max-height: 0;\n}\n.control > .header {\n display: flex;\n min-height: 60px;\n align-items: center;\n justify-content: flex-start;\n font: var(--vvd-font-base-bold);\n}\n.control > .header > .user-content {\n display: flex;\n flex: 1 0;\n align-items: center;\n justify-content: center;\n padding-inline: 16px;\n}\n.control > .header > .user-content > .icon {\n flex: 0 0 auto;\n font-size: 20px;\n margin-inline-end: 15px;\n}\n.control > .header > .user-content > .action-items {\n display: inline-block;\n flex: 0 0 auto;\n padding-inline-start: 15px;\n}\n.control > .header > .user-content > .message {\n padding: 20px 0;\n}\n.control > .header > .dismiss-button {\n --vvd-icon-button-color: inherit;\n flex: 0 0 auto;\n margin-inline-end: 8px;\n}";
|
|
25
25
|
|
|
26
26
|
var _Banner_handleRemoveEnd, _Banner_closeOnKeyDown;
|
|
27
27
|
const connotationIconMap = new Map([[Connotation.Information, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
|
package/breadcrumb-item/index.js
CHANGED
|
@@ -20,7 +20,7 @@ import '../shared/web.dom-collections.iterator.js';
|
|
|
20
20
|
import '../shared/object-keys.js';
|
|
21
21
|
import '../shared/focus2.js';
|
|
22
22
|
|
|
23
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
23
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.base {\n display: flex;\n align-items: center;\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-font-base);\n}\n.base vwc-icon {\n margin: 0 16px;\n color: var(--vvd-color-neutral-600);\n font-size: 12px;\n}\n\n.control {\n position: relative;\n font: inherit;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control:any-link {\n color: var(--vvd-color-cta-600);\n text-decoration: none;\n}\n.control:any-link:hover {\n text-decoration: underline;\n}\n\n.control:not(:focus-visible) > .focus-indicator {\n display: none;\n}";
|
|
24
24
|
|
|
25
25
|
class BreadcrumbItem extends BreadcrumbItem$1 {
|
|
26
26
|
constructor() {
|
package/button/index.js
CHANGED
|
@@ -44,7 +44,7 @@ __decorate([attr, __metadata("design:type", String)], Button.prototype, "label",
|
|
|
44
44
|
|
|
45
45
|
applyMixins(Button, AffixIconWithTrailing);
|
|
46
46
|
|
|
47
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
47
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n margin: 0;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_button-block-size);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n gap: var(--_button-icon-gap);\n vertical-align: middle;\n white-space: nowrap;\n /* Size */\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-cta-600);\n --_connotation-color-contrast: var(--vvd-color-cta-800);\n --_connotation-color-fierce: var(--vvd-color-cta-700);\n --_connotation-color-firm: var(--vvd-color-cta-600);\n --_connotation-color-soft: var(--vvd-color-cta-100);\n --_connotation-color-faint: var(--vvd-color-cta-50);\n}\n.control.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-success-600);\n --_connotation-color-contrast: var(--vvd-color-success-800);\n --_connotation-color-fierce: var(--vvd-color-success-700);\n --_connotation-color-firm: var(--vvd-color-success-600);\n --_connotation-color-soft: var(--vvd-color-success-100);\n --_connotation-color-faint: var(--vvd-color-success-50);\n}\n.control.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-alert-600);\n --_connotation-color-contrast: var(--vvd-color-alert-800);\n --_connotation-color-fierce: var(--vvd-color-alert-700);\n --_connotation-color-firm: var(--vvd-color-alert-600);\n --_connotation-color-soft: var(--vvd-color-alert-100);\n --_connotation-color-faint: var(--vvd-color-alert-50);\n}\n.control:not(.connotation-cta, .connotation-success, .connotation-alert) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n --_connotation-color-contrast: var(--vvd-color-neutral-800);\n --_connotation-color-fierce: var(--vvd-color-neutral-700);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\n}\n.control.appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-filled {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {\n --_appearance-color-text: var(--_connotation-color-firm);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .control {\n user-select: none;\n }\n}\n.control:not(:disabled) {\n cursor: pointer;\n}\n.control:disabled {\n cursor: not-allowed;\n}\n.control.icon-only {\n contain: size;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_button-block-size);\n }\n}\n.control .orange-box {\n aspect-ratio: 1;\n background: linear-gradient(rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5)), yellow;\n inline-size: 40px;\n}\n.control:not(.stacked).density-condensed {\n --_button-block-size: 32px;\n font: var(--vvd-font-base-condensed-bold);\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: var(--vvd-font-base-extended-bold);\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: var(--vvd-font-base-bold);\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: var(--vvd-font-base-bold);\n}\n.control.stacked:not(.icon-only) {\n --_button-icon-gap: 10px;\n padding-inline: 16px;\n}\n.control.stacked .icon {\n font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill:not(.stacked)) {\n border-radius: 6px;\n}\n\n.control.shape-pill:not(.stacked):not(.icon-only) {\n border-radius: 24px;\n}\n.control.shape-pill:not(.stacked).icon-only {\n border-radius: 50%;\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}\n\n:not(:focus-visible) > .focus-indicator {\n display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n --focus-stroke-gap-color: transparent;\n}";
|
|
48
48
|
|
|
49
49
|
let _ = t => t,
|
|
50
50
|
_t;
|
package/calendar/index.js
CHANGED
|
@@ -1245,7 +1245,7 @@ _curry1(function isEmpty(x) {
|
|
|
1245
1245
|
|
|
1246
1246
|
var isEmpty$1 = isEmpty;
|
|
1247
1247
|
|
|
1248
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
1248
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\nol {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n\n[role=grid i] {\n position: relative;\n z-index: 0;\n display: grid;\n margin: auto;\n grid-template-areas: \". column-headers\" \"row-headers calendar\";\n grid-template-columns: min-content auto;\n inline-size: max(100%, 500px);\n min-inline-size: 880px;\n}\n\n.row-headers {\n display: grid;\n grid-area: row-headers;\n grid-template-rows: repeat(24, 1fr);\n margin-inline-end: 2px;\n}\n.row-headers > [role=rowheader i] {\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n}\n.row-headers > [role=rowheader i] > time {\n font: var(--vvd-font-base-condensed);\n font-size: small;\n line-height: 1;\n text-transform: uppercase;\n white-space: nowrap;\n}\n\n.calendar-row {\n display: contents;\n}\n\n.calendar-grid-presentation {\n display: grid;\n overflow: hidden;\n background-color: var(--vvd-color-surface-2dp);\n border-radius: 6px;\n counter-reset: listing;\n filter: var(--vvd-shadow-surface-2dp);\n gap: 1px;\n grid-area: calendar;\n grid-auto-flow: column;\n grid-template: repeat(24, 1fr)/repeat(7, 1fr);\n}\n\n.hours {\n display: contents;\n}\n.hours > [role=listitem i] {\n position: relative;\n grid-column: 1/8;\n grid-row: var(--row);\n min-block-size: 48px;\n pointer-events: none;\n}\n.hours > [role=listitem i]:not(:first-child)::after {\n position: absolute;\n border-block-end: var(--vvd-color-neutral-100) 1px solid;\n content: \"\";\n inline-size: 100%;\n margin-block-start: -1px;\n}\n.hours > [role=listitem i]:nth-child(24n+1) {\n --row: 1;\n}\n.hours > [role=listitem i]:nth-child(24n+2) {\n --row: 2;\n}\n.hours > [role=listitem i]:nth-child(24n+3) {\n --row: 3;\n}\n.hours > [role=listitem i]:nth-child(24n+4) {\n --row: 4;\n}\n.hours > [role=listitem i]:nth-child(24n+5) {\n --row: 5;\n}\n.hours > [role=listitem i]:nth-child(24n+6) {\n --row: 6;\n}\n.hours > [role=listitem i]:nth-child(24n+7) {\n --row: 7;\n}\n.hours > [role=listitem i]:nth-child(24n+8) {\n --row: 8;\n}\n.hours > [role=listitem i]:nth-child(24n+9) {\n --row: 9;\n}\n.hours > [role=listitem i]:nth-child(24n+10) {\n --row: 10;\n}\n.hours > [role=listitem i]:nth-child(24n+11) {\n --row: 11;\n}\n.hours > [role=listitem i]:nth-child(24n+12) {\n --row: 12;\n}\n.hours > [role=listitem i]:nth-child(24n+13) {\n --row: 13;\n}\n.hours > [role=listitem i]:nth-child(24n+14) {\n --row: 14;\n}\n.hours > [role=listitem i]:nth-child(24n+15) {\n --row: 15;\n}\n.hours > [role=listitem i]:nth-child(24n+16) {\n --row: 16;\n}\n.hours > [role=listitem i]:nth-child(24n+17) {\n --row: 17;\n}\n.hours > [role=listitem i]:nth-child(24n+18) {\n --row: 18;\n}\n.hours > [role=listitem i]:nth-child(24n+19) {\n --row: 19;\n}\n.hours > [role=listitem i]:nth-child(24n+20) {\n --row: 20;\n}\n.hours > [role=listitem i]:nth-child(24n+21) {\n --row: 21;\n}\n.hours > [role=listitem i]:nth-child(24n+22) {\n --row: 22;\n}\n.hours > [role=listitem i]:nth-child(24n+23) {\n --row: 23;\n}\n.hours > [role=listitem i]:nth-child(24n+24) {\n --row: 24;\n}\n\n[role=gridcell i] {\n display: grid;\n gap: 1px;\n grid-auto-flow: column;\n}\n\n[role=gridcell i],\n[role=columnheader i],\n[role=columnheader i] [role=button i] {\n position: relative;\n}\n[role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n position: absolute;\n z-index: -1;\n background-color: var(--vvd-color-information-400);\n content: \"\";\n}\n@supports (inset: 0) {\n [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n inset: 0;\n }\n}\n@supports not (inset: 0) {\n [role=gridcell i]::before,\n[role=columnheader i]::before,\n[role=columnheader i] [role=button i]::before {\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n}\n[role=gridcell i]:focus,\n[role=columnheader i]:focus,\n[role=columnheader i] [role=button i]:focus {\n outline: none;\n}\n[role=gridcell i]:not(:focus-visible)::before,\n[role=columnheader i]:not(:focus-visible)::before,\n[role=columnheader i] [role=button i]:not(:focus-visible)::before {\n display: none;\n}\n\n.columns {\n display: contents;\n}\n.columns > [role=gridcell i] {\n position: relative;\n grid-column: var(--column);\n grid-row: 1/25;\n}\n.columns > [role=gridcell i]:nth-child(1) {\n --column: 1;\n}\n.columns > [role=gridcell i]:nth-child(2) {\n --column: 2;\n}\n.columns > [role=gridcell i]:nth-child(3) {\n --column: 3;\n}\n.columns > [role=gridcell i]:nth-child(4) {\n --column: 4;\n}\n.columns > [role=gridcell i]:nth-child(5) {\n --column: 5;\n}\n.columns > [role=gridcell i]:nth-child(6) {\n --column: 6;\n}\n.columns > [role=gridcell i]:nth-child(7) {\n --column: 7;\n}\n.columns > [role=gridcell i]:not(:first-child)::after {\n position: absolute;\n block-size: 100%;\n border-inline-end: var(--vvd-color-neutral-100) 1px solid;\n content: \"\";\n margin-inline-start: -1px;\n}\n\n.column-headers {\n display: grid;\n grid-area: column-headers;\n grid-template-columns: repeat(7, 1fr);\n}\n.column-headers [role=columnheader i] h2 {\n display: grid;\n align-items: baseline;\n margin: 0;\n font: var(--vvd-font-heading4);\n grid-template-columns: 1fr auto 1fr;\n}\n.column-headers [role=columnheader i] h2 > em {\n font: inherit;\n inline-size: min-content;\n}\n@supports (inset: 0) {\n .column-headers [role=columnheader i] h2 > em {\n inset-inline-start: 0;\n }\n}\n@supports not (inset: 0) {\n .column-headers [role=columnheader i] h2 > em {\n left: 0;\n }\n}\n.column-headers [role=columnheader i] h2 > small {\n font: var(--vvd-font-base-condensed);\n text-transform: uppercase;\n}";
|
|
1249
1249
|
|
|
1250
1250
|
const ARROW_UP = 'ArrowUp';
|
|
1251
1251
|
const ARROW_RIGHT = 'ArrowRight';
|
package/calendar-event/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import { w as when } from '../shared/when.js';
|
|
|
7
7
|
import { c as classNames } from '../shared/class-names.js';
|
|
8
8
|
import '../shared/object-keys.js';
|
|
9
9
|
|
|
10
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
10
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n:host {\n display: contents;\n}\n\n.base {\n /* 4 as the indentation limit */\n /* per cell divider */\n /* per cell divider */\n --vvd-calendar-event--indent: calc(0px + var(--vvd-calendar-event--overlap-count, 0) * 8px);\n position: absolute;\n z-index: var(--vvd-calendar-event--overlap-count);\n top: calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0)));\n overflow: hidden;\n box-sizing: border-box;\n padding: 4px 8px;\n background-color: var(--_appearance-color-fill);\n block-size: calc(var(--vvd-calendar-event--duration, 1) * calc((100% - 23px) / 24) + calc(1px * (var(--vvd-calendar-event--duration, 1) - 1)) - 4px);\n border-radius: 6px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n inline-size: calc(100% - 8px - min(var(--vvd-calendar-event--indent), 32px));\n margin-block-start: 2px;\n margin-inline-end: 8px;\n margin-inline-start: min(var(--vvd-calendar-event--indent), 32px);\n max-block-size: calc(100% - calc(var(--vvd-calendar-event--start, 0) * (100% - 23px) / 24 + calc(1px * var(--vvd-calendar-event--start, 0))) - 4px);\n}\n.base.connotation-accent {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-neutral-800);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n.base.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-cta-800);\n --_connotation-color-soft: var(--vvd-color-cta-100);\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-success-800);\n --_connotation-color-soft: var(--vvd-color-success-100);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-alert-800);\n --_connotation-color-soft: var(--vvd-color-alert-100);\n}\n.base.connotation-warning {\n --_connotation-color-primary: var(--vvd-color-warning-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-warning-800);\n --_connotation-color-soft: var(--vvd-color-warning-100);\n}\n.base.connotation-announcement {\n --_connotation-color-primary: var(--vvd-color-announcement-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-announcement-800);\n --_connotation-color-soft: var(--vvd-color-announcement-100);\n}\n.base:not(.connotation-accent, .connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-announcement) {\n --_connotation-color-primary: var(--vvd-color-information-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-contrast: var(--vvd-color-information-800);\n --_connotation-color-soft: var(--vvd-color-information-100);\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.base.appearance-subtle {\n --_appearance-color-text: var(--_connotation-color-contrast);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n@supports (contain: content) {\n .base {\n contain: strict;\n }\n}\n@supports not (contain: content) {\n .base {\n overflow: hidden;\n }\n}\n.base:focus {\n z-index: 2000;\n filter: var(--vvd-shadow-surface-8dp);\n outline: none;\n}\n\nh2 {\n margin: 0;\n font: var(--vvd-font-base-condensed-bold);\n}\nh2 > strong {\n font: inherit;\n}\n\np {\n margin: 0;\n font: var(--vvd-font-base-condensed);\n}";
|
|
11
11
|
|
|
12
12
|
var $ = _export;
|
|
13
13
|
var DESCRIPTORS = descriptors;
|
package/card/index.js
CHANGED
|
@@ -10,7 +10,7 @@ import '../shared/iterators.js';
|
|
|
10
10
|
import '../shared/to-string.js';
|
|
11
11
|
import '../shared/_has.js';
|
|
12
12
|
|
|
13
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
13
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n:host {\n display: flex;\n}\n\n.base {\n border-radius: 6px;\n inline-size: 100%;\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-canvas-text);\n}\n\n.main-content {\n display: flex;\n flex-flow: column;\n padding: 24px;\n}\n\n.header {\n display: flex;\n flex: 1;\n align-items: flex-start;\n gap: 8px;\n}\n.header-content {\n flex: 1;\n}\n.header-wrapper {\n display: flex;\n gap: 8px;\n}\n.header-headline, .header-subtitle {\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-headline {\n font: var(--vvd-font-heading4);\n -webkit-line-clamp: var(--headline-line-clamp);\n}\n.header-subtitle {\n font: var(--vvd-font-base);\n -webkit-line-clamp: var(--subtitle-line-clamp);\n}\n.hide-header .header {\n display: none;\n}\n\n.header-subtitle,\n.text {\n color: var(--vvd-color-neutral-600);\n font: var(--vvd-font-base);\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: 24px;\n margin-top: auto;\n padding-inline: 24px;\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: -8px;\n margin-inline-end: -8px;\n margin-inline-start: auto;\n}";
|
|
14
14
|
|
|
15
15
|
class Card extends FoundationElement {}
|
|
16
16
|
|
package/checkbox/index.js
CHANGED
|
@@ -91,7 +91,7 @@ __decorate([
|
|
|
91
91
|
observable
|
|
92
92
|
], Checkbox$1.prototype, "indeterminate", void 0);
|
|
93
93
|
|
|
94
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
94
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.base {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n}\n.base {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: var(--_connotation-color-primary);\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:indeterminate, .indeterminate):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: var(--_connotation-color-primary);\n}\n@supports selector(:focus-visible) {\n .base:focus {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n\n.control {\n position: relative;\n display: inline-flex;\n width: 24px;\n height: 24px;\n align-items: center;\n justify-content: center;\n background-color: var(--_appearance-color-fill);\n border-radius: 3px;\n box-shadow: inset 0 0 0 2px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n cursor: pointer;\n}\n\n.indicator {\n font-size: 16px;\n}\n.base:not(.checked) .indicator.checkmark {\n display: none;\n}\n\n.base:not(.indeterminate) .indicator.minus, .base.checked .indicator.minus {\n display: none;\n}\n\nlabel {\n color: var(--vvd-color-canvas-text);\n cursor: pointer;\n font: var(--vvd-font-base);\n}\n\n.focus-indicator {\n --focus-inset: -3px;\n --focus-stroke-gap-color: transparent;\n border-radius: 6px;\n}\n.base:not(:focus-visible) .focus-indicator {\n display: none;\n}";
|
|
95
95
|
|
|
96
96
|
const keySpace = ' ';
|
|
97
97
|
class Checkbox extends Checkbox$1 {
|
package/dialog/index.js
CHANGED
|
@@ -23,7 +23,7 @@ import '../shared/object-keys.js';
|
|
|
23
23
|
|
|
24
24
|
var css_248z$1 = "dialog {\n position: absolute;\n left: 0; right: 0;\n width: -moz-fit-content;\n width: -webkit-fit-content;\n width: fit-content;\n height: -moz-fit-content;\n height: -webkit-fit-content;\n height: fit-content;\n margin: auto;\n border: solid;\n padding: 1em;\n background: white;\n color: black;\n display: block;\n}\n\ndialog:not([open]) {\n display: none;\n}\n\ndialog + .backdrop {\n position: fixed;\n top: 0; right: 0; bottom: 0; left: 0;\n background: rgba(0,0,0,0.1);\n}\n\n._dialog_overlay {\n position: fixed;\n top: 0; right: 0; bottom: 0; left: 0;\n}\n\ndialog.fixed {\n position: fixed;\n top: 50%;\n transform: translate(0, -50%);\n}";
|
|
25
25
|
|
|
26
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
26
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.base {\n box-sizing: border-box;\n padding: 0;\n border: none;\n background: var(--_elevation-fill);\n border-radius: 6px;\n color: var(--vvd-color-canvas-text);\n max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n max-inline-size: var(--dialog-max-inline-size);\n min-inline-size: var(--dialog-min-inline-size, 280px);\n overflow-x: hidden;\n overflow-y: auto;\n}\n@media not all and (min-width: 600px) {\n .base {\n --dialog-max-inline-size: 90vw;\n }\n}\n@media (min-width: 600px) {\n .base {\n --dialog-max-inline-size: 560px;\n }\n}\n.base:not(.modal) {\n z-index: var(--dialog-z-index, 1);\n}\n\n.main-wrapper {\n display: flex;\n flex-direction: column;\n padding: 24px;\n gap: 8px;\n}\n\n.header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 4px;\n inline-size: 100%;\n}\n\n.dismiss-button {\n flex-shrink: 0;\n margin-top: -8px;\n margin-right: -8px;\n}\n\n.headline {\n font: var(--vvd-font-heading4);\n}\n.headline-wrapper {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n row-gap: 24px;\n}\n\n.content {\n font: var(--vvd-font-base);\n}";
|
|
27
27
|
|
|
28
28
|
var _Dialog_instances, _Dialog_modal, _Dialog_dialogElement, _Dialog_dialog_get, _Dialog_handleScrimClick, _Dialog_handleInternalFormSubmit, _Dialog_handleModal;
|
|
29
29
|
let dialogPolyfill;
|
package/divider/index.js
CHANGED
|
@@ -58,7 +58,7 @@ __decorate([
|
|
|
58
58
|
attr
|
|
59
59
|
], Divider$1.prototype, "orientation", void 0);
|
|
60
60
|
|
|
61
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
61
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n:host {\n display: block;\n}\n\n.base {\n display: block;\n background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n block-size: 1px;\n inline-size: 100%;\n}\n.base.vertical {\n block-size: 100%;\n inline-size: 1px;\n}";
|
|
62
62
|
|
|
63
63
|
class Divider extends Divider$1 {}
|
|
64
64
|
|
package/fab/index.js
CHANGED
|
@@ -19,7 +19,7 @@ import '../shared/object-keys.js';
|
|
|
19
19
|
import '../shared/form-associated.js';
|
|
20
20
|
import '../shared/aria-global.js';
|
|
21
21
|
|
|
22
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
22
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background: var(--_appearance-color-fill, var(--_elevation-fill));\n block-size: var(--_fab-block-size);\n border-radius: var(--_fab-border-radius);\n color: var(--_appearance-color-text, var(--vvd-color-canvas-text));\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n font: var(--vvd-font-base-bold);\n transition: background-color 0.15s linear, filter 0.15s linear;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-accent {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\n --_connotation-color-contrast: var(--vvd-color-neutral-800);\n --_connotation-color-fierce: var(--vvd-color-neutral-700);\n --_connotation-color-firm: var(--vvd-color-canvas-text);\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n --_connotation-color-primary-text: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-cta-600);\n --_connotation-color-contrast: var(--vvd-color-cta-800);\n --_connotation-color-fierce: var(--vvd-color-cta-700);\n --_connotation-color-firm: var(--vvd-color-cta-600);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-200);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary-text);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .control {\n user-select: none;\n }\n}\n.control.density-extended {\n --_fab-border-radius: 30px;\n --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n --_fab-border-radius: 24px;\n --_fab-block-size: 40px;\n}\n.control.icon-only {\n border-radius: 50%;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_fab-block-size);\n }\n}\n.control:not(.icon-only) {\n --fab-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:disabled {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n cursor: not-allowed;\n}\n.control:not(:disabled) {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n cursor: pointer;\n}\n.control:not(:disabled):hover {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}\n.density-extended .icon {\n font-size: 24px;\n}\n.icon:not(.density-extended) .icon {\n font-size: 20px;\n}\n\n:not(:focus-visible) .focus-indicator {\n display: none;\n}";
|
|
23
23
|
|
|
24
24
|
class Fab extends Button {}
|
|
25
25
|
|
package/focus/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { h as html, d as designSystem } from '../shared/index.js';
|
|
2
2
|
import { F as Focus } from '../shared/focus.js';
|
|
3
3
|
|
|
4
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
4
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n:host {\n display: contents;\n border-radius: inherit;\n}\n\n.control {\n position: absolute;\n z-index: 1;\n box-sizing: border-box;\n border-radius: inherit;\n box-shadow: inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n inset: var(--focus-inset, 0);\n outline: 2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));\n outline-offset: -2px;\n}";
|
|
5
5
|
|
|
6
6
|
let _ = t => t,
|
|
7
7
|
_t;
|
package/header/index.js
CHANGED
|
@@ -6,7 +6,7 @@ import '../shared/export.js';
|
|
|
6
6
|
import '../shared/object-keys.js';
|
|
7
7
|
import '../shared/iterators.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
9
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.base {\n z-index: 1;\n block-size: var(--_header-block-size);\n font: var(--vvd-font-heading4);\n inline-size: 100%;\n --_header-block-size: 64px;\n}\n.base .header-content {\n display: inline-flex;\n align-items: center;\n column-gap: 4px;\n}\n\n.container {\n display: flex;\n box-sizing: border-box;\n justify-content: space-between;\n block-size: inherit;\n color: var(--vvd-color-canvas-text);\n column-gap: 12px;\n padding-block: 8px;\n padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n background-color: var(--vvd-color-canvas);\n color: var(--vvd-color-canvas-text);\n color-scheme: var(--vvd-color-scheme);\n}\n\n.app-content {\n --_header-block-size: 64px;\n}";
|
|
10
10
|
|
|
11
11
|
class Header extends FoundationElement {
|
|
12
12
|
constructor() {
|
package/nav-disclosure/index.js
CHANGED
|
@@ -16,7 +16,7 @@ import '../shared/class-names.js';
|
|
|
16
16
|
import '../shared/focus.js';
|
|
17
17
|
import '../shared/object-keys.js';
|
|
18
18
|
|
|
19
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
19
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.control {\n position: relative;\n display: flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n border-radius: 6px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n cursor: pointer;\n font: var(--vvd-font-base);\n gap: 8px;\n hyphens: auto;\n inline-size: 100%;\n min-block-size: 40px;\n padding-inline: 8px;\n text-decoration: none;\n vertical-align: middle;\n word-break: break-word;\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n.control {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n@supports (user-select: none) {\n .control {\n user-select: none;\n }\n}\n.control .toggleIcon {\n margin-inline-start: auto;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n display: none;\n}\n\n.icon {\n font-size: 20px;\n}\n\n.content {\n border-inline-start: 1px solid var(--vvd-color-neutral-200);\n margin-inline-start: 20px;\n padding-inline-start: 12px;\n}\n\ndetails > summary {\n list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n display: none;\n}";
|
|
20
20
|
|
|
21
21
|
var _NavDisclosure_onToggle;
|
|
22
22
|
class NavDisclosure extends FoundationElement {
|
package/nav-item/index.js
CHANGED
|
@@ -20,7 +20,7 @@ import '../shared/aria-global.js';
|
|
|
20
20
|
import '../shared/ref.js';
|
|
21
21
|
import '../shared/focus2.js';
|
|
22
22
|
|
|
23
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
23
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n border-radius: 6px;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n font: var(--vvd-font-base);\n gap: 8px;\n hyphens: auto;\n inline-size: 100%;\n min-block-size: 40px;\n padding-block: 10px;\n padding-inline: 8px;\n text-decoration: none;\n vertical-align: middle;\n word-break: break-word;\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-soft);\n --_appearance-color-outline: transaprent;\n}\n.control {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n --_connotation-color-faint: var(--vvd-color-neutral-50);\n --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control.icon-only {\n display: flex;\n block-size: 40px;\n inline-size: 40px;\n place-content: center;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n display: none;\n}\n\n.icon {\n font-size: 20px;\n}";
|
|
24
24
|
|
|
25
25
|
class NavItem extends TextAnchor {}
|
|
26
26
|
applyMixins(NavItem, AffixIcon);
|
package/note/index.js
CHANGED
|
@@ -14,7 +14,7 @@ import '../shared/to-string.js';
|
|
|
14
14
|
import '../shared/_has.js';
|
|
15
15
|
import '../shared/object-keys.js';
|
|
16
16
|
|
|
17
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
17
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.base {\n display: flex;\n align-items: stretch;\n padding: 20px;\n border-left: 8px solid var(--_connotation-color-primary);\n background-color: var(--vvd-color-canvas);\n border-radius: 6px;\n box-shadow: inset 0 1px 0 0 var(--vvd-color-neutral-300), inset -1px 0 0 0 var(--vvd-color-neutral-300), inset 0 -1px 0 0 var(--vvd-color-neutral-300);\n color: var(--vvd-color-canvas-text);\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base.connotation-information {\n --_connotation-color-primary: var(--vvd-color-information-500);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base.connotation-warning {\n --_connotation-color-primary: var(--vvd-color-warning-500);\n}\n.base:not(.connotation-success, .connotation-information, .connotation-alert, .connotation-warning) {\n --_connotation-color-primary: var(--vvd-color-announcement-500);\n}\n@supports (contain: content) {\n .base {\n contain: content;\n }\n}\n@supports not (contain: content) {\n .base {\n overflow: hidden;\n }\n}\n\n.icon {\n align-self: flex-start;\n font-size: 24px;\n margin-inline-end: 16px;\n}\n\n.text {\n display: flex;\n min-height: 24px;\n flex: 1;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n text-align: start;\n}\n.text .headline {\n font: var(--vvd-font-base-bold);\n}\n.text .message {\n font: var(--vvd-font-base);\n}";
|
|
18
18
|
|
|
19
19
|
class Note extends FoundationElement {}
|
|
20
20
|
|
package/package.json
CHANGED
package/progress/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import { c as classNames } from '../shared/class-names.js';
|
|
|
7
7
|
import '../shared/object-keys.js';
|
|
8
8
|
import '../shared/iterators.js';
|
|
9
9
|
|
|
10
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
10
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.base {\n height: 6px;\n align-items: center;\n margin: 0;\n outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.base:not(.connotation-pacific).connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base:not(.connotation-pacific).connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base:not(.connotation-pacific):not(.connotation-cta, .connotation-alert, .connotation-success) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.base.connotation-pacific {\n --_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600));\n}\n\n.progress {\n position: relative;\n display: flex;\n overflow: hidden;\n align-items: center;\n background-color: var(--vvd-color-neutral-100);\n block-size: 100%;\n inline-size: 100%;\n /* Shape */\n}\n.base:not(.shape-sharp) .progress {\n border-radius: 3px;\n}\n\n.indeterminate {\n display: flex;\n background-color: var(--_connotation-color-primary);\n block-size: 100%;\n border-radius: inherit;\n inline-size: 100%;\n}\n\n.determinate {\n background-color: var(--_connotation-color-primary);\n block-size: 100%;\n border-radius: inherit;\n transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n background-image: var(--_connotation-color-primary);\n}\n.reverse .determinate {\n position: absolute;\n right: 0;\n}\n.paused .determinate {\n background-color: var(--vvd-color-neutral-300);\n}\n\n.indicator-1 {\n animation: indeterminate-1 2s infinite;\n inline-size: 30%;\n}\n\n.indicator-2 {\n animation: indeterminate-2 2s infinite;\n inline-size: 60%;\n}\n\n.indicator-1,\n.indicator-2 {\n position: absolute;\n animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n background-color: var(--vvd-color-neutral-100);\n block-size: 100%;\n opacity: 0;\n}\n.connotation-pacific .indicator-1,\n.connotation-pacific .indicator-2 {\n background-image: var(--_connotation-color-primary);\n}\n.paused .indicator-1,\n.paused .indicator-2 {\n animation-play-state: paused;\n background-color: var(--_connotation-color-primary);\n}\n.reverse .indicator-1,\n.reverse .indicator-2 {\n animation-direction: reverse;\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}";
|
|
11
11
|
|
|
12
12
|
var classof = classofRaw;
|
|
13
13
|
|
package/progress-ring/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import { B as BaseProgress } from '../shared/base-progress.js';
|
|
|
3
3
|
import { w as when } from '../shared/when.js';
|
|
4
4
|
import { c as classNames } from '../shared/class-names.js';
|
|
5
5
|
|
|
6
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
6
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.base {\n align-items: center;\n block-size: var(--_density);\n color: var(--_appearance-color-text);\n inline-size: var(--_density);\n outline: none;\n}\n.base.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.base.connotation-alert {\n --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base.connotation-success {\n --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.base {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\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-9 {\n --_density: calc(9 * 4px);\n}\n.base.density-11 {\n --_density: calc(11 * 4px);\n}\n.base.density-12 {\n --_density: calc(12 * 4px);\n}\n.base.density-13 {\n --_density: calc(13 * 4px);\n}\n.base:not(.density-5, .density-6, .density-7, .density-8, .density-9, .density-11, .density-12, .density-13) {\n --_density: calc(10 * 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: currentColor;\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: currentColor;\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}\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}";
|
|
7
7
|
|
|
8
8
|
class ProgressRing extends BaseProgress {}
|
|
9
9
|
|
|
@@ -15,7 +15,7 @@ export declare function formElements<T extends {
|
|
|
15
15
|
helperText?: string | undefined;
|
|
16
16
|
charCount: boolean;
|
|
17
17
|
userValid: boolean;
|
|
18
|
-
"__#
|
|
18
|
+
"__#5962@#blurred": boolean;
|
|
19
19
|
readonly errorValidationMessage: any;
|
|
20
20
|
validate: () => void;
|
|
21
21
|
};
|
package/side-drawer/index.js
CHANGED
|
@@ -33,18 +33,17 @@ __decorate([attr({
|
|
|
33
33
|
mode: 'boolean'
|
|
34
34
|
}), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
|
|
35
35
|
|
|
36
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
36
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.control {\n position: fixed;\n z-index: 1;\n background-color: var(--vvd-color-canvas);\n color: var(--vvd-color-canvas-text);\n inline-size: 280px;\n inset-block: 0;\n overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n background-color: var(--vvd-color-canvas);\n color: var(--vvd-color-canvas-text);\n color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n .control {\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n}\n\n.scrim {\n background-color: var(--vvd-color-canvas-text);\n opacity: 0.5;\n position: fixed;\n inset: 0;\n}\n.scrim:not(.open) {\n display: none;\n}";
|
|
37
37
|
|
|
38
38
|
let _ = t => t,
|
|
39
39
|
_t,
|
|
40
40
|
_t2;
|
|
41
41
|
|
|
42
42
|
const getClasses = ({
|
|
43
|
-
alternate,
|
|
44
43
|
modal,
|
|
45
44
|
open,
|
|
46
45
|
trailing
|
|
47
|
-
}) => classNames('control', ['
|
|
46
|
+
}) => classNames('control', ['modal', modal], ['open', open], ['trailing', trailing]);
|
|
48
47
|
|
|
49
48
|
const getScrimClasses = ({
|
|
50
49
|
open
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Sun, 11 Sep 2022 12:52:09 GMT
|
|
4
|
+
*/
|
|
5
|
+
.vvd-root {
|
|
6
|
+
color-scheme: var(--vvd-color-scheme);
|
|
7
|
+
background-color: var(--vvd-color-canvas);
|
|
8
|
+
color: var(--vvd-color-canvas-text);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.vvd-root {
|
|
12
|
+
font-feature-settings: "kern"; /* turns on kerning */
|
|
13
|
+
text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
|
|
14
|
+
-webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
|
|
15
|
+
-moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
|
|
16
|
+
font: var(--vvd-font-base);
|
|
17
|
+
}
|
|
18
|
+
.vvd-root p {
|
|
19
|
+
font: var(--vvd-font-base);
|
|
20
|
+
margin-block: 16px;
|
|
21
|
+
}
|
|
22
|
+
.vvd-root b, .vvd-root strong {
|
|
23
|
+
font: var(--vvd-font-base-bold);
|
|
24
|
+
}
|
|
25
|
+
.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {
|
|
26
|
+
font: var(--vvd-font-base-code);
|
|
27
|
+
}
|
|
28
|
+
.vvd-root .headline {
|
|
29
|
+
font: var(--vvd-font-headline);
|
|
30
|
+
margin-block: 40px;
|
|
31
|
+
}
|
|
32
|
+
.vvd-root .subtitle {
|
|
33
|
+
font: var(--vvd-font-subtitle);
|
|
34
|
+
margin-block: 40px;
|
|
35
|
+
}
|
|
36
|
+
.vvd-root h1, .vvd-root .heading1 {
|
|
37
|
+
font: var(--vvd-font-heading1);
|
|
38
|
+
margin-block: 32px;
|
|
39
|
+
}
|
|
40
|
+
.vvd-root h2, .vvd-root .heading2 {
|
|
41
|
+
font: var(--vvd-font-heading2);
|
|
42
|
+
margin-block: 32px;
|
|
43
|
+
}
|
|
44
|
+
.vvd-root h3, .vvd-root .heading3 {
|
|
45
|
+
font: var(--vvd-font-heading3);
|
|
46
|
+
margin-block: 24px;
|
|
47
|
+
}
|
|
48
|
+
.vvd-root h4, .vvd-root .heading4 {
|
|
49
|
+
font: var(--vvd-font-heading4);
|
|
50
|
+
margin-block: 24px;
|
|
51
|
+
}
|
|
52
|
+
.vvd-root small, .vvd-root figcaption {
|
|
53
|
+
font: var(--vvd-font-base-condensed);
|
|
54
|
+
}
|
|
55
|
+
.vvd-root small b, .vvd-root small strong, .vvd-root figcaption b, .vvd-root figcaption strong {
|
|
56
|
+
font: var(--vvd-font-base-condensed-bold);
|
|
57
|
+
}
|
|
58
|
+
.vvd-root small pre, .vvd-root small var, .vvd-root small code, .vvd-root small kbd, .vvd-root small samp, .vvd-root figcaption pre, .vvd-root figcaption var, .vvd-root figcaption code, .vvd-root figcaption kbd, .vvd-root figcaption samp {
|
|
59
|
+
font: var(--vvd-font-base-condensed-code);
|
|
60
|
+
}
|
|
61
|
+
.vvd-root sub,
|
|
62
|
+
.vvd-root sup {
|
|
63
|
+
font: 75%;
|
|
64
|
+
line-height: 0;
|
|
65
|
+
position: relative;
|
|
66
|
+
vertical-align: baseline;
|
|
67
|
+
}
|
|
68
|
+
.vvd-root sub {
|
|
69
|
+
bottom: -0.25em;
|
|
70
|
+
}
|
|
71
|
+
.vvd-root sup {
|
|
72
|
+
top: -0.5em;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/*# sourceMappingURL=all.css.map */
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Sun, 11 Sep 2022 12:52:09 GMT
|
|
4
|
+
*/
|
|
5
|
+
.vvd-root {
|
|
6
|
+
color-scheme: var(--vvd-color-scheme);
|
|
7
|
+
background-color: var(--vvd-color-canvas);
|
|
8
|
+
color: var(--vvd-color-canvas-text);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/*# sourceMappingURL=theme.css.map */
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Sun, 11 Sep 2022 12:52:09 GMT
|
|
4
|
+
*/
|
|
5
|
+
.vvd-root {
|
|
6
|
+
font-feature-settings: "kern"; /* turns on kerning */
|
|
7
|
+
text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
|
|
8
|
+
-webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
|
|
9
|
+
-moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
|
|
10
|
+
font: var(--vvd-font-base);
|
|
11
|
+
}
|
|
12
|
+
.vvd-root p {
|
|
13
|
+
font: var(--vvd-font-base);
|
|
14
|
+
margin-block: 16px;
|
|
15
|
+
}
|
|
16
|
+
.vvd-root b, .vvd-root strong {
|
|
17
|
+
font: var(--vvd-font-base-bold);
|
|
18
|
+
}
|
|
19
|
+
.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {
|
|
20
|
+
font: var(--vvd-font-base-code);
|
|
21
|
+
}
|
|
22
|
+
.vvd-root .headline {
|
|
23
|
+
font: var(--vvd-font-headline);
|
|
24
|
+
margin-block: 40px;
|
|
25
|
+
}
|
|
26
|
+
.vvd-root .subtitle {
|
|
27
|
+
font: var(--vvd-font-subtitle);
|
|
28
|
+
margin-block: 40px;
|
|
29
|
+
}
|
|
30
|
+
.vvd-root h1, .vvd-root .heading1 {
|
|
31
|
+
font: var(--vvd-font-heading1);
|
|
32
|
+
margin-block: 32px;
|
|
33
|
+
}
|
|
34
|
+
.vvd-root h2, .vvd-root .heading2 {
|
|
35
|
+
font: var(--vvd-font-heading2);
|
|
36
|
+
margin-block: 32px;
|
|
37
|
+
}
|
|
38
|
+
.vvd-root h3, .vvd-root .heading3 {
|
|
39
|
+
font: var(--vvd-font-heading3);
|
|
40
|
+
margin-block: 24px;
|
|
41
|
+
}
|
|
42
|
+
.vvd-root h4, .vvd-root .heading4 {
|
|
43
|
+
font: var(--vvd-font-heading4);
|
|
44
|
+
margin-block: 24px;
|
|
45
|
+
}
|
|
46
|
+
.vvd-root small, .vvd-root figcaption {
|
|
47
|
+
font: var(--vvd-font-base-condensed);
|
|
48
|
+
}
|
|
49
|
+
.vvd-root small b, .vvd-root small strong, .vvd-root figcaption b, .vvd-root figcaption strong {
|
|
50
|
+
font: var(--vvd-font-base-condensed-bold);
|
|
51
|
+
}
|
|
52
|
+
.vvd-root small pre, .vvd-root small var, .vvd-root small code, .vvd-root small kbd, .vvd-root small samp, .vvd-root figcaption pre, .vvd-root figcaption var, .vvd-root figcaption code, .vvd-root figcaption kbd, .vvd-root figcaption samp {
|
|
53
|
+
font: var(--vvd-font-base-condensed-code);
|
|
54
|
+
}
|
|
55
|
+
.vvd-root sub,
|
|
56
|
+
.vvd-root sup {
|
|
57
|
+
font: 75%;
|
|
58
|
+
line-height: 0;
|
|
59
|
+
position: relative;
|
|
60
|
+
vertical-align: baseline;
|
|
61
|
+
}
|
|
62
|
+
.vvd-root sub {
|
|
63
|
+
bottom: -0.25em;
|
|
64
|
+
}
|
|
65
|
+
.vvd-root sup {
|
|
66
|
+
top: -0.5em;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/*# sourceMappingURL=typography.css.map */
|
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Sun, 11 Sep 2022 12:52:09 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Sun, 11 Sep 2022 12:52:09 GMT
|
|
8
8
|
*/
|
|
9
|
-
|
|
9
|
+
/**
|
|
10
|
+
* Do not edit directly
|
|
11
|
+
* Generated on Sun, 11 Sep 2022 12:52:09 GMT
|
|
12
|
+
*/
|
|
13
|
+
.vvd-root, ::part(vvd-root) {
|
|
14
|
+
--vvd-color-scheme: dark;
|
|
10
15
|
--vvd-color-canvas: #000000;
|
|
11
16
|
--vvd-color-canvas-text: #ffffff;
|
|
12
17
|
--vvd-color-neutral-50: #1a1a1a;
|
|
@@ -94,14 +99,25 @@
|
|
|
94
99
|
--vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);
|
|
95
100
|
--vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
|
|
96
101
|
--vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
+
--vvd-font-headline: 500 condensed 66px/88px SpeziaCompleteVariableUpright;
|
|
103
|
+
--vvd-font-subtitle: 500 condensed 52px/68px SpeziaCompleteVariableUpright;
|
|
104
|
+
--vvd-font-heading1: 500 condensed 40px/52px SpeziaCompleteVariableUpright;
|
|
105
|
+
--vvd-font-heading2: 500 condensed 32px/44px SpeziaCompleteVariableUpright;
|
|
106
|
+
--vvd-font-heading3: 500 condensed 26px/36px SpeziaCompleteVariableUpright;
|
|
107
|
+
--vvd-font-heading4: 500 condensed 20px/28px SpeziaCompleteVariableUpright;
|
|
108
|
+
--vvd-font-base: 400 ultra-condensed 14px/20px SpeziaCompleteVariableUpright;
|
|
109
|
+
--vvd-font-base-bold: 600 ultra-condensed 14px/20px SpeziaCompleteVariableUpright;
|
|
110
|
+
--vvd-font-base-code: 400 ultra-condensed 14px/20px SpeziaMonoCompleteVariable;
|
|
111
|
+
--vvd-font-base-extended: 400 ultra-condensed 16px/24px SpeziaCompleteVariableUpright;
|
|
112
|
+
--vvd-font-base-extended-bold: 600 ultra-condensed 16px/24px SpeziaCompleteVariableUpright;
|
|
113
|
+
--vvd-font-base-extended-code: 400 ultra-condensed 16px/24px SpeziaMonoCompleteVariable;
|
|
114
|
+
--vvd-font-base-condensed: 400 ultra-condensed 12px/16px SpeziaCompleteVariableUpright;
|
|
115
|
+
--vvd-font-base-condensed-bold: 600 ultra-condensed 12px/16px SpeziaCompleteVariableUpright;
|
|
116
|
+
--vvd-font-base-condensed-code: 400 ultra-condensed 12px/16px SpeziaMonoCompleteVariable;
|
|
102
117
|
}
|
|
103
118
|
|
|
104
119
|
.vvd-theme-alternate, ::part(vvd-theme-alternate) {
|
|
120
|
+
--vvd-color-scheme: light;
|
|
105
121
|
--vvd-color-canvas: #ffffff;
|
|
106
122
|
--vvd-color-canvas-text: #000000;
|
|
107
123
|
--vvd-color-neutral-50: #F2F2F2;
|
|
@@ -190,10 +206,5 @@
|
|
|
190
206
|
--vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
|
|
191
207
|
--vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
|
|
192
208
|
}
|
|
193
|
-
@supports (color-scheme: light) {
|
|
194
|
-
.vvd-theme-alternate, ::part(vvd-theme-alternate) {
|
|
195
|
-
color-scheme: light;
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
209
|
|
|
199
|
-
/*# sourceMappingURL=dark.css.map */
|
|
210
|
+
/*# sourceMappingURL=theme-dark.css.map */
|
|
@@ -1,12 +1,17 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Sun, 11 Sep 2022 12:52:09 GMT
|
|
4
4
|
*/
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Sun, 11 Sep 2022 12:52:09 GMT
|
|
8
8
|
*/
|
|
9
|
-
|
|
9
|
+
/**
|
|
10
|
+
* Do not edit directly
|
|
11
|
+
* Generated on Sun, 11 Sep 2022 12:52:09 GMT
|
|
12
|
+
*/
|
|
13
|
+
.vvd-root, ::part(vvd-root) {
|
|
14
|
+
--vvd-color-scheme: light;
|
|
10
15
|
--vvd-color-canvas: #ffffff;
|
|
11
16
|
--vvd-color-canvas-text: #000000;
|
|
12
17
|
--vvd-color-neutral-50: #F2F2F2;
|
|
@@ -94,14 +99,25 @@
|
|
|
94
99
|
--vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);
|
|
95
100
|
--vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
|
|
96
101
|
--vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
+
--vvd-font-headline: 500 condensed 66px/88px SpeziaCompleteVariableUpright;
|
|
103
|
+
--vvd-font-subtitle: 500 condensed 52px/68px SpeziaCompleteVariableUpright;
|
|
104
|
+
--vvd-font-heading1: 500 condensed 40px/52px SpeziaCompleteVariableUpright;
|
|
105
|
+
--vvd-font-heading2: 500 condensed 32px/44px SpeziaCompleteVariableUpright;
|
|
106
|
+
--vvd-font-heading3: 500 condensed 26px/36px SpeziaCompleteVariableUpright;
|
|
107
|
+
--vvd-font-heading4: 500 condensed 20px/28px SpeziaCompleteVariableUpright;
|
|
108
|
+
--vvd-font-base: 400 ultra-condensed 14px/20px SpeziaCompleteVariableUpright;
|
|
109
|
+
--vvd-font-base-bold: 600 ultra-condensed 14px/20px SpeziaCompleteVariableUpright;
|
|
110
|
+
--vvd-font-base-code: 400 ultra-condensed 14px/20px SpeziaMonoCompleteVariable;
|
|
111
|
+
--vvd-font-base-extended: 400 ultra-condensed 16px/24px SpeziaCompleteVariableUpright;
|
|
112
|
+
--vvd-font-base-extended-bold: 600 ultra-condensed 16px/24px SpeziaCompleteVariableUpright;
|
|
113
|
+
--vvd-font-base-extended-code: 400 ultra-condensed 16px/24px SpeziaMonoCompleteVariable;
|
|
114
|
+
--vvd-font-base-condensed: 400 ultra-condensed 12px/16px SpeziaCompleteVariableUpright;
|
|
115
|
+
--vvd-font-base-condensed-bold: 600 ultra-condensed 12px/16px SpeziaCompleteVariableUpright;
|
|
116
|
+
--vvd-font-base-condensed-code: 400 ultra-condensed 12px/16px SpeziaMonoCompleteVariable;
|
|
102
117
|
}
|
|
103
118
|
|
|
104
119
|
.vvd-theme-alternate, ::part(vvd-theme-alternate) {
|
|
120
|
+
--vvd-color-scheme: dark;
|
|
105
121
|
--vvd-color-canvas: #000000;
|
|
106
122
|
--vvd-color-canvas-text: #ffffff;
|
|
107
123
|
--vvd-color-neutral-50: #1a1a1a;
|
|
@@ -190,10 +206,5 @@
|
|
|
190
206
|
--vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
|
|
191
207
|
--vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
|
|
192
208
|
}
|
|
193
|
-
@supports (color-scheme: dark) {
|
|
194
|
-
.vvd-theme-alternate, ::part(vvd-theme-alternate) {
|
|
195
|
-
color-scheme: dark;
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
209
|
|
|
199
|
-
/*# sourceMappingURL=light.css.map */
|
|
210
|
+
/*# sourceMappingURL=theme-light.css.map */
|
package/text-area/index.js
CHANGED
|
@@ -191,7 +191,7 @@ __decorate([
|
|
|
191
191
|
], TextArea$1.prototype, "defaultSlottedNodes", void 0);
|
|
192
192
|
applyMixins(TextArea$1, DelegatesARIATextbox);
|
|
193
193
|
|
|
194
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
194
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n display: inline-grid;\n width: 100%;\n gap: 4px;\n grid-template-columns: min-content 1fr max-content;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(.error):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-alert-500);\n --_appearance-color-fill: var(--vvd-color-alert-100);\n --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: transparent;\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n --_low-ink-color: var(--vvd-color-neutral-400);\n pointer-events: none;\n}\n\n.label {\n contain: inline-size;\n font: var(--vvd-font-base);\n grid-column: 1/4;\n grid-row: 1;\n line-height: 20px;\n}\n.base:not(.disabled) .label {\n color: var(--vvd-color-canvas-text);\n}\n.base.disabled .label {\n color: var(--vvd-color-neutral-400);\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n border-radius: 6px;\n grid-column: 1/4;\n}\n\n.control {\n width: 100%;\n padding: 4px 16px;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n font: var(--vvd-font-base);\n min-block-size: 40px;\n transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control::placeholder {\n color: var(--_low-ink-color);\n}\n\n.helper-text {\n color: var(--_low-ink-color);\n font: var(--vvd-font-base-condensed);\n grid-column: 1/4;\n}\n\n.error-message {\n display: flex;\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-font-base-condensed);\n grid-column: 2/4;\n}\n.error-message-icon {\n color: var(--vvd-color-alert-500);\n font-size: 16px;\n grid-column: 1/2;\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n display: none;\n}";
|
|
195
195
|
|
|
196
196
|
let TextArea = class TextArea extends TextArea$1 {};
|
|
197
197
|
|
package/text-field/index.js
CHANGED
|
@@ -32,7 +32,7 @@ __decorate([attr, __metadata("design:type", String)], TextField.prototype, "auto
|
|
|
32
32
|
TextField = __decorate([formElements], TextField);
|
|
33
33
|
applyMixins(TextField, AffixIcon);
|
|
34
34
|
|
|
35
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
35
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n:host {\n display: inline-block;\n}\n\n.base {\n display: inline-grid;\n width: 100%;\n gap: 4px;\n grid-template-columns: min-content 1fr max-content;\n}\n.base {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-canvas);\n --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: var(--_connotation-color-primary);\n --_appearance-color-fill: var(--_connotation-color-faint);\n --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n --_appearance-color-text: var(--vvd-color-canvas-text);\n --_appearance-color-fill: var(--vvd-color-neutral-100);\n --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n --_appearance-color-text: var(--vvd-color-neutral-400);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.base:where(.error):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--vvd-color-alert-500);\n --_appearance-color-fill: var(--vvd-color-alert-100);\n --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n --_appearance-color-text: transparent;\n --_appearance-color-fill: transparent;\n --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n .base {\n user-select: none;\n }\n}\n.base:not(.disabled) {\n --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n --_low-ink-color: var(--vvd-color-neutral-400);\n}\n\n.label {\n contain: inline-size;\n font: var(--vvd-font-base);\n grid-column: 1/4;\n grid-row: 1;\n}\n.char-count + .label {\n grid-column: 1/3;\n}\n.base:not(.disabled) .label {\n color: var(--vvd-color-canvas-text);\n}\n.base.disabled .label {\n color: var(--vvd-color-neutral-400);\n}\n\n.char-count {\n color: var(--_low-ink-color);\n font: var(--vvd-font-base);\n grid-column: 3/4;\n}\n\n.fieldset {\n position: relative;\n display: flex;\n align-items: center;\n color: var(--_appearance-color-text);\n grid-column: 1/4;\n transition: color 0.2s;\n /* Size */\n /* Shape */\n}\n.base:not(.density-extended) > .fieldset {\n block-size: 40px;\n}\n.base.density-extended > .fieldset {\n block-size: 48px;\n}\n.base:not(.shape-pill) .fieldset {\n border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n border-radius: 24px;\n}\n\n.control {\n width: 100%;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n block-size: 100%;\n border-radius: inherit;\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: inherit;\n font: var(--vvd-font-base);\n padding-inline-end: 16px;\n padding-inline-start: 16px;\n transition: box-shadow 0.2s, background-color 0.2s;\n}\n@supports selector(:focus-visible) {\n .control:focus {\n outline: none;\n }\n}\n.control::placeholder {\n color: var(--_low-ink-color);\n}\n\n.icon {\n position: absolute;\n z-index: 1;\n color: var(--_low-ink-color);\n font-size: 20px;\n inset-inline-start: 16px;\n}\n.icon + .control {\n padding-inline-start: 44px;\n}\n\n.helper-text {\n color: var(--_low-ink-color);\n font: var(--vvd-font-base-condensed);\n grid-column: 1/4;\n margin-inline-start: 16px;\n}\n\n.error-message {\n display: flex;\n color: var(--vvd-color-canvas-text);\n contain: inline-size;\n font: var(--vvd-font-base-condensed);\n grid-column: 2/4;\n}\n.error-message-icon {\n color: var(--vvd-color-alert-500);\n font-size: 16px;\n grid-column: 1/2;\n}\n\n.focus-indicator {\n --focus-stroke-gap-color: transparent;\n pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n display: none;\n}";
|
|
36
36
|
|
|
37
37
|
let _ = t => t,
|
|
38
38
|
_t,
|
package/tooltip/index.js
CHANGED
|
@@ -23,7 +23,7 @@ import '../shared/focus2.js';
|
|
|
23
23
|
import '../shared/object-keys.js';
|
|
24
24
|
import '../shared/es.object.assign.js';
|
|
25
25
|
|
|
26
|
-
var css_248z = "/**\n * Do not edit directly\n * Generated on
|
|
26
|
+
var css_248z = "/**\n * Do not edit directly\n * Generated on Sun, 11 Sep 2022 12:52:09 GMT\n */\n.control {\n pointer-events: none;\n}\n\n.tooltip {\n width: var(--tooltip-inline-size, 240px);\n}\n.tooltip-text {\n padding: 8px 12px;\n color: var(--vvd-color-canvas-text);\n font: var(--vvd-font-base-bold);\n}";
|
|
27
27
|
|
|
28
28
|
class Tooltip extends FoundationElement {
|
|
29
29
|
constructor() {
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Do not edit directly
|
|
3
|
-
* Generated on Sat, 10 Sep 2022 18:25:53 GMT
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* Do not edit directly
|
|
7
|
-
* Generated on Sat, 10 Sep 2022 18:25:53 GMT
|
|
8
|
-
*/
|
|
9
|
-
:root {
|
|
10
|
-
--vvd-font-headline: 500 condensed 66px/88px SpeziaCompleteVariableUpright;
|
|
11
|
-
--vvd-font-subtitle: 500 condensed 52px/68px SpeziaCompleteVariableUpright;
|
|
12
|
-
--vvd-font-heading1: 500 condensed 40px/52px SpeziaCompleteVariableUpright;
|
|
13
|
-
--vvd-font-heading2: 500 condensed 32px/44px SpeziaCompleteVariableUpright;
|
|
14
|
-
--vvd-font-heading3: 500 condensed 26px/36px SpeziaCompleteVariableUpright;
|
|
15
|
-
--vvd-font-heading4: 500 condensed 20px/28px SpeziaCompleteVariableUpright;
|
|
16
|
-
--vvd-font-base: 400 ultra-condensed 14px/20px SpeziaCompleteVariableUpright;
|
|
17
|
-
--vvd-font-base-bold: 600 ultra-condensed 14px/20px SpeziaCompleteVariableUpright;
|
|
18
|
-
--vvd-font-base-code: 400 ultra-condensed 14px/20px SpeziaMonoCompleteVariable;
|
|
19
|
-
--vvd-font-base-extended: 400 ultra-condensed 16px/24px SpeziaCompleteVariableUpright;
|
|
20
|
-
--vvd-font-base-extended-bold: 600 ultra-condensed 16px/24px SpeziaCompleteVariableUpright;
|
|
21
|
-
--vvd-font-base-extended-code: 400 ultra-condensed 16px/24px SpeziaMonoCompleteVariable;
|
|
22
|
-
--vvd-font-base-condensed: 400 ultra-condensed 12px/16px SpeziaCompleteVariableUpright;
|
|
23
|
-
--vvd-font-base-condensed-bold: 600 ultra-condensed 12px/16px SpeziaCompleteVariableUpright;
|
|
24
|
-
--vvd-font-base-condensed-code: 400 ultra-condensed 12px/16px SpeziaMonoCompleteVariable;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
body {
|
|
28
|
-
font-feature-settings: "kern"; /* turns on kerning */
|
|
29
|
-
text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
|
|
30
|
-
-webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
|
|
31
|
-
-moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
|
|
32
|
-
font: var(--vvd-font-base);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
p {
|
|
36
|
-
font: var(--vvd-font-base);
|
|
37
|
-
margin-block: 16px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
b, strong {
|
|
41
|
-
font: var(--vvd-font-base-bold);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
pre, var, code, kbd, samp {
|
|
45
|
-
font: var(--vvd-font-base-code);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.headline {
|
|
49
|
-
font: var(--vvd-font-headline);
|
|
50
|
-
margin-block: 40px;
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
.subtitle {
|
|
54
|
-
font: var(--vvd-font-subtitle);
|
|
55
|
-
margin-block: 40px;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
h1, .heading1 {
|
|
59
|
-
font: var(--vvd-font-heading1);
|
|
60
|
-
margin-block: 32px;
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
h2, .heading2 {
|
|
64
|
-
font: var(--vvd-font-heading2);
|
|
65
|
-
margin-block: 32px;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
h2, .heading3 {
|
|
69
|
-
font: var(--vvd-font-heading3);
|
|
70
|
-
margin-block: 24px;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
h4, .heading4 {
|
|
74
|
-
font: var(--vvd-font-heading4);
|
|
75
|
-
margin-block: 24px;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
small, figcaption {
|
|
79
|
-
font: var(--vvd-font-base-condensed);
|
|
80
|
-
}
|
|
81
|
-
small b, small strong, figcaption b, figcaption strong {
|
|
82
|
-
font: var(--vvd-font-base-condensed-bold);
|
|
83
|
-
}
|
|
84
|
-
small pre, small var, small code, small kbd, small samp, figcaption pre, figcaption var, figcaption code, figcaption kbd, figcaption samp {
|
|
85
|
-
font: var(--vvd-font-base-condensed-code);
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
sub,
|
|
89
|
-
sup {
|
|
90
|
-
font: 75%;
|
|
91
|
-
line-height: 0;
|
|
92
|
-
position: relative;
|
|
93
|
-
vertical-align: baseline;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
sub {
|
|
97
|
-
bottom: -0.25em;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
sup {
|
|
101
|
-
top: -0.5em;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
/*# sourceMappingURL=desktop.css.map */
|