@womp/kookie-ui 0.23.0 → 0.24.0

package/components.css

@@ -546,26 +546,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) {
@@ -573,13 +573,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) {
@@ -587,13 +587,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) {
@@ -601,13 +601,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) {
@@ -615,13 +615,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)) {
@@ -696,6 +696,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);
@@ -1952,6 +1979,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;
@@ -1960,6 +1998,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);
@@ -1968,6 +2007,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);
@@ -1979,6 +2019,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);
@@ -1991,6 +2032,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);
@@ -2003,6 +2045,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);
@@ -2011,6 +2054,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);
@@ -2022,6 +2066,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);
@@ -2034,6 +2079,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);
@@ -2047,6 +2093,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);
@@ -2055,6 +2102,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);
@@ -2066,6 +2114,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);
@@ -2078,6 +2127,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);
@@ -2091,6 +2141,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);
@@ -2099,6 +2150,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);
@@ -2110,6 +2162,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);
@@ -2122,6 +2175,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);
@@ -2135,6 +2189,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);
@@ -2143,6 +2198,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);
@@ -2154,6 +2210,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);
@@ -2166,6 +2223,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);
@@ -2179,6 +2237,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);
@@ -2187,6 +2246,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);
@@ -2198,6 +2258,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);
@@ -2210,6 +2271,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);
@@ -2225,14 +2287,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);
@@ -2242,19 +2296,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);
@@ -7668,7 +7712,6 @@
     height: 100vh;
     max-height: 100vh;
     margin: 0 !important;
-    border-radius: 0 !important;
     will-change: transform;
 }
 @supports (height: 100dvh) {
@@ -7677,7 +7720,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;
@@ -7685,7 +7728,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;
@@ -7693,7 +7736,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;
@@ -7703,7 +7746,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;
@@ -7824,11 +7867,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);
@@ -7986,6 +8038,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);
@@ -7999,157 +8054,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,
@@ -9885,6 +9802,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;
 }
@@ -11397,6 +11319,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;
@@ -11485,6 +11417,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);
@@ -13579,6 +13514,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;
@@ -13638,6 +13608,7 @@
     font-style: normal;
     text-align: start;
     overflow: hidden;
+    resize: vertical;
     isolation: isolate;
 }
 .kui-TextAreaInput {
@@ -14308,6 +14279,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;