@womp/kookie-ui 0.23.0 → 0.24.0

package/styles.css

@@ -5674,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) {
@@ -5701,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) {
@@ -5715,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) {
@@ -5729,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) {
@@ -5743,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)) {
@@ -5824,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);
@@ -7070,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;
@@ -7078,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);
@@ -7086,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);
@@ -7097,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);
@@ -7109,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);
@@ -7121,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);
@@ -7129,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);
@@ -7140,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);
@@ -7152,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);
@@ -7165,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);
@@ -7173,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);
@@ -7184,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);
@@ -7196,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);
@@ -7209,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);
@@ -7217,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);
@@ -7228,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);
@@ -7240,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);
@@ -7253,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);
@@ -7261,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);
@@ -7272,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);
@@ -7284,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);
@@ -7297,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);
@@ -7305,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);
@@ -7316,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);
@@ -7328,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);
@@ -7343,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);
@@ -7360,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);
@@ -12786,7 +12830,6 @@
   height: 100vh;
   max-height: 100vh;
   margin: 0 !important;
-  border-radius: 0 !important;
   will-change: transform;
 }
 @supports (height: 100dvh) {
@@ -12795,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;
@@ -12803,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;
@@ -12811,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;
@@ -12821,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;
@@ -12928,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);
@@ -13090,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);
@@ -13103,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,
@@ -14989,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;
 }
@@ -16501,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;
@@ -16589,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);
@@ -18683,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;
@@ -18742,6 +18712,7 @@
   font-style: normal;
   text-align: start;
   overflow: hidden;
+  resize: vertical;
   isolation: isolate;
 }
 .kui-TextAreaInput {
@@ -19412,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;
@@ -34451,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;
 }