@womp/kookie-ui 0.20.0 → 0.21.0

package/src/components/checkbox-group.tsx

@@ -11,10 +11,8 @@ import { ThickCheckIcon } from './icons.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 type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
-import type { MarginProps } from '../props/margin.props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
 const CHECKBOX_GROUP_NAME = 'CheckboxGroup';
@@ -37,7 +35,6 @@ interface CheckboxGroupRootProps
       typeof CheckboxGroupPrimitive.Root,
       'asChild' | 'color' | 'defaultChecked'
     >,
-    MarginProps,
     CheckboxGroupRootOwnProps {}
 const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGroupRootProps>(
   (
@@ -50,7 +47,7 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
     forwardedRef,
   ) => {
     const size = useThemeSize(sizeProp, checkboxGroupRootPropDefs.size);
-    const { __scopeCheckboxGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
+    const { __scopeCheckboxGroup, className, ...rootProps } = props;
     const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxGroup);
     return (
       <CheckboxGroupProvider
@@ -73,8 +70,7 @@ CheckboxGroupRoot.displayName = 'CheckboxGroup.Root';
 
 type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
 interface CheckboxGroupItemProps
-  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps>,
-    MarginProps {}
+  extends ComponentPropsWithout<typeof CheckboxGroupPrimitive.Item, RemovedProps> {}
 const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
   (_props: ScopedProps<CheckboxGroupItemProps>, forwardedRef) => {
     const { __scopeCheckboxGroup, children, className, style, ...props } = _props;
@@ -133,7 +129,6 @@ const CheckboxGroupItemCheckbox = React.forwardRef<
   const { color, className } = extractProps(
     { ...props, ...context },
     checkboxGroupRootPropDefs,
-    marginPropDefs,
   );
   return (
     <CheckboxGroupPrimitive.Item

package/src/components/checkbox.tsx

@@ -9,9 +9,7 @@ import { checkboxPropDefs } from './checkbox.props.js';
 import { ThickCheckIcon, ThickDividerHorizontalIcon } 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 { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
 
@@ -22,7 +20,6 @@ interface CheckboxProps
       typeof CheckboxPrimitive.Root,
       'asChild' | 'color' | 'defaultValue' | 'children'
     >,
-    MarginProps,
     CheckboxOwnProps {}
 const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, checkboxPropDefs.size);
@@ -33,7 +30,7 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>((ownProps, for
     defaultChecked: defaultCheckedProp,
     onCheckedChange,
     ...checkboxProps
-  } = extractProps(props, checkboxPropDefs, marginPropDefs);
+  } = extractProps(props, checkboxPropDefs);
 
   const [checked, setChecked] = useControllableState({
     prop: checkedProp,

package/src/components/{badge.css → chip.css}

@@ -1,4 +1,4 @@
-.rt-Badge {
+.rt-Chip {
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
@@ -35,7 +35,7 @@
 
 /* Paddings and gaps sit on v2's space palette (2, 4, 8, 12): no fractional steps. */
 @breakpoints {
-  .rt-Badge {
+  .rt-Chip {
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
@@ -92,7 +92,7 @@
 
 /* solid */
 
-.rt-Badge:where(.rt-variant-solid) {
+.rt-Chip:where(.rt-variant-solid) {
   background-color: var(--accent-solid);
   color: var(--accent-solid-contrast);
 
@@ -107,7 +107,7 @@
 
 /* surface */
 
-.rt-Badge:where(.rt-variant-surface) {
+.rt-Chip:where(.rt-variant-surface) {
   background-color: var(--accent-2);
   box-shadow: inset 0 0 0 1px var(--accent-6);
   color: var(--accent-ink);
@@ -115,7 +115,7 @@
 
 /* soft / ghost */
 
-.rt-Badge:where(.rt-variant-soft, .rt-variant-ghost) {
+.rt-Chip:where(.rt-variant-soft, .rt-variant-ghost) {
   color: var(--accent-ink);
 
   &:where([data-disabled]) {
@@ -125,7 +125,7 @@
   }
 }
 
-.rt-Badge:where(.rt-variant-soft) {
+.rt-Chip:where(.rt-variant-soft) {
   background-color: var(--accent-3);
 
   &:where([data-disabled]) {
@@ -137,21 +137,21 @@
 
 /* outline */
 
-.rt-Badge:where(.rt-variant-outline) {
+.rt-Chip:where(.rt-variant-outline) {
   box-shadow: inset 0 0 0 1px var(--accent-6);
   color: var(--accent-ink);
 }
 
 /* ghost */
 
-.rt-Badge:where(.rt-variant-ghost) {
+.rt-Chip:where(.rt-variant-ghost) {
   background-color: transparent;
   color: var(--accent-ink);
 }
 
 /* raised */
 
-.rt-Badge:where(.rt-variant-raised) {
+.rt-Chip:where(.rt-variant-raised) {
   position: relative;
   top: var(--raised-elevation-offset);
   color: var(--accent-ink);

package/src/components/{badge.props.tsx → chip.props.tsx}

@@ -7,7 +7,7 @@ import type { PropDef } from '../props/prop-def.js';
 const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['raised', 'solid', 'soft', 'surface', 'outline', 'ghost'] as const;
 
-const badgePropDefs = {
+const chipPropDefs = {
   ...asChildPropDef,
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
@@ -18,4 +18,4 @@ const badgePropDefs = {
   variant: PropDef<(typeof variants)[number]>;
 };
 
-export { badgePropDefs };
+export { chipPropDefs };

package/src/components/{badge.tsx → chip.tsx}

@@ -2,20 +2,18 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { Slot } from 'radix-ui';
 
-import { badgePropDefs } from './badge.props.js';
+import { chipPropDefs } from './chip.props.js';
 import { extractProps } from '../helpers/extract-props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { Tooltip } from './tooltip.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';
 
-type BadgeElement = React.ElementRef<'span'>;
-type BadgeOwnProps = GetPropDefTypes<typeof badgePropDefs>;
+type ChipElement = React.ElementRef<'span'>;
+type ChipOwnProps = GetPropDefTypes<typeof chipPropDefs>;
 
-// Tooltip props that can be passed to Badge
-interface BadgeTooltipProps {
+// Tooltip props that can be passed to Chip
+interface ChipTooltipProps {
   tooltip?: React.ReactNode;
   tooltipSide?: 'top' | 'right' | 'bottom' | 'left';
   tooltipAlign?: 'start' | 'center' | 'end';
@@ -23,13 +21,12 @@ interface BadgeTooltipProps {
   tooltipDisableHoverableContent?: boolean;
 }
 
-interface BadgeProps
+interface ChipProps
   extends ComponentPropsWithout<'span', RemovedProps>,
-    MarginProps,
-    BadgeOwnProps,
-    BadgeTooltipProps {}
+    ChipOwnProps,
+    ChipTooltipProps {}
 
-const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) => {
+const Chip = React.forwardRef<ChipElement, ChipProps>((props, forwardedRef) => {
   const {
     asChild,
     className,
@@ -41,29 +38,29 @@ const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) =
     tooltipAlign = 'center',
     tooltipDelayDuration,
     tooltipDisableHoverableContent,
-    ...badgeProps
-  } = extractProps(props, badgePropDefs, marginPropDefs);
+    ...chipProps
+  } = extractProps(props, chipPropDefs);
 
 
 
   // Memoize component variable to prevent unnecessary re-renders
   const Comp = React.useMemo(() => (asChild ? Slot.Root : 'span'), [asChild]);
 
-  const badge = (
+  const chip = (
     <Comp
       data-accent-color={color}
       data-radius={radius}
-      {...badgeProps}
+      {...chipProps}
       ref={forwardedRef}
-      className={classNames('rt-reset', 'rt-Badge', className)}
+      className={classNames('rt-reset', 'rt-Chip', className)}
     >
       {children}
     </Comp>
   );
 
-  // If no tooltip is provided, return the badge as-is
+  // If no tooltip is provided, return the chip as-is
   if (!tooltip) {
-    return badge;
+    return chip;
   }
 
   // Wrap with Tooltip when tooltip content is provided
@@ -75,11 +72,11 @@ const Badge = React.forwardRef<BadgeElement, BadgeProps>((props, forwardedRef) =
       delayDuration={tooltipDelayDuration}
       disableHoverableContent={tooltipDisableHoverableContent}
     >
-      {badge}
+      {chip}
     </Tooltip>
   );
 });
-Badge.displayName = 'Badge';
+Chip.displayName = 'Chip';
 
-export { Badge };
-export type { BadgeProps };
+export { Chip };
+export type { ChipProps };

package/src/components/code.tsx

@@ -4,9 +4,7 @@ import { Slot } from 'radix-ui';
 
 import { codePropDefs } from './code.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 CodeElement = React.ElementRef<'code'>;
 type CodeOwnProps = GetPropDefTypes<typeof codePropDefs>;
 interface CodeProps
   extends ComponentPropsWithout<'code', RemovedProps>,
-    MarginProps,
     CodeOwnProps {}
 const Code = React.forwardRef<CodeElement, CodeProps>((props, forwardedRef) => {
   const { asChild, className, color, ...codeProps } = extractProps(
     props,
     codePropDefs,
-    marginPropDefs,
   );
   // Code ghost color prop should work as text color by default
   const resolvedColor = props.variant === 'ghost' ? color || undefined : color;

package/src/components/combobox.css

@@ -123,8 +123,8 @@
     color: var(--accent-solid-contrast);
   }
 
-  /* Muted text follows the highlight colour. Badges keep their own colours. */
-  :where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text, [data-accent-color='gray']:not(.rt-Badge)) {
+  /* Muted text follows the highlight colour. Chips keep their own colours. */
+  :where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text, [data-accent-color='gray']:not(.rt-Chip)) {
     color: inherit;
   }
 }

package/src/components/combobox.tsx

@@ -27,7 +27,6 @@ import { Command as CommandPrimitive, useCommandState } from 'cmdk';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../helpers/theme-size.js';
 import { comboboxRootPropDefs, comboboxTriggerPropDefs, comboboxContentPropDefs } from './combobox.props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
 import { Theme, useThemeContext } from './theme.js';
 import { requireReactElement } from '../helpers/require-react-element.js';
@@ -36,7 +35,6 @@ import { Slottable } from './slot.js';
 import { VisuallyHidden } from './visually-hidden.js';
 
 import type { textFieldRootPropDefs } from './text-field.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';
 
@@ -319,7 +317,7 @@ ComboboxRoot.displayName = 'Combobox.Root';
 type ComboboxTriggerElement = HTMLButtonElement;
 type ComboboxTriggerOwnProps = GetPropDefTypes<typeof comboboxTriggerPropDefs>;
 type NativeTriggerProps = Omit<React.ComponentPropsWithoutRef<'button'>, 'color'>;
-interface ComboboxTriggerProps extends NativeTriggerProps, MarginProps, ComboboxTriggerOwnProps {}
+interface ComboboxTriggerProps extends NativeTriggerProps, ComboboxTriggerOwnProps {}
 
 const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTriggerProps>((props, forwardedRef) => {
   const ctx = useComboboxContext('Trigger');
@@ -338,7 +336,7 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
     onKeyDown,
     type: buttonType,
     ...triggerProps
-  } = extractProps({ size: ctx.size, ...props }, triggerSizingPropDefs, comboboxTriggerPropDefs, marginPropDefs);
+  } = extractProps({ size: ctx.size, ...props }, triggerSizingPropDefs, comboboxTriggerPropDefs);
 
   const isDisabled = disabled ?? ctx.disabled;
   const resolvedColor = color ?? ctx.color;

package/src/components/dialog.tsx

@@ -165,7 +165,7 @@ type DialogTitleProps = ComponentPropsWithout<typeof Heading, 'asChild'>;
 const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(
   (props, forwardedRef) => (
     <DialogPrimitive.Title asChild>
-      <Heading size="5" mb="4" trim="start" {...props} asChild={false} ref={forwardedRef} />
+      <Heading size="5" trim="start" {...props} asChild={false} ref={forwardedRef} />
     </DialogPrimitive.Title>
   ),
 );

package/src/components/dropdown-menu.css

@@ -21,25 +21,25 @@
 
 @breakpoints {
   /* Size 1 Button */
-  .rt-Button:where(.rt-r-size-1) :where(.rt-DropdownMenuTriggerIcon) {
+  .rt-Button:where(:not([data-icon-only]).rt-r-size-1) :where(.rt-DropdownMenuTriggerIcon) {
     width: var(--trigger-icon-size-1);
     height: var(--trigger-icon-size-1);
   }
 
   /* Size 2 Button */
-  .rt-Button:where(.rt-r-size-2) :where(.rt-DropdownMenuTriggerIcon) {
+  .rt-Button:where(:not([data-icon-only]).rt-r-size-2) :where(.rt-DropdownMenuTriggerIcon) {
     width: var(--trigger-icon-size-2);
     height: var(--trigger-icon-size-2);
   }
 
   /* Size 3 Button */
-  .rt-Button:where(.rt-r-size-3) :where(.rt-DropdownMenuTriggerIcon) {
+  .rt-Button:where(:not([data-icon-only]).rt-r-size-3) :where(.rt-DropdownMenuTriggerIcon) {
     width: var(--trigger-icon-size-3);
     height: var(--trigger-icon-size-3);
   }
 
   /* Size 4 Button */
-  .rt-Button:where(.rt-r-size-4) :where(.rt-DropdownMenuTriggerIcon) {
+  .rt-Button:where(:not([data-icon-only]).rt-r-size-4) :where(.rt-DropdownMenuTriggerIcon) {
     width: var(--trigger-icon-size-4);
     height: var(--trigger-icon-size-4);
   }

package/src/components/heading.tsx

@@ -3,15 +3,13 @@ import { Slot } from 'radix-ui';
 
 import { headingPropDefs } from './heading.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';
 
 type HeadingElement = React.ElementRef<'h1'>;
 type HeadingOwnProps = GetPropDefTypes<typeof headingPropDefs>;
-interface CommonHeadingProps extends MarginProps, HeadingOwnProps {}
+interface CommonHeadingProps extends HeadingOwnProps {}
 type HeadingH1Props = { as?: 'h1' } & ComponentPropsWithout<'h1', RemovedProps>;
 type HeadingH2Props = { as: 'h2' } & ComponentPropsWithout<'h2', RemovedProps>;
 type HeadingH3Props = { as: 'h3' } & ComponentPropsWithout<'h3', RemovedProps>;
@@ -22,7 +20,6 @@ type HeadingProps = CommonHeadingProps &
   (HeadingH1Props | HeadingH2Props | HeadingH3Props | HeadingH4Props | HeadingH5Props | HeadingH6Props);
 
 // Pre-merge prop definitions at module level to avoid per-render allocation
-const mergedPropDefs = { ...headingPropDefs, ...marginPropDefs };
 
 const Heading = React.memo(
   React.forwardRef<HeadingElement, HeadingProps>((props, forwardedRef) => {
@@ -33,7 +30,7 @@ const Heading = React.memo(
       as: Tag = 'h1',
       color,
       ...headingProps
-    } = extractProps(props, mergedPropDefs);
+    } = extractProps(props, headingPropDefs);
 
     const combinedClassName = className ? `rt-Heading ${className}` : 'rt-Heading';
 

package/src/components/index.css

@@ -1,40 +1,30 @@
 @import './reset.css';
 @import './layout.css';
 
-/* Import Skeleton before other components so that its default border-radius doesn’t have a higher specificity */
-@import './skeleton.css';
-
 /* Import Text before other components as it’s commonly extended */
 @import './text.css';
 
 @import './accordion.css';
 @import './alert-dialog.css';
 @import './avatar.css';
-@import './badge.css';
+/* Chip keeps Badge's place in the cascade. */
+@import './chip.css';
 @import './blockquote.css';
 @import './button.css';
 @import './card.css';
-@import './checkbox-cards.css';
 @import './checkbox-group.css';
 @import './checkbox.css';
 @import './code.css';
 @import './context-menu.css';
-@import './data-list.css';
 @import './dialog.css';
 @import './dropdown-menu.css';
 @import './combobox.css';
-@import './em.css';
 @import './heading.css';
-@import './hover-card.css';
-@import './icon-button.css';
-@import './image.css';
 @import './kbd.css';
 @import './link.css';
 @import './navbar.css';
 @import './popover.css';
 @import './progress.css';
-@import './quote.css';
-@import './radio-cards.css';
 @import './radio-group.css';
 @import './radio.css';
 @import './sheet.css';
@@ -46,14 +36,11 @@
 @import './shell.css';
 @import './slider.css';
 @import './spinner.css';
-@import './strong.css';
 @import './switch.css';
-@import './tab-nav.css';
 @import './table.css';
 @import './tabs.css';
 @import './text-area.css';
 @import './text-field.css';
-@import './theme-panel.css';
 @import './toolbar.css';
 @import './tooltip.css';
 @import './virtual-menu.css';

package/src/components/index.tsx

@@ -1,29 +1,22 @@
 export { AccessibleIcon, type AccessibleIconProps } from './accessible-icon.js';
 export * as Accordion from './accordion.js';
 export * as AlertDialog from './alert-dialog.js';
-export { AspectRatio, type AspectRatioProps } from './aspect-ratio.js';
 export { Avatar, type AvatarProps } from './avatar.js';
-export { Badge, type BadgeProps } from './badge.js';
 export { Blockquote, type BlockquoteProps } from './blockquote.js';
 export { Box, type BoxProps } from './box.js';
 export { Button, type ButtonProps } from './button.js';
 export { Card, type CardProps } from './card.js';
-export * as CheckboxCards from './checkbox-cards.js';
 export * as CheckboxGroup from './checkbox-group.js';
 export { Checkbox, type CheckboxProps } from './checkbox.js';
+export { Chip, type ChipProps } from './chip.js';
 export { Code, type CodeProps } from './code.js';
-export { Container, type ContainerProps } from './container.js';
 export * as ContextMenu from './context-menu.js';
-export * as DataList from './data-list.js';
 export * as Dialog from './dialog.js';
 export * as DropdownMenu from './dropdown-menu.js';
 export * as Combobox from './combobox.js';
-export { Em, type EmProps } from './em.js';
 export { Flex, type FlexProps } from './flex.js';
 export { Grid, type GridProps } from './grid.js';
 export { Heading, type HeadingProps } from './heading.js';
-export * as HoverCard from './hover-card.js';
-export { IconButton, type IconButtonProps } from './icon-button.js';
 export {
   type IconProps,
   ChevronDownIcon,
@@ -31,44 +24,30 @@ export {
   ThickChevronRightIcon,
   ThickDividerHorizontalIcon,
 } from './icons.js';
-export { Image, type ImageProps } from './image.js';
 export { Kbd, type KbdProps } from './kbd.js';
 export { Link, type LinkProps } from './link.js';
 export * as Navbar from './navbar.js';
 export * as Popover from './popover.js';
 export { Portal, type PortalProps } from './portal.js';
 export { Progress, type ProgressProps } from './progress.js';
-export { Quote, type QuoteProps } from './quote.js';
-export * as RadioCards from './radio-cards.js';
 export * as RadioGroup from './radio-group.js';
 export { Radio, type RadioProps } from './radio.js';
 export { Reset, type ResetProps } from './reset.js';
 export { ScrollArea, type ScrollAreaProps } from './scroll-area.js';
 export * as SegmentedControl from './segmented-control.js';
-export { Section, type SectionProps } from './section.js';
 export * as Select from './select.js';
 export { Separator, type SeparatorProps } from './separator.js';
-export { Skeleton, type SkeletonProps } from './skeleton.js';
 export { Slider, type SliderProps } from './slider.js';
 export { Slot, Slottable } from './slot.js';
 export { Spinner, type SpinnerProps } from './spinner.js';
-export { Strong, type StrongProps } from './strong.js';
 export { Switch, type SwitchProps } from './switch.js';
-export * as TabNav from './tab-nav.js';
 export * as Table from './table.js';
 export * as Tabs from './tabs.js';
 export { TextArea, type TextAreaProps } from './text-area.js';
 export * as TextField from './text-field.js';
 export { Text, type TextProps } from './text.js';
-export {
-  ThemePanel,
-  ThemePanelContent,
-  type ThemePanelProps,
-  type ThemePanelContentProps,
-} from './theme-panel.js';
 export { Theme, ThemeContext, type ThemeContextValue, type ThemeProps, useThemeContext } from './theme.js';
-export { ToggleButton, type ToggleButtonProps } from './toggle-button.js';
-export { ToggleIconButton, type ToggleIconButtonProps } from './toggle-icon-button.js';
+export { Toggle, type ToggleProps } from './toggle.js';
 export {
   Toolbar,
   ToolbarGroup,

package/src/components/kbd.tsx

@@ -4,17 +4,15 @@ import { Slot } from 'radix-ui';
 
 import { kbdPropDefs } from './kbd.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';
 
 type KbdElement = React.ElementRef<'kbd'>;
 type KbdOwnProps = GetPropDefTypes<typeof kbdPropDefs>;
-interface KbdProps extends ComponentPropsWithout<'kbd', RemovedProps>, MarginProps, KbdOwnProps {}
+interface KbdProps extends ComponentPropsWithout<'kbd', RemovedProps>, KbdOwnProps {}
 const Kbd = React.forwardRef<KbdElement, KbdProps>((props, forwardedRef) => {
-  const { asChild, className, ...kbdProps } = extractProps(props, kbdPropDefs, marginPropDefs);
+  const { asChild, className, ...kbdProps } = extractProps(props, kbdPropDefs);
   const Comp = asChild ? Slot.Root : 'kbd';
   return (
     <Comp

package/src/components/layout.css

@@ -1,5 +1,3 @@
 @import './box.css';
 @import './flex.css';
 @import './grid.css';
-@import './section.css';
-@import './container.css';

package/src/components/link.tsx

@@ -6,12 +6,11 @@ import { extractProps } from '../helpers/extract-props.js';
 import { linkPropDefs } from './link.props.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 LinkElement = React.ElementRef<'a'>;
 type LinkOwnProps = GetPropDefTypes<typeof linkPropDefs>;
-interface LinkProps extends ComponentPropsWithout<'a', RemovedProps>, MarginProps, LinkOwnProps {}
+interface LinkProps extends ComponentPropsWithout<'a', RemovedProps>, LinkOwnProps {}
 const Link = React.forwardRef<LinkElement, LinkProps>((props, forwardedRef) => {
   const { children, className, color, asChild, ...linkProps } = extractProps(props, linkPropDefs);
   return (

package/src/components/message-scroller.tsx

@@ -42,9 +42,9 @@ import {
 
 import { useComposedRefs } from 'radix-ui/internal';
 
-import { IconButton, type IconButtonProps } from './icon-button.js';
+import { Button as KuiButton } from './button.js';
 import { useScrollEdges } from '../hooks/use-scroll-edges.js';
-import type { ButtonRankProps } from './button.js';
+import type { ButtonProps as KuiButtonProps, ButtonRankProps } from './button.js';
 
 interface RootProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
@@ -129,7 +129,7 @@ const Item = React.forwardRef<HTMLDivElement, ItemProps>(({ className, ...props
 ));
 Item.displayName = 'MessageScroller.Item';
 
-type ButtonProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis'> &
+type ButtonProps = Omit<KuiButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis' | 'iconOnly' | 'fullWidth'> &
   ButtonRankProps & {
   /** Accessible name, in your words. Default "Jump to the latest". */
   'aria-label'?: string;
@@ -149,7 +149,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       direction={direction}
       {...(behavior ? { behavior } : {})}
       render={
-        <IconButton
+        <KuiButton
+          iconOnly
           {...props}
           ref={forwardedRef}
           size={size}
@@ -165,7 +166,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
               <path d="M7.5 2.5v10M3.5 8.5l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
             </svg>
           )}
-        </IconButton>
+        </KuiButton>
       }
     />
   ),

package/src/components/navbar.tsx

@@ -6,6 +6,10 @@ import { Flex } from './flex.js';
 import { Slot } from './slot.js';
 
 import type { FlexProps } from './flex.js';
+import type { MarginProps } from '../props/margin.props.js';
+
+// Navbar slots are parts, not layout primitives: the bar owns their spacing.
+type NavbarSlotFlexProps = Omit<FlexProps, keyof MarginProps>;
 
 import { navbarRootPropDefs } from './navbar.props.js';
 import { extractProps } from '../helpers/extract-props.js';
@@ -62,7 +66,7 @@ const NavbarRoot = React.forwardRef<NavbarRootElement, NavbarRootProps>(
 NavbarRoot.displayName = 'Navbar.Root';
 
 // Logo Slot - extends FlexProps
-type NavbarLogoProps = FlexProps & {
+type NavbarLogoProps = NavbarSlotFlexProps & {
   asChild?: boolean;
 };
 
@@ -93,7 +97,7 @@ const NavbarLogo = React.forwardRef<HTMLDivElement, NavbarLogoProps>(
 NavbarLogo.displayName = 'Navbar.Logo';
 
 // Navigation Slot - extends FlexProps
-type NavbarNavigationProps = FlexProps & {
+type NavbarNavigationProps = NavbarSlotFlexProps & {
   asChild?: boolean;
 };
 
@@ -126,7 +130,7 @@ const NavbarNavigation = React.forwardRef<HTMLDivElement, NavbarNavigationProps>
 NavbarNavigation.displayName = 'Navbar.Navigation';
 
 // Actions Slot - extends FlexProps
-type NavbarActionsProps = FlexProps & {
+type NavbarActionsProps = NavbarSlotFlexProps & {
   asChild?: boolean;
 };