@vonage/vivid 3.0.0-next.5 → 3.0.0-next.50

package/side-drawer/index.js

@@ -1,8 +1,11 @@
 import { F as FoundationElement, _ 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 { s as slotted } from '../shared/slotted.js';
+import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
+import '../shared/export.js';
+import '../shared/object-keys.js';
+import '../shared/iterators.js';
 
 class SideDrawer extends FoundationElement {
   constructor() {
@@ -10,28 +13,7 @@ class SideDrawer extends FoundationElement {
     this.alternate = false;
     this.modal = false;
     this.open = false;
-
-    this.handleScrimClick = () => {
-      if (this.modal && this.open) {
-        this.hide();
-      }
-    };
-  }
-
-  show() {
-    this.open = true;
-  }
-
-  hide() {
-    this.open = false;
-  }
-
-  handleKeydown({
-    key
-  }) {
-    if (this.open && key === 'Escape') {
-      this.hide();
-    }
+    this.trailing = false;
   }
 
 }
@@ -48,56 +30,56 @@ __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], SideDrawer.prototype, "open", void 0);
 
-__decorate([attr, __metadata("design:type", String)], SideDrawer.prototype, "position", void 0);
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
 
-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}";
+var css_248z = ".control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-on-canvas);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control.alternate {\n  background-color: var(--vvd-color-canvas);\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-on-canvas);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
 styleInject(css_248z);
 
 let _ = t => t,
     _t,
-    _t2,
-    _t3;
+    _t2;
 
 const getClasses = ({
   alternate,
   modal,
   open,
-  position
-}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], ['end', position === 'end']);
-
-const sideDrawerTemplate = (context, definition) => html(_t || (_t = _`
-	<aside class="${0}" part="${0}"
-	 @keydown="${0}">
+  trailing
+}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], ['trailing', trailing]);
 
-		${0}
+const getScrimClasses = ({
+  open
+}) => classNames('scrim', ['open', open]);
 
-		<div class="side-drawer-content">
-			<slot></slot>
-		</div>
+const sideDrawerTemplate = () => html(_t || (_t = _`
+	<aside class="${0}" part="base ${0}"
+	 @keydown="${0}">
+    <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) => x.handleKeydown(c.event), renderTopBar(), x => x.modal && x.open ? renderScrim() : '');
-
-const renderTopBar = () => html(_t2 || (_t2 = _`
-	<header class="side-drawer-top-bar" part="side-drawer-top-bar">
-		<slot name="top-bar" ${0}></slot>
-	</header>`), slotted('hasTopBar'));
-
-const renderScrim = () => {
-  return html(_t3 || (_t3 = _`
-		<div class="scrim" @click="${0}" @keydown="${0}"></div>`), x => x.handleScrimClick(), x => x.handleScrimClick());
+`), 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/fonts/spezia.css

@@ -1,23 +1,23 @@
-:root {
-  --vvd-font-family-spezia: SpeziaWebVariable;
-  --vvd-font-family-spezia-mono: SpeziaMonoWebVariable;
-}
-
 @font-face {
-  font-display: block;
   font-family: SpeziaWebVariable;
   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("SpeziaCompleteVariableUprightWeb.woff") format("woff");
+  src: url("SpeziaCompleteVariableUprightWeb.woff2") format("woff2");
+}
+@font-face {
+  font-family: SpeziaCompleteVariableItalic;
+  font-stretch: 50% 200%;
+  font-weight: 1 1000;
+  src: url("SpeziaCompleteVariableItalicWeb.woff") format("woff");
+  src: url("SpeziaCompleteVariableItalicWeb.woff2") format("woff2");
 }
 @font-face {
-  font-display: block;
   font-family: SpeziaMonoWebVariable;
   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.woff") format("woff");
+  src: url("SpeziaMonoCompleteVariableWeb.woff2") format("woff2");
 }
 
 /*# sourceMappingURL=spezia.css.map */

package/styles/themes/dark.css

@@ -44,6 +44,7 @@
   --vvd-color-cta-20: rgb(68,2,145);
   --vvd-color-cta-30: rgb(100,5,209);
   --vvd-color-cta-70: rgb(203,161,250);
+  --vvd-color-cta-80: rgb(220,193,252);
   --vvd-color-cta-90: rgb(236,226,250);
   --vvd-color-success: rgb(48,168,73);
   --vvd-color-on-success: rgb(0,0,0);
@@ -51,6 +52,7 @@
   --vvd-color-success-20: rgb(24,58,30);
   --vvd-color-success-30: rgb(21,89,35);
   --vvd-color-success-70: rgb(83,202,106);
+  --vvd-color-success-80: rgb(134,224,144);
   --vvd-color-success-90: rgb(207,238,212);
   --vvd-color-alert: rgb(247,89,89);
   --vvd-color-on-alert: rgb(0,0,0);
@@ -58,6 +60,7 @@
   --vvd-color-alert-20: rgb(110,0,0);
   --vvd-color-alert-30: rgb(159,2,2);
   --vvd-color-alert-70: rgb(254,150,150);
+  --vvd-color-alert-80: rgb(255,187,187);
   --vvd-color-alert-90: rgb(254,223,223);
   --vvd-color-warning: rgb(224,121,2);
   --vvd-color-on-warning: rgb(0,0,0);
@@ -65,6 +68,7 @@
   --vvd-color-warning-20: rgb(82,40,1);
   --vvd-color-warning-30: rgb(128,56,7);
   --vvd-color-warning-70: rgb(250,159,0);
+  --vvd-color-warning-80: rgb(255,195,33);
   --vvd-color-warning-90: rgb(253,231,109);
   --vvd-color-info: rgb(41,151,240);
   --vvd-color-on-info: rgb(0,0,0);
@@ -72,6 +76,7 @@
   --vvd-color-info-20: rgb(14,48,109);
   --vvd-color-info-30: rgb(9,74,158);
   --vvd-color-info-70: rgb(101,186,255);
+  --vvd-color-info-80: rgb(157,210,254);
   --vvd-color-info-90: rgb(211,233,252);
   --vvd-color-announcement: rgb(229,96,187);
   --vvd-color-on-announcement: rgb(0,0,0);
@@ -79,6 +84,7 @@
   --vvd-color-announcement-20: rgb(98,2,86);
   --vvd-color-announcement-30: rgb(143,22,105);
   --vvd-color-announcement-70: rgb(251,143,216);
+  --vvd-color-announcement-80: rgb(248,185,231);
   --vvd-color-announcement-90: rgb(255,220,247);
   --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));
   --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 @@
   --vvd-color-cta-20: rgb(236,226,250);
   --vvd-color-cta-30: rgb(220,193,252);
   --vvd-color-cta-70: rgb(135,30,255);
+  --vvd-color-cta-80: rgb(100,5,209);
   --vvd-color-cta-90: rgb(68,2,145);
   --vvd-color-success: rgb(28,135,49);
   --vvd-color-on-success: rgb(255,255,255);
@@ -147,6 +154,7 @@
   --vvd-color-success-20: rgb(207,238,212);
   --vvd-color-success-30: rgb(134,224,144);
   --vvd-color-success-70: rgb(22,118,41);
+  --vvd-color-success-80: rgb(21,89,35);
   --vvd-color-success-90: rgb(24,58,30);
   --vvd-color-alert: rgb(230,29,29);
   --vvd-color-on-alert: rgb(255,255,255);
@@ -154,6 +162,7 @@
   --vvd-color-alert-20: rgb(254,223,223);
   --vvd-color-alert-30: rgb(255,187,187);
   --vvd-color-alert-70: rgb(205,13,13);
+  --vvd-color-alert-80: rgb(159,2,2);
   --vvd-color-alert-90: rgb(110,0,0);
   --vvd-color-warning: rgb(250,159,0);
   --vvd-color-on-warning: rgb(0,0,0);
@@ -161,6 +170,7 @@
   --vvd-color-warning-20: rgb(253,231,109);
   --vvd-color-warning-30: rgb(255,195,33);
   --vvd-color-warning-70: rgb(166,76,3);
+  --vvd-color-warning-80: rgb(128,56,7);
   --vvd-color-warning-90: rgb(82,40,1);
   --vvd-color-info: rgb(2,118,213);
   --vvd-color-on-info: rgb(255,255,255);
@@ -168,6 +178,7 @@
   --vvd-color-info-20: rgb(211,233,252);
   --vvd-color-info-30: rgb(157,210,254);
   --vvd-color-info-70: rgb(14,101,194);
+  --vvd-color-info-80: rgb(9,74,158);
   --vvd-color-info-90: rgb(14,48,109);
   --vvd-color-announcement: rgb(214,33,156);
   --vvd-color-on-announcement: rgb(255,255,255);
@@ -175,6 +186,7 @@
   --vvd-color-announcement-20: rgb(255,220,247);
   --vvd-color-announcement-30: rgb(248,185,231);
   --vvd-color-announcement-70: rgb(187,30,137);
+  --vvd-color-announcement-80: rgb(143,22,105);
   --vvd-color-announcement-90: rgb(98,2,86);
   --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));
   --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

@@ -44,6 +44,7 @@
   --vvd-color-cta-20: rgb(236,226,250);
   --vvd-color-cta-30: rgb(220,193,252);
   --vvd-color-cta-70: rgb(135,30,255);
+  --vvd-color-cta-80: rgb(100,5,209);
   --vvd-color-cta-90: rgb(68,2,145);
   --vvd-color-success: rgb(28,135,49);
   --vvd-color-on-success: rgb(255,255,255);
@@ -51,6 +52,7 @@
   --vvd-color-success-20: rgb(207,238,212);
   --vvd-color-success-30: rgb(134,224,144);
   --vvd-color-success-70: rgb(22,118,41);
+  --vvd-color-success-80: rgb(21,89,35);
   --vvd-color-success-90: rgb(24,58,30);
   --vvd-color-alert: rgb(230,29,29);
   --vvd-color-on-alert: rgb(255,255,255);
@@ -58,6 +60,7 @@
   --vvd-color-alert-20: rgb(254,223,223);
   --vvd-color-alert-30: rgb(255,187,187);
   --vvd-color-alert-70: rgb(205,13,13);
+  --vvd-color-alert-80: rgb(159,2,2);
   --vvd-color-alert-90: rgb(110,0,0);
   --vvd-color-warning: rgb(250,159,0);
   --vvd-color-on-warning: rgb(0,0,0);
@@ -65,6 +68,7 @@
   --vvd-color-warning-20: rgb(253,231,109);
   --vvd-color-warning-30: rgb(255,195,33);
   --vvd-color-warning-70: rgb(166,76,3);
+  --vvd-color-warning-80: rgb(128,56,7);
   --vvd-color-warning-90: rgb(82,40,1);
   --vvd-color-info: rgb(2,118,213);
   --vvd-color-on-info: rgb(255,255,255);
@@ -72,6 +76,7 @@
   --vvd-color-info-20: rgb(211,233,252);
   --vvd-color-info-30: rgb(157,210,254);
   --vvd-color-info-70: rgb(14,101,194);
+  --vvd-color-info-80: rgb(9,74,158);
   --vvd-color-info-90: rgb(14,48,109);
   --vvd-color-announcement: rgb(214,33,156);
   --vvd-color-on-announcement: rgb(255,255,255);
@@ -79,6 +84,7 @@
   --vvd-color-announcement-20: rgb(255,220,247);
   --vvd-color-announcement-30: rgb(248,185,231);
   --vvd-color-announcement-70: rgb(187,30,137);
+  --vvd-color-announcement-80: rgb(143,22,105);
   --vvd-color-announcement-90: rgb(98,2,86);
   --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));
   --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 @@
   --vvd-color-cta-20: rgb(68,2,145);
   --vvd-color-cta-30: rgb(100,5,209);
   --vvd-color-cta-70: rgb(203,161,250);
+  --vvd-color-cta-80: rgb(220,193,252);
   --vvd-color-cta-90: rgb(236,226,250);
   --vvd-color-success: rgb(48,168,73);
   --vvd-color-on-success: rgb(0,0,0);
@@ -147,6 +154,7 @@
   --vvd-color-success-20: rgb(24,58,30);
   --vvd-color-success-30: rgb(21,89,35);
   --vvd-color-success-70: rgb(83,202,106);
+  --vvd-color-success-80: rgb(134,224,144);
   --vvd-color-success-90: rgb(207,238,212);
   --vvd-color-alert: rgb(247,89,89);
   --vvd-color-on-alert: rgb(0,0,0);
@@ -154,6 +162,7 @@
   --vvd-color-alert-20: rgb(110,0,0);
   --vvd-color-alert-30: rgb(159,2,2);
   --vvd-color-alert-70: rgb(254,150,150);
+  --vvd-color-alert-80: rgb(255,187,187);
   --vvd-color-alert-90: rgb(254,223,223);
   --vvd-color-warning: rgb(224,121,2);
   --vvd-color-on-warning: rgb(0,0,0);
@@ -161,6 +170,7 @@
   --vvd-color-warning-20: rgb(82,40,1);
   --vvd-color-warning-30: rgb(128,56,7);
   --vvd-color-warning-70: rgb(250,159,0);
+  --vvd-color-warning-80: rgb(255,195,33);
   --vvd-color-warning-90: rgb(253,231,109);
   --vvd-color-info: rgb(41,151,240);
   --vvd-color-on-info: rgb(0,0,0);
@@ -168,6 +178,7 @@
   --vvd-color-info-20: rgb(14,48,109);
   --vvd-color-info-30: rgb(9,74,158);
   --vvd-color-info-70: rgb(101,186,255);
+  --vvd-color-info-80: rgb(157,210,254);
   --vvd-color-info-90: rgb(211,233,252);
   --vvd-color-announcement: rgb(229,96,187);
   --vvd-color-on-announcement: rgb(0,0,0);
@@ -175,6 +186,7 @@
   --vvd-color-announcement-20: rgb(98,2,86);
   --vvd-color-announcement-30: rgb(143,22,105);
   --vvd-color-announcement-70: rgb(251,143,216);
+  --vvd-color-announcement-80: rgb(248,185,231);
   --vvd-color-announcement-90: rgb(255,220,247);
   --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));
   --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/styles/typography/desktop.css

@@ -0,0 +1,72 @@
+/*
+  Do not edit directly
+  Generated on Wed, 27 Apr 2022 11:58:36 GMT
+*/
+:root.vvd-typography h1, :root.vvd-typography .headline-1 {
+  font: 500 condensed 66px / 88px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+  margin-block: 2.5rem;
+}
+:root.vvd-typography h2, :root.vvd-typography .headline-2 {
+  font: 500 condensed 52px / 68px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+  margin-block: 2.5rem;
+}
+:root.vvd-typography h3, :root.vvd-typography .subtitle-1 {
+  font: 500 condensed 26px / 36px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+  margin-block: 1.5rem;
+}
+:root.vvd-typography h4, :root.vvd-typography .subtitle-2 {
+  font: 500 condensed 20px / 28px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+  margin-block: 1.5rem;
+}
+:root.vvd-typography h5, :root.vvd-typography .title-1 {
+  font: 500 condensed 40px / 52px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+  margin-block: 2rem;
+}
+:root.vvd-typography h6, :root.vvd-typography .title-2 {
+  font: 500 condensed 32px / 44px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+  margin-block: 2rem;
+}
+:root.vvd-typography code {
+  font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+}
+:root.vvd-typography body, :root.vvd-typography p {
+  font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+}
+:root.vvd-typography strong {
+  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+}
+:root.vvd-typography code {
+  font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+}
+
+/*# sourceMappingURL=desktop.css.map */

package/text-anchor/index.js

@@ -1,13 +1,20 @@
 import { d as designSystem } from '../shared/index.js';
 import { T as TextAnchor } from '../shared/text-anchor.js';
 import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
-import '../shared/web.dom-collections.iterator.js';
 import '../shared/affix.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/export.js';
+import '../shared/object-keys.js';
+import '../shared/iterators.js';
 import '../shared/icon.js';
+import '../shared/to-string.js';
 import '../shared/_has.js';
 import '../shared/anchor.js';
 import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
+import '../shared/ref.js';
+import '../shared/focus2.js';
+import '../shared/focus.js';
 import '../shared/class-names.js';
 
 const vividTextAnchor = TextAnchor.compose({