@vonage/vivid 3.34.0 → 3.36.0

package/style.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: inline-block;
@@ -317,7 +317,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   inline-size: inherit;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: contents;
@@ -335,7 +335,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   outline-offset: -2px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .message {
   display: flex;
@@ -360,7 +360,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   color: var(--vvd-color-alert-500);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: contents;
@@ -497,7 +497,58 @@ p {
   font: var(--vvd-typography-base-condensed);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ */
+.base {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  gap: 8px;
+  inline-size: max-content;
+  max-block-size: var(--menu-block-size, 408px);
+  max-inline-size: var(--menu-max-inline-size);
+  min-inline-size: var(--menu-min-inline-size);
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-block: 8px;
+}
+
+::slotted(a) {
+  color: var(--vvd-color-canvas-text);
+  text-decoration: none;
+}
+
+::slotted(a[role=menuitem]:focus) {
+  display: block;
+  border-radius: 6px;
+  box-shadow: inset 0 0 0 3px currentColor;
+  outline: 2px solid currentColor;
+  outline-offset: -2px;
+}
+
+.header {
+  padding-block-start: 8px;
+  padding-inline: 16px;
+}
+.hide-header .header {
+  display: none;
+}
+
+.hide-body .body {
+  display: none;
+}
+
+.action-items {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-inline: 8px;
+}
+.hide-actions .action-items {
+  display: none;
+}/**
+ * Do not edit directly
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -617,7 +668,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: inline-block;
@@ -701,7 +752,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: inline-block;
@@ -765,7 +816,7 @@ label {
   margin-block: 4px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .control {
   position: fixed;
@@ -922,7 +973,7 @@ label {
   filter: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   align-items: center;
@@ -1045,7 +1096,7 @@ label {
   }
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   display: inline-flex;
@@ -1070,6 +1121,8 @@ label {
   --_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));
   /* @cssprop [--vvd-avatar-cta-pale=var(--vvd-color-cta-300)] */
   --_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));
+  /* @cssprop [--vvd-avatar-cta-soft=var(--vvd-color-cta-100)] */
+  --_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));
 }
 .base:not(.connotation-cta) {
   /* @cssprop [--vvd-avatar-accent-primary=var(--vvd-color-canvas-text)] */
@@ -1082,6 +1135,8 @@ label {
   --_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));
   /* @cssprop [--vvd-avatar-accent-pale=var(--vvd-color-neutral-300)] */
   --_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));
+  /* @cssprop [--vvd-avatar-accent-soft=var(--vvd-color-neutral-100)] */
+  --_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));
 }
 .base {
   --_appearance-color-text: var(--_connotation-color-primary-text);
@@ -1098,6 +1153,11 @@ label {
   --_appearance-color-fill: transparent;
   --_appearance-color-outline: var(--_connotation-color-pale);
 }
+.base.appearance-subtle {
+  --_appearance-color-text: var(--_connotation-color-contrast);
+  --_appearance-color-fill: var(--_connotation-color-soft);
+  --_appearance-color-outline: transparent;
+}
 .base.size-condensed {
   --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));
 }
@@ -1143,7 +1203,7 @@ label {
   object-fit: cover;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));
@@ -1316,7 +1376,7 @@ label {
   order: 1;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .control {
   overflow: hidden;
@@ -1393,7 +1453,7 @@ label {
   margin-inline-end: 8px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   display: flex;
@@ -1433,7 +1493,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: flex;
@@ -1534,7 +1594,7 @@ label {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: block;
@@ -1583,7 +1643,7 @@ header {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .control {
   position: relative;
@@ -1727,7 +1787,7 @@ header {
   --focus-stroke-gap-color: transparent;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   z-index: 1;
@@ -1869,7 +1929,7 @@ header {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .control {
   position: relative;
@@ -1948,7 +2008,7 @@ header {
   display: none;
 }
 
-.icon {
+slot[name=icon] {
   font-size: 20px;
   line-height: 1;
 }
@@ -1971,7 +2031,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .control {
   position: relative;
@@ -2054,7 +2114,7 @@ details > summary::-webkit-details-marker {
   line-height: 1;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   display: flex;
@@ -2144,7 +2204,7 @@ details > summary::-webkit-details-marker {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .control {
   display: inline-flex;
@@ -2180,7 +2240,7 @@ details > summary::-webkit-details-marker {
   inline-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   height: 6px;
@@ -2332,7 +2392,7 @@ details > summary::-webkit-details-marker {
   }
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .control {
   position: fixed;
@@ -2379,7 +2439,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: inline-block;
@@ -2683,7 +2743,7 @@ details > summary::-webkit-details-marker {
   --focus-inset: -1px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
@@ -2818,13 +2878,10 @@ details > summary::-webkit-details-marker {
   white-space: nowrap;
 }
 
-.icon {
+slot[name=icon] {
   font-size: calc(var(--tag-block-size) / 1.5);
   line-height: 1;
 }
-.icon > * {
-  vertical-align: middle;
-}
 
 .dismiss-button {
   display: flex;
@@ -2834,6 +2891,9 @@ details > summary::-webkit-details-marker {
   cursor: pointer;
 }
 
+.focus-indicator {
+  --focus-stroke-gap-color: transparent;
+}
 .base:not(:focus-visible) .focus-indicator {
   display: none;
 }.base {
@@ -2842,7 +2902,7 @@ details > summary::-webkit-details-marker {
   gap: 8px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .control {
   display: inline-block;
@@ -2867,7 +2927,7 @@ details > summary::-webkit-details-marker {
   margin-block-start: 16px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .control {
   pointer-events: none;
@@ -2882,7 +2942,7 @@ details > summary::-webkit-details-marker {
   font: var(--vvd-typography-base-bold);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -2983,6 +3043,9 @@ details > summary::-webkit-details-marker {
 .expandCollapseButton:hover {
   background-color: var(--vvd-color-neutral-100);
 }
+.selected .expandCollapseButton:hover {
+  background-color: var(--vvd-color-neutral-700);
+}
 
 .items {
   display: flex;
@@ -3004,7 +3067,7 @@ details > summary::-webkit-details-marker {
   color: var(--vvd-color-neutral-600);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   display: flex;
@@ -3016,7 +3079,7 @@ details > summary::-webkit-details-marker {
   border-bottom: 1px solid var(--vvd-color-neutral-200);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: flex;
@@ -3131,7 +3194,7 @@ button:not(:focus-visible) > .focus-indicator {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: inline-block;
@@ -3447,7 +3510,7 @@ button:not(:focus-visible) > .focus-indicator {
   display: flex;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   position: relative; /* this is needed for the focus */
@@ -3581,7 +3644,7 @@ dialog.fixed {
   transform: translate(0, -50%);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   box-sizing: border-box;
@@ -3722,58 +3785,7 @@ slot[name=main] {
   border-radius: inherit;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
- */
-.base {
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  gap: 8px;
-  inline-size: max-content;
-  max-block-size: var(--menu-block-size, 408px);
-  max-inline-size: var(--menu-max-inline-size);
-  min-inline-size: var(--menu-min-inline-size);
-  overflow-x: hidden;
-  overflow-y: auto;
-  padding-block: 8px;
-}
-
-::slotted(a) {
-  color: var(--vvd-color-canvas-text);
-  text-decoration: none;
-}
-
-::slotted(a[role=menuitem]:focus) {
-  display: block;
-  border-radius: 6px;
-  box-shadow: inset 0 0 0 3px currentColor;
-  outline: 2px solid currentColor;
-  outline-offset: -2px;
-}
-
-.header {
-  padding-block-start: 8px;
-  padding-inline: 16px;
-}
-.hide-header .header {
-  display: none;
-}
-
-.hide-body .body {
-  display: none;
-}
-
-.action-items {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  padding-inline: 8px;
-}
-.hide-actions .action-items {
-  display: none;
-}/**
- * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .positioning-region {
   display: flex;
@@ -3792,7 +3804,7 @@ label {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3813,7 +3825,7 @@ label {
   background-color: var(--_appearance-color-fill);
   box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);
   color: var(--_appearance-color-text);
-  font: var(--vvd-typography-base);
+  font: var(--vvd-typography-base-bold);
   gap: var(--_tabs-tablist-gutter);
   min-block-size: 40px;
   vertical-align: middle;
@@ -3886,14 +3898,19 @@ label {
   padding-inline-start: calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter));
 }
 
+.focus-indicator {
+  --focus-stroke-gap-color: transparent;
+}
 :host(:not(:focus-visible)) .focus-indicator {
   display: none;
 }
 
-.icon {
+slot[name=icon] {
   font-size: 20px;
+  line-height: 1;
 }
-.icon-trailing .icon {
+.icon-trailing slot[name=icon] {
+  display: inline-block;
   order: 1;
   margin-inline-start: auto;
 }
@@ -3902,10 +3919,11 @@ label {
   position: absolute;
   background: currentColor;
   block-size: 2px;
+  border-radius: 2px;
   content: "";
-  inline-size: calc(100% + var(--_tabs-tablist-gutter) * 2);
+  inline-size: 100%;
   inset-block-end: 0;
-  margin-inline: calc(var(--_tabs-tablist-gutter) * -2);
+  inset-inline-start: 0;
   pointer-events: none;
   transition-property: opacity;
 }
@@ -3916,7 +3934,7 @@ label {
   opacity: 0;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   display: grid;
@@ -4015,7 +4033,7 @@ label {
   grid-column: 1/auto;
   inline-size: calc(var(--_tabs-active-tab-inline-size) - 32px);
   inset-block-end: 0;
-  inset-inline-start: 0;
+  inset-inline-start: 8px;
   justify-self: center;
   padding-inline: var(--_tabs-tablist-gutter);
 }
@@ -4033,7 +4051,7 @@ label {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   display: inline-flex;
@@ -4217,7 +4235,7 @@ label {
   margin-inline-end: 4px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: block;
@@ -4236,7 +4254,7 @@ label {
   inline-size: 1px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: block;
@@ -4351,164 +4369,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
- */
-@supports selector(:focus-visible) {
-  :host(:focus-visible) {
-    outline: none;
-  }
-}
-.base {
-  position: relative;
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  background-color: var(--_appearance-color-fill);
-  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);
-  gap: 12px;
-  inline-size: 100%;
-  padding-block: 2px;
-  padding-inline: 16px;
-}
-.base {
-  --_appearance-color-text: var(--_connotation-color-primary);
-  --_appearance-color-fill: transparent;
-  --_appearance-color-outline: transparent;
-}
-.base: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:where(:disabled, .disabled) {
-  --_appearance-color-text: var(--vvd-color-neutral-300);
-  --_appearance-color-fill: transparent;
-  --_appearance-color-outline: transparent;
-}
-.base: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:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {
-  --_appearance-color-text: var(--_connotation-color-primary);
-  --_appearance-color-fill: var(--_connotation-color-dim);
-  --_appearance-color-outline: transparent;
-}
-.base:where(.selected, [aria-current]):where(:hover, .hover) {
-  --_appearance-color-text: var(--_connotation-color-primary);
-  --_appearance-color-fill: var(--_connotation-color-pale);
-  --_appearance-color-outline: transparent;
-}
-.base {
-  /* @cssprop [--vvd-menu-item-accent-primary=var(--vvd-color-canvas-text)] */
-  --_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));
-  /* @cssprop [--vvd-menu-item-accent-primary-text=var(--vvd-color-canvas)] */
-  --_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));
-  /* @cssprop [--vvd-menu-item-accent-primary-increment=var(--vvd-color-neutral-800)] */
-  --_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));
-  /* @cssprop [--vvd-menu-item-accent-faint=var(--vvd-color-neutral-50)] */
-  --_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));
-  /* @cssprop [--vvd-menu-item-accent-soft=var(--vvd-color-neutral-100)] */
-  --_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));
-  /* @cssprop [--vvd-menu-item-accent-pale=var(--vvd-color-neutral-300)] */
-  --_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));
-  /* @cssprop [--vvd-menu-item-accent-dim=var(--vvd-color-neutral-200)] */
-  --_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200));
-}
-.base:not(.two-lines) {
-  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
-}
-.base.two-lines {
-  min-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));
-}
-@supports (user-select: none) {
-  .base {
-    user-select: none;
-  }
-}
-.base:not(.disabled) {
-  cursor: pointer;
-}
-.base.disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.focus-indicator {
-  border-radius: 6px;
-}
-:host(:not(:focus-visible)) .focus-indicator {
-  display: none;
-}
-
-.icon {
-  flex-shrink: 0;
-  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);
-  line-height: 1;
-}
-
-.action,
-.decorative {
-  display: flex;
-  place-content: center;
-}
-
-.action {
-  color: var(--_appearance-color-text);
-}
-.base.trailing .action {
-  order: 1;
-  margin-inline-start: auto;
-}
-.base.has-meta .action {
-  order: 1;
-  margin-inline-start: auto;
-}
-
-.base:not(.disabled) .decorative {
-  color: var(--vvd-color-neutral-600);
-}
-.base.disabled .decorative {
-  color: var(--vvd-color-neutral-200);
-}
-.base.has-meta .decorative {
-  order: 1;
-  margin-inline-start: auto;
-}
-
-.text {
-  display: flex;
-  overflow: hidden;
-  flex-direction: column;
-}
-
-.text-primary,
-.text-secondary {
-  /* stylelint-disable value-no-vendor-prefix */
-  display: -webkit-box;
-  /* stylelint-enable value-no-vendor-prefix */
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  color: var(--_appearance-color-text);
-  font: var(--vvd-typography-base);
-}
-
-.text-primary {
-  -webkit-line-clamp: var(--text-primary-line-clamp, 1);
-}
-.base.two-lines .text-primary {
-  font: var(--vvd-typography-base-bold);
-}
-
-.text-secondary {
-  -webkit-line-clamp: var(--text-secondary-line-clamp, 1);
-}
-.base.two-lines .text-secondary {
-  color: var(--vvd-color-neutral-600);
-}/**
- * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: inline-block;
@@ -4767,7 +4628,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4948,7 +4809,7 @@ label {
   --_select-control-border-radius: 6px;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .control {
   display: inline-flex;
@@ -5119,7 +4980,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   position: relative;
@@ -5183,7 +5044,7 @@ label {
   inline-size: 100%;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: inline-block;
@@ -5342,6 +5203,163 @@ label {
 }
 :host([resize=vertical]) .control {
   resize: vertical;
+}/**
+ * Do not edit directly
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
+ */
+@supports selector(:focus-visible) {
+  :host(:focus-visible) {
+    outline: none;
+  }
+}
+.base {
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  background-color: var(--_appearance-color-fill);
+  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);
+  gap: 12px;
+  inline-size: 100%;
+  padding-block: 2px;
+  padding-inline: 16px;
+}
+.base {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: transparent;
+}
+.base: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:where(:disabled, .disabled) {
+  --_appearance-color-text: var(--vvd-color-neutral-300);
+  --_appearance-color-fill: transparent;
+  --_appearance-color-outline: transparent;
+}
+.base: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:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: var(--_connotation-color-dim);
+  --_appearance-color-outline: transparent;
+}
+.base:where(.selected, [aria-current]):where(:hover, .hover) {
+  --_appearance-color-text: var(--_connotation-color-primary);
+  --_appearance-color-fill: var(--_connotation-color-pale);
+  --_appearance-color-outline: transparent;
+}
+.base {
+  /* @cssprop [--vvd-menu-item-accent-primary=var(--vvd-color-canvas-text)] */
+  --_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));
+  /* @cssprop [--vvd-menu-item-accent-primary-text=var(--vvd-color-canvas)] */
+  --_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));
+  /* @cssprop [--vvd-menu-item-accent-primary-increment=var(--vvd-color-neutral-800)] */
+  --_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));
+  /* @cssprop [--vvd-menu-item-accent-faint=var(--vvd-color-neutral-50)] */
+  --_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));
+  /* @cssprop [--vvd-menu-item-accent-soft=var(--vvd-color-neutral-100)] */
+  --_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));
+  /* @cssprop [--vvd-menu-item-accent-pale=var(--vvd-color-neutral-300)] */
+  --_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));
+  /* @cssprop [--vvd-menu-item-accent-dim=var(--vvd-color-neutral-200)] */
+  --_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200));
+}
+.base:not(.two-lines) {
+  min-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));
+}
+.base.two-lines {
+  min-block-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16)));
+}
+@supports (user-select: none) {
+  .base {
+    user-select: none;
+  }
+}
+.base:not(.disabled) {
+  cursor: pointer;
+}
+.base.disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.focus-indicator {
+  border-radius: 6px;
+}
+:host(:not(:focus-visible)) .focus-indicator {
+  display: none;
+}
+
+.icon {
+  flex-shrink: 0;
+  font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);
+  line-height: 1;
+}
+
+.action,
+.decorative {
+  display: flex;
+  place-content: center;
+}
+
+.action {
+  color: var(--_appearance-color-text);
+}
+.base.trailing .action {
+  order: 1;
+  margin-inline-start: auto;
+}
+.base.has-meta .action {
+  order: 1;
+  margin-inline-start: auto;
+}
+
+.base:not(.disabled) .decorative {
+  color: var(--vvd-color-neutral-600);
+}
+.base.disabled .decorative {
+  color: var(--vvd-color-neutral-200);
+}
+.base.has-meta .decorative {
+  order: 1;
+  margin-inline-start: auto;
+}
+
+.text {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+}
+
+.text-primary,
+.text-secondary {
+  /* stylelint-disable value-no-vendor-prefix */
+  display: -webkit-box;
+  /* stylelint-enable value-no-vendor-prefix */
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  color: var(--_appearance-color-text);
+  font: var(--vvd-typography-base);
+}
+
+.text-primary {
+  -webkit-line-clamp: var(--text-primary-line-clamp, 1);
+}
+.base.two-lines .text-primary {
+  font: var(--vvd-typography-base-bold);
+}
+
+.text-secondary {
+  -webkit-line-clamp: var(--text-secondary-line-clamp, 1);
+}
+.base.two-lines .text-secondary {
+  color: var(--vvd-color-neutral-600);
 }:host {
   display: inline-block;
   width: 100%;
@@ -5494,7 +5512,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 .base {
   display: grid;
@@ -5563,7 +5581,7 @@ label {
   background-color: var(--_appearance-color-fill);
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   min-inline-size: 80px;
@@ -5656,7 +5674,7 @@ slot {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 ol {
   padding: 0;
@@ -5916,7 +5934,7 @@ ol {
   text-transform: uppercase;
 }/**
  * Do not edit directly
- * Generated on Mon, 04 Sep 2023 12:44:18 GMT
+ * Generated on Wed, 13 Sep 2023 10:58:27 GMT
  */
 :host {
   display: inline-block;