@vonage/vivid 3.0.0-next.3 → 3.0.0-next.30

package/shared/when.js

@@ -0,0 +1,15 @@
+/**
+ * A directive that enables basic conditional rendering in a template.
+ * @param binding - The condition to test for rendering.
+ * @param templateOrTemplateBinding - The template or a binding that gets
+ * the template to render when the condition is true.
+ * @public
+ */
+function when(binding, templateOrTemplateBinding) {
+    const getTemplate = typeof templateOrTemplateBinding === "function"
+        ? templateOrTemplateBinding
+        : () => templateOrTemplateBinding;
+    return (source, context) => binding(source, context) ? getTemplate(source, context) : null;
+}
+
+export { when as w };

package/side-drawer/index.js

@@ -0,0 +1,82 @@
+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 { 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() {
+    super(...arguments);
+    this.alternate = false;
+    this.modal = false;
+    this.open = false;
+  }
+
+}
+
+__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, __metadata("design:type", String)], SideDrawer.prototype, "position", void 0);
+
+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.position-end {\n  inset-inline-end: 0;\n}\n.control:not(.open).position-end {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.position-end) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).position-end + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.position-end) + .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;
+
+const getClasses = ({
+  alternate,
+  modal,
+  open,
+  position
+}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], [`position-${position}`, Boolean(position)]);
+
+const getScrimClasses = ({
+  open
+}) => classNames('scrim', ['open', open]);
+
+const sideDrawerTemplate = () => html(_t || (_t = _`
+	<aside class="${0}" part="base ${0}"
+	 @keydown="${0}">
+    <slot></slot>
+	</aside>
+
+	<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), 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({
+  baseName: 'side-drawer',
+  template: sideDrawerTemplate,
+  styles: css_248z
+});
+designSystem.register(vividSideDrawer());
+
+export { vividSideDrawer };

package/sidenav/index.js

@@ -0,0 +1,17 @@
+import { F as FoundationElement, h as html, d as designSystem } from '../shared/index.js';
+
+class Sidenav extends FoundationElement {}
+
+let _ = t => t,
+    _t;
+const SidenavTemplate = () => html(_t || (_t = _`
+		<nav><slot></slot></nav>
+    `));
+
+const vividSidenav = Sidenav.compose({
+  baseName: 'sidenav',
+  template: SidenavTemplate
+});
+designSystem.register(vividSidenav());
+
+export { vividSidenav };

package/sidenav-item/index.js

@@ -1,78 +1,41 @@
-import '../shared/index.js';
-import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
+import '../icon/index.js';
+import '../focus/index.js';
+import { 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 { a as Prefix, b as prefixTemplate } from '../shared/affix.js';
-import { A as Anchor } from '../shared/anchor.js';
+import { b as AffixIcon } from '../shared/affix.js';
+import { T as TextAnchor } from '../shared/text-anchor.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
-import { c as classNames } from '../shared/class-names.js';
+import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+import '../shared/focus.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-keys.js';
+import '../shared/anchor.js';
 import '../shared/aria-global.js';
+import '../shared/focus2.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}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  gap: 8px;\n  -webkit-hyphens: auto;\n          hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  padding-block: 10px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: 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:not(:focus-visible) .focus-indicator {\n  display: none;\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);
+class SidenavItem extends TextAnchor {}
+applyMixins(SidenavItem, AffixIcon);
 
 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}
+const SidenavItemTemplate = (context, definition) => html(_t || (_t = _`
       ${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);
+    `), textAnchorTemplate(context));
 
 const vividSidenavItem = SidenavItem.compose({
   baseName: 'sidenav-item',
   template: SidenavItemTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+  styles: css_248z
 });
 designSystem.register(vividSidenavItem());
 

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));
@@ -88,9 +94,9 @@
   --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) {
+@supports (color-scheme: dark) {
   :root, .vvd-theme-main, ::part(vvd-theme-main) {
-    color-theme: dark;
+    color-scheme: dark;
   }
 }
 
@@ -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));
@@ -184,9 +196,9 @@
   --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) {
+@supports (color-scheme: light) {
   .vvd-theme-alternate, ::part(vvd-theme-alternate) {
-    color-theme: light;
+    color-scheme: light;
   }
 }
 

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));
@@ -88,9 +94,9 @@
   --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) {
+@supports (color-scheme: light) {
   :root, .vvd-theme-main, ::part(vvd-theme-main) {
-    color-theme: light;
+    color-scheme: light;
   }
 }
 
@@ -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));
@@ -184,9 +196,9 @@
   --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) {
+@supports (color-scheme: dark) {
   .vvd-theme-alternate, ::part(vvd-theme-alternate) {
-    color-theme: dark;
+    color-scheme: dark;
   }
 }
 

package/text/index.js

@@ -0,0 +1,48 @@
+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/export.js';
+import '../shared/object-keys.js';
+import '../shared/iterators.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-color-primary);\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-accent {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.control.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement);\n}\n.control.connotation-info {\n  --_connotation-color-primary: var(--vvd-color-info);\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

@@ -1,21 +1,21 @@
-import { _ as __decorate, a as attr, b as __metadata, d as designSystem } from '../shared/index2.js';
-import '../shared/web.dom-collections.iterator.js';
-import { A as Anchor } from '../shared/anchor.js';
+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/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/focus2.js';
+import '../shared/focus.js';
 import '../shared/class-names.js';
 
-class TextAnchor extends Anchor {
-  constructor() {
-    super(...arguments);
-    this.text = '';
-  }
-
-}
-
-__decorate([attr, __metadata("design:type", Object)], TextAnchor.prototype, "text", void 0);
-
 const vividTextAnchor = TextAnchor.compose({
   baseName: 'text-anchor',
   template: textAnchorTemplate