@womp/kookie-ui 0.18.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@womp/kookie-ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
   "keywords": [
     "react",

package/src/components/_internal/base-card.css

@@ -6,7 +6,7 @@
  *
  * ARCHITECTURE (matching base-button.css):
  * 1. Base styles: Layout, pseudo-element setup
- * 2. Sizes: Responsive padding and border-radius
+ * 2. Sizes 1-4: padding --surface-p-N, corner --radius-surface-N
  * 3. Variant palettes: Each variant defines its color variables
  * 4. Shared state logic: Single set of hover/active/open selectors (outline, soft, surface)
  * 5. Border variants: Outline & surface border handling
@@ -43,14 +43,6 @@
   font-style: normal;
   text-align: start;
 
-  /* Inset calculations */
-  --inset-border-width: var(--base-card-border-width);
-  --inset-border-radius: var(--base-card-border-radius);
-  --inset-padding-top: calc(var(--base-card-padding-top) - var(--base-card-border-width));
-  --inset-padding-right: calc(var(--base-card-padding-right) - var(--base-card-border-width));
-  --inset-padding-bottom: calc(var(--base-card-padding-bottom) - var(--base-card-border-width));
-  --inset-padding-left: calc(var(--base-card-padding-left) - var(--base-card-border-width));
-
   /*
    * Pseudo-element setup
    * ::before = background color (z-index: -1)
@@ -83,56 +75,36 @@
 @breakpoints {
   .rt-BaseCard {
     &:where(.rt-r-size-1) {
-      --base-card-padding-top: var(--space-3);
-      --base-card-padding-right: var(--space-3);
-      --base-card-padding-bottom: var(--space-3);
-      --base-card-padding-left: var(--space-3);
-      --base-card-border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-2)));
+      --base-card-padding-top: var(--surface-p-1);
+      --base-card-padding-right: var(--surface-p-1);
+      --base-card-padding-bottom: var(--surface-p-1);
+      --base-card-padding-left: var(--surface-p-1);
+      --base-card-border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-2) {
-      --base-card-padding-top: var(--space-4);
-      --base-card-padding-right: var(--space-4);
-      --base-card-padding-bottom: var(--space-4);
-      --base-card-padding-left: var(--space-4);
-      --base-card-border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
+      --base-card-padding-top: var(--surface-p-2);
+      --base-card-padding-right: var(--surface-p-2);
+      --base-card-padding-bottom: var(--surface-p-2);
+      --base-card-padding-left: var(--surface-p-2);
+      --base-card-border-radius: var(--radius-surface-2);
     }
     &:where(.rt-r-size-3) {
-      --base-card-padding-top: var(--space-5);
-      --base-card-padding-right: var(--space-5);
-      --base-card-padding-bottom: var(--space-5);
-      --base-card-padding-left: var(--space-5);
-      --base-card-border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
+      --base-card-padding-top: var(--surface-p-3);
+      --base-card-padding-right: var(--surface-p-3);
+      --base-card-padding-bottom: var(--surface-p-3);
+      --base-card-padding-left: var(--surface-p-3);
+      --base-card-border-radius: var(--radius-surface-3);
     }
     &:where(.rt-r-size-4) {
-      --base-card-padding-top: var(--space-6);
-      --base-card-padding-right: var(--space-6);
-      --base-card-padding-bottom: var(--space-6);
-      --base-card-padding-left: var(--space-6);
-      --base-card-border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-5)));
-    }
-    &:where(.rt-r-size-5) {
-      --base-card-padding-top: var(--space-7);
-      --base-card-padding-right: var(--space-7);
-      --base-card-padding-bottom: var(--space-7);
-      --base-card-padding-left: var(--space-7);
-      --base-card-border-radius: min(var(--radius-surface-9), calc(var(--radius-surface-5) + var(--space-6)));
+      --base-card-padding-top: var(--surface-p-4);
+      --base-card-padding-right: var(--surface-p-4);
+      --base-card-padding-bottom: var(--surface-p-4);
+      --base-card-padding-left: var(--surface-p-4);
+      --base-card-border-radius: var(--radius-surface-4);
     }
   }
 }
 
-/***************************************************************************************************
- *                                                                                                 *
- * INSET MODE                                                                                      *
- *                                                                                                 *
- ***************************************************************************************************/
-
-.rt-BaseCard:where([data-inset='true']) {
-  --base-card-padding-top: 0px;
-  --base-card-padding-right: 0px;
-  --base-card-padding-bottom: 0px;
-  --base-card-padding-left: 0px;
-}
-
 /***************************************************************************************************
  *                                                                                                 *
  * VARIANT PALETTES                                                                                *
@@ -299,30 +271,6 @@
   --v-focus-color: var(--focus-8);
   --v-focus-offset: -1px;
 
-  /* Flush mode */
-  &:where([data-flush='true']) {
-    --margin-top: 0px;
-    --margin-right: 0px;
-    --margin-bottom: 0px;
-    --margin-left: 0px;
-    --margin-top-override: calc(var(--margin-top) - var(--card-padding));
-    --margin-right-override: calc(var(--margin-right) - var(--card-padding));
-    --margin-bottom-override: calc(var(--margin-bottom) - var(--card-padding));
-    --margin-left-override: calc(var(--margin-left) - var(--card-padding));
-
-    margin-top: var(--margin-top-override);
-    margin-right: var(--margin-right-override);
-    margin-bottom: var(--margin-bottom-override);
-    margin-left: var(--margin-left-override);
-
-    :where(&) > * {
-      --margin-top-override: initial;
-      --margin-right-override: initial;
-      --margin-bottom-override: initial;
-      --margin-left-override: initial;
-    }
-  }
-
   /* Focus */
   &:where(:focus-visible) {
     outline: 2px solid var(--v-focus-color);

package/src/components/_internal/base-dialog.css

@@ -44,10 +44,6 @@
   box-sizing: border-box;
   overflow: auto;
 
-  --inset-padding-top: var(--dialog-content-padding);
-  --inset-padding-right: var(--dialog-content-padding);
-  --inset-padding-bottom: var(--dialog-content-padding);
-  --inset-padding-left: var(--dialog-content-padding);
   padding: var(--dialog-content-padding);
   box-sizing: border-box;
 
@@ -62,23 +58,33 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/*
+ * v2's overlay ladder. Size N wears the overlay corner N, pads one surface step above its
+ * index (capped at 4), and publishes --overlay-w as its designed maximum width. Dialog and
+ * AlertDialog read it as max-width; Sheet reads it on its start/end sides only. An explicit
+ * maxWidth prop wins, because the max-width utility comes later in the cascade.
+ */
 @breakpoints {
   .rt-BaseDialogContent {
     &:where(.rt-r-size-1) {
-      --dialog-content-padding: var(--space-6);
-      border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-3)));
+      --dialog-content-padding: var(--surface-p-2);
+      --overlay-w: var(--overlay-w-1);
+      border-radius: var(--radius-overlay-1);
     }
     &:where(.rt-r-size-2) {
-      --dialog-content-padding: var(--space-7);
-      border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-4)));
+      --dialog-content-padding: var(--surface-p-3);
+      --overlay-w: var(--overlay-w-2);
+      border-radius: var(--radius-overlay-2);
     }
     &:where(.rt-r-size-3) {
-      --dialog-content-padding: var(--space-8);
-      border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-5)));
+      --dialog-content-padding: var(--surface-p-4);
+      --overlay-w: var(--overlay-w-3);
+      border-radius: var(--radius-overlay-3);
     }
     &:where(.rt-r-size-4) {
-      --dialog-content-padding: var(--space-9);
-      border-radius: min(var(--radius-surface-8), calc(var(--radius-surface-4) + var(--space-6)));
+      --dialog-content-padding: var(--surface-p-4);
+      --overlay-w: var(--overlay-w-4);
+      border-radius: var(--radius-overlay-4);
     }
   }
 }

package/src/components/_internal/base-menu.css

@@ -139,7 +139,7 @@
       --base-menu-item-padding-right: var(--space-3);
       --base-menu-item-padding-y: var(--space-2);
       --base-menu-item-height: var(--control-height-1);
-      border-radius: var(--radius-surface-3);
+      border-radius: var(--radius-surface-1);
 
       & :where(.rt-BaseMenuItem) {
         gap: var(--component-gap-2);
@@ -177,7 +177,7 @@
       --base-menu-item-padding-right: var(--space-4);
       --base-menu-item-padding-y: var(--space-2);
       --base-menu-item-height: var(--control-height-2);
-      border-radius: var(--radius-surface-5);
+      border-radius: var(--radius-surface-2);
 
       & :where(.rt-BaseMenuItem) {
         gap: var(--component-gap-3);
@@ -215,7 +215,7 @@
       --base-menu-item-padding-right: var(--space-4);
       --base-menu-item-padding-y: var(--space-3);
       --base-menu-item-height: var(--control-height-3);
-      border-radius: var(--radius-surface-6);
+      border-radius: var(--radius-surface-3);
 
       & :where(.rt-BaseMenuItem) {
         gap: var(--component-gap-4);

package/src/components/accordion.css

@@ -12,13 +12,13 @@
       border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-2) {
-      border-radius: var(--radius-surface-2);
+      border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-3) {
-      border-radius: var(--radius-surface-3);
+      border-radius: var(--radius-surface-1);
     }
     &:where(.rt-r-size-4) {
-      border-radius: var(--radius-surface-4);
+      border-radius: var(--radius-surface-1);
     }
   }
 }

package/src/components/alert-dialog.css

@@ -1 +1,5 @@
 @import './_internal/base-dialog.css';
+
+.rt-AlertDialogContent {
+  max-width: var(--overlay-w);
+}

package/src/components/alert-dialog.tsx

@@ -7,6 +7,7 @@ import { Heading } from './heading.js';
 import { Text } from './text.js';
 import { Theme } from './theme.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
 
 import type { AlertDialogContentOwnProps } from './alert-dialog.props.js';
@@ -51,7 +52,8 @@ interface AlertDialogContentProps
   container?: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>['container'];
 }
 const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
-  ({ align, ...props }, forwardedRef) => {
+  ({ align, ...ownProps }, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, contentPropDefs.size);
     const { className: alignClassName } = extractProps({ align }, alignPropDefs);
 
     const {

package/src/components/avatar.css

@@ -134,63 +134,63 @@
       --avatar-size: var(--control-height-1);
       --avatar-fallback-one-letter-font-size: var(--font-size-2);
       --avatar-fallback-two-letters-font-size: var(--font-size-1);
-      border-radius: var(--radius-pill-1);
+      border-radius: var(--radius-control-1);
       letter-spacing: var(--letter-spacing-1);
     }
     &:where(.rt-r-size-2) {
       --avatar-size: var(--control-height-2);
       --avatar-fallback-one-letter-font-size: var(--font-size-3);
       --avatar-fallback-two-letters-font-size: var(--font-size-2);
-      border-radius: var(--radius-pill-2);
+      border-radius: var(--radius-control-2);
       letter-spacing: var(--letter-spacing-2);
     }
     &:where(.rt-r-size-3) {
       --avatar-size: var(--control-height-3);
       --avatar-fallback-one-letter-font-size: var(--font-size-4);
       --avatar-fallback-two-letters-font-size: var(--font-size-3);
-      border-radius: var(--radius-pill-3);
+      border-radius: var(--radius-control-3);
       letter-spacing: var(--letter-spacing-3);
     }
     &:where(.rt-r-size-4) {
       --avatar-size: var(--control-height-4);
       --avatar-fallback-one-letter-font-size: var(--font-size-5);
       --avatar-fallback-two-letters-font-size: var(--font-size-4);
-      border-radius: var(--radius-pill-4);
+      border-radius: max(var(--radius-control-4), var(--radius-full));
       letter-spacing: var(--letter-spacing-4);
     }
     &:where(.rt-r-size-5) {
       --avatar-size: calc(56px * var(--scale));
       --avatar-fallback-one-letter-font-size: var(--font-size-6);
       --avatar-fallback-two-letters-font-size: var(--font-size-5);
-      border-radius: var(--radius-pill-5);
+      border-radius: max(var(--radius-control-4), var(--radius-full));
       letter-spacing: var(--letter-spacing-5);
     }
     &:where(.rt-r-size-6) {
       --avatar-size: var(--space-10);
       --avatar-fallback-one-letter-font-size: var(--font-size-7);
       --avatar-fallback-two-letters-font-size: var(--font-size-6);
-      border-radius: var(--radius-pill-6);
+      border-radius: max(var(--radius-control-4), var(--radius-full));
       letter-spacing: var(--letter-spacing-6);
     }
     &:where(.rt-r-size-7) {
       --avatar-size: calc(80px * var(--scale));
       --avatar-fallback-one-letter-font-size: var(--font-size-7);
       --avatar-fallback-two-letters-font-size: var(--font-size-6);
-      border-radius: var(--radius-pill-7);
+      border-radius: max(var(--radius-control-4), var(--radius-full));
       letter-spacing: var(--letter-spacing-7);
     }
     &:where(.rt-r-size-8) {
       --avatar-size: calc(96px * var(--scale));
       --avatar-fallback-one-letter-font-size: var(--font-size-8);
       --avatar-fallback-two-letters-font-size: var(--font-size-7);
-      border-radius: var(--radius-pill-8);
+      border-radius: max(var(--radius-control-4), var(--radius-full));
       letter-spacing: var(--letter-spacing-8);
     }
     &:where(.rt-r-size-9) {
       --avatar-size: var(--space-12);
       --avatar-fallback-one-letter-font-size: var(--font-size-9);
       --avatar-fallback-two-letters-font-size: var(--font-size-8);
-      border-radius: var(--radius-pill-9);
+      border-radius: max(var(--radius-control-4), var(--radius-full));
       letter-spacing: var(--letter-spacing-9);
     }
   }

package/src/components/badge.css

@@ -50,7 +50,7 @@
       letter-spacing: var(--letter-spacing-1);
       padding: var(--space-2) var(--space-3);
       gap: var(--space-2);
-      border-radius: var(--radius-pill-1);
+      border-radius: var(--radius-control-1);
 
       &:where(.rt-variant-ghost) {
         padding: var(--space-1) var(--space-2);
@@ -62,7 +62,7 @@
       letter-spacing: var(--letter-spacing-2);
       padding: var(--space-2) var(--space-4);
       gap: var(--space-3);
-      border-radius: var(--radius-pill-2);
+      border-radius: var(--radius-control-2);
 
       &:where(.rt-variant-ghost) {
         padding: var(--space-1) var(--space-3);
@@ -75,7 +75,7 @@
       letter-spacing: var(--letter-spacing-3);
       padding: var(--space-2) var(--space-4);
       gap: var(--space-3);
-      border-radius: var(--radius-pill-3);
+      border-radius: var(--radius-control-3);
 
       &:where(.rt-variant-ghost) {
         padding: var(--space-2) var(--space-3);

package/src/components/card.css

@@ -7,6 +7,17 @@
 .rt-Card {
   --base-card-border-width: var(--card-border-width);
 
+  /*
+   * A Card is a nesting surface (rt-SurfaceNest, tokens/radius.css): it pads by its own
+   * --kui-sf-p and draws --kui-sf-r, which inside another surface is the outer corner minus
+   * the outer padding, so a Card in a Card stays concentric.
+   */
+  --base-card-padding-top: var(--kui-sf-p);
+  --base-card-padding-right: var(--kui-sf-p);
+  --base-card-padding-bottom: var(--kui-sf-p);
+  --base-card-padding-left: var(--kui-sf-p);
+  --base-card-border-radius: var(--kui-sf-r);
+
   &:where(:focus-visible) {
     outline: 2px solid var(--focus-8);
     outline-offset: -1px;
@@ -21,5 +32,3 @@
     }
   }
 }
-
-

package/src/components/card.props.tsx

@@ -2,20 +2,17 @@ import { asChildPropDef } from '../props/as-child.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3', '4', '5'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['raised', 'surface', 'outline', 'ghost', 'soft'] as const;
 
 const cardPropDefs = {
   ...asChildPropDef,
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
+  /** Padding --surface-p-N and corner --radius-surface-N. Unset, it follows the Theme size. */
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
-  flush: { type: 'boolean', default: false },
-  inset: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  flush: PropDef<boolean>;
-  inset: PropDef<boolean>;
 };
 
 export { cardPropDefs };

package/src/components/card.tsx

@@ -1,9 +1,12 @@
+'use client';
+
 import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from 'radix-ui';
 
 import { cardPropDefs } from './card.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';
@@ -13,20 +16,15 @@ import type { GetPropDefTypes } from '../props/prop-def.js';
 type CardElement = React.ElementRef<'div'>;
 type CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;
 interface CardProps extends ComponentPropsWithout<'div', RemovedProps>, MarginProps, CardOwnProps {}
-const Card = React.forwardRef<CardElement, CardProps>((props, forwardedRef) => {
-  const { asChild, className, flush, inset, ...cardProps } = extractProps(
-    props,
-    cardPropDefs,
-    marginPropDefs,
-  );
+const Card = React.forwardRef<CardElement, CardProps>((ownProps, forwardedRef) => {
+  const props = useThemeSizeProps(ownProps, cardPropDefs.size);
+  const { asChild, className, ...cardProps } = extractProps(props, cardPropDefs, marginPropDefs);
   const Comp = asChild ? Slot.Root : 'div';
   return (
     <Comp
       ref={forwardedRef}
       {...cardProps}
-      data-flush={flush ? 'true' : undefined}
-      data-inset={inset ? 'true' : undefined}
-      className={classNames('rt-reset', 'rt-BaseCard', 'rt-Card', className)}
+      className={classNames('rt-reset', 'rt-BaseCard', 'rt-Card', 'rt-SurfaceNest', className)}
     />
   );
 });

package/src/components/chatbar.css

@@ -210,7 +210,7 @@
 @breakpoints {
   .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarBox {
     /* Map Chatbar size 1 to Card size 2 */
-    border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
+    border-radius: var(--radius-surface-2);
     padding: var(--space-4);
   }
   .rt-ChatbarRoot:where(.rt-r-size-1) .rt-ChatbarInput {
@@ -220,7 +220,7 @@
   }
   .rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarBox {
     /* Map Chatbar size 2 to Card size 3 */
-    border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
+    border-radius: var(--radius-surface-3);
     padding: var(--space-5);
   }
   .rt-ChatbarRoot:where(.rt-r-size-2) .rt-ChatbarInput {
@@ -230,7 +230,7 @@
   }
   .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarBox {
     /* Custom Chatbar size 3, different to Card size 4 */
-    border-radius: min(var(--radius-surface-7), calc(var(--radius-surface-3) + var(--space-4)));
+    border-radius: var(--radius-surface-3);
     padding: var(--space-5);
   }
   .rt-ChatbarRoot:where(.rt-r-size-3) .rt-ChatbarInput {
@@ -256,13 +256,13 @@
 /* Reduced radius when collapsed (scale down by 1) */
 @breakpoints {
   .rt-ChatbarRoot:where([data-state='closed'].rt-r-size-1) .rt-ChatbarBox {
-    border-radius: min(var(--radius-surface-5), calc(var(--radius-surface-1) + var(--space-2)));
+    border-radius: var(--radius-surface-1);
   }
   .rt-ChatbarRoot:where([data-state='closed'].rt-r-size-2) .rt-ChatbarBox {
-    border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
+    border-radius: var(--radius-surface-2);
   }
   .rt-ChatbarRoot:where([data-state='closed'].rt-r-size-3) .rt-ChatbarBox {
-    border-radius: min(var(--radius-surface-6), calc(var(--radius-surface-2) + var(--space-3)));
+    border-radius: var(--radius-surface-2);
   }
 }
 

package/src/components/checkbox-cards.css

@@ -51,8 +51,6 @@
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-
-
 @breakpoints {
   .rt-CheckboxCardsRoot {
     /* Size 1 */
@@ -61,17 +59,15 @@
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-checkbox-size: var(--mark-1, calc(16px * var(--scale)));
     }
-    
-
     /* Size 2 */
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-2);
       --line-height: var(--line-height-2);
       --letter-spacing: var(--letter-spacing-2);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: var(--space-5);
+      --checkbox-cards-item-checkbox-size: var(--mark-2, calc(20px * var(--scale)));
     }
     /* Size 3 */
     &:where(.rt-r-size-3) {
@@ -79,7 +75,7 @@
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-large));
+      --checkbox-cards-item-checkbox-size: var(--mark-3, calc(24px * var(--scale)));
     }
     /* Size 4 */
     &:where(.rt-r-size-4) {
@@ -87,21 +83,11 @@
       --line-height: var(--line-height-3);
       --letter-spacing: var(--letter-spacing-3);
       /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-5) * var(--spacing-multiplier-large));
-    }
-    /* Size 5 */
-    &:where(.rt-r-size-5) {
-      font-size: var(--font-size-4);
-      --line-height: var(--line-height-4);
-      --letter-spacing: var(--letter-spacing-4);
-      /* keep in sync with checkbox */
-      --checkbox-cards-item-checkbox-size: calc(var(--space-6) * var(--spacing-multiplier-medium));
+      --checkbox-cards-item-checkbox-size: var(--mark-4, calc(26px * var(--scale)));
     }
   }
 }
 
-
-
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
 /*         All tap highlights          */
@@ -136,33 +122,3 @@
     background-color: var(--gray-a5);
   }
 }
-
-/*
- * Pin the item shell to the control channel.
- *
- * These are selection controls that happen to be card-shaped, not surfaces:
- * they sit in a row of choices and read as one large target each. Inheriting
- * BaseCard's damped surface radius made them square off while every other
- * control in the same form stayed round, so they take the control channel
- * instead — the same formulas BaseCard used before the surface split. The
- * mark inside keeps its own radius.
- */
-@breakpoints {
-  .rt-CheckboxCardsItem {
-    &:where(.rt-r-size-1) {
-      --base-card-border-radius: min(var(--radius-5), calc(var(--radius-1) + var(--space-2)));
-    }
-    &:where(.rt-r-size-2) {
-      --base-card-border-radius: min(var(--radius-6), calc(var(--radius-2) + var(--space-3)));
-    }
-    &:where(.rt-r-size-3) {
-      --base-card-border-radius: min(var(--radius-7), calc(var(--radius-3) + var(--space-4)));
-    }
-    &:where(.rt-r-size-4) {
-      --base-card-border-radius: min(var(--radius-8), calc(var(--radius-4) + var(--space-5)));
-    }
-    &:where(.rt-r-size-5) {
-      --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-6)));
-    }
-  }
-}

package/src/components/checkbox-cards.props.tsx

@@ -5,12 +5,13 @@ import { gridPropDefs } from './grid.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-const sizes = ['1', '2', '3', '4', '5'] as const;
+const sizes = ['1', '2', '3', '4'] as const;
 // The same list as Card: a selectable card looks like any other card.
 const variants = cardPropDefs.variant.values;
 
 const checkboxCardsRootPropDefs = {
   ...asChildPropDef,
+  /** The Card surface ladder: padding --surface-p-N, corner --radius-surface-N. Unset, it follows the Theme size. */
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...colorPropDef,

package/src/components/checkbox-cards.tsx

@@ -11,6 +11,7 @@ import { baseCheckboxPropDefs } from './_internal/base-checkbox.props.js';
 import { Grid } from './grid.js';
 import { ThickCheckIcon } from './icons.js';
 import { extractProps } from '../helpers/extract-props.js';
+import { useThemeSizeProps } from '../helpers/theme-size.js';
 import { marginPropDefs } from '../props/margin.props.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
@@ -43,7 +44,8 @@ interface CheckboxCardsRootProps
     MarginProps,
     CheckboxCardsRootOwnProps {}
 const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCardsRootProps>(
-  (props: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
+  (ownProps: ScopedProps<CheckboxCardsRootProps>, forwardedRef) => {
+    const props = useThemeSizeProps(ownProps, checkboxCardsRootPropDefs.size);
     const {
       __scopeCheckboxCards,
       className,
@@ -54,7 +56,7 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
     return (
       <CheckboxCardsProvider
         scope={__scopeCheckboxCards}
-        size={props.size}
+        size={props.size ?? checkboxCardsRootPropDefs.size.default}
         variant={props.variant}
       >
         <Grid asChild>
@@ -93,7 +95,11 @@ const CheckboxCardsItem = React.forwardRef<
     baseCheckboxPropDefs,
   );
   const variantClass = context?.variant ? `rt-variant-${context.variant}` : undefined;
-  const sizeClass = context?.size ? `rt-r-size-${context.size}` : undefined;
+  // extractProps writes the responsive size classes (`md:rt-r-size-3`) a template string cannot.
+  const { className: sizeClass } = extractProps(
+    { size: context?.size },
+    { size: checkboxCardsRootPropDefs.size },
+  );
 
   return (
     <label

package/src/components/dialog.css

@@ -1 +1,5 @@
 @import './_internal/base-dialog.css';
+
+.rt-DialogContent {
+  max-width: var(--overlay-w);
+}