@womp/kookie-ui 0.22.1 → 0.24.0

package/styles.css

@@ -3480,30 +3480,9 @@
 }
 .kui-theme,
 [data-accent-color]:where(:not([data-accent-color=''], [data-accent-color='gray'])) {
-  --focus-1: var(--accent-1);
-  --focus-2: var(--accent-2);
-  --focus-3: var(--accent-3);
-  --focus-4: var(--accent-4);
-  --focus-5: var(--accent-5);
-  --focus-6: var(--accent-6);
-  --focus-7: var(--accent-7);
   --focus-8: var(--accent-8);
-  --focus-9: var(--accent-9);
-  --focus-10: var(--accent-10);
-  --focus-11: var(--accent-11);
-  --focus-12: var(--accent-12);
-  --focus-a1: var(--accent-a1);
   --focus-a2: var(--accent-a2);
-  --focus-a3: var(--accent-a3);
-  --focus-a4: var(--accent-a4);
   --focus-a5: var(--accent-a5);
-  --focus-a6: var(--accent-a6);
-  --focus-a7: var(--accent-a7);
-  --focus-a8: var(--accent-a8);
-  --focus-a9: var(--accent-a9);
-  --focus-a10: var(--accent-a10);
-  --focus-a11: var(--accent-a11);
-  --focus-a12: var(--accent-a12);
   --accent-ink-mix: 45%;
   --accent-ink: color-mix(in oklab, var(--accent-11), var(--accent-12) var(--accent-ink-mix));
   --accent-ink-muted: color-mix(in oklab, var(--accent-ink) 74%, transparent);
@@ -5695,26 +5674,26 @@
   border-radius: var(--radius-surface-1);
 }
 .kui-AccordionRoot:where(.kui-r-size-2) {
-  border-radius: var(--radius-surface-1);
+  border-radius: var(--radius-surface-2);
 }
 .kui-AccordionRoot:where(.kui-r-size-3) {
-  border-radius: var(--radius-surface-1);
+  border-radius: var(--radius-surface-3);
 }
 .kui-AccordionRoot:where(.kui-r-size-4) {
-  border-radius: var(--radius-surface-1);
+  border-radius: var(--radius-surface-4);
 }
 @media (min-width: 520px) {
   .kui-AccordionRoot:where(.xs\:kui-r-size-1) {
     border-radius: var(--radius-surface-1);
   }
   .kui-AccordionRoot:where(.xs\:kui-r-size-2) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-2);
   }
   .kui-AccordionRoot:where(.xs\:kui-r-size-3) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-3);
   }
   .kui-AccordionRoot:where(.xs\:kui-r-size-4) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-4);
   }
 }
 @media (min-width: 768px) {
@@ -5722,13 +5701,13 @@
     border-radius: var(--radius-surface-1);
   }
   .kui-AccordionRoot:where(.sm\:kui-r-size-2) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-2);
   }
   .kui-AccordionRoot:where(.sm\:kui-r-size-3) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-3);
   }
   .kui-AccordionRoot:where(.sm\:kui-r-size-4) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-4);
   }
 }
 @media (min-width: 1024px) {
@@ -5736,13 +5715,13 @@
     border-radius: var(--radius-surface-1);
   }
   .kui-AccordionRoot:where(.md\:kui-r-size-2) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-2);
   }
   .kui-AccordionRoot:where(.md\:kui-r-size-3) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-3);
   }
   .kui-AccordionRoot:where(.md\:kui-r-size-4) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-4);
   }
 }
 @media (min-width: 1280px) {
@@ -5750,13 +5729,13 @@
     border-radius: var(--radius-surface-1);
   }
   .kui-AccordionRoot:where(.lg\:kui-r-size-2) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-2);
   }
   .kui-AccordionRoot:where(.lg\:kui-r-size-3) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-3);
   }
   .kui-AccordionRoot:where(.lg\:kui-r-size-4) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-4);
   }
 }
 @media (min-width: 1640px) {
@@ -5764,13 +5743,13 @@
     border-radius: var(--radius-surface-1);
   }
   .kui-AccordionRoot:where(.xl\:kui-r-size-2) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-2);
   }
   .kui-AccordionRoot:where(.xl\:kui-r-size-3) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-3);
   }
   .kui-AccordionRoot:where(.xl\:kui-r-size-4) {
-    border-radius: var(--radius-surface-1);
+    border-radius: var(--radius-surface-4);
   }
 }
 :where(.kui-AccordionRoot:where(.kui-variant-surface)) {
@@ -5845,6 +5824,33 @@
   padding: var(--space-6) var(--space-7);
   font-size: var(--font-size-4);
 }
+.kui-AccordionChevron {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  width: var(--icon-size-2);
+  height: var(--icon-size-2);
+  -webkit-margin-start: var(--space-3);
+          margin-inline-start: var(--space-3);
+  color: var(--neutral-a11);
+}
+:where(.kui-AccordionTrigger[data-state='open']) .kui-AccordionChevron {
+  rotate: 180deg;
+}
+:where(.kui-AccordionRoot:where(.kui-r-size-1)) .kui-AccordionChevron {
+  width: var(--icon-size-1);
+  height: var(--icon-size-1);
+}
+:where(.kui-AccordionRoot:where(.kui-r-size-3)) .kui-AccordionChevron {
+  width: var(--icon-size-3);
+  height: var(--icon-size-3);
+}
+:where(.kui-AccordionRoot:where(.kui-r-size-4)) .kui-AccordionChevron {
+  width: var(--icon-size-4);
+  height: var(--icon-size-4);
+}
+:where(.kui-AccordionTrigger[data-disabled]) .kui-AccordionChevron {
+  color: inherit;
+}
 @media (hover: hover) {
   :where(.kui-AccordionTrigger:hover) {
     background-color: var(--neutral-a3);
@@ -5915,7 +5921,6 @@
   line-height: var(--line-height-4);
   -webkit-transform-origin: top;
           transform-origin: top;
-  will-change: height, opacity, transform;
 }
 .kui-AccordionContentInner {
   padding: 0 var(--space-5) var(--space-4);
@@ -7092,6 +7097,17 @@
   will-change: border-radius;
   isolation: isolate;
 }
+.kui-Chip :where(svg) {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+  width: var(--chip-icon-size);
+  height: var(--chip-icon-size);
+}
+.kui-Chip:where(:focus-visible) {
+  outline: var(--focus-ring-width) solid var(--focus-8);
+  outline-offset: var(--focus-ring-offset);
+}
 @media (forced-colors: active) {
   .kui-Chip {
     border: 1px solid CanvasText;
@@ -7100,6 +7116,7 @@
   }
 }
 .kui-Chip:where(.kui-r-size-1) {
+  --chip-icon-size: var(--icon-size-1);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
   letter-spacing: var(--letter-spacing-1);
@@ -7108,6 +7125,7 @@
   border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
 }
 .kui-Chip:where(.kui-r-size-2) {
+  --chip-icon-size: var(--icon-size-2);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
   letter-spacing: var(--letter-spacing-1);
@@ -7119,6 +7137,7 @@
   padding: var(--space-1) var(--space-2);
 }
 .kui-Chip:where(.kui-r-size-3) {
+  --chip-icon-size: var(--icon-size-3);
   font-size: var(--font-size-2);
   line-height: var(--line-height-2);
   letter-spacing: var(--letter-spacing-2);
@@ -7131,6 +7150,7 @@
   gap: var(--space-2);
 }
 .kui-Chip:where(.kui-r-size-4) {
+  --chip-icon-size: var(--icon-size-4);
   font-size: var(--font-size-3);
   line-height: var(--line-height-3);
   letter-spacing: var(--letter-spacing-3);
@@ -7143,6 +7163,7 @@
 }
 @media (min-width: 520px) {
   .kui-Chip:where(.xs\:kui-r-size-1) {
+    --chip-icon-size: var(--icon-size-1);
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
@@ -7151,6 +7172,7 @@
     border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
   }
   .kui-Chip:where(.xs\:kui-r-size-2) {
+    --chip-icon-size: var(--icon-size-2);
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
@@ -7162,6 +7184,7 @@
     padding: var(--space-1) var(--space-2);
   }
   .kui-Chip:where(.xs\:kui-r-size-3) {
+    --chip-icon-size: var(--icon-size-3);
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
@@ -7174,6 +7197,7 @@
     gap: var(--space-2);
   }
   .kui-Chip:where(.xs\:kui-r-size-4) {
+    --chip-icon-size: var(--icon-size-4);
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     letter-spacing: var(--letter-spacing-3);
@@ -7187,6 +7211,7 @@
 }
 @media (min-width: 768px) {
   .kui-Chip:where(.sm\:kui-r-size-1) {
+    --chip-icon-size: var(--icon-size-1);
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
@@ -7195,6 +7220,7 @@
     border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
   }
   .kui-Chip:where(.sm\:kui-r-size-2) {
+    --chip-icon-size: var(--icon-size-2);
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
@@ -7206,6 +7232,7 @@
     padding: var(--space-1) var(--space-2);
   }
   .kui-Chip:where(.sm\:kui-r-size-3) {
+    --chip-icon-size: var(--icon-size-3);
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
@@ -7218,6 +7245,7 @@
     gap: var(--space-2);
   }
   .kui-Chip:where(.sm\:kui-r-size-4) {
+    --chip-icon-size: var(--icon-size-4);
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     letter-spacing: var(--letter-spacing-3);
@@ -7231,6 +7259,7 @@
 }
 @media (min-width: 1024px) {
   .kui-Chip:where(.md\:kui-r-size-1) {
+    --chip-icon-size: var(--icon-size-1);
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
@@ -7239,6 +7268,7 @@
     border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
   }
   .kui-Chip:where(.md\:kui-r-size-2) {
+    --chip-icon-size: var(--icon-size-2);
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
@@ -7250,6 +7280,7 @@
     padding: var(--space-1) var(--space-2);
   }
   .kui-Chip:where(.md\:kui-r-size-3) {
+    --chip-icon-size: var(--icon-size-3);
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
@@ -7262,6 +7293,7 @@
     gap: var(--space-2);
   }
   .kui-Chip:where(.md\:kui-r-size-4) {
+    --chip-icon-size: var(--icon-size-4);
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     letter-spacing: var(--letter-spacing-3);
@@ -7275,6 +7307,7 @@
 }
 @media (min-width: 1280px) {
   .kui-Chip:where(.lg\:kui-r-size-1) {
+    --chip-icon-size: var(--icon-size-1);
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
@@ -7283,6 +7316,7 @@
     border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
   }
   .kui-Chip:where(.lg\:kui-r-size-2) {
+    --chip-icon-size: var(--icon-size-2);
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
@@ -7294,6 +7328,7 @@
     padding: var(--space-1) var(--space-2);
   }
   .kui-Chip:where(.lg\:kui-r-size-3) {
+    --chip-icon-size: var(--icon-size-3);
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
@@ -7306,6 +7341,7 @@
     gap: var(--space-2);
   }
   .kui-Chip:where(.lg\:kui-r-size-4) {
+    --chip-icon-size: var(--icon-size-4);
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     letter-spacing: var(--letter-spacing-3);
@@ -7319,6 +7355,7 @@
 }
 @media (min-width: 1640px) {
   .kui-Chip:where(.xl\:kui-r-size-1) {
+    --chip-icon-size: var(--icon-size-1);
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
@@ -7327,6 +7364,7 @@
     border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
   }
   .kui-Chip:where(.xl\:kui-r-size-2) {
+    --chip-icon-size: var(--icon-size-2);
     font-size: var(--font-size-1);
     line-height: var(--line-height-1);
     letter-spacing: var(--letter-spacing-1);
@@ -7338,6 +7376,7 @@
     padding: var(--space-1) var(--space-2);
   }
   .kui-Chip:where(.xl\:kui-r-size-3) {
+    --chip-icon-size: var(--icon-size-3);
     font-size: var(--font-size-2);
     line-height: var(--line-height-2);
     letter-spacing: var(--letter-spacing-2);
@@ -7350,6 +7389,7 @@
     gap: var(--space-2);
   }
   .kui-Chip:where(.xl\:kui-r-size-4) {
+    --chip-icon-size: var(--icon-size-4);
     font-size: var(--font-size-3);
     line-height: var(--line-height-3);
     letter-spacing: var(--letter-spacing-3);
@@ -7365,14 +7405,6 @@
   background-color: var(--accent-solid);
   color: var(--accent-solid-contrast);
 }
-.kui-Chip:where(.kui-variant-solid):where([data-disabled]) {
-  color: var(--neutral-a8);
-  background-color: var(--neutral-a3);
-  outline: none;
-  -webkit-filter: none;
-          filter: none;
-  cursor: default;
-}
 .kui-Chip:where(.kui-variant-surface) {
   background-color: var(--accent-2);
   -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
@@ -7382,19 +7414,9 @@
 .kui-Chip:where(.kui-variant-soft, .kui-variant-ghost) {
   color: var(--accent-ink);
 }
-.kui-Chip:where(.kui-variant-soft,.kui-variant-ghost):where([data-disabled]) {
-  color: var(--neutral-a8);
-  background-color: var(--neutral-a3);
-  cursor: default;
-}
 .kui-Chip:where(.kui-variant-soft) {
   background-color: var(--accent-3);
 }
-.kui-Chip:where(.kui-variant-soft):where([data-disabled]) {
-  color: var(--neutral-a8);
-  background-color: var(--neutral-a3);
-  cursor: default;
-}
 .kui-Chip:where(.kui-variant-outline) {
   -webkit-box-shadow: inset 0 0 0 1px var(--accent-6);
           box-shadow: inset 0 0 0 1px var(--accent-6);
@@ -7489,6 +7511,10 @@
   position: relative;
   cursor: progress;
 }
+.kui-BaseButton :where(.kui-BaseButtonContent) {
+  display: contents;
+  visibility: hidden;
+}
 .kui-BaseButton :where(svg) {
   width: var(--base-button-icon-size);
   height: var(--base-button-icon-size);
@@ -11099,6 +11125,8 @@
 }
 .kui-ComboboxContent {
   --combobox-list-max-height: calc(300px * var(--scale));
+  -ms-scroll-chaining: none;
+      overscroll-behavior: contain;
   min-width: var(--radix-popover-trigger-width);
   max-height: var(--radix-popover-content-available-height);
   -webkit-transform-origin: var(--radix-popover-content-transform-origin);
@@ -11143,6 +11171,12 @@
   scrollbar-width: thin;
   scrollbar-color: var(--neutral-a8) transparent;
 }
+@supports (-webkit-app-region: drag) {
+  .kui-ComboboxScrollArea {
+    -ms-scroll-chaining: chained;
+        overscroll-behavior: auto;
+  }
+}
 .kui-ComboboxList {
   outline: 0;
 }
@@ -11506,6 +11540,32 @@
     letter-spacing: calc(var(--letter-spacing-9) + var(--heading-letter-spacing));
   }
 }
+.kui-Image {
+  display: block;
+  max-width: 100%;
+  -o-object-fit: var(--image-object-fit, cover);
+     object-fit: var(--image-object-fit, cover);
+  border-radius: var(--radius-2);
+  background-color: var(--neutral-a3);
+}
+.kui-Image:where([data-status='loaded']) {
+  background-color: transparent;
+}
+.kui-Image:where(.kui-r-fit-cover) {
+  --image-object-fit: cover;
+}
+.kui-Image:where(.kui-r-fit-contain) {
+  --image-object-fit: contain;
+}
+.kui-Image:where(.kui-r-fit-fill) {
+  --image-object-fit: fill;
+}
+.kui-Image:where(.kui-r-fit-scale-down) {
+  --image-object-fit: scale-down;
+}
+.kui-Image:where(.kui-r-fit-none) {
+  --image-object-fit: none;
+}
 .kui-Kbd {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -12770,7 +12830,6 @@
   height: 100vh;
   max-height: 100vh;
   margin: 0 !important;
-  border-radius: 0 !important;
   will-change: transform;
 }
 @supports (height: 100dvh) {
@@ -12779,7 +12838,7 @@
     max-height: 100dvh;
   }
 }
-:where(.kui-SheetContent[data-side='start']) {
+.kui-SheetContent:where([data-side='start']) {
   inset-block: 0 !important;
   inset-inline-start: 0 !important;
   margin: 0 !important;
@@ -12787,7 +12846,7 @@
   border-end-start-radius: 0;
   padding-bottom: env(safe-area-inset-bottom, 0px);
 }
-:where(.kui-SheetContent[data-side='end']) {
+.kui-SheetContent:where([data-side='end']) {
   inset-block: 0 !important;
   inset-inline-end: 0 !important;
   margin: 0 !important;
@@ -12795,7 +12854,7 @@
   border-end-end-radius: 0;
   padding-bottom: env(safe-area-inset-bottom, 0px);
 }
-:where(.kui-SheetContent[data-side='top']) {
+.kui-SheetContent:where([data-side='top']) {
   inset-block-start: 0 !important;
   inset-inline: 0 !important;
   width: auto;
@@ -12805,7 +12864,7 @@
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-:where(.kui-SheetContent[data-side='bottom']) {
+.kui-SheetContent:where([data-side='bottom']) {
   inset-block-end: 0 !important;
   inset-inline: 0 !important;
   width: auto;
@@ -12912,11 +12971,20 @@
     background-color: var(--neutral-a8);
   }
 }
-:where(.kui-ScrollAreaRoot[data-fade]) > .kui-ScrollAreaViewport,
 .kui-MessageScrollerViewport:where([data-fade]) {
   -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black min(var(--scroll-overflow-start, 0px), var(--scroll-fade-start, var(--scroll-fade-size))), black calc(100% - min(var(--scroll-overflow-end, 0px), var(--scroll-fade-end, var(--scroll-fade-size)))), transparent 100%);
           mask-image: linear-gradient(to bottom, transparent 0%, black min(var(--scroll-overflow-start, 0px), var(--scroll-fade-start, var(--scroll-fade-size))), black calc(100% - min(var(--scroll-overflow-end, 0px), var(--scroll-fade-end, var(--scroll-fade-size)))), transparent 100%);
 }
+:where(.kui-ScrollAreaRoot[data-fade]) > .kui-ScrollAreaViewport {
+  --scroll-fade-x-direction: to right;
+  -webkit-mask-image: linear-gradient(var(--scroll-fade-x-direction), transparent 0%, black min(var(--scroll-overflow-x-start, 0px), var(--scroll-fade-size)), black calc(100% - min(var(--scroll-overflow-x-end, 0px), var(--scroll-fade-size))), transparent 100%), linear-gradient(to bottom, transparent 0%, black min(var(--scroll-overflow-start, 0px), var(--scroll-fade-start, var(--scroll-fade-size))), black calc(100% - min(var(--scroll-overflow-end, 0px), var(--scroll-fade-end, var(--scroll-fade-size)))), transparent 100%);
+          mask-image: linear-gradient(var(--scroll-fade-x-direction), transparent 0%, black min(var(--scroll-overflow-x-start, 0px), var(--scroll-fade-size)), black calc(100% - min(var(--scroll-overflow-x-end, 0px), var(--scroll-fade-size))), transparent 100%), linear-gradient(to bottom, transparent 0%, black min(var(--scroll-overflow-start, 0px), var(--scroll-fade-start, var(--scroll-fade-size))), black calc(100% - min(var(--scroll-overflow-end, 0px), var(--scroll-fade-end, var(--scroll-fade-size)))), transparent 100%);
+  -webkit-mask-composite: source-in, xor;
+          mask-composite: intersect;
+}
+:is(:where(.kui-ScrollAreaRoot[data-fade]) > .kui-ScrollAreaViewport):where(:dir(rtl)) {
+  --scroll-fade-x-direction: to left;
+}
 :root,
 .kui-theme {
   --scroll-fade-size: var(--space-7);
@@ -13074,6 +13142,9 @@
   left: 0;
   height: 100%;
   pointer-events: none;
+  width: calc(100% / var(--segmented-control-count, 1));
+  -webkit-transform: translateX(calc(var(--segmented-control-index, 0) * 100%));
+          transform: translateX(calc(var(--segmented-control-index, 0) * 100%));
 }
 .kui-SegmentedControlIndicator::before {
   inset: var(--border-width-standard);
@@ -13087,157 +13158,19 @@
 :where(.kui-SegmentedControlItem[data-state='on']) ~ .kui-SegmentedControlIndicator {
   display: block;
 }
-:where(.kui-SegmentedControlItem[disabled]) ~ .kui-SegmentedControlIndicator {
+:where(.kui-SegmentedControlItem[data-state='on'][disabled]) ~ .kui-SegmentedControlIndicator {
   --segmented-control-indicator-background-color: var(--neutral-a3);
 }
-:is(:where(.kui-SegmentedControlItem[disabled]) ~ .kui-SegmentedControlIndicator)::before {
+:is(:where(.kui-SegmentedControlItem[data-state='on'][disabled]) ~ .kui-SegmentedControlIndicator)::before {
   inset: 0;
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.kui-SegmentedControlIndicator:where(:nth-child(2)) {
-  width: calc(100% / 1);
-}
-.kui-SegmentedControlIndicator:where(:nth-child(3)) {
-  width: calc(100% / 2);
-}
-.kui-SegmentedControlIndicator:where(:nth-child(4)) {
-  width: calc(100% / 3);
-}
-.kui-SegmentedControlIndicator:where(:nth-child(5)) {
-  width: calc(100% / 4);
-}
-.kui-SegmentedControlIndicator:where(:nth-child(6)) {
-  width: calc(100% / 5);
-}
-.kui-SegmentedControlIndicator:where(:nth-child(7)) {
-  width: calc(100% / 6);
-}
-.kui-SegmentedControlIndicator:where(:nth-child(8)) {
-  width: calc(100% / 7);
-}
-.kui-SegmentedControlIndicator:where(:nth-child(9)) {
-  width: calc(100% / 8);
-}
-.kui-SegmentedControlIndicator:where(:nth-child(10)) {
-  width: calc(100% / 9);
-}
-.kui-SegmentedControlIndicator:where(:nth-child(11)) {
-  width: calc(100% / 10);
-}
-:where(.kui-SegmentedControlItem[data-state='on']:nth-child(1)) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateX(0%);
-          transform: translateX(0%);
-}
-:where(.kui-SegmentedControlItem[data-state='on']:nth-child(2)) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateX(100%);
-          transform: translateX(100%);
-}
-:where(.kui-SegmentedControlItem[data-state='on']:nth-child(3)) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateX(200%);
-          transform: translateX(200%);
-}
-:where(.kui-SegmentedControlItem[data-state='on']:nth-child(4)) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateX(300%);
-          transform: translateX(300%);
-}
-:where(.kui-SegmentedControlItem[data-state='on']:nth-child(5)) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateX(400%);
-          transform: translateX(400%);
-}
-:where(.kui-SegmentedControlItem[data-state='on']:nth-child(6)) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateX(500%);
-          transform: translateX(500%);
-}
-:where(.kui-SegmentedControlItem[data-state='on']:nth-child(7)) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateX(600%);
-          transform: translateX(600%);
-}
-:where(.kui-SegmentedControlItem[data-state='on']:nth-child(8)) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateX(700%);
-          transform: translateX(700%);
-}
-:where(.kui-SegmentedControlItem[data-state='on']:nth-child(9)) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateX(800%);
-          transform: translateX(800%);
-}
-:where(.kui-SegmentedControlItem[data-state='on']:nth-child(10)) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateX(900%);
-          transform: translateX(900%);
-}
 :where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator {
   width: 100%;
-  height: unset;
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(2) {
-  height: calc(100% / 1);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(3) {
-  height: calc(100% / 2);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(4) {
-  height: calc(100% / 3);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(5) {
-  height: calc(100% / 4);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(6) {
-  height: calc(100% / 5);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(7) {
-  height: calc(100% / 6);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(8) {
-  height: calc(100% / 7);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(9) {
-  height: calc(100% / 8);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(10) {
-  height: calc(100% / 9);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlIndicator:nth-child(11) {
-  height: calc(100% / 10);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(1) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateY(0%);
-          transform: translateY(0%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(2) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateY(100%);
-          transform: translateY(100%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(3) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateY(200%);
-          transform: translateY(200%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(4) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateY(300%);
-          transform: translateY(300%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(5) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateY(400%);
-          transform: translateY(400%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(6) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateY(500%);
-          transform: translateY(500%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(7) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateY(600%);
-          transform: translateY(600%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(8) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateY(700%);
-          transform: translateY(700%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(9) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateY(800%);
-          transform: translateY(800%);
-}
-:where(.kui-r-orientation-vertical) .kui-SegmentedControlItem[data-state='on']:nth-child(10) ~ .kui-SegmentedControlIndicator {
-  -webkit-transform: translateY(900%);
-          transform: translateY(900%);
+  height: calc(100% / var(--segmented-control-count, 1));
+  -webkit-transform: translateY(calc(var(--segmented-control-index, 0) * 100%));
+          transform: translateY(calc(var(--segmented-control-index, 0) * 100%));
 }
 .kui-SegmentedControlItemLabel,
 .kui-SegmentedControlItemLabelInactive,
@@ -14973,6 +14906,11 @@
   margin-top: 1px;
   margin-bottom: 1px;
 }
+:where(.kui-SidebarMenuSubList) {
+  list-style: none;
+  margin-block: 0;
+  padding: 0;
+}
 :where(.kui-ShellRailContent .kui-ShellPaneChrome) {
   --sidebar-base-padding: var(--space-3) !important;
 }
@@ -16370,6 +16308,12 @@
       overscroll-behavior: contain;
   isolation: isolate;
 }
+@supports (-webkit-app-region: drag) {
+  .kui-ShellContent {
+    -ms-scroll-chaining: chained;
+        overscroll-behavior: auto;
+  }
+}
 .kui-ShellPane {
   --kui-pane-inset-start: initial;
   --kui-pane-inset-end: initial;
@@ -16479,6 +16423,16 @@
           flex: 1;
   min-height: 0;
 }
+.kui-ShellContent:has(> .kui-ShellScroll) {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  overflow: hidden;
+}
 .kui-ShellPaneHeader[data-float],
 .kui-ShellPaneFooter[data-float] {
   position: absolute;
@@ -16567,6 +16521,9 @@
   --scroll-fade-end: var(--kui-pane-inset-end);
   --scrollarea-scrollbar-vertical-margin-bottom: calc(var(--space-2) + var(--kui-pane-inset-end));
 }
+.kui-ShellScroll > .kui-ScrollAreaViewport {
+  scroll-padding-block: var(--kui-pane-inset-start, 0px) var(--kui-pane-inset-end, 0px);
+}
 .kui-ShellScroll > .kui-ScrollAreaViewport > * {
   padding-top: var(--kui-pane-inset-start, 0px);
   padding-bottom: var(--kui-pane-inset-end, 0px);
@@ -17418,6 +17375,8 @@
 .kui-SliderTick {
   position: absolute;
   top: 0;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -17481,6 +17440,12 @@
   position: relative;
   width: var(--space-5);
   height: var(--space-5);
+  contain: paint;
+  overflow-clip-margin: 4px;
+}
+.kui-SpinnerWheel {
+  position: absolute;
+  inset: 0;
   opacity: var(--spinner-opacity);
   -webkit-animation: kui-spinner-rotate var(--spinner-animation-duration) steps(8, end) infinite;
           animation: kui-spinner-rotate var(--spinner-animation-duration) steps(8, end) infinite;
@@ -17553,11 +17518,15 @@
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .kui-Spinner {
+  .kui-SpinnerWheel {
     -webkit-animation-duration: calc(var(--spinner-animation-duration) * 3);
             animation-duration: calc(var(--spinner-animation-duration) * 3);
   }
 }
+.kui-SpinnerHiddenChildren {
+  display: contents;
+  visibility: hidden;
+}
 .kui-SwitchRoot {
   position: relative;
   display: -webkit-inline-box;
@@ -18649,6 +18618,41 @@
   outline: var(--focus-ring-width, 2px) solid var(--focus-8);
   outline-offset: var(--focus-ring-offset, 2px);
 }
+.kui-TabsRoot:where([data-orientation='vertical']) {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.kui-TabsList:where([data-orientation='vertical']) {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-box-shadow: inset calc(-1 * var(--border-width-standard)) 0 0 0 var(--neutral-a5);
+          box-shadow: inset calc(-1 * var(--border-width-standard)) 0 0 0 var(--neutral-a5);
+}
+.kui-TabsList:where([data-orientation='vertical']):where(:dir(rtl)) {
+  -webkit-box-shadow: inset var(--border-width-standard) 0 0 0 var(--neutral-a5);
+          box-shadow: inset var(--border-width-standard) 0 0 0 var(--neutral-a5);
+}
+:where(.kui-TabsList:where([data-orientation='vertical'])) .kui-TabsTrigger {
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+}
+:where(.kui-TabsList:where([data-orientation='vertical'])) .kui-TabsTrigger:where([data-state='active'])::before {
+  top: 0;
+  bottom: 0;
+  left: auto;
+  right: auto;
+  inset-inline-end: 0;
+  width: var(--focus-ring-width, 2px);
+  height: auto;
+}
 .kui-TextAreaRoot:where(:focus-within) {
   outline: 2px solid var(--v-focus-color, var(--focus-8));
   outline-offset: -1px;
@@ -18708,6 +18712,7 @@
   font-style: normal;
   text-align: start;
   overflow: hidden;
+  resize: vertical;
   isolation: isolate;
 }
 .kui-TextAreaInput {
@@ -19378,6 +19383,40 @@
   --base-button-height: calc(var(--toolbar-control-height) - 2 * var(--toolbar-group-inset));
   border-radius: max(0px, calc(var(--toolbar-radius) - var(--toolbar-group-inset)));
 }
+.kui-ToolbarOverflow {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: flex-end;
+  gap: var(--toolbar-gap);
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0%;
+          flex: 1 1 0%;
+  min-width: 0;
+  pointer-events: none;
+}
+.kui-ToolbarOverflow > * {
+  pointer-events: auto;
+}
+.kui-ToolbarOverflowSeat {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+}
+.kui-ToolbarOverflowSeat:where(:empty) {
+  display: none;
+}
 .kui-ToolbarSeparator {
   -ms-flex-negative: 0;
       flex-shrink: 0;
@@ -34417,6 +34456,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.kui-truncate:where(span, code, a, label) {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: bottom;
+}
 .kui-r-va-baseline {
   vertical-align: baseline;
 }