@vonage/vivid 2.30.0 → 3.0.0-next.12

package/styles/themes/dark.css

@@ -0,0 +1,205 @@
+:root, .vvd-theme-main, ::part(vvd-theme-main) {
+  --vvd-sizing-4px-scale-3xs: 8px;
+  --vvd-sizing-4px-scale-2xs: 12px;
+  --vvd-sizing-4px-scale-xs: 16px;
+  --vvd-sizing-4px-scale-sm: 20px;
+  --vvd-sizing-4px-scale-md: 24px;
+  --vvd-sizing-4px-scale-lg: 28px;
+  --vvd-sizing-4px-scale-xl: 32px;
+  --vvd-sizing-4px-scale-2xl: 36px;
+  --vvd-sizing-4px-scale-3xl: 40px;
+  --vvd-sizing-8px-scale-3xs: 8px;
+  --vvd-sizing-8px-scale-2xs: 16px;
+  --vvd-sizing-8px-scale-xs: 24px;
+  --vvd-sizing-8px-scale-sm: 32px;
+  --vvd-sizing-8px-scale-md: 40px;
+  --vvd-sizing-8px-scale-lg: 48px;
+  --vvd-sizing-8px-scale-xl: 56px;
+  --vvd-sizing-8px-scale-2xl: 64px;
+  --vvd-sizing-8px-scale-3xl: 72px;
+  --vvd-color-surface-0dp: rgba(13, 13, 13, 1);
+  --vvd-color-surface-2dp: rgba(28, 28, 28, 1);
+  --vvd-color-surface-4dp: rgba(32, 32, 32, 1);
+  --vvd-color-surface-8dp: rgba(37, 37, 37, 1);
+  --vvd-color-surface-12dp: rgba(42, 42, 42, 1);
+  --vvd-color-surface-16dp: rgba(47, 47, 47, 1);
+  --vvd-color-surface-24dp: rgba(52, 52, 52, 1);
+  --vvd-color-canvas: rgb(13,13,13);
+  --vvd-color-on-canvas: rgb(255,255,255);
+  --vvd-color-primary: rgb(255,255,255);
+  --vvd-color-on-primary: rgb(0,0,0);
+  --vvd-color-neutral: rgb(146,146,146);
+  --vvd-color-on-neutral: rgb(0,0,0);
+  --vvd-color-neutral-10: rgb(26,26,26);
+  --vvd-color-neutral-20: rgb(51,51,51);
+  --vvd-color-neutral-30: rgb(77,77,77);
+  --vvd-color-neutral-40: rgb(102,102,102);
+  --vvd-color-neutral-50: rgb(117,117,117);
+  --vvd-color-neutral-70: rgb(179,179,179);
+  --vvd-color-neutral-80: rgb(204,204,204);
+  --vvd-color-neutral-90: rgb(230,230,230);
+  --vvd-color-cta: rgb(178,123,242);
+  --vvd-color-on-cta: rgb(0,0,0);
+  --vvd-color-cta-10: rgb(38,4,77);
+  --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);
+  --vvd-color-success-10: rgb(10,30,17);
+  --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);
+  --vvd-color-alert-10: rgb(62,0,4);
+  --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);
+  --vvd-color-warning-10: rgb(42,21,2);
+  --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);
+  --vvd-color-info-10: rgb(7,25,57);
+  --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);
+  --vvd-color-announcement-10: rgb(50,8,44);
+  --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));
+  --vvd-shadow-surface-4dp: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
+  --vvd-shadow-surface-8dp: drop-shadow(0 2px 16px rgba(19, 20, 21, 0.25)) drop-shadow(0 8px 8px rgba(19, 20, 21, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
+  --vvd-shadow-surface-12dp: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.25)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.25)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25));
+  --vvd-shadow-surface-16dp: drop-shadow(0 6px 32px rgba(0, 0, 0, 0.25)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
+  --vvd-shadow-surface-24dp: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.25)) drop-shadow(0 24px 32px rgba(0, 0, 0, 0.25)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.25));
+}
+@supports (color-scheme: dark) {
+  :root, .vvd-theme-main, ::part(vvd-theme-main) {
+    color-scheme: dark;
+  }
+}
+
+.vvd-theme-alternate, ::part(vvd-theme-alternate) {
+  --vvd-sizing-4px-scale-3xs: 8px;
+  --vvd-sizing-4px-scale-2xs: 12px;
+  --vvd-sizing-4px-scale-xs: 16px;
+  --vvd-sizing-4px-scale-sm: 20px;
+  --vvd-sizing-4px-scale-md: 24px;
+  --vvd-sizing-4px-scale-lg: 28px;
+  --vvd-sizing-4px-scale-xl: 32px;
+  --vvd-sizing-4px-scale-2xl: 36px;
+  --vvd-sizing-4px-scale-3xl: 40px;
+  --vvd-sizing-8px-scale-3xs: 8px;
+  --vvd-sizing-8px-scale-2xs: 16px;
+  --vvd-sizing-8px-scale-xs: 24px;
+  --vvd-sizing-8px-scale-sm: 32px;
+  --vvd-sizing-8px-scale-md: 40px;
+  --vvd-sizing-8px-scale-lg: 48px;
+  --vvd-sizing-8px-scale-xl: 56px;
+  --vvd-sizing-8px-scale-2xl: 64px;
+  --vvd-sizing-8px-scale-3xl: 72px;
+  --vvd-color-surface-0dp: rgba(255, 255, 255, 1);
+  --vvd-color-surface-2dp: rgba(255, 255, 255, 1);
+  --vvd-color-surface-4dp: rgba(255, 255, 255, 1);
+  --vvd-color-surface-8dp: rgba(255, 255, 255, 1);
+  --vvd-color-surface-12dp: rgba(255, 255, 255, 1);
+  --vvd-color-surface-16dp: rgba(255, 255, 255, 1);
+  --vvd-color-surface-24dp: rgba(255, 255, 255, 1);
+  --vvd-color-canvas: rgb(255,255,255);
+  --vvd-color-on-canvas: rgb(0,0,0);
+  --vvd-color-primary: rgb(0,0,0);
+  --vvd-color-on-primary: rgb(255,255,255);
+  --vvd-color-neutral: rgb(117,117,117);
+  --vvd-color-on-neutral: rgb(255,255,255);
+  --vvd-color-neutral-10: rgb(242,242,242);
+  --vvd-color-neutral-20: rgb(230,230,230);
+  --vvd-color-neutral-30: rgb(204,204,204);
+  --vvd-color-neutral-40: rgb(179,179,179);
+  --vvd-color-neutral-50: rgb(146,146,146);
+  --vvd-color-neutral-70: rgb(102,102,102);
+  --vvd-color-neutral-80: rgb(77,77,77);
+  --vvd-color-neutral-90: rgb(51,51,51);
+  --vvd-color-cta: rgb(153,65,255);
+  --vvd-color-on-cta: rgb(255,255,255);
+  --vvd-color-cta-10: rgb(245,240,253);
+  --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);
+  --vvd-color-success-10: rgb(225,248,229);
+  --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);
+  --vvd-color-alert-10: rgb(255,238,242);
+  --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);
+  --vvd-color-warning-10: rgb(252,245,167);
+  --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);
+  --vvd-color-info-10: rgb(232,244,251);
+  --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);
+  --vvd-color-announcement-10: rgb(255,237,251);
+  --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));
+  --vvd-shadow-surface-4dp: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)) drop-shadow(0 4px 2px rgba(0, 0, 0, 0.05));
+  --vvd-shadow-surface-8dp: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.1)) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.05)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.05));
+  --vvd-shadow-surface-12dp: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.1)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.05)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.05));
+  --vvd-shadow-surface-16dp: drop-shadow(0 6px 32px rgba(0, 0, 0, 0.1)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.05)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.05));
+  --vvd-shadow-surface-24dp: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.2)) drop-shadow(0 24px 32px rgba(0, 0, 0, 0.05)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.05));
+}
+@supports (color-scheme: light) {
+  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
+    color-scheme: light;
+  }
+}
+
+/*# sourceMappingURL=dark.css.map */

package/styles/themes/light.css

@@ -0,0 +1,205 @@
+:root, .vvd-theme-main, ::part(vvd-theme-main) {
+  --vvd-sizing-4px-scale-3xs: 8px;
+  --vvd-sizing-4px-scale-2xs: 12px;
+  --vvd-sizing-4px-scale-xs: 16px;
+  --vvd-sizing-4px-scale-sm: 20px;
+  --vvd-sizing-4px-scale-md: 24px;
+  --vvd-sizing-4px-scale-lg: 28px;
+  --vvd-sizing-4px-scale-xl: 32px;
+  --vvd-sizing-4px-scale-2xl: 36px;
+  --vvd-sizing-4px-scale-3xl: 40px;
+  --vvd-sizing-8px-scale-3xs: 8px;
+  --vvd-sizing-8px-scale-2xs: 16px;
+  --vvd-sizing-8px-scale-xs: 24px;
+  --vvd-sizing-8px-scale-sm: 32px;
+  --vvd-sizing-8px-scale-md: 40px;
+  --vvd-sizing-8px-scale-lg: 48px;
+  --vvd-sizing-8px-scale-xl: 56px;
+  --vvd-sizing-8px-scale-2xl: 64px;
+  --vvd-sizing-8px-scale-3xl: 72px;
+  --vvd-color-surface-0dp: rgba(255, 255, 255, 1);
+  --vvd-color-surface-2dp: rgba(255, 255, 255, 1);
+  --vvd-color-surface-4dp: rgba(255, 255, 255, 1);
+  --vvd-color-surface-8dp: rgba(255, 255, 255, 1);
+  --vvd-color-surface-12dp: rgba(255, 255, 255, 1);
+  --vvd-color-surface-16dp: rgba(255, 255, 255, 1);
+  --vvd-color-surface-24dp: rgba(255, 255, 255, 1);
+  --vvd-color-canvas: rgb(255,255,255);
+  --vvd-color-on-canvas: rgb(0,0,0);
+  --vvd-color-primary: rgb(0,0,0);
+  --vvd-color-on-primary: rgb(255,255,255);
+  --vvd-color-neutral: rgb(117,117,117);
+  --vvd-color-on-neutral: rgb(255,255,255);
+  --vvd-color-neutral-10: rgb(242,242,242);
+  --vvd-color-neutral-20: rgb(230,230,230);
+  --vvd-color-neutral-30: rgb(204,204,204);
+  --vvd-color-neutral-40: rgb(179,179,179);
+  --vvd-color-neutral-50: rgb(146,146,146);
+  --vvd-color-neutral-70: rgb(102,102,102);
+  --vvd-color-neutral-80: rgb(77,77,77);
+  --vvd-color-neutral-90: rgb(51,51,51);
+  --vvd-color-cta: rgb(153,65,255);
+  --vvd-color-on-cta: rgb(255,255,255);
+  --vvd-color-cta-10: rgb(245,240,253);
+  --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);
+  --vvd-color-success-10: rgb(225,248,229);
+  --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);
+  --vvd-color-alert-10: rgb(255,238,242);
+  --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);
+  --vvd-color-warning-10: rgb(252,245,167);
+  --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);
+  --vvd-color-info-10: rgb(232,244,251);
+  --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);
+  --vvd-color-announcement-10: rgb(255,237,251);
+  --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));
+  --vvd-shadow-surface-4dp: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)) drop-shadow(0 4px 2px rgba(0, 0, 0, 0.05));
+  --vvd-shadow-surface-8dp: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.1)) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.05)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.05));
+  --vvd-shadow-surface-12dp: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.1)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.05)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.05));
+  --vvd-shadow-surface-16dp: drop-shadow(0 6px 32px rgba(0, 0, 0, 0.1)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.05)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.05));
+  --vvd-shadow-surface-24dp: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.2)) drop-shadow(0 24px 32px rgba(0, 0, 0, 0.05)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.05));
+}
+@supports (color-scheme: light) {
+  :root, .vvd-theme-main, ::part(vvd-theme-main) {
+    color-scheme: light;
+  }
+}
+
+.vvd-theme-alternate, ::part(vvd-theme-alternate) {
+  --vvd-sizing-4px-scale-3xs: 8px;
+  --vvd-sizing-4px-scale-2xs: 12px;
+  --vvd-sizing-4px-scale-xs: 16px;
+  --vvd-sizing-4px-scale-sm: 20px;
+  --vvd-sizing-4px-scale-md: 24px;
+  --vvd-sizing-4px-scale-lg: 28px;
+  --vvd-sizing-4px-scale-xl: 32px;
+  --vvd-sizing-4px-scale-2xl: 36px;
+  --vvd-sizing-4px-scale-3xl: 40px;
+  --vvd-sizing-8px-scale-3xs: 8px;
+  --vvd-sizing-8px-scale-2xs: 16px;
+  --vvd-sizing-8px-scale-xs: 24px;
+  --vvd-sizing-8px-scale-sm: 32px;
+  --vvd-sizing-8px-scale-md: 40px;
+  --vvd-sizing-8px-scale-lg: 48px;
+  --vvd-sizing-8px-scale-xl: 56px;
+  --vvd-sizing-8px-scale-2xl: 64px;
+  --vvd-sizing-8px-scale-3xl: 72px;
+  --vvd-color-surface-0dp: rgba(13, 13, 13, 1);
+  --vvd-color-surface-2dp: rgba(28, 28, 28, 1);
+  --vvd-color-surface-4dp: rgba(32, 32, 32, 1);
+  --vvd-color-surface-8dp: rgba(37, 37, 37, 1);
+  --vvd-color-surface-12dp: rgba(42, 42, 42, 1);
+  --vvd-color-surface-16dp: rgba(47, 47, 47, 1);
+  --vvd-color-surface-24dp: rgba(52, 52, 52, 1);
+  --vvd-color-canvas: rgb(13,13,13);
+  --vvd-color-on-canvas: rgb(255,255,255);
+  --vvd-color-primary: rgb(255,255,255);
+  --vvd-color-on-primary: rgb(0,0,0);
+  --vvd-color-neutral: rgb(146,146,146);
+  --vvd-color-on-neutral: rgb(0,0,0);
+  --vvd-color-neutral-10: rgb(26,26,26);
+  --vvd-color-neutral-20: rgb(51,51,51);
+  --vvd-color-neutral-30: rgb(77,77,77);
+  --vvd-color-neutral-40: rgb(102,102,102);
+  --vvd-color-neutral-50: rgb(117,117,117);
+  --vvd-color-neutral-70: rgb(179,179,179);
+  --vvd-color-neutral-80: rgb(204,204,204);
+  --vvd-color-neutral-90: rgb(230,230,230);
+  --vvd-color-cta: rgb(178,123,242);
+  --vvd-color-on-cta: rgb(0,0,0);
+  --vvd-color-cta-10: rgb(38,4,77);
+  --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);
+  --vvd-color-success-10: rgb(10,30,17);
+  --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);
+  --vvd-color-alert-10: rgb(62,0,4);
+  --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);
+  --vvd-color-warning-10: rgb(42,21,2);
+  --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);
+  --vvd-color-info-10: rgb(7,25,57);
+  --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);
+  --vvd-color-announcement-10: rgb(50,8,44);
+  --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));
+  --vvd-shadow-surface-4dp: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
+  --vvd-shadow-surface-8dp: drop-shadow(0 2px 16px rgba(19, 20, 21, 0.25)) drop-shadow(0 8px 8px rgba(19, 20, 21, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
+  --vvd-shadow-surface-12dp: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.25)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.25)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25));
+  --vvd-shadow-surface-16dp: drop-shadow(0 6px 32px rgba(0, 0, 0, 0.25)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
+  --vvd-shadow-surface-24dp: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.25)) drop-shadow(0 24px 32px rgba(0, 0, 0, 0.25)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.25));
+}
+@supports (color-scheme: dark) {
+  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
+    color-scheme: dark;
+  }
+}
+
+/*# sourceMappingURL=light.css.map */

package/text/index.js

@@ -0,0 +1,46 @@
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import '../shared/web.dom-collections.iterator.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/object-set-prototype-of.js';
+
+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}";
+styleInject(css_248z);
+
+class Text extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.tight = false;
+  }
+
+}
+
+__decorate([attr, __metadata("design:type", String)], Text.prototype, "connotation", void 0);
+
+__decorate([attr({
+  attribute: 'font-face'
+}), __metadata("design:type", String)], Text.prototype, "fontFace", void 0);
+
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Text.prototype, "tight", void 0);
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  connotation,
+  fontFace,
+  tight
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`font-face-${fontFace}`, Boolean(fontFace)], ['tight', tight]);
+
+const TextTemplate = () => html(_t || (_t = _`<slot class="${0}"></slot>`), getClasses);
+
+const vividText = Text.compose({
+  baseName: 'text',
+  template: TextTemplate,
+  styles: css_248z
+});
+designSystem.register(vividText());
+
+export { vividText };

package/text-anchor/index.js

@@ -0,0 +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/affix.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-set-prototype-of.js';
+import '../shared/icon.js';
+import '../shared/_has.js';
+import '../shared/anchor.js';
+import '../shared/apply-mixins.js';
+import '../shared/aria-global.js';
+import '../shared/class-names.js';
+
+const vividTextAnchor = TextAnchor.compose({
+  baseName: 'text-anchor',
+  template: textAnchorTemplate
+});
+designSystem.register(vividTextAnchor());
+
+export { vividTextAnchor };

package/tooltip/index.js

@@ -0,0 +1,63 @@
+import '../popup/index.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import '../shared/web.dom-collections.iterator.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../elevation/index.js';
+import '../button/index.js';
+import '../icon/index.js';
+import '../shared/icon.js';
+import '../shared/object-set-prototype-of.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/index2.js';
+import '../shared/affix.js';
+import '../shared/apply-mixins.js';
+import '../shared/aria-global.js';
+import '../shared/es.object.assign.js';
+
+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}";
+styleInject(css_248z);
+
+class Tooltip extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+  }
+
+}
+
+__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "text", void 0);
+
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Tooltip.prototype, "open", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "corner", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "anchor", void 0);
+
+let _2 = t => t,
+    _t;
+
+const getClasses = _ => classNames('control');
+
+const TooltipTemplate = () => html(_t || (_t = _2`
+<vwc-popup class="${0}" arrow alternate="true" 
+corner=${0} open=${0} anchor=${0}
+  exportparts="vvd-theme-alternate">
+  <div class="tooltip">
+    <header part="vvd-theme-alternate" class="tooltip-header">
+      <div class="tooltip-text">${0}</div>
+    </header>
+  </div>
+</vwc-popup>`), getClasses, x => x.corner, x => x.open, x => x.anchor, x => x.text);
+
+const vividTooltip = Tooltip.compose({
+  baseName: 'tooltip',
+  template: TooltipTemplate,
+  styles: css_248z
+});
+designSystem.register(vividTooltip());
+
+export { vividTooltip };