@vonage/vivid 3.34.0 → 3.35.0

package/style.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: inline-block;
@@ -317,7 +317,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   inline-size: inherit;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: contents;
@@ -335,7 +335,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   outline-offset: -2px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .message {
   display: flex;
@@ -360,7 +360,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   color: var(--vvd-color-alert-500);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: contents;
@@ -497,7 +497,7 @@ p {
   font: var(--vvd-typography-base-condensed);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -617,7 +617,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: inline-block;
@@ -701,7 +701,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: inline-block;
@@ -765,7 +765,7 @@ label {
   margin-block: 4px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .control {
   position: fixed;
@@ -922,7 +922,7 @@ label {
   filter: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   align-items: center;
@@ -1045,7 +1045,7 @@ label {
   }
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   display: inline-flex;
@@ -1070,6 +1070,8 @@ label {
   --_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));
   /* @cssprop [--vvd-avatar-cta-pale=var(--vvd-color-cta-300)] */
   --_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));
+  /* @cssprop [--vvd-avatar-cta-soft=var(--vvd-color-cta-100)] */
+  --_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));
 }
 .base:not(.connotation-cta) {
   /* @cssprop [--vvd-avatar-accent-primary=var(--vvd-color-canvas-text)] */
@@ -1082,6 +1084,8 @@ label {
   --_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));
   /* @cssprop [--vvd-avatar-accent-pale=var(--vvd-color-neutral-300)] */
   --_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));
+  /* @cssprop [--vvd-avatar-accent-soft=var(--vvd-color-neutral-100)] */
+  --_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));
 }
 .base {
   --_appearance-color-text: var(--_connotation-color-primary-text);
@@ -1098,6 +1102,11 @@ label {
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: var(--_connotation-color-pale);
 }
+.base.appearance-subtle {
+  --_appearance-color-text: var(--_connotation-color-contrast);
+  --_appearance-color-fill: var(--_connotation-color-soft);
+  --_appearance-color-outline: transparent;
+}
 .base.size-condensed {
   --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));
 }
@@ -1143,7 +1152,7 @@ label {
   object-fit: cover;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));
@@ -1316,7 +1325,7 @@ label {
   order: 1;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .control {
   overflow: hidden;
@@ -1393,7 +1402,7 @@ label {
   margin-inline-end: 8px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   display: flex;
@@ -1433,7 +1442,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: flex;
@@ -1534,7 +1543,7 @@ label {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: block;
@@ -1583,7 +1592,7 @@ header {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .control {
   position: relative;
@@ -1727,7 +1736,7 @@ header {
   --focus-stroke-gap-color: transparent;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   z-index: 1;
@@ -1869,7 +1878,7 @@ header {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .control {
   position: relative;
@@ -1971,7 +1980,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .control {
   position: relative;
@@ -2054,7 +2063,7 @@ details > summary::-webkit-details-marker {
   line-height: 1;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   display: flex;
@@ -2144,7 +2153,7 @@ details > summary::-webkit-details-marker {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .control {
   display: inline-flex;
@@ -2180,7 +2189,7 @@ details > summary::-webkit-details-marker {
   inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   height: 6px;
@@ -2332,7 +2341,7 @@ details > summary::-webkit-details-marker {
   }
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .control {
   position: fixed;
@@ -2379,7 +2388,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: inline-block;
@@ -2683,7 +2692,7 @@ details > summary::-webkit-details-marker {
   --focus-inset: -1px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
@@ -2842,7 +2851,7 @@ details > summary::-webkit-details-marker {
   gap: 8px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .control {
   display: inline-block;
@@ -2867,7 +2876,7 @@ details > summary::-webkit-details-marker {
   margin-block-start: 16px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .control {
   pointer-events: none;
@@ -2882,7 +2891,7 @@ details > summary::-webkit-details-marker {
   font: var(--vvd-typography-base-bold);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3004,7 +3013,7 @@ details > summary::-webkit-details-marker {
   color: var(--vvd-color-neutral-600);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   display: flex;
@@ -3016,7 +3025,7 @@ details > summary::-webkit-details-marker {
   border-bottom: 1px solid var(--vvd-color-neutral-200);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: flex;
@@ -3131,7 +3140,7 @@ button:not(:focus-visible) > .focus-indicator {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: inline-block;
@@ -3447,7 +3456,7 @@ button:not(:focus-visible) > .focus-indicator {
   display: flex;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   position: relative; /* this is needed for the focus */
@@ -3581,7 +3590,7 @@ dialog.fixed {
   transform: translate(0, -50%);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   box-sizing: border-box;
@@ -3722,7 +3731,7 @@ slot[name=main] {
   border-radius: inherit;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   display: flex;
@@ -3773,7 +3782,7 @@ slot[name=main] {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .positioning-region {
   display: flex;
@@ -3792,7 +3801,7 @@ label {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3916,7 +3925,7 @@ label {
   opacity: 0;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   display: grid;
@@ -4033,7 +4042,7 @@ label {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   display: inline-flex;
@@ -4217,7 +4226,7 @@ label {
   margin-inline-end: 4px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: block;
@@ -4236,7 +4245,7 @@ label {
   inline-size: 1px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: block;
@@ -4351,7 +4360,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4508,7 +4517,7 @@ label {
   color: var(--vvd-color-neutral-600);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: inline-block;
@@ -4767,7 +4776,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4948,7 +4957,7 @@ label {
   --_select-control-border-radius: 6px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .control {
   display: inline-flex;
@@ -5119,7 +5128,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   position: relative;
@@ -5183,7 +5192,7 @@ label {
   inline-size: 100%;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: inline-block;
@@ -5494,7 +5503,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .base {
   display: grid;
@@ -5563,7 +5572,7 @@ label {
   background-color: var(--_appearance-color-fill);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   min-inline-size: 80px;
@@ -5656,7 +5665,7 @@ slot {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 ol {
   padding: 0;
@@ -5916,7 +5925,7 @@ ol {
   text-transform: uppercase;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 :host {
   display: inline-block;

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:37 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:37 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:37 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:37 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:37 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:37 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:37 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:37 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, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 06 Sep 2023 09:40:36 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/vivid.api.json

@@ -695,6 +695,15 @@
               "text": "Appearance.Duotone",
               "canonicalReference": "@vonage/vivid!Appearance.Duotone:member"
             },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
+            {
+              "kind": "Reference",
+              "text": "Appearance.Subtle",
+              "canonicalReference": "@vonage/vivid!Appearance.Subtle:member"
+            },
             {
               "kind": "Content",
               "text": ">"
@@ -709,7 +718,7 @@
           "name": "AvatarAppearance",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 11
+            "endIndex": 13
           }
         },
         {