@vonage/vivid 3.0.0-next.5 → 3.0.0-nouse.0

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.
Files changed (22) hide show
  1. package/accordion-item/index.js +1 -1
  2. package/badge/index.js +1 -1
  3. package/banner/index.js +2 -1
  4. package/breadcrumb-item/index.js +1 -1
  5. package/button/index.js +1 -1
  6. package/calendar/index.js +1 -1
  7. package/lib/badge/badge.d.ts +1 -1
  8. package/lib/enums.d.ts +1 -0
  9. package/lib/popup/popup.d.ts +2 -14
  10. package/lib/side-drawer/side-drawer.d.ts +2 -6
  11. package/lib/side-drawer/side-drawer.template.d.ts +2 -2
  12. package/lib/tooltip/tooltip.d.ts +0 -2
  13. package/package.json +4 -3
  14. package/popup/index.js +82 -104
  15. package/shared/icon.js +1 -1
  16. package/shared/index.js +9 -2
  17. package/side-drawer/index.js +14 -36
  18. package/sidenav-item/index.js +1 -1
  19. package/styles/themes/dark.css +12 -0
  20. package/styles/themes/light.css +12 -0
  21. package/text/index.js +1 -1
  22. package/tooltip/index.js +1 -9
package/accordion-item/index.js CHANGED
@@ -9,7 +9,7 @@ import '../icon/index.js';
9
9
  import '../shared/icon.js';
10
10
  import '../shared/_has.js';
11
11
 
12
- var css_248z = "/*\n Do not edit directly\n Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.body {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n padding-left: 48px;\n}\n\n.control {\n display: flex;\n flex-direction: column;\n}\n.control:not(.open) .toggle-close,\n.control:not(.open) .body {\n display: none;\n}\n.control.open .toggle-open {\n display: none;\n}\n.control.open .toggle-close {\n display: initial;\n}\n\n.header {\n padding: 0;\n margin: 0;\n}\n\n.button {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n padding: 16px;\n border: 0 none;\n background: transparent;\n cursor: pointer;\n}\n.button:hover {\n background: var(--vvd-color-neutral-10);\n}\n.button .heading-text {\n flex-grow: 1;\n margin-inline-end: auto;\n text-align: left;\n}\n.button .meta {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n overflow: hidden;\n max-width: 20%;\n flex-shrink: 0;\n color: var(--vvd-color-neutral-70);\n margin-inline-start: 1rem;\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}";
12
+ var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.body {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n padding-left: 48px;\n}\n\n.control {\n display: flex;\n flex-direction: column;\n}\n.control:not(.open) .toggle-close,\n.control:not(.open) .body {\n display: none;\n}\n.control.open .toggle-open {\n display: none;\n}\n.control.open .toggle-close {\n display: initial;\n}\n\n.header {\n padding: 0;\n margin: 0;\n}\n\n.button {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n padding: 16px;\n border: 0 none;\n background: transparent;\n cursor: pointer;\n}\n.button:hover {\n background: var(--vvd-color-neutral-10);\n}\n.button .heading-text {\n flex-grow: 1;\n margin-inline-end: auto;\n text-align: left;\n}\n.button .meta {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n overflow: hidden;\n max-width: 20%;\n flex-shrink: 0;\n color: var(--vvd-color-neutral-70);\n margin-inline-start: 1rem;\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}";
13
13
  styleInject(css_248z);
14
14
 
15
15
  class AccordionItem extends FoundationElement {
package/badge/index.js CHANGED
@@ -31,7 +31,7 @@ __decorate([attr({
31
31
 
32
32
  applyMixins(Badge, AffixIconWithTrailing);
33
33
 
34
- var css_248z = "/*\n Do not edit directly\n Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.control {\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n column-gap: 8px;\n vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-warning):not(.connotation-info) {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n --connotation-soft: var(--vvd-color-neutral-20);\n --connotation-contrast: var(--vvd-color-neutral-90);\n}\n\n.control.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n --connotation-soft: var(--vvd-color-cta-20);\n --connotation-contrast: var(--vvd-color-cta-90);\n}\n\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-soft: var(--vvd-color-success-20);\n --connotation-contrast: var(--vvd-color-success-90);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n --connotation-soft: var(--vvd-color-alert-20);\n --connotation-contrast: var(--vvd-color-alert-90);\n}\n\n.control.connotation-warning {\n --connotation: var(--vvd-color-warning);\n --on-connotation: var(--vvd-color-on-warning);\n --connotation-soft: var(--vvd-color-warning-20);\n --connotation-contrast: var(--vvd-color-warning-90);\n}\n\n.control.connotation-info {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n --connotation-soft: var(--vvd-color-info-20);\n --connotation-contrast: var(--vvd-color-info-90);\n}\n\n.control {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation);\n --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--connotation);\n}\n.control.appearance-subtle {\n --_appearance-color-text: var(--connotation-contrast);\n --_appearance-color-fill: var(--connotation-soft);\n --_appearance-color-outline: transaprent;\n}\n\n/* Size */\n.control:not(.size-base-small):not(.size-base-large) {\n block-size: 24px;\n padding-inline: 10px;\n}\n\n.control.size-base-small {\n block-size: 20px;\n padding-inline: 8px;\n}\n\n.control.size-base-large {\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}";
34
+ var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: var(--_appearance-color-fill);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n column-gap: 8px;\n vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert):not(.connotation-warning):not(.connotation-info) {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n --connotation-basis: var(--vvd-color-neutral);\n --connotation-soft: var(--vvd-color-neutral-20);\n --connotation-contrast: var(--vvd-color-neutral-90);\n}\n\n.control.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n --connotation-basis: var(--vvd-color-cta);\n --connotation-soft: var(--vvd-color-cta-20);\n --connotation-contrast: var(--vvd-color-cta-90);\n}\n\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-basis: var(--vvd-color-success);\n --connotation-soft: var(--vvd-color-success-20);\n --connotation-contrast: var(--vvd-color-success-90);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n --connotation-basis: var(--vvd-color-alert);\n --connotation-soft: var(--vvd-color-alert-20);\n --connotation-contrast: var(--vvd-color-alert-90);\n}\n\n.control.connotation-warning {\n --connotation: var(--vvd-color-warning);\n --on-connotation: var(--vvd-color-on-warning);\n --connotation-basis: var(--vvd-color-warning);\n --connotation-soft: var(--vvd-color-warning-20);\n --connotation-contrast: var(--vvd-color-warning-90);\n}\n\n.control.connotation-info {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n --connotation-basis: var(--vvd-color-info);\n --connotation-soft: var(--vvd-color-info-20);\n --connotation-contrast: var(--vvd-color-info-90);\n}\n\n.control {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation);\n --_appearance-color-outline: transaprent;\n}\n.control.appearance-duotone {\n --_appearance-color-text: var(--connotation-contrast);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--connotation-basis);\n}\n.control.appearance-subtle {\n --_appearance-color-text: var(--connotation-contrast);\n --_appearance-color-fill: var(--connotation-soft);\n --_appearance-color-outline: transaprent;\n}\n\n/* Size */\n.control:not(.size-base-small):not(.size-base-large) {\n block-size: 24px;\n padding-inline: 10px;\n}\n\n.control.size-base-small {\n block-size: 20px;\n padding-inline: 8px;\n}\n\n.control.size-base-large {\n block-size: 28px;\n padding-inline: 12px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n border-radius: 4px;\n}\n\n.control.shape-pill {\n border-radius: 14px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n order: 1;\n}";
35
35
  styleInject(css_248z);
36
36
 
37
37
  let _ = t => t,
package/banner/index.js CHANGED
@@ -16,7 +16,7 @@ import '../shared/text-anchor.js';
16
16
  import '../shared/anchor.js';
17
17
  import '../shared/text-anchor.template.js';
18
18
 
19
- var css_248z = "/*\n Do not edit directly\n Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.control {\n overflow: hidden;\n max-height: 10rem;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-diverse: var(--vvd-color-success-70);\n}\n\n.control:not(.connotation-success):not(.connotation-alert):not(.connotation-announcement):not(.connotation-warning) {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n --connotation-diverse: var(--vvd-color-info-70);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n --connotation-diverse: var(--vvd-color-alert-70);\n}\n\n.control.connotation-announcement {\n --connotation: var(--vvd-color-announcement);\n --on-connotation: var(--vvd-color-on-announcement);\n --connotation-diverse: var(--vvd-color-announcement-70);\n}\n\n.control.connotation-warning {\n --connotation: var(--vvd-color-warning);\n --on-connotation: var(--vvd-color-on-warning);\n --connotation-diverse: var(--vvd-color-warning-70);\n}\n\n.control {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation);\n --_appearance-color-outline: transaprent;\n}\n.control.removing {\n max-height: 0;\n}\n.control > .header {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n min-height: 60px;\n align-items: center;\n justify-content: flex-start;\n}\n.control > .header > .user-content {\n display: flex;\n flex: 1 0;\n align-items: center;\n justify-content: center;\n padding-inline: 16px;\n}\n.control > .header > .user-content > .icon {\n flex: 0 0 auto;\n font-size: 20px;\n margin-inline-end: 15px;\n}\n.control > .header > .user-content > .action-items {\n display: inline-block;\n flex: 0 0 auto;\n padding-inline-start: 15px;\n}\n.control > .header > .user-content > .message {\n padding: 20px 0;\n}\n.control > .header > .dismiss-button {\n --vvd-icon-button-color: inherit;\n flex: 0 0 auto;\n margin-inline-end: 8px;\n}";
19
+ var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n overflow: hidden;\n max-height: 10rem;\n background-color: var(--_appearance-color-fill);\n color: var(--_appearance-color-text);\n transition: max-height var(--transition-delay, 200ms);\n}\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-firm: var(--vvd-color-success-70);\n}\n\n.control:not(.connotation-success):not(.connotation-alert):not(.connotation-announcement):not(.connotation-warning) {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n --connotation-firm: var(--vvd-color-info-70);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n --connotation-firm: var(--vvd-color-alert-70);\n}\n\n.control.connotation-announcement {\n --connotation: var(--vvd-color-announcement);\n --on-connotation: var(--vvd-color-on-announcement);\n --connotation-firm: var(--vvd-color-announcement-70);\n}\n\n.control.connotation-warning {\n --connotation: var(--vvd-color-warning);\n --on-connotation: var(--vvd-color-on-warning);\n --connotation-firm: var(--vvd-color-warning-70);\n}\n\n.control {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation);\n --_appearance-color-outline: transaprent;\n}\n.control.removing {\n max-height: 0;\n}\n.control > .header {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n min-height: 60px;\n align-items: center;\n justify-content: flex-start;\n}\n.control > .header > .user-content {\n display: flex;\n flex: 1 0;\n align-items: center;\n justify-content: center;\n padding-inline: 16px;\n}\n.control > .header > .user-content > .icon {\n flex: 0 0 auto;\n font-size: 20px;\n margin-inline-end: 15px;\n}\n.control > .header > .user-content > .action-items {\n display: inline-block;\n flex: 0 0 auto;\n padding-inline-start: 15px;\n}\n.control > .header > .user-content > .message {\n padding: 20px 0;\n}\n.control > .header > .dismiss-button {\n --vvd-icon-button-color: inherit;\n flex: 0 0 auto;\n margin-inline-end: 8px;\n}";
20
20
  styleInject(css_248z);
21
21
 
22
22
  var Connotation;
@@ -52,6 +52,7 @@ var Appearance;
52
52
  Appearance["Text"] = "text";
53
53
  Appearance["Filled"] = "filled";
54
54
  Appearance["Outlined"] = "outlined";
55
+ Appearance["Duotone"] = "duotone";
55
56
  Appearance["Subtle"] = "subtle";
56
57
  Appearance["Ghost"] = "ghost";
57
58
  })(Appearance || (Appearance = {}));
package/breadcrumb-item/index.js CHANGED
@@ -13,7 +13,7 @@ import '../shared/apply-mixins.js';
13
13
  import '../shared/aria-global.js';
14
14
  import '../shared/affix.js';
15
15
 
16
- var css_248z = "/*\n Do not edit directly\n Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.breadcrumb-item {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n align-items: center;\n color: var(--vvd-color-neutral-70);\n}\n.breadcrumb-item a {\n color: var(--vvd-color-cta-70);\n font: inherit;\n text-decoration: none;\n}\n.breadcrumb-item a:hover {\n text-decoration: underline;\n}\n.breadcrumb-item vwc-icon {\n margin: 0 16px;\n color: var(--vvd-color-on-canvas);\n}";
16
+ var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.breadcrumb-item {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n align-items: center;\n color: var(--vvd-color-neutral-70);\n}\n.breadcrumb-item a {\n color: var(--vvd-color-cta-70);\n font: inherit;\n text-decoration: none;\n}\n.breadcrumb-item a:hover {\n text-decoration: underline;\n}\n.breadcrumb-item vwc-icon {\n margin: 0 16px;\n color: var(--vvd-color-on-canvas);\n font-size: 12px;\n}";
17
17
  styleInject(css_248z);
18
18
 
19
19
  class BreadcrumbItem extends BreadcrumbItem$1 {
package/button/index.js CHANGED
@@ -672,7 +672,7 @@ __decorate([attr({
672
672
 
673
673
  applyMixins(Button, AffixIconWithTrailing);
674
674
 
675
- var css_248z = "/*\n Do not edit directly\n Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n:host {\n outline: 0 none;\n}\n\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n block-size: var(--button-block-size);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n cursor: pointer;\n outline: 0 none;\n vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert) {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n --connotation-diverse: var(--vvd-color-neutral-70);\n --connotation-contrast: var(--vvd-color-neutral-90);\n --connotation-soft: var(--vvd-color-neutral-20);\n --connotation-pale: var(--vvd-color-neutral-10);\n}\n\n.control.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n --connotation-diverse: var(--vvd-color-cta-70);\n --connotation-contrast: var(--vvd-color-cta-90);\n --connotation-soft: var(--vvd-color-cta-20);\n --connotation-pale: var(--vvd-color-cta-10);\n}\n\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-diverse: var(--vvd-color-success-70);\n --connotation-contrast: var(--vvd-color-success-90);\n --connotation-soft: var(--vvd-color-success-20);\n --connotation-pale: var(--vvd-color-success-10);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n --connotation-diverse: var(--vvd-color-alert-70);\n --connotation-contrast: var(--vvd-color-alert-90);\n --connotation-soft: var(--vvd-color-alert-20);\n --connotation-pale: var(--vvd-color-alert-10);\n}\n\n.control.appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation);\n --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--connotation);\n}\n.control {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:hover.appearance-filled, .control.hovered.appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation-diverse);\n --_appearance-color-outline: transaprent;\n}\n.control:hover.appearance-outlined, .control.hovered.appearance-outlined {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: var(--connotation-pale);\n --_appearance-color-outline: var(--connotation);\n}\n.control:hover, .control.hovered {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: var(--connotation-pale);\n --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-filled, .control.disabled.appearance-filled {\n --_appearance-color-text: var(--vvd-color-neutral-30);\n --_appearance-color-fill: var(--vvd-color-neutral-10);\n --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-outlined, .control.disabled.appearance-outlined {\n --_appearance-color-text: var(--vvd-color-neutral-30);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--vvd-color-neutral-30);\n}\n.control:disabled, .control.disabled {\n --_appearance-color-text: var(--vvd-color-neutral-30);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:active.appearance-filled, .control.active.appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation-contrast);\n --_appearance-color-outline: transaprent;\n}\n.control:active.appearance-outlined, .control.active.appearance-outlined {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: var(--connotation-soft);\n --_appearance-color-outline: var(--connotation);\n}\n.control:active, .control.active {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: var(--connotation-soft);\n --_appearance-color-outline: transaprent;\n}\n.control.icon-only {\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\n/* Size */\n.control.size-base-small {\n --button-block-size: 32px;\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.size-base-small:not(.icon-only) {\n --button-icon-gap: 8px;\n padding-inline: 12px;\n}\n.control.size-base-small .icon {\n font-size: 16px;\n}\n\n.control.size-base-large {\n --button-block-size: 48px;\n font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.size-base-large:not(.icon-only) {\n --button-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control.size-base-large .icon {\n font-size: 24px;\n}\n\n.control:not(.size-base-small):not(.size-base-large) {\n --button-block-size: 40px;\n font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control:not(.size-base-small):not(.size-base-large):not(.icon-only) {\n --button-icon-gap: 8px;\n padding-inline: 16px;\n}\n.control:not(.size-base-small):not(.size-base-large) .icon {\n font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n border-radius: 6px;\n}\n\n.control.shape-pill:not(.icon-only) {\n border-radius: 24px;\n}\n.control.shape-pill.icon-only {\n border-radius: 50%;\n}\n\n/* Icon */\n:not(.icon-trailing) .icon {\n margin-inline-end: var(--button-icon-gap);\n}\n.icon-trailing .icon {\n order: 1;\n margin-inline-start: var(--button-icon-gap);\n}\n\n:not(:focus) .focus-indicator {\n display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n --focus-stroke-gap-color: transparent;\n}";
675
+ var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n outline: 0 none;\n}\n\n.control {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n block-size: var(--button-block-size);\n box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n color: var(--_appearance-color-text);\n cursor: pointer;\n outline: 0 none;\n vertical-align: middle;\n}\n.control:not(.connotation-cta):not(.connotation-success):not(.connotation-alert) {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n --connotation-basis: var(--vvd-color-neutral);\n --connotation-basis-increment: var(--vvd-color-neutral-90);\n --connotation-contrast: var(--vvd-color-neutral-90);\n --connotation-fierce: var(--vvd-color-neutral-80);\n --connotation-firm: var(--vvd-color-primary);\n --connotation-soft: var(--vvd-color-neutral-20);\n --connotation-pale: var(--vvd-color-neutral-10);\n}\n\n.control.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n --connotation-basis: var(--vvd-color-cta);\n --connotation-basis-increment: var(--vvd-color-cta-70);\n --connotation-contrast: var(--vvd-color-cta-90);\n --connotation-fierce: var(--vvd-color-cta-80);\n --connotation-firm: var(--vvd-color-cta-70);\n --connotation-soft: var(--vvd-color-cta-20);\n --connotation-pale: var(--vvd-color-cta-10);\n}\n\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n --connotation-basis: var(--vvd-color-success);\n --connotation-basis-increment: var(--vvd-color-success-70);\n --connotation-contrast: var(--vvd-color-success-90);\n --connotation-fierce: var(--vvd-color-success-80);\n --connotation-firm: var(--vvd-color-success-70);\n --connotation-soft: var(--vvd-color-success-20);\n --connotation-pale: var(--vvd-color-success-10);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n --connotation-basis: var(--vvd-color-alert);\n --connotation-basis-increment: var(--vvd-color-alert-70);\n --connotation-contrast: var(--vvd-color-alert-90);\n --connotation-fierce: var(--vvd-color-alert-80);\n --connotation-firm: var(--vvd-color-alert-70);\n --connotation-soft: var(--vvd-color-alert-20);\n --connotation-pale: var(--vvd-color-alert-10);\n}\n\n.control.appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation);\n --_appearance-color-outline: transaprent;\n}\n.control.appearance-outlined {\n --_appearance-color-text: var(--connotation-firm);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--connotation-firm);\n}\n.control {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled).appearance-filled, .control.hovered:not(:disabled, .disabled).appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation-basis-increment);\n --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled).appearance-outlined, .control.hovered:not(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: var(--connotation-firm);\n --_appearance-color-fill: var(--connotation-pale);\n --_appearance-color-outline: var(--connotation-firm);\n}\n.control:hover:not(:disabled, .disabled), .control.hovered:not(:disabled, .disabled) {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: var(--connotation-pale);\n --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-filled, .control.disabled.appearance-filled {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: var(--vvd-color-neutral-30);\n --_appearance-color-outline: transaprent;\n}\n.control:disabled.appearance-outlined, .control.disabled.appearance-outlined {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.control:disabled, .control.disabled {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: transaprent;\n --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled).appearance-filled, .control.active:not(:disabled, .disabled).appearance-filled {\n --_appearance-color-text: var(--on-connotation);\n --_appearance-color-fill: var(--connotation-fierce);\n --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled).appearance-outlined, .control.active:not(:disabled, .disabled).appearance-outlined {\n --_appearance-color-text: var(--connotation-firm);\n --_appearance-color-fill: var(--connotation-soft);\n --_appearance-color-outline: var(--connotation-firm);\n}\n.control:active:not(:disabled, .disabled), .control.active:not(:disabled, .disabled) {\n --_appearance-color-text: var(--connotation);\n --_appearance-color-fill: var(--connotation-soft);\n --_appearance-color-outline: transaprent;\n}\n.control.icon-only {\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\n/* Size */\n.control.size-base-small {\n --button-block-size: 32px;\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.size-base-small:not(.icon-only) {\n --button-icon-gap: 8px;\n padding-inline: 12px;\n}\n.control.size-base-small .icon {\n font-size: 16px;\n}\n\n.control.size-base-large {\n --button-block-size: 48px;\n font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.size-base-large:not(.icon-only) {\n --button-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control.size-base-large .icon {\n font-size: 24px;\n}\n\n.control:not(.size-base-small):not(.size-base-large) {\n --button-block-size: 40px;\n font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control:not(.size-base-small):not(.size-base-large):not(.icon-only) {\n --button-icon-gap: 8px;\n padding-inline: 16px;\n}\n.control:not(.size-base-small):not(.size-base-large) .icon {\n font-size: 20px;\n}\n\n/* Shape */\n.control:not(.shape-pill) {\n border-radius: 6px;\n}\n\n.control.shape-pill:not(.icon-only) {\n border-radius: 24px;\n}\n.control.shape-pill.icon-only {\n border-radius: 50%;\n}\n\n/* Icon */\n:not(.icon-trailing) .icon {\n margin-inline-end: var(--button-icon-gap);\n}\n.icon-trailing .icon {\n order: 1;\n margin-inline-start: var(--button-icon-gap);\n}\n\n:not(:focus) .focus-indicator {\n display: none;\n}\n.appearance-outlined .focus-indicator, .appearance-ghost .focus-indicator {\n --focus-stroke-gap-color: transparent;\n}";
676
676
  styleInject(css_248z);
677
677
 
678
678
  let _ = t => t,
package/calendar/index.js CHANGED
@@ -1240,7 +1240,7 @@ _curry1(function isEmpty(x) {
1240
1240
 
1241
1241
  var isEmpty$1 = isEmpty;
1242
1242
 
1243
- var css_248z = "/*\n Do not edit directly\n Generated on Sun, 23 Jan 2022 11:15:05 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: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\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-20) 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-info-10);\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)::before,\n[role=columnheader i]:not(:focus)::before,\n[role=columnheader i] [role=button i]:not(:focus)::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-20) 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 font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: grid;\n align-items: baseline;\n margin: 0;\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: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n text-transform: uppercase;\n}";
1243
+ var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 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: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\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-20) 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-info-10);\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)::before,\n[role=columnheader i]:not(:focus)::before,\n[role=columnheader i] [role=button i]:not(:focus)::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-20) 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 font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: grid;\n align-items: baseline;\n margin: 0;\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: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n text-transform: uppercase;\n}";
1244
1244
  styleInject(css_248z);
1245
1245
 
1246
1246
  const ARROW_UP = 'ArrowUp';
package/lib/badge/badge.d.ts CHANGED
@@ -2,7 +2,7 @@ import { FoundationElement } from '@microsoft/fast-foundation';
2
2
  import { AffixIconWithTrailing } from '../../shared/patterns/affix';
3
3
  import type { Appearance, Connotation, Shape, Size } from '../enums.js';
4
4
  declare type BadgeConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Info>;
5
- declare type BadgeAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Subtle>;
5
+ declare type BadgeAppearance = Extract<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
6
6
  declare type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
7
7
  declare type BadgeSize = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
8
8
  export declare class Badge extends FoundationElement {
package/lib/enums.d.ts CHANGED
@@ -20,6 +20,7 @@ export declare enum Appearance {
20
20
  Text = "text",
21
21
  Filled = "filled",
22
22
  Outlined = "outlined",
23
+ Duotone = "duotone",
23
24
  Subtle = "subtle",
24
25
  Ghost = "ghost"
25
26
  }
package/lib/popup/popup.d.ts CHANGED
@@ -1,29 +1,17 @@
1
1
  import { FoundationElement } from '@microsoft/fast-foundation';
2
- import { Placement } from '@floating-ui/dom';
2
+ import type { Placement } from '@floating-ui/dom';
3
3
  export declare class Popup extends FoundationElement {
4
- private static ARROW_POSITION;
5
- private get PADDING();
6
- private get DISTANCE();
7
- private get STRATEGY();
4
+ #private;
8
5
  popupEl: HTMLElement;
9
6
  arrowEl: HTMLElement;
10
- private cleanup?;
11
- private get middleware();
12
7
  open: boolean;
13
8
  dismissible: boolean;
14
9
  arrow: boolean;
15
10
  alternate: boolean;
16
11
  corner?: Placement;
17
12
  anchor: string;
18
- private anchorEl;
19
13
  constructor();
20
14
  disconnectedCallback(): void;
21
15
  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
22
16
  updatePosition(): Promise<void>;
23
- show(): void;
24
- hide(): void;
25
- handleDismissClick(): void;
26
- private assignPopupPosition;
27
- private assignArrowPosition;
28
- private getAnchorById;
29
17
  }
package/lib/side-drawer/side-drawer.d.ts CHANGED
@@ -1,12 +1,8 @@
1
- import { FoundationElement, FoundationElementDefinition, StartEndOptions } from '@microsoft/fast-foundation';
2
- export declare type SideDrawerOptions = FoundationElementDefinition & StartEndOptions;
1
+ import { FoundationElement } from '@microsoft/fast-foundation';
3
2
  export declare class SideDrawer extends FoundationElement {
4
3
  alternate: boolean;
5
4
  modal: boolean;
6
5
  open: boolean;
7
6
  position?: 'start' | 'end';
8
- show(): void;
9
- hide(): void;
10
- handleScrimClick: () => void;
11
- handleKeydown({ key }: KeyboardEvent): void;
7
+ hasTopBar: HTMLElement[] | undefined;
12
8
  }
package/lib/side-drawer/side-drawer.template.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import type { ViewTemplate } from '@microsoft/fast-element';
2
2
  import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
3
- import type { SideDrawer, SideDrawerOptions } from './side-drawer';
4
- export declare const sideDrawerTemplate: FoundationElementTemplate<ViewTemplate<SideDrawer>, SideDrawerOptions>;
3
+ import type { SideDrawer } from './side-drawer';
4
+ export declare const sideDrawerTemplate: FoundationElementTemplate<ViewTemplate<SideDrawer>>;
package/lib/tooltip/tooltip.d.ts CHANGED
@@ -5,6 +5,4 @@ export declare class Tooltip extends FoundationElement {
5
5
  open: boolean;
6
6
  corner?: Placement;
7
7
  anchor?: string;
8
- show(): void;
9
- hide(): void;
10
8
  }
package/package.json CHANGED
@@ -1,11 +1,12 @@
1
1
  {
2
2
  "name": "@vonage/vivid",
3
- "version": "3.0.0-next.5",
3
+ "version": "3.0.0-nouse.0",
4
+ "type": "module",
5
+ "module": "./index.esm.js",
6
+ "main": "index.js",
4
7
  "exports": {
5
8
  "import": "./index.js"
6
9
  },
7
- "main": "./index.umd.js",
8
- "module": "./index.esm.js",
9
10
  "typings": "./index.d.ts",
10
11
  "dependencies": {
11
12
  "@microsoft/fast-element": "^1.9.0",
package/popup/index.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import '../elevation/index.js';
2
2
  import '../button/index.js';
3
- import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
3
+ import { F as FoundationElement, c as __classPrivateFieldGet, g as __classPrivateFieldSet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
4
4
  import { t as toString$3, s as speciesConstructor$1, f as functionApply } from '../shared/icon.js';
5
- import '../shared/es.object.assign.js';
6
5
  import { m as anObject$3, p as fails$5, g as global$5, l as functionCall, f as functionUncurryThis, M as shared$1, N as objectCreate, E as internalState, _ as _export, w as wellKnownSymbol$2, r as redefine$1, O as createNonEnumerableProperty$1, z as isObject$1, h as classofRaw, F as requireObjectCoercible$2, P as toIntegerOrInfinity$1, Q as toPropertyKey$1, o as objectDefineProperty, R as createPropertyDescriptor$1, n as lengthOfArrayLike$1, S as toAbsoluteIndex$1, j as isCallable$1, T as toLength$1, k as getMethod$1 } from '../shared/web.dom-collections.iterator.js';
6
+ import '../shared/es.object.assign.js';
7
7
  import { s as styleInject } from '../shared/style-inject.es.js';
8
+ import { w as when } from '../shared/when.js';
8
9
  import { r as ref } from '../shared/aria-global.js';
9
10
  import { c as classNames } from '../shared/class-names.js';
10
11
  import '../icon/index.js';
11
- import '../shared/when.js';
12
12
  import '../shared/_has.js';
13
13
  import '../shared/index2.js';
14
14
  import '../shared/affix.js';
@@ -1882,9 +1882,17 @@ const computePosition = (reference, floating, options) => computePosition$1(refe
1882
1882
  ...options
1883
1883
  });
1884
1884
 
1885
+ var _Popup_instances, _Popup_arrowPosition_get, _Popup_padding_get, _Popup_distance_get, _Popup_strategy_get, _Popup_middleware_get, _Popup_cleanup, _Popup_anchorEl, _Popup_assignPopupPosition, _Popup_assignArrowPosition, _Popup_getAnchorById;
1885
1886
  class Popup extends FoundationElement {
1886
1887
  constructor() {
1887
1888
  super();
1889
+
1890
+ _Popup_instances.add(this);
1891
+
1892
+ _Popup_cleanup.set(this, void 0);
1893
+
1894
+ _Popup_anchorEl.set(this, void 0);
1895
+
1888
1896
  this.open = false;
1889
1897
  this.dismissible = false;
1890
1898
  this.arrow = false;
@@ -1892,36 +1900,11 @@ class Popup extends FoundationElement {
1892
1900
  this.corner = 'left';
1893
1901
  }
1894
1902
 
1895
- get PADDING() {
1896
- return 0;
1897
- }
1898
-
1899
- get DISTANCE() {
1900
- return 12;
1901
- }
1902
-
1903
- get STRATEGY() {
1904
- return 'fixed';
1905
- }
1906
-
1907
- get middleware() {
1908
- const middleware = [flip(), hide(), inline()];
1909
-
1910
- if (this.arrow) {
1911
- middleware.push(arrow({
1912
- element: this.arrowEl,
1913
- padding: this.PADDING
1914
- }), offset(this.DISTANCE));
1915
- }
1916
-
1917
- return middleware;
1918
- }
1919
-
1920
1903
  disconnectedCallback() {
1921
1904
  var _a;
1922
1905
 
1923
1906
  super.disconnectedCallback();
1924
- (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
1907
+ (_a = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
1925
1908
  }
1926
1909
 
1927
1910
  attributeChangedCallback(name, oldValue, newValue) {
@@ -1932,89 +1915,92 @@ class Popup extends FoundationElement {
1932
1915
  switch (name) {
1933
1916
  case 'anchor':
1934
1917
  {
1935
- this.anchorEl = this.getAnchorById();
1918
+ __classPrivateFieldSet(this, _Popup_anchorEl, __classPrivateFieldGet(this, _Popup_instances, "m", _Popup_getAnchorById).call(this), "f");
1919
+
1936
1920
  break;
1937
1921
  }
1938
1922
  }
1939
1923
 
1940
- if (this.anchorEl && this.popupEl) {
1941
- this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => this.updatePosition());
1924
+ if (__classPrivateFieldGet(this, _Popup_anchorEl, "f") && this.popupEl) {
1925
+ __classPrivateFieldSet(this, _Popup_cleanup, autoUpdate(__classPrivateFieldGet(this, _Popup_anchorEl, "f"), this.popupEl, () => this.updatePosition()), "f");
1942
1926
  } else {
1943
- (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
1927
+ (_a = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
1944
1928
  }
1945
1929
  }
1946
1930
 
1947
1931
  async updatePosition() {
1948
- if (!this.open || !this.anchorEl) {
1932
+ if (!this.open || !__classPrivateFieldGet(this, _Popup_anchorEl, "f")) {
1949
1933
  return;
1950
1934
  }
1951
1935
 
1952
- const positionData = await computePosition(this.anchorEl, this.popupEl, {
1936
+ const positionData = await computePosition(__classPrivateFieldGet(this, _Popup_anchorEl, "f"), this.popupEl, {
1953
1937
  placement: this.corner,
1954
- strategy: this.STRATEGY,
1955
- middleware: this.middleware
1938
+ strategy: __classPrivateFieldGet(this, _Popup_instances, "a", _Popup_strategy_get),
1939
+ middleware: __classPrivateFieldGet(this, _Popup_instances, "a", _Popup_middleware_get)
1956
1940
  });
1957
- this.assignPopupPosition(positionData);
1958
1941
 
1959
- if (this.arrow) {
1960
- this.assignArrowPosition(positionData);
1961
- }
1962
- }
1942
+ __classPrivateFieldGet(this, _Popup_instances, "m", _Popup_assignPopupPosition).call(this, positionData);
1963
1943
 
1964
- show() {
1965
- if (this.anchorEl) {
1966
- this.open = true;
1944
+ if (this.arrow) {
1945
+ __classPrivateFieldGet(this, _Popup_instances, "m", _Popup_assignArrowPosition).call(this, positionData);
1967
1946
  }
1968
1947
  }
1969
1948
 
1970
- hide() {
1971
- this.open = false;
1972
- }
1973
-
1974
- handleDismissClick() {
1975
- this.hide();
1976
- }
1977
-
1978
- assignPopupPosition(data) {
1979
- const {
1980
- x: popupX,
1981
- y: popupY
1982
- } = data;
1983
- const {
1984
- referenceHidden
1985
- } = data.middlewareData.hide;
1986
- Object.assign(this.popupEl.style, {
1987
- left: `${popupX}px`,
1988
- top: `${popupY}px`,
1989
- visibility: referenceHidden ? 'hidden' : 'visible'
1990
- });
1991
- }
1992
-
1993
- assignArrowPosition(data) {
1994
- const {
1995
- x: arrowX,
1996
- y: arrowY
1997
- } = data.middlewareData.arrow;
1998
- const side = Popup.ARROW_POSITION[data.placement.split('-')[0]];
1999
- Object.assign(this.arrowEl.style, {
2000
- left: `${arrowX}px`,
2001
- top: `${arrowY}px`,
2002
- right: '',
2003
- bottom: '',
2004
- [side]: '-4px'
2005
- });
2006
- }
2007
-
2008
- getAnchorById() {
2009
- return document.getElementById(this.anchor);
1949
+ }
1950
+ _Popup_cleanup = new WeakMap(), _Popup_anchorEl = new WeakMap(), _Popup_instances = new WeakSet(), _Popup_arrowPosition_get = function _Popup_arrowPosition_get() {
1951
+ return {
1952
+ top: 'bottom',
1953
+ right: 'left',
1954
+ bottom: 'top',
1955
+ left: 'right'
1956
+ };
1957
+ }, _Popup_padding_get = function _Popup_padding_get() {
1958
+ return 0;
1959
+ }, _Popup_distance_get = function _Popup_distance_get() {
1960
+ return 12;
1961
+ }, _Popup_strategy_get = function _Popup_strategy_get() {
1962
+ return 'fixed';
1963
+ }, _Popup_middleware_get = function _Popup_middleware_get() {
1964
+ const middleware = [flip(), hide(), inline()];
1965
+
1966
+ if (this.arrow) {
1967
+ middleware.push(arrow({
1968
+ element: this.arrowEl,
1969
+ padding: __classPrivateFieldGet(this, _Popup_instances, "a", _Popup_padding_get)
1970
+ }), offset(__classPrivateFieldGet(this, _Popup_instances, "a", _Popup_distance_get)));
2010
1971
  }
2011
1972
 
2012
- }
2013
- Popup.ARROW_POSITION = {
2014
- top: 'bottom',
2015
- right: 'left',
2016
- bottom: 'top',
2017
- left: 'right'
1973
+ return middleware;
1974
+ }, _Popup_assignPopupPosition = function _Popup_assignPopupPosition(data) {
1975
+ const {
1976
+ x: popupX,
1977
+ y: popupY
1978
+ } = data;
1979
+ const {
1980
+ referenceHidden
1981
+ } = data.middlewareData.hide;
1982
+ Object.assign(this.popupEl.style, {
1983
+ left: `${popupX}px`,
1984
+ top: `${popupY}px`,
1985
+ visibility: referenceHidden ? 'hidden' : 'visible'
1986
+ });
1987
+ }, _Popup_assignArrowPosition = function _Popup_assignArrowPosition(data) {
1988
+ const {
1989
+ x: arrowX,
1990
+ y: arrowY
1991
+ } = data.middlewareData.arrow;
1992
+
1993
+ const side = __classPrivateFieldGet(this, _Popup_instances, "a", _Popup_arrowPosition_get)[data.placement.split('-')[0]];
1994
+
1995
+ Object.assign(this.arrowEl.style, {
1996
+ left: `${arrowX}px`,
1997
+ top: `${arrowY}px`,
1998
+ right: '',
1999
+ bottom: '',
2000
+ [side]: '-4px'
2001
+ });
2002
+ }, _Popup_getAnchorById = function _Popup_getAnchorById() {
2003
+ return document.getElementById(this.anchor);
2018
2004
  };
2019
2005
 
2020
2006
  __decorate([attr({
@@ -2033,12 +2019,12 @@ __decorate([attr({
2033
2019
  mode: 'boolean'
2034
2020
  }), __metadata("design:type", Object)], Popup.prototype, "alternate", void 0);
2035
2021
 
2036
- __decorate([attr, __metadata("design:type", String)], Popup.prototype, "corner", void 0);
2022
+ __decorate([attr({
2023
+ mode: 'fromView'
2024
+ }), __metadata("design:type", String)], Popup.prototype, "corner", void 0);
2037
2025
 
2038
2026
  __decorate([attr, __metadata("design:type", String)], Popup.prototype, "anchor", void 0);
2039
2027
 
2040
- __decorate([attr, __metadata("design:type", Object)], Popup.prototype, "anchorEl", void 0);
2041
-
2042
2028
  var css_248z = ".control {\n width: min-content;\n background-color: var(--vvd-color-surface-4dp);\n border-radius: inherit;\n contain: layout;\n}\n.control:not(.open) {\n display: none;\n}\n\n.popup-wrapper {\n position: fixed;\n border-radius: 6px;\n}\n\n.popup-content {\n display: grid;\n color: var(--vvd-color-on-canvas);\n}\n.dismissible .popup-content {\n align-content: start;\n grid-template-columns: 1fr auto;\n}\n\n.arrow {\n position: absolute;\n z-index: -1;\n width: 8px;\n height: 8px;\n background-color: var(--vvd-color-surface-4dp);\n transform: rotate(45deg);\n}\n\n.dismissible {\n align-self: flex-start;\n margin-block-start: 0.25rem;\n margin-inline-end: 0.25rem;\n}";
2043
2029
  styleInject(css_248z);
2044
2030
 
@@ -2066,16 +2052,8 @@ const popupTemplate = () => html(_t || (_t = _`
2066
2052
  ${0}
2067
2053
  </div>
2068
2054
  </div>
2069
- </vwc-elevation>`), ref('popupEl'), getClasses, x => x.open ? 'false' : 'true', x => x.alternate ? 'vvd-theme-alternate' : '', x => x.dismissible ? renderDismissButton() : '', x => x.arrow ? renderArrow() : '');
2070
-
2071
- const renderDismissButton = () => {
2072
- return html(_t2 || (_t2 = _`<vwc-button size="base-small" @click="${0}"
2073
- class="dismissible" icon="close-small-solid" shape="pill"></vwc-button>`), x => x.handleDismissClick());
2074
- };
2075
-
2076
- const renderArrow = () => {
2077
- return html(_t3 || (_t3 = _`<div class="arrow" ${0}></div>`), ref('arrowEl'));
2078
- };
2055
+ </vwc-elevation>`), ref('popupEl'), getClasses, x => x.open ? 'false' : 'true', x => x.alternate ? 'vvd-theme-alternate' : '', when(x => x.dismissible, html(_t2 || (_t2 = _`<vwc-button size="base-small" @click="${0}"
2056
+ class="dismissible" icon="close-small-solid" shape="pill"></vwc-button>`), x => x.open = false)), when(x => x.arrow, html(_t3 || (_t3 = _`<div class="arrow" ${0}></div>`), ref('arrowEl'))));
2079
2057
 
2080
2058
  const VIVIDPopup = Popup.compose({
2081
2059
  baseName: 'popup',
package/shared/icon.js CHANGED
@@ -1332,7 +1332,7 @@ const PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
1332
1332
  </svg>`;
1333
1333
 
1334
1334
  const BASE_URL = 'https://icon.resources.vonage.com';
1335
- const ICON_SET_VERSION = '4.0.23';
1335
+ const ICON_SET_VERSION = '4.0.27';
1336
1336
  const PLACEHOLDER_DELAY = 500;
1337
1337
  const PLACEHOLDER_TIMEOUT = 2000;
1338
1338
 
package/shared/index.js CHANGED
@@ -2473,7 +2473,7 @@ class CSSDirective {
2473
2473
  }
2474
2474
  }
2475
2475
 
2476
- /*! *****************************************************************************
2476
+ /******************************************************************************
2477
2477
  Copyright (c) Microsoft Corporation.
2478
2478
 
2479
2479
  Permission to use, copy, modify, and/or distribute this software for any
@@ -2503,6 +2503,13 @@ function __classPrivateFieldGet(receiver, state, kind, f) {
2503
2503
  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
2504
2504
  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
2505
2505
  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
2506
+ }
2507
+
2508
+ function __classPrivateFieldSet(receiver, state, value, kind, f) {
2509
+ if (kind === "m") throw new TypeError("Private method is not writable");
2510
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
2511
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
2512
+ return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
2506
2513
  }
2507
2514
 
2508
2515
  /**
@@ -4988,4 +4995,4 @@ function provideVividDesignSystem(element) {
4988
4995
  }
4989
4996
  const designSystem = provideVividDesignSystem();
4990
4997
 
4991
- export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, HTMLDirective as H, Observable as O, SubscriberSet as S, __decorate as _, attr as a, __metadata as b, __classPrivateFieldGet as c, designSystem as d, emptyArray as e, HTMLView as f, html as h, nullableNumberConverter as n, observable as o, provideVividDesignSystem as p };
4998
+ export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, HTMLDirective as H, Observable as O, SubscriberSet as S, __decorate as _, attr as a, __metadata as b, __classPrivateFieldGet as c, designSystem as d, emptyArray as e, HTMLView as f, __classPrivateFieldSet as g, html as h, nullableNumberConverter as n, observable as o, provideVividDesignSystem as p };
package/side-drawer/index.js CHANGED
@@ -1,6 +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 '../shared/web.dom-collections.iterator.js';
3
3
  import { s as styleInject } from '../shared/style-inject.es.js';
4
+ import { w as when } from '../shared/when.js';
4
5
  import { s as slotted } from '../shared/slotted.js';
5
6
  import { c as classNames } from '../shared/class-names.js';
6
7
 
@@ -10,28 +11,6 @@ class SideDrawer extends FoundationElement {
10
11
  this.alternate = false;
11
12
  this.modal = false;
12
13
  this.open = false;
13
-
14
- this.handleScrimClick = () => {
15
- if (this.modal && this.open) {
16
- this.hide();
17
- }
18
- };
19
- }
20
-
21
- show() {
22
- this.open = true;
23
- }
24
-
25
- hide() {
26
- this.open = false;
27
- }
28
-
29
- handleKeydown({
30
- key
31
- }) {
32
- if (this.open && key === 'Escape') {
33
- this.hide();
34
- }
35
14
  }
36
15
 
37
16
  }
@@ -50,13 +29,12 @@ __decorate([attr({
50
29
 
51
30
  __decorate([attr, __metadata("design:type", String)], SideDrawer.prototype, "position", void 0);
52
31
 
53
- var css_248z = "/*\n Do not edit directly\n Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n:host {\n display: flex;\n block-size: 100vh;\n}\n\n:host([position=end]) {\n flex-direction: row-reverse;\n}\n\n.control {\n position: fixed;\n z-index: var(--side-drawer-z-index, 6);\n top: auto;\n bottom: 0;\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-shrink: 0;\n background-color: var(--side-drawer-background-color, var(--vvd-color-canvas));\n block-size: inherit;\n color: var(--side-drawer-color, var(--vvd-color-on-canvas));\n inline-size: var(--side-drawer-inline-size, 280px);\n}\n.control.alternate {\n background-color: var(--vvd-color-canvas);\n}\n.control:not(.open).end {\n transform: translateX(100%);\n}\n.control:not(.open):not(.end) {\n transform: translateX(-100%);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n margin-inline-start: var(--side-drawer-inline-size, 280px);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content ::slotted(vwc-top-app-bar),\n.control.control.open:not(.modal) + .side-drawer-app-content ::slotted(vwc-top-app-bar-fixed) {\n --mdc-top-app-bar-width: calc(100% - var(--side-drawer-inline-size, 280px));\n}\n.control.control.open:not(.modal).end + .side-drawer-app-content {\n margin-inline-end: var(--side-drawer-inline-size, 280px);\n margin-inline-start: 0;\n}\n@media (prefers-reduced-motion: no-preference) {\n .control {\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n}\n\n.side-drawer-top-bar {\n font: 500 condensed 26px / 36px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n padding-inline-end: var(--side-drawer-padding-top-bar, 16px);\n padding-inline-start: var(--side-drawer-padding-top-bar, 16px);\n}\n\n.side-drawer-content {\n background-color: inherit;\n overflow-y: auto;\n padding-inline-end: var(--side-drawer-padding-body, 16px);\n padding-inline-start: var(--side-drawer-padding-body, 16px);\n}\n\n.modal:not(.end) {\n inset-inline-start: 0;\n}\n.modal.end {\n inset-inline-end: 0;\n}\n\n.scrim {\n background-color: var(--vvd-color-on-canvas);\n opacity: 0.5;\n position: fixed;\n z-index: calc(6 - 1);\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}";
32
+ var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n display: flex;\n block-size: 100vh;\n}\n\n:host([position=end]) {\n flex-direction: row-reverse;\n}\n\n.control {\n position: fixed;\n z-index: var(--side-drawer-z-index, 6);\n top: auto;\n bottom: 0;\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-shrink: 0;\n background-color: var(--side-drawer-background-color, var(--vvd-color-canvas));\n block-size: inherit;\n color: var(--side-drawer-color, var(--vvd-color-on-canvas));\n inline-size: var(--side-drawer-inline-size, 280px);\n}\n.control.alternate {\n background-color: var(--vvd-color-canvas);\n}\n.control:not(.open).end {\n transform: translateX(100%);\n}\n.control:not(.open):not(.end) {\n transform: translateX(-100%);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n margin-inline-start: var(--side-drawer-inline-size, 280px);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content ::slotted(vwc-top-app-bar),\n.control.control.open:not(.modal) + .side-drawer-app-content ::slotted(vwc-top-app-bar-fixed) {\n --mdc-top-app-bar-width: calc(100% - var(--side-drawer-inline-size, 280px));\n}\n.control.control.open:not(.modal).end + .side-drawer-app-content {\n margin-inline-end: var(--side-drawer-inline-size, 280px);\n margin-inline-start: 0;\n}\n@media (prefers-reduced-motion: no-preference) {\n .control {\n transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n}\n\n.side-drawer-top-bar {\n font: 500 condensed 26px / 36px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n display: flex;\n flex-shrink: 0;\n align-items: center;\n padding-inline-end: var(--side-drawer-padding-top-bar, 16px);\n padding-inline-start: var(--side-drawer-padding-top-bar, 16px);\n}\n\n.side-drawer-content {\n background-color: inherit;\n overflow-y: auto;\n padding-inline-end: var(--side-drawer-padding-body, 16px);\n padding-inline-start: var(--side-drawer-padding-body, 16px);\n}\n\n.modal:not(.end) {\n inset-inline-start: 0;\n}\n.modal.end {\n inset-inline-end: 0;\n}\n\n.scrim {\n background-color: var(--vvd-color-on-canvas);\n opacity: 0.5;\n position: fixed;\n z-index: calc(6 - 1);\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}";
54
33
  styleInject(css_248z);
55
34
 
56
35
  let _ = t => t,
57
36
  _t,
58
- _t2,
59
- _t3;
37
+ _t2;
60
38
 
61
39
  const getClasses = ({
62
40
  alternate,
@@ -65,11 +43,13 @@ const getClasses = ({
65
43
  position
66
44
  }) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], ['end', position === 'end']);
67
45
 
68
- const sideDrawerTemplate = (context, definition) => html(_t || (_t = _`
46
+ const sideDrawerTemplate = () => html(_t || (_t = _`
69
47
  <aside class="${0}" part="${0}"
70
48
  @keydown="${0}">
71
49
 
72
- ${0}
50
+ <header class="side-drawer-top-bar" part="side-drawer-top-bar">
51
+ <slot name="top-bar" ${0}></slot>
52
+ </header>
73
53
 
74
54
  <div class="side-drawer-content">
75
55
  <slot></slot>
@@ -81,16 +61,14 @@ const sideDrawerTemplate = (context, definition) => html(_t || (_t = _`
81
61
  </div>
82
62
 
83
63
  ${0}
84
- `), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', (x, c) => x.handleKeydown(c.event), renderTopBar(), x => x.modal && x.open ? renderScrim() : '');
64
+ `), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', (x, c) => handleKeydown(x, c.event), slotted('hasTopBar'), when(x => x.modal && x.open, html(_t2 || (_t2 = _`<div class="scrim" @click="${0}" @keydown="${0}"></div>`), x => x.open = false, x => x.open = false)));
85
65
 
86
- const renderTopBar = () => html(_t2 || (_t2 = _`
87
- <header class="side-drawer-top-bar" part="side-drawer-top-bar">
88
- <slot name="top-bar" ${0}></slot>
89
- </header>`), slotted('hasTopBar'));
90
-
91
- const renderScrim = () => {
92
- return html(_t3 || (_t3 = _`
93
- <div class="scrim" @click="${0}" @keydown="${0}"></div>`), x => x.handleScrimClick(), x => x.handleScrimClick());
66
+ const handleKeydown = (x, {
67
+ key
68
+ }) => {
69
+ if (key === 'Escape') {
70
+ x.open = false;
71
+ }
94
72
  };
95
73
 
96
74
  const VIVIDSideDrawer = SideDrawer.compose({
package/sidenav-item/index.js CHANGED
@@ -13,7 +13,7 @@ import '../shared/class-names.js';
13
13
  import '../shared/anchor.js';
14
14
  import '../shared/aria-global.js';
15
15
 
16
- var css_248z = "/*\n Do not edit directly\n Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.control {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: transparent;\n border-radius: 6px;\n color: var(--vvd-color-on-canvas);\n gap: 8px;\n -webkit-hyphens: auto;\n hyphens: auto;\n inline-size: 100%;\n min-block-size: 40px;\n outline: 0 none;\n padding-block: 10px;\n padding-inline: 8px;\n text-decoration: none;\n vertical-align: middle;\n word-break: break-word;\n}\n:host, .control {\n outline: 0 none;\n}\n\n.control.icon-only {\n display: flex;\n block-size: 40px;\n inline-size: 40px;\n place-content: center;\n}\n\n.control:focus {\n background-color: var(--vvd-color-neutral-20);\n}\n\n.control:focus-visible {\n box-shadow: inset 0 0 0 1px darkorange;\n}\n\n.icon {\n font-size: 20px;\n}";
16
+ var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n background-color: transparent;\n border-radius: 6px;\n color: var(--vvd-color-on-canvas);\n gap: 8px;\n -webkit-hyphens: auto;\n hyphens: auto;\n inline-size: 100%;\n min-block-size: 40px;\n outline: 0 none;\n padding-block: 10px;\n padding-inline: 8px;\n text-decoration: none;\n vertical-align: middle;\n word-break: break-word;\n}\n:host, .control {\n outline: 0 none;\n}\n\n.control.icon-only {\n display: flex;\n block-size: 40px;\n inline-size: 40px;\n place-content: center;\n}\n\n.control:focus {\n background-color: var(--vvd-color-neutral-20);\n}\n\n.control:focus-visible {\n box-shadow: inset 0 0 0 1px darkorange;\n}\n\n.icon {\n font-size: 20px;\n}";
17
17
  styleInject(css_248z);
18
18
 
19
19
  class SidenavItem extends TextAnchor {}
package/styles/themes/dark.css CHANGED
@@ -44,6 +44,7 @@
44
44
  --vvd-color-cta-20: rgb(68,2,145);
45
45
  --vvd-color-cta-30: rgb(100,5,209);
46
46
  --vvd-color-cta-70: rgb(203,161,250);
47
+ --vvd-color-cta-80: rgb(220,193,252);
47
48
  --vvd-color-cta-90: rgb(236,226,250);
48
49
  --vvd-color-success: rgb(48,168,73);
49
50
  --vvd-color-on-success: rgb(0,0,0);
@@ -51,6 +52,7 @@
51
52
  --vvd-color-success-20: rgb(24,58,30);
52
53
  --vvd-color-success-30: rgb(21,89,35);
53
54
  --vvd-color-success-70: rgb(83,202,106);
55
+ --vvd-color-success-80: rgb(134,224,144);
54
56
  --vvd-color-success-90: rgb(207,238,212);
55
57
  --vvd-color-alert: rgb(247,89,89);
56
58
  --vvd-color-on-alert: rgb(0,0,0);
@@ -58,6 +60,7 @@
58
60
  --vvd-color-alert-20: rgb(110,0,0);
59
61
  --vvd-color-alert-30: rgb(159,2,2);
60
62
  --vvd-color-alert-70: rgb(254,150,150);
63
+ --vvd-color-alert-80: rgb(255,187,187);
61
64
  --vvd-color-alert-90: rgb(254,223,223);
62
65
  --vvd-color-warning: rgb(224,121,2);
63
66
  --vvd-color-on-warning: rgb(0,0,0);
@@ -65,6 +68,7 @@
65
68
  --vvd-color-warning-20: rgb(82,40,1);
66
69
  --vvd-color-warning-30: rgb(128,56,7);
67
70
  --vvd-color-warning-70: rgb(250,159,0);
71
+ --vvd-color-warning-80: rgb(255,195,33);
68
72
  --vvd-color-warning-90: rgb(253,231,109);
69
73
  --vvd-color-info: rgb(41,151,240);
70
74
  --vvd-color-on-info: rgb(0,0,0);
@@ -72,6 +76,7 @@
72
76
  --vvd-color-info-20: rgb(14,48,109);
73
77
  --vvd-color-info-30: rgb(9,74,158);
74
78
  --vvd-color-info-70: rgb(101,186,255);
79
+ --vvd-color-info-80: rgb(157,210,254);
75
80
  --vvd-color-info-90: rgb(211,233,252);
76
81
  --vvd-color-announcement: rgb(229,96,187);
77
82
  --vvd-color-on-announcement: rgb(0,0,0);
@@ -79,6 +84,7 @@
79
84
  --vvd-color-announcement-20: rgb(98,2,86);
80
85
  --vvd-color-announcement-30: rgb(143,22,105);
81
86
  --vvd-color-announcement-70: rgb(251,143,216);
87
+ --vvd-color-announcement-80: rgb(248,185,231);
82
88
  --vvd-color-announcement-90: rgb(255,220,247);
83
89
  --vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(77, 77, 77, 1)) drop-shadow(0 1px 0 rgba(77, 77, 77, 1)) drop-shadow(0 -1px 0 rgba(77, 77, 77, 1)) drop-shadow(-1px 0 0 rgba(77, 77, 77, 1));
84
90
  --vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
@@ -140,6 +146,7 @@
140
146
  --vvd-color-cta-20: rgb(236,226,250);
141
147
  --vvd-color-cta-30: rgb(220,193,252);
142
148
  --vvd-color-cta-70: rgb(135,30,255);
149
+ --vvd-color-cta-80: rgb(100,5,209);
143
150
  --vvd-color-cta-90: rgb(68,2,145);
144
151
  --vvd-color-success: rgb(28,135,49);
145
152
  --vvd-color-on-success: rgb(255,255,255);
@@ -147,6 +154,7 @@
147
154
  --vvd-color-success-20: rgb(207,238,212);
148
155
  --vvd-color-success-30: rgb(134,224,144);
149
156
  --vvd-color-success-70: rgb(22,118,41);
157
+ --vvd-color-success-80: rgb(21,89,35);
150
158
  --vvd-color-success-90: rgb(24,58,30);
151
159
  --vvd-color-alert: rgb(230,29,29);
152
160
  --vvd-color-on-alert: rgb(255,255,255);
@@ -154,6 +162,7 @@
154
162
  --vvd-color-alert-20: rgb(254,223,223);
155
163
  --vvd-color-alert-30: rgb(255,187,187);
156
164
  --vvd-color-alert-70: rgb(205,13,13);
165
+ --vvd-color-alert-80: rgb(159,2,2);
157
166
  --vvd-color-alert-90: rgb(110,0,0);
158
167
  --vvd-color-warning: rgb(250,159,0);
159
168
  --vvd-color-on-warning: rgb(0,0,0);
@@ -161,6 +170,7 @@
161
170
  --vvd-color-warning-20: rgb(253,231,109);
162
171
  --vvd-color-warning-30: rgb(255,195,33);
163
172
  --vvd-color-warning-70: rgb(166,76,3);
173
+ --vvd-color-warning-80: rgb(128,56,7);
164
174
  --vvd-color-warning-90: rgb(82,40,1);
165
175
  --vvd-color-info: rgb(2,118,213);
166
176
  --vvd-color-on-info: rgb(255,255,255);
@@ -168,6 +178,7 @@
168
178
  --vvd-color-info-20: rgb(211,233,252);
169
179
  --vvd-color-info-30: rgb(157,210,254);
170
180
  --vvd-color-info-70: rgb(14,101,194);
181
+ --vvd-color-info-80: rgb(9,74,158);
171
182
  --vvd-color-info-90: rgb(14,48,109);
172
183
  --vvd-color-announcement: rgb(214,33,156);
173
184
  --vvd-color-on-announcement: rgb(255,255,255);
@@ -175,6 +186,7 @@
175
186
  --vvd-color-announcement-20: rgb(255,220,247);
176
187
  --vvd-color-announcement-30: rgb(248,185,231);
177
188
  --vvd-color-announcement-70: rgb(187,30,137);
189
+ --vvd-color-announcement-80: rgb(143,22,105);
178
190
  --vvd-color-announcement-90: rgb(98,2,86);
179
191
  --vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(204, 204, 204, 1)) drop-shadow(0 1px 0 rgba(204, 204, 204, 1)) drop-shadow(0 -1px 0 rgba(204, 204, 204, 1)) drop-shadow(-1px 0 0 rgba(204, 204, 204, 1));
180
192
  --vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.05));
package/styles/themes/light.css CHANGED
@@ -44,6 +44,7 @@
44
44
  --vvd-color-cta-20: rgb(236,226,250);
45
45
  --vvd-color-cta-30: rgb(220,193,252);
46
46
  --vvd-color-cta-70: rgb(135,30,255);
47
+ --vvd-color-cta-80: rgb(100,5,209);
47
48
  --vvd-color-cta-90: rgb(68,2,145);
48
49
  --vvd-color-success: rgb(28,135,49);
49
50
  --vvd-color-on-success: rgb(255,255,255);
@@ -51,6 +52,7 @@
51
52
  --vvd-color-success-20: rgb(207,238,212);
52
53
  --vvd-color-success-30: rgb(134,224,144);
53
54
  --vvd-color-success-70: rgb(22,118,41);
55
+ --vvd-color-success-80: rgb(21,89,35);
54
56
  --vvd-color-success-90: rgb(24,58,30);
55
57
  --vvd-color-alert: rgb(230,29,29);
56
58
  --vvd-color-on-alert: rgb(255,255,255);
@@ -58,6 +60,7 @@
58
60
  --vvd-color-alert-20: rgb(254,223,223);
59
61
  --vvd-color-alert-30: rgb(255,187,187);
60
62
  --vvd-color-alert-70: rgb(205,13,13);
63
+ --vvd-color-alert-80: rgb(159,2,2);
61
64
  --vvd-color-alert-90: rgb(110,0,0);
62
65
  --vvd-color-warning: rgb(250,159,0);
63
66
  --vvd-color-on-warning: rgb(0,0,0);
@@ -65,6 +68,7 @@
65
68
  --vvd-color-warning-20: rgb(253,231,109);
66
69
  --vvd-color-warning-30: rgb(255,195,33);
67
70
  --vvd-color-warning-70: rgb(166,76,3);
71
+ --vvd-color-warning-80: rgb(128,56,7);
68
72
  --vvd-color-warning-90: rgb(82,40,1);
69
73
  --vvd-color-info: rgb(2,118,213);
70
74
  --vvd-color-on-info: rgb(255,255,255);
@@ -72,6 +76,7 @@
72
76
  --vvd-color-info-20: rgb(211,233,252);
73
77
  --vvd-color-info-30: rgb(157,210,254);
74
78
  --vvd-color-info-70: rgb(14,101,194);
79
+ --vvd-color-info-80: rgb(9,74,158);
75
80
  --vvd-color-info-90: rgb(14,48,109);
76
81
  --vvd-color-announcement: rgb(214,33,156);
77
82
  --vvd-color-on-announcement: rgb(255,255,255);
@@ -79,6 +84,7 @@
79
84
  --vvd-color-announcement-20: rgb(255,220,247);
80
85
  --vvd-color-announcement-30: rgb(248,185,231);
81
86
  --vvd-color-announcement-70: rgb(187,30,137);
87
+ --vvd-color-announcement-80: rgb(143,22,105);
82
88
  --vvd-color-announcement-90: rgb(98,2,86);
83
89
  --vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(204, 204, 204, 1)) drop-shadow(0 1px 0 rgba(204, 204, 204, 1)) drop-shadow(0 -1px 0 rgba(204, 204, 204, 1)) drop-shadow(-1px 0 0 rgba(204, 204, 204, 1));
84
90
  --vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.05));
@@ -140,6 +146,7 @@
140
146
  --vvd-color-cta-20: rgb(68,2,145);
141
147
  --vvd-color-cta-30: rgb(100,5,209);
142
148
  --vvd-color-cta-70: rgb(203,161,250);
149
+ --vvd-color-cta-80: rgb(220,193,252);
143
150
  --vvd-color-cta-90: rgb(236,226,250);
144
151
  --vvd-color-success: rgb(48,168,73);
145
152
  --vvd-color-on-success: rgb(0,0,0);
@@ -147,6 +154,7 @@
147
154
  --vvd-color-success-20: rgb(24,58,30);
148
155
  --vvd-color-success-30: rgb(21,89,35);
149
156
  --vvd-color-success-70: rgb(83,202,106);
157
+ --vvd-color-success-80: rgb(134,224,144);
150
158
  --vvd-color-success-90: rgb(207,238,212);
151
159
  --vvd-color-alert: rgb(247,89,89);
152
160
  --vvd-color-on-alert: rgb(0,0,0);
@@ -154,6 +162,7 @@
154
162
  --vvd-color-alert-20: rgb(110,0,0);
155
163
  --vvd-color-alert-30: rgb(159,2,2);
156
164
  --vvd-color-alert-70: rgb(254,150,150);
165
+ --vvd-color-alert-80: rgb(255,187,187);
157
166
  --vvd-color-alert-90: rgb(254,223,223);
158
167
  --vvd-color-warning: rgb(224,121,2);
159
168
  --vvd-color-on-warning: rgb(0,0,0);
@@ -161,6 +170,7 @@
161
170
  --vvd-color-warning-20: rgb(82,40,1);
162
171
  --vvd-color-warning-30: rgb(128,56,7);
163
172
  --vvd-color-warning-70: rgb(250,159,0);
173
+ --vvd-color-warning-80: rgb(255,195,33);
164
174
  --vvd-color-warning-90: rgb(253,231,109);
165
175
  --vvd-color-info: rgb(41,151,240);
166
176
  --vvd-color-on-info: rgb(0,0,0);
@@ -168,6 +178,7 @@
168
178
  --vvd-color-info-20: rgb(14,48,109);
169
179
  --vvd-color-info-30: rgb(9,74,158);
170
180
  --vvd-color-info-70: rgb(101,186,255);
181
+ --vvd-color-info-80: rgb(157,210,254);
171
182
  --vvd-color-info-90: rgb(211,233,252);
172
183
  --vvd-color-announcement: rgb(229,96,187);
173
184
  --vvd-color-on-announcement: rgb(0,0,0);
@@ -175,6 +186,7 @@
175
186
  --vvd-color-announcement-20: rgb(98,2,86);
176
187
  --vvd-color-announcement-30: rgb(143,22,105);
177
188
  --vvd-color-announcement-70: rgb(251,143,216);
189
+ --vvd-color-announcement-80: rgb(248,185,231);
178
190
  --vvd-color-announcement-90: rgb(255,220,247);
179
191
  --vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(77, 77, 77, 1)) drop-shadow(0 1px 0 rgba(77, 77, 77, 1)) drop-shadow(0 -1px 0 rgba(77, 77, 77, 1)) drop-shadow(-1px 0 0 rgba(77, 77, 77, 1));
180
192
  --vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
package/text/index.js CHANGED
@@ -3,7 +3,7 @@ import { s as styleInject } from '../shared/style-inject.es.js';
3
3
  import '../shared/web.dom-collections.iterator.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 Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.control:not(.tight):not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1:not(.tight), .control.font-face-body-1-bold:not(.tight), .control.font-face-body-1-code:not(.tight), .control.font-face-body-1-link:not(.tight), .control.font-face-body-2:not(.tight), .control.font-face-body-2-bold:not(.tight), .control.font-face-body-2-code:not(.tight), .control.font-face-body-2-link:not(.tight), .control.font-face-subtitle-1:not(.tight), .control.font-face-subtitle-2:not(.tight), .control.font-face-title-1:not(.tight), .control.font-face-title-2:not(.tight), .control.font-face-headline-1:not(.tight), .control.font-face-headline-2:not(.tight) {\n display: block;\n margin: var(--font-face-margin, 0);\n}\n\n.control {\n color: var(--connotation);\n}\n.control.font-face-body-1 {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-bold {\n font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-code {\n font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-link {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-body-2 {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-bold {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-code {\n font: 400 ultra-condensed 14px / 20px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-link {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-button {\n font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-button-dense {\n font: 600 ultra-condensed 12px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-button-enlarge {\n font: 600 ultra-condensed 16px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-bold {\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-code {\n font: 400 ultra-condensed 12px / 16px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-link {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-headline-1 {\n font: 500 condensed 66px / 88px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-headline-2 {\n font: 500 condensed 52px / 68px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-subtitle-1 {\n font: 500 condensed 26px / 36px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-subtitle-2 {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-title-1 {\n font: 500 condensed 40px / 52px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-title-2 {\n font: 500 condensed 32px / 44px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2) {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.connotation-primary {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n}\n\n.control.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n}\n\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n}\n\n.control.connotation-announcement {\n --connotation: var(--vvd-color-announcement);\n --on-connotation: var(--vvd-color-on-announcement);\n}\n\n.control.connotation-info {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n}\n\n.control.font-face-headline-1, .control.font-face-headline-2 {\n --font-face-margin: 2.5rem 0;\n}\n.control.font-face-title-1, .control.font-face-title-2 {\n --font-face-margin: 2rem 0;\n}\n.control.font-face-subtitle-1, .control.font-face-subtitle-2 {\n --font-face-margin: 1.5rem 0;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1, .control.font-face-body-1-bold, .control.font-face-body-1-code, .control.font-face-body-1-link, .control.font-face-body-2, .control.font-face-body-2-bold, .control.font-face-body-2-code, .control.font-face-body-2-link {\n --font-face-margin: 1rem 0;\n}\n\n::slotted(:where(h1, h2, h3, h4, h5, h6, p)) {\n margin: initial;\n}\n\n::slotted(*) {\n color: inherit;\n font: inherit;\n}";
6
+ var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control:not(.tight):not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1:not(.tight), .control.font-face-body-1-bold:not(.tight), .control.font-face-body-1-code:not(.tight), .control.font-face-body-1-link:not(.tight), .control.font-face-body-2:not(.tight), .control.font-face-body-2-bold:not(.tight), .control.font-face-body-2-code:not(.tight), .control.font-face-body-2-link:not(.tight), .control.font-face-subtitle-1:not(.tight), .control.font-face-subtitle-2:not(.tight), .control.font-face-title-1:not(.tight), .control.font-face-title-2:not(.tight), .control.font-face-headline-1:not(.tight), .control.font-face-headline-2:not(.tight) {\n display: block;\n margin: var(--font-face-margin, 0);\n}\n\n.control {\n color: var(--connotation);\n}\n.control.font-face-body-1 {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-bold {\n font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-code {\n font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-1-link {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-body-2 {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-bold {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-code {\n font: 400 ultra-condensed 14px / 20px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-body-2-link {\n font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-button {\n font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-button-dense {\n font: 600 ultra-condensed 12px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-button-enlarge {\n font: 600 ultra-condensed 16px / 100% SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-bold {\n font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-code {\n font: 400 ultra-condensed 12px / 16px SpeziaMonoWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-caption-link {\n font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: underline;\n text-transform: none;\n}\n.control.font-face-headline-1 {\n font: 500 condensed 66px / 88px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-headline-2 {\n font: 500 condensed 52px / 68px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-subtitle-1 {\n font: 500 condensed 26px / 36px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-subtitle-2 {\n font: 500 condensed 20px / 28px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-title-1 {\n font: 500 condensed 40px / 52px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.font-face-title-2 {\n font: 500 condensed 32px / 44px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2) {\n font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n}\n.control.connotation-primary {\n --connotation: var(--vvd-color-primary);\n --on-connotation: var(--vvd-color-on-primary);\n}\n\n.control.connotation-cta {\n --connotation: var(--vvd-color-cta);\n --on-connotation: var(--vvd-color-on-cta);\n}\n\n.control.connotation-success {\n --connotation: var(--vvd-color-success);\n --on-connotation: var(--vvd-color-on-success);\n}\n\n.control.connotation-alert {\n --connotation: var(--vvd-color-alert);\n --on-connotation: var(--vvd-color-on-alert);\n}\n\n.control.connotation-announcement {\n --connotation: var(--vvd-color-announcement);\n --on-connotation: var(--vvd-color-on-announcement);\n}\n\n.control.connotation-info {\n --connotation: var(--vvd-color-info);\n --on-connotation: var(--vvd-color-on-info);\n}\n\n.control.font-face-headline-1, .control.font-face-headline-2 {\n --font-face-margin: 2.5rem 0;\n}\n.control.font-face-title-1, .control.font-face-title-2 {\n --font-face-margin: 2rem 0;\n}\n.control.font-face-subtitle-1, .control.font-face-subtitle-2 {\n --font-face-margin: 1.5rem 0;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1, .control.font-face-body-1-bold, .control.font-face-body-1-code, .control.font-face-body-1-link, .control.font-face-body-2, .control.font-face-body-2-bold, .control.font-face-body-2-code, .control.font-face-body-2-link {\n --font-face-margin: 1rem 0;\n}\n\n::slotted(:where(h1, h2, h3, h4, h5, h6, p)) {\n margin: initial;\n}\n\n::slotted(*) {\n color: inherit;\n font: inherit;\n}";
7
7
  styleInject(css_248z);
8
8
 
9
9
  class Text extends FoundationElement {
package/tooltip/index.js CHANGED
@@ -15,7 +15,7 @@ import '../shared/apply-mixins.js';
15
15
  import '../shared/aria-global.js';
16
16
  import '../shared/es.object.assign.js';
17
17
 
18
- var css_248z = "/*\n Do not edit directly\n Generated on Sun, 23 Jan 2022 11:15:05 GMT\n*/\n.control {\n pointer-events: none;\n}\n\n.tooltip {\n width: var(--tooltip-inline-size, 240px);\n}\n.tooltip-text {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n padding: 8px 12px;\n color: var(--vvd-color-on-canvas);\n}";
18
+ var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n pointer-events: none;\n}\n\n.tooltip {\n width: var(--tooltip-inline-size, 240px);\n}\n.tooltip-text {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n padding: 8px 12px;\n color: var(--vvd-color-on-canvas);\n}";
19
19
  styleInject(css_248z);
20
20
 
21
21
  class Tooltip extends FoundationElement {
@@ -25,14 +25,6 @@ class Tooltip extends FoundationElement {
25
25
  this.open = false;
26
26
  }
27
27
 
28
- show() {
29
- this.open = true;
30
- }
31
-
32
- hide() {
33
- this.open = false;
34
- }
35
-
36
28
  }
37
29
 
38
30
  __decorate([attr({