@vonage/vivid 3.0.0-next.81 → 3.0.0-next.83

package/shared/index4.js

@@ -1,14 +1,7 @@
 import { F as FoundationElement, _ as __decorate, a as attr, h as html, d as designSystem } from './index.js';
+import { O as Orientation } from './aria.js';
 import { c as classNames } from './class-names.js';
 
-/**
- * Standard orientation values
- */
-const Orientation = {
-    horizontal: "horizontal",
-    vertical: "vertical",
-};
-
 /**
  * Divider roles
  * @public
@@ -58,7 +51,7 @@ __decorate([
     attr
 ], Divider$1.prototype, "orientation", void 0);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 24 Oct 2022 13:21:54 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sat, 29 Oct 2022 09:46:17 GMT\n */\n:host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-200);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
 
 class Divider extends Divider$1 {}
 

package/shared/index6.js

@@ -2,31 +2,13 @@ import '../icon/index.js';
 import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, d as designSystem } from './index.js';
 import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
 import { S as StartEnd } from './start-end.js';
+import { D as Direction, g as getDirection } from './direction.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { g as keyArrowLeft, h as keyArrowRight, a as keySpace, k as keyEnter } from './key-codes.js';
 import { f as focusTemplateFactory } from './focus2.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-/**
- * Expose ltr and rtl strings
- */
-var Direction;
-(function (Direction) {
-    Direction["ltr"] = "ltr";
-    Direction["rtl"] = "rtl";
-})(Direction || (Direction = {}));
-
-/**
- * a method to determine the current localization direction of the view
- * @param rootNode - the HTMLElement to begin the query from, usually "this" when used in a component controller
- * @public
- */
-const getDirection = (rootNode) => {
-    const dirNode = rootNode.closest("[dir]");
-    return dirNode !== null && dirNode.dir === "rtl" ? Direction.rtl : Direction.ltr;
-};
-
 /**
  * Menu items roles.
  * @public
@@ -297,7 +279,7 @@ __decorate([
 ], MenuItem$1.prototype, "submenu", void 0);
 applyMixins(MenuItem$1, StartEnd);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 24 Oct 2022 13:21:54 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus) {\n    outline: none;\n  }\n}\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: 40px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-font-base);\n  gap: 8px;\n  inline-size: 100%;\n  padding-inline: 8px;\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base: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: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base: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: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n}\n\n.focus-indicator {\n  border-radius: 6px;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}\n.base:not(.item-checkbox, .item-radio) .icon {\n  color: var(--vvd-color-neutral-600);\n}\n\n.text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sat, 29 Oct 2022 09:46:17 GMT\n */\n@supports selector(:focus-visible) {\n  :host(:focus) {\n    outline: none;\n  }\n}\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: 40px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  font: var(--vvd-typography-base);\n  gap: 8px;\n  inline-size: 100%;\n  padding-inline: 8px;\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base: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: transparent;\n}\n.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.base: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: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  cursor: pointer;\n}\n.base.disabled {\n  cursor: not-allowed;\n}\n\n.focus-indicator {\n  border-radius: 6px;\n}\n:host(:not(:focus-visible)) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}\n.base:not(.item-checkbox, .item-radio) .icon {\n  color: var(--vvd-color-neutral-600);\n}\n\n.text {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}";
 
 class MenuItem extends MenuItem$1 {}
 

package/shared/key-codes.js

@@ -86,5 +86,11 @@ const keyEscape = "Escape";
 const keyHome = "Home";
 const keyEnd = "End";
 const keySpace = " ";
+const ArrowKeys = {
+    ArrowDown: keyArrowDown,
+    ArrowLeft: keyArrowLeft,
+    ArrowRight: keyArrowRight,
+    ArrowUp: keyArrowUp,
+};
 
-export { keySpace as a, keyHome as b, keyEnd as c, keyArrowUp as d, keyArrowDown as e, keyEscape as f, keyArrowLeft as g, keyArrowRight as h, keyEnter as k };
+export { ArrowKeys as A, keySpace as a, keyHome as b, keyEnd as c, keyArrowUp as d, keyArrowDown as e, keyEscape as f, keyArrowLeft as g, keyArrowRight as h, keyEnter as k };

package/shared/patterns/form-elements/form-elements.d.ts

@@ -18,7 +18,7 @@ export declare function formElements<T extends {
         successText?: string | undefined;
         charCount: boolean;
         userValid: boolean;
-        "__#6456@#blurred": boolean;
+        "__#6542@#blurred": boolean;
         readonly errorValidationMessage: any;
         validate: () => void;
     };

package/shared/radio.js

@@ -0,0 +1,128 @@
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata } from './index.js';
+import { C as CheckableFormAssociated } from './form-associated.js';
+import { a as keySpace } from './key-codes.js';
+
+class _Radio extends FoundationElement {
+}
+/**
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Radio:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedRadio extends CheckableFormAssociated(_Radio) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
+
+/**
+ * A Radio Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#radio | ARIA radio }.
+ *
+ * @slot checked-indicator - The checked indicator
+ * @slot - The default slot for the label
+ * @csspart control - The element representing the visual radio control
+ * @csspart label - The label
+ * @fires change - Emits a custom change event when the checked state changes
+ *
+ * @public
+ */
+class Radio$1 extends FormAssociatedRadio {
+    constructor() {
+        super();
+        /**
+         * The element's value to be included in form submission when checked.
+         * Default to "on" to reach parity with input[type="radio"]
+         *
+         * @internal
+         */
+        this.initialValue = "on";
+        /**
+         * @internal
+         */
+        this.keypressHandler = (e) => {
+            switch (e.key) {
+                case keySpace:
+                    if (!this.checked && !this.readOnly) {
+                        this.checked = true;
+                    }
+                    return;
+            }
+            return true;
+        };
+        this.proxy.setAttribute("type", "radio");
+    }
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.readOnly = this.readOnly;
+        }
+    }
+    /**
+     * @internal
+     */
+    defaultCheckedChanged() {
+        var _a;
+        if (this.$fastController.isConnected && !this.dirtyChecked) {
+            // Setting this.checked will cause us to enter a dirty state,
+            // but if we are clean when defaultChecked is changed, we want to stay
+            // in a clean state, so reset this.dirtyChecked
+            if (!this.isInsideRadioGroup()) {
+                this.checked = (_a = this.defaultChecked) !== null && _a !== void 0 ? _a : false;
+                this.dirtyChecked = false;
+            }
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        var _a, _b;
+        super.connectedCallback();
+        this.validate();
+        if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("role")) !== "radiogroup" &&
+            this.getAttribute("tabindex") === null) {
+            if (!this.disabled) {
+                this.setAttribute("tabindex", "0");
+            }
+        }
+        if (this.checkedAttribute) {
+            if (!this.dirtyChecked) {
+                // Setting this.checked will cause us to enter a dirty state,
+                // but if we are clean when defaultChecked is changed, we want to stay
+                // in a clean state, so reset this.dirtyChecked
+                if (!this.isInsideRadioGroup()) {
+                    this.checked = (_b = this.defaultChecked) !== null && _b !== void 0 ? _b : false;
+                    this.dirtyChecked = false;
+                }
+            }
+        }
+    }
+    isInsideRadioGroup() {
+        const parent = this.closest("[role=radiogroup]");
+        return parent !== null;
+    }
+    /**
+     * @internal
+     */
+    clickHandler(e) {
+        if (!this.disabled && !this.readOnly && !this.checked) {
+            this.checked = true;
+        }
+    }
+}
+__decorate([
+    attr({ attribute: "readonly", mode: "boolean" })
+], Radio$1.prototype, "readOnly", void 0);
+__decorate([
+    observable
+], Radio$1.prototype, "name", void 0);
+__decorate([
+    observable
+], Radio$1.prototype, "defaultSlottedNodes", void 0);
+
+class Radio extends Radio$1 {}
+
+__decorate([attr, __metadata("design:type", String)], Radio.prototype, "label", void 0);
+
+export { Radio as R };

package/side-drawer/index.js

@@ -53,7 +53,7 @@ __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 24 Oct 2022 13:21:54 GMT\n */\n.control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-canvas-text);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Sat, 29 Oct 2022 09:46:17 GMT\n */\n.control {\n  position: fixed;\n  z-index: 1;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-canvas-text);\n  opacity: 0.5;\n  position: fixed;\n  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
 
 let _ = t => t,
     _t,

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Oct 2022 13:21:54 GMT
+ * Generated on Sat, 29 Oct 2022 09:46:17 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);
@@ -13,50 +13,50 @@
   text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
   -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
   -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
-  font: var(--vvd-font-base);
+  font: var(--vvd-typography-base);
 }
 .vvd-root p {
-  font: var(--vvd-font-base);
+  font: var(--vvd-typography-base);
   margin-block: 16px;
 }
 .vvd-root b, .vvd-root strong {
-  font: var(--vvd-font-base-bold);
+  font: var(--vvd-typography-base-bold);
 }
 .vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {
-  font: var(--vvd-font-base-code);
+  font: var(--vvd-typography-base-code);
 }
 .vvd-root .headline {
-  font: var(--vvd-font-headline);
+  font: var(--vvd-typography-headline);
   margin-block: 40px;
 }
 .vvd-root .subtitle {
-  font: var(--vvd-font-subtitle);
+  font: var(--vvd-typography-subtitle);
   margin-block: 40px;
 }
 .vvd-root h1, .vvd-root .heading1 {
-  font: var(--vvd-font-heading1);
+  font: var(--vvd-typography-heading-1);
   margin-block: 32px;
 }
 .vvd-root h2, .vvd-root .heading2 {
-  font: var(--vvd-font-heading2);
+  font: var(--vvd-typography-heading-2);
   margin-block: 32px;
 }
 .vvd-root h3, .vvd-root .heading3 {
-  font: var(--vvd-font-heading3);
+  font: var(--vvd-typography-heading-3);
   margin-block: 24px;
 }
 .vvd-root h4, .vvd-root .heading4 {
-  font: var(--vvd-font-heading4);
+  font: var(--vvd-typography-heading-4);
   margin-block: 24px;
 }
 .vvd-root small, .vvd-root figcaption {
-  font: var(--vvd-font-base-condensed);
+  font: var(--vvd-typography-base-condensed);
 }
 .vvd-root small b, .vvd-root small strong, .vvd-root figcaption b, .vvd-root figcaption strong {
-  font: var(--vvd-font-base-condensed-bold);
+  font: var(--vvd-typography-base-condensed-bold);
 }
 .vvd-root small pre, .vvd-root small var, .vvd-root small code, .vvd-root small kbd, .vvd-root small samp, .vvd-root figcaption pre, .vvd-root figcaption var, .vvd-root figcaption code, .vvd-root figcaption kbd, .vvd-root figcaption samp {
-  font: var(--vvd-font-base-condensed-code);
+  font: var(--vvd-typography-base-condensed-code);
 }
 .vvd-root sub,
 .vvd-root sup {

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Oct 2022 13:21:54 GMT
+ * Generated on Sat, 29 Oct 2022 09:46:17 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,56 +1,56 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Oct 2022 13:21:54 GMT
+ * Generated on Sat, 29 Oct 2022 09:46:17 GMT
  */
 .vvd-root {
   font-feature-settings: "kern"; /* turns on kerning */
   text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
   -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */
   -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */
-  font: var(--vvd-font-base);
+  font: var(--vvd-typography-base);
 }
 .vvd-root p {
-  font: var(--vvd-font-base);
+  font: var(--vvd-typography-base);
   margin-block: 16px;
 }
 .vvd-root b, .vvd-root strong {
-  font: var(--vvd-font-base-bold);
+  font: var(--vvd-typography-base-bold);
 }
 .vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {
-  font: var(--vvd-font-base-code);
+  font: var(--vvd-typography-base-code);
 }
 .vvd-root .headline {
-  font: var(--vvd-font-headline);
+  font: var(--vvd-typography-headline);
   margin-block: 40px;
 }
 .vvd-root .subtitle {
-  font: var(--vvd-font-subtitle);
+  font: var(--vvd-typography-subtitle);
   margin-block: 40px;
 }
 .vvd-root h1, .vvd-root .heading1 {
-  font: var(--vvd-font-heading1);
+  font: var(--vvd-typography-heading-1);
   margin-block: 32px;
 }
 .vvd-root h2, .vvd-root .heading2 {
-  font: var(--vvd-font-heading2);
+  font: var(--vvd-typography-heading-2);
   margin-block: 32px;
 }
 .vvd-root h3, .vvd-root .heading3 {
-  font: var(--vvd-font-heading3);
+  font: var(--vvd-typography-heading-3);
   margin-block: 24px;
 }
 .vvd-root h4, .vvd-root .heading4 {
-  font: var(--vvd-font-heading4);
+  font: var(--vvd-typography-heading-4);
   margin-block: 24px;
 }
 .vvd-root small, .vvd-root figcaption {
-  font: var(--vvd-font-base-condensed);
+  font: var(--vvd-typography-base-condensed);
 }
 .vvd-root small b, .vvd-root small strong, .vvd-root figcaption b, .vvd-root figcaption strong {
-  font: var(--vvd-font-base-condensed-bold);
+  font: var(--vvd-typography-base-condensed-bold);
 }
 .vvd-root small pre, .vvd-root small var, .vvd-root small code, .vvd-root small kbd, .vvd-root small samp, .vvd-root figcaption pre, .vvd-root figcaption var, .vvd-root figcaption code, .vvd-root figcaption kbd, .vvd-root figcaption samp {
-  font: var(--vvd-font-base-condensed-code);
+  font: var(--vvd-typography-base-condensed-code);
 }
 .vvd-root sub,
 .vvd-root sup {

package/styles/tokens/theme-dark.css

@@ -1,14 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Oct 2022 13:21:54 GMT
+ * Generated on Sat, 29 Oct 2022 09:46:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 24 Oct 2022 13:21:54 GMT
+ * Generated on Sat, 29 Oct 2022 09:46:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 24 Oct 2022 13:21:54 GMT
+ * Generated on Sat, 29 Oct 2022 09:46:17 GMT
+ */
+/**
+ * Do not edit directly
+ * Generated on Sat, 29 Oct 2022 09:46:17 GMT
  */
 .vvd-root, ::part(vvd-root) {
   --vvd-color-scheme: dark;
@@ -99,21 +103,24 @@
   --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);
   --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);
   --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);
-  --vvd-font-headline: 500 condensed calc(16px * 4.125)/calc(16px * 5.5) SpeziaCompleteVariableUpright;
-  --vvd-font-subtitle: 500 condensed calc(16px * 3.25)/calc(16px * 4.25) SpeziaCompleteVariableUpright;
-  --vvd-font-heading1: 500 condensed calc(16px * 2.5)/calc(16px * 3.25) SpeziaCompleteVariableUpright;
-  --vvd-font-heading2: 500 condensed calc(16px * 2)/calc(16px * 2.75) SpeziaCompleteVariableUpright;
-  --vvd-font-heading3: 500 condensed calc(16px * 1.625)/calc(16px * 2.25) SpeziaCompleteVariableUpright;
-  --vvd-font-heading4: 500 condensed calc(16px * 1.25)/calc(16px * 1.75) SpeziaCompleteVariableUpright;
-  --vvd-font-base: 400 ultra-condensed calc(16px * 0.875)/calc(16px * 1.25) SpeziaCompleteVariableUpright;
-  --vvd-font-base-bold: 600 ultra-condensed calc(16px * 0.875)/calc(16px * 1.25) SpeziaCompleteVariableUpright;
-  --vvd-font-base-code: 400 ultra-condensed calc(16px * 0.875)/calc(16px * 1.25) SpeziaMonoCompleteVariable;
-  --vvd-font-base-extended: 400 ultra-condensed calc(16px * 1)/calc(16px * 1.5) SpeziaCompleteVariableUpright;
-  --vvd-font-base-extended-bold: 600 ultra-condensed calc(16px * 1)/calc(16px * 1.5) SpeziaCompleteVariableUpright;
-  --vvd-font-base-extended-code: 400 ultra-condensed calc(16px * 1)/calc(16px * 1.5) SpeziaMonoCompleteVariable;
-  --vvd-font-base-condensed: 400 ultra-condensed calc(16px * 0.75)/calc(16px * 1) SpeziaCompleteVariableUpright;
-  --vvd-font-base-condensed-bold: 600 ultra-condensed calc(16px * 0.75)/calc(16px * 1) SpeziaCompleteVariableUpright;
-  --vvd-font-base-condensed-code: 400 ultra-condensed calc(16px * 0.75)/calc(16px * 1) SpeziaMonoCompleteVariable;
+  --vvd-font-family-upright: SpeziaCompleteVariableUpright;
+  --vvd-font-family-monospace: SpeziaMonoCompleteVariable;
+  --vvd-size-font-scale-base: 16px;
+  --vvd-typography-headline: 500 condensed calc(var(--vvd-size-font-scale-base) * 4.125)/1.3333333333333333 var(--vvd-font-family-upright);
+  --vvd-typography-subtitle: 500 condensed calc(var(--vvd-size-font-scale-base) * 3.25)/1.3076923076923077 var(--vvd-font-family-upright);
+  --vvd-typography-heading-1: 500 condensed calc(var(--vvd-size-font-scale-base) * 2.5)/1.3 var(--vvd-font-family-upright);
+  --vvd-typography-heading-2: 500 condensed calc(var(--vvd-size-font-scale-base) * 2)/1.375 var(--vvd-font-family-upright);
+  --vvd-typography-heading-3: 500 condensed calc(var(--vvd-size-font-scale-base) * 1.625)/1.3846153846153846 var(--vvd-font-family-upright);
+  --vvd-typography-heading-4: 500 condensed calc(var(--vvd-size-font-scale-base) * 1.25)/1.4 var(--vvd-font-family-upright);
+  --vvd-typography-base: 400 ultra-condensed calc(var(--vvd-size-font-scale-base) * 0.875)/1.4285714285714286 var(--vvd-font-family-upright);
+  --vvd-typography-base-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base) * 0.875)/1.4285714285714286 var(--vvd-font-family-upright);
+  --vvd-typography-base-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base) * 0.875)/1.4285714285714286 var(--vvd-font-family-monospace);
+  --vvd-typography-base-condensed: 400 ultra-condensed calc(var(--vvd-size-font-scale-base) * 0.75)/1.3333333333333333 var(--vvd-font-family-upright);
+  --vvd-typography-base-condensed-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base) * 0.75)/1.3333333333333333 var(--vvd-font-family-upright);
+  --vvd-typography-base-condensed-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base) * 0.75)/1.3333333333333333 var(--vvd-font-family-monospace);
+  --vvd-typography-base-extended: 400 ultra-condensed calc(var(--vvd-size-font-scale-base))/1.5 var(--vvd-font-family-upright);
+  --vvd-typography-base-extended-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base))/1.5 var(--vvd-font-family-upright);
+  --vvd-typography-base-extended-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base))/1.5 var(--vvd-font-family-monospace);
   --vvd-size-base: 40px;
 }
 
@@ -142,6 +149,7 @@
   --vvd-color-cta-700: #6405d1;
   --vvd-color-cta-800: #440291;
   --vvd-color-cta-900: #26044d;
+  --vvd-color-cta-950: #140623;
   --vvd-color-warning-50: #FDF5D4;
   --vvd-color-warning-100: #FDEAA0;
   --vvd-color-warning-200: #FACC4B;
@@ -152,6 +160,7 @@
   --vvd-color-warning-700: #893000;
   --vvd-color-warning-800: #522801;
   --vvd-color-warning-900: #2A1502;
+  --vvd-color-warning-950: #150B01;
   --vvd-color-information-50: #e8f4fb;
   --vvd-color-information-100: #d3e9fc;
   --vvd-color-information-200: #9dd2fe;
@@ -162,6 +171,7 @@
   --vvd-color-information-700: #094a9e;
   --vvd-color-information-800: #0e306d;
   --vvd-color-information-900: #071939;
+  --vvd-color-information-950: #040d1d;
   --vvd-color-announcement-50: #ffedfb;
   --vvd-color-announcement-100: #ffdcf7;
   --vvd-color-announcement-200: #f8b9e7;
@@ -172,16 +182,7 @@
   --vvd-color-announcement-700: #8f1669;
   --vvd-color-announcement-800: #620256;
   --vvd-color-announcement-900: #32082c;
-  --vvd-color-alert-50: #ffeef2;
-  --vvd-color-alert-100: #fedfdf;
-  --vvd-color-alert-200: #ffbbbb;
-  --vvd-color-alert-300: #fe9696;
-  --vvd-color-alert-400: #f75959;
-  --vvd-color-alert-500: #e61d1d;
-  --vvd-color-alert-600: #cd0d0d;
-  --vvd-color-alert-700: #9f0202;
-  --vvd-color-alert-800: #6e0000;
-  --vvd-color-alert-900: #3e0004;
+  --vvd-color-announcement-950: #1d031a;
   --vvd-color-success-50: #e1f8e5;
   --vvd-color-success-100: #cfeed4;
   --vvd-color-success-200: #86e090;
@@ -192,6 +193,18 @@
   --vvd-color-success-700: #155923;
   --vvd-color-success-800: #183a1e;
   --vvd-color-success-900: #0a1e11;
+  --vvd-color-success-950: #060f09;
+  --vvd-color-alert-50: #ffeef2;
+  --vvd-color-alert-100: #fedfdf;
+  --vvd-color-alert-200: #ffbbbb;
+  --vvd-color-alert-300: #fe9696;
+  --vvd-color-alert-400: #f75959;
+  --vvd-color-alert-500: #e61d1d;
+  --vvd-color-alert-600: #cd0d0d;
+  --vvd-color-alert-700: #9f0202;
+  --vvd-color-alert-800: #6e0000;
+  --vvd-color-alert-900: #3e0004;
+  --vvd-color-alert-950: #250004;
   --vvd-color-surface-0dp: #ffffff;
   --vvd-color-surface-2dp: #ffffff;
   --vvd-color-surface-4dp: #ffffff;

package/styles/tokens/theme-light.css

@@ -1,14 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 24 Oct 2022 13:21:54 GMT
+ * Generated on Sat, 29 Oct 2022 09:46:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 24 Oct 2022 13:21:54 GMT
+ * Generated on Sat, 29 Oct 2022 09:46:17 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 24 Oct 2022 13:21:54 GMT
+ * Generated on Sat, 29 Oct 2022 09:46:17 GMT
+ */
+/**
+ * Do not edit directly
+ * Generated on Sat, 29 Oct 2022 09:46:17 GMT
  */
 .vvd-root, ::part(vvd-root) {
   --vvd-color-scheme: light;
@@ -35,6 +39,7 @@
   --vvd-color-cta-700: #6405d1;
   --vvd-color-cta-800: #440291;
   --vvd-color-cta-900: #26044d;
+  --vvd-color-cta-950: #140623;
   --vvd-color-warning-50: #FDF5D4;
   --vvd-color-warning-100: #FDEAA0;
   --vvd-color-warning-200: #FACC4B;
@@ -45,6 +50,7 @@
   --vvd-color-warning-700: #893000;
   --vvd-color-warning-800: #522801;
   --vvd-color-warning-900: #2A1502;
+  --vvd-color-warning-950: #150B01;
   --vvd-color-information-50: #e8f4fb;
   --vvd-color-information-100: #d3e9fc;
   --vvd-color-information-200: #9dd2fe;
@@ -55,6 +61,7 @@
   --vvd-color-information-700: #094a9e;
   --vvd-color-information-800: #0e306d;
   --vvd-color-information-900: #071939;
+  --vvd-color-information-950: #040d1d;
   --vvd-color-announcement-50: #ffedfb;
   --vvd-color-announcement-100: #ffdcf7;
   --vvd-color-announcement-200: #f8b9e7;
@@ -65,16 +72,7 @@
   --vvd-color-announcement-700: #8f1669;
   --vvd-color-announcement-800: #620256;
   --vvd-color-announcement-900: #32082c;
-  --vvd-color-alert-50: #ffeef2;
-  --vvd-color-alert-100: #fedfdf;
-  --vvd-color-alert-200: #ffbbbb;
-  --vvd-color-alert-300: #fe9696;
-  --vvd-color-alert-400: #f75959;
-  --vvd-color-alert-500: #e61d1d;
-  --vvd-color-alert-600: #cd0d0d;
-  --vvd-color-alert-700: #9f0202;
-  --vvd-color-alert-800: #6e0000;
-  --vvd-color-alert-900: #3e0004;
+  --vvd-color-announcement-950: #1d031a;
   --vvd-color-success-50: #e1f8e5;
   --vvd-color-success-100: #cfeed4;
   --vvd-color-success-200: #86e090;
@@ -85,6 +83,18 @@
   --vvd-color-success-700: #155923;
   --vvd-color-success-800: #183a1e;
   --vvd-color-success-900: #0a1e11;
+  --vvd-color-success-950: #060f09;
+  --vvd-color-alert-50: #ffeef2;
+  --vvd-color-alert-100: #fedfdf;
+  --vvd-color-alert-200: #ffbbbb;
+  --vvd-color-alert-300: #fe9696;
+  --vvd-color-alert-400: #f75959;
+  --vvd-color-alert-500: #e61d1d;
+  --vvd-color-alert-600: #cd0d0d;
+  --vvd-color-alert-700: #9f0202;
+  --vvd-color-alert-800: #6e0000;
+  --vvd-color-alert-900: #3e0004;
+  --vvd-color-alert-950: #250004;
   --vvd-color-surface-0dp: #ffffff;
   --vvd-color-surface-2dp: #ffffff;
   --vvd-color-surface-4dp: #ffffff;
@@ -99,21 +109,24 @@
   --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);
   --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);
   --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);
-  --vvd-font-headline: 500 condensed calc(16px * 4.125)/calc(16px * 5.5) SpeziaCompleteVariableUpright;
-  --vvd-font-subtitle: 500 condensed calc(16px * 3.25)/calc(16px * 4.25) SpeziaCompleteVariableUpright;
-  --vvd-font-heading1: 500 condensed calc(16px * 2.5)/calc(16px * 3.25) SpeziaCompleteVariableUpright;
-  --vvd-font-heading2: 500 condensed calc(16px * 2)/calc(16px * 2.75) SpeziaCompleteVariableUpright;
-  --vvd-font-heading3: 500 condensed calc(16px * 1.625)/calc(16px * 2.25) SpeziaCompleteVariableUpright;
-  --vvd-font-heading4: 500 condensed calc(16px * 1.25)/calc(16px * 1.75) SpeziaCompleteVariableUpright;
-  --vvd-font-base: 400 ultra-condensed calc(16px * 0.875)/calc(16px * 1.25) SpeziaCompleteVariableUpright;
-  --vvd-font-base-bold: 600 ultra-condensed calc(16px * 0.875)/calc(16px * 1.25) SpeziaCompleteVariableUpright;
-  --vvd-font-base-code: 400 ultra-condensed calc(16px * 0.875)/calc(16px * 1.25) SpeziaMonoCompleteVariable;
-  --vvd-font-base-extended: 400 ultra-condensed calc(16px * 1)/calc(16px * 1.5) SpeziaCompleteVariableUpright;
-  --vvd-font-base-extended-bold: 600 ultra-condensed calc(16px * 1)/calc(16px * 1.5) SpeziaCompleteVariableUpright;
-  --vvd-font-base-extended-code: 400 ultra-condensed calc(16px * 1)/calc(16px * 1.5) SpeziaMonoCompleteVariable;
-  --vvd-font-base-condensed: 400 ultra-condensed calc(16px * 0.75)/calc(16px * 1) SpeziaCompleteVariableUpright;
-  --vvd-font-base-condensed-bold: 600 ultra-condensed calc(16px * 0.75)/calc(16px * 1) SpeziaCompleteVariableUpright;
-  --vvd-font-base-condensed-code: 400 ultra-condensed calc(16px * 0.75)/calc(16px * 1) SpeziaMonoCompleteVariable;
+  --vvd-font-family-upright: SpeziaCompleteVariableUpright;
+  --vvd-font-family-monospace: SpeziaMonoCompleteVariable;
+  --vvd-size-font-scale-base: 16px;
+  --vvd-typography-headline: 500 condensed calc(var(--vvd-size-font-scale-base) * 4.125)/1.3333333333333333 var(--vvd-font-family-upright);
+  --vvd-typography-subtitle: 500 condensed calc(var(--vvd-size-font-scale-base) * 3.25)/1.3076923076923077 var(--vvd-font-family-upright);
+  --vvd-typography-heading-1: 500 condensed calc(var(--vvd-size-font-scale-base) * 2.5)/1.3 var(--vvd-font-family-upright);
+  --vvd-typography-heading-2: 500 condensed calc(var(--vvd-size-font-scale-base) * 2)/1.375 var(--vvd-font-family-upright);
+  --vvd-typography-heading-3: 500 condensed calc(var(--vvd-size-font-scale-base) * 1.625)/1.3846153846153846 var(--vvd-font-family-upright);
+  --vvd-typography-heading-4: 500 condensed calc(var(--vvd-size-font-scale-base) * 1.25)/1.4 var(--vvd-font-family-upright);
+  --vvd-typography-base: 400 ultra-condensed calc(var(--vvd-size-font-scale-base) * 0.875)/1.4285714285714286 var(--vvd-font-family-upright);
+  --vvd-typography-base-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base) * 0.875)/1.4285714285714286 var(--vvd-font-family-upright);
+  --vvd-typography-base-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base) * 0.875)/1.4285714285714286 var(--vvd-font-family-monospace);
+  --vvd-typography-base-condensed: 400 ultra-condensed calc(var(--vvd-size-font-scale-base) * 0.75)/1.3333333333333333 var(--vvd-font-family-upright);
+  --vvd-typography-base-condensed-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base) * 0.75)/1.3333333333333333 var(--vvd-font-family-upright);
+  --vvd-typography-base-condensed-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base) * 0.75)/1.3333333333333333 var(--vvd-font-family-monospace);
+  --vvd-typography-base-extended: 400 ultra-condensed calc(var(--vvd-size-font-scale-base))/1.5 var(--vvd-font-family-upright);
+  --vvd-typography-base-extended-bold: 600 ultra-condensed calc(var(--vvd-size-font-scale-base))/1.5 var(--vvd-font-family-upright);
+  --vvd-typography-base-extended-code: 400 ultra-condensed calc(var(--vvd-size-font-scale-base))/1.5 var(--vvd-font-family-monospace);
   --vvd-size-base: 40px;
 }