@womp/kookie-ui 0.17.0 → 0.19.0

package/src/components/avatar.css

@@ -34,7 +34,7 @@
 /* stylelint-disable selector-max-type */
 .rt-AvatarRoot:where(button),
 .rt-AvatarRoot:where(a),
-.rt-AvatarRoot:where([role="button"]) {
+.rt-AvatarRoot:where([role='button']) {
   cursor: pointer;
 
   &:where(:focus-visible) {
@@ -42,9 +42,14 @@
     outline-offset: var(--focus-outline-offset);
   }
 
+  /* Disabled is a colour remap: the element still hit-tests, so the cursor stops promising a press. */
   &:where(:disabled),
   &:where([data-disabled]) {
-    cursor: not-allowed;
+    cursor: default;
+  }
+
+  /* A link has no native disabled: keep a disabled one from navigating. */
+  &:where(a[data-disabled]) {
     pointer-events: none;
   }
 
@@ -122,69 +127,70 @@
   }
 }
 
+/* Box ladder is v2's: sizes 1-4 are the control heights, 5-9 are 56/64/80/96/128. */
 @breakpoints {
   .rt-AvatarRoot {
     &:where(.rt-r-size-1) {
-      --avatar-size: var(--space-6);
+      --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(--space-7);
+      --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(--space-8);
+      --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(--space-9);
+      --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: var(--space-10);
+      --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: 80px;
+      --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: 96px;
+      --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: 128px;
+      --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: 160px;
+      --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);
     }
   }
@@ -284,7 +290,7 @@
 
 /* Shared interactive states for soft, outline, surface */
 /* stylelint-disable selector-max-type */
-.rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface) {
+.rt-AvatarRoot:where(button, a, [role='button']):where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface) {
   /* Hover state */
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled])) {
@@ -307,7 +313,7 @@
 }
 
 /* Border interactive states for outline and surface */
-.rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-outline, .rt-variant-surface) {
+.rt-AvatarRoot:where(button, a, [role='button']):where(.rt-variant-outline, .rt-variant-surface) {
   /* Hover border */
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled])) {
@@ -351,7 +357,7 @@
 }
 
 /* Solid interactive states */
-.rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-solid) {
+.rt-AvatarRoot:where(button, a, [role='button']):where(.rt-variant-solid) {
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled])) {
       background-color: var(--accent-solid-hover);
@@ -395,7 +401,7 @@
 }
 
 /* Raised interactive states */
-.rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-raised) {
+.rt-AvatarRoot:where(button, a, [role='button']):where(.rt-variant-raised) {
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled])) {
       background-color: var(--gray-2);

package/src/components/badge.css

@@ -33,58 +33,52 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
+/* Paddings and gaps sit on v2's space palette (2, 4, 8, 12): no fractional steps. */
 @breakpoints {
   .rt-Badge {
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-0);
       line-height: var(--line-height-0);
       letter-spacing: var(--letter-spacing-0);
-      padding: calc(var(--space-2) * 0.5) calc(var(--space-2) * 1.5);
-      gap: calc(var(--space-2) * 1.5);
+      padding: var(--space-1) var(--space-2);
+      gap: var(--space-2);
       border-radius: max(calc(var(--radius-1) * var(--spacing-multiplier-medium)), var(--radius-full));
-
-      &:where(.rt-variant-ghost) {
-        padding: calc(var(--space-2) * 0.25) var(--space-2);
-        gap: var(--space-2);
-      }
     }
     &:where(.rt-r-size-2) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       padding: var(--space-2) var(--space-3);
-      gap: calc(var(--space-2) * 1.5);
-      border-radius: var(--radius-pill-1);
+      gap: var(--space-2);
+      border-radius: var(--radius-control-1);
 
       &:where(.rt-variant-ghost) {
-        padding: calc(var(--space-2) * 0.5) calc(var(--space-2) * 1.25);
-        gap: var(--space-2);
+        padding: var(--space-1) var(--space-2);
       }
     }
     &:where(.rt-r-size-3) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
-      padding: var(--space-2) calc(var(--space-3) * 1.25);
+      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: calc(var(--space-2) * 0.75) var(--space-3);
-        gap: calc(var(--space-2) * 1.5);
+        padding: var(--space-1) var(--space-3);
+        gap: var(--space-2);
       }
     }
     &:where(.rt-r-size-4) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
-      padding: calc(var(--space-2) * 1.25) calc(var(--space-3) * 1.5);
-      gap: calc(var(--space-3) * 1.25);
-      border-radius: var(--radius-pill-3);
+      padding: var(--space-2) var(--space-4);
+      gap: var(--space-3);
+      border-radius: var(--radius-control-3);
 
       &:where(.rt-variant-ghost) {
-        padding: var(--space-2) calc(var(--space-3) * 1.25);
-        gap: var(--space-3);
+        padding: var(--space-2) var(--space-3);
       }
     }
   }
@@ -107,8 +101,7 @@
     background-color: var(--gray-a3);
     outline: none;
     filter: none;
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 }
 
@@ -128,8 +121,7 @@
   &:where([data-disabled]) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 }
 
@@ -139,8 +131,7 @@
   &:where([data-disabled]) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);
-    cursor: not-allowed;
-    pointer-events: none;
+    cursor: default;
   }
 }
 

package/src/components/badge.props.tsx

@@ -9,7 +9,7 @@ const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost'] as c
 
 const badgePropDefs = {
   ...asChildPropDef,
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
+  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...grayAccentColorPropDef,
   ...radiusPropDef,

package/src/components/button.css

@@ -1,211 +1,41 @@
 /**
  * Button Component Styles
- * 
- * This file contains the core styling for the Button component, including
- * size variants, icon handling, and responsive design patterns. The styles
- * are built on top of the base button styles imported from _internal.
- * 
- * Key features:
- * - Responsive sizing with mobile-first approach
- * - Automatic icon sizing based on button size
- * - Ghost variant with specialized padding
- * - Consistent typography and spacing
+ *
+ * Button sits on the shared control ladder in _internal/base-button.css: height, side padding
+ * (with the pill correction), gap and icon size all come from there, for every variant. This
+ * file adds the label's type step per size.
  */
 
 @import './_internal/base-button.css';
 
-/* 
- * Button-specific styles that extend the base button
- * These styles handle icon opacity and specialized behaviors
- */
-
-/***************************************************************************************************
- *                                                                                                 *
- * SIZES                                                                                           *
- *                                                                                                 *
- * Button sizes are designed for different interface densities and contexts:
- * - Size 1 (24px): Compact for toolbars and dense interfaces
- * - Size 2 (32px): Standard for most interface contexts  
- * - Size 3 (40px): Large for important actions and mobile touch targets
- * - Size 4 (48px): Extra large for hero sections and maximum impact
- *                                                                                                 *
- ***************************************************************************************************/
-
-/* 
- * Ghost variant has specialized padding that differs from other variants
- * This creates a more subtle, text-like appearance
- */
 .rt-Button {
-  --button-padding-icon-trim: max(calc(var(--button-padding-inline-base) * 0.35), var(--space-2));
-
-  &:where(.rt-variant-ghost) {
-    padding: var(--button-ghost-padding-y) var(--button-ghost-padding-x);
-  }
+  font-weight: var(--font-weight-medium);
 }
 
 @breakpoints {
   .rt-Button {
-    /* 
-     * Size 1: Compact (24px height)
-     * Designed for toolbars, dense interfaces, and space-constrained contexts
-     */
     &:where(.rt-r-size-1) {
-      --button-padding-inline-base: var(--space-3);
-      gap: var(--component-gap-1);
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
-
-      /* 
-       * Icon sizing for size 1
-       * Icons are automatically sized to match the button's scale
-       */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-1);
-        height: var(--content-icon-size-1);
-      }
-
-      /* 
-       * Standard padding for non-ghost variants
-       * Provides adequate touch targets while maintaining compact appearance
-       */
-      &:where(:not(.rt-variant-ghost)) {
-        padding-inline-start: var(--button-padding-inline-base);
-        padding-inline-end: var(--button-padding-inline-base);
-      }
-
-      /* 
-       * Ghost variant padding for size 1
-       * Reduced padding creates seamless text integration
-       */
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-1);
-        --button-ghost-padding-x: var(--space-3);
-        --button-ghost-padding-y: var(--space-2);
-        --button-padding-inline-base: var(--button-ghost-padding-x);
-      }
     }
 
-    /* 
-     * Size 2: Standard (32px height)
-     * Default size for most interface contexts and general use
-     */
     &:where(.rt-r-size-2) {
-      --button-padding-inline-base: var(--space-4);
-      gap: var(--component-gap-2);
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
-
-      /* Icon sizing for size 2 */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-2);
-        height: var(--content-icon-size-2);
-      }
-
-      /* Standard padding for non-ghost variants */
-      &:where(:not(.rt-variant-ghost)) {
-        padding-inline-start: var(--button-padding-inline-base);
-        padding-inline-end: var(--button-padding-inline-base);
-      }
-
-      /* Ghost variant padding for size 2 */
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-2);
-        --button-ghost-padding-x: var(--space-3);
-        --button-ghost-padding-y: var(--space-2);
-        --button-padding-inline-base: var(--button-ghost-padding-x);
-      }
     }
 
-    /* 
-     * Size 3: Large (40px height)
-     * Recommended for important actions and mobile touch targets
-     */
     &:where(.rt-r-size-3) {
-      --button-padding-inline-base: var(--space-4);
-      gap: var(--component-gap-3);
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
-
-      /* Icon sizing for size 3 */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-3);
-        height: var(--content-icon-size-3);
-      }
-
-      /* Standard padding for non-ghost variants */
-      &:where(:not(.rt-variant-ghost)) {
-        padding-inline-start: var(--button-padding-inline-base);
-        padding-inline-end: var(--button-padding-inline-base);
-      }
-
-      /* Ghost variant padding for size 3 */
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-3);
-        --button-ghost-padding-x: var(--space-4);
-        --button-ghost-padding-y: calc(var(--space-2) * 1.5);
-        --button-padding-inline-base: var(--button-ghost-padding-x);
-      }
     }
 
-    /* 
-     * Size 4: Extra Large (48px height)
-     * Designed for hero sections and maximum visual impact
-     */
     &:where(.rt-r-size-4) {
-      --button-padding-inline-base: var(--space-5);
-      gap: var(--component-gap-4);
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
-
-      /* Icon sizing for size 4 */
-      /* stylelint-disable-next-line selector-max-type */
-      & :where(svg) {
-        width: var(--content-icon-size-4);
-        height: var(--content-icon-size-4);
-      }
-
-      /* Standard padding for non-ghost variants */
-      &:where(:not(.rt-variant-ghost)) {
-        padding-inline-start: var(--button-padding-inline-base);
-        padding-inline-end: var(--button-padding-inline-base);
-      }
-
-      /* Ghost variant padding for size 4 */
-      &:where(.rt-variant-ghost) {
-        gap: var(--component-gap-ghost-4);
-        --button-ghost-padding-x: var(--space-5);
-        --button-ghost-padding-y: var(--space-3);
-        --button-padding-inline-base: var(--button-ghost-padding-x);
-      }
     }
   }
 }
-
-/***************************************************************************************************
- *                                                                                                 *
- * VARIANTS                                                                                        *
- *                                                                                                 *
- * Button variants provide different visual contexts and hierarchies:
- * - raised: lifted off its ground, with an edge and a shadow
- * - solid: Primary actions that should be noticed first
- * - soft: Content-heavy interfaces, natural integration
- * - surface: Elevated appearance with subtle depth
- * - outline: Secondary actions that support primary actions
- * - ghost: Utility functions that don't compete for attention
- *                                                                                                 *
- ***************************************************************************************************/
-
-/* 
- * Typography styling for all button variants
- * Ensures consistent font weight across all button types
- */
-.rt-Button {
-  font-weight: var(--font-weight-medium);
-}

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/chatbar.tsx

@@ -9,6 +9,7 @@ import { Flex } from './flex.js';
 import { ScrollArea } from './scroll-area.js';
 import { Slot } from './slot.js';
 import { NoticeSizeContext } from './notice.js';
+import { useThemeSize } from '../helpers/theme-size.js';
 import { Spinner } from './spinner.js';
 import { Text } from './text.js';
 import { VisuallyHidden } from './visually-hidden.js';
@@ -125,6 +126,9 @@ interface ChatbarContextValue {
   beginFilePickerPress(): void;
 }
 
+/** Chatbar's own range; a Theme size of 4 maps to 3. */
+const chatbarSizePropDef = { values: ['1', '2', '3'] as const };
+
 const ChatbarContext = React.createContext<ChatbarContextValue | null>(null);
 // Value lives in its own context so keystrokes only re-render parts that read it
 const ChatbarValueContext = React.createContext<string>('');
@@ -315,7 +319,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
     disabled,
     readOnly,
     onSubmit,
-    size = '2',
+    size: sizeProp,
     variant,
     color,
     radius,
@@ -339,6 +343,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
     context,
     ...divProps
   } = props;
+  const size = useThemeSize(sizeProp, chatbarSizePropDef);
 
   const isValueControlled = valueProp != null;
   const [valueUncontrolled, setValueUncontrolled] = React.useState<string>(defaultValue);
@@ -1033,7 +1038,7 @@ const AttachmentsRow = React.forwardRef<HTMLDivElement, AttachmentsRowProps>((pr
   return (
     <div>
       <Comp {...divProps} ref={forwardedRef} className={classNames('rt-ChatbarAttachmentsRow', className)} role="list" aria-label={divProps['aria-label'] ?? 'Attachments'}>
-        <ScrollArea className="rt-ChatbarScrollArea" scrollbars="horizontal" size="1">
+        <ScrollArea className="rt-ChatbarScrollArea" scrollbars="horizontal">
           <Flex align="center" gap="3" minWidth="fit-content">
             {ctx.attachments.map((att) => (
               <Attachment key={att.id} attachment={att} asChild={!!renderAttachment}>
@@ -1117,7 +1122,7 @@ const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, for
 
   const lead =
     attachment.status === 'uploading' ? (
-      <Spinner size="1" />
+      <Spinner />
     ) : isImage ? (
       <img className="rt-ChatbarAttachmentImage" src={attachment.url} alt="" />
     ) : (
@@ -1361,7 +1366,7 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
 
   const glyph =
     mode === 'stop' ? (
-      stopIcon ?? (status === 'submitted' ? <Spinner size={ctx.size} /> : (
+      stopIcon ?? (status === 'submitted' ? <Spinner /> : (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
           <rect x="7" y="7" width="10" height="10" rx="2" />
         </svg>