@vonage/vivid 3.35.0 → 3.37.0

package/style.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -317,7 +317,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   inline-size: inherit;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: contents;
@@ -335,7 +335,7 @@ slot, svg, ::slotted(:where(svg, img)) {
   outline-offset: -2px;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 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 Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: contents;
@@ -497,7 +497,58 @@ p {
   font: var(--vvd-typography-base-condensed);
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 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 Tue, 26 Sep 2023 13:00:58 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -617,7 +668,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -701,7 +752,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -765,7 +816,7 @@ label {
   margin-block: 4px;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   position: fixed;
@@ -922,7 +973,7 @@ label {
   filter: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   align-items: center;
@@ -1045,7 +1096,7 @@ label {
   }
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: inline-flex;
@@ -1152,7 +1203,7 @@ label {
   object-fit: cover;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   --_badge-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));
@@ -1315,17 +1366,17 @@ label {
 }
 
 /* Icon */
-.icon {
-  display: flex;
+slot[name=icon] {
   flex-shrink: 0;
   font-size: calc(var(--_badge-block-size) / 1.6667);
   line-height: 1;
 }
-.icon-trailing .icon {
+.icon-trailing slot[name=icon] {
+  display: flex;
   order: 1;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   overflow: hidden;
@@ -1389,7 +1440,7 @@ label {
   inline-size: 100%;
   padding-inline: 16px;
 }
-.header .content .icon {
+.header .content slot[name=icon] {
   flex-shrink: 0;
   font-size: 20px;
   line-height: 1;
@@ -1402,7 +1453,7 @@ label {
   margin-inline-end: 8px;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: flex;
@@ -1442,7 +1493,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: flex;
@@ -1543,7 +1594,7 @@ label {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: block;
@@ -1592,7 +1643,7 @@ header {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   position: relative;
@@ -1716,16 +1767,17 @@ header {
 }
 
 /* Icon */
-.icon {
+slot[name=icon] {
   line-height: 1;
 }
-.icon-trailing .icon {
+.icon-trailing slot[name=icon] {
+  display: inline-block;
   order: 1;
 }
-.control.size-extended .icon {
+.control.size-extended slot[name=icon] {
   font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16)) / 2.3333);
 }
-.control:not(.size-extended) .icon {
+.control:not(.size-extended) slot[name=icon] {
   font-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2))) / 2);
 }
 
@@ -1736,7 +1788,7 @@ header {
   --focus-stroke-gap-color: transparent;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   z-index: 1;
@@ -1878,7 +1930,7 @@ header {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   position: relative;
@@ -1957,7 +2009,7 @@ header {
   display: none;
 }
 
-.icon {
+slot[name=icon] {
   font-size: 20px;
   line-height: 1;
 }
@@ -1980,7 +2032,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   position: relative;
@@ -2063,7 +2115,7 @@ details > summary::-webkit-details-marker {
   line-height: 1;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: flex;
@@ -2153,7 +2205,7 @@ details > summary::-webkit-details-marker {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   display: inline-flex;
@@ -2189,7 +2241,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 Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   height: 6px;
@@ -2341,7 +2393,7 @@ details > summary::-webkit-details-marker {
   }
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   position: fixed;
@@ -2388,7 +2440,7 @@ details > summary::-webkit-details-marker {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -2692,7 +2744,7 @@ details > summary::-webkit-details-marker {
   --focus-inset: -1px;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   --tag-block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));
@@ -2827,13 +2879,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;
@@ -2843,6 +2892,9 @@ details > summary::-webkit-details-marker {
   cursor: pointer;
 }
 
+.focus-indicator {
+  --focus-stroke-gap-color: transparent;
+}
 .base:not(:focus-visible) .focus-indicator {
   display: none;
 }.base {
@@ -2851,7 +2903,7 @@ details > summary::-webkit-details-marker {
   gap: 8px;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   display: inline-block;
@@ -2876,7 +2928,7 @@ details > summary::-webkit-details-marker {
   margin-block-start: 16px;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   pointer-events: none;
@@ -2891,7 +2943,7 @@ details > summary::-webkit-details-marker {
   font: var(--vvd-typography-base-bold);
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -2992,6 +3044,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;
@@ -3005,15 +3060,15 @@ details > summary::-webkit-details-marker {
   display: none;
 }
 
-.icon {
+slot[name=icon] {
   font-size: 20px;
   line-height: 1;
 }
-.control:not(.disabled, .selected) .icon {
+.control:not(.disabled, .selected) slot[name=icon] {
   color: var(--vvd-color-neutral-600);
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: flex;
@@ -3025,7 +3080,7 @@ details > summary::-webkit-details-marker {
   border-bottom: 1px solid var(--vvd-color-neutral-200);
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: flex;
@@ -3120,16 +3175,16 @@ details > summary::-webkit-details-marker {
   padding-inline-start: 44px;
 }
 
-.icon {
+slot[name=icon] {
   color: var(--vvd-color-neutral-600);
 }
-.heading-button:not(.size-condensed) .icon {
+.heading-button:not(.size-condensed) slot[name=icon] {
   font: inherit;
 }
-.heading-button.size-condensed .icon {
+.heading-button.size-condensed slot[name=icon] {
   font: var(--vvd-typography-base-extended);
 }
-:host(:not([icon-trailing])) .icon:last-of-type {
+:host(:not([icon-trailing])) slot[name=icon]:last-of-type {
   color: var(--_appearance-color-text);
 }
 
@@ -3140,7 +3195,7 @@ button:not(:focus-visible) > .focus-indicator {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -3456,7 +3511,7 @@ button:not(:focus-visible) > .focus-indicator {
   display: flex;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   position: relative; /* this is needed for the focus */
@@ -3590,7 +3645,7 @@ dialog.fixed {
   transform: translate(0, -50%);
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   box-sizing: border-box;
@@ -3731,58 +3786,7 @@ slot[name=main] {
   border-radius: inherit;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 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, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .positioning-region {
   display: flex;
@@ -3801,7 +3805,7 @@ label {
   font: var(--vvd-typography-base);
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -3822,7 +3826,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;
@@ -3895,14 +3899,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;
 }
@@ -3911,10 +3920,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;
 }
@@ -3925,7 +3935,7 @@ label {
   opacity: 0;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: grid;
@@ -4024,7 +4034,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);
 }
@@ -4042,7 +4052,7 @@ label {
   gap: 4px;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: inline-flex;
@@ -4226,7 +4236,7 @@ label {
   margin-inline-end: 4px;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: block;
@@ -4245,7 +4255,7 @@ label {
   inline-size: 1px;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: block;
@@ -4360,164 +4370,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 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 Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -4776,7 +4629,7 @@ label {
   pointer-events: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 @supports selector(:focus-visible) {
   :host(:focus-visible) {
@@ -4957,7 +4810,7 @@ label {
   --_select-control-border-radius: 6px;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .control {
   display: inline-flex;
@@ -5128,7 +4981,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   position: relative;
@@ -5192,7 +5045,7 @@ label {
   inline-size: 100%;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;
@@ -5351,6 +5204,167 @@ label {
 }
 :host([resize=vertical]) .control {
   resize: vertical;
+}/**
+ * Do not edit directly
+ * Generated on Tue, 26 Sep 2023 13:00:58 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;
+}
+
+.chevron {
+  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%;
@@ -5503,7 +5517,7 @@ label {
   display: none;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 .base {
   display: grid;
@@ -5572,7 +5586,7 @@ label {
   background-color: var(--_appearance-color-fill);
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   min-inline-size: 80px;
@@ -5665,7 +5679,7 @@ slot {
   margin-inline-start: auto;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 ol {
   padding: 0;
@@ -5925,7 +5939,7 @@ ol {
   text-transform: uppercase;
 }/**
  * Do not edit directly
- * Generated on Wed, 06 Sep 2023 09:40:36 GMT
+ * Generated on Tue, 26 Sep 2023 13:00:58 GMT
  */
 :host {
   display: inline-block;