@womp/kookie-ui 0.20.0 → 0.22.0

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;
@@ -375,11 +373,11 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
 
   const defaultContent = (
     <>
-      <span className="rt-SelectTriggerInner">
-        <span className="rt-ComboboxValue">{ctx.displayValue ?? ctx.value ?? placeholder ?? ctx.placeholder}</span>
+      <span className="kui-SelectTriggerInner">
+        <span className="kui-ComboboxValue">{ctx.displayValue ?? ctx.value ?? placeholder ?? ctx.placeholder}</span>
       </span>
       {loading ? (
-        <div className="rt-SelectIcon rt-SelectLoadingIcon" aria-hidden="true">
+        <div className="kui-SelectIcon kui-SelectLoadingIcon" aria-hidden="true">
           <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
             <circle
               cx="8"
@@ -390,12 +388,12 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
               strokeLinecap="round"
               strokeDasharray="32"
               strokeDashoffset="32"
-              className="rt-SelectLoadingIconCircle"
+              className="kui-SelectLoadingIconCircle"
             />
           </svg>
         </div>
       ) : (
-        <ChevronDownIcon className="rt-SelectIcon" />
+        <ChevronDownIcon className="kui-SelectIcon" />
       )}
     </>
   );
@@ -424,7 +422,7 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         ref={composedRef}
-        className={classNames('rt-reset', 'rt-SelectTrigger', 'rt-ComboboxTrigger', className)}
+        className={classNames('kui-reset', 'kui-SelectTrigger', 'kui-ComboboxTrigger', className)}
       >
         {children ? requireReactElement(children) : defaultContent}
       </button>
@@ -446,7 +444,7 @@ const ComboboxValue = React.forwardRef<ComboboxValueElement, ComboboxValueProps>
   const ctx = useComboboxContext('Value');
   const display = ctx.displayValue ?? ctx.value ?? undefined;
   return (
-    <span {...valueProps} ref={forwardedRef} className={classNames('rt-ComboboxValue', className)}>
+    <span {...valueProps} ref={forwardedRef} className={classNames('kui-ComboboxValue', className)}>
       {display ?? children ?? placeholder ?? ctx.placeholder}
     </span>
   );
@@ -486,9 +484,8 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
   const ctx = useComboboxContext('Content');
   const themeContext = useThemeContext();
 
-  // Menus stop at size 3; a size 4 field opens a size 3 list.
-  const rootSize = ctx.size === '4' ? '3' : ctx.size;
-  const size = props.size ?? rootSize ?? comboboxContentPropDefs.size.default;
+  // The list takes the field's size.
+  const size = props.size ?? ctx.size ?? comboboxContentPropDefs.size.default;
 
   const {
     className,
@@ -559,8 +556,8 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
           forceMount={forceMount ? true : undefined}
           onOpenAutoFocus={handleOpenAutoFocus}
           ref={forwardedRef}
-          className={classNames('rt-PopperContent', 'rt-BaseMenuContent',
-          'rt-variant-soft', 'rt-ComboboxContent', className)}
+          className={classNames('kui-PopperContent', 'kui-BaseMenuContent',
+          'kui-variant-soft', 'kui-ComboboxContent', className)}
         >
           <ComboboxContentContext.Provider value={contentContextValue}>
             <CommandPrimitive
@@ -570,7 +567,7 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
               filter={ctx.filter}
               label={label}
               defaultValue={initialHighlight}
-              className="rt-ComboboxCommand"
+              className="kui-ComboboxCommand"
             >
               {children}
               <ComboboxAnnouncer />
@@ -610,27 +607,27 @@ const ComboboxInput = React.forwardRef<ComboboxInputElement, ComboboxInputProps>
 
     const inputField = (
       <div
-        className={classNames('rt-TextFieldRoot', 'rt-ComboboxInputRoot', contentContext?.sizeClassName, `rt-variant-${textFieldVariant}`)}
+        className={classNames('kui-TextFieldRoot', 'kui-ComboboxInputRoot', contentContext?.sizeClassName, `kui-variant-${textFieldVariant}`)}
         data-accent-color={contentContext?.color}
       >
-        {startAdornment ? <div className="rt-TextFieldSlot">{startAdornment}</div> : null}
+        {startAdornment ? <div className="kui-TextFieldSlot">{startAdornment}</div> : null}
         <CommandPrimitive.Input
           {...inputProps}
           ref={forwardedRef}
           value={searchValue}
           onValueChange={handleSearchChange}
           placeholder={placeholder ?? ctx.searchPlaceholder}
-          className={classNames('rt-reset', 'rt-TextFieldInput', className)}
+          className={classNames('kui-reset', 'kui-TextFieldInput', className)}
         />
         {endAdornment ? (
-          <div className="rt-TextFieldSlot" data-side="right">
+          <div className="kui-TextFieldSlot" data-side="right">
             {endAdornment}
           </div>
         ) : null}
       </div>
     );
 
-    return contentContext ? <div className="rt-ComboboxSearch">{inputField}</div> : inputField;
+    return contentContext ? <div className="kui-ComboboxSearch">{inputField}</div> : inputField;
   },
 );
 ComboboxInput.displayName = 'Combobox.Input';
@@ -647,9 +644,9 @@ interface ComboboxListProps extends React.ComponentPropsWithoutRef<typeof Comman
 const ComboboxList = React.forwardRef<ComboboxListElement, ComboboxListProps>(({ className, children, label, ...listProps }, forwardedRef) => {
   const contentContext = useComboboxContentContext();
   return (
-    <div className="rt-ComboboxScrollArea">
-      <div className={classNames('rt-BaseMenuViewport', 'rt-ComboboxViewport')}>
-        <CommandPrimitive.List {...listProps} label={label ?? contentContext?.label} ref={forwardedRef} className={classNames('rt-ComboboxList', className)}>
+    <div className="kui-ComboboxScrollArea">
+      <div className={classNames('kui-BaseMenuViewport', 'kui-ComboboxViewport')}>
+        <CommandPrimitive.List {...listProps} label={label ?? contentContext?.label} ref={forwardedRef} className={classNames('kui-ComboboxList', className)}>
           {children}
         </CommandPrimitive.List>
       </div>
@@ -666,7 +663,7 @@ type ComboboxEmptyElement = React.ElementRef<typeof CommandPrimitive.Empty>;
 interface ComboboxEmptyProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty> {}
 
 const ComboboxEmpty = React.forwardRef<ComboboxEmptyElement, ComboboxEmptyProps>(({ className, ...emptyProps }, forwardedRef) => (
-  <CommandPrimitive.Empty {...emptyProps} ref={forwardedRef} className={classNames('rt-ComboboxEmpty', className)} />
+  <CommandPrimitive.Empty {...emptyProps} ref={forwardedRef} className={classNames('kui-ComboboxEmpty', className)} />
 ));
 ComboboxEmpty.displayName = 'Combobox.Empty';
 
@@ -678,7 +675,7 @@ type ComboboxGroupElement = React.ElementRef<typeof CommandPrimitive.Group>;
 interface ComboboxGroupProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group> {}
 
 const ComboboxGroup = React.forwardRef<ComboboxGroupElement, ComboboxGroupProps>(({ className, ...groupProps }, forwardedRef) => (
-  <CommandPrimitive.Group {...groupProps} ref={forwardedRef} className={classNames('rt-BaseMenuGroup', 'rt-ComboboxGroup', className)} />
+  <CommandPrimitive.Group {...groupProps} ref={forwardedRef} className={classNames('kui-BaseMenuGroup', 'kui-ComboboxGroup', className)} />
 ));
 ComboboxGroup.displayName = 'Combobox.Group';
 
@@ -706,7 +703,7 @@ const ComboboxLabel = React.forwardRef<ComboboxLabelElement, ComboboxLabelProps>
     };
   }, [id]);
 
-  return <div {...labelProps} id={id} ref={composedRef} className={classNames('rt-BaseMenuLabel', 'rt-ComboboxLabel', className)} />;
+  return <div {...labelProps} id={id} ref={composedRef} className={classNames('kui-BaseMenuLabel', 'kui-ComboboxLabel', className)} />;
 });
 ComboboxLabel.displayName = 'Combobox.Label';
 
@@ -718,7 +715,7 @@ type ComboboxSeparatorElement = React.ElementRef<typeof CommandPrimitive.Separat
 interface ComboboxSeparatorProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator> {}
 
 const ComboboxSeparator = React.forwardRef<ComboboxSeparatorElement, ComboboxSeparatorProps>(({ className, ...separatorProps }, forwardedRef) => (
-  <CommandPrimitive.Separator {...separatorProps} ref={forwardedRef} className={classNames('rt-BaseMenuSeparator', 'rt-ComboboxSeparator', className)} />
+  <CommandPrimitive.Separator {...separatorProps} ref={forwardedRef} className={classNames('kui-BaseMenuSeparator', 'kui-ComboboxSeparator', className)} />
 ));
 ComboboxSeparator.displayName = 'Combobox.Separator';
 
@@ -792,11 +789,11 @@ const ComboboxItem = React.forwardRef<ComboboxItemElement, ComboboxItemProps>(
         disabled={isDisabled || undefined}
         ref={forwardedRef}
         onSelect={handleSelect}
-        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-ComboboxItem', className)}
+        className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-ComboboxItem', className)}
       >
         {isSelected ? (
-          <span className={classNames('rt-BaseMenuItemIndicator', 'rt-ComboboxItemIndicator')}>
-            <ThickCheckIcon className={classNames('rt-BaseMenuItemIndicatorIcon', 'rt-ComboboxItemIndicatorIcon')} />
+          <span className={classNames('kui-BaseMenuItemIndicator', 'kui-ComboboxItemIndicator')}>
+            <ThickCheckIcon className={classNames('kui-BaseMenuItemIndicatorIcon', 'kui-ComboboxItemIndicatorIcon')} />
           </span>
         ) : null}
         <Slottable>{children}</Slottable>

package/src/components/context-menu.css

@@ -1,6 +1,6 @@
 @import './_internal/base-menu.css';
 
-.rt-ContextMenuContent {
+.kui-ContextMenuContent {
   max-height: var(--radix-context-menu-content-available-height);
   transform-origin: var(--radix-context-menu-content-transform-origin);
 }

package/src/components/context-menu.tsx

@@ -119,20 +119,20 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
             asChild={false}
             ref={forwardedRef}
             className={classNames(
-              'rt-PopperContent',
-              'rt-BaseMenuContent',
-          'rt-variant-soft',
-              'rt-ContextMenuContent',
+              'kui-PopperContent',
+              'kui-BaseMenuContent',
+          'kui-variant-soft',
+              'kui-ContextMenuContent',
               className,
             )}
           >
             {virtualized ? (
-              <div className={classNames('rt-BaseMenuViewport', 'rt-ContextMenuViewport', 'rt-virtualized')}>
+              <div className={classNames('kui-BaseMenuViewport', 'kui-ContextMenuViewport', 'kui-virtualized')}>
                 {body}
               </div>
             ) : (
               <ScrollArea type="auto" scrollbars="vertical">
-                <div className={classNames('rt-BaseMenuViewport', 'rt-ContextMenuViewport')}>{body}</div>
+                <div className={classNames('kui-BaseMenuViewport', 'kui-ContextMenuViewport')}>{body}</div>
               </ScrollArea>
             )}
           </ContextMenuPrimitive.Content>
@@ -152,7 +152,7 @@ const ContextMenuLabel = React.forwardRef<ContextMenuLabelElement, ContextMenuLa
       {...props}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-BaseMenuLabel', 'rt-ContextMenuLabel', className)}
+      className={classNames('kui-BaseMenuLabel', 'kui-ContextMenuLabel', className)}
     />
   ),
 );
@@ -178,10 +178,10 @@ const ContextMenuItem = React.forwardRef<ContextMenuItemElement, ContextMenuItem
         aria-keyshortcuts={shortcut ? toAriaKeyShortcuts(shortcut) : undefined}
         {...itemProps}
         ref={forwardedRef}
-        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-ContextMenuItem', className)}
+        className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-ContextMenuItem', className)}
       >
         <Slot.Slottable>{children}</Slot.Slottable>
-        {shortcut && <MenuShortcut shortcut={shortcut} className="rt-ContextMenuShortcut" />}
+        {shortcut && <MenuShortcut shortcut={shortcut} className="kui-ContextMenuShortcut" />}
       </ContextMenuPrimitive.Item>
     );
   },
@@ -197,7 +197,7 @@ const ContextMenuGroup = React.forwardRef<ContextMenuGroupElement, ContextMenuGr
       {...props}
       asChild={false}
       ref={forwardedRef}
-      className={classNames('rt-BaseMenuGroup', 'rt-ContextMenuGroup', className)}
+      className={classNames('kui-BaseMenuGroup', 'kui-ContextMenuGroup', className)}
     />
   ),
 );
@@ -214,7 +214,7 @@ const ContextMenuRadioGroup = React.forwardRef<
     {...props}
     asChild={false}
     ref={forwardedRef}
-    className={classNames('rt-BaseMenuRadioGroup', 'rt-ContextMenuRadioGroup', className)}
+    className={classNames('kui-BaseMenuRadioGroup', 'kui-ContextMenuRadioGroup', className)}
   />
 ));
 ContextMenuRadioGroup.displayName = 'ContextMenu.RadioGroup';
@@ -241,16 +241,16 @@ const ContextMenuRadioItem = React.forwardRef<
       ref={forwardedRef}
       data-accent-color={color}
       className={classNames(
-        'rt-BaseMenuItem',
-        'rt-BaseMenuRadioItem',
-        'rt-ContextMenuItem',
-        'rt-ContextMenuRadioItem',
+        'kui-BaseMenuItem',
+        'kui-BaseMenuRadioItem',
+        'kui-ContextMenuItem',
+        'kui-ContextMenuRadioItem',
         className,
       )}
     >
       <Slot.Slottable>{children}</Slot.Slottable>
-      <ContextMenuPrimitive.ItemIndicator className="rt-BaseMenuItemIndicator rt-ContextMenuItemIndicator">
-        <ThickDotIcon className="rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon" />
+      <ContextMenuPrimitive.ItemIndicator className="kui-BaseMenuItemIndicator kui-ContextMenuItemIndicator">
+        <ThickDotIcon className="kui-BaseMenuItemIndicatorIcon kui-ContextMenuItemIndicatorIcon" />
       </ContextMenuPrimitive.ItemIndicator>
     </ContextMenuPrimitive.RadioItem>
   );
@@ -281,18 +281,18 @@ const ContextMenuCheckboxItem = React.forwardRef<
       ref={forwardedRef}
       data-accent-color={color}
       className={classNames(
-        'rt-BaseMenuItem',
-        'rt-BaseMenuCheckboxItem',
-        'rt-ContextMenuItem',
-        'rt-ContextMenuCheckboxItem',
+        'kui-BaseMenuItem',
+        'kui-BaseMenuCheckboxItem',
+        'kui-ContextMenuItem',
+        'kui-ContextMenuCheckboxItem',
         className,
       )}
     >
       <Slot.Slottable>{children}</Slot.Slottable>
-      <ContextMenuPrimitive.ItemIndicator className="rt-BaseMenuItemIndicator rt-ContextMenuItemIndicator">
-        <ThickCheckIcon className="rt-BaseMenuItemIndicatorIcon rt-ContextMenuItemIndicatorIcon" />
+      <ContextMenuPrimitive.ItemIndicator className="kui-BaseMenuItemIndicator kui-ContextMenuItemIndicator">
+        <ThickCheckIcon className="kui-BaseMenuItemIndicatorIcon kui-ContextMenuItemIndicatorIcon" />
       </ContextMenuPrimitive.ItemIndicator>
-      {shortcut && <MenuShortcut shortcut={shortcut} className="rt-ContextMenuShortcut" />}
+      {shortcut && <MenuShortcut shortcut={shortcut} className="kui-ContextMenuShortcut" />}
     </ContextMenuPrimitive.CheckboxItem>
   );
 });
@@ -319,16 +319,16 @@ const ContextMenuSubTrigger = React.forwardRef<
       asChild={false}
       ref={forwardedRef}
       className={classNames(
-        'rt-BaseMenuItem',
-        'rt-BaseMenuSubTrigger',
-        'rt-ContextMenuItem',
-        'rt-ContextMenuSubTrigger',
+        'kui-BaseMenuItem',
+        'kui-BaseMenuSubTrigger',
+        'kui-ContextMenuItem',
+        'kui-ContextMenuSubTrigger',
         className,
       )}
     >
       {children}
-      <div className="rt-BaseMenuShortcut rt-ContextMenuShortcut">
-        <ThickChevronRightIcon className="rt-BaseMenuSubTriggerIcon rt-ContextMenuSubTriggerIcon" />
+      <div className="kui-BaseMenuShortcut kui-ContextMenuShortcut">
+        <ThickChevronRightIcon className="kui-BaseMenuSubTriggerIcon kui-ContextMenuSubTriggerIcon" />
       </div>
     </ContextMenuPrimitive.SubTrigger>
   );
@@ -391,22 +391,22 @@ const ContextMenuSubContent = React.forwardRef<
           asChild={false}
           ref={forwardedRef}
           className={classNames(
-            'rt-PopperContent',
-            'rt-BaseMenuContent',
-          'rt-variant-soft',
-            'rt-BaseMenuSubContent',
-            'rt-ContextMenuContent',
-            'rt-ContextMenuSubContent',
+            'kui-PopperContent',
+            'kui-BaseMenuContent',
+          'kui-variant-soft',
+            'kui-BaseMenuSubContent',
+            'kui-ContextMenuContent',
+            'kui-ContextMenuSubContent',
             className,
           )}
         >
           {virtualized ? (
-            <div className={classNames('rt-BaseMenuViewport', 'rt-ContextMenuViewport', 'rt-virtualized')}>
+            <div className={classNames('kui-BaseMenuViewport', 'kui-ContextMenuViewport', 'kui-virtualized')}>
               {body}
             </div>
           ) : (
             <ScrollArea type="auto" scrollbars="vertical">
-              <div className={classNames('rt-BaseMenuViewport', 'rt-ContextMenuViewport')}>{body}</div>
+              <div className={classNames('kui-BaseMenuViewport', 'kui-ContextMenuViewport')}>{body}</div>
             </ScrollArea>
           )}
         </ContextMenuPrimitive.SubContent>
@@ -427,7 +427,7 @@ const ContextMenuSeparator = React.forwardRef<
     {...props}
     asChild={false}
     ref={forwardedRef}
-    className={classNames('rt-BaseMenuSeparator', 'rt-ContextMenuSeparator', className)}
+    className={classNames('kui-BaseMenuSeparator', 'kui-ContextMenuSeparator', className)}
   />
 ));
 ContextMenuSeparator.displayName = 'ContextMenu.Separator';

package/src/components/dialog.css

@@ -1,5 +1,5 @@
 @import './_internal/base-dialog.css';
 
-.rt-DialogContent {
+.kui-DialogContent {
   max-width: var(--overlay-w);
 }

package/src/components/dialog.props.tsx

@@ -12,13 +12,13 @@ const dialogContentPropDefs = {
   ...asChildPropDef,
   align: {
     type: 'enum',
-    className: 'rt-r-align',
+    className: 'kui-r-align',
     values: ['start', 'center'],
     default: 'center',
   },
   size: {
     type: 'enum',
-    className: 'rt-r-size',
+    className: 'kui-r-size',
     values: contentSizes,
     default: '2',
     responsive: true,

package/src/components/dialog.tsx

@@ -124,15 +124,15 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
     return (
       <DialogPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
-          <DialogPrimitive.Overlay className="rt-BaseDialogOverlay rt-DialogOverlay">
-            <div className="rt-BaseDialogScroll rt-DialogScroll">
+          <DialogPrimitive.Overlay className="kui-BaseDialogOverlay kui-DialogOverlay">
+            <div className="kui-BaseDialogScroll kui-DialogScroll">
               <div
-                className={`rt-BaseDialogScrollPadding rt-DialogScrollPadding ${alignClassName}`}
+                className={`kui-BaseDialogScrollPadding kui-DialogScrollPadding ${alignClassName}`}
               >
                 <DialogPrimitive.Content
                   {...contentProps}
                   ref={combinedRef}
-                  className={classNames('rt-BaseDialogContent', 'rt-DialogContent', className)}
+                  className={classNames('kui-BaseDialogContent', 'kui-DialogContent', className)}
                   tabIndex={-1}
                   role="dialog"
                   aria-modal="true"
@@ -147,7 +147,7 @@ const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>
                 <div
                   aria-live="polite"
                   aria-atomic="true"
-                  className="rt-sr-only"
+                  className="kui-sr-only"
                   id="dialog-announcement"
                 />
               </div>
@@ -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

@@ -1,11 +1,11 @@
 @import './_internal/base-menu.css';
 
-.rt-DropdownMenuContent {
+.kui-DropdownMenuContent {
   max-height: var(--radix-dropdown-menu-content-available-height);
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
 }
 
-.rt-DropdownMenuTriggerIcon {
+.kui-DropdownMenuTriggerIcon {
   flex-shrink: 0;
 
   /* Default size for when not in a sized button */
@@ -21,25 +21,25 @@
 
 @breakpoints {
   /* Size 1 Button */
-  .rt-Button:where(.rt-r-size-1) :where(.rt-DropdownMenuTriggerIcon) {
+  .kui-Button:where(:not([data-icon-only]).kui-r-size-1) :where(.kui-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) {
+  .kui-Button:where(:not([data-icon-only]).kui-r-size-2) :where(.kui-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) {
+  .kui-Button:where(:not([data-icon-only]).kui-r-size-3) :where(.kui-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) {
+  .kui-Button:where(:not([data-icon-only]).kui-r-size-4) :where(.kui-DropdownMenuTriggerIcon) {
     width: var(--trigger-icon-size-4);
     height: var(--trigger-icon-size-4);
   }
@@ -57,44 +57,44 @@
  */
 
 /* The root wrapper does not affect layout in cascade mode */
-.rt-DropdownMenuDrillDownRoot {
+.kui-DropdownMenuDrillDownRoot {
   display: contents;
 }
 
 /* The top level is one box, so a navigation step animates a single element */
-.rt-DropdownMenuDrillDownRoot:where([data-submenu-behavior='drill-down']:not([data-drill-down-active])),
-.rt-DropdownMenuDrillDownPanel:where([data-drill-down-active]) {
+.kui-DropdownMenuDrillDownRoot:where([data-submenu-behavior='drill-down']:not([data-drill-down-active])),
+.kui-DropdownMenuDrillDownPanel:where([data-drill-down-active]) {
   display: flex;
   flex-direction: column;
 }
 
 /* A level below the top only holds the path to the active panel */
-.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) {
+.kui-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) {
   display: contents;
 }
 
 /* Custom content (not menu parts) of a level below the top stays hidden */
-.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]),
-.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) {
-  & > :where(:not(.rt-DropdownMenuDrillDownPanel, .rt-BaseMenuGroup, .rt-BaseMenuRadioGroup)) {
+.kui-DropdownMenuDrillDownRoot:where([data-drill-down-active]),
+.kui-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) {
+  & > :where(:not(.kui-DropdownMenuDrillDownPanel, .kui-BaseMenuGroup, .kui-BaseMenuRadioGroup)) {
     display: none;
   }
 }
 
 /* Groups on the path to the active panel lay out like the level they belong to */
-.rt-DropdownMenuDrillDownRoot:where([data-drill-down-active]),
-.rt-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) {
-  & > :where(.rt-BaseMenuGroup, .rt-BaseMenuRadioGroup) {
+.kui-DropdownMenuDrillDownRoot:where([data-drill-down-active]),
+.kui-DropdownMenuDrillDownPanel:where(:not([data-drill-down-active])) {
+  & > :where(.kui-BaseMenuGroup, .kui-BaseMenuRadioGroup) {
     display: contents;
   }
 }
 
 /* Back row: a regular menu item with a medium-weight label */
-.rt-DropdownMenuDrillDownBackItem {
+.kui-DropdownMenuDrillDownBackItem {
   font-weight: var(--font-weight-medium);
 }
 
-.rt-DropdownMenuDrillDownBackIcon {
+.kui-DropdownMenuDrillDownBackIcon {
   margin-inline-start: calc(-2px * var(--scale));
   margin-inline-end: 0;
 }