@vonage/vivid 4.25.0 → 4.27.0

package/shared/vivid-element.js

@@ -2539,6 +2539,7 @@ const createRegisterFunction = (definition) => (prefix = "vwc") => {
   const registerComponent = (componentDefinition) => {
     const tag = prefixed(componentDefinition.name);
     let type = componentDefinition.type;
+    type.componentName = componentDefinition.name;
     if (registeredTags.has(tag)) {
       return;
     } else if (tagByType.has(type) && tagByType.get(type) !== tag) {
@@ -2731,7 +2732,16 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.25.0";
+    this.VIVID_VERSION = "4.27.0";
+  }
+  /**
+   * Add data-vvd-component attribute with component name globally,
+   * for referring to the elements in CSS, testing or debugging
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    const name = this.constructor.componentName;
+    this.setAttribute("data-vvd-component", name);
   }
 }
 

package/styles/core/all.css

@@ -1,11 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:08 GMT
  */
 .vvd-root {
-  color-scheme: var(--vvd-color-scheme);
   background-color: var(--vvd-color-canvas);
   color: var(--vvd-color-canvas-text);
+  color-scheme: var(--vvd-color-scheme);
 }
 
 .vvd-scrollbar {
@@ -74,16 +74,16 @@
 .vvd-root:root > body {
   font: var(--vvd-typography-base);
   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 */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
 }
 .vvd-root:not(:root) {
   font: var(--vvd-typography-base);
   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 */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
 }
 .vvd-root p,
 .vvd-root .font-base {
@@ -185,10 +185,10 @@
 }
 .vvd-root sub,
 .vvd-root sup {
+  position: relative;
   font: var(--vvd-typography-base-condensed);
   font-size: 75%;
   line-height: 0;
-  position: relative;
   vertical-align: baseline;
 }
 .vvd-root sub {

package/styles/core/theme.css

@@ -1,11 +1,11 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:08 GMT
  */
 .vvd-root {
-  color-scheme: var(--vvd-color-scheme);
   background-color: var(--vvd-color-canvas);
   color: var(--vvd-color-canvas-text);
+  color-scheme: var(--vvd-color-scheme);
 }
 
 .vvd-scrollbar {

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:08 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;
@@ -9,16 +9,16 @@
 .vvd-root:root > body {
   font: var(--vvd-typography-base);
   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 */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
 }
 .vvd-root:not(:root) {
   font: var(--vvd-typography-base);
   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 */
+  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */
 }
 .vvd-root p,
 .vvd-root .font-base {
@@ -120,10 +120,10 @@
 }
 .vvd-root sub,
 .vvd-root sup {
+  position: relative;
   font: var(--vvd-typography-base-condensed);
   font-size: 75%;
   line-height: 0;
-  position: relative;
   vertical-align: baseline;
 }
 .vvd-root sub {

package/styles/fonts/spezia-variable.css

@@ -1,55 +1,55 @@
 @font-face {
+  font-display: block;
   font-family: SpeziaCompleteVariableUpright;
   font-stretch: 50% 200%;
   font-weight: 1 1000;
-  font-display: block;
   src: url("https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2") format("woff2");
 }
 @font-face {
+  font-display: block;
   font-family: SpeziaMonoCompleteVariable;
   font-stretch: 50% 200%;
   font-weight: 1 1000;
-  font-display: block;
   src: url("https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2") format("woff2");
 }
 .vvd-root {
   --vvd-typography-headline: 500 condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-subtitle: 500 condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-heading-1: 500 condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 2.5) / 1.3
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-heading-2: 500 condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 2) / 1.375
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-heading-3: 500 condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 1.625) / 1.3846153846153846
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-heading-4: 500 condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 1.25) / 1.4
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-base: 400 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-base-bold: 600 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-base-code: 400 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
-  	SpeziaMonoCompleteVariable;
+  	speziamonocompletevariable;
   --vvd-typography-base-condensed: 400 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-base-condensed-bold: 600 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-base-extended: 400 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px)) / 1.5
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
   --vvd-typography-base-extended-bold: 600 ultra-condensed
   	calc(var(--vvd-size-font-scale-base, 16px)) / 1.5
-  	SpeziaCompleteVariableUpright;
+  	speziacompletevariableupright;
 }

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:08 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:08 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:08 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:08 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:08 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:08 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:08 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:08 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Thu, 26 Jun 2025 11:10:08 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {