@vonage/vivid 3.39.0 → 3.41.0

package/style.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: inline-block;
@@ -108,14 +108,16 @@
   --_low-ink-color: var(--_appearance-color-text);
 }
 
-.label {
+.label:not(slot),
+.label::slotted(label) {
   color: var(--vvd-color-canvas-text);
   contain: inline-size;
   font: var(--vvd-typography-base);
   grid-column: 1/4;
   grid-row: 1;
 }
-.char-count + .label {
+.char-count + .label:not(slot),
+.char-count + .label::slotted(label) {
   grid-column: 1/3;
 }
 
@@ -169,7 +171,7 @@
   outline: none;
 }
 
-.control {
+.control:not(slot), .control::slotted(input) {
   width: 100%;
   box-sizing: border-box;
   border: 0 none;
@@ -183,19 +185,19 @@
   padding-inline-end: var(--_text-field-gutter);
   padding-inline-start: var(--_text-field-gutter);
 }
-.control:disabled {
+.control:not(slot):disabled, .control::slotted(input:disabled) {
   cursor: not-allowed;
   opacity: 1; /* 2. correct opacity on iOS */
   -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */
 }
-.control::placeholder, .control:disabled::placeholder {
-  opacity: 1; /* 2. correct opacity on iOS */
-  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */
+.control:not(slot)::placeholder {
+  opacity: 1 !important; /* 2. correct opacity on iOS */
+  -webkit-text-fill-color: var(--_low-ink-color) !important; /* 1. sets text fill to current `color` for safari */
 }
-.control:focus-visible {
+.control:not(slot):focus-visible, .control::slotted(input:focus-visible) {
   outline: none;
 }
-.has-icon .control {
+.has-icon .control:not(slot), .has-icon .control::slotted(input) {
   padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);
 }
 
@@ -317,7 +319,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   inline-size: inherit;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: contents;
@@ -335,7 +337,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   outline-offset: -2px;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .message {
   display: flex;
@@ -360,7 +362,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   color: var(--vvd-color-alert-500);
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: contents;
@@ -497,7 +499,7 @@ p {
   font: var(--vvd-typography-base-condensed);
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .base {
   display: flex;
@@ -548,7 +550,7 @@ p {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -608,7 +610,7 @@ p {
   --_appearance-color-fill: var(--_connotation-color-primary);
   --_appearance-color-outline: var(--_connotation-color-primary);
 }
-.base:where(:checked, .checked):where(:hover, .hover) {
+.base:where(:checked, .checked):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: var(--_connotation-color-primary);
@@ -671,7 +673,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: inline-block;
@@ -758,7 +760,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: inline-block;
@@ -822,7 +824,7 @@ label {
   margin-block: 4px;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .control {
   position: fixed;
@@ -923,129 +925,444 @@ label {
 .base .dismiss-button {
   border-left: 1px solid var(--vvd-color-neutral-200);
   padding-inline-start: 8px;
-}:host {
-  display: contents;
+}/**
+ * Do not edit directly
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
+ */
+:host {
+  display: inline-block;
 }
 
 .control {
-  display: contents;
-}
-.control.dp-0 {
-  --_elevation-fill: var(--vvd-color-surface-0dp);
-  --_elevation-shadow: var(--vvd-shadow-surface-0dp);
-}
-.control.dp-4 {
-  --_elevation-fill: var(--vvd-color-surface-4dp);
-  --_elevation-shadow: var(--vvd-shadow-surface-4dp);
-}
-.control.dp-8 {
-  --_elevation-fill: var(--vvd-color-surface-8dp);
-  --_elevation-shadow: var(--vvd-shadow-surface-8dp);
+  position: relative;
+  display: inline-flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  border: 0 none;
+  margin: 0;
+  background-color: var(--_appearance-color-fill);
+  block-size: var(--_button-block-size);
+  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);
+  color: var(--_appearance-color-text);
+  gap: var(--_button-icon-gap);
+  vertical-align: middle;
+  /* Shape */
+  /* Size */
 }
-.control.dp-12 {
-  --_elevation-fill: var(--vvd-color-surface-12dp);
-  --_elevation-shadow: var(--vvd-shadow-surface-12dp);
+.control.connotation-cta {
+  /* @cssprop [--vvd-button-cta-primary=var(--vvd-color-cta-500)] */
+  --_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));
+  /* @cssprop [--vvd-button-cta-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-button-cta-primary-increment=var(--vvd-color-cta-600)] */
+  --_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));
+  /* @cssprop [--vvd-button-cta-contrast=var(--vvd-color-cta-800)] */
+  --_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));
+  /* @cssprop [--vvd-button-cta-fierce=var(--vvd-color-cta-700)] */
+  --_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));
+  /* @cssprop [--vvd-button-cta-firm=var(--vvd-color-cta-600)] */
+  --_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));
+  /* @cssprop [--vvd-button-cta-soft=var(--vvd-color-cta-100)] */
+  --_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));
+  /* @cssprop [--vvd-button-cta-faint=var(--vvd-color-cta-50)] */
+  --_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));
 }
-.control.dp-16 {
-  --_elevation-fill: var(--vvd-color-surface-16dp);
-  --_elevation-shadow: var(--vvd-shadow-surface-16dp);
+.control.connotation-success {
+  /* @cssprop [--vvd-button-success-primary=var(--vvd-color-success-500)] */
+  --_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));
+  /* @cssprop [--vvd-button-success-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-button-success-primary-increment=var(--vvd-color-success-600)] */
+  --_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));
+  /* @cssprop [--vvd-button-success-contrast=var(--vvd-color-success-800)] */
+  --_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));
+  /* @cssprop [--vvd-button-success-fierce=var(--vvd-color-success-700)] */
+  --_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));
+  /* @cssprop [--vvd-button-success-firm=var(--vvd-color-success-600)] */
+  --_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));
+  /* @cssprop [--vvd-button-success-soft=var(--vvd-color-success-100)] */
+  --_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));
+  /* @cssprop [--vvd-button-success-faint=var(--vvd-color-success-50)] */
+  --_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));
 }
-.control.dp-24 {
-  --_elevation-fill: var(--vvd-color-surface-24dp);
-  --_elevation-shadow: var(--vvd-shadow-surface-24dp);
+.control.connotation-alert {
+  /* @cssprop [--vvd-button-alert-primary=var(--vvd-color-alert-500)] */
+  --_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));
+  /* @cssprop [--vvd-button-alert-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-button-alert-primary-increment=var(--vvd-color-alert-600)] */
+  --_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));
+  /* @cssprop [--vvd-button-alert-contrast=var(--vvd-color-alert-800)] */
+  --_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));
+  /* @cssprop [--vvd-button-alert-fierce=var(--vvd-color-alert-700)] */
+  --_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));
+  /* @cssprop [--vvd-button-alert-firm=var(--vvd-color-alert-600)] */
+  --_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));
+  /* @cssprop [--vvd-button-alert-soft=var(--vvd-color-alert-100)] */
+  --_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));
+  /* @cssprop [--vvd-button-alert-faint=var(--vvd-color-alert-50)] */
+  --_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));
 }
-.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {
-  --_elevation-fill: var(--vvd-color-surface-2dp);
-  --_elevation-shadow: var(--vvd-shadow-surface-2dp);
+.control:not(.connotation-cta, .connotation-success, .connotation-alert) {
+  /* @cssprop [--vvd-button-accent-primary=var(--vvd-color-canvas-text)] */
+  --_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));
+  /* @cssprop [--vvd-button-accent-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-button-accent-primary-increment=var(--vvd-color-neutral-800)] */
+  --_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));
+  /* @cssprop [--vvd-button-accent-contrast=var(--vvd-color-neutral-800)] */
+  --_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));
+  /* @cssprop [--vvd-button-accent-fierce=var(--vvd-color-neutral-700)] */
+  --_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));
+  /* @cssprop [--vvd-button-accent-firm=var(--vvd-color-canvas-text)] */
+  --_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));
+  /* @cssprop [--vvd-button-accent-soft=var(--vvd-color-neutral-100)] */
+  --_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));
+  /* @cssprop [--vvd-button-accent-faint=var(--vvd-color-neutral-50)] */
+  --_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));
 }
-.control ::slotted(*) {
-  position: relative;
-  isolation: isolate;
+.control.appearance-filled {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary);
+  --_appearance-color-outline: transparent;
 }
-.control ::slotted(*)::before {
-  position: absolute;
-  z-index: -1;
-  background: var(--_elevation-fill);
-  block-size: 100%;
-  border-radius: inherit;
-  content: "";
-  filter: var(--_elevation-shadow);
-  inline-size: 100%;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  transition: background-color 0.15s linear, filter 0.15s linear;
+.control.appearance-outlined {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: var(--_connotation-color-firm);
 }
-.control.no-shadow ::slotted(*)::before {
-  filter: none;
-}/**
- * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
- */
-.base {
-  align-items: center;
-  block-size: var(--_size);
-  color: var(--_appearance-color-text);
-  inline-size: var(--_size);
-  outline: none;
+.control {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: transparent;
 }
-.base.connotation-cta {
-  /* @cssprop [--vvd-progress-ring-cta-primary=var(--vvd-color-cta-500)] */
-  --_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500));
+.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-primary-increment);
+  --_appearance-color-outline: transparent;
 }
-.base.connotation-alert {
-  /* @cssprop [--vvd-progress-ring-alert-primary=var(--vvd-color-alert-500)] */
-  --_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500));
+.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: var(--_connotation-color-faint);
+  --_appearance-color-outline: var(--_connotation-color-firm);
 }
-.base.connotation-success {
-  /* @cssprop [--vvd-progress-ring-success-primary=var(--vvd-color-success-500)] */
-  --_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500));
+.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: var(--_connotation-color-faint);
+  --_appearance-color-outline: transparent;
 }
-.base:not(.connotation-cta, .connotation-alert, .connotation-success) {
-  /* @cssprop [--vvd-progress-ring-accent-primary=var(--vvd-color-canvas-text)] */
-  --_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text));
+.control:where(:disabled, .disabled).appearance-filled {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: var(--vvd-color-neutral-100);
+  --_appearance-color-outline: transparent;
 }
-.base {
-  --_appearance-color-text: var(--_connotation-color-primary);
+.control:where(:disabled, .disabled).appearance-outlined {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
   --_appearance-color-fill: transparent;
-  --_appearance-color-outline: transparent;
+  --_appearance-color-outline: var(--vvd-color-neutral-300);
 }
-.base:where(:disabled, .disabled) {
+.control:where(:disabled, .disabled) {
   --_appearance-color-text: var(--vvd-color-neutral-300);
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: transparent;
 }
-.base.size--6 {
-  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
+.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {
+  --_appearance-color-text: var(--_connotation-color-primary-text);
+  --_appearance-color-fill: var(--_connotation-color-fierce);
+  --_appearance-color-outline: transparent;
 }
-.base.size--5 {
-  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));
+.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: var(--_connotation-color-soft);
+  --_appearance-color-outline: var(--_connotation-color-firm);
 }
-.base.size--4 {
-  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
+.control:where(:active, .active):where(:not(:disabled, .disabled)) {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: var(--_connotation-color-soft);
+  --_appearance-color-outline: transparent;
 }
-.base.size--3 {
-  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));
+.control .text {
+  /* stylelint-disable value-no-vendor-prefix */
+  display: -webkit-box;
+  /* stylelint-enable value-no-vendor-prefix */
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--button-line-clamp, 1);
+  max-inline-size: 100%;
 }
-.base.size--2 {
-  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));
+.control:not(.icon-only) {
+  inline-size: 100%;
 }
-.base.size--1 {
-  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 4));
+@supports selector(:focus-visible) {
+  .control:focus-visible {
+    outline: none;
+  }
 }
-.base.size-1 {
-  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 4));
+@supports (user-select: none) {
+  .control {
+    user-select: none;
+  }
 }
-.base.size-2 {
-  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));
+.control:not(:disabled) {
+  cursor: pointer;
 }
-.base.size-3 {
-  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 12));
+.control:disabled {
+  cursor: not-allowed;
 }
-.base.size-4 {
-  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));
+.control.icon-only {
+  contain: size;
+  padding-inline: 0;
+  place-content: center;
 }
-.base.size-5 {
-  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));
+@supports (aspect-ratio: 1) {
+  .control.icon-only {
+    aspect-ratio: 1;
+  }
+}
+@supports not (aspect-ratio: 1) {
+  .control.icon-only {
+    inline-size: var(--_button-block-size);
+  }
+}
+.control:not(.shape-pill) {
+  border-radius: 6px;
+}
+.control.shape-pill:not(.icon-only, .stacked) {
+  border-radius: 24px;
+}
+.control.shape-pill.stacked {
+  border-radius: 24px;
+}
+.control.shape-pill.icon-only {
+  border-radius: 50%;
+}
+.control:not(.stacked).size-super-condensed {
+  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
+  font: var(--vvd-typography-base-condensed-bold);
+}
+.control:not(.stacked).size-super-condensed:not(.icon-only) {
+  --_button-icon-gap: 4px;
+  padding-inline: 8px;
+}
+.control:not(.stacked).size-condensed {
+  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));
+  font: var(--vvd-typography-base-condensed-bold);
+}
+.control:not(.stacked).size-condensed:not(.icon-only) {
+  --_button-icon-gap: 8px;
+  padding-inline: 12px;
+}
+.control:not(.stacked).size-expanded {
+  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));
+  font: var(--vvd-typography-base-extended-bold);
+}
+.control:not(.stacked).size-expanded:not(.icon-only) {
+  --_button-icon-gap: 10px;
+  padding-inline: 20px;
+}
+.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed) {
+  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
+  font: var(--vvd-typography-base-bold);
+}
+.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {
+  --_button-icon-gap: 8px;
+  padding-inline: 16px;
+}
+.control.stacked {
+  flex-direction: column;
+  justify-content: center;
+}
+.control.stacked.size-super-condensed {
+  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
+  --_button-block-size: calc(var(--stacked-size) + 20px);
+  font: var(--vvd-typography-base-condensed-bold);
+}
+.control.stacked.size-super-condensed:not(.icon-only) {
+  --_button-icon-gap: 4px;
+  padding-inline: 8px;
+}
+.control.stacked.size-condensed {
+  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));
+  --_button-block-size: calc(var(--stacked-size) + 24px);
+  font: var(--vvd-typography-base-condensed-bold);
+}
+.control.stacked.size-condensed:not(.icon-only) {
+  --_button-icon-gap: 6px;
+  padding-inline: 12px;
+}
+.control.stacked.size-expanded {
+  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));
+  --_button-block-size: calc(var(--stacked-size) + 32px);
+  font: var(--vvd-typography-base-extended-bold);
+}
+.control.stacked.size-expanded:not(.icon-only) {
+  --_button-icon-gap: 10px;
+  padding-inline: 20px;
+}
+.control.stacked:not(.size-condensed, .size-expanded, .size-super-condensed) {
+  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
+  --_button-block-size: calc(var(--stacked-size) + 28px);
+  font: var(--vvd-typography-base-bold);
+}
+.control.stacked:not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {
+  --_button-icon-gap: 8px;
+  padding-inline: 16px;
+}
+
+/* Icon */
+slot[name=icon] {
+  line-height: 1;
+}
+.icon-trailing slot[name=icon] {
+  display: flex;
+  order: 1;
+}
+.control.stacked > slot[name=icon] {
+  font-size: calc(var(--stacked-size) / 2);
+}
+.control:not(.stacked) > slot[name=icon] {
+  font-size: calc(var(--_button-block-size) / 2);
+}
+
+.focus-indicator {
+  --focus-stroke-gap-color: transparent;
+}
+.appearance-filled .focus-indicator {
+  --focus-stroke-gap-color: unset;
+}
+.control:not(:focus-visible) > .focus-indicator {
+  display: none;
+}
+
+:host(:not([icon])) .pending {
+  position: absolute;
+}
+:host(:not([icon])) .pending + .text {
+  visibility: hidden;
+}:host {
+  display: contents;
+}
+
+.control {
+  display: contents;
+}
+.control.dp-0 {
+  --_elevation-fill: var(--vvd-color-surface-0dp);
+  --_elevation-shadow: var(--vvd-shadow-surface-0dp);
+}
+.control.dp-4 {
+  --_elevation-fill: var(--vvd-color-surface-4dp);
+  --_elevation-shadow: var(--vvd-shadow-surface-4dp);
+}
+.control.dp-8 {
+  --_elevation-fill: var(--vvd-color-surface-8dp);
+  --_elevation-shadow: var(--vvd-shadow-surface-8dp);
+}
+.control.dp-12 {
+  --_elevation-fill: var(--vvd-color-surface-12dp);
+  --_elevation-shadow: var(--vvd-shadow-surface-12dp);
+}
+.control.dp-16 {
+  --_elevation-fill: var(--vvd-color-surface-16dp);
+  --_elevation-shadow: var(--vvd-shadow-surface-16dp);
+}
+.control.dp-24 {
+  --_elevation-fill: var(--vvd-color-surface-24dp);
+  --_elevation-shadow: var(--vvd-shadow-surface-24dp);
+}
+.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {
+  --_elevation-fill: var(--vvd-color-surface-2dp);
+  --_elevation-shadow: var(--vvd-shadow-surface-2dp);
+}
+.control ::slotted(*) {
+  position: relative;
+  isolation: isolate;
+}
+.control ::slotted(*)::before {
+  position: absolute;
+  z-index: -1;
+  background: var(--_elevation-fill);
+  block-size: 100%;
+  border-radius: inherit;
+  content: "";
+  filter: var(--_elevation-shadow);
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  transition: background-color 0.15s linear, filter 0.15s linear;
+}
+.control.no-shadow ::slotted(*)::before {
+  filter: none;
+}/**
+ * Do not edit directly
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
+ */
+.base {
+  align-items: center;
+  block-size: var(--_size);
+  color: var(--_appearance-color-text);
+  inline-size: var(--_size);
+  outline: none;
+}
+.base.connotation-cta {
+  /* @cssprop [--vvd-progress-ring-cta-primary=var(--vvd-color-cta-500)] */
+  --_connotation-color-primary: var(--vvd-progress-ring-cta-primary, var(--vvd-color-cta-500));
+}
+.base.connotation-alert {
+  /* @cssprop [--vvd-progress-ring-alert-primary=var(--vvd-color-alert-500)] */
+  --_connotation-color-primary: var(--vvd-progress-ring-alert-primary, var(--vvd-color-alert-500));
+}
+.base.connotation-success {
+  /* @cssprop [--vvd-progress-ring-success-primary=var(--vvd-color-success-500)] */
+  --_connotation-color-primary: var(--vvd-progress-ring-success-primary, var(--vvd-color-success-500));
+}
+.base:not(.connotation-cta, .connotation-alert, .connotation-success) {
+  /* @cssprop [--vvd-progress-ring-accent-primary=var(--vvd-color-canvas-text)] */
+  --_connotation-color-primary: var(--vvd-progress-ring-accent-primary, var(--vvd-color-canvas-text));
+}
+.base {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: transparent;
+}
+.base:where(:disabled, .disabled) {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: transparent;
+}
+.base.size--6 {
+  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
+}
+.base.size--5 {
+  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));
+}
+.base.size--4 {
+  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
+}
+.base.size--3 {
+  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));
+}
+.base.size--2 {
+  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));
+}
+.base.size--1 {
+  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 4));
+}
+.base.size-1 {
+  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 4));
+}
+.base.size-2 {
+  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));
+}
+.base.size-3 {
+  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 12));
+}
+.base.size-4 {
+  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));
+}
+.base.size-5 {
+  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));
 }
 .base:not(.size--6, .size--5, .size--4, .size--3, .size--2, .size--1, .size-1, .size-2, .size-3, .size-4, .size-5) {
   --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
@@ -1102,20 +1419,46 @@ label {
   }
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .base {
   display: inline-flex;
-  overflow: hidden;
   align-items: center;
-  justify-content: center;
-  background-color: var(--_appearance-color-fill);
-  block-size: var(--_size);
-  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);
-  color: var(--_appearance-color-text);
-  inline-size: var(--_size);
-  vertical-align: middle;
-}
+  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 Wed, 22 Nov 2023 16:09:43 GMT
+ */
+.base {
+  display: inline-flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--_appearance-color-fill);
+  block-size: var(--_size);
+  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);
+  color: var(--_appearance-color-text);
+  inline-size: var(--_size);
+  vertical-align: middle;
+}
 .base.connotation-cta {
   /* @cssprop [--vvd-avatar-cta-primary=var(--vvd-color-cta-500)] */
   --_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));
@@ -1209,8 +1552,12 @@ label {
   object-fit: cover;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 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;
@@ -1222,6 +1569,7 @@ label {
   color: var(--_appearance-color-text);
   column-gap: 8px;
   font: var(--vvd-typography-base-condensed-bold);
+  inline-size: 100%;
   padding-inline: 8px;
   vertical-align: middle;
 }
@@ -1382,8 +1730,12 @@ slot[name=icon] {
   order: 1;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
+:host {
+  display: block;
+}
+
 .control {
   overflow: hidden;
   max-height: 160px;
@@ -1459,7 +1811,7 @@ slot[name=icon] {
   margin-inline-end: 8px;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .base {
   display: flex;
@@ -1499,7 +1851,7 @@ slot[name=icon] {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: flex;
@@ -1600,7 +1952,7 @@ slot[name=icon] {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: block;
@@ -1649,7 +2001,7 @@ header {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .control {
   position: relative;
@@ -1794,7 +2146,7 @@ slot[name=icon] {
   --focus-stroke-gap-color: transparent;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .base {
   z-index: 1;
@@ -1936,7 +2288,7 @@ slot[name=icon] {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .control {
   position: relative;
@@ -2038,7 +2390,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .control {
   position: relative;
@@ -2121,7 +2473,7 @@ slot[name=icon] {
   line-height: 1;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .base {
   display: flex;
@@ -2211,7 +2563,7 @@ slot[name=icon] {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .control {
   display: inline-flex;
@@ -2260,7 +2612,7 @@ slot[name=icon] {
   inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .base {
   height: 6px;
@@ -2412,7 +2764,88 @@ slot[name=icon] {
   }
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
+ */
+@supports selector(:focus-visible) {
+  .base:focus-visible {
+    outline: none;
+  }
+}
+:host {
+  display: flex;
+}
+
+.base {
+  position: relative;
+  padding: var(--selectable-box-spacing, 16px);
+  border: 1px solid var(--_appearance-color-outline);
+  background-color: var(--_appearance-color-fill);
+  border-radius: 6px;
+  inline-size: 100%;
+  padding-block-start: calc(var(--selectable-box-spacing, 16px) + 36px);
+  text-align: start;
+}
+.base.connotation-cta {
+  /* @cssprop [--vvd-selectable-box-cta-firm=var(--vvd-color-cta-600)] */
+  --_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));
+}
+.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));
+}
+.base {
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: var(--vvd-color-canvas);
+  --_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-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);
+  --_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);
+  --_appearance-color-outline: var(--_connotation-color-firm);
+}
+.base.tight {
+  overflow: hidden;
+  min-height: calc(var(--selectable-box-spacing, 16px) * 2 + 22px);
+  padding: 0;
+}
+.base.clickable {
+  cursor: pointer;
+}
+
+.focus-indicator {
+  --focus-stroke-gap-color: transparent;
+  --focus-inset: -1px;
+  pointer-events: none;
+}
+.base:not(:focus-visible) > .focus-indicator {
+  display: none;
+}
+
+.control {
+  position: absolute;
+  inset-block-start: var(--selectable-box-spacing, 16px);
+  inset-inline-end: var(--selectable-box-spacing, 16px);
+}/**
+ * Do not edit directly
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .control {
   position: fixed;
@@ -2459,7 +2892,7 @@ slot[name=icon] {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: inline-block;
@@ -2763,7 +3196,7 @@ slot[name=icon] {
   --focus-inset: -1px;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .base {
   --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
@@ -2922,7 +3355,7 @@ slot[name=icon] {
   gap: 8px;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .control {
   display: inline-block;
@@ -2947,7 +3380,7 @@ slot[name=icon] {
   margin-block-start: 16px;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .control {
   pointer-events: none;
@@ -2962,7 +3395,7 @@ slot[name=icon] {
   font: var(--vvd-typography-base-bold);
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3090,7 +3523,7 @@ slot[name=icon] {
   color: var(--vvd-color-neutral-600);
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .base {
   display: flex;
@@ -3102,7 +3535,7 @@ slot[name=icon] {
   border-bottom: 1px solid var(--vvd-color-neutral-200);
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: flex;
@@ -3164,377 +3597,62 @@ slot[name=icon] {
 }
 
 .heading-content {
-  flex: auto;
-}
-
-.meta {
-  overflow: hidden;
-  max-width: 20%;
-  flex-shrink: 0;
-  color: var(--vvd-color-neutral-600);
-  text-align: end;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.heading-button:not(.size-condensed) .meta {
-  font: var(--vvd-typography-base-bold);
-}
-.heading-button.size-condensed .meta {
-  font: var(--vvd-typography-base-condensed-bold);
-}
-
-.region {
-  display: none;
-  padding: 8px 32px 24px 16px;
-}
-.region:not(.size-condensed).padded {
-  padding-inline-start: 52px;
-}
-:host([expanded]) .region {
-  display: block;
-}
-.region.size-condensed.padded {
-  padding-inline-start: 44px;
-}
-
-slot[name=icon] {
-  color: var(--vvd-color-neutral-600);
-}
-.heading-button:not(.size-condensed) slot[name=icon] {
-  font: inherit;
-}
-.heading-button.size-condensed slot[name=icon] {
-  font: var(--vvd-typography-base-extended);
-}
-:host(:not([icon-trailing])) slot[name=icon]:last-of-type {
-  color: var(--_appearance-color-text);
-}
-
-.focus-indicator {
-  --focus-stroke-gap-color: transparent;
-}
-button:not(:focus-visible) > .focus-indicator {
-  display: none;
-}/**
- * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
- */
-:host {
-  display: inline-block;
-}
-
-.control {
-  position: relative;
-  display: inline-flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  border: 0 none;
-  margin: 0;
-  background-color: var(--_appearance-color-fill);
-  block-size: var(--_button-block-size);
-  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);
-  color: var(--_appearance-color-text);
-  gap: var(--_button-icon-gap);
-  vertical-align: middle;
-  /* Shape */
-  /* Size */
-}
-.control.connotation-cta {
-  /* @cssprop [--vvd-button-cta-primary=var(--vvd-color-cta-500)] */
-  --_connotation-color-primary: var(--vvd-button-cta-primary, var(--vvd-color-cta-500));
-  /* @cssprop [--vvd-button-cta-primary-text=var(--vvd-color-canvas)] */
-  --_connotation-color-primary-text: var(--vvd-button-cta-primary-text, var(--vvd-color-canvas));
-  /* @cssprop [--vvd-button-cta-primary-increment=var(--vvd-color-cta-600)] */
-  --_connotation-color-primary-increment: var(--vvd-button-cta-primary-increment, var(--vvd-color-cta-600));
-  /* @cssprop [--vvd-button-cta-contrast=var(--vvd-color-cta-800)] */
-  --_connotation-color-contrast: var(--vvd-button-cta-contrast, var(--vvd-color-cta-800));
-  /* @cssprop [--vvd-button-cta-fierce=var(--vvd-color-cta-700)] */
-  --_connotation-color-fierce: var(--vvd-button-cta-fierce, var(--vvd-color-cta-700));
-  /* @cssprop [--vvd-button-cta-firm=var(--vvd-color-cta-600)] */
-  --_connotation-color-firm: var(--vvd-button-cta-firm, var(--vvd-color-cta-600));
-  /* @cssprop [--vvd-button-cta-soft=var(--vvd-color-cta-100)] */
-  --_connotation-color-soft: var(--vvd-button-cta-soft, var(--vvd-color-cta-100));
-  /* @cssprop [--vvd-button-cta-faint=var(--vvd-color-cta-50)] */
-  --_connotation-color-faint: var(--vvd-button-cta-faint, var(--vvd-color-cta-50));
-}
-.control.connotation-success {
-  /* @cssprop [--vvd-button-success-primary=var(--vvd-color-success-500)] */
-  --_connotation-color-primary: var(--vvd-button-success-primary, var(--vvd-color-success-500));
-  /* @cssprop [--vvd-button-success-primary-text=var(--vvd-color-canvas)] */
-  --_connotation-color-primary-text: var(--vvd-button-success-primary-text, var(--vvd-color-canvas));
-  /* @cssprop [--vvd-button-success-primary-increment=var(--vvd-color-success-600)] */
-  --_connotation-color-primary-increment: var(--vvd-button-success-primary-increment, var(--vvd-color-success-600));
-  /* @cssprop [--vvd-button-success-contrast=var(--vvd-color-success-800)] */
-  --_connotation-color-contrast: var(--vvd-button-success-contrast, var(--vvd-color-success-800));
-  /* @cssprop [--vvd-button-success-fierce=var(--vvd-color-success-700)] */
-  --_connotation-color-fierce: var(--vvd-button-success-fierce, var(--vvd-color-success-700));
-  /* @cssprop [--vvd-button-success-firm=var(--vvd-color-success-600)] */
-  --_connotation-color-firm: var(--vvd-button-success-firm, var(--vvd-color-success-600));
-  /* @cssprop [--vvd-button-success-soft=var(--vvd-color-success-100)] */
-  --_connotation-color-soft: var(--vvd-button-success-soft, var(--vvd-color-success-100));
-  /* @cssprop [--vvd-button-success-faint=var(--vvd-color-success-50)] */
-  --_connotation-color-faint: var(--vvd-button-success-faint, var(--vvd-color-success-50));
-}
-.control.connotation-alert {
-  /* @cssprop [--vvd-button-alert-primary=var(--vvd-color-alert-500)] */
-  --_connotation-color-primary: var(--vvd-button-alert-primary, var(--vvd-color-alert-500));
-  /* @cssprop [--vvd-button-alert-primary-text=var(--vvd-color-canvas)] */
-  --_connotation-color-primary-text: var(--vvd-button-alert-primary-text, var(--vvd-color-canvas));
-  /* @cssprop [--vvd-button-alert-primary-increment=var(--vvd-color-alert-600)] */
-  --_connotation-color-primary-increment: var(--vvd-button-alert-primary-increment, var(--vvd-color-alert-600));
-  /* @cssprop [--vvd-button-alert-contrast=var(--vvd-color-alert-800)] */
-  --_connotation-color-contrast: var(--vvd-button-alert-contrast, var(--vvd-color-alert-800));
-  /* @cssprop [--vvd-button-alert-fierce=var(--vvd-color-alert-700)] */
-  --_connotation-color-fierce: var(--vvd-button-alert-fierce, var(--vvd-color-alert-700));
-  /* @cssprop [--vvd-button-alert-firm=var(--vvd-color-alert-600)] */
-  --_connotation-color-firm: var(--vvd-button-alert-firm, var(--vvd-color-alert-600));
-  /* @cssprop [--vvd-button-alert-soft=var(--vvd-color-alert-100)] */
-  --_connotation-color-soft: var(--vvd-button-alert-soft, var(--vvd-color-alert-100));
-  /* @cssprop [--vvd-button-alert-faint=var(--vvd-color-alert-50)] */
-  --_connotation-color-faint: var(--vvd-button-alert-faint, var(--vvd-color-alert-50));
-}
-.control:not(.connotation-cta, .connotation-success, .connotation-alert) {
-  /* @cssprop [--vvd-button-accent-primary=var(--vvd-color-canvas-text)] */
-  --_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));
-  /* @cssprop [--vvd-button-accent-primary-text=var(--vvd-color-canvas)] */
-  --_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));
-  /* @cssprop [--vvd-button-accent-primary-increment=var(--vvd-color-neutral-800)] */
-  --_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));
-  /* @cssprop [--vvd-button-accent-contrast=var(--vvd-color-neutral-800)] */
-  --_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));
-  /* @cssprop [--vvd-button-accent-fierce=var(--vvd-color-neutral-700)] */
-  --_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));
-  /* @cssprop [--vvd-button-accent-firm=var(--vvd-color-canvas-text)] */
-  --_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));
-  /* @cssprop [--vvd-button-accent-soft=var(--vvd-color-neutral-100)] */
-  --_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));
-  /* @cssprop [--vvd-button-accent-faint=var(--vvd-color-neutral-50)] */
-  --_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));
-}
-.control.appearance-filled {
-  --_appearance-color-text: var(--_connotation-color-primary-text);
-  --_appearance-color-fill: var(--_connotation-color-primary);
-  --_appearance-color-outline: transparent;
-}
-.control.appearance-outlined {
-  --_appearance-color-text: var(--_connotation-color-firm);
-  --_appearance-color-fill: transparent;
-  --_appearance-color-outline: var(--_connotation-color-firm);
-}
-.control {
-  --_appearance-color-text: var(--_connotation-color-primary);
-  --_appearance-color-fill: transparent;
-  --_appearance-color-outline: transparent;
-}
-.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {
-  --_appearance-color-text: var(--_connotation-color-primary-text);
-  --_appearance-color-fill: var(--_connotation-color-primary-increment);
-  --_appearance-color-outline: transparent;
-}
-.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-outlined {
-  --_appearance-color-text: var(--_connotation-color-firm);
-  --_appearance-color-fill: var(--_connotation-color-faint);
-  --_appearance-color-outline: var(--_connotation-color-firm);
-}
-.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
-  --_appearance-color-text: var(--_connotation-color-primary);
-  --_appearance-color-fill: var(--_connotation-color-faint);
-  --_appearance-color-outline: transparent;
-}
-.control:where(:disabled, .disabled).appearance-filled {
-  --_appearance-color-text: var(--vvd-color-neutral-300);
-  --_appearance-color-fill: var(--vvd-color-neutral-100);
-  --_appearance-color-outline: transparent;
-}
-.control:where(:disabled, .disabled).appearance-outlined {
-  --_appearance-color-text: var(--vvd-color-neutral-300);
-  --_appearance-color-fill: transparent;
-  --_appearance-color-outline: var(--vvd-color-neutral-300);
-}
-.control:where(:disabled, .disabled) {
-  --_appearance-color-text: var(--vvd-color-neutral-300);
-  --_appearance-color-fill: transparent;
-  --_appearance-color-outline: transparent;
-}
-.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-filled {
-  --_appearance-color-text: var(--_connotation-color-primary-text);
-  --_appearance-color-fill: var(--_connotation-color-fierce);
-  --_appearance-color-outline: transparent;
-}
-.control:where(:active, .active):where(:not(:disabled, .disabled)).appearance-outlined {
-  --_appearance-color-text: var(--_connotation-color-firm);
-  --_appearance-color-fill: var(--_connotation-color-soft);
-  --_appearance-color-outline: var(--_connotation-color-firm);
-}
-.control:where(:active, .active):where(:not(:disabled, .disabled)) {
-  --_appearance-color-text: var(--_connotation-color-primary);
-  --_appearance-color-fill: var(--_connotation-color-soft);
-  --_appearance-color-outline: transparent;
-}
-.control .text {
-  /* stylelint-disable value-no-vendor-prefix */
-  display: -webkit-box;
-  /* stylelint-enable value-no-vendor-prefix */
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: var(--button-line-clamp, 1);
-  max-inline-size: 100%;
-}
-.control:not(.icon-only) {
-  inline-size: 100%;
-}
-@supports selector(:focus-visible) {
-  .control:focus-visible {
-    outline: none;
-  }
-}
-@supports (user-select: none) {
-  .control {
-    user-select: none;
-  }
-}
-.control:not(:disabled) {
-  cursor: pointer;
-}
-.control:disabled {
-  cursor: not-allowed;
-}
-.control.icon-only {
-  contain: size;
-  padding-inline: 0;
-  place-content: center;
-}
-@supports (aspect-ratio: 1) {
-  .control.icon-only {
-    aspect-ratio: 1;
-  }
-}
-@supports not (aspect-ratio: 1) {
-  .control.icon-only {
-    inline-size: var(--_button-block-size);
-  }
-}
-.control:not(.shape-pill) {
-  border-radius: 6px;
-}
-.control.shape-pill:not(.icon-only, .stacked) {
-  border-radius: 24px;
-}
-.control.shape-pill.stacked {
-  border-radius: 24px;
-}
-.control.shape-pill.icon-only {
-  border-radius: 50%;
-}
-.control:not(.stacked).size-super-condensed {
-  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
-  font: var(--vvd-typography-base-condensed-bold);
-}
-.control:not(.stacked).size-super-condensed:not(.icon-only) {
-  --_button-icon-gap: 4px;
-  padding-inline: 8px;
-}
-.control:not(.stacked).size-condensed {
-  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));
-  font: var(--vvd-typography-base-condensed-bold);
-}
-.control:not(.stacked).size-condensed:not(.icon-only) {
-  --_button-icon-gap: 8px;
-  padding-inline: 12px;
-}
-.control:not(.stacked).size-expanded {
-  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));
-  font: var(--vvd-typography-base-extended-bold);
-}
-.control:not(.stacked).size-expanded:not(.icon-only) {
-  --_button-icon-gap: 10px;
-  padding-inline: 20px;
-}
-.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed) {
-  --_button-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
-  font: var(--vvd-typography-base-bold);
-}
-.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {
-  --_button-icon-gap: 8px;
-  padding-inline: 16px;
-}
-.control.stacked {
-  flex-direction: column;
-  justify-content: center;
-}
-.control.stacked.size-super-condensed {
-  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
-  --_button-block-size: calc(var(--stacked-size) + 20px);
-  font: var(--vvd-typography-base-condensed-bold);
+  flex: auto;
 }
-.control.stacked.size-super-condensed:not(.icon-only) {
-  --_button-icon-gap: 4px;
-  padding-inline: 8px;
+
+.meta {
+  overflow: hidden;
+  max-width: 20%;
+  flex-shrink: 0;
+  color: var(--vvd-color-neutral-600);
+  text-align: end;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.control.stacked.size-condensed {
-  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));
-  --_button-block-size: calc(var(--stacked-size) + 24px);
-  font: var(--vvd-typography-base-condensed-bold);
+.heading-button:not(.size-condensed) .meta {
+  font: var(--vvd-typography-base-bold);
 }
-.control.stacked.size-condensed:not(.icon-only) {
-  --_button-icon-gap: 6px;
-  padding-inline: 12px;
+.heading-button.size-condensed .meta {
+  font: var(--vvd-typography-base-condensed-bold);
 }
-.control.stacked.size-expanded {
-  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));
-  --_button-block-size: calc(var(--stacked-size) + 32px);
-  font: var(--vvd-typography-base-extended-bold);
+
+.region {
+  display: none;
+  padding: 8px 32px 24px 16px;
 }
-.control.stacked.size-expanded:not(.icon-only) {
-  --_button-icon-gap: 10px;
-  padding-inline: 20px;
+.region:not(.size-condensed).padded {
+  padding-inline-start: 52px;
 }
-.control.stacked:not(.size-condensed, .size-expanded, .size-super-condensed) {
-  --stacked-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
-  --_button-block-size: calc(var(--stacked-size) + 28px);
-  font: var(--vvd-typography-base-bold);
+:host([expanded]) .region {
+  display: block;
 }
-.control.stacked:not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {
-  --_button-icon-gap: 8px;
-  padding-inline: 16px;
+.region.size-condensed.padded {
+  padding-inline-start: 44px;
 }
 
-/* Icon */
 slot[name=icon] {
-  line-height: 1;
+  color: var(--vvd-color-neutral-600);
 }
-.icon-trailing slot[name=icon] {
-  display: flex;
-  order: 1;
+.heading-button:not(.size-condensed) slot[name=icon] {
+  font: inherit;
 }
-.control.stacked > slot[name=icon] {
-  font-size: calc(var(--stacked-size) / 2);
+.heading-button.size-condensed slot[name=icon] {
+  font: var(--vvd-typography-base-extended);
 }
-.control:not(.stacked) > slot[name=icon] {
-  font-size: calc(var(--_button-block-size) / 2);
+:host(:not([icon-trailing])) slot[name=icon]:last-of-type {
+  color: var(--_appearance-color-text);
 }
 
 .focus-indicator {
   --focus-stroke-gap-color: transparent;
 }
-.appearance-filled .focus-indicator {
-  --focus-stroke-gap-color: unset;
-}
-.control:not(:focus-visible) > .focus-indicator {
+button:not(:focus-visible) > .focus-indicator {
   display: none;
-}
-
-:host(:not([icon])) .pending {
-  position: absolute;
-}
-:host(:not([icon])) .pending + .text {
-  visibility: hidden;
 }.list {
   display: flex;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host([disabled]) {
   cursor: not-allowed;
@@ -3671,7 +3789,7 @@ dialog.fixed {
   transform: translate(0, -50%);
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .base {
   box-sizing: border-box;
@@ -3812,7 +3930,7 @@ slot[name=main] {
   border-radius: inherit;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .positioning-region {
   display: flex;
@@ -3831,7 +3949,7 @@ label {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3964,7 +4082,7 @@ slot[name=icon] {
   opacity: 0;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .base {
   display: grid;
@@ -4081,8 +4199,14 @@ slot[name=icon] {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
+:host {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: middle;
+}
+
 :host([disabled]) {
   cursor: not-allowed;
 }
@@ -4136,7 +4260,7 @@ slot[name=icon] {
   --_appearance-color-fill: var(--_connotation-color-primary);
   --_appearance-color-outline: var(--_connotation-color-primary);
 }
-.base:where(:checked, .checked):where(:hover, .hover) {
+.base:where(:checked, .checked):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: var(--_connotation-color-primary);
@@ -4268,7 +4392,7 @@ label {
   margin-inline-end: 4px;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: block;
@@ -4287,7 +4411,7 @@ label {
   inline-size: 1px;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: inline-block;
@@ -4395,14 +4519,16 @@ label {
   --_low-ink-color: var(--_appearance-color-text);
 }
 
-.label {
+.label:not(slot),
+.label::slotted(label) {
   color: var(--vvd-color-canvas-text);
   contain: inline-size;
   font: var(--vvd-typography-base);
   grid-column: 1/4;
   grid-row: 1;
 }
-.char-count + .label {
+.char-count + .label:not(slot),
+.char-count + .label::slotted(label) {
   grid-column: 1/3;
 }
 
@@ -4456,7 +4582,7 @@ label {
   outline: none;
 }
 
-.control {
+.control:not(slot), .control::slotted(input) {
   width: 100%;
   box-sizing: border-box;
   border: 0 none;
@@ -4470,19 +4596,19 @@ label {
   padding-inline-end: var(--_text-field-gutter);
   padding-inline-start: var(--_text-field-gutter);
 }
-.control:disabled {
+.control:not(slot):disabled, .control::slotted(input:disabled) {
   cursor: not-allowed;
   opacity: 1; /* 2. correct opacity on iOS */
   -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */
 }
-.control::placeholder, .control:disabled::placeholder {
-  opacity: 1; /* 2. correct opacity on iOS */
-  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */
+.control:not(slot)::placeholder {
+  opacity: 1 !important; /* 2. correct opacity on iOS */
+  -webkit-text-fill-color: var(--_low-ink-color) !important; /* 1. sets text fill to current `color` for safari */
 }
-.control:focus-visible {
+.control:not(slot):focus-visible, .control::slotted(input:focus-visible) {
   outline: none;
 }
-.has-icon .control {
+.has-icon .control:not(slot), .has-icon .control::slotted(input) {
   padding-inline-start: calc(var(--_text-field-icon-size) + var(--_text-field-gutter) * 2);
 }
 
@@ -4520,7 +4646,7 @@ label {
 }
 
 .control {
-  padding-inline-end: 70px;
+  padding-inline-end: 70px !important;
 }
 .control::-webkit-outer-spin-button, .control::-webkit-inner-spin-button {
   appearance: none;
@@ -4546,7 +4672,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4727,7 +4853,7 @@ label {
   --_select-control-border-radius: 6px;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host(.disabled) {
   cursor: not-allowed;
@@ -4830,7 +4956,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) {
@@ -4873,18 +4999,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);
@@ -4901,7 +5036,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   position: relative;
@@ -4909,7 +5044,7 @@ label {
 
 .control {
   display: flex;
-  padding-inline-end: 44px;
+  padding-inline-end: 44px !important;
 }
 
 .icon {
@@ -4965,7 +5100,7 @@ label {
   inline-size: 100%;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: block;
@@ -5080,7 +5215,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: inline-block;
@@ -5174,73 +5309,226 @@ label {
   /* @cssprop [--vvd-text-area-accent-soft=var(--vvd-color-neutral-100)] */
   --_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100));
 }
-@supports (user-select: none) {
-  .base {
-    user-select: none;
-  }
+@supports (user-select: none) {
+  .base {
+    user-select: none;
+  }
+}
+.base:not(.disabled) {
+  --_low-ink-color: var(--vvd-color-neutral-600);
+}
+.base.disabled {
+  --_low-ink-color: var(--_appearance-color-text);
+  cursor: not-allowed;
+}
+
+.label {
+  color: var(--vvd-color-canvas-text);
+  contain: inline-size;
+  font: var(--vvd-typography-base);
+  grid-column: 1/2;
+  grid-row: 1;
+  line-height: 20px;
+}
+
+.char-count {
+  color: var(--_low-ink-color);
+  font: var(--vvd-typography-base);
+  grid-column: 2/-1;
+}
+
+.control {
+  padding: 8px 16px;
+  border: 0 none;
+  appearance: none; /* for box-shadow visibility on IOS */
+  background-color: var(--_appearance-color-fill);
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);
+  color: var(--_appearance-color-text);
+  font: var(--vvd-typography-base);
+  grid-column: 1/-1;
+  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
+  resize: none;
+  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
+}
+.control:disabled {
+  opacity: 1; /* 2. correct opacity on iOS */
+  pointer-events: none;
+  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */
+}
+.control::placeholder, .control:disabled::placeholder {
+  opacity: 1; /* 2. correct opacity on iOS */
+  pointer-events: none;
+  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */
+}
+.control:focus {
+  outline: 2px solid var(--focus-stroke-color, currentColor);
+  outline-offset: -2px;
+}
+:host([resize=both]) .control {
+  resize: both;
+}
+:host([resize=horizontal]) .control {
+  resize: horizontal;
+}
+:host([resize=vertical]) .control {
+  resize: vertical;
+}/**
+ * Do not edit directly
+ * Generated on Wed, 22 Nov 2023 16:09:43 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;
 }
-.base:not(.disabled) {
-  --_low-ink-color: var(--vvd-color-neutral-600);
+.control[aria-orientation=horizontal] .thumb-container {
+  transform: translateX(calc(var(--_thumb-interaction-indicator-size) / 2));
 }
-.base.disabled {
-  --_low-ink-color: var(--_appearance-color-text);
-  cursor: not-allowed;
+.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);
 }
-
-.label {
-  color: var(--vvd-color-canvas-text);
-  contain: inline-size;
-  font: var(--vvd-typography-base);
-  grid-column: 1/2;
-  grid-row: 1;
-  line-height: 20px;
+.control[aria-orientation=vertical] .positioning-region {
+  height: 100%;
 }
-
-.char-count {
-  color: var(--_low-ink-color);
-  font: var(--vvd-typography-base);
-  grid-column: 2/-1;
+.control[aria-orientation=vertical] .track {
+  left: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);
+  width: 2px;
+  height: 100%;
 }
-
-.control {
-  padding: 8px 16px;
-  border: 0 none;
-  appearance: none; /* for box-shadow visibility on IOS */
-  background-color: var(--_appearance-color-fill);
-  border-radius: 6px;
-  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);
-  color: var(--_appearance-color-text);
-  font: var(--vvd-typography-base);
-  grid-column: 1/-1;
-  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
-  resize: none;
-  transition: box-shadow 0.2s, background-color 0.2s, color 0.2s;
+.control[aria-orientation=vertical] .track .mark {
+  width: 4px;
+  height: 100%;
 }
-.control:disabled {
-  opacity: 1; /* 2. correct opacity on iOS */
-  pointer-events: none;
-  -webkit-text-fill-color: var(--_appearance-color-text); /* 1. sets text fill to current `color` for safari */
+.control[aria-orientation=vertical] .track-start {
+  top: 0;
+  width: 100%;
+  height: auto;
 }
-.control::placeholder, .control:disabled::placeholder {
-  opacity: 1; /* 2. correct opacity on iOS */
+.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;
-  -webkit-text-fill-color: var(--_low-ink-color); /* 1. sets text fill to current `color` for safari */
 }
-.control:focus {
-  outline: 2px solid var(--focus-stroke-color, currentColor);
-  outline-offset: -2px;
+.control:not(.disabled) {
+  --_track-background-color: var(--vvd-color-neutral-300);
+  --_track-start-background-color: var(--_appearance-color-fill);
 }
-:host([resize=both]) .control {
-  resize: both;
+.control:not(.disabled) .thumb-container:hover {
+  --_thumb-interaction-indicator-alpha: 0.12;
 }
-:host([resize=horizontal]) .control {
-  resize: horizontal;
+.control:not(.disabled) .thumb-container:active {
+  --_thumb-interaction-indicator-alpha: 0.25;
 }
-:host([resize=vertical]) .control {
-  resize: vertical;
+
+.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 Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -5402,142 +5690,6 @@ label {
 }
 .base.two-lines .text-secondary {
   color: var(--vvd-color-neutral-600);
-}: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;
-}
-@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(--vvd-color-canvas-text);
-}
-.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;
 }
@@ -5557,7 +5709,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 .base {
   display: grid;
@@ -5622,16 +5774,20 @@ label {
 :host([row-type=hidden-header]) .base {
   display: none;
 }
-:host(:is([aria-selected]):not([row-type=header])) .base {
+:host(:is([aria-selected]):not([row-type*=header])) .base {
   background-color: var(--_appearance-color-fill);
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   min-inline-size: 80px;
 }
 
+:host(:focus-visible) {
+  outline: none;
+}
+
 .base {
   position: relative;
   display: flex;
@@ -5703,7 +5859,7 @@ label {
   --focus-stroke-gap-color: transparent;
   pointer-events: none;
 }
-.base:not(.active) > .focus-indicator {
+:host(:not(:focus)) .base > .focus-indicator {
   display: none;
 }
 
@@ -5719,7 +5875,7 @@ slot {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 ol {
   padding: 0;
@@ -5979,7 +6135,7 @@ ol {
   text-transform: uppercase;
 }/**
  * Do not edit directly
- * Generated on Tue, 17 Oct 2023 15:27:52 GMT
+ * Generated on Wed, 22 Nov 2023 16:09:43 GMT
  */
 :host {
   display: inline-block;
@@ -6000,29 +6156,40 @@ ol {
   padding: 12px;
   gap: 12px;
 }
-.dialog .header {
+.dialog .footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 8px;
+  gap: 8px;
+}
+
+.segments {
+  display: flex;
+  gap: 24px;
+}
+
+.segment {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.segment .header {
   display: flex;
   align-items: center;
   padding-block: 8px;
 }
-.dialog .title {
+.segment .title {
   display: flex;
   flex-grow: 1;
   justify-content: center;
 }
-.dialog .title-action {
+.segment .title-action {
   block-size: 24px;
   border-radius: 6px;
   font: var(--vvd-typography-base-extended);
   padding-inline: 6px;
 }
-.dialog .footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 8px;
-  gap: 8px;
-}
 
 .calendar {
   display: flex;