@womp/kookie-ui 0.16.0 → 0.18.0

package/src/components/slider.css

@@ -1,6 +1,6 @@
 .rt-SliderRoot {
-  --slider-thumb-width: var(--space-3);
-  --slider-thumb-height: var(--space-2);
+  --slider-thumb-width: var(--space-4);
+  --slider-thumb-height: var(--space-3);
 
   position: relative;
   display: flex;
@@ -14,32 +14,8 @@
   /* disable browser handling of all panning and zooming gestures on touch devices */
   touch-action: none;
 
-  /* 
-   * Theme-level translucent override
-   * Applies backdrop filter for elevated visual effects
-   */
-  :where([data-material='translucent']) & {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
-  /* Prevent backdrop-filter stacking with parent elements */
   isolation: isolate;
 
-  /* 
-   * Component-level material overrides
-   * These ensure proper rendering based on material setting
-   */
-  &:where([data-material='solid']) {
-    backdrop-filter: none;
-    --backdrop-filter-components: none;
-  }
-  
-  &:where([data-material='translucent']) {
-    backdrop-filter: var(--backdrop-filter-components);
-    --backdrop-filter-components: var(--backdrop-filter-components-enabled);
-  }
-
   &:where([data-orientation='horizontal']) {
     width: stretch;
     height: var(--slider-track-size);
@@ -102,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);
@@ -110,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) {
@@ -124,34 +101,40 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/* 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-3);
-      --slider-thumb-height: var(--space-2);
+      --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-4);
-      --slider-thumb-height: calc(var(--space-2) + var(--space-1));
+      --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-4);
-      --slider-thumb-height: var(--space-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-4) + var(--space-1));
-      --slider-thumb-height: calc(var(--space-3) + var(--space-1));
+      --slider-thumb-width: calc(var(--space-5) + var(--space-2));
+      --slider-thumb-height: calc(var(--space-4) + var(--space-2));
       --slider-thumb-radius: calc(var(--radius-4) * 0.75);
     }
   }
@@ -170,23 +153,6 @@
     background-color: var(--gray-2);
     box-shadow: inset 0 0 0 1px var(--gray-6);
 
-    /* Theme-level translucent override */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-    }
-
-    /* Component-level overrides */
-    &:where([data-material='solid']) {
-      background-color: var(--gray-2);
-      box-shadow: inset 0 0 0 1px var(--gray-6);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--gray-a2), var(--gray-2) 60%);
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-    }
-
     &:where([data-disabled]) {
       box-shadow: inset 0 0 0 1px var(--gray-5);
     }
@@ -195,8 +161,6 @@
   & :where(.rt-SliderRange) {
     background-color: var(--accent-solid);
   }
-
-
 }
 
 /* soft */
@@ -204,20 +168,6 @@
 .rt-SliderRoot:where(.rt-variant-soft) {
   & :where(.rt-SliderTrack) {
     background-color: var(--gray-3);
-
-    /* Theme-level translucent override */
-    :where([data-material='translucent']) & {
-      background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-    }
-
-    /* Component-level overrides */
-    &:where([data-material='solid']) {
-      background-color: var(--gray-3);
-    }
-
-    &:where([data-material='translucent']) {
-      background-color: color-mix(in srgb, var(--gray-a3), var(--gray-3) 60%);
-    }
   }
 
   & :where(.rt-SliderRange) {
@@ -235,20 +185,6 @@
   & :where(.rt-SliderTrack) {
     /* Base state: no background, just border */
     box-shadow: inset 0 0 0 1px var(--gray-6);
-
-    /* Theme-level translucent override */
-    :where([data-material='translucent']) & {
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-    }
-
-    /* Component-level overrides */
-    &:where([data-material='solid']) {
-      box-shadow: inset 0 0 0 1px var(--gray-6);
-    }
-
-    &:where([data-material='translucent']) {
-      box-shadow: inset 0 0 0 1px var(--gray-a6);
-    }
   }
 
   & :where(.rt-SliderRange) {
@@ -260,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;
@@ -274,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;
   }
@@ -297,7 +234,7 @@
   top: 100%;
   left: 0;
   right: 0;
-  margin-top: var(--space-2);
+  margin-top: var(--space-3);
   pointer-events: auto;
   height: 44px;
 }
@@ -308,10 +245,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: var(--space-1);
+  gap: var(--space-2);
   background: none;
   border: none;
-  padding: var(--space-2);
+  padding: var(--space-3);
   cursor: pointer;
   min-height: 44px;
   min-width: 44px;
@@ -325,7 +262,7 @@
     :where(.rt-SliderTickMark) {
       background-color: var(--gray-12) !important;
     }
-    
+
     :where(.rt-SliderTickLabel) {
       color: var(--gray-12) !important;
       font-weight: var(--font-weight-medium);
@@ -337,7 +274,7 @@
   :where(.rt-SliderTickMark) {
     background-color: var(--gray-12) !important;
   }
-  
+
   :where(.rt-SliderTickLabel) {
     color: var(--gray-12) !important;
     font-weight: var(--font-weight-medium);
@@ -345,13 +282,13 @@
 }
 
 .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 {
   width: 1px;
-  height: var(--space-2);
+  height: var(--space-3);
   background-color: var(--gray-6);
   border-radius: 1px;
 }

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-3);
-      height: var(--space-3);
-    }
-    &:where(.rt-r-size-2) {
-      width: var(--space-4);
-      height: var(--space-4);
-    }
-    &:where(.rt-r-size-3) {
-      width: calc(1.25 * var(--space-4));
-      height: calc(1.25 * var(--space-4));
-    }
-  }
-}

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,24 +7,13 @@
   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));
 
-  /* 
-   * Theme-level translucent override
-   * Applies backdrop filter for elevated visual effects
-   */
-
-  /* Prevent backdrop-filter stacking with parent elements */
   isolation: isolate;
 
-  /* 
-   * Component-level material overrides
-   * These ensure proper rendering based on material setting
-   */
-
   &::before {
     content: '';
     display: block;
@@ -37,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);
   }
 }
 
@@ -67,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-4);
+      --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-5));
+      --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-6);
+      --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-7);
+      --switch-height: var(--mark-5, calc(28px * var(--scale)));
+      --switch-width: var(--switch-w-4, calc(48px * var(--scale)));
     }
   }
 }
@@ -95,32 +86,22 @@
 .rt-SwitchRoot:where(.rt-variant-surface) {
   &::before {
     background-color: var(--gray-2);
-    box-shadow: inset 0 0 0 1px var(--gray-6)
-
-    /* Theme-level translucent override */
-
-    /* Component-level overrides */
+    box-shadow: inset 0 0 0 1px var(--gray-6);
   }
-  
+
   &:where([data-state='checked'])::before {
     background-color: var(--accent-solid);
     box-shadow: none;
   }
-  
-
 }
 
 /* soft */
 
 .rt-SwitchRoot:where(.rt-variant-soft) {
   &::before {
-    background-color: var(--gray-3)
-
-    /* Theme-level translucent override */
-
-    /* Component-level overrides */
+    background-color: var(--gray-3);
   }
-  
+
   &:where([data-state='checked'])::before {
     background-color: var(--accent-solid);
   }
@@ -131,34 +112,60 @@
 .rt-SwitchRoot:where(.rt-variant-outline) {
   &::before {
     /* Base state: no background, just border */
-    box-shadow: inset 0 0 0 1px var(--gray-6)
-
-    /* Theme-level translucent override */
-
-    /* Component-level overrides */
+    box-shadow: inset 0 0 0 1px var(--gray-6);
   }
-  
+
   &:where([data-state='checked'])::before {
     background-color: var(--accent-solid);
     box-shadow: none;
   }
-  
+}
 
+/* 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 */
+/* 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.props.tsx

@@ -9,14 +9,6 @@ const switchPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
   ...colorPropDef,
-  /**
-   * Material type for visual rendering and depth effects
-   * Controls how the switch renders its visual elements
-   */
-  /**
-   * Panel background type (deprecated)
-   * @deprecated Use `material` prop instead. This prop will be removed in a future version.
-   */
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;

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,13 +20,13 @@ interface TabNavRootProps
   extends Omit<TabNavRootElementProps, 'defaultValue' | 'dir' | 'color'>,
     MarginProps,
     TabNavOwnProps {}
-const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props, forwardedRef) => {
-  const { children, className, color, material: materialProp, ...rootProps } = extractProps(
+const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, tabNavRootPropDefs.size);
+  const { children, className, color, ...rootProps } = extractProps(
     props,
     tabNavRootPropDefs,
     marginPropDefs,
   );
-  const material = materialProp;
   return (
     <NavigationMenu.Root
       className="rt-TabNavRoot"
@@ -36,7 +37,6 @@ const TabNavRoot = React.forwardRef<TabNavRootElement, TabNavRootProps>((props,
     >
       <NavigationMenu.List
         className={classNames('rt-reset', 'rt-BaseTabList', 'rt-TabNavList', className)}
-        data-material={material}
       >
         {children}
       </NavigationMenu.List>

package/src/components/table.css

@@ -60,9 +60,9 @@
 @breakpoints {
   .rt-TableRoot {
     &:where(.rt-r-size-1) {
-      --table-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-1)));
-      --table-cell-padding: var(--space-2);
-      --table-cell-min-height: calc(36px * var(--scaling));
+      --table-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-2)));
+      --table-cell-padding: var(--space-3);
+      --table-cell-min-height: calc(36px * var(--scale));
 
       & :where(.rt-TableRootTable) {
         font-size: var(--font-size-2);
@@ -70,9 +70,9 @@
       }
     }
     &:where(.rt-r-size-2) {
-      --table-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-2)));
-      --table-cell-padding: var(--space-3);
-      --table-cell-min-height: calc(44px * var(--scaling));
+      --table-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
+      --table-cell-padding: var(--space-4);
+      --table-cell-min-height: calc(44px * var(--scale));
 
       & :where(.rt-TableRootTable) {
         font-size: var(--font-size-2);
@@ -80,9 +80,9 @@
       }
     }
     &:where(.rt-r-size-3) {
-      --table-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-3)));
-      --table-cell-padding: var(--space-4);
-      --table-cell-min-height: var(--space-8);
+      --table-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
+      --table-cell-padding: var(--space-5);
+      --table-cell-min-height: var(--space-9);
 
       & :where(.rt-TableRootTable) {
         font-size: var(--font-size-3);
@@ -101,18 +101,10 @@
 /* surface */
 
 .rt-TableRoot:where(.rt-variant-surface) {
-  /*
-   * This surface blurs its own backdrop, which makes it the backdrop root for
-   * everything inside it. A component nested here would re-blur an already
-   * blurred, already flat surface for the full cost of another blur pass, so
-   * switch the component filter off for the subtree. See tokens/blur.css.
-   */
-  --backdrop-filter-components-enabled: none;
   box-sizing: border-box;
   border: 1px solid var(--gray-a5);
   border-radius: var(--table-border-radius);
-  background-color: var(--color-panel);
-  backdrop-filter: var(--backdrop-filter-panel);
+  background-color: var(--color-panel-solid);
   background-clip: padding-box;
   position: relative;
 

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);
 }