@vonage/vivid 3.36.0 → 3.37.0

package/style.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -317,7 +317,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   inline-size: inherit;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: contents;
@@ -335,7 +335,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   outline-offset: -2px;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 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 Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: contents;
@@ -497,7 +497,7 @@ p {
   font: var(--vvd-typography-base-condensed);
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: flex;
@@ -548,7 +548,7 @@ p {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -668,7 +668,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -752,7 +752,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -816,7 +816,7 @@ label {
   margin-block: 4px;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   position: fixed;
@@ -973,7 +973,7 @@ label {
   filter: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   align-items: center;
@@ -1096,7 +1096,7 @@ label {
   }
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: inline-flex;
@@ -1203,7 +1203,7 @@ label {
   object-fit: cover;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));
@@ -1366,17 +1366,17 @@ label {
 }
 
 /* Icon */
-.icon {
-  display: flex;
+slot[name=icon] {
   flex-shrink: 0;
   font-size: calc(var(--_badge-block-size) / 1.6667);
   line-height: 1;
 }
-.icon-trailing .icon {
+.icon-trailing slot[name=icon] {
+  display: flex;
   order: 1;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   overflow: hidden;
@@ -1440,7 +1440,7 @@ label {
   inline-size: 100%;
   padding-inline: 16px;
 }
-.header .content .icon {
+.header .content slot[name=icon] {
   flex-shrink: 0;
   font-size: 20px;
   line-height: 1;
@@ -1453,7 +1453,7 @@ label {
   margin-inline-end: 8px;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: flex;
@@ -1493,7 +1493,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: flex;
@@ -1594,7 +1594,7 @@ label {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: block;
@@ -1643,7 +1643,7 @@ header {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   position: relative;
@@ -1767,16 +1767,17 @@ header {
 }
 
 /* Icon */
-.icon {
+slot[name=icon] {
   line-height: 1;
 }
-.icon-trailing .icon {
+.icon-trailing slot[name=icon] {
+  display: inline-block;
   order: 1;
 }
-.control.size-extended .icon {
+.control.size-extended slot[name=icon] {
   font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16)) / 2.3333);
 }
-.control:not(.size-extended) .icon {
+.control:not(.size-extended) slot[name=icon] {
   font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);
 }
 
@@ -1787,7 +1788,7 @@ header {
   --focus-stroke-gap-color: transparent;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   z-index: 1;
@@ -1929,7 +1930,7 @@ header {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   position: relative;
@@ -2031,7 +2032,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   position: relative;
@@ -2114,7 +2115,7 @@ details > summary::-webkit-details-marker {
   line-height: 1;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: flex;
@@ -2204,7 +2205,7 @@ details > summary::-webkit-details-marker {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   display: inline-flex;
@@ -2240,7 +2241,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 Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   height: 6px;
@@ -2392,7 +2393,7 @@ details > summary::-webkit-details-marker {
   }
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   position: fixed;
@@ -2439,7 +2440,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -2743,7 +2744,7 @@ details > summary::-webkit-details-marker {
   --focus-inset: -1px;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
@@ -2902,7 +2903,7 @@ slot[name=icon] {
   gap: 8px;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   display: inline-block;
@@ -2927,7 +2928,7 @@ slot[name=icon] {
   margin-block-start: 16px;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   pointer-events: none;
@@ -2942,7 +2943,7 @@ slot[name=icon] {
   font: var(--vvd-typography-base-bold);
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3059,15 +3060,15 @@ slot[name=icon] {
   display: none;
 }
 
-.icon {
+slot[name=icon] {
   font-size: 20px;
   line-height: 1;
 }
-.control:not(.disabled, .selected) .icon {
+.control:not(.disabled, .selected) slot[name=icon] {
   color: var(--vvd-color-neutral-600);
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: flex;
@@ -3079,7 +3080,7 @@ slot[name=icon] {
   border-bottom: 1px solid var(--vvd-color-neutral-200);
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: flex;
@@ -3174,16 +3175,16 @@ slot[name=icon] {
   padding-inline-start: 44px;
 }
 
-.icon {
+slot[name=icon] {
   color: var(--vvd-color-neutral-600);
 }
-.heading-button:not(.size-condensed) .icon {
+.heading-button:not(.size-condensed) slot[name=icon] {
   font: inherit;
 }
-.heading-button.size-condensed .icon {
+.heading-button.size-condensed slot[name=icon] {
   font: var(--vvd-typography-base-extended);
 }
-:host(:not([icon-trailing])) .icon:last-of-type {
+:host(:not([icon-trailing])) slot[name=icon]:last-of-type {
   color: var(--_appearance-color-text);
 }
 
@@ -3194,7 +3195,7 @@ button:not(:focus-visible) > .focus-indicator {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -3510,7 +3511,7 @@ button:not(:focus-visible) > .focus-indicator {
   display: flex;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   position: relative; /* this is needed for the focus */
@@ -3644,7 +3645,7 @@ dialog.fixed {
   transform: translate(0, -50%);
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   box-sizing: border-box;
@@ -3785,7 +3786,7 @@ slot[name=main] {
   border-radius: inherit;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .positioning-region {
   display: flex;
@@ -3804,7 +3805,7 @@ label {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3934,7 +3935,7 @@ slot[name=icon] {
   opacity: 0;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: grid;
@@ -4051,7 +4052,7 @@ slot[name=icon] {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: inline-flex;
@@ -4235,7 +4236,7 @@ label {
   margin-inline-end: 4px;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: block;
@@ -4254,7 +4255,7 @@ label {
   inline-size: 1px;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: block;
@@ -4369,7 +4370,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -4628,7 +4629,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4809,7 +4810,7 @@ label {
   --_select-control-border-radius: 6px;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   display: inline-flex;
@@ -4980,7 +4981,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   position: relative;
@@ -5044,7 +5045,7 @@ label {
   inline-size: 100%;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -5205,7 +5206,7 @@ label {
   resize: vertical;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -5331,6 +5332,10 @@ label {
   margin-inline-start: auto;
 }
 
+.chevron {
+  margin-inline-start: auto;
+}
+
 .text {
   display: flex;
   overflow: hidden;
@@ -5512,7 +5517,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: grid;
@@ -5581,7 +5586,7 @@ label {
   background-color: var(--_appearance-color-fill);
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   min-inline-size: 80px;
@@ -5674,7 +5679,7 @@ slot {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 ol {
   padding: 0;
@@ -5934,7 +5939,7 @@ ol {
   text-transform: uppercase;
 }/**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);
@@ -26,13 +26,33 @@
   -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 */
 }
-.vvd-root p, .vvd-root .font-base {
+.vvd-root p,
+.vvd-root .font-base {
   font: var(--vvd-typography-base);
   margin-block: 16px;
 }
-.vvd-root p.tight, .vvd-root .font-base.tight {
+.vvd-root p.tight,
+.vvd-root .font-base.tight {
   margin-block: 0;
 }
+.vvd-root .font-base-bold {
+  font: var(--vvd-typography-base-bold);
+}
+.vvd-root .font-base-condensed {
+  font: var(--vvd-typography-base-condensed);
+}
+.vvd-root .font-base-condensed-bold {
+  font: var(--vvd-typography-base-condensed-bold);
+}
+.vvd-root .font-base-extended {
+  font: var(--vvd-typography-base-extended);
+}
+.vvd-root .font-base-extended-bold {
+  font: var(--vvd-typography-base-extended-bold);
+}
+.vvd-root .font-base-code {
+  font: var(--vvd-typography-base-code);
+}
 .vvd-root b, .vvd-root strong {
   font: var(--vvd-typography-base-bold);
 }
@@ -53,38 +73,49 @@
 .vvd-root .subtitle.tight {
   margin-block: 0;
 }
-.vvd-root h1, .vvd-root .heading1 {
+.vvd-root h1,
+.vvd-root .heading1 {
   font: var(--vvd-typography-heading-1);
   margin-block: 32px;
 }
-.vvd-root h1.tight, .vvd-root .heading1.tight {
+.vvd-root h1.tight,
+.vvd-root .heading1.tight {
   margin-block: 0;
 }
-.vvd-root h2, .vvd-root .heading2 {
+.vvd-root h2,
+.vvd-root .heading2 {
   font: var(--vvd-typography-heading-2);
   margin-block: 32px;
 }
-.vvd-root h2.tight, .vvd-root .heading2.tight {
+.vvd-root h2.tight,
+.vvd-root .heading2.tight {
   margin-block: 0;
 }
-.vvd-root h3, .vvd-root .heading3 {
+.vvd-root h3,
+.vvd-root .heading3 {
   font: var(--vvd-typography-heading-3);
   margin-block: 24px;
 }
-.vvd-root h3.tight, .vvd-root .heading3.tight {
+.vvd-root h3.tight,
+.vvd-root .heading3.tight {
   margin-block: 0;
 }
-.vvd-root h4, .vvd-root .heading4 {
+.vvd-root h4,
+.vvd-root .heading4 {
   font: var(--vvd-typography-heading-4);
   margin-block: 24px;
 }
-.vvd-root h4.tight, .vvd-root .heading4.tight {
+.vvd-root h4.tight,
+.vvd-root .heading4.tight {
   margin-block: 0;
 }
-.vvd-root small, .vvd-root figcaption {
+.vvd-root small,
+.vvd-root figcaption {
   font: var(--vvd-typography-base-condensed);
 }
-.vvd-root small b, .vvd-root small strong, .vvd-root figcaption b, .vvd-root figcaption strong {
+.vvd-root small b, .vvd-root small strong,
+.vvd-root figcaption b,
+.vvd-root figcaption strong {
   font: var(--vvd-typography-base-condensed-bold);
 }
 .vvd-root sub,

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);