@womp/kookie-ui 0.20.0 → 0.21.0

package/src/components/notice.tsx

@@ -22,7 +22,6 @@ import * as React from 'react';
 import classNames from 'classnames';
 
 import { Button } from './button.js';
-import { IconButton } from './icon-button.js';
 import { Text } from './text.js';
 import { useThemeSize } from '../helpers/theme-size.js';
 import { accentColorPropDef } from '../props/color.prop.js';
@@ -108,11 +107,11 @@ const Notice = React.forwardRef<HTMLDivElement, NoticeProps>(({ icon, action, on
       <span className="rt-NoticeActions">
         {action}
         {onDismiss ? (
-          <IconButton size={size} variant="ghost" color="gray" aria-label={dismissLabel} className="rt-NoticeDismiss" onClick={onDismiss}>
+          <Button iconOnly size={size} variant="ghost" color="gray" aria-label={dismissLabel} className="rt-NoticeDismiss" onClick={onDismiss}>
             <svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden>
               <path d="M4 4l7 7M11 4l-7 7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
             </svg>
-          </IconButton>
+          </Button>
         ) : null}
       </span>
     ) : null;

package/src/components/progress.tsx

@@ -5,9 +5,7 @@ import { Progress as ProgressPrimitive } from 'radix-ui';
 import { progressPropDefs } from './progress.props.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { mergeStyles } from '../helpers/merge-styles.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';
 
@@ -15,15 +13,13 @@ type ProgressElement = React.ElementRef<typeof ProgressPrimitive.Root>;
 type ProgressOwnProps = GetPropDefTypes<typeof progressPropDefs>;
 interface ProgressProps
   extends ComponentPropsWithout<typeof ProgressPrimitive.Root, RemovedProps | 'children'>,
-    MarginProps,
     ProgressOwnProps {
   duration?: `${number}s` | `${number}ms`;
 }
 const Progress = React.forwardRef<ProgressElement, ProgressProps>((props, forwardedRef) => {
   const { className, style, color, radius, duration, ...progressProps } = extractProps(
     props,
-    progressPropDefs,
-    marginPropDefs
+    progressPropDefs
   );
 
   return (

package/src/components/radio-group.tsx

@@ -9,10 +9,8 @@ import { radioGroupRootPropDefs } from './radio-group.props.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 RADIO_GROUP_NAME = 'RadioGroup';
@@ -35,7 +33,6 @@ interface RadioGroupRootProps
       typeof RadioGroupPrimitive.Root,
       'asChild' | 'color' | 'defaultChecked'
     >,
-    MarginProps,
     RadioGroupRootOwnProps {}
 const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootProps>(
   (
@@ -48,7 +45,7 @@ const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootPro
     forwardedRef
   ) => {
     const size = useThemeSize(sizeProp, radioGroupRootPropDefs.size);
-    const { __scopeRadioGroup, className, ...rootProps } = extractProps(props, marginPropDefs);
+    const { __scopeRadioGroup, className, ...rootProps } = props;
     const radioGroupScope = useRadioGroupScope(__scopeRadioGroup);
     return (
       <RadioGroupProvider
@@ -71,8 +68,7 @@ RadioGroupRoot.displayName = 'RadioGroup.Root';
 
 type RadioGroupItemElement = React.ElementRef<typeof RadioGroupItemRadio>;
 interface RadioGroupItemProps
-  extends ComponentPropsWithout<typeof RadioGroupItemRadio, RemovedProps>,
-    MarginProps {}
+  extends ComponentPropsWithout<typeof RadioGroupItemRadio, RemovedProps> {}
 const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(
   (_props: ScopedProps<RadioGroupItemProps>, forwardedRef) => {
     const { __scopeRadioGroup, children, className, style, ...props } = _props;
@@ -122,8 +118,7 @@ const RadioGroupItemRadio = React.forwardRef<
   const radioGroupScope = useRadioGroupScope(__scopeRadioGroup);
   const { color, className } = extractProps(
     { ...props, ...context },
-    radioGroupRootPropDefs,
-    marginPropDefs
+    radioGroupRootPropDefs
   );
   return (
     <RadioGroupPrimitive.Item

package/src/components/radio.tsx

@@ -5,11 +5,9 @@ import classNames from 'classnames';
 import { composeEventHandlers } from 'radix-ui/internal';
 
 import { radioPropDefs } from './radio.props.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSizeProps } from '../helpers/theme-size.js';
 
-import type { MarginProps } from '../props/margin.props.js';
 import type { ComponentPropsWithout } from '../helpers/component-props.js';
 import type { NotInputRadioAttributes } from '../helpers/input-attributes.js';
 import type { GetPropDefTypes } from '../props/prop-def.js';
@@ -23,14 +21,13 @@ type RadioInputProps = ComponentPropsWithout<
   'input',
   NotInputRadioAttributes | 'color' | 'defaultValue' | 'value'
 >;
-interface RadioProps extends RadioInputProps, MarginProps, RadioOwnProps {}
+interface RadioProps extends RadioInputProps, RadioOwnProps {}
 
 const Radio = React.forwardRef<RadioElement, RadioProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, radioPropDefs.size);
   const { className, color, onChange, onValueChange, ...radioProps } = extractProps(
     props,
     radioPropDefs,
-    marginPropDefs,
   );
   return (
     <input

package/src/components/schemas/base-button.schema.ts

@@ -3,8 +3,8 @@ import { z } from 'zod';
 /**
  * BaseButton Zod schema - Single source of truth for all button component props
  *
- * This schema defines the core button functionality used by Button, IconButton,
- * ToggleButton, and ToggleIconButton components. It ensures consistency across
+ * This schema defines the core button functionality used by the Button and Toggle
+ * components. It ensures consistency across
  * the design system and provides machine-readable validation.
  *
  * @example
@@ -118,17 +118,6 @@ export const BaseButtonSchema = z
       .default(false)
       .describe('Loading state that shows a spinner and disables interaction'),
 
-    /**
-     * Flush mode that removes visual padding for seamless text integration
-     * Only effective with ghost variant
-     * @default false
-     */
-    flush: z
-      .boolean()
-      .optional()
-      .default(false)
-      .describe('Flush mode that removes visual padding for seamless text integration'),
-
     /**
      * Disabled state
      * @default false

package/src/components/schemas/index.ts

@@ -27,17 +27,9 @@ export type { BaseButtonProps } from './base-button.schema.js';
 export { ButtonSchema, parseButtonProps } from './button.schema.js';
 export type { ButtonProps } from './button.schema.js';
 
-// IconButton schemas
-export { IconButtonSchema, parseIconButtonProps } from './icon-button.schema.js';
-export type { IconButtonProps } from './icon-button.schema.js';
-
-// ToggleButton schemas
-export { ToggleButtonSchema, parseToggleButtonProps } from './toggle-button.schema.js';
-export type { ToggleButtonProps } from './toggle-button.schema.js';
-
-// ToggleIconButton schemas
-export { ToggleIconButtonSchema, parseToggleIconButtonProps } from './toggle-icon-button.schema.js';
-export type { ToggleIconButtonProps } from './toggle-icon-button.schema.js';
+// Toggle schemas
+export { ToggleSchema, parseToggleProps } from './toggle.schema.js';
+export type { ToggleProps } from './toggle.schema.js';
 
 // Shell schemas
 export {

package/src/components/schemas/{toggle-button.schema.ts → toggle.schema.ts}

@@ -2,43 +2,19 @@ import { z } from 'zod';
 import { ButtonSchema } from './button.schema.js';
 
 /**
- * ToggleButton Zod schema - Single source of truth for ToggleButton component props
+ * Toggle Zod schema - Single source of truth for Toggle component props
  *
- * ToggleButton extends Button with toggle functionality using Radix UI's Toggle primitive.
- * It provides proper accessibility announcements, controlled/uncontrolled state management,
- * and seamless integration with the existing Button component.
- *
- * Key features:
- * - Controlled and uncontrolled state management
- * - Live accessibility announcements for screen readers
- * - Automatic state validation and warnings
- * - Seamless integration with Button props and styling
- * - Proper ARIA attributes for toggle functionality
+ * Toggle is a Button that stays pressed, built on Radix UI's Toggle primitive. Set `iconOnly`
+ * for a square toggle holding only an icon; it then needs `aria-label` or `aria-labelledby`.
  *
  * @example
  * ```tsx
- * // Uncontrolled toggle button
- * const props = ToggleButtonSchema.parse({
- *   defaultPressed: false,
- *   variant: 'outline'
- * });
- *
- * // Controlled toggle button
- * const controlledProps = ToggleButtonSchema.parse({
- *   pressed: true,
- *   onPressedChange: (pressed) => console.log(pressed),
- *   variant: 'soft'
- * });
+ * const props = ToggleSchema.parse({ defaultPressed: false, variant: 'outline' });
  *
- * // Toggle button with tooltip
- * const tooltipProps = ToggleButtonSchema.parse({
- *   defaultPressed: false,
- *   tooltip: 'Toggle dark mode',
- *   children: 'Dark Mode'
- * });
+ * const iconProps = ToggleSchema.parse({ iconOnly: true, 'aria-label': 'Bold' });
  * ```
  */
-export const ToggleButtonSchema = ButtonSchema.extend({
+export const ToggleSchema = ButtonSchema.extend({
   /**
    * Controlled pressed state
    * When provided, the component is controlled and the pressed state is managed externally
@@ -57,6 +33,10 @@ export const ToggleButtonSchema = ButtonSchema.extend({
    */
   defaultPressed: z.boolean().optional().describe('Default pressed state for uncontrolled usage'),
 })
+  .refine((data) => !data.iconOnly || Boolean(data['aria-label'] || data['aria-labelledby']), {
+    message: "An iconOnly Toggle must have either 'aria-label' or 'aria-labelledby' for accessibility",
+    path: ['aria-label'],
+  })
   .refine(
     (data) => {
       // If pressed is provided, onPressedChange should also be provided for controlled usage
@@ -86,13 +66,13 @@ export const ToggleButtonSchema = ButtonSchema.extend({
   );
 
 /**
- * Type derived from ToggleButton Zod schema
+ * Type derived from Toggle Zod schema
  * This ensures type safety and consistency with the schema
  */
-export type ToggleButtonProps = z.infer<typeof ToggleButtonSchema>;
+export type ToggleProps = z.infer<typeof ToggleSchema>;
 
 /**
- * Development-only helper to validate and normalize ToggleButton props
+ * Development-only helper to validate and normalize Toggle props
  * This function should only be used in development mode
  *
  * @param props - Props to validate and normalize
@@ -101,22 +81,22 @@ export type ToggleButtonProps = z.infer<typeof ToggleButtonSchema>;
  * @example
  * ```tsx
  * // In development, this will validate props and show helpful errors
- * const invalidProps = parseToggleButtonProps({
+ * const invalidProps = parseToggleProps({
  *   pressed: true,
  *   defaultPressed: false
  *   // Missing onPressedChange and conflicting controlled/uncontrolled
  * });
  * // Throws: "Cannot use both controlled (pressed) and uncontrolled (defaultPressed) props together"
  *
- * const validProps = parseToggleButtonProps({
+ * const validProps = parseToggleProps({
  *   pressed: true,
  *   onPressedChange: (pressed) => setPressed(pressed)
  * });
  * ```
  */
-export function parseToggleButtonProps(props: unknown): ToggleButtonProps {
+export function parseToggleProps(props: unknown): ToggleProps {
   if (process.env.NODE_ENV === 'development') {
-    return ToggleButtonSchema.parse(props);
+    return ToggleSchema.parse(props);
   }
-  return props as ToggleButtonProps;
+  return props as ToggleProps;
 }

package/src/components/scroll-area.tsx

@@ -6,13 +6,9 @@ import { useComposedRefs } from 'radix-ui/internal';
 import { scrollAreaPropDefs } from './scroll-area.props.js';
 import { useScrollEdges } from '../hooks/use-scroll-edges.js';
 import { useThumbSync } from '../hooks/use-thumb-sync.js';
-import { extractMarginProps } from '../helpers/extract-margin-props.js';
-import { getMarginStyles } from '../helpers/get-margin-styles.js';
 import { getSubtree } from '../helpers/get-subtree.js';
-import { mergeStyles } from '../helpers/merge-styles.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 ScrollAreaElement = React.ElementRef<typeof ScrollAreaPrimitive.Viewport>;
@@ -20,12 +16,8 @@ type ScrollAreaOwnProps = GetPropDefTypes<typeof scrollAreaPropDefs>;
 interface ScrollAreaProps
   extends ComponentPropsWithout<typeof ScrollAreaPrimitive.Root, RemovedProps>,
     ComponentPropsWithout<typeof ScrollAreaPrimitive.Viewport, RemovedProps | 'dir'>,
-    MarginProps,
     ScrollAreaOwnProps {}
 const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props, forwardedRef) => {
-  const { rest: marginRest, ...marginProps } = extractMarginProps(props);
-  const [marginClassNames, marginCustomProperties] = getMarginStyles(marginProps);
-
   const {
     asChild,
     children,
@@ -38,7 +30,7 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
     scrollbars = scrollAreaPropDefs.scrollbars.default,
     fade = scrollAreaPropDefs.fade.default,
     ...viewportProps
-  } = marginRest;
+  } = props;
   const setEdgesElement = useScrollEdges<HTMLDivElement>(fade);
   const setThumbViewport = useThumbSync<HTMLDivElement>();
   const viewportRef = useComposedRefs(forwardedRef, setEdgesElement, setThumbViewport);
@@ -47,9 +39,9 @@ const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>((props,
     <ScrollAreaPrimitive.Root
       type={type}
       scrollHideDelay={scrollHideDelay}
-      className={classNames('rt-ScrollAreaRoot', marginClassNames, className)}
+      className={classNames('rt-ScrollAreaRoot', className)}
       data-fade={fade ? '' : undefined}
-      style={mergeStyles(marginCustomProperties, style)}
+      style={style}
       asChild={asChild}
     >
       {getSubtree({ asChild, children }, (children) => (

package/src/components/segmented-control.css

@@ -143,13 +143,14 @@
    */
   z-index: -1;
 
-  /* Horizontal orientation (default) */
-  margin-top: calc(var(--space-2) * 0.75); /* 3px - slightly smaller than space-1 */
-  margin-bottom: calc(var(--space-2) * 0.75); /* 3px */
+  /* Horizontal orientation (default). The 3px inset is padding inside the separator's own box and
+     only the line paints; the -0.5px pull centres the line on the item boundary (optical). */
+  padding-block: calc(var(--space-2) * 0.75); /* 3px - slightly smaller than space-1 */
   margin-left: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
   margin-right: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
   width: var(--border-width-standard); /* 1px */
   background-color: var(--gray-a4);
+  background-clip: content-box;
 
   /* Make separators slow to disappear and fast to appear, syncing it well with the indicator motion */
 
@@ -163,8 +164,10 @@
 
 /* Vertical orientation - separator */
 :where(.rt-r-orientation-vertical) .rt-SegmentedControlItemSeparator {
-  margin-left: calc(var(--space-2) * 0.75); /* 3px */
-  margin-right: calc(var(--space-2) * 0.75); /* 3px */
+  padding-block: 0;
+  padding-inline: calc(var(--space-2) * 0.75); /* 3px */
+  margin-left: 0;
+  margin-right: 0;
   margin-top: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
   margin-bottom: calc(-1 * var(--border-width-standard) * 0.5); /* -0.5px */
   width: auto;

package/src/components/segmented-control.tsx

@@ -9,9 +9,7 @@ import { useControllableState } from 'radix-ui/internal';
 import { segmentedControlRootPropDefs } from './segmented-control.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';
 
@@ -19,8 +17,7 @@ type SegmentedControlRootOwnProps = GetPropDefTypes<typeof segmentedControlRootP
 
 interface SegmentedControlRootProps
   extends ComponentPropsWithout<'div', RemovedProps | 'dir'>,
-    SegmentedControlRootOwnProps,
-    MarginProps {
+    SegmentedControlRootOwnProps {
   value?: string;
   defaultValue?: string;
   onValueChange?(value: string): void;
@@ -37,7 +34,7 @@ const SegmentedControlRoot = React.forwardRef<HTMLDivElement, SegmentedControlRo
       defaultValue: defaultValueProp,
       onValueChange: onValueChangeProp,
       ...rootProps
-    } = extractProps(props, segmentedControlRootPropDefs, marginPropDefs);
+    } = extractProps(props, segmentedControlRootPropDefs);
 
     const [value, setValue] = useControllableState({
       prop: valueProp,

package/src/components/select.tsx

@@ -7,7 +7,6 @@ import { Select as SelectPrimitive, ScrollArea as ScrollAreaPrimitive } from 'ra
 
 import { extractProps } from '../helpers/extract-props.js';
 import { useThemeSize } from '../helpers/theme-size.js';
-import { marginPropDefs } from '../props/margin.props.js';
 import { ChevronDownIcon, ThickCheckIcon } from './icons.js';
 import {
   selectRootPropDefs,
@@ -17,7 +16,6 @@ import {
 import { useThemeContext, Theme } from './theme.js';
 import { useThumbSync } from '../hooks/use-thumb-sync.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';
 
@@ -44,7 +42,6 @@ type SelectTriggerElement = React.ElementRef<typeof SelectPrimitive.Trigger>;
 type SelectTriggerOwnProps = GetPropDefTypes<typeof selectTriggerPropDefs>;
 interface SelectTriggerProps
   extends ComponentPropsWithout<typeof SelectPrimitive.Trigger, RemovedProps>,
-    MarginProps,
     SelectTriggerOwnProps {}
 const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>(
   (props, forwardedRef) => {
@@ -66,7 +63,6 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
       // Pass size prop def to allow it to be extracted
       { size: selectRootPropDefs.size },
       selectTriggerPropDefs,
-      marginPropDefs,
     );
 
 

package/src/components/separator.tsx

@@ -3,17 +3,15 @@ import classNames from 'classnames';
 
 import { separatorPropDefs } from './separator.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 SeparatorElement = React.ElementRef<'span'>;
 type SeparatorOwnProps = GetPropDefTypes<typeof separatorPropDefs>;
-interface SeparatorProps extends ComponentPropsWithout<'span', RemovedProps>, MarginProps, SeparatorOwnProps {}
+interface SeparatorProps extends ComponentPropsWithout<'span', RemovedProps>, SeparatorOwnProps {}
 const Separator = React.forwardRef<SeparatorElement, SeparatorProps>((props, forwardedRef) => {
-  const { className, color, decorative, ...separatorProps } = extractProps(props, separatorPropDefs, marginPropDefs);
+  const { className, color, decorative, ...separatorProps } = extractProps(props, separatorPropDefs);
   return <span data-accent-color={color} role={decorative ? undefined : 'separator'} {...separatorProps} ref={forwardedRef} className={classNames('rt-Separator', className)} />;
 });
 Separator.displayName = 'Separator';

package/src/components/sidebar.css

@@ -307,7 +307,7 @@
 /* Solid variant icon wrapper states in thin mode */
 :where(.rt-ShellRailContent .rt-SidebarMenuBadge),
 :where(.rt-ShellRailContent .rt-SidebarMenuShortcut),
-:where(.rt-ShellRailContent .rt-Badge),
+:where(.rt-ShellRailContent .rt-Chip),
 :where(.rt-ShellRailContent .rt-Kbd) {
   display: none !important;
 }
@@ -718,12 +718,12 @@
       }
 
       /* Also target any element with data-accent-color="gray" */
-      & :where([data-accent-color='gray']:not(.rt-Badge)) {
+      & :where([data-accent-color='gray']:not(.rt-Chip)) {
         color: inherit !important;
       }
 
-      /* FIX: Ensure badges maintain their own styling and don't inherit hover colors */
-      & :where(.rt-Badge) {
+      /* FIX: Ensure chips maintain their own styling and don't inherit hover colors */
+      & :where(.rt-Chip) {
         color: var(--accent-solid-badge-contrast) !important;
         background-color: var(--accent-solid-badge) !important;
       }
@@ -740,12 +740,12 @@
         color: inherit !important;
       }
 
-      & :where([data-accent-color='gray']:not(.rt-Badge)) {
+      & :where([data-accent-color='gray']:not(.rt-Chip)) {
         color: inherit !important;
       }
 
-      /* FIX: Ensure badges maintain their own styling and don't inherit active colors */
-      & :where(.rt-Badge) {
+      /* FIX: Ensure chips maintain their own styling and don't inherit active colors */
+      & :where(.rt-Chip) {
         color: var(--accent-solid-badge-contrast) !important;
         background-color: var(--accent-solid-badge) !important;
       }
@@ -770,12 +770,12 @@
     }
 
     /* Also target any element with data-accent-color="gray" */
-    & :where([data-accent-color='gray']:not(.rt-Badge)) {
+    & :where([data-accent-color='gray']:not(.rt-Chip)) {
       color: inherit !important;
     }
 
-    /* FIX: Ensure badges maintain their own styling and don't inherit hover colors */
-    & :where(.rt-Badge) {
+    /* FIX: Ensure chips maintain their own styling and don't inherit hover colors */
+    & :where(.rt-Chip) {
       color: var(--accent-solid-badge-contrast) !important;
       background-color: var(--accent-solid-badge) !important;
     }

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>
             )}

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;
 }

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