@womp/kookie-ui 0.19.0 → 0.21.0

package/src/components/_internal/base-tab-list.css

@@ -34,13 +34,13 @@
 .rt-BaseTabListTriggerInner {
   position: absolute;
 
-  :where(.rt-BaseTabListTrigger[data-state='inactive'], .rt-TabNavLink:not([data-active])) & {
+  :where(.rt-BaseTabListTrigger[data-state='inactive']) & {
     letter-spacing: var(--tab-inactive-letter-spacing);
     word-spacing: var(--tab-inactive-word-spacing);
  /* 100ms - allows staggered effect vs active state's 0ms */
   }
 
-  :where(.rt-BaseTabListTrigger[data-state='active'], .rt-TabNavLink[data-active]) & {
+  :where(.rt-BaseTabListTrigger[data-state='active']) & {
     font-weight: var(--font-weight-medium);
     letter-spacing: var(--tab-active-letter-spacing);
     word-spacing: var(--tab-active-word-spacing);
@@ -219,8 +219,7 @@
 
 /* Forced colors support */
 @media (forced-colors: active) {
-  .rt-BaseTabListTrigger:where([data-state='active'])::before,
-  .rt-TabNavLink:where([data-active])::before {
+  .rt-BaseTabListTrigger:where([data-state='active'])::before {
     background-color: Highlight;
   }
 

package/src/components/_internal/menu-context.tsx

@@ -14,7 +14,7 @@ import type { Responsive } from '../../props/prop-def.js';
  * - Use the correct item height based on menu size
  */
 
-export type MenuSize = '1' | '2';
+export type MenuSize = '1' | '2' | '3' | '4';
 
 interface MenuContextValue {
   /** Whether we're inside a menu that owns the menu role */
@@ -33,10 +33,15 @@ interface MenuProviderProps {
   size?: Responsive<MenuSize>;
 }
 
-/** Menu item height in pixels per size: the control height ladder (--control-height-N). */
+/**
+ * Menu row height in pixels per size: the line height plus --row-inset-N above and below
+ * (base-menu.css), never under the 24px target floor.
+ */
 export const menuSizeToItemHeight: Record<MenuSize, number> = {
-  '1': 28,
-  '2': 32,
+  '1': 24,
+  '2': 30,
+  '3': 34,
+  '4': 38,
 };
 
 export function getMenuItemHeight(size: MenuSize): number {

package/src/components/accordion.css

@@ -45,39 +45,6 @@
   background-color: transparent;
 }
 
-/* Ghost variant flush support */
-:where(.rt-AccordionRoot:where(.rt-variant-ghost)[data-flush='true']) {
-  /* We reset the defined margin variables to avoid inheriting them from a higher component */
-  /* If a margin IS defined on the component itself, the utility class will win and reset it */
-  --margin-top: 0px;
-  --margin-right: 0px;
-  --margin-bottom: 0px;
-  --margin-left: 0px;
-
-  /* Calculate padding values for different accordion sizes */
-  --accordion-padding-x: calc(var(--space-5) * var(--padding-ratio-horizontal) / 4);
-  --accordion-padding-y: calc(var(--space-4) / 8);
-
-  /* Define the overrides to incorporate the negative margins */
-  --margin-top-override: calc(var(--margin-top) - var(--accordion-padding-y));
-  --margin-right-override: calc(var(--margin-right) - var(--accordion-padding-x));
-  --margin-bottom-override: calc(var(--margin-bottom) - var(--accordion-padding-y));
-  --margin-left-override: calc(var(--margin-left) - var(--accordion-padding-x));
-
-  margin-top: var(--margin-top-override);
-  margin-right: var(--margin-right-override);
-  margin-bottom: var(--margin-bottom-override);
-  margin-left: var(--margin-left-override);
-
-  /* Reset the overrides on direct children */
-  :where(&) > * {
-    --margin-top-override: initial;
-    --margin-right-override: initial;
-    --margin-bottom-override: initial;
-    --margin-left-override: initial;
-  }
-}
-
 /* Accordion Item */
 .rt-AccordionItem {
   overflow: hidden;

package/src/components/accordion.props.tsx

@@ -13,11 +13,9 @@ const accordionRootPropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
   ...colorPropDef,
   ...radiusPropDef,
-  flush: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
-  flush: PropDef<boolean>;
 };
 
 const accordionItemPropDefs = {
@@ -57,7 +55,6 @@ export type AccordionRootOwnProps = {
   variant?: (typeof variants)[number];
   color?: string;
   radius?: string;
-  flush?: boolean;
 };
 
 export type AccordionItemOwnProps = {

package/src/components/accordion.tsx

@@ -30,7 +30,7 @@ interface AccordionRootProps
 const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>(
   (ownProps, forwardedRef) => {
     const props = useThemeSizeProps(ownProps, accordionRootPropDefs.size);
-    const { className, flush, radius, color, ...extractedRadixProps } =
+    const { className, radius, color, ...extractedRadixProps } =
       extractProps(props, accordionRootPropDefs);
 
     const radixProps = extractedRadixProps as React.ComponentPropsWithoutRef<
@@ -73,7 +73,6 @@ const AccordionRoot = React.forwardRef<AccordionRootElement, AccordionRootProps>
         ref={forwardedRef}
         className={classNames('rt-AccordionRoot', className)}
         data-accent-color={color}
-        data-flush={flush || undefined}
         data-radius={radius}
         onKeyDown={handleKeyDown}
       />

package/src/components/alert-dialog.tsx

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

package/src/components/avatar.css

@@ -181,15 +181,15 @@
     }
     &:where(.rt-r-size-8) {
       --avatar-size: calc(96px * var(--scale));
-      --avatar-fallback-one-letter-font-size: var(--font-size-8);
+      --avatar-fallback-one-letter-font-size: var(--font-size-7);
       --avatar-fallback-two-letters-font-size: var(--font-size-7);
       border-radius: max(var(--radius-control-4), var(--radius-full));
-      letter-spacing: var(--letter-spacing-8);
+      letter-spacing: var(--letter-spacing-7);
     }
     &:where(.rt-r-size-9) {
       --avatar-size: var(--space-12);
       --avatar-fallback-one-letter-font-size: var(--font-size-9);
-      --avatar-fallback-two-letters-font-size: var(--font-size-8);
+      --avatar-fallback-two-letters-font-size: var(--font-size-7);
       border-radius: max(var(--radius-control-4), var(--radius-full));
       letter-spacing: var(--letter-spacing-9);
     }

package/src/components/avatar.tsx

@@ -7,13 +7,11 @@ import { Avatar as AvatarPrimitive } from 'radix-ui';
 import { avatarPropDefs } from './avatar.props.js';
 import { extractProps } from '../helpers/extract-props.js';
 import { getSubtree } from '../helpers/get-subtree.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';
 
-interface AvatarProps extends MarginProps, AvatarImplProps {}
+interface AvatarProps extends AvatarImplProps {}
 const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((props, forwardedRef) => {
   const {
     asChild,
@@ -25,7 +23,7 @@ const Avatar = React.forwardRef<AvatarImplElement, AvatarProps>((props, forwarde
     status,
     badge,
     ...imageProps
-  } = extractProps(props, avatarPropDefs, marginPropDefs);
+  } = extractProps(props, avatarPropDefs);
 
   if (process.env.NODE_ENV !== 'production') {
     if (status !== undefined && badge !== undefined) {

package/src/components/blockquote.props.tsx

@@ -7,7 +7,7 @@ import { weightPropDef } from '../props/weight.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
-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 blockquotePropDefs = {
   ...asChildPropDef,

package/src/components/blockquote.tsx

@@ -6,14 +6,12 @@ import { Text } from './text.js';
 
 import type { blockquotePropDefs } from './blockquote.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 BlockquoteElement = React.ElementRef<'blockquote'>;
 type BlockQuoteOwnProps = GetPropDefTypes<typeof blockquotePropDefs>;
 interface BlockquoteProps
   extends ComponentPropsWithout<'blockquote', RemovedProps>,
-    MarginProps,
     BlockQuoteOwnProps {}
 const Blockquote = React.forwardRef<BlockquoteElement, BlockquoteProps>((props, forwardedRef) => {
   const { asChild, children, className, ...blockquoteProps } = props;

package/src/components/button.css

@@ -3,17 +3,18 @@
  *
  * 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.
+ * file adds the label's type step per size. An icon-only button (`data-icon-only`) has no label,
+ * so it takes neither.
  */
 
 @import './_internal/base-button.css';
 
-.rt-Button {
+.rt-Button:where(:not([data-icon-only])) {
   font-weight: var(--font-weight-medium);
 }
 
 @breakpoints {
-  .rt-Button {
+  .rt-Button:where(:not([data-icon-only])) {
     &:where(.rt-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);

package/src/components/button.tsx

@@ -49,15 +49,28 @@ type ButtonRankProps =
       variant?: never;
     };
 
-type ButtonOwnProps = Omit<BaseButtonProps, 'as' | 'variant'> &
-  ButtonRankProps &
-  ButtonTooltipProps & {
-    /**
-     * A square button holding only an icon. It needs an accessible name: `aria-label`,
-     * `aria-labelledby`, or visible text. `IconButton` is this button with `iconOnly` set.
-     */
-    iconOnly?: boolean;
-  };
+/**
+ * An icon-only button is square and holds only its icon, so it has no visible text: the type
+ * requires `aria-label` or `aria-labelledby`. It never takes the full width.
+ */
+type ButtonIconOnlyProps =
+  | {
+      /** Makes the button square and shows only the icon in `children`. Requires `aria-label` or `aria-labelledby`. */
+      iconOnly: true;
+      /** The button's name for screen readers. Required with `iconOnly` unless `aria-labelledby` is set. */
+      'aria-label': string;
+      fullWidth?: never;
+    }
+  | {
+      /** Makes the button square and shows only the icon in `children`. Requires `aria-label` or `aria-labelledby`. */
+      iconOnly: true;
+      /** The id of an element that names this button. Use it instead of `aria-label`. */
+      'aria-labelledby': string;
+      fullWidth?: never;
+    }
+  | { iconOnly?: false };
+
+type ButtonOwnProps = Omit<BaseButtonProps, 'as' | 'variant'> & ButtonRankProps & ButtonTooltipProps & ButtonIconOnlyProps;
 
 /**
  * Polymorphic Button props that support rendering as different HTML elements
@@ -78,12 +91,10 @@ type ButtonComponent = <C extends React.ElementType = 'button'>(props: ButtonPro
  * An icon-only button must have an accessible name. Throws in development, logs otherwise.
  */
 function validateIconButtonName(props: Record<string, unknown>) {
-  if (props['aria-label'] || props['aria-labelledby'] || props.children) return;
+  if (props['aria-label'] || props['aria-labelledby']) return;
   const errorMessage =
-    'IconButton: Icon buttons must have an accessible name. Please provide either:' +
-    '\n- aria-label prop with descriptive text' +
-    '\n- aria-labelledby prop referencing a label element' +
-    '\n- or visible text children';
+    'Button: an `iconOnly` button must have an accessible name. Pass `aria-label`, or ' +
+    '`aria-labelledby` referencing a label element.';
   if (process.env.NODE_ENV === 'development') throw new Error(errorMessage);
   console.error(errorMessage);
 }
@@ -109,6 +120,9 @@ function validateIconButtonName(props: Record<string, unknown>) {
  *
  * // Polymorphic button as link
  * <Button as="a" href="/dashboard">Go to Dashboard</Button>
+ *
+ * // Square, icon-only button: needs an accessible name
+ * <Button iconOnly aria-label="Settings"><Settings /></Button>
  * ```
  */
 const Button = React.forwardRef(
@@ -131,10 +145,10 @@ const Button = React.forwardRef(
     // Use shared tooltip wrapper hook for accessibility props
     const { tooltipId, hasTooltip, accessibilityProps: tooltipAccessibilityProps } = useTooltipWrapper(tooltip);
 
-    // An icon button is square, so it never takes the full width.
+    // An icon-only button is square, so it never takes the full width.
     if (iconOnly) {
-      validateIconButtonName(props);
-      props.fullWidth = false;
+      validateIconButtonName(props as Record<string, unknown>);
+      (props as { fullWidth?: boolean }).fullWidth = false;
     }
 
     if (emphasis !== undefined && variant !== undefined) {
@@ -148,7 +162,8 @@ const Button = React.forwardRef(
         variant={resolvedVariant}
         {...tooltipAccessibilityProps}
         ref={forwardedRef}
-        className={classNames(iconOnly ? 'rt-IconButton' : 'rt-Button', className)}
+        data-icon-only={iconOnly || undefined}
+        className={classNames('rt-Button', className)}
         style={style}
       />
     );
@@ -171,4 +186,4 @@ const Button = React.forwardRef(
 Button.displayName = 'Button';
 
 export { Button };
-export type { ButtonProps, ButtonEmphasis, ButtonRankProps };
+export type { ButtonProps, ButtonEmphasis, ButtonRankProps, ButtonIconOnlyProps };

package/src/components/card.tsx

@@ -7,18 +7,16 @@ 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';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 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 {}
+interface CardProps extends ComponentPropsWithout<'div', RemovedProps>, CardOwnProps {}
 const Card = React.forwardRef<CardElement, CardProps>((ownProps, forwardedRef) => {
   const props = useThemeSizeProps(ownProps, cardPropDefs.size);
-  const { asChild, className, ...cardProps } = extractProps(props, cardPropDefs, marginPropDefs);
+  const { asChild, className, ...cardProps } = extractProps(props, cardPropDefs);
   const Comp = asChild ? Slot.Root : 'div';
   return (
     <Comp

package/src/components/chatbar.css

@@ -14,6 +14,7 @@
   /* A column: notices, then the box (which fills any height the consumer gives the root), then context. */
   display: flex;
   flex-direction: column;
+  gap: var(--space-3);
 }
 
 /* Unstyled textarea (reset) */
@@ -547,12 +548,11 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
-  margin-bottom: var(--space-3);
 }
 
 /* Context is quiet text below the box, inset to line up with the text inside it. */
 .rt-ChatbarContext {
-  padding: var(--space-3) var(--space-4) 0;
+  padding: 0 var(--space-4);
   min-width: 0;
   overflow-wrap: anywhere;
 }

package/src/components/chatbar.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { useComposedRefs } from 'radix-ui/internal';
 import { useDropzone } from 'react-dropzone';
 
-import { IconButton, type IconButtonProps } from './icon-button.js';
+import { Button } from './button.js';
 import { CloseIcon, FileTextIcon } from './icons.js';
 import { Flex } from './flex.js';
 import { ScrollArea } from './scroll-area.js';
@@ -16,7 +16,7 @@ import { VisuallyHidden } from './visually-hidden.js';
 import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
 import type { accentColors } from '../props/color.prop.js';
 import type { radii } from '../props/radius.prop.js';
-import type { ButtonRankProps } from './button.js';
+import type { ButtonProps, ButtonRankProps } from './button.js';
 
 // Avoid SSR warnings by using an isomorphic layout effect
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -1090,9 +1090,9 @@ const Pill: React.FC<{
         {detail ? <VisuallyHidden>, {detail}</VisuallyHidden> : null}
       </Text>
       {onRemove && (
-        <IconButton className="rt-ChatbarItemRemove" aria-label={removeLabel} size="1" variant="ghost" color="gray" onClick={onRemove}>
+        <Button iconOnly className="rt-ChatbarItemRemove" aria-label={removeLabel} size="1" variant="ghost" color="gray" onClick={onRemove}>
           <CloseIcon />
-        </IconButton>
+        </Button>
       )}
     </>
   );
@@ -1280,7 +1280,7 @@ RowEnd.displayName = 'Chatbar.RowEnd';
 
 type SendStatus = 'ready' | 'submitted' | 'streaming' | 'error';
 
-type SendProps = Omit<IconButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis'> &
+type SendProps = Omit<ButtonProps, 'aria-label' | 'aria-labelledby' | 'variant' | 'emphasis' | 'iconOnly' | 'fullWidth'> &
   ButtonRankProps & {
   /** Optional override for accessible name. Defaults to "Send". */
   'aria-label'?: string;
@@ -1388,7 +1388,8 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
     );
 
   return (
-    <IconButton
+    <Button
+      iconOnly
       {...buttonProps}
       ref={forwardedRef}
       size={sizeProp ?? ctx.size}
@@ -1406,7 +1407,7 @@ const Send = React.forwardRef<HTMLButtonElement, SendProps>((props, forwardedRef
       {...labelProps}
     >
       {glyph}
-    </IconButton>
+    </Button>
   );
 });
 Send.displayName = 'Chatbar.Send';

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,11 +35,11 @@
 
 /* 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-0);
-      line-height: var(--line-height-0);
-      letter-spacing: var(--letter-spacing-0);
+      font-size: var(--font-size-1);
+      line-height: var(--line-height-1);
+      letter-spacing: var(--letter-spacing-1);
       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));
@@ -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 };