@vonage/vivid 3.0.0-next.9 → 3.0.0-next.91

package/side-drawer/index.js

@@ -1,81 +1,89 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import '../shared/web.dom-collections.iterator.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
 import { w as when } from '../shared/when.js';
-import { s as slotted } from '../shared/slotted.js';
 import { c as classNames } from '../shared/class-names.js';
+import '../shared/export.js';
+import '../shared/object-keys.js';
+import '../shared/iterators.js';
 
+var _SideDrawer_instances, _SideDrawer_close, _SideDrawer_open;
 class SideDrawer extends FoundationElement {
   constructor() {
     super(...arguments);
+    _SideDrawer_instances.add(this);
     this.alternate = false;
     this.modal = false;
     this.open = false;
+    this.trailing = false;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    switch (name) {
+      case 'open':
+        {
+          this.open ? __classPrivateFieldGet(this, _SideDrawer_instances, "m", _SideDrawer_open).call(this) : __classPrivateFieldGet(this, _SideDrawer_instances, "m", _SideDrawer_close).call(this);
+        }
+    }
   }
-
 }
-
+_SideDrawer_instances = new WeakSet(), _SideDrawer_close = function _SideDrawer_close() {
+  this.$emit('close');
+}, _SideDrawer_open = function _SideDrawer_open() {
+  this.$emit('open');
+};
 __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], SideDrawer.prototype, "alternate", void 0);
-
 __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], SideDrawer.prototype, "modal", void 0);
-
 __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], SideDrawer.prototype, "open", void 0);
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
 
-__decorate([attr, __metadata("design:type", String)], SideDrawer.prototype, "position", void 0);
-
-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}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Nov 2022 17:26:06 GMT\n */\n.control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-canvas-text);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
 
 let _ = t => t,
-    _t,
-    _t2;
-
+  _t,
+  _t2;
 const getClasses = ({
-  alternate,
   modal,
   open,
-  position
-}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], ['end', position === 'end']);
-
+  trailing
+}) => classNames('control', ['modal', modal], ['open', open], ['trailing', trailing]);
+const getScrimClasses = ({
+  open
+}) => classNames('scrim', ['open', open]);
 const sideDrawerTemplate = () => html(_t || (_t = _`
-	<aside class="${0}" part="${0}"
+	<aside class="${0}" part="base ${0}"
 	 @keydown="${0}">
-
-	 	<header class="side-drawer-top-bar" part="side-drawer-top-bar">
-	 		<slot name="top-bar" ${0}></slot>
- 		</header>
-
-		<div class="side-drawer-content">
-			<slot></slot>
-		</div>
+    <slot></slot>
 	</aside>
 
-	<div class="side-drawer-app-content">
+	<div class="side-drawer-app-content" ?inert="${0}">
 		<slot name="app-content"></slot>
 	</div>
 
 	${0}
-`), 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)));
-
+`), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', (x, c) => handleKeydown(x, c.event), x => x.open && x.modal, when(x => x.modal, html(_t2 || (_t2 = _`<div class="${0}" @click="${0}"></div>`), getScrimClasses, x => x.open = false)));
 const handleKeydown = (x, {
   key
 }) => {
   if (key === 'Escape') {
     x.open = false;
+  } else {
+    return true;
   }
 };
 
-const VIVIDSideDrawer = SideDrawer.compose({
+const vividSideDrawer = SideDrawer.compose({
   baseName: 'side-drawer',
   template: sideDrawerTemplate,
   styles: css_248z
 });
-designSystem.register(VIVIDSideDrawer());
+designSystem.register(vividSideDrawer());
 
-export { VIVIDSideDrawer };
+export { vividSideDrawer };

package/styles/core/all.css

@@ -0,0 +1,75 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ */
+.vvd-root {
+  color-scheme: var(--vvd-color-scheme);
+  background-color: var(--vvd-color-canvas);
+  color: var(--vvd-color-canvas-text);
+}
+
+.vvd-root {
+  font-feature-settings: "kern"; /* turns on kerning */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
+  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
+  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
+  font: var(--vvd-typography-base);
+}
+.vvd-root p {
+  font: var(--vvd-typography-base);
+  margin-block: 16px;
+}
+.vvd-root b, .vvd-root strong {
+  font: var(--vvd-typography-base-bold);
+}
+.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {
+  font: var(--vvd-typography-base-code);
+}
+.vvd-root .headline {
+  font: var(--vvd-typography-headline);
+  margin-block: 40px;
+}
+.vvd-root .subtitle {
+  font: var(--vvd-typography-subtitle);
+  margin-block: 40px;
+}
+.vvd-root h1, .vvd-root .heading1 {
+  font: var(--vvd-typography-heading-1);
+  margin-block: 32px;
+}
+.vvd-root h2, .vvd-root .heading2 {
+  font: var(--vvd-typography-heading-2);
+  margin-block: 32px;
+}
+.vvd-root h3, .vvd-root .heading3 {
+  font: var(--vvd-typography-heading-3);
+  margin-block: 24px;
+}
+.vvd-root h4, .vvd-root .heading4 {
+  font: var(--vvd-typography-heading-4);
+  margin-block: 24px;
+}
+.vvd-root small, .vvd-root figcaption {
+  font: var(--vvd-typography-base-condensed);
+}
+.vvd-root small b, .vvd-root small strong, .vvd-root figcaption b, .vvd-root figcaption strong {
+  font: var(--vvd-typography-base-condensed-bold);
+}
+.vvd-root small pre, .vvd-root small var, .vvd-root small code, .vvd-root small kbd, .vvd-root small samp, .vvd-root figcaption pre, .vvd-root figcaption var, .vvd-root figcaption code, .vvd-root figcaption kbd, .vvd-root figcaption samp {
+  font: var(--vvd-typography-base-condensed-code);
+}
+.vvd-root sub,
+.vvd-root sup {
+  font: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+.vvd-root sub {
+  bottom: -0.25em;
+}
+.vvd-root sup {
+  top: -0.5em;
+}
+
+/*# sourceMappingURL=all.css.map */

package/styles/core/theme.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ */
+.vvd-root {
+  color-scheme: var(--vvd-color-scheme);
+  background-color: var(--vvd-color-canvas);
+  color: var(--vvd-color-canvas-text);
+}
+
+/*# sourceMappingURL=theme.css.map */

package/styles/core/typography.css

@@ -0,0 +1,69 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ */
+.vvd-root {
+  font-feature-settings: "kern"; /* turns on kerning */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
+  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
+  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
+  font: var(--vvd-typography-base);
+}
+.vvd-root p {
+  font: var(--vvd-typography-base);
+  margin-block: 16px;
+}
+.vvd-root b, .vvd-root strong {
+  font: var(--vvd-typography-base-bold);
+}
+.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {
+  font: var(--vvd-typography-base-code);
+}
+.vvd-root .headline {
+  font: var(--vvd-typography-headline);
+  margin-block: 40px;
+}
+.vvd-root .subtitle {
+  font: var(--vvd-typography-subtitle);
+  margin-block: 40px;
+}
+.vvd-root h1, .vvd-root .heading1 {
+  font: var(--vvd-typography-heading-1);
+  margin-block: 32px;
+}
+.vvd-root h2, .vvd-root .heading2 {
+  font: var(--vvd-typography-heading-2);
+  margin-block: 32px;
+}
+.vvd-root h3, .vvd-root .heading3 {
+  font: var(--vvd-typography-heading-3);
+  margin-block: 24px;
+}
+.vvd-root h4, .vvd-root .heading4 {
+  font: var(--vvd-typography-heading-4);
+  margin-block: 24px;
+}
+.vvd-root small, .vvd-root figcaption {
+  font: var(--vvd-typography-base-condensed);
+}
+.vvd-root small b, .vvd-root small strong, .vvd-root figcaption b, .vvd-root figcaption strong {
+  font: var(--vvd-typography-base-condensed-bold);
+}
+.vvd-root small pre, .vvd-root small var, .vvd-root small code, .vvd-root small kbd, .vvd-root small samp, .vvd-root figcaption pre, .vvd-root figcaption var, .vvd-root figcaption code, .vvd-root figcaption kbd, .vvd-root figcaption samp {
+  font: var(--vvd-typography-base-condensed-code);
+}
+.vvd-root sub,
+.vvd-root sup {
+  font: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+.vvd-root sub {
+  bottom: -0.25em;
+}
+.vvd-root sup {
+  top: -0.5em;
+}
+
+/*# sourceMappingURL=typography.css.map */

package/styles/fonts/spezia.css

@@ -1,23 +1,20 @@
-:root {
-  --vvd-font-family-spezia: SpeziaWebVariable;
-  --vvd-font-family-spezia-mono: SpeziaMonoWebVariable;
+@font-face {
+  font-family: SpeziaCompleteVariableUpright;
+  font-stretch: 50% 200%;
+  font-weight: 1 1000;
+  src: url("SpeziaCompleteVariableUprightWeb.woff2") format("woff2");
 }
-
 @font-face {
-  font-display: block;
-  font-family: SpeziaWebVariable;
+  font-family: SpeziaCompleteVariableItalic;
   font-stretch: 50% 200%;
-  font-style: normal;
   font-weight: 1 1000;
-  src: url("https://fonts.resources.vonage.com/fonts/v1/Spezia_Web_Complete_Upright.woff2") format("woff2-variations");
+  src: url("SpeziaCompleteVariableItalicWeb.woff2") format("woff2");
 }
 @font-face {
-  font-display: block;
-  font-family: SpeziaMonoWebVariable;
+  font-family: SpeziaMonoCompleteVariable;
   font-stretch: 50% 200%;
-  font-style: normal;
   font-weight: 1 1000;
-  src: url("https://fonts.resources.vonage.com/fonts/v1/Spezia_Web_Monospace_Complete.woff2") format("woff2-variations");
+  src: url("SpeziaMonoCompleteVariableWeb.woff2") format("woff2");
 }
 
 /*# sourceMappingURL=spezia.css.map */

package/styles/tokens/theme-dark.css

@@ -0,0 +1,230 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ */
+/**
+ * Do not edit directly
+ * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ */
+/**
+ * Do not edit directly
+ * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ */
+/**
+ * Do not edit directly
+ * Generated on Thu, 03 Nov 2022 17:26:06 GMT
+ */
+@property --vvd-size-density {
+  syntax: "<integer>";
+  inherits: true;
+  initial-value: 0;
+}
+@property --vvd-size-font-scale-base {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 16px;
+}
+.vvd-root, ::part(vvd-root) {
+  --vvd-color-scheme: dark;
+  --vvd-color-canvas: #000000;
+  --vvd-color-canvas-text: #ffffff;
+  --vvd-color-neutral-50: #1a1a1a;
+  --vvd-color-neutral-100: #333333;
+  --vvd-color-neutral-200: #4d4d4d;
+  --vvd-color-neutral-300: #666666;
+  --vvd-color-neutral-400: #757575;
+  --vvd-color-neutral-500: #929292;
+  --vvd-color-neutral-600: #b3b3b3;
+  --vvd-color-neutral-700: #cccccc;
+  --vvd-color-neutral-800: #E6E6E6;
+  --vvd-color-neutral-900: #F2F2F2;
+  --vvd-color-neutral-950: #ffffff;
+  --vvd-color-cta-50: #26044d;
+  --vvd-color-cta-100: #440291;
+  --vvd-color-cta-200: #6405d1;
+  --vvd-color-cta-300: #871eff;
+  --vvd-color-cta-400: #9941ff;
+  --vvd-color-cta-500: #b27bf2;
+  --vvd-color-cta-600: #cba1fa;
+  --vvd-color-cta-700: #dcc1fc;
+  --vvd-color-cta-800: #ece2fa;
+  --vvd-color-cta-900: #f5f0fd;
+  --vvd-color-warning-50: #2A1502;
+  --vvd-color-warning-100: #522801;
+  --vvd-color-warning-200: #803807;
+  --vvd-color-warning-300: #A64C03;
+  --vvd-color-warning-400: #be5702;
+  --vvd-color-warning-500: #e07902;
+  --vvd-color-warning-600: #fa9f00;
+  --vvd-color-warning-700: #FACC4B;
+  --vvd-color-warning-800: #FDEAA0;
+  --vvd-color-warning-900: #FDF5D4;
+  --vvd-color-information-50: #071939;
+  --vvd-color-information-100: #0e306d;
+  --vvd-color-information-200: #094a9e;
+  --vvd-color-information-300: #0e65c2;
+  --vvd-color-information-400: #0276d5;
+  --vvd-color-information-500: #2997f0;
+  --vvd-color-information-600: #65baff;
+  --vvd-color-information-700: #9dd2fe;
+  --vvd-color-information-800: #d3e9fc;
+  --vvd-color-information-900: #e8f4fb;
+  --vvd-color-announcement-50: #32082c;
+  --vvd-color-announcement-100: #620256;
+  --vvd-color-announcement-200: #8f1669;
+  --vvd-color-announcement-300: #bb1e89;
+  --vvd-color-announcement-400: #d6219c;
+  --vvd-color-announcement-500: #e560bb;
+  --vvd-color-announcement-600: #fb8fd8;
+  --vvd-color-announcement-700: #f8b9e7;
+  --vvd-color-announcement-800: #ffdcf7;
+  --vvd-color-announcement-900: #ffedfb;
+  --vvd-color-alert-50: #3e0004;
+  --vvd-color-alert-100: #6e0000;
+  --vvd-color-alert-200: #9f0202;
+  --vvd-color-alert-300: #cd0d0d;
+  --vvd-color-alert-400: #e61d1d;
+  --vvd-color-alert-500: #f75959;
+  --vvd-color-alert-600: #fe9696;
+  --vvd-color-alert-700: #ffbbbb;
+  --vvd-color-alert-800: #fedfdf;
+  --vvd-color-alert-900: #ffeef2;
+  --vvd-color-success-50: #0a1e11;
+  --vvd-color-success-100: #183a1e;
+  --vvd-color-success-200: #155923;
+  --vvd-color-success-300: #167629;
+  --vvd-color-success-400: #1c8731;
+  --vvd-color-success-500: #30a849;
+  --vvd-color-success-600: #53ca6a;
+  --vvd-color-success-700: #86e090;
+  --vvd-color-success-800: #cfeed4;
+  --vvd-color-success-900: #e1f8e5;
+  --vvd-color-surface-0dp: #0d0d0d;
+  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;
+  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;
+  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;
+  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;
+  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;
+  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;
+  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);
+  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);
+  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);
+  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);
+  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);
+  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
+  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
+  --vvd-typography-headline: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 var(--vvd-font-family-upright, SpeziaCompleteVariableUpright);
+  --vvd-typography-subtitle: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 var(--vvd-font-family-upright, SpeziaCompleteVariableUpright);
+  --vvd-typography-heading-1: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 var(--vvd-font-family-upright, SpeziaCompleteVariableUpright);
+  --vvd-typography-heading-2: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 var(--vvd-font-family-upright, SpeziaCompleteVariableUpright);
+  --vvd-typography-heading-3: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 var(--vvd-font-family-upright, SpeziaCompleteVariableUpright);
+  --vvd-typography-heading-4: 500 condensed calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 var(--vvd-font-family-upright, SpeziaCompleteVariableUpright);
+  --vvd-typography-base: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 var(--vvd-font-family-upright, SpeziaCompleteVariableUpright);
+  --vvd-typography-base-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 var(--vvd-font-family-upright, SpeziaCompleteVariableUpright);
+  --vvd-typography-base-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 var(--vvd-font-family-monospace, SpeziaMonoCompleteVariable);
+  --vvd-typography-base-condensed: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 var(--vvd-font-family-upright, SpeziaCompleteVariableUpright);
+  --vvd-typography-base-condensed-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 var(--vvd-font-family-upright, SpeziaCompleteVariableUpright);
+  --vvd-typography-base-condensed-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 var(--vvd-font-family-monospace, SpeziaMonoCompleteVariable);
+  --vvd-typography-base-extended: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px))/1.5 var(--vvd-font-family-upright, SpeziaCompleteVariableUpright);
+  --vvd-typography-base-extended-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px))/1.5 var(--vvd-font-family-upright, SpeziaCompleteVariableUpright);
+  --vvd-typography-base-extended-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base, 16px))/1.5 var(--vvd-font-family-monospace, SpeziaMonoCompleteVariable);
+}
+
+.vvd-theme-alternate, ::part(vvd-theme-alternate) {
+  --vvd-color-scheme: light;
+  --vvd-color-canvas: #ffffff;
+  --vvd-color-canvas-text: #0d0d0d;
+  --vvd-color-neutral-50: #F2F2F2;
+  --vvd-color-neutral-100: #E6E6E6;
+  --vvd-color-neutral-200: #cccccc;
+  --vvd-color-neutral-300: #b3b3b3;
+  --vvd-color-neutral-400: #929292;
+  --vvd-color-neutral-500: #757575;
+  --vvd-color-neutral-600: #666666;
+  --vvd-color-neutral-700: #4d4d4d;
+  --vvd-color-neutral-800: #333333;
+  --vvd-color-neutral-900: #1a1a1a;
+  --vvd-color-neutral-950: #0d0d0d;
+  --vvd-color-cta-50: #f5f0fd;
+  --vvd-color-cta-100: #ece2fa;
+  --vvd-color-cta-200: #dcc1fc;
+  --vvd-color-cta-300: #cba1fa;
+  --vvd-color-cta-400: #b27bf2;
+  --vvd-color-cta-500: #9941ff;
+  --vvd-color-cta-600: #871eff;
+  --vvd-color-cta-700: #6405d1;
+  --vvd-color-cta-800: #440291;
+  --vvd-color-cta-900: #26044d;
+  --vvd-color-cta-950: #140623;
+  --vvd-color-warning-50: #FDF5D4;
+  --vvd-color-warning-100: #FDEAA0;
+  --vvd-color-warning-200: #FACC4B;
+  --vvd-color-warning-300: #fa9f00;
+  --vvd-color-warning-400: #e07902;
+  --vvd-color-warning-500: #be5702;
+  --vvd-color-warning-600: #A64C03;
+  --vvd-color-warning-700: #893000;
+  --vvd-color-warning-800: #522801;
+  --vvd-color-warning-900: #2A1502;
+  --vvd-color-warning-950: #150B01;
+  --vvd-color-information-50: #e8f4fb;
+  --vvd-color-information-100: #d3e9fc;
+  --vvd-color-information-200: #9dd2fe;
+  --vvd-color-information-300: #65baff;
+  --vvd-color-information-400: #2997f0;
+  --vvd-color-information-500: #0276d5;
+  --vvd-color-information-600: #0e65c2;
+  --vvd-color-information-700: #094a9e;
+  --vvd-color-information-800: #0e306d;
+  --vvd-color-information-900: #071939;
+  --vvd-color-information-950: #040d1d;
+  --vvd-color-announcement-50: #ffedfb;
+  --vvd-color-announcement-100: #ffdcf7;
+  --vvd-color-announcement-200: #f8b9e7;
+  --vvd-color-announcement-300: #fb8fd8;
+  --vvd-color-announcement-400: #e560bb;
+  --vvd-color-announcement-500: #d6219c;
+  --vvd-color-announcement-600: #bb1e89;
+  --vvd-color-announcement-700: #8f1669;
+  --vvd-color-announcement-800: #620256;
+  --vvd-color-announcement-900: #32082c;
+  --vvd-color-announcement-950: #1d031a;
+  --vvd-color-success-50: #e1f8e5;
+  --vvd-color-success-100: #cfeed4;
+  --vvd-color-success-200: #86e090;
+  --vvd-color-success-300: #53ca6a;
+  --vvd-color-success-400: #30a849;
+  --vvd-color-success-500: #1c8731;
+  --vvd-color-success-600: #167629;
+  --vvd-color-success-700: #155923;
+  --vvd-color-success-800: #183a1e;
+  --vvd-color-success-900: #0a1e11;
+  --vvd-color-success-950: #060f09;
+  --vvd-color-alert-50: #ffeef2;
+  --vvd-color-alert-100: #fedfdf;
+  --vvd-color-alert-200: #ffbbbb;
+  --vvd-color-alert-300: #fe9696;
+  --vvd-color-alert-400: #f75959;
+  --vvd-color-alert-500: #e61d1d;
+  --vvd-color-alert-600: #cd0d0d;
+  --vvd-color-alert-700: #9f0202;
+  --vvd-color-alert-800: #6e0000;
+  --vvd-color-alert-900: #3e0004;
+  --vvd-color-alert-950: #250004;
+  --vvd-color-surface-0dp: #ffffff;
+  --vvd-color-surface-2dp: #ffffff;
+  --vvd-color-surface-4dp: #ffffff;
+  --vvd-color-surface-8dp: #ffffff;
+  --vvd-color-surface-12dp: #ffffff;
+  --vvd-color-surface-16dp: #ffffff;
+  --vvd-color-surface-24dp: #ffffff;
+  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);
+  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);
+  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);
+  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);
+  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);
+  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
+  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
+}
+
+/*# sourceMappingURL=theme-dark.css.map */