@vonage/vivid 3.40.0 → 3.42.0

package/style.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: inline-block;
@@ -319,7 +319,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   inline-size: inherit;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: contents;
@@ -337,7 +337,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   outline-offset: -2px;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .message {
   display: flex;
@@ -362,7 +362,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   color: var(--vvd-color-alert-500);
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: contents;
@@ -499,7 +499,7 @@ p {
   font: var(--vvd-typography-base-condensed);
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .base {
   display: flex;
@@ -550,7 +550,7 @@ p {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -673,7 +673,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: inline-block;
@@ -760,7 +760,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: inline-block;
@@ -824,7 +824,7 @@ label {
   margin-block: 4px;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .control {
   position: fixed;
@@ -927,7 +927,7 @@ label {
   padding-inline-start: 8px;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: inline-block;
@@ -1296,7 +1296,7 @@ slot[name=icon] {
   filter: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .base {
   align-items: center;
@@ -1419,7 +1419,33 @@ slot[name=icon] {
   }
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ */
+.base {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px;
+  color: var(--vvd-color-canvas-text);
+  user-select: none;
+}
+.base .slider {
+  min-inline-size: var(--audio-player-min-inline-size, 200px);
+}
+.base .controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.base .time-stamp {
+  display: inline-flex;
+}
+.base .time-stamp .current-time,
+.base .time-stamp .total-time {
+  margin-inline: 6px;
+  min-inline-size: 32px;
+}/**
+ * Do not edit directly
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .base {
   display: inline-flex;
@@ -1446,6 +1472,8 @@ slot[name=icon] {
   --_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));
+  /* @cssprop [--vvd-avatar-cta-contrast=var(--vvd-color-cta-800)] */
+  --_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800));
 }
 .base:not(.connotation-cta) {
   /* @cssprop [--vvd-avatar-accent-primary=var(--vvd-color-canvas-text)] */
@@ -1460,6 +1488,8 @@ slot[name=icon] {
   --_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));
+  /* @cssprop [--vvd-avatar-accent-contrast=var(--vvd-color-neutral-800)] */
+  --_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800));
 }
 .base {
   --_appearance-color-text: var(--_connotation-color-primary-text);
@@ -1526,8 +1556,12 @@ slot[name=icon] {
   object-fit: cover;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
+:host {
+  display: inline-block;
+}
+
 .base {
   --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));
   display: inline-flex;
@@ -1539,6 +1573,7 @@ slot[name=icon] {
   color: var(--_appearance-color-text);
   column-gap: 8px;
   font: var(--vvd-typography-base-condensed-bold);
+  inline-size: 100%;
   padding-inline: 8px;
   vertical-align: middle;
 }
@@ -1699,7 +1734,7 @@ slot[name=icon] {
   order: 1;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: block;
@@ -1780,7 +1815,7 @@ slot[name=icon] {
   margin-inline-end: 8px;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .base {
   display: flex;
@@ -1820,7 +1855,7 @@ slot[name=icon] {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: flex;
@@ -1921,7 +1956,7 @@ slot[name=icon] {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: block;
@@ -1970,7 +2005,7 @@ header {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .control {
   position: relative;
@@ -2115,7 +2150,7 @@ slot[name=icon] {
   --focus-stroke-gap-color: transparent;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .base {
   z-index: 1;
@@ -2257,7 +2292,7 @@ slot[name=icon] {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .control {
   position: relative;
@@ -2293,12 +2328,12 @@ slot[name=icon] {
   --_appearance-color-fill: var(--_connotation-color-soft);
   --_appearance-color-outline: transparent;
 }
-.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {
+.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {
   --_appearance-color-text: var(--_connotation-color-primary-text);
   --_appearance-color-fill: var(--_connotation-color-primary);
   --_appearance-color-outline: transparent;
 }
-.control:where(.selected, [aria-current]):where(:hover, .hover) {
+.control:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
   --_appearance-color-text: var(--_connotation-color-primary-text);
   --_appearance-color-fill: var(--_connotation-color-primary-increment);
   --_appearance-color-outline: transparent;
@@ -2359,7 +2394,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .control {
   position: relative;
@@ -2393,12 +2428,12 @@ details > summary::-webkit-details-marker {
   --_appearance-color-fill: var(--_connotation-color-soft);
   --_appearance-color-outline: transparent;
 }
-.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {
+.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {
   --_appearance-color-text: var(--_connotation-color-primary-text);
   --_appearance-color-fill: var(--_connotation-color-primary);
   --_appearance-color-outline: transparent;
 }
-.control:where(.selected, [aria-current]):where(:hover, .hover) {
+.control:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
   --_appearance-color-text: var(--_connotation-color-primary-text);
   --_appearance-color-fill: var(--_connotation-color-primary-increment);
   --_appearance-color-outline: transparent;
@@ -2442,7 +2477,7 @@ slot[name=icon] {
   line-height: 1;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .base {
   display: flex;
@@ -2532,7 +2567,7 @@ slot[name=icon] {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .control {
   display: inline-flex;
@@ -2581,7 +2616,7 @@ slot[name=icon] {
   inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .base {
   height: 6px;
@@ -2733,7 +2768,7 @@ slot[name=icon] {
   }
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 @supports selector(:focus-visible) {
   .base:focus-visible {
@@ -2759,35 +2794,39 @@ slot[name=icon] {
   --_connotation-color-firm: var(--vvd-selectable-box-cta-firm, var(--vvd-color-cta-600));
   /* @cssprop [--vvd-selectable-box-cta-pale=var(--vvd-color-cta-300)] */
   --_connotation-color-pale: var(--vvd-selectable-box-cta-pale, var(--vvd-color-cta-300));
-  /* @cssprop [--vvd-selectable-box-cta-soft=var(--vvd-color-cta-100)] */
-  --_connotation-color-soft: var(--vvd-selectable-box-cta-soft, var(--vvd-color-cta-100));
+  /* @cssprop [--vvd-selectable-box-cta-fierce=var(--vvd-color-cta-700)] */
+  --_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));
+  /* @cssprop [--vvd-selectable-box-cta-faint=var(--vvd-color-cta-50)] */
+  --_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));
 }
 .base:not(.connotation-cta) {
   /* @cssprop [--vvd-selectable-box-accent-firm=var(--vvd-color-canvas-text)] */
   --_connotation-color-firm: var(--vvd-selectable-box-accent-firm, var(--vvd-color-canvas-text));
   /* @cssprop [--vvd-selectable-box-accent-pale=var(--vvd-color-neutral-300)] */
   --_connotation-color-pale: var(--vvd-selectable-box-accent-pale, var(--vvd-color-neutral-300));
-  /* @cssprop [--vvd-selectable-box-accent-soft=var(--vvd-color-neutral-100)] */
-  --_connotation-color-soft: var(--vvd-selectable-box-accent-soft, var(--vvd-color-neutral-100));
+  /* @cssprop [--vvd-selectable-box-accent-fierce=var(--vvd-color-neutral-700)] */
+  --_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));
+  /* @cssprop [--vvd-selectable-box-accent-faint=var(--vvd-color-neutral-50)] */
+  --_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));
 }
 .base {
-  --_appearance-color-text: var(--_connotation-color-firm);
-  --_appearance-color-fill: var(--vvd-color-canvas);
+  --_appearance-color-text: var(--_connotation-color-fierce);
+  --_appearance-color-fill: transparent;
   --_appearance-color-outline: var(--_connotation-color-pale);
 }
 .base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
-  --_appearance-color-text: var(--_connotation-color-firm);
-  --_appearance-color-fill: var(--vvd-color-canvas);
+  --_appearance-color-text: var(--_connotation-color-fierce);
+  --_appearance-color-fill: transparent;
   --_appearance-color-outline: var(--_connotation-color-firm);
 }
-.base:where(:checked, .checked):where(:not(:disabled, .disabled)) {
-  --_appearance-color-text: var(--_connotation-color-firm);
-  --_appearance-color-fill: var(--_connotation-color-soft);
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {
+  --_appearance-color-text: var(--_connotation-color-fierce);
+  --_appearance-color-fill: var(--_connotation-color-faint);
   --_appearance-color-outline: var(--_connotation-color-pale);
 }
-.base:where(:checked, .checked):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
-  --_appearance-color-text: var(--_connotation-color-firm);
-  --_appearance-color-fill: var(--_connotation-color-soft);
+.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
+  --_appearance-color-text: var(--_connotation-color-fierce);
+  --_appearance-color-fill: var(--_connotation-color-faint);
   --_appearance-color-outline: var(--_connotation-color-firm);
 }
 .base.tight {
@@ -2814,7 +2853,7 @@ slot[name=icon] {
   inset-inline-end: var(--selectable-box-spacing, 16px);
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .control {
   position: fixed;
@@ -2861,7 +2900,7 @@ slot[name=icon] {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: inline-block;
@@ -2908,8 +2947,46 @@ slot[name=icon] {
   /* @cssprop [--vvd-split-button-cta-faint=var(--vvd-color-cta-50)] */
   --_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50));
 }
-.control:not(.connotation-cta),
-.indicator:not(.connotation-cta) {
+.control.connotation-success,
+.indicator.connotation-success {
+  /* @cssprop [--vvd-split-button-success-primary=var(--vvd-color-success-500)] */
+  --_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));
+  /* @cssprop [--vvd-split-button-success-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-split-button-success-primary-increment=var(--vvd-color-success-600)] */
+  --_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));
+  /* @cssprop [--vvd-split-button-success-contrast=var(--vvd-color-success-800)] */
+  --_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));
+  /* @cssprop [--vvd-split-button-success-fierce=var(--vvd-color-success-700)] */
+  --_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));
+  /* @cssprop [--vvd-split-button-success-firm=var(--vvd-color-success-600)] */
+  --_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));
+  /* @cssprop [--vvd-split-button-success-soft=var(--vvd-color-success-100)] */
+  --_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));
+  /* @cssprop [--vvd-split-button-success-faint=var(--vvd-color-success-50)] */
+  --_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50));
+}
+.control.connotation-alert,
+.indicator.connotation-alert {
+  /* @cssprop [--vvd-split-button-alert-primary=var(--vvd-color-alert-500)] */
+  --_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));
+  /* @cssprop [--vvd-split-button-alert-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-split-button-alert-primary-increment=var(--vvd-color-alert-600)] */
+  --_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));
+  /* @cssprop [--vvd-split-button-alert-contrast=var(--vvd-color-alert-800)] */
+  --_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));
+  /* @cssprop [--vvd-split-button-alert-fierce=var(--vvd-color-alert-700)] */
+  --_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));
+  /* @cssprop [--vvd-split-button-alert-firm=var(--vvd-color-alert-600)] */
+  --_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));
+  /* @cssprop [--vvd-split-button-alert-soft=var(--vvd-color-alert-100)] */
+  --_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));
+  /* @cssprop [--vvd-split-button-alert-faint=var(--vvd-color-alert-50)] */
+  --_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50));
+}
+.control:not(.connotation-cta, .connotation-success, .connotation-alert),
+.indicator:not(.connotation-cta, .connotation-success, .connotation-alert) {
   /* @cssprop [--vvd-split-button-accent-primary=var(--vvd-color-canvas-text)] */
   --_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));
   /* @cssprop [--vvd-split-button-accent-primary-text=var(--vvd-color-canvas)] */
@@ -3165,7 +3242,7 @@ slot[name=icon] {
   --focus-inset: -1px;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .base {
   --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
@@ -3256,12 +3333,12 @@ slot[name=icon] {
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: var(--vvd-color-neutral-100);
 }
-.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {
   --_appearance-color-text: var(--_connotation-color-contrast);
   --_appearance-color-fill: var(--_connotation-color-pale);
   --_appearance-color-outline: transparent;
 }
-.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)).appearance-duotone {
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-duotone {
   --_appearance-color-text: var(--_connotation-color-fierce);
   --_appearance-color-fill: var(--_connotation-color-faint);
   --_appearance-color-outline: var(--_connotation-color-pale);
@@ -3324,7 +3401,7 @@ slot[name=icon] {
   gap: 8px;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .control {
   display: inline-block;
@@ -3349,7 +3426,7 @@ slot[name=icon] {
   margin-block-start: 16px;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .control {
   pointer-events: none;
@@ -3364,7 +3441,7 @@ slot[name=icon] {
   font: var(--vvd-typography-base-bold);
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3414,12 +3491,12 @@ slot[name=icon] {
   --_appearance-color-fill: var(--_connotation-color-soft);
   --_appearance-color-outline: transparent;
 }
-.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {
+.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {
   --_appearance-color-text: var(--_connotation-color-primary-text);
   --_appearance-color-fill: var(--_connotation-color-primary);
   --_appearance-color-outline: transparent;
 }
-.control:where(.selected, [aria-current]):where(:hover, .hover) {
+.control:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
   --_appearance-color-text: var(--_connotation-color-primary-text);
   --_appearance-color-fill: var(--_connotation-color-primary-increment);
   --_appearance-color-outline: transparent;
@@ -3492,7 +3569,7 @@ slot[name=icon] {
   color: var(--vvd-color-neutral-600);
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .base {
   display: flex;
@@ -3504,7 +3581,7 @@ slot[name=icon] {
   border-bottom: 1px solid var(--vvd-color-neutral-200);
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: flex;
@@ -3621,7 +3698,7 @@ button:not(:focus-visible) > .focus-indicator {
   display: flex;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host([disabled]) {
   cursor: not-allowed;
@@ -3681,12 +3758,12 @@ button:not(:focus-visible) > .focus-indicator {
   --_appearance-color-fill: var(--_connotation-color-soft);
   --_appearance-color-outline: transparent;
 }
-.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {
   --_appearance-color-text: var(--_connotation-color-primary);
   --_appearance-color-fill: var(--_connotation-color-dim);
   --_appearance-color-outline: transparent;
 }
-.base:where(.selected, [aria-current]):where(:hover, .hover) {
+.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
   --_appearance-color-text: var(--_connotation-color-primary);
   --_appearance-color-fill: var(--_connotation-color-pale);
   --_appearance-color-outline: transparent;
@@ -3758,7 +3835,7 @@ dialog.fixed {
   transform: translate(0, -50%);
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .base {
   box-sizing: border-box;
@@ -3899,7 +3976,7 @@ slot[name=main] {
   border-radius: inherit;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .positioning-region {
   display: flex;
@@ -3918,7 +3995,7 @@ label {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4051,7 +4128,7 @@ slot[name=icon] {
   opacity: 0;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .base {
   display: grid;
@@ -4140,6 +4217,7 @@ slot[name=icon] {
 .base.orientation-vertical .active-indicator {
   align-self: center;
   block-size: 80%;
+  border-radius: 2px;
   grid-area: 1/1/auto/auto;
   inline-size: var(--_tabs-active-indicator-stroke-width);
 }
@@ -4168,7 +4246,7 @@ slot[name=icon] {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: inline-flex;
@@ -4361,7 +4439,7 @@ label {
   margin-inline-end: 4px;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: block;
@@ -4380,7 +4458,7 @@ label {
   inline-size: 1px;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: inline-block;
@@ -4641,7 +4719,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4822,7 +4900,7 @@ label {
   --_select-control-border-radius: 6px;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host(.disabled) {
   cursor: not-allowed;
@@ -4925,7 +5003,7 @@ label {
 }
 .control:where(.readonly):where(:not(:disabled, .disabled)).appearance-filled {
   --_appearance-color-text: var(--vvd-color-neutral-800);
-  --_appearance-color-fill: var(--vvd-color-neutral-200);
+  --_appearance-color-fill: var(--vvd-color-neutral-500);
   --_appearance-color-outline: transparent;
 }
 @supports selector(:focus-visible) {
@@ -4968,18 +5046,27 @@ label {
   margin-inline-start: auto;
   transition: all 0.2s ease-in-out 0s;
 }
-.control.appearance-filled .checked-indicator {
-  background-color: var(--vvd-color-neutral-100);
-}
 .control:not(.appearance-filled) .checked-indicator {
   background-color: var(--_appearance-color-outline);
 }
+.control:not(.appearance-filled):where(.readonly) .checked-indicator {
+  background-color: var(--vvd-color-neutral-600);
+}
+.control.appearance-filled .checked-indicator {
+  background-color: var(--vvd-color-neutral-100);
+}
 .control:not(.checked) .checked-indicator {
   transform: translateX(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)));
 }
 .control.checked .checked-indicator {
   transform: translateX(calc(-1 * var(--_switch-gutter)));
 }
+.control.appearance-filled.disabled .checked-indicator {
+  background-color: var(--_appearance-color-text);
+}
+.control.appearance-filled.readonly .checked-indicator {
+  background-color: var(--vvd-color-neutral-50);
+}
 
 .label {
   color: var(--vvd-color-canvas-text);
@@ -4996,7 +5083,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   position: relative;
@@ -5060,7 +5147,7 @@ label {
   inline-size: 100%;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: block;
@@ -5175,7 +5262,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: inline-block;
@@ -5335,7 +5422,160 @@ label {
   resize: vertical;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ */
+:host {
+  display: inline-block;
+  width: 100%;
+}
+
+:host([orientation=vertical]) {
+  height: 100%;
+  min-height: calc(var(--_thumb-interaction-indicator-size) * 5);
+}
+
+:host([disabled]) {
+  cursor: not-allowed;
+}
+
+.control {
+  --_thumb-size: 12px;
+  --_thumb-interaction-indicator-size: 36px;
+  height: var(--_thumb-interaction-indicator-size);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+.control.connotation-cta {
+  /* @cssprop [--vvd-slider-cta-primary=var(--vvd-color-cta-500)] */
+  --_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500));
+}
+.control:not(.connotation-cta) {
+  /* @cssprop [--vvd-slider-accent-primary=var(--vvd-color-canvas-text)] */
+  --_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text));
+}
+.control {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary);
+  --_appearance-color-outline: transparent;
+}
+@supports selector(:focus-visible) {
+  .control:focus-visible {
+    outline: none;
+  }
+}
+.control .positioning-region {
+  position: relative;
+}
+.control .track {
+  position: absolute;
+  background: var(--_track-background-color);
+  border-radius: 4px;
+}
+.control .track .track-start {
+  position: absolute;
+  left: 0;
+  height: 100%;
+  background: var(--_track-start-background-color);
+  border-radius: 4px;
+}
+.control .thumb-container {
+  position: absolute;
+  width: var(--_thumb-interaction-indicator-size);
+  height: var(--_thumb-interaction-indicator-size);
+  cursor: inherit;
+  touch-action: none;
+}
+.control .thumb-container::before {
+  position: absolute;
+  display: block;
+  width: var(--_thumb-interaction-indicator-size);
+  height: var(--_thumb-interaction-indicator-size);
+  background-color: var(--_track-start-background-color);
+  border-radius: 50%;
+  content: "";
+  opacity: var(--_thumb-interaction-indicator-alpha, 0);
+  transition: opacity 0.2s ease-out 0s;
+}
+.control .thumb-container::after {
+  position: absolute;
+  display: block;
+  width: var(--_thumb-size);
+  height: var(--_thumb-size);
+  background-color: var(--_track-start-background-color);
+  border-radius: 50%;
+  content: "";
+  inset: calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);
+}
+.control[aria-orientation=horizontal] {
+  width: calc(100% - var(--_thumb-size));
+  min-width: var(--_thumb-size);
+  margin-left: calc(var(--_thumb-size) / 2);
+}
+.control[aria-orientation=horizontal] .track {
+  top: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);
+  right: 0;
+  left: 0;
+  height: 2px;
+}
+.control[aria-orientation=horizontal] .track .mark {
+  width: 100%;
+  height: 4px;
+}
+.control[aria-orientation=horizontal] .thumb-container {
+  transform: translateX(calc(var(--_thumb-interaction-indicator-size) / 2));
+}
+.control[aria-orientation=vertical] {
+  height: calc(100% - var(--_thumb-interaction-indicator-size));
+  min-height: var(--_thumb-interaction-indicator-size);
+  margin-top: calc(var(--_thumb-interaction-indicator-size) / 2);
+}
+.control[aria-orientation=vertical] .positioning-region {
+  height: 100%;
+}
+.control[aria-orientation=vertical] .track {
+  left: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);
+  width: 2px;
+  height: 100%;
+}
+.control[aria-orientation=vertical] .track .mark {
+  width: 4px;
+  height: 100%;
+}
+.control[aria-orientation=vertical] .track-start {
+  top: 0;
+  width: 100%;
+  height: auto;
+}
+.control[aria-orientation=vertical] .thumb-container {
+  transform: translateY(calc(var(--_thumb-interaction-indicator-size) / 2));
+}
+.control.disabled {
+  --_track-background-color: var(--vvd-color-neutral-100);
+  --_track-start-background-color: var(--vvd-color-neutral-500);
+  pointer-events: none;
+}
+.control:not(.disabled) {
+  --_track-background-color: var(--vvd-color-neutral-300);
+  --_track-start-background-color: var(--_appearance-color-fill);
+}
+.control:not(.disabled) .thumb-container:hover {
+  --_thumb-interaction-indicator-alpha: 0.12;
+}
+.control:not(.disabled) .thumb-container:active {
+  --_thumb-interaction-indicator-alpha: 0.25;
+}
+
+.focus-indicator {
+  --focus-inset: -3px;
+  --focus-stroke-gap-color: transparent;
+  border-radius: 50%;
+}
+.control:not(:focus-visible) .focus-indicator {
+  display: none;
+}/**
+ * Do not edit directly
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -5378,12 +5618,12 @@ label {
   --_appearance-color-fill: var(--_connotation-color-soft);
   --_appearance-color-outline: transparent;
 }
-.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {
   --_appearance-color-text: var(--_connotation-color-primary);
   --_appearance-color-fill: var(--_connotation-color-dim);
   --_appearance-color-outline: transparent;
 }
-.base:where(.selected, [aria-current]):where(:hover, .hover) {
+.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
   --_appearance-color-text: var(--_connotation-color-primary);
   --_appearance-color-fill: var(--_connotation-color-pale);
   --_appearance-color-outline: transparent;
@@ -5497,159 +5737,6 @@ label {
 }
 .base.two-lines .text-secondary {
   color: var(--vvd-color-neutral-600);
-}/**
- * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
- */
-:host {
-  display: inline-block;
-  width: 100%;
-}
-
-:host([orientation=vertical]) {
-  height: 100%;
-  min-height: calc(var(--_thumb-interaction-indicator-size) * 5);
-}
-
-:host([disabled]) {
-  cursor: not-allowed;
-}
-
-.control {
-  --_thumb-size: 12px;
-  --_thumb-interaction-indicator-size: 36px;
-  height: var(--_thumb-interaction-indicator-size);
-  cursor: pointer;
-  outline: none;
-  user-select: none;
-}
-.control.connotation-cta {
-  /* @cssprop [--vvd-slider-cta-primary=var(--vvd-color-cta-500)] */
-  --_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500));
-}
-.control:not(.connotation-cta) {
-  /* @cssprop [--vvd-slider-accent-primary=var(--vvd-color-canvas-text)] */
-  --_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text));
-}
-.control {
-  --_appearance-color-text: var(--_connotation-color-primary-text);
-  --_appearance-color-fill: var(--_connotation-color-primary);
-  --_appearance-color-outline: transparent;
-}
-@supports selector(:focus-visible) {
-  .control:focus-visible {
-    outline: none;
-  }
-}
-.control .positioning-region {
-  position: relative;
-}
-.control .track {
-  position: absolute;
-  background: var(--_track-background-color);
-  border-radius: 4px;
-}
-.control .track .track-start {
-  position: absolute;
-  left: 0;
-  height: 100%;
-  background: var(--_track-start-background-color);
-  border-radius: 4px;
-}
-.control .thumb-container {
-  position: absolute;
-  width: var(--_thumb-interaction-indicator-size);
-  height: var(--_thumb-interaction-indicator-size);
-  cursor: inherit;
-  touch-action: none;
-}
-.control .thumb-container::before {
-  position: absolute;
-  display: block;
-  width: var(--_thumb-interaction-indicator-size);
-  height: var(--_thumb-interaction-indicator-size);
-  background-color: var(--_track-start-background-color);
-  border-radius: 50%;
-  content: "";
-  opacity: var(--_thumb-interaction-indicator-alpha, 0);
-  transition: opacity 0.2s ease-out 0s;
-}
-.control .thumb-container::after {
-  position: absolute;
-  display: block;
-  width: var(--_thumb-size);
-  height: var(--_thumb-size);
-  background-color: var(--_track-start-background-color);
-  border-radius: 50%;
-  content: "";
-  inset: calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);
-}
-.control[aria-orientation=horizontal] {
-  width: calc(100% - var(--_thumb-size));
-  min-width: var(--_thumb-size);
-  margin-left: calc(var(--_thumb-size) / 2);
-}
-.control[aria-orientation=horizontal] .track {
-  top: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);
-  right: 0;
-  left: 0;
-  height: 2px;
-}
-.control[aria-orientation=horizontal] .track .mark {
-  width: 100%;
-  height: 4px;
-}
-.control[aria-orientation=horizontal] .thumb-container {
-  transform: translateX(calc(var(--_thumb-interaction-indicator-size) / 2));
-}
-.control[aria-orientation=vertical] {
-  height: calc(100% - var(--_thumb-interaction-indicator-size));
-  min-height: var(--_thumb-interaction-indicator-size);
-  margin-top: calc(var(--_thumb-interaction-indicator-size) / 2);
-}
-.control[aria-orientation=vertical] .positioning-region {
-  height: 100%;
-}
-.control[aria-orientation=vertical] .track {
-  left: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);
-  width: 2px;
-  height: 100%;
-}
-.control[aria-orientation=vertical] .track .mark {
-  width: 4px;
-  height: 100%;
-}
-.control[aria-orientation=vertical] .track-start {
-  top: 0;
-  width: 100%;
-  height: auto;
-}
-.control[aria-orientation=vertical] .thumb-container {
-  transform: translateY(calc(var(--_thumb-interaction-indicator-size) / 2));
-}
-.control.disabled {
-  --_track-background-color: var(--vvd-color-neutral-100);
-  --_track-start-background-color: var(--vvd-color-neutral-500);
-  pointer-events: none;
-}
-.control:not(.disabled) {
-  --_track-background-color: var(--vvd-color-neutral-300);
-  --_track-start-background-color: var(--_appearance-color-fill);
-}
-.control:not(.disabled) .thumb-container:hover {
-  --_thumb-interaction-indicator-alpha: 0.12;
-}
-.control:not(.disabled) .thumb-container:active {
-  --_thumb-interaction-indicator-alpha: 0.25;
-}
-
-.focus-indicator {
-  --focus-inset: -3px;
-  --focus-stroke-gap-color: transparent;
-  border-radius: 50%;
-}
-.control:not(:focus-visible) .focus-indicator {
-  display: none;
 }:host {
   display: block;
 }
@@ -5669,7 +5756,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 .base {
   display: grid;
@@ -5715,12 +5802,12 @@ label {
   --_appearance-color-fill: var(--_connotation-color-faint);
   --_appearance-color-outline: transparent;
 }
-.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {
   --_appearance-color-text: var(--_connotation-color-primary);
   --_appearance-color-fill: var(--_connotation-color-dim);
   --_appearance-color-outline: transparent;
 }
-.base:where(.selected, [aria-current]):where(:hover, .hover) {
+.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
   --_appearance-color-text: var(--_connotation-color-primary);
   --_appearance-color-fill: var(--_connotation-color-pale);
   --_appearance-color-outline: transparent;
@@ -5738,7 +5825,7 @@ label {
   background-color: var(--_appearance-color-fill);
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   min-inline-size: 80px;
@@ -5797,12 +5884,12 @@ label {
   --_appearance-color-fill: var(--_connotation-color-faint);
   --_appearance-color-outline: transparent;
 }
-.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {
+.base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {
   --_appearance-color-text: var(--_connotation-color-primary);
   --_appearance-color-fill: var(--_connotation-color-dim);
   --_appearance-color-outline: transparent;
 }
-.base:where(.selected, [aria-current]):where(:hover, .hover) {
+.base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
   --_appearance-color-text: var(--_connotation-color-primary);
   --_appearance-color-fill: var(--_connotation-color-pale);
   --_appearance-color-outline: transparent;
@@ -5835,7 +5922,7 @@ slot {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 ol {
   padding: 0;
@@ -6095,7 +6182,7 @@ ol {
   text-transform: uppercase;
 }/**
  * Do not edit directly
- * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ * Generated on Thu, 30 Nov 2023 11:42:28 GMT
  */
 :host {
   display: inline-block;
@@ -6277,12 +6364,12 @@ ol {
   --_appearance-color-fill: var(--_connotation-color-soft);
   --_appearance-color-outline: transparent;
 }
-.button:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {
+.button:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {
   --_appearance-color-text: var(--_connotation-color-primary);
   --_appearance-color-fill: var(--_connotation-color-dim);
   --_appearance-color-outline: transparent;
 }
-.button:where(.selected, [aria-current]):where(:hover, .hover) {
+.button:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
   --_appearance-color-text: var(--_connotation-color-primary);
   --_appearance-color-fill: var(--_connotation-color-pale);
   --_appearance-color-outline: transparent;