@vonage/vivid 3.38.0 → 3.40.0

package/style.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 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 Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: contents;
@@ -335,7 +337,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   outline-offset: -2px;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 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 Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: contents;
@@ -497,7 +499,7 @@ p {
   font: var(--vvd-typography-base-condensed);
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .base {
   display: flex;
@@ -548,7 +550,7 @@ p {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 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 Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: inline-block;
@@ -758,7 +760,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: inline-block;
@@ -822,7 +824,7 @@ label {
   margin-block: 4px;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 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, 01 Nov 2023 12:16:28 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 Fri, 13 Oct 2023 14:45:50 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, 01 Nov 2023 12:16:28 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,7 +1419,7 @@ label {
   }
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .base {
   display: inline-flex;
@@ -1209,7 +1526,7 @@ label {
   object-fit: cover;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .base {
   --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));
@@ -1382,8 +1699,12 @@ slot[name=icon] {
   order: 1;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
+:host {
+  display: block;
+}
+
 .control {
   overflow: hidden;
   max-height: 160px;
@@ -1459,7 +1780,7 @@ slot[name=icon] {
   margin-inline-end: 8px;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .base {
   display: flex;
@@ -1499,7 +1820,7 @@ slot[name=icon] {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: flex;
@@ -1600,7 +1921,7 @@ slot[name=icon] {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: block;
@@ -1649,7 +1970,7 @@ header {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .control {
   position: relative;
@@ -1794,7 +2115,7 @@ slot[name=icon] {
   --focus-stroke-gap-color: transparent;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .base {
   z-index: 1;
@@ -1936,7 +2257,7 @@ slot[name=icon] {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .control {
   position: relative;
@@ -2038,7 +2359,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .control {
   position: relative;
@@ -2121,7 +2442,7 @@ slot[name=icon] {
   line-height: 1;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .base {
   display: flex;
@@ -2211,7 +2532,7 @@ slot[name=icon] {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .control {
   display: inline-flex;
@@ -2260,7 +2581,7 @@ slot[name=icon] {
   inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .base {
   height: 6px;
@@ -2412,13 +2733,94 @@ slot[name=icon] {
   }
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
-.control {
-  position: fixed;
-  z-index: 1;
-  background-color: var(--vvd-color-canvas);
-  color: var(--vvd-color-canvas-text);
+@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, 01 Nov 2023 12:16:28 GMT
+ */
+.control {
+  position: fixed;
+  z-index: 1;
+  background-color: var(--vvd-color-canvas);
+  color: var(--vvd-color-canvas-text);
   inline-size: 280px;
   inset-block: 0;
   overflow-y: auto;
@@ -2459,7 +2861,7 @@ slot[name=icon] {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: inline-block;
@@ -2763,7 +3165,7 @@ slot[name=icon] {
   --focus-inset: -1px;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .base {
   --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
@@ -2922,7 +3324,7 @@ slot[name=icon] {
   gap: 8px;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .control {
   display: inline-block;
@@ -2947,7 +3349,7 @@ slot[name=icon] {
   margin-block-start: 16px;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .control {
   pointer-events: none;
@@ -2962,7 +3364,7 @@ slot[name=icon] {
   font: var(--vvd-typography-base-bold);
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3090,7 +3492,7 @@ slot[name=icon] {
   color: var(--vvd-color-neutral-600);
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .base {
   display: flex;
@@ -3102,7 +3504,7 @@ slot[name=icon] {
   border-bottom: 1px solid var(--vvd-color-neutral-200);
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: flex;
@@ -3114,427 +3516,112 @@ slot[name=icon] {
   margin: 0;
 }
 
-.heading-button {
-  position: relative;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  padding: 16px;
-  border: none;
-  background-color: var(--_appearance-color-fill);
-  color: var(--_appearance-color-text);
-  cursor: pointer;
-  text-align: left;
-}
-.heading-button {
-  --_appearance-color-text: var(--_connotation-color-primary);
-  --_appearance-color-fill: transparent;
-  --_appearance-color-outline: transparent;
-}
-.heading-button: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;
-}
-.heading-button: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;
-}
-.heading-button {
-  /* @cssprop [--vvd-accordion-item-accent-primary=var(--vvd-color-canvas-text)] */
-  --_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));
-  /* @cssprop [--vvd-accordion-item-accent-faint=var(--vvd-color-neutral-50)] */
-  --_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));
-  /* @cssprop [--vvd-accordion-item-accent-soft=var(--vvd-color-neutral-100)] */
-  --_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));
-}
-@supports selector(:focus-visible) {
-  .heading-button:focus-visible {
-    outline: none;
-  }
-}
-.heading-button.size-condensed {
-  font: var(--vvd-typography-base-bold);
-  gap: 12px;
-}
-.heading-button:not(.size-condensed) {
-  font: var(--vvd-typography-heading-4);
-  gap: 16px;
-}
-
-.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 Fri, 13 Oct 2023 14:45:50 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);
+.heading-button {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 16px;
+  border: none;
+  background-color: var(--_appearance-color-fill);
+  color: var(--_appearance-color-text);
+  cursor: pointer;
+  text-align: left;
 }
-.control:where(:disabled, .disabled) {
-  --_appearance-color-text: var(--vvd-color-neutral-300);
+.heading-button {
+  --_appearance-color-text: var(--_connotation-color-primary);
   --_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);
+.heading-button: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(: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)) {
+.heading-button: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%;
+.heading-button {
+  /* @cssprop [--vvd-accordion-item-accent-primary=var(--vvd-color-canvas-text)] */
+  --_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));
+  /* @cssprop [--vvd-accordion-item-accent-faint=var(--vvd-color-neutral-50)] */
+  --_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));
+  /* @cssprop [--vvd-accordion-item-accent-soft=var(--vvd-color-neutral-100)] */
+  --_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));
 }
 @supports selector(:focus-visible) {
-  .control:focus-visible {
+  .heading-button: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)));
+.heading-button.size-condensed {
   font: var(--vvd-typography-base-bold);
+  gap: 12px;
 }
-.control:not(.stacked):not(.size-condensed, .size-expanded, .size-super-condensed):not(.icon-only) {
-  --_button-icon-gap: 8px;
-  padding-inline: 16px;
+.heading-button:not(.size-condensed) {
+  font: var(--vvd-typography-heading-4);
+  gap: 16px;
 }
-.control.stacked {
-  flex-direction: column;
-  justify-content: center;
+
+.heading-content {
+  flex: auto;
 }
-.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);
+
+.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-super-condensed:not(.icon-only) {
-  --_button-icon-gap: 4px;
-  padding-inline: 8px;
+.heading-button:not(.size-condensed) .meta {
+  font: var(--vvd-typography-base-bold);
 }
-.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);
+.heading-button.size-condensed .meta {
   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);
+
+.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 Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host([disabled]) {
   cursor: not-allowed;
@@ -3671,7 +3758,7 @@ dialog.fixed {
   transform: translate(0, -50%);
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .base {
   box-sizing: border-box;
@@ -3812,7 +3899,7 @@ slot[name=main] {
   border-radius: inherit;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .positioning-region {
   display: flex;
@@ -3831,7 +3918,7 @@ label {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3964,7 +4051,7 @@ slot[name=icon] {
   opacity: 0;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .base {
   display: grid;
@@ -4081,8 +4168,14 @@ slot[name=icon] {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
+:host {
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: middle;
+}
+
 :host([disabled]) {
   cursor: not-allowed;
 }
@@ -4136,7 +4229,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 +4361,7 @@ label {
   margin-inline-end: 4px;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: block;
@@ -4287,7 +4380,7 @@ label {
   inline-size: 1px;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: inline-block;
@@ -4395,14 +4488,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 +4551,7 @@ label {
   outline: none;
 }
 
-.control {
+.control:not(slot), .control::slotted(input) {
   width: 100%;
   box-sizing: border-box;
   border: 0 none;
@@ -4470,19 +4565,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 +4615,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 +4641,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4727,7 +4822,7 @@ label {
   --_select-control-border-radius: 6px;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host(.disabled) {
   cursor: not-allowed;
@@ -4901,7 +4996,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   position: relative;
@@ -4909,7 +5004,7 @@ label {
 
 .control {
   display: flex;
-  padding-inline-end: 44px;
+  padding-inline-end: 44px !important;
 }
 
 .icon {
@@ -4965,7 +5060,7 @@ label {
   inline-size: 100%;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: block;
@@ -5080,7 +5175,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: inline-block;
@@ -5240,7 +5335,7 @@ label {
   resize: vertical;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -5402,7 +5497,11 @@ label {
 }
 .base.two-lines .text-secondary {
   color: var(--vvd-color-neutral-600);
-}:host {
+}/**
+ * Do not edit directly
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
+ */
+:host {
   display: inline-block;
   width: 100%;
 }
@@ -5424,6 +5523,19 @@ label {
   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;
@@ -5522,7 +5634,7 @@ label {
 }
 .control:not(.disabled) {
   --_track-background-color: var(--vvd-color-neutral-300);
-  --_track-start-background-color: var(--vvd-color-canvas-text);
+  --_track-start-background-color: var(--_appearance-color-fill);
 }
 .control:not(.disabled) .thumb-container:hover {
   --_thumb-interaction-indicator-alpha: 0.12;
@@ -5557,7 +5669,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 .base {
   display: grid;
@@ -5622,16 +5734,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 Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   min-inline-size: 80px;
 }
 
+:host(:focus-visible) {
+  outline: none;
+}
+
 .base {
   position: relative;
   display: flex;
@@ -5703,7 +5819,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 +5835,7 @@ slot {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 ol {
   padding: 0;
@@ -5979,7 +6095,7 @@ ol {
   text-transform: uppercase;
 }/**
  * Do not edit directly
- * Generated on Fri, 13 Oct 2023 14:45:50 GMT
+ * Generated on Wed, 01 Nov 2023 12:16:28 GMT
  */
 :host {
   display: inline-block;
@@ -6000,29 +6116,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;