@womp/kookie-ui 0.17.0 → 0.19.0

package/src/components/sheet.tsx

@@ -12,8 +12,8 @@
  *
  * Notes
  * - Side: set with `side` on `Sheet.Content`. Aliases: `left` → `start`, `right` → `end`.
- * - Sizing: reuses Dialog content prop defs (width/min/max/height/size). Default Dialog
- *   maxWidth clamping is removed for Sheets.
+ * - Sizing: reuses Dialog content prop defs (width/min/max/height/size). Size follows the
+ *   Theme size; start/end sheets cap at the size's overlay width unless maxWidth is set.
  * - A11y: provide an accessible name via `Sheet.Title` or `aria-label` on `Sheet.Content`.
  *
  * Example
@@ -41,6 +41,7 @@ import { Theme } from './theme.js';
 import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 import { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';
 
@@ -91,13 +92,7 @@ const {
   align: _alignPropDef,
   ...dialogPropDefsForSheet
 } = dialogContentPropDefs;
-
-// Override dialog's default maxWidth (600px) to avoid clamping Sheet by default
-const { default: _mwDefault, ...maxWidthWithoutDefault } = dialogPropDefsForSheet.maxWidth;
-const sheetPropDefs = {
-  ...dialogPropDefsForSheet,
-  maxWidth: maxWidthWithoutDefault,
-} as typeof dialogPropDefsForSheet;
+const sheetPropDefs = dialogPropDefsForSheet;
 
 type SheetContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
 interface SheetContentProps
@@ -121,8 +116,9 @@ const Content = React.forwardRef<SheetContentElement, SheetContentProps>(
       forceMount,
       container,
       className,
-      ...restProps
+      ...ownProps
     } = allProps;
+    const restProps = useThemeSizeProps(ownProps, sheetPropDefs.size);
     const normalizedSideMap: Record<SheetSide, 'start' | 'end' | 'top' | 'bottom'> = {
       left: 'start',
       right: 'end',

package/src/components/shell.css

@@ -755,7 +755,7 @@
 .rt-ShellPane[data-inset],
 .rt-ShellContent[data-inset] {
   margin: var(--shell-inset-gap);
-  border-radius: var(--radius-surface-3);
+  border-radius: var(--radius-surface-1);
   background: var(--color-background);
   box-shadow: var(--shadow-2);
 }

package/src/components/shell.tsx

@@ -47,6 +47,7 @@ import { navigationRest, detailRest, toPaneValue, startAnchoredGrowth, withoutRe
 import { useShell, useSidebarMode } from './shell.context.js';
 import { useResponsivePresentation } from './shell.hooks.js';
 import { readBreakpoint } from '../hooks/use-breakpoint.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { PaneChromeScope, PaneFooter, PaneHeader, Scroll, ShellSizeContext } from './_internal/pane-chrome.js';
 import type { PaneSize } from './_internal/pane-chrome.js';
 import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneMode, PaneName, PaneTarget, ResponsivePresentation, SidebarMode } from './shell.types.js';
@@ -56,7 +57,7 @@ import type { Breakpoint, CSSPropertiesWithVars, PaneBaseProps, PaneMode, PaneNa
 export interface ShellRootProps extends React.ComponentPropsWithoutRef<'div'> {
   children: React.ReactNode;
   height?: 'full' | 'auto' | string | number;
-  /** The index the panes' chrome takes: `Shell.PaneHeader`, `Shell.Scroll`, `Shell.PaneFooter` and the Sidebar rows in them. Default `2`. */
+  /** The index the panes' chrome takes: `Shell.PaneHeader`, `Shell.Scroll`, `Shell.PaneFooter` and the Sidebar rows in them. Defaults to the nearest Theme's size (3 when the Theme is 4), else `2`. */
   size?: PaneSize;
 }
 
@@ -96,7 +97,12 @@ function triggerFor(doc: Document, id: string, within?: HTMLElement[]): HTMLElem
 
 type LivePane = { name: PaneName; id: string; el: HTMLElement };
 
-const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, children, height = 'full', size = '2', style, onKeyDown, onFocus, ...props }, ref) => {
+/** Shell.Root's own range; a Theme size above it maps to 3. */
+const shellSizePropDef = { values: ['1', '2', '3'] as const };
+
+const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, children, height = 'full', size: sizeProp, style, onKeyDown, onFocus, ...props }, ref) => {
+  // No size of its own: the nearest Theme's, mapped into 1-3.
+  const size = useThemeSize(sizeProp, shellSizePropDef);
   const [store] = React.useState(createShellStore);
   const subscribe = React.useCallback((listener: () => void) => subscribeShellStore(store, listener), [store]);
   // Subscribed for the re-render, not for a value: a pane opening or closing

package/src/components/sidebar.css

@@ -232,19 +232,19 @@
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-1 .rt-SidebarMenuIconWrapper {
   padding: var(--space-3) var(--space-3);
-  border-radius: var(--radius-pill-1);
+  border-radius: var(--radius-control-1);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-2 .rt-SidebarMenuIconWrapper {
   padding: var(--space-3);
-  border-radius: var(--radius-pill-2);
+  border-radius: var(--radius-control-2);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-ShellRailContent :is(.rt-SidebarContent, .rt-ShellPaneHeader, .rt-ShellPaneFooter).rt-r-size-3 .rt-SidebarMenuIconWrapper {
   padding: var(--space-4);
-  border-radius: var(--radius-pill-3);
+  border-radius: var(--radius-control-3);
 }
 
 /* Label styling in thin mode - outside the background area */
@@ -921,19 +921,19 @@
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-ShellRailContent.rt-r-size-1 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
   padding: var(--space-3) var(--space-3);
-  border-radius: var(--radius-pill-1);
+  border-radius: var(--radius-control-1);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-ShellRailContent.rt-r-size-2 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
   padding: var(--space-3);
-  border-radius: var(--radius-pill-2);
+  border-radius: var(--radius-control-2);
 }
 
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-ShellRailContent.rt-r-size-3 .rt-SidebarSearchTrigger .rt-SidebarMenuIconWrapper {
   padding: var(--space-4);
-  border-radius: var(--radius-pill-3);
+  border-radius: var(--radius-control-3);
 }
 
 /* Search trigger icon wrapper hover (soft variant) */

package/src/components/slider.css

@@ -78,7 +78,7 @@
   &::after {
     content: '';
     position: absolute;
-    inset: calc(var(--slider-thumb-inset-factor) * var(--slider-track-size) * -1);
+    inset: calc(var(--slider-thumb-inset-factor) * var(--slider-thumb-overshoot-base, var(--slider-track-size)) * -1);
     background-color: var(--accent-solid-thumb);
     border-radius: var(--slider-thumb-radius);
     box-shadow: var(--shadow-2);
@@ -86,7 +86,8 @@
   }
 
   &:where(:focus-visible)::after {
-    box-shadow: var(--shadow-3), 0 0 0 var(--slider-focus-ring-inner) var(--accent-3), 0 0 0 var(--slider-focus-ring-outer) var(--focus-8);
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 
   &:where(:active) {
@@ -100,31 +101,37 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/* Track thickness is v2's slider ladder (4/5/6/7). The thumb keeps v1's shape: its overshoot
+ * still reads v1's track thickness, so a thinner track does not shrink it. */
 @breakpoints {
   .rt-SliderRoot {
     &:where(.rt-r-size-1) {
-      --slider-track-size: var(--progress-slider-height-1);
+      --slider-track-size: var(--slider-track-1, calc(4px * var(--scale)));
+      --slider-thumb-overshoot-base: var(--progress-slider-height-1);
       --slider-radius: var(--progress-slider-radius-1);
       --slider-thumb-width: var(--space-4);
       --slider-thumb-height: var(--space-3);
       --slider-thumb-radius: calc(var(--radius-1) * 0.75);
     }
     &:where(.rt-r-size-2) {
-      --slider-track-size: var(--progress-slider-height-2);
+      --slider-track-size: var(--slider-track-2, calc(5px * var(--scale)));
+      --slider-thumb-overshoot-base: var(--progress-slider-height-2);
       --slider-radius: var(--progress-slider-radius-2);
       --slider-thumb-width: var(--space-5);
       --slider-thumb-height: calc(var(--space-3) + var(--space-2));
       --slider-thumb-radius: calc(var(--radius-2) * 0.75);
     }
     &:where(.rt-r-size-3) {
-      --slider-track-size: var(--progress-slider-height-3);
+      --slider-track-size: var(--slider-track-3, calc(6px * var(--scale)));
+      --slider-thumb-overshoot-base: var(--progress-slider-height-3);
       --slider-radius: var(--progress-slider-radius-3);
       --slider-thumb-width: var(--space-5);
       --slider-thumb-height: var(--space-4);
       --slider-thumb-radius: calc(var(--radius-3) * 0.75);
     }
     &:where(.rt-r-size-4) {
-      --slider-track-size: var(--progress-slider-height-4);
+      --slider-track-size: var(--slider-track-4, calc(7px * var(--scale)));
+      --slider-thumb-overshoot-base: var(--progress-slider-height-4);
       --slider-radius: var(--progress-slider-radius-4);
       --slider-thumb-width: calc(var(--space-5) + var(--space-2));
       --slider-thumb-height: calc(var(--space-4) + var(--space-2));
@@ -189,11 +196,11 @@
   }
 }
 
-/* all disabled Sliders */
+/* all disabled Sliders: a colour remap, never opacity, and a default cursor */
 
 [data-disabled] {
   .rt-SliderRoot:where(&) {
-    cursor: var(--cursor-disabled);
+    cursor: default;
   }
   .rt-SliderTrack:where(&) {
     background-color: var(--gray-a3) !important;
@@ -203,9 +210,10 @@
     background-color: var(--accent-a3) !important;
   }
   .rt-SliderThumb:where(&) {
-    cursor: var(--cursor-disabled);
+    cursor: default;
   }
   .rt-SliderThumb:where(&)::after {
+    cursor: default;
     background-color: var(--gray-3) !important;
     box-shadow: none !important;
   }
@@ -274,8 +282,8 @@
 }
 
 .rt-SliderTick:where(:focus-visible) {
-  outline: 2px solid var(--focus-8);
-  outline-offset: 2px;
+  outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+  outline-offset: var(--focus-ring-offset, 2px);
 }
 
 .rt-SliderTickMark {

package/src/components/slider.tsx

@@ -4,6 +4,7 @@ import { Slider as SliderPrimitive } from 'radix-ui';
 
 import { sliderPropDefs } from './slider.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { MarginProps } from '../props/margin.props.js';
@@ -22,7 +23,8 @@ interface SliderProps
   ticks?: Array<{ value: number; label?: string }>;
   unit?: string;
 }
-const Slider = React.forwardRef<SliderElement, SliderProps>((props, forwardedRef) => {
+const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, sliderPropDefs.size);
   const { className, color, radius, tabIndex, ...sliderProps } = extractProps(
     props,
     sliderPropDefs,

package/src/components/spinner.css

@@ -6,6 +6,8 @@
 .rt-Spinner {
   display: block;
   position: relative;
+  width: var(--space-5);
+  height: var(--space-5);
   opacity: var(--spinner-opacity);
   /* Single GPU-composited rotation instead of 8 opacity animations */
   animation: rt-spinner-rotate var(--spinner-animation-duration) steps(8, end) infinite;
@@ -75,26 +77,3 @@
     animation-duration: calc(var(--spinner-animation-duration) * 3);
   }
 }
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- ***************************************************************************************************/
-
-@breakpoints {
-  .rt-Spinner {
-    &:where(.rt-r-size-1) {
-      width: var(--space-4);
-      height: var(--space-4);
-    }
-    &:where(.rt-r-size-2) {
-      width: var(--space-5);
-      height: var(--space-5);
-    }
-    &:where(.rt-r-size-3) {
-      width: calc(1.25 * var(--space-5));
-      height: calc(1.25 * var(--space-5));
-    }
-  }
-}

package/src/components/spinner.props.tsx

@@ -1,12 +1,8 @@
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
-
 const spinnerPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   loading: { type: 'boolean', default: true },
 } satisfies {
-  size: PropDef<(typeof sizes)[number]>;
   loading: PropDef<boolean>;
 };
 

package/src/components/switch.css

@@ -1,5 +1,3 @@
-/* Disabled state uses simple opacity instead of complex blend modes */
-
 .rt-SwitchRoot {
   position: relative;
   display: inline-flex;
@@ -9,8 +7,8 @@
   height: var(--switch-height);
   border-radius: 9999px;
 
-  --switch-width: calc(var(--switch-height) * 1.75);
-  --switch-thumb-inset: 1px;
+  /* The thumb is the track minus one designed inset on every side (v2's --switch-inset). */
+  --switch-thumb-inset: var(--switch-inset, calc(2px * var(--scale)));
   --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
   --switch-thumb-translate-x: calc(var(--switch-width) - var(--switch-height));
 
@@ -26,12 +24,8 @@
   }
 
   &:where(:focus-visible)::before {
-    outline: 2px solid var(--focus-8);
-    outline-offset: 2px;
-  }
-
-  &:where([data-disabled])::before {
-    cursor: var(--cursor-disabled);
+    outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+    outline-offset: var(--focus-ring-offset, 2px);
   }
 }
 
@@ -56,19 +50,27 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/*
+ * The track is v2's mark one index up (size N is --mark-(N+1): 20/24/26/28), so a switch stands
+ * one step taller than the checkbox beside it. Its width is v2's own ladder (34/40/44/48).
+ */
 @breakpoints {
   .rt-SwitchRoot {
     &:where(.rt-r-size-1) {
-      --switch-height: var(--space-5);
+      --switch-height: var(--mark-2, calc(20px * var(--scale)));
+      --switch-width: var(--switch-w-1, calc(34px * var(--scale)));
     }
     &:where(.rt-r-size-2) {
-      --switch-height: calc(var(--space-6));
+      --switch-height: var(--mark-3, calc(24px * var(--scale)));
+      --switch-width: var(--switch-w-2, calc(40px * var(--scale)));
     }
     &:where(.rt-r-size-3) {
-      --switch-height: var(--space-7);
+      --switch-height: var(--mark-4, calc(26px * var(--scale)));
+      --switch-width: var(--switch-w-3, calc(44px * var(--scale)));
     }
     &:where(.rt-r-size-4) {
-      --switch-height: var(--space-8);
+      --switch-height: var(--mark-5, calc(28px * var(--scale)));
+      --switch-width: var(--switch-w-4, calc(48px * var(--scale)));
     }
   }
 }
@@ -119,19 +121,51 @@
   }
 }
 
-/* all disabled Switches */
+/* Hover is one step up the variant's own ramp, press two. Disabled switches take neither. */
+
+.rt-SwitchRoot {
+  --switch-off-hover: var(--gray-a2);
+  --switch-off-active: var(--gray-a3);
+
+  &:where(.rt-variant-surface) {
+    --switch-off-hover: var(--gray-3);
+    --switch-off-active: var(--gray-4);
+  }
+  &:where(.rt-variant-soft) {
+    --switch-off-hover: var(--gray-4);
+    --switch-off-active: var(--gray-5);
+  }
+
+  @media (hover: hover) {
+    &:where(:hover:not([data-disabled]))::before {
+      background-color: var(--switch-off-hover);
+    }
+    &:where(:hover:not([data-disabled]):is([data-state='checked']))::before {
+      background-color: var(--accent-solid-hover);
+    }
+  }
+  &:where(:active:not([data-disabled]))::before {
+    background-color: var(--switch-off-active);
+  }
+  &:where(:active:not([data-disabled]):is([data-state='checked']))::before {
+    background-color: var(--accent-solid-active);
+  }
+}
+
+/* all disabled Switches: a colour remap, never opacity, and a default cursor */
 
 [data-disabled] {
   .rt-SwitchRoot:where(&) {
-    cursor: var(--cursor-disabled);
+    cursor: default;
   }
   .rt-SwitchRoot:where(&)::before {
+    cursor: default;
     background-color: var(--gray-a3) !important;
     box-shadow: none !important;
     outline: none !important;
   }
   .rt-SwitchThumb:where(&) {
-    cursor: var(--cursor-disabled);
+    cursor: default;
     box-shadow: none !important;
     outline: none !important;
   }

package/src/components/switch.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { Switch as SwitchPrimitive } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { switchPropDefs } from './switch.props.js';
 
@@ -19,7 +20,8 @@ interface SwitchProps
     >,
     MarginProps,
     SwitchOwnProps {}
-const Switch = React.forwardRef<SwitchElement, SwitchProps>((props, forwardedRef) => {
+const Switch = React.forwardRef<SwitchElement, SwitchProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, switchPropDefs.size);
   const { className, color, ...switchProps } = extractProps(
     props,
     switchPropDefs,

package/src/components/tab-nav.tsx

@@ -4,6 +4,7 @@ import { NavigationMenu } from 'radix-ui';
 
 import { tabNavRootPropDefs } from './tab-nav.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { getSubtree } from '../helpers/get-subtree.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
@@ -19,7 +20,8 @@ interface TabNavRootProps
   extends Omit<TabNavRootElementProps, 'defaultValue' | 'dir' | 'color'>,
     MarginProps,
     TabNavOwnProps {}
-const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props, forwardedRef) => {
+const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, tabNavRootPropDefs.size);
   const { children, className, color, ...rootProps } = extractProps(
     props,
     tabNavRootPropDefs,

package/src/components/table.css

@@ -35,14 +35,6 @@
   padding: var(--table-cell-padding);
   /* Works as min-height */
   height: var(--table-cell-min-height);
-
-  /* Inset with Table */
-  .rt-Inset :where(&:first-child) {
-    padding-left: var(--inset-padding-left, var(--table-cell-padding));
-  }
-  .rt-Inset :where(&:last-child) {
-    padding-right: var(--inset-padding-right, var(--table-cell-padding));
-  }
 }
 .rt-TableColumnHeaderCell {
   font-weight: 600;
@@ -60,7 +52,7 @@
 @breakpoints {
   .rt-TableRoot {
     &:where(.rt-r-size-1) {
-      --table-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-2)));
+      --table-border-radius: var(--radius-surface-1);
       --table-cell-padding: var(--space-3);
       --table-cell-min-height: calc(36px * var(--scale));
 
@@ -70,7 +62,7 @@
       }
     }
     &:where(.rt-r-size-2) {
-      --table-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
+      --table-border-radius: var(--radius-surface-2);
       --table-cell-padding: var(--space-4);
       --table-cell-min-height: calc(44px * var(--scale));
 
@@ -80,7 +72,7 @@
       }
     }
     &:where(.rt-r-size-3) {
-      --table-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
+      --table-border-radius: var(--radius-surface-3);
       --table-cell-padding: var(--space-5);
       --table-cell-min-height: var(--space-9);
 

package/src/components/table.props.tsx

@@ -3,7 +3,7 @@ import { widthPropDefs } from '../props/width.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['surface', 'ghost'] as const;
 const layoutValues = ['auto', 'fixed'] as const;
 

package/src/components/table.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 import { tableRootPropDefs, tableRowPropDefs, tableCellPropDefs } from './table.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { getResponsiveClassNames } from '../helpers/get-responsive-styles.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { ScrollArea } from './scroll-area.js';
@@ -17,7 +18,8 @@ interface TableRootProps
   extends ComponentPropsWithout<'div', RemovedProps>,
     MarginProps,
     TableRootOwnProps {}
-const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((props, forwardedRef) => {
+const TableRoot = React.forwardRef<TableRootElement, TableRootProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, tableRootPropDefs.size);
   const { layout: layoutPropDef, ...rootPropDefs } = tableRootPropDefs;
   const { className, children, layout, ...rootProps } = extractProps(
     props,

package/src/components/tabs.css

@@ -6,5 +6,6 @@
 }
 
 .rt-TabsContent:where(:focus-visible) {
-      outline: var(--focus-outline-width) solid var(--focus-8);
+  outline: var(--focus-ring-width, 2px) solid var(--focus-8);
+  outline-offset: var(--focus-ring-offset, 2px);
 }

package/src/components/tabs.tsx

@@ -4,6 +4,7 @@ import { Tabs as TabsPrimitive } from 'radix-ui';
 
 import { tabsListPropDefs } from './tabs.props.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { tabsContentPropDefs, tabsRootPropDefs } from './tabs.props.js';
@@ -35,7 +36,8 @@ interface TabsListProps
   extends ComponentPropsWithout<typeof TabsPrimitive.List, RemovedProps>,
     MarginProps,
     TabsListOwnProps {}
-const TabsList = React.forwardRef<TabsListElement, TabsListProps>((props, forwardedRef) => {
+const TabsList = React.forwardRef<TabsListElement, TabsListProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, tabsListPropDefs.size);
   const { className, color, ...listProps } = extractProps(
     props,
     tabsListPropDefs,