@womp/kookie-ui 0.19.0 → 0.21.0

package/src/components/sidebar.tsx

@@ -10,19 +10,19 @@ import * as Popover from './popover.js';
 import { Separator } from './separator.js';
 import { ThickChevronRightIcon } from './icons.js';
 import { Kbd } from './kbd.js';
-import { Badge } from './badge.js';
+import { Chip } from './chip.js';
 import { useSidebarVisual } from './_internal/pane-chrome.js';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { BadgeProps } from './badge.js';
+import type { ChipProps } from './chip.js';
 
-// Badge configuration type for sidebar menu buttons
+// Chip configuration for the `badge` slot of sidebar menu buttons
 type BadgeConfig = {
   content: React.ReactNode;
-  variant?: BadgeProps['variant'];
-  size?: BadgeProps['size'];
-  color?: BadgeProps['color'];
-  radius?: BadgeProps['radius'];
+  variant?: ChipProps['variant'];
+  size?: ChipProps['size'];
+  color?: ChipProps['color'];
+  radius?: ChipProps['radius'];
 };
 
 // Sidebar separator
@@ -148,13 +148,13 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
             {badge && (
               <div className="rt-SidebarMenuBadge">
                 {typeof badge === 'string' ? (
-                  <Badge size={sidebarSize} variant="soft">
+                  <Chip size={sidebarSize} variant="soft">
                     {badge}
-                  </Badge>
+                  </Chip>
                 ) : (
-                  <Badge size={badge.size || sidebarSize} variant={badge.variant || 'soft'} color={badge.color} radius={badge.radius}>
+                  <Chip size={badge.size || sidebarSize} variant={badge.variant || 'soft'} color={badge.color} radius={badge.radius}>
                     {badge.content}
-                  </Badge>
+                  </Chip>
                 )}
               </div>
             )}
@@ -202,13 +202,13 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
             {badge && (
               <div className="rt-SidebarMenuBadge">
                 {typeof badge === 'string' ? (
-                  <Badge size={sidebarSize} variant="soft">
+                  <Chip size={sidebarSize} variant="soft">
                     {badge}
-                  </Badge>
+                  </Chip>
                 ) : (
-                  <Badge size={badge.size || sidebarSize} variant={badge.variant || 'soft'} color={badge.color} radius={badge.radius}>
+                  <Chip size={badge.size || sidebarSize} variant={badge.variant || 'soft'} color={badge.color} radius={badge.radius}>
                     {badge.content}
-                  </Badge>
+                  </Chip>
                 )}
               </div>
             )}
@@ -348,10 +348,8 @@ const SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion
       );
     });
 
-    // DropdownMenu only supports sizes 1 and 2, so map size 3 to 2
-    const dropdownSize = visual?.size === '3' ? '2' : visual?.size;
     return (
-      <DropdownMenu.Content size={dropdownSize} className={classNames(className)}>
+      <DropdownMenu.Content size={visual?.size} className={classNames(className)}>
         <DropdownMenu.Group>{normalized}</DropdownMenu.Group>
       </DropdownMenu.Content>
     );

package/src/components/slider.css

@@ -231,10 +231,9 @@
 
 .rt-SliderTicks {
   position: absolute;
-  top: 100%;
+  top: calc(100% + var(--space-3));
   left: 0;
   right: 0;
-  margin-top: var(--space-3);
   pointer-events: auto;
   height: 44px;
 }
@@ -294,8 +293,8 @@
 }
 
 .rt-SliderTickLabel {
-  font-size: var(--font-size-0);
-  line-height: var(--line-height-0);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
   color: var(--gray-11);
   font-weight: var(--font-weight-regular);
   white-space: nowrap;

package/src/components/slider.tsx

@@ -5,9 +5,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';
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
@@ -18,7 +16,6 @@ interface SliderProps
       typeof SliderPrimitive.Root,
       'asChild' | 'color' | 'children' | 'defaultChecked'
     >,
-    MarginProps,
     SliderOwnProps {
   ticks?: Array<{ value: number; label?: string }>;
   unit?: string;
@@ -28,7 +25,6 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
   const { className, color, radius, tabIndex, ...sliderProps } = extractProps(
     props,
     sliderPropDefs,
-    marginPropDefs,
   );
   const { ticks, showTickLabels, snapToTicks, unit } = props;
 

package/src/components/spinner.tsx

@@ -4,9 +4,7 @@ import classNames from 'classnames';
 import { Flex } from './flex.js';
 import { spinnerPropDefs } from './spinner.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
@@ -14,13 +12,11 @@ type SpinnerElement = React.ElementRef<'span'>;
 type SpinnerOwnProps = GetPropDefTypes<typeof spinnerPropDefs>;
 interface SpinnerProps
   extends ComponentPropsWithout<'span', RemovedProps>,
-    MarginProps,
     SpinnerOwnProps {}
 const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>((props, forwardedRef) => {
   const { className, children, loading, ...spinnerProps } = extractProps(
     props,
-    spinnerPropDefs,
-    marginPropDefs
+    spinnerPropDefs
   );
 
   if (!loading) return children;

package/src/components/switch.tsx

@@ -4,10 +4,8 @@ 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';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
 
@@ -18,14 +16,12 @@ interface SwitchProps
       typeof SwitchPrimitive.Root,
       'asChild' | 'color' | 'defaultValue' | 'children'
     >,
-    MarginProps,
     SwitchOwnProps {}
 const Switch = React.forwardRef<SwitchElement, SwitchProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, switchPropDefs.size);
   const { className, color, ...switchProps } = extractProps(
     props,
     switchPropDefs,
-    marginPropDefs,
   );
   return (
     <SwitchPrimitive.Root

package/src/components/table.css

@@ -32,9 +32,8 @@
   box-shadow: var(--table-row-box-shadow);
   box-sizing: border-box;
   vertical-align: inherit;
-  padding: var(--table-cell-padding);
-  /* Works as min-height */
-  height: var(--table-cell-min-height);
+  /* A cell hugs its line: the inset above and below, the wider inset at the sides. */
+  padding: var(--table-cell-py) var(--table-cell-px);
 }
 .rt-TableColumnHeaderCell {
   font-weight: 600;
@@ -53,32 +52,46 @@
   .rt-TableRoot {
     &:where(.rt-r-size-1) {
       --table-border-radius: var(--radius-surface-1);
-      --table-cell-padding: var(--space-3);
-      --table-cell-min-height: calc(36px * var(--scale));
+      --table-cell-py: var(--layout-space-2);
+      --table-cell-px: var(--layout-space-3);
 
       & :where(.rt-TableRootTable) {
-        font-size: var(--font-size-2);
-        line-height: var(--line-height-2);
+        font-size: var(--font-size-1);
+        line-height: var(--line-height-1);
+        letter-spacing: var(--letter-spacing-1);
       }
     }
     &:where(.rt-r-size-2) {
       --table-border-radius: var(--radius-surface-2);
-      --table-cell-padding: var(--space-4);
-      --table-cell-min-height: calc(44px * var(--scale));
+      --table-cell-py: var(--layout-space-3);
+      --table-cell-px: var(--layout-space-4);
 
       & :where(.rt-TableRootTable) {
         font-size: var(--font-size-2);
         line-height: var(--line-height-2);
+        letter-spacing: var(--letter-spacing-2);
       }
     }
     &:where(.rt-r-size-3) {
       --table-border-radius: var(--radius-surface-3);
-      --table-cell-padding: var(--space-5);
-      --table-cell-min-height: var(--space-9);
+      --table-cell-py: var(--layout-space-4);
+      --table-cell-px: var(--layout-space-5);
 
       & :where(.rt-TableRootTable) {
         font-size: var(--font-size-3);
         line-height: var(--line-height-3);
+        letter-spacing: var(--letter-spacing-3);
+      }
+    }
+    &:where(.rt-r-size-4) {
+      --table-border-radius: var(--radius-surface-4);
+      --table-cell-py: var(--layout-space-5);
+      --table-cell-px: var(--layout-space-6);
+
+      & :where(.rt-TableRootTable) {
+        font-size: var(--font-size-4);
+        line-height: var(--line-height-4);
+        letter-spacing: var(--letter-spacing-4);
       }
     }
   }

package/src/components/table.tsx

@@ -5,26 +5,22 @@ import { tableRootPropDefs, tableRowPropDefs, tableCellPropDefs } from './table.
 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';
 
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type TableRootElement = React.ElementRef<'div'>;
 type TableRootOwnProps = GetPropDefTypes<typeof tableRootPropDefs>;
 interface TableRootProps
   extends ComponentPropsWithout<'div', RemovedProps>,
-    MarginProps,
     TableRootOwnProps {}
 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,
-    rootPropDefs,
-    marginPropDefs
+    rootPropDefs
   );
   const tableLayoutClassNames = getResponsiveClassNames({
     value: layout,

package/src/components/tabs.tsx

@@ -5,10 +5,8 @@ import { Tabs as TabsPrimitive } from 'radix-ui';
 import { tabsListPropDefs } from './tabs.props.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../helpers/theme-size.js';
-import { marginPropDefs } from '../props/margin.props.js';
 
 import type { tabsContentPropDefs, tabsRootPropDefs } from './tabs.props.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
@@ -16,10 +14,9 @@ type TabsRootElement = React.ElementRef<typeof TabsPrimitive.Root>;
 type TabsRootOwnProps = GetPropDefTypes<typeof tabsRootPropDefs>;
 interface TabsRootProps
   extends ComponentPropsWithout<typeof TabsPrimitive.Root, 'asChild' | 'color' | 'defaultChecked'>,
-    MarginProps,
     TabsRootOwnProps {}
 const TabsRoot = React.forwardRef<TabsRootElement, TabsRootProps>((props, forwardedRef) => {
-  const { className, ...rootProps } = extractProps(props, marginPropDefs);
+  const { className, ...rootProps } = props;
   return (
     <TabsPrimitive.Root
       {...rootProps}
@@ -34,14 +31,12 @@ type TabsListElement = React.ElementRef<typeof TabsPrimitive.List>;
 type TabsListOwnProps = GetPropDefTypes<typeof tabsListPropDefs>;
 interface TabsListProps
   extends ComponentPropsWithout<typeof TabsPrimitive.List, RemovedProps>,
-    MarginProps,
     TabsListOwnProps {}
 const TabsList = React.forwardRef<TabsListElement, TabsListProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, tabsListPropDefs.size);
   const { className, color, ...listProps } = extractProps(
     props,
     tabsListPropDefs,
-    marginPropDefs,
   );
   return (
     <TabsPrimitive.List
@@ -82,11 +77,10 @@ type TabsContentElement = React.ElementRef<typeof TabsPrimitive.Content>;
 type TabsContentOwnProps = GetPropDefTypes<typeof tabsContentPropDefs>;
 interface TabsContentProps
   extends ComponentPropsWithout<typeof TabsPrimitive.Content, RemovedProps>,
-    MarginProps,
     TabsContentOwnProps {}
 const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(
   (props, forwardedRef) => {
-    const { className, ...contentProps } = extractProps(props, marginPropDefs);
+    const { className, ...contentProps } = props;
     return (
       <TabsPrimitive.Content
         {...contentProps}

package/src/components/text-area.css

@@ -19,6 +19,8 @@
 .rt-TextAreaRoot {
   display: flex;
   flex-direction: column;
+  /* The root spaces its parts: the gap sits between the text and an error message under it. */
+  gap: var(--space-2);
   box-sizing: border-box;
 
   font-family: var(--default-font-family);
@@ -482,7 +484,6 @@
   color: var(--red-11);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
-  margin-top: var(--space-2);
   display: flex;
   align-items: center;
   gap: var(--space-2);

package/src/components/text-area.tsx

@@ -4,9 +4,7 @@ import classNames from 'classnames';
 import { textAreaPropDefs } from './text-area.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';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
@@ -17,13 +15,12 @@ type TextAreaOwnProps = GetPropDefTypes<typeof textAreaPropDefs> & {
 };
 interface TextAreaProps
   extends ComponentPropsWithout<'textarea', RemovedProps | 'size' | 'value'>,
-    MarginProps,
     TextAreaOwnProps {}
 
 const TextArea = React.forwardRef<TextAreaElement, TextAreaProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, textAreaPropDefs.size);
   const { className, color, radius, style, ...textAreaProps } =
-    extractProps(props, textAreaPropDefs, marginPropDefs);
+    extractProps(props, textAreaPropDefs);
 
   // Generate unique IDs for accessibility
   const errorId = React.useId();

package/src/components/text-field.css

@@ -169,7 +169,7 @@
 }
 
 /*
- * A control hosted in a slot (IconButton, Button) is as tall as the field minus the slot inset on
+ * A control hosted in a slot (an icon-only Button, a Button) is as tall as the field minus the slot inset on
  * each side, and its corner is concentric with the field's. Overriding the height variable rather
  * than `height` keeps an icon button square. Wins over the button's own size rule on source order:
  * base-button.css is imported (through button.css) before this file.
@@ -660,7 +660,9 @@
   color: var(--red-11);
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
-  margin-top: var(--space-2);
+  /* The field is a row, so a gap on the root would sit beside the message, not above it. The
+     drop is inside the message's own box, never a margin on it. */
+  padding-top: var(--space-2);
   display: flex;
   align-items: center;
   gap: var(--space-2);

package/src/components/text-field.tsx

@@ -8,11 +8,9 @@ import { composeRefs } from 'radix-ui/internal';
 import { textFieldRootPropDefs, textFieldSlotPropDefs, type TextFieldSlotScrubProps } from './text-field.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 { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { NotInputTextualAttributes } from '../helpers/input-attributes.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 type TextFieldRootElement = React.ElementRef<'input'>;
@@ -22,11 +20,11 @@ type TextFieldRootOwnProps = GetPropDefTypes<typeof textFieldRootPropDefs> & {
   type?: 'date' | 'datetime-local' | 'email' | 'hidden' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 };
 type TextFieldInputProps = ComponentPropsWithout<'input', NotInputTextualAttributes | 'color' | 'defaultValue' | 'size' | 'type' | 'value'>;
-interface TextFieldRootProps extends TextFieldInputProps, MarginProps, TextFieldRootOwnProps {}
+interface TextFieldRootProps extends TextFieldInputProps, TextFieldRootOwnProps {}
 const TextFieldRoot = React.forwardRef<TextFieldRootElement, TextFieldRootProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, textFieldRootPropDefs.size);
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const { children, className, color, radius, style, ...inputProps } = extractProps(props, textFieldRootPropDefs, marginPropDefs);
+  const { children, className, color, radius, style, ...inputProps } = extractProps(props, textFieldRootPropDefs);
 
   // Generate unique IDs for accessibility
   const errorId = React.useId();

package/src/components/text.css

@@ -59,11 +59,6 @@
 
 @breakpoints {
   .rt-Text {
-    &:where(.rt-r-size-0) {
-      font-size: var(--font-size-0);
-      --line-height: var(--line-height-0);
-      --letter-spacing: var(--letter-spacing-0);
-    }
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-1);
       --line-height: var(--line-height-1);
@@ -109,20 +104,5 @@
       --line-height: var(--line-height-9);
       --letter-spacing: var(--letter-spacing-9);
     }
-    &:where(.rt-r-size-10) {
-      font-size: var(--font-size-10);
-      --line-height: var(--line-height-10);
-      --letter-spacing: var(--letter-spacing-10);
-    }
-    &:where(.rt-r-size-11) {
-      font-size: var(--font-size-11);
-      --line-height: var(--line-height-11);
-      --letter-spacing: var(--letter-spacing-11);
-    }
-    &:where(.rt-r-size-12) {
-      font-size: var(--font-size-12);
-      --line-height: var(--line-height-12);
-      --letter-spacing: var(--letter-spacing-12);
-    }
   }
 }

package/src/components/text.props.tsx

@@ -11,7 +11,7 @@ import { weightPropDef } from '../props/weight.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const as = ['span', 'div', 'label', 'p'] as const;
-const sizes = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'] as const;
+const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
 
 const textPropDefs = {
   as: { type: 'enum', values: as, default: 'span' },

package/src/components/text.tsx

@@ -2,16 +2,14 @@ import * as React from 'react';
 import { Slot } from 'radix-ui';
 
 import { extractProps } from '../helpers/extract-props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { textPropDefs } from './text.props.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 
 type TextElement = React.ElementRef<'span'>;
 type TextOwnProps = GetPropDefTypes<typeof textPropDefs>;
-interface CommonTextProps extends MarginProps, TextOwnProps {}
+interface CommonTextProps extends TextOwnProps {}
 type TextSpanProps = { as?: 'span' } & ComponentPropsWithout<'span', RemovedProps>;
 type TextDivProps = { as: 'div' } & ComponentPropsWithout<'div', RemovedProps>;
 type TextLabelProps = { as: 'label' } & ComponentPropsWithout<'label', RemovedProps>;
@@ -19,7 +17,6 @@ type TextPProps = { as: 'p' } & ComponentPropsWithout<'p', RemovedProps>;
 type TextProps = CommonTextProps & (TextSpanProps | TextDivProps | TextLabelProps | TextPProps);
 
 // Pre-merge prop definitions at module level to avoid per-render allocation
-const mergedPropDefs = { ...textPropDefs, ...marginPropDefs };
 
 const Text = React.memo(
   React.forwardRef<TextElement, TextProps>((props, forwardedRef) => {
@@ -30,7 +27,7 @@ const Text = React.memo(
       as: Tag = 'span',
       color,
       ...textProps
-    } = extractProps(props, mergedPropDefs);
+    } = extractProps(props, textPropDefs);
 
     const combinedClassName = className ? `rt-Text ${className}` : 'rt-Text';
 

package/src/components/theme.tsx

@@ -106,7 +106,7 @@ const ThemeRoot = React.forwardRef<ThemeImplElement, ThemeImplPublicProps>((prop
   } = props;
 
   // Each of these follows its prop but stays independently settable, so
-  // `ThemePanel` can change the theme at runtime. Syncing during render
+  // the context setters 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);

package/src/components/toggle.tsx

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Toggle as TogglePrimitive } from 'radix-ui';
+import { Button } from './button.js';
+import type { ButtonIconOnlyProps, ButtonProps, ButtonRankProps } from './button.js';
+import { useToggleState } from '../hooks/use-toggle-state.js';
+
+type ToggleOwnProps = {
+  /** Whether the toggle is on. The controlled counterpart of `defaultPressed`. */
+  pressed?: boolean;
+  /** Fires when the pressed state changes, with the new state. */
+  onPressedChange?: (pressed: boolean) => void;
+  /** Whether the toggle starts on. The uncontrolled counterpart of `pressed`. */
+  defaultPressed?: boolean;
+};
+
+/**
+ * Toggle takes every `Button` prop except `as`. Set `iconOnly` for a square toggle holding only
+ * an icon; the type then requires `aria-label` or `aria-labelledby`.
+ */
+type ToggleProps = Omit<ButtonProps<'button'>, 'as' | 'variant' | 'emphasis' | 'iconOnly'> &
+  ButtonRankProps &
+  ButtonIconOnlyProps &
+  ToggleOwnProps;
+
+type ToggleElement = React.ElementRef<typeof Button>;
+
+/**
+ * A button that stays pressed: bold in a formatting bar, a filter that is on or off. One
+ * control, two states, `aria-pressed` from the primitive. It is a `Button` in every other
+ * respect, and wears Button's pressed look while on.
+ *
+ * Picking one of several is a `SegmentedControl`.
+ *
+ * @example
+ * ```tsx
+ * <Toggle defaultPressed={false}>Show hidden</Toggle>
+ *
+ * <Toggle iconOnly aria-label="Bold" pressed={bold} onPressedChange={setBold}>
+ *   <BoldIcon />
+ * </Toggle>
+ * ```
+ */
+const Toggle = React.forwardRef<ToggleElement, ToggleProps>(
+  ({ pressed, onPressedChange, defaultPressed, children, className, ...buttonProps }, forwardedRef) => {
+    const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = buttonProps as {
+      'aria-label'?: string;
+      'aria-labelledby'?: string;
+    };
+
+    // The label behind aria-labelledby is read once per id, not on every press.
+    const cachedLabelRef = React.useRef<string | null>(null);
+    React.useEffect(() => {
+      cachedLabelRef.current = null;
+    }, [ariaLabelledBy]);
+
+    /**
+     * The name announced when the pressed state changes: aria-label, then the label
+     * aria-labelledby points at, then visible text.
+     */
+    const getAccessibleName = React.useCallback(() => {
+      if (ariaLabel) return ariaLabel;
+      if (ariaLabelledBy) {
+        if (cachedLabelRef.current === null) {
+          cachedLabelRef.current = document.getElementById(ariaLabelledBy)?.textContent || 'Toggle';
+        }
+        return cachedLabelRef.current;
+      }
+      if (typeof children === 'string') return children;
+      if (React.isValidElement(children) && typeof (children.props as { children?: unknown })?.children === 'string') {
+        return (children.props as { children: string }).children;
+      }
+      return 'Toggle';
+    }, [ariaLabel, ariaLabelledBy, children]);
+
+    // Shared toggle state hook: accessibility announcements and controlled-state warnings.
+    const { handlePressedChange } = useToggleState({
+      pressed,
+      onPressedChange,
+      getAccessibleName,
+      componentName: 'Toggle',
+    });
+
+    return (
+      <TogglePrimitive.Root pressed={pressed} onPressedChange={handlePressedChange} defaultPressed={defaultPressed} asChild>
+        <Button {...(buttonProps as ButtonProps)} ref={forwardedRef} className={classNames('rt-Toggle', className)}>
+          {children}
+        </Button>
+      </TogglePrimitive.Root>
+    );
+  },
+);
+Toggle.displayName = 'Toggle';
+
+export { Toggle };
+export type { ToggleProps };

package/src/components/toolbar.tsx

@@ -6,16 +6,13 @@ import { Toolbar as ToolbarPrimitive } from 'radix-ui';
 
 import { toolbarRootPropDefs } from './toolbar.props.js';
 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';
 
 import type { ButtonProps } from './button.js';
 import type { TextProps } from './text.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 import type { ButtonRankProps } from './button.js';
@@ -61,8 +58,7 @@ type ToolbarOwnProps = GetPropDefTypes<typeof toolbarRootPropDefs>;
 
 interface ToolbarProps
   extends ComponentPropsWithout<typeof ToolbarPrimitive.Root, RemovedProps | 'orientation'>,
-    ToolbarOwnProps,
-    MarginProps {
+    ToolbarOwnProps {
   /**
    * Gives every control a surface of its own, for a row that content passes behind, such as
    * `Shell.PaneHeader float`. Buttons rest `raised` instead of `soft`, and a group's well is
@@ -98,7 +94,6 @@ const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>((props, forwa
   const { className, orientation: _orientation, backdrop = false, children, ...rootProps } = extractProps(
     { ...props, size },
     toolbarRootPropDefs,
-    marginPropDefs,
   );
 
   const context = React.useMemo(() => ({ size, orientation, backdrop }), [size, orientation, backdrop]);
@@ -163,7 +158,7 @@ type ToolbarTextButtonProps = ToolbarButtonBaseProps &
   iconOnly?: false;
 };
 
-/** An icon-only button: renders an `IconButton`, and the type requires an `aria-label`. */
+/** An icon-only button: renders `Button iconOnly`, and the type requires an `aria-label`. */
 type ToolbarIconButtonProps = Omit<ToolbarButtonBaseProps, 'aria-label' | 'aria-labelledby' | 'fullWidth'> &
   ButtonRankProps & {
   iconOnly: true;
@@ -206,13 +201,12 @@ const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>((p
     ...stateProps,
   } as const;
 
+  // The text and icon-only branches share every prop but the name; one Button renders both.
+  const buttonProps = { ...rest, ...(iconOnly ? { iconOnly: true } : {}), ...shared } as ButtonProps;
+
   return (
     <ToolbarPrimitive.Button asChild ref={forwardedRef} disabled={disabled || group?.disabled || undefined}>
-      {iconOnly ? (
-        <IconButton {...(rest as Omit<ToolbarIconButtonProps, 'iconOnly' | 'variant' | 'emphasis'>)} {...shared} />
-      ) : (
-        <Button {...(rest as Omit<ToolbarTextButtonProps, 'iconOnly' | 'variant' | 'emphasis'>)} {...shared} />
-      )}
+      <Button {...buttonProps} />
     </ToolbarPrimitive.Button>
   );
 });