@vonage/vivid 3.42.0 → 3.43.0

package/style.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: inline-block;
@@ -319,7 +319,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   inline-size: inherit;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: contents;
@@ -337,7 +337,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   outline-offset: -2px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .message {
   display: flex;
@@ -362,7 +362,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   color: var(--vvd-color-alert-500);
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: contents;
@@ -499,7 +499,7 @@ p {
   font: var(--vvd-typography-base-condensed);
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   display: flex;
@@ -550,7 +550,7 @@ p {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -673,7 +673,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: inline-block;
@@ -760,7 +760,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: inline-block;
@@ -824,7 +824,7 @@ label {
   margin-block: 4px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .control {
   position: fixed;
@@ -927,7 +927,7 @@ label {
   padding-inline-start: 8px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: inline-block;
@@ -1296,7 +1296,7 @@ slot[name=icon] {
   filter: none;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   align-items: center;
@@ -1419,7 +1419,7 @@ slot[name=icon] {
   }
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   display: inline-flex;
@@ -1445,7 +1445,7 @@ slot[name=icon] {
   min-inline-size: 32px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   display: inline-flex;
@@ -1502,7 +1502,7 @@ slot[name=icon] {
   --_appearance-color-outline: var(--_connotation-color-firm);
 }
 .base.appearance-duotone {
-  --_appearance-color-text: var(--_connotation-color-fierce);
+  --_appearance-color-text: var(--_connotation-color-firm);
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: var(--_connotation-color-pale);
 }
@@ -1556,7 +1556,7 @@ slot[name=icon] {
   object-fit: cover;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: inline-block;
@@ -1592,6 +1592,8 @@ slot[name=icon] {
   --_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));
   /* @cssprop [--vvd-badge-cta-fierce=var(--vvd-color-cta-700)] */
   --_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));
+  /* @cssprop [--vvd-badge-cta-firm=var(--vvd-color-cta-600)] */
+  --_connotation-color-firm: var(--vvd-badge-cta-firm, var(--vvd-color-cta-600));
 }
 .base.connotation-success {
   /* @cssprop [--vvd-badge-success-primary=var(--vvd-color-success-500)] */
@@ -1608,6 +1610,8 @@ slot[name=icon] {
   --_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));
   /* @cssprop [--vvd-badge-success-fierce=var(--vvd-color-success-700)] */
   --_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));
+  /* @cssprop [--vvd-badge-success-firm=var(--vvd-color-success-600)] */
+  --_connotation-color-firm: var(--vvd-badge-success-firm, var(--vvd-color-success-600));
 }
 .base.connotation-alert {
   /* @cssprop [--vvd-badge-alert-primary=var(--vvd-color-alert-500)] */
@@ -1624,6 +1628,8 @@ slot[name=icon] {
   --_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));
   /* @cssprop [--vvd-badge-alert-fierce=var(--vvd-color-alert-700)] */
   --_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));
+  /* @cssprop [--vvd-badge-alert-firm=var(--vvd-color-alert-600)] */
+  --_connotation-color-firm: var(--vvd-badge-alert-firm, var(--vvd-color-alert-600));
 }
 .base.connotation-warning {
   /* @cssprop [--vvd-badge-warning-primary=var(--vvd-color-warning-300)] */
@@ -1640,6 +1646,8 @@ slot[name=icon] {
   --_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));
   /* @cssprop [--vvd-badge-warning-fierce=var(--vvd-color-warning-700)] */
   --_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));
+  /* @cssprop [--vvd-badge-warning-firm=var(--vvd-color-warning-600)] */
+  --_connotation-color-firm: var(--vvd-badge-warning-firm, var(--vvd-color-warning-600));
 }
 .base.connotation-information {
   /* @cssprop [--vvd-badge-information-primary=var(--vvd-color-information-500)] */
@@ -1656,6 +1664,8 @@ slot[name=icon] {
   --_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));
   /* @cssprop [--vvd-badge-information-fierce=var(--vvd-color-information-700)] */
   --_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));
+  /* @cssprop [--vvd-badge-information-firm=var(--vvd-color-information-600)] */
+  --_connotation-color-firm: var(--vvd-badge-information-firm, var(--vvd-color-information-600));
 }
 .base:not(.connotation-cta, .connotation-success, .connotation-alert, .connotation-warning, .connotation-information) {
   /* @cssprop [--vvd-badge-accent-primary=var(--vvd-color-canvas-text)] */
@@ -1672,6 +1682,8 @@ slot[name=icon] {
   --_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));
   /* @cssprop [--vvd-badge-accent-fierce=var(--vvd-color-neutral-700)] */
   --_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));
+  /* @cssprop [--vvd-badge-accent-firm=var(--vvd-color-canvas-text)] */
+  --_connotation-color-firm: var(--vvd-badge-accent-firm, var(--vvd-color-canvas-text));
 }
 .base {
   --_appearance-color-text: var(--_connotation-color-primary-text);
@@ -1679,7 +1691,7 @@ slot[name=icon] {
   --_appearance-color-outline: transparent;
 }
 .base.appearance-duotone {
-  --_appearance-color-text: var(--_connotation-color-fierce);
+  --_appearance-color-text: var(--_connotation-color-firm);
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: var(--_connotation-color-pale);
 }
@@ -1734,7 +1746,7 @@ slot[name=icon] {
   order: 1;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: block;
@@ -1815,7 +1827,7 @@ slot[name=icon] {
   margin-inline-end: 8px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   display: flex;
@@ -1855,7 +1867,7 @@ slot[name=icon] {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: flex;
@@ -1956,7 +1968,7 @@ slot[name=icon] {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: block;
@@ -2005,7 +2017,7 @@ header {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .control {
   position: relative;
@@ -2150,7 +2162,7 @@ slot[name=icon] {
   --focus-stroke-gap-color: transparent;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   z-index: 1;
@@ -2292,7 +2304,7 @@ slot[name=icon] {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .control {
   position: relative;
@@ -2309,6 +2321,7 @@ slot[name=icon] {
   hyphens: auto;
   inline-size: 100%;
   min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
+  padding-block: 10px;
   padding-inline: 16px;
   text-decoration: none;
   vertical-align: middle;
@@ -2394,7 +2407,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .control {
   position: relative;
@@ -2462,6 +2475,7 @@ details > summary::-webkit-details-marker {
   place-content: center;
 }
 .control:not(.icon-only) {
+  padding-block: 10px;
   padding-inline: 16px;
 }
 
@@ -2477,7 +2491,7 @@ slot[name=icon] {
   line-height: 1;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   display: flex;
@@ -2486,52 +2500,52 @@ slot[name=icon] {
   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);
+  color: var(--vvd-color-canvas-text);
   column-gap: 16px;
 }
 .base.connotation-success {
-  /* @cssprop [--vvd-note-success-primary=var(--vvd-color-success-500)] */
-  --_connotation-color-primary: var(--vvd-note-success-primary, var(--vvd-color-success-500));
   /* @cssprop [--vvd-note-success-intermediate=var(--vvd-color-success-500)] */
   --_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));
-  /* @cssprop [--vvd-note-success-backdrop=var(--vvd-color-success-50)] */
-  --_connotation-color-backdrop: var(--vvd-note-success-backdrop, var(--vvd-color-success-50));
+  /* @cssprop [--vvd-note-success-faint=var(--vvd-color-success-50)] */
+  --_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));
+  /* @cssprop [--vvd-note-success-fierce=var(--vvd-color-success-700)] */
+  --_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700));
 }
 .base.connotation-information {
-  /* @cssprop [--vvd-note-information-primary=var(--vvd-color-information-500)] */
-  --_connotation-color-primary: var(--vvd-note-information-primary, var(--vvd-color-information-500));
   /* @cssprop [--vvd-note-information-intermediate=var(--vvd-color-information-500)] */
   --_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));
-  /* @cssprop [--vvd-note-information-backdrop=var(--vvd-color-information-50)] */
-  --_connotation-color-backdrop: var(--vvd-note-information-backdrop, var(--vvd-color-information-50));
+  /* @cssprop [--vvd-note-information-faint=var(--vvd-color-information-50)] */
+  --_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));
+  /* @cssprop [--vvd-note-information-fierce=var(--vvd-color-information-700)] */
+  --_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700));
 }
 .base.connotation-alert {
-  /* @cssprop [--vvd-note-alert-primary=var(--vvd-color-alert-500)] */
-  --_connotation-color-primary: var(--vvd-note-alert-primary, var(--vvd-color-alert-500));
   /* @cssprop [--vvd-note-alert-intermediate=var(--vvd-color-alert-500)] */
   --_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));
-  /* @cssprop [--vvd-note-alert-backdrop=var(--vvd-color-alert-50)] */
-  --_connotation-color-backdrop: var(--vvd-note-alert-backdrop, var(--vvd-color-alert-50));
+  /* @cssprop [--vvd-note-alert-faint=var(--vvd-color-alert-50)] */
+  --_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));
+  /* @cssprop [--vvd-note-alert-fierce=var(--vvd-color-alert-700)] */
+  --_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700));
 }
 .base.connotation-warning {
-  /* @cssprop [--vvd-note-warning-primary=var(--vvd-color-warning-300)] */
-  --_connotation-color-primary: var(--vvd-note-warning-primary, var(--vvd-color-warning-300));
   /* @cssprop [--vvd-note-warning-intermediate=var(--vvd-color-warning-300)] */
   --_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));
-  /* @cssprop [--vvd-note-warning-backdrop=var(--vvd-color-warning-50)] */
-  --_connotation-color-backdrop: var(--vvd-note-warning-backdrop, var(--vvd-color-warning-50));
+  /* @cssprop [--vvd-note-warning-faint=var(--vvd-color-warning-50)] */
+  --_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));
+  /* @cssprop [--vvd-note-warning-fierce=var(--vvd-color-warning-700)] */
+  --_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700));
 }
 .base:not(.connotation-success, .connotation-information, .connotation-alert, .connotation-warning) {
-  /* @cssprop [--vvd-note-accent-primary=var(--vvd-color-canvas-text)] */
-  --_connotation-color-primary: var(--vvd-note-accent-primary, var(--vvd-color-canvas-text));
   /* @cssprop [--vvd-note-accent-intermediate=var(--vvd-color-neutral-500)] */
   --_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));
-  /* @cssprop [--vvd-note-accent-backdrop=var(--vvd-color-canvas)] */
-  --_connotation-color-backdrop: var(--vvd-note-accent-backdrop, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-note-accent-faint=var(--vvd-color-neutral-50)] */
+  --_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));
+  /* @cssprop [--vvd-note-accent-fierce=var(--vvd-color-neutral-700)] */
+  --_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700));
 }
 .base {
-  --_appearance-color-text: var(--vvd-color-canvas-text);
-  --_appearance-color-fill: var(--_connotation-color-backdrop);
+  --_appearance-color-text: var(--_connotation-color-fierce);
+  --_appearance-color-fill: var(--_connotation-color-faint);
   --_appearance-color-outline: var(--_connotation-color-intermediate);
 }
 @supports (contain: content) {
@@ -2567,7 +2581,7 @@ slot[name=icon] {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .control {
   display: inline-flex;
@@ -2616,7 +2630,7 @@ slot[name=icon] {
   inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   height: 6px;
@@ -2768,7 +2782,7 @@ slot[name=icon] {
   }
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 @supports selector(:focus-visible) {
   .base:focus-visible {
@@ -2798,6 +2812,8 @@ slot[name=icon] {
   --_connotation-color-fierce: var(--vvd-selectable-box-cta-fierce, var(--vvd-color-cta-700));
   /* @cssprop [--vvd-selectable-box-cta-faint=var(--vvd-color-cta-50)] */
   --_connotation-color-faint: var(--vvd-selectable-box-cta-faint, var(--vvd-color-cta-50));
+  /* @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)] */
@@ -2808,24 +2824,26 @@ slot[name=icon] {
   --_connotation-color-fierce: var(--vvd-selectable-box-accent-fierce, var(--vvd-color-neutral-700));
   /* @cssprop [--vvd-selectable-box-accent-faint=var(--vvd-color-neutral-50)] */
   --_connotation-color-faint: var(--vvd-selectable-box-accent-faint, var(--vvd-color-neutral-50));
+  /* @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-fierce);
+  --_appearance-color-text: var(--_connotation-color-firm);
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: var(--_connotation-color-pale);
 }
 .base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
-  --_appearance-color-text: var(--_connotation-color-fierce);
+  --_appearance-color-text: var(--_connotation-color-firm);
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: var(--_connotation-color-firm);
 }
 .base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {
-  --_appearance-color-text: var(--_connotation-color-fierce);
-  --_appearance-color-fill: var(--_connotation-color-faint);
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: var(--_connotation-color-soft);
   --_appearance-color-outline: var(--_connotation-color-pale);
 }
 .base:where(.selected, [aria-current]):where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {
-  --_appearance-color-text: var(--_connotation-color-fierce);
+  --_appearance-color-text: var(--_connotation-color-firm);
   --_appearance-color-fill: var(--_connotation-color-faint);
   --_appearance-color-outline: var(--_connotation-color-firm);
 }
@@ -2853,7 +2871,7 @@ slot[name=icon] {
   inset-inline-end: var(--selectable-box-spacing, 16px);
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .control {
   position: fixed;
@@ -2900,7 +2918,7 @@ slot[name=icon] {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: inline-block;
@@ -3242,7 +3260,7 @@ slot[name=icon] {
   --focus-inset: -1px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
@@ -3299,7 +3317,7 @@ slot[name=icon] {
   --_appearance-color-outline: transparent;
 }
 .base.appearance-duotone {
-  --_appearance-color-text: var(--_connotation-color-fierce);
+  --_appearance-color-text: var(--_connotation-color-firm);
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: var(--_connotation-color-pale);
 }
@@ -3309,7 +3327,7 @@ slot[name=icon] {
   --_appearance-color-outline: transparent;
 }
 .base:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-duotone {
-  --_appearance-color-text: var(--_connotation-color-fierce);
+  --_appearance-color-text: var(--_connotation-color-firm);
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: var(--_connotation-color-firm);
 }
@@ -3319,7 +3337,7 @@ slot[name=icon] {
   --_appearance-color-outline: transparent;
 }
 .base:where(:active, .active):where(:not(:disabled, .disabled)).appearance-duotone {
-  --_appearance-color-text: var(--_connotation-color-fierce);
+  --_appearance-color-text: var(--_connotation-color-firm);
   --_appearance-color-fill: var(--_connotation-color-faint);
   --_appearance-color-outline: var(--_connotation-color-pale);
 }
@@ -3339,8 +3357,8 @@ slot[name=icon] {
   --_appearance-color-outline: transparent;
 }
 .base:where(.selected, [aria-current]):where(:not(:disabled, .disabled)).appearance-duotone {
-  --_appearance-color-text: var(--_connotation-color-fierce);
-  --_appearance-color-fill: var(--_connotation-color-faint);
+  --_appearance-color-text: var(--_connotation-color-firm);
+  --_appearance-color-fill: var(--_connotation-color-soft);
   --_appearance-color-outline: var(--_connotation-color-pale);
 }
 .base:not(.shape-pill) {
@@ -3401,7 +3419,7 @@ slot[name=icon] {
   gap: 8px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .control {
   display: inline-block;
@@ -3426,7 +3444,7 @@ slot[name=icon] {
   margin-block-start: 16px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .control {
   pointer-events: none;
@@ -3441,7 +3459,7 @@ slot[name=icon] {
   font: var(--vvd-typography-base-bold);
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3569,7 +3587,7 @@ slot[name=icon] {
   color: var(--vvd-color-neutral-600);
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   display: flex;
@@ -3581,7 +3599,7 @@ slot[name=icon] {
   border-bottom: 1px solid var(--vvd-color-neutral-200);
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: flex;
@@ -3698,7 +3716,7 @@ button:not(:focus-visible) > .focus-indicator {
   display: flex;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host([disabled]) {
   cursor: not-allowed;
@@ -3835,7 +3853,7 @@ dialog.fixed {
   transform: translate(0, -50%);
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   box-sizing: border-box;
@@ -3976,7 +3994,7 @@ slot[name=main] {
   border-radius: inherit;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .positioning-region {
   display: flex;
@@ -3995,7 +4013,7 @@ label {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4128,7 +4146,7 @@ slot[name=icon] {
   opacity: 0;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   display: grid;
@@ -4246,7 +4264,7 @@ slot[name=icon] {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: inline-flex;
@@ -4394,52 +4412,9 @@ label {
 .message {
   margin-block-start: 4px;
   --_low-ink-color: var(--vvd-color-neutral-600);
-}.control {
-  background: var(--vvd-color-surface-4dp);
-  border-radius: inherit;
-  contain: layout;
-}
-.control:not(.open) {
-  display: none;
-}
-
-.popup-wrapper {
-  z-index: 10;
-  border-radius: 6px;
-  inline-size: fit-content;
-}
-.popup-wrapper:not(.absolute) {
-  position: fixed;
-}
-.popup-wrapper.absolute {
-  position: absolute;
-}
-
-.popup-content {
-  display: grid;
-  color: var(--vvd-color-canvas-text); /* neutral-100 */
-}
-.dismissible .popup-content {
-  align-content: start;
-  grid-template-columns: 1fr auto;
-}
-
-.arrow {
-  position: absolute;
-  z-index: -1;
-  width: 8px;
-  height: 8px;
-  background: var(--vvd-color-surface-4dp);
-  transform: rotate(45deg);
-}
-
-.dismissible-button {
-  align-self: flex-start;
-  margin-block-start: 4px;
-  margin-inline-end: 4px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: block;
@@ -4458,7 +4433,7 @@ label {
   inline-size: 1px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: inline-block;
@@ -4719,7 +4694,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4900,7 +4875,7 @@ label {
   --_select-control-border-radius: 6px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host(.disabled) {
   cursor: not-allowed;
@@ -5083,7 +5058,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   position: relative;
@@ -5147,7 +5122,7 @@ label {
   inline-size: 100%;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: block;
@@ -5262,7 +5237,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: inline-block;
@@ -5422,7 +5397,7 @@ label {
   resize: vertical;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: inline-block;
@@ -5573,9 +5548,52 @@ label {
 }
 .control:not(:focus-visible) .focus-indicator {
   display: none;
+}.control {
+  background: var(--vvd-color-surface-4dp);
+  border-radius: inherit;
+  contain: layout;
+}
+.control:not(.open) {
+  display: none;
+}
+
+.popup-wrapper {
+  z-index: 10;
+  border-radius: 6px;
+  inline-size: fit-content;
+}
+.popup-wrapper:not(.absolute) {
+  position: fixed;
+}
+.popup-wrapper.absolute {
+  position: absolute;
+}
+
+.popup-content {
+  display: grid;
+  color: var(--vvd-color-canvas-text); /* neutral-100 */
+}
+.dismissible .popup-content {
+  align-content: start;
+  grid-template-columns: 1fr auto;
+}
+
+.arrow {
+  position: absolute;
+  z-index: -1;
+  width: 8px;
+  height: 8px;
+  background: var(--vvd-color-surface-4dp);
+  transform: rotate(45deg);
+}
+
+.dismissible-button {
+  align-self: flex-start;
+  margin-block-start: 4px;
+  margin-inline-end: 4px;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -5756,7 +5774,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 .base {
   display: grid;
@@ -5825,7 +5843,7 @@ label {
   background-color: var(--_appearance-color-fill);
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   min-inline-size: 80px;
@@ -5922,7 +5940,7 @@ slot {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 ol {
   padding: 0;
@@ -6182,7 +6200,7 @@ ol {
   text-transform: uppercase;
 }/**
  * Do not edit directly
- * Generated on Thu, 30 Nov 2023 11:42:28 GMT
+ * Generated on Mon, 11 Dec 2023 11:36:24 GMT
  */
 :host {
   display: inline-block;