@womp/kookie-ui 0.17.0 → 0.19.0

package/src/components/theme.tsx

@@ -6,6 +6,7 @@ import { Direction, Slot, Tooltip as TooltipPrimitive } from 'radix-ui';
 import { useComposedRefs, useLayoutEffect } from 'radix-ui/internal';
 
 import { getMatchingGrayColor } from '../helpers/get-matching-gray-color.js';
+import { ThemeSizeContext } from '../helpers/theme-size.js';
 import { usePropSyncedState } from '../hooks/use-prop-synced-state.js';
 import { themePropDefs } from './theme.props.js';
 
@@ -19,6 +20,7 @@ type ThemeAccentColor = (typeof themePropDefs.accentColor.values)[number];
 type ThemeGrayColor = (typeof themePropDefs.grayColor.values)[number];
 type ThemeRadius = (typeof themePropDefs.radius.values)[number];
 type ThemeFontFamily = (typeof themePropDefs.fontFamily.values)[number];
+type ThemeSize = (typeof themePropDefs.size.values)[number];
 // Headings follow the body font until something sets this, so `undefined` is a
 // meaningful value here rather than a missing one.
 type ThemeHeadingFontFamily = ThemeFontFamily | undefined;
@@ -30,6 +32,7 @@ interface ThemeChangeHandlers {
   onRadiusChange: (radius: ThemeRadius) => void;
   onFontFamilyChange: (fontFamily: ThemeFontFamily) => void;
   onHeadingFontFamilyChange: (headingFontFamily: ThemeHeadingFontFamily) => void;
+  onSizeChange: (size: ThemeSize) => void;
 }
 
 interface ThemeContextValue extends ThemeChangeHandlers {
@@ -40,6 +43,7 @@ interface ThemeContextValue extends ThemeChangeHandlers {
   radius: ThemeRadius;
   fontFamily: ThemeFontFamily;
   headingFontFamily: ThemeHeadingFontFamily;
+  size: ThemeSize;
 }
 // Default theme values used when components render outside a Theme provider
 const defaultThemeContext: ThemeContextValue = {
@@ -50,12 +54,14 @@ const defaultThemeContext: ThemeContextValue = {
   radius: themePropDefs.radius.default,
   fontFamily: themePropDefs.fontFamily.default,
   headingFontFamily: undefined,
+  size: themePropDefs.size.default,
   onAppearanceChange: noop,
   onAccentColorChange: noop,
   onGrayColorChange: noop,
   onRadiusChange: noop,
   onFontFamilyChange: noop,
   onHeadingFontFamilyChange: noop,
+  onSizeChange: noop,
 };
 
 const ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);
@@ -86,61 +92,61 @@ const Theme = React.forwardRef<ThemeImplElement, ThemeProps>((props, forwardedRe
 });
 Theme.displayName = 'Theme';
 
-const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>(
-  (props, forwardedRef) => {
-    const {
-      appearance: appearanceProp = themePropDefs.appearance.default,
-      accentColor: accentColorProp = themePropDefs.accentColor.default,
-      grayColor: grayColorProp = themePropDefs.grayColor.default,
-      radius: radiusProp = themePropDefs.radius.default,
-      fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,
-      headingFontFamily: headingFontFamilyProp,
-      hasBackground = themePropDefs.hasBackground.default,
-      ...rootProps
-    } = props;
+const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>((props, forwardedRef) => {
+  const {
+    appearance: appearanceProp = themePropDefs.appearance.default,
+    accentColor: accentColorProp = themePropDefs.accentColor.default,
+    grayColor: grayColorProp = themePropDefs.grayColor.default,
+    radius: radiusProp = themePropDefs.radius.default,
+    fontFamily: fontFamilyProp = themePropDefs.fontFamily.default,
+    headingFontFamily: headingFontFamilyProp,
+    size: sizeProp = themePropDefs.size.default,
+    hasBackground = themePropDefs.hasBackground.default,
+    ...rootProps
+  } = props;
 
-    // Each of these follows its prop but stays independently settable, so
-    // `ThemePanel` can change the theme at runtime. Syncing during render
-    // rather than in an effect matters here: an effect would commit the old
-    // theme first and re-render every consumer of the context a second time.
-    const [appearance, setAppearance] = usePropSyncedState(appearanceProp);
-    const [accentColor, setAccentColor] = usePropSyncedState(accentColorProp);
-    const [grayColor, setGrayColor] = usePropSyncedState(grayColorProp);
-    const [radius, setRadius] = usePropSyncedState(radiusProp);
-    const [fontFamily, setFontFamily] = usePropSyncedState(fontFamilyProp);
-    const [headingFontFamily, setHeadingFontFamily] = usePropSyncedState(headingFontFamilyProp);
+  // Each of these follows its prop but stays independently settable, so
+  // `ThemePanel` can change the theme at runtime. Syncing during render
+  // rather than in an effect matters here: an effect would commit the old
+  // theme first and re-render every consumer of the context a second time.
+  const [appearance, setAppearance] = usePropSyncedState(appearanceProp);
+  const [accentColor, setAccentColor] = usePropSyncedState(accentColorProp);
+  const [grayColor, setGrayColor] = usePropSyncedState(grayColorProp);
+  const [radius, setRadius] = usePropSyncedState(radiusProp);
+  const [fontFamily, setFontFamily] = usePropSyncedState(fontFamilyProp);
+  const [headingFontFamily, setHeadingFontFamily] = usePropSyncedState(headingFontFamilyProp);
+  const [size, setSize] = usePropSyncedState(sizeProp);
 
-    return (
-      <ThemeImpl
-        {...rootProps}
-        ref={forwardedRef}
-        isRoot
-        hasBackground={hasBackground}
-        //
-        appearance={appearance}
-        accentColor={accentColor}
-        grayColor={grayColor}
-        radius={radius}
-        fontFamily={fontFamily}
-        headingFontFamily={headingFontFamily}
-        //
-        onAppearanceChange={setAppearance}
-        onAccentColorChange={setAccentColor}
-        onGrayColorChange={setGrayColor}
-        onRadiusChange={setRadius}
-        onFontFamilyChange={setFontFamily}
-        onHeadingFontFamilyChange={setHeadingFontFamily}
-      />
-    );
-  },
-);
+  return (
+    <ThemeImpl
+      {...rootProps}
+      ref={forwardedRef}
+      isRoot
+      hasBackground={hasBackground}
+      //
+      appearance={appearance}
+      accentColor={accentColor}
+      grayColor={grayColor}
+      radius={radius}
+      fontFamily={fontFamily}
+      headingFontFamily={headingFontFamily}
+      size={size}
+      //
+      onAppearanceChange={setAppearance}
+      onAccentColorChange={setAccentColor}
+      onGrayColorChange={setGrayColor}
+      onRadiusChange={setRadius}
+      onFontFamilyChange={setFontFamily}
+      onHeadingFontFamilyChange={setHeadingFontFamily}
+      onSizeChange={setSize}
+    />
+  );
+});
 ThemeRoot.displayName = 'ThemeRoot';
 
 type ThemeImplElement = React.ElementRef<'div'>;
 interface ThemeImplProps extends ThemeImplPublicProps, ThemeImplPrivateProps {}
-interface ThemeImplPublicProps
-  extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,
-    ThemeOwnProps {}
+interface ThemeImplPublicProps extends ComponentPropsWithout<'div', RemovedProps | 'dir'>, ThemeOwnProps {}
 interface ThemeImplPrivateProps extends Partial<ThemeChangeHandlers> {
   isRoot?: boolean;
 }
@@ -166,6 +172,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     radius = props.radius ?? context?.radius ?? themePropDefs.radius.default,
     fontFamily = props.fontFamily ?? context?.fontFamily ?? themePropDefs.fontFamily.default,
     headingFontFamily = props.headingFontFamily ?? context?.headingFontFamily,
+    size = props.size ?? context?.size ?? themePropDefs.size.default,
     //
     onAppearanceChange = noop,
     onAccentColorChange = noop,
@@ -173,14 +180,14 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
     onRadiusChange = noop,
     onFontFamilyChange = noop,
     onHeadingFontFamilyChange = noop,
+    onSizeChange = noop,
     //
     ...themeProps
   } = props;
   const Comp = asChild ? Slot.Root : 'div';
   const resolvedGrayColor = grayColor === 'auto' ? getMatchingGrayColor(accentColor) : grayColor;
   const isExplicitAppearance = props.appearance === 'light' || props.appearance === 'dark';
-  const hasBackground =
-    hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;
+  const hasBackground = hasBackgroundProp === undefined ? isRoot || isExplicitAppearance : hasBackgroundProp;
 
   // `data-os` can only be resolved on the client. Writing it straight to the
   // DOM keeps it out of the server markup — so hydration still matches — without
@@ -212,6 +219,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           radius,
           fontFamily,
           headingFontFamily,
+          size,
           //
           onAppearanceChange,
           onAccentColorChange,
@@ -219,6 +227,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onRadiusChange,
           onFontFamilyChange,
           onHeadingFontFamilyChange,
+          onSizeChange,
         }),
         [
           appearance,
@@ -228,6 +237,7 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           radius,
           fontFamily,
           headingFontFamily,
+          size,
           //
           onAppearanceChange,
           onAccentColorChange,
@@ -235,29 +245,34 @@ const ThemeImpl = React.forwardRef<ThemeImplElement, ThemeImplProps>((props, for
           onRadiusChange,
           onFontFamilyChange,
           onHeadingFontFamilyChange,
+          onSizeChange,
         ],
       )}
     >
-      <Comp
-        data-is-root-theme={isRoot ? 'true' : 'false'}
-        data-accent-color={accentColor}
-        data-gray-color={resolvedGrayColor}
-        // for nested `Theme` background
-        data-has-background={hasBackground ? 'true' : 'false'}
-        data-radius={radius}
-        data-font-family={fontFamily}
-        data-heading-font-family={headingFontFamily}
-        ref={composedRef}
-        {...themeProps}
-        className={classNames(
-          'radix-themes',
-          {
-            light: appearance === 'light',
-            dark: appearance === 'dark',
-          },
-          themeProps.className,
-        )}
-      />
+      {/* Size travels on its own context as a bare string, so the components
+          that read it do not re-render when another theme value changes. */}
+      <ThemeSizeContext.Provider value={size}>
+        <Comp
+          data-is-root-theme={isRoot ? 'true' : 'false'}
+          data-accent-color={accentColor}
+          data-gray-color={resolvedGrayColor}
+          // for nested `Theme` background
+          data-has-background={hasBackground ? 'true' : 'false'}
+          data-radius={radius}
+          data-font-family={fontFamily}
+          data-heading-font-family={headingFontFamily}
+          ref={composedRef}
+          {...themeProps}
+          className={classNames(
+            'radix-themes',
+            {
+              light: appearance === 'light',
+              dark: appearance === 'dark',
+            },
+            themeProps.className,
+          )}
+        />
+      </ThemeSizeContext.Provider>
     </ThemeContext.Provider>
   );
 });

package/src/components/toolbar.css

@@ -27,28 +27,28 @@
 
   &:where(.rt-r-size-1) {
     --toolbar-control-height: var(--control-height-1);
-    --toolbar-radius: var(--radius-pill-1);
+    --toolbar-radius: var(--radius-control-1);
     --toolbar-gap: var(--space-2);
     --toolbar-title-gap: var(--space-3);
   }
 
   &:where(.rt-r-size-2) {
     --toolbar-control-height: var(--control-height-2);
-    --toolbar-radius: var(--radius-pill-2);
+    --toolbar-radius: var(--radius-control-2);
     --toolbar-gap: var(--space-3);
     --toolbar-title-gap: var(--space-4);
   }
 
   &:where(.rt-r-size-3) {
     --toolbar-control-height: var(--control-height-3);
-    --toolbar-radius: var(--radius-pill-3);
+    --toolbar-radius: var(--radius-control-3);
     --toolbar-gap: var(--space-3);
     --toolbar-title-gap: var(--space-5);
   }
 
   &:where(.rt-r-size-4) {
     --toolbar-control-height: var(--control-height-4);
-    --toolbar-radius: var(--radius-pill-4);
+    --toolbar-radius: var(--radius-control-4);
     --toolbar-gap: var(--space-4);
     --toolbar-title-gap: var(--space-6);
   }

package/src/components/toolbar.tsx

@@ -9,6 +9,7 @@ import { Button } from './button.js';
 import { IconButton } from './icon-button.js';
 import { Text } from './text.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 import { usePaneBandSize } from './_internal/pane-chrome.js';
 
@@ -91,7 +92,8 @@ interface ToolbarProps
 const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwardedRef) => {
   // In a Shell pane's header or footer, a toolbar with no size rests one step above the Shell's.
   const band = usePaneBandSize();
-  const size: ToolbarSize = props.size ?? band ?? toolbarRootPropDefs.size.default;
+  // Elsewhere it takes the nearest Theme's size.
+  const size: ToolbarSize = useThemeSize(props.size ?? band ?? undefined, toolbarRootPropDefs.size);
   const orientation: ToolbarOrientation = props.orientation ?? toolbarRootPropDefs.orientation.default;
   const { className, orientation: _orientation, backdrop = false, children, ...rootProps } = extractProps(
     { ...props, size },

package/src/helpers/index.ts

@@ -13,3 +13,4 @@ export * from './map-prop-values.js';
 export * from './merge-styles.js';
 export * from './normalize-to-px.js';
 export * from './require-react-element.js';
+export * from './theme-size.js';

package/src/helpers/map-prop-values.ts

@@ -1,5 +1,3 @@
-import type { baseButtonPropDefs } from '../components/_internal/base-button.props.js';
-import type { spinnerPropDefs } from '../components/spinner.props.js';
 import type { textPropDefs } from '../components/text.props.js';
 import type { Responsive } from '../props/prop-def.js';
 
@@ -16,19 +14,4 @@ function mapResponsiveProp<Input extends string, Output>(
   );
 }
 
-
-function mapButtonSizeToSpinnerSize(
-  size: (typeof baseButtonPropDefs.size.values)[number]
-): (typeof spinnerPropDefs.size.values)[number] {
-  switch (size) {
-    case '1':
-      return '1';
-    case '2':
-    case '3':
-      return '2';
-    case '4':
-      return '3';
-  }
-}
-
-export { mapResponsiveProp, mapButtonSizeToSpinnerSize };
+export { mapResponsiveProp };

package/src/helpers/theme-size.ts

@@ -0,0 +1,73 @@
+'use client';
+
+import * as React from 'react';
+
+type ThemeSize = '1' | '2' | '3' | '4';
+
+/** The rest of the 1-4 index when no Theme states a size. */
+const THEME_SIZE_DEFAULT: ThemeSize = '2';
+
+/**
+ * The app-wide size index, provided by `Theme` beside `ThemeContext`.
+ *
+ * It is its own context, holding one string, so a component that only needs
+ * the size does not re-render when the accent colour or appearance changes.
+ */
+const ThemeSizeContext = React.createContext<ThemeSize>(THEME_SIZE_DEFAULT);
+ThemeSizeContext.displayName = 'ThemeSizeContext';
+
+interface SizePropDef {
+  values: readonly string[];
+  default?: string;
+}
+
+/**
+ * Maps the theme size onto a component's own range: the value itself when the
+ * component has it, otherwise the nearest end of the range (`4` on a 1-3 scale
+ * is `3`, on a 1-2 scale it is `2`).
+ */
+function clampSize(size: ThemeSize, values: readonly string[]): string {
+  if (values.includes(size)) return size;
+  const n = Number(size);
+  let nearest = values[0];
+  let distance = Infinity;
+  for (let i = 0; i < values.length; i++) {
+    const d = Math.abs(Number(values[i]) - n);
+    if (d < distance) {
+      distance = d;
+      nearest = values[i];
+    }
+  }
+  return nearest;
+}
+
+/**
+ * The size a component on the 1-4 index takes: what the caller said, else the
+ * nearest Theme's size, mapped into the component's range.
+ */
+function useThemeSize<V>(explicit: V | undefined, propDef: SizePropDef): V {
+  const themeSize = React.useContext(ThemeSizeContext);
+  if (explicit !== undefined) return explicit;
+  // The clamped value is one of `propDef.values`, which is what `V` ranges over.
+  return clampSize(themeSize, propDef.values) as V;
+}
+
+/**
+ * Fills `size` from the nearest Theme when the caller left it unset, so the
+ * result can go straight into `extractProps`. An explicit size, responsive
+ * object included, wins.
+ *
+ * Returns the same props object when there is nothing to fill: when a size is
+ * set, or when the theme size resolves to the prop def's own default (the
+ * common case, a Theme with no size), so `extractProps` applies it as before.
+ */
+function useThemeSizeProps<P extends { size?: unknown }>(props: P, propDef: SizePropDef): P {
+  const themeSize = React.useContext(ThemeSizeContext);
+  if (props.size !== undefined) return props;
+  const size = clampSize(themeSize, propDef.values);
+  if (size === propDef.default) return props;
+  return { ...props, size };
+}
+
+export { ThemeSizeContext, THEME_SIZE_DEFAULT, clampSize, useThemeSize, useThemeSizeProps };
+export type { ThemeSize };

package/src/props/index.ts

@@ -43,7 +43,6 @@ export * from '../components/heading.props.js';
 export * from '../components/hover-card.props.js';
 export * from '../components/icon-button.props.js';
 export * from '../components/image.props.js';
-export * from '../components/inset.props.js';
 export * from '../components/kbd.props.js';
 export * from '../components/link.props.js';
 export * from '../components/popover.props.js';

package/src/props/margin.props.ts

@@ -1,7 +1,7 @@
 import type { PropDef, GetPropDefTypes } from './prop-def.js';
 
 // prettier-ignore
-const marginValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9', '-10', '-11', '-12'] as const;
+const marginValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '-1', '-2', '-3', '-4', '-5', '-6', '-7', '-8', '-9', '-10', '-11', '-12', 'bleed'] as const;
 
 const marginPropDefs = {
   /**

package/src/styles/tokens/constants.css

@@ -4,6 +4,10 @@
   /* Standard border width constants */
   --border-width-standard: 1px;
 
+  /* One focus ring: outline var(--focus-ring-width) solid var(--focus-8), offset var(--focus-ring-offset) */
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 2px;
+
   /* Raised variant 3D effect constants - simplified for button-like components */
   --raised-elevation-offset: -0.02em;
   --raised-active-padding-offset-1: 0.5px;

package/src/styles/tokens/radius.css

@@ -1,78 +1,53 @@
 /*
  * RADIUS
  *
- * Two channels, one theme.
+ * v2's structure, v1's roundness.
  *
- * `--radius-*`         CONTROLS & MARKS — buttons, inputs, checkboxes, badges,
- *                      switches, tabs. These scale aggressively with the theme
- *                      and opt into `--radius-full` to become pills, through
- *                      `--radius-pill-*`.
- *
- * `--radius-surface-*` SURFACES — cards, dialogs, popovers, menus, tables,
- *                      callouts. These damp as the theme grows and never go
- *                      pill. A surface at `full` is exactly as round as a
- *                      surface at `medium`; `--radius-surface-factor` is
- *                      capped at 1.
- *
- * The gap between the two channels is the point: round controls read as
- * touchable, restrained surfaces read as architectural. Widening the theme
- * widens that contrast instead of inflating everything at once.
+ * 1. The palette: --radius-0 to --radius-10, plus --radius-full. Raw corners, scaled by the
+ *    Theme radius through --radius-factor. --radius-full is 9999px at `full` and 0px below it.
+ * 2. Roles: one ladder per job, four steps each, one step per size index. A component reads a
+ *    role, never a palette step.
+ *    --radius-control-N  a control's corner. Half the control height at `full` (a capsule),
+ *                        the palette step N below it.
+ *    --radius-surface-N  a surface's corner: cards, tables, panes, popovers, menus.
+ *    --radius-overlay-N  a detached surface's corner: dialogs and sheets.
+ *    Surfaces and overlays damp as the theme grows (--radius-surface-factor, capped at 1)
+ *    and never go pill.
+ * 3. Nesting: a pane inside a pane is concentric. Inner corner = outer corner minus outer
+ *    padding, never below 0. See the end of this file.
  */
 
 [data-radius] {
-  /* Controls & marks */
+  /* 1. Palette */
+  --radius-0: 0px;
   --radius-1: calc(6px * var(--scale) * var(--radius-factor));
   --radius-2: calc(8px * var(--scale) * var(--radius-factor));
   --radius-3: calc(10px * var(--scale) * var(--radius-factor));
   --radius-4: calc(12px * var(--scale) * var(--radius-factor));
-
-  /*  */
   --radius-5: calc(16px * var(--scale) * var(--radius-factor));
   --radius-6: calc(20px * var(--scale) * var(--radius-factor));
   --radius-7: calc(24px * var(--scale) * var(--radius-factor));
   --radius-8: calc(28px * var(--scale) * var(--radius-factor));
-
-  /*  */
   --radius-9: calc(32px * var(--scale) * var(--radius-factor));
   --radius-10: calc(40px * var(--scale) * var(--radius-factor));
-  --radius-11: calc(48px * var(--scale) * var(--radius-factor));
-  --radius-12: calc(56px * var(--scale) * var(--radius-factor));
-
-  /* Controls that turn into a pill when the theme radius is `full`. Use these instead of
-     repeating `max(var(--radius-N), var(--radius-full))` in each component. */
-  --radius-pill-1: max(var(--radius-1), var(--radius-full));
-  --radius-pill-2: max(var(--radius-2), var(--radius-full));
-  --radius-pill-3: max(var(--radius-3), var(--radius-full));
-  --radius-pill-4: max(var(--radius-4), var(--radius-full));
-  --radius-pill-5: max(var(--radius-5), var(--radius-full));
-  --radius-pill-6: max(var(--radius-6), var(--radius-full));
-  --radius-pill-7: max(var(--radius-7), var(--radius-full));
-  --radius-pill-8: max(var(--radius-8), var(--radius-full));
-  --radius-pill-9: max(var(--radius-9), var(--radius-full));
-  --radius-pill-10: max(var(--radius-10), var(--radius-full));
-  --radius-pill-11: max(var(--radius-11), var(--radius-full));
-  --radius-pill-12: max(var(--radius-12), var(--radius-full));
 
-  /* Surfaces — same ramp, damped factor, no pill */
-  --radius-surface-1: calc(6px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-2: calc(8px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-3: calc(10px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-4: calc(12px * var(--scale) * var(--radius-surface-factor));
+  /* 2. Roles */
+  --radius-control-1: var(--radius-1);
+  --radius-control-2: var(--radius-2);
+  --radius-control-3: var(--radius-3);
+  --radius-control-4: var(--radius-4);
 
-  /*  */
-  --radius-surface-5: calc(16px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-6: calc(20px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-7: calc(24px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-8: calc(28px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-1: calc(10px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-2: calc(16px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-3: calc(22px * var(--scale) * var(--radius-surface-factor));
+  --radius-surface-4: calc(28px * var(--scale) * var(--radius-surface-factor));
 
-  /*  */
-  --radius-surface-9: calc(32px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-10: calc(40px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-11: calc(48px * var(--scale) * var(--radius-surface-factor));
-  --radius-surface-12: calc(56px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-1: calc(14px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-2: calc(20px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-3: calc(24px * var(--scale) * var(--radius-surface-factor));
+  --radius-overlay-4: calc(28px * var(--scale) * var(--radius-surface-factor));
 }
 
-
 [data-radius='none'] {
   --radius-factor: 0;
   --radius-surface-factor: 0;
@@ -101,4 +76,73 @@
   --radius-factor: 2;
   --radius-surface-factor: 1;
   --radius-full: 9999px;
+
+  /* A control at `full` is a capsule: half its own height. */
+  --radius-control-1: calc(var(--control-height-1) / 2);
+  --radius-control-2: calc(var(--control-height-2) / 2);
+  --radius-control-3: calc(var(--control-height-3) / 2);
+  --radius-control-4: calc(var(--control-height-4) / 2);
+}
+
+/*
+ * 3. Nesting (v2 §6, §10)
+ *
+ * A surface opts in with `rt-SurfaceNest` next to its `rt-r-size-N` class. At its size it
+ * publishes on ITSELF:
+ *   --kui-sf-radius  its corner (--radius-surface-N)
+ *   --kui-sf-p       its padding (--surface-p-N)
+ *   --kui-sf-r       the corner to draw: its own, or the nested corner when inside another
+ * and on its CHILDREN:
+ *   --kui-nest       outer corner minus outer padding
+ *
+ * --kui-nest is written from the size tokens, not from --kui-sf-radius and --kui-sf-p: a
+ * direct child that is itself a surface would resolve those against its own declarations.
+ * It inherits, so it crosses any Flex, Grid or Box in between. Two levels: the inner surface
+ * publishes from its own size, not from the corner it was handed.
+ *
+ * The component draws `border-radius: var(--kui-sf-r)` and pads by `var(--kui-sf-p)`.
+ * An element that states `--kui-nest: initial` hands the inner surface its own corner back.
+ */
+@breakpoints {
+  .rt-SurfaceNest {
+    &:where(.rt-r-size-1) {
+      --kui-sf-radius: var(--radius-surface-1);
+      --kui-sf-p: var(--surface-p-1);
+    }
+    &:where(.rt-r-size-1) > * {
+      --kui-nest: max(0px, calc(var(--radius-surface-1) - var(--surface-p-1)));
+    }
+    &:where(.rt-r-size-2) {
+      --kui-sf-radius: var(--radius-surface-2);
+      --kui-sf-p: var(--surface-p-2);
+    }
+    &:where(.rt-r-size-2) > * {
+      --kui-nest: max(0px, calc(var(--radius-surface-2) - var(--surface-p-2)));
+    }
+    &:where(.rt-r-size-3) {
+      --kui-sf-radius: var(--radius-surface-3);
+      --kui-sf-p: var(--surface-p-3);
+    }
+    &:where(.rt-r-size-3) > * {
+      --kui-nest: max(0px, calc(var(--radius-surface-3) - var(--surface-p-3)));
+    }
+    &:where(.rt-r-size-4) {
+      --kui-sf-radius: var(--radius-surface-4);
+      --kui-sf-p: var(--surface-p-4);
+    }
+    &:where(.rt-r-size-4) > * {
+      --kui-nest: max(0px, calc(var(--radius-surface-4) - var(--surface-p-4)));
+    }
+  }
+}
+
+.rt-SurfaceNest {
+  --kui-sf-r: var(--kui-sf-radius, var(--radius-surface-2));
+}
+
+:where(.rt-SurfaceNest) .rt-SurfaceNest {
+  --kui-sf-r: min(
+    var(--kui-nest, var(--kui-sf-radius, var(--radius-surface-2))),
+    var(--kui-sf-radius, var(--radius-surface-2))
+  );
 }

package/src/styles/tokens/space.css

@@ -86,6 +86,22 @@
   --slot-inset-3: calc(4px * var(--scale));
   --slot-inset-4: calc(4px * var(--scale));
 
+  /* Marks: the box of a checkbox or radio by index, and the switch and slider tracks. */
+  --mark-1: calc(16px * var(--scale));
+  --mark-2: calc(20px * var(--scale));
+  --mark-3: calc(24px * var(--scale));
+  --mark-4: calc(26px * var(--scale));
+  --mark-5: calc(28px * var(--scale));
+  --switch-w-1: calc(34px * var(--scale));
+  --switch-w-2: calc(40px * var(--scale));
+  --switch-w-3: calc(44px * var(--scale));
+  --switch-w-4: calc(48px * var(--scale));
+  --switch-inset: calc(2px * var(--scale));
+  --slider-track-1: calc(4px * var(--scale));
+  --slider-track-2: calc(5px * var(--scale));
+  --slider-track-3: calc(6px * var(--scale));
+  --slider-track-4: calc(7px * var(--scale));
+
   /* Overlay widths by index. */
   --overlay-w-1: calc(360px * var(--scale));
   --overlay-w-2: calc(440px * var(--scale));