@vonage/vivid 2.25.9 → 3.0.0-next.2

package/sidenav-item/index.js

@@ -0,0 +1,79 @@
+import '../shared/index.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+import '../shared/web.dom-collections.iterator.js';
+import { a as Prefix, b as prefixTemplate } from '../shared/affix.js';
+import { A as Anchor } from '../shared/anchor.js';
+import { a as applyMixins } from '../shared/apply-mixins.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/aria-global.js';
+
+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}";
+styleInject(css_248z);
+
+class SidenavItem extends Anchor {
+  constructor() {
+    super(...arguments);
+    this.text = '';
+  }
+
+}
+
+__decorate([attr, __metadata("design:type", Object)], SidenavItem.prototype, "text", void 0);
+
+applyMixins(SidenavItem, Prefix);
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  text,
+  icon
+}) => classNames('control', ['icon-only', !text && !!icon]);
+
+const SidenavItemTemplate = context => html(_t || (_t = _`<a
+        class="${0}"
+        download="${0}"
+        href="${0}"
+        hreflang="${0}"
+        ping="${0}"
+        referrerpolicy="${0}"
+        rel="${0}"
+        target="${0}"
+        type="${0}"
+        aria-atomic="${0}"
+        aria-busy="${0}"
+        aria-controls="${0}"
+        aria-current="${0}"
+        aria-describedBy="${0}"
+        aria-details="${0}"
+        aria-disabled="${0}"
+        aria-errormessage="${0}"
+        aria-expanded="${0}"
+        aria-flowto="${0}"
+        aria-haspopup="${0}"
+        aria-hidden="${0}"
+        aria-invalid="${0}"
+        aria-keyshortcuts="${0}"
+        aria-label="${0}"
+        aria-labelledby="${0}"
+        aria-live="${0}"
+        aria-owns="${0}"
+        aria-relevant="${0}"
+        aria-roledescription="${0}"
+    >
+      ${0}
+      ${0}
+    </a>`), getClasses, x => x.download, x => x.href, x => x.hreflang, x => x.ping, x => x.referrerpolicy, x => x.rel, x => x.target, x => x.type, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, () => prefixTemplate(context), x => x.text);
+
+const vividSidenavItem = SidenavItem.compose({
+  baseName: 'sidenav-item',
+  template: SidenavItemTemplate,
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+designSystem.register(vividSidenavItem());
+
+export { vividSidenavItem };

package/styles/fonts/spezia.css

@@ -0,0 +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");
+}
+@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");
+}
+
+/*# sourceMappingURL=spezia.css.map */

package/styles/themes/dark.css

@@ -0,0 +1,193 @@
+: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-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-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-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-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-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-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-theme: dark) {
+  :root, .vvd-theme-main, ::part(vvd-theme-main) {
+    color-theme: 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-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-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-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-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-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-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-theme: light) {
+  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
+    color-theme: light;
+  }
+}
+
+/*# sourceMappingURL=dark.css.map */

package/styles/themes/light.css

@@ -0,0 +1,193 @@
+: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-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-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-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-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-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-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-theme: light) {
+  :root, .vvd-theme-main, ::part(vvd-theme-main) {
+    color-theme: 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-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-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-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-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-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-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-theme: dark) {
+  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
+    color-theme: dark;
+  }
+}
+
+/*# sourceMappingURL=light.css.map */

package/text-anchor/index.js

@@ -0,0 +1,15 @@
+import { d as designSystem } from '../shared/index2.js';
+import { T as TextAnchor, t as textAnchorTemplate } from '../shared/text-anchor.template.js';
+import '../shared/web.dom-collections.iterator.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 };