@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/navbar.css

@@ -7,30 +7,30 @@
  */
 
 /* Root container */
-.rt-NavbarRoot {
+.kui-NavbarRoot {
   width: 100%;
   z-index: 50;
-  background-color: var(--color-background);
+  background-color: var(--color-page);
 }
 
-.rt-NavbarRoot[data-position='fixed'] {
+.kui-NavbarRoot[data-position='fixed'] {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
 }
 
-.rt-NavbarRoot[data-position='sticky'] {
+.kui-NavbarRoot[data-position='sticky'] {
   position: sticky;
   top: 0;
 }
 
-.rt-NavbarRoot[data-position='static'] {
+.kui-NavbarRoot[data-position='static'] {
   position: static;
 }
 
 /* Container - grid layout for true centering */
-.rt-NavbarContainer {
+.kui-NavbarContainer {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
@@ -39,36 +39,36 @@
 }
 
 /* Size variants - padding based */
-.rt-NavbarRoot[data-size='1'] .rt-NavbarContainer {
+.kui-NavbarRoot[data-size='1'] .kui-NavbarContainer {
   padding: var(--space-3) var(--space-4);
 }
 
-.rt-NavbarRoot[data-size='2'] .rt-NavbarContainer {
+.kui-NavbarRoot[data-size='2'] .kui-NavbarContainer {
   padding: var(--space-4) var(--space-5);
 }
 
-.rt-NavbarRoot[data-size='3'] .rt-NavbarContainer {
+.kui-NavbarRoot[data-size='3'] .kui-NavbarContainer {
   padding: var(--space-5) var(--space-6);
 }
 
-.rt-NavbarRoot[data-size='4'] .rt-NavbarContainer {
+.kui-NavbarRoot[data-size='4'] .kui-NavbarContainer {
   padding: var(--space-6) var(--space-7);
 }
 
 /* Slot overflow handling */
-.rt-NavbarLogo,
-.rt-NavbarActions {
+.kui-NavbarLogo,
+.kui-NavbarActions {
   min-width: 0;
 }
 
 /* Ensure Actions always stays in the right column */
-.rt-NavbarActions {
+.kui-NavbarActions {
   grid-column: 3;
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
-  .rt-NavbarContainer {
+  .kui-NavbarContainer {
     gap: var(--space-4);
   }
 }

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';
@@ -50,11 +54,11 @@ const NavbarRoot = React.forwardRef<NavbarRootElement, NavbarRootProps>(
       <header
         {...rootProps}
         ref={forwardedRef}
-        className={classNames('rt-NavbarRoot', className)}
+        className={classNames('kui-NavbarRoot', className)}
         data-position={position}
         data-size={size}
       >
-        <div className="rt-NavbarContainer">{children}</div>
+        <div className="kui-NavbarContainer">{children}</div>
       </header>
     );
   },
@@ -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;
 };
 
@@ -72,7 +76,7 @@ const NavbarLogo = React.forwardRef<HTMLDivElement, NavbarLogoProps>(
       return (
         <Slot
           ref={ref}
-          className={classNames('rt-NavbarLogo', className)}
+          className={classNames('kui-NavbarLogo', className)}
           {...props}
         />
       );
@@ -84,7 +88,7 @@ const NavbarLogo = React.forwardRef<HTMLDivElement, NavbarLogoProps>(
         gap={gap}
         align={align}
         justify={justify}
-        className={classNames('rt-NavbarLogo', className)}
+        className={classNames('kui-NavbarLogo', className)}
         {...props}
       />
     );
@@ -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;
 };
 
@@ -103,7 +107,7 @@ const NavbarNavigation = React.forwardRef<HTMLDivElement, NavbarNavigationProps>
       return (
         <Slot
           ref={ref}
-          className={classNames('rt-NavbarNavigation', className)}
+          className={classNames('kui-NavbarNavigation', className)}
           role="navigation"
           {...props}
         />
@@ -116,7 +120,7 @@ const NavbarNavigation = React.forwardRef<HTMLDivElement, NavbarNavigationProps>
         gap={gap}
         align={align}
         justify={justify}
-        className={classNames('rt-NavbarNavigation', className)}
+        className={classNames('kui-NavbarNavigation', className)}
         role="navigation"
         {...props}
       />
@@ -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;
 };
 
@@ -136,7 +140,7 @@ const NavbarActions = React.forwardRef<HTMLDivElement, NavbarActionsProps>(
       return (
         <Slot
           ref={ref}
-          className={classNames('rt-NavbarActions', className)}
+          className={classNames('kui-NavbarActions', className)}
           {...props}
         />
       );
@@ -148,7 +152,7 @@ const NavbarActions = React.forwardRef<HTMLDivElement, NavbarActionsProps>(
         gap={gap}
         align={align}
         justify={justify}
-        className={classNames('rt-NavbarActions', className)}
+        className={classNames('kui-NavbarActions', className)}
         {...props}
       />
     );

package/src/components/notice.css

@@ -3,7 +3,7 @@
  * It takes space and never floats: no position, no z-index.
  */
 
-.rt-NoticeRoot {
+.kui-NoticeRoot {
   box-sizing: border-box;
   display: flex;
   /* The icon and the actions sit on the first line, so a long message wraps under itself. */
@@ -20,12 +20,12 @@
 }
 
 /* Gray is the resting category: its fill is one step quieter and its words are the ordinary ink. */
-.rt-NoticeRoot:where([data-accent-color='gray']) {
-  background-color: var(--gray-a3);
-  color: var(--gray-12);
+.kui-NoticeRoot:where([data-accent-color='gray']) {
+  background-color: var(--neutral-a3);
+  color: var(--neutral-12);
 }
 
-.rt-NoticeIcon {
+.kui-NoticeIcon {
   display: flex;
   flex: none;
   align-items: center;
@@ -39,13 +39,13 @@
   }
 }
 
-.rt-NoticeText {
+.kui-NoticeText {
   flex: 1 1 auto;
   min-width: 0;
   overflow-wrap: anywhere;
 }
 
-.rt-NoticeActions {
+.kui-NoticeActions {
   display: flex;
   flex: none;
   align-items: center;
@@ -55,42 +55,44 @@
 }
 
 /* A question wraps its answers under the words when the strip is narrow. */
-.rt-NoticeRoot:where([data-kind='confirmation']) {
+.kui-NoticeRoot:where([data-kind='confirmation']) {
   flex-wrap: wrap;
 
-  & :where(.rt-NoticeActions) {
+  & :where(.kui-NoticeActions) {
     margin-left: auto;
   }
 }
 
-.rt-NoticeRoot {
+.kui-NoticeRoot {
   /* A notice is a surface: it pads and rounds like a Card of the same size, with one gap. */
   gap: var(--layout-space-4);
   border-radius: var(--notice-radius);
   padding: var(--notice-padding);
+  /* A surface publishes its padding, so m="bleed" pulls a child to its edge. */
+  --kui-sf-p: var(--notice-padding);
 
-  &:where(.rt-r-size-1) {
+  &:where(.kui-r-size-1) {
     --notice-padding: var(--surface-p-1);
     --notice-radius: var(--radius-surface-1);
     --notice-line: var(--line-height-1);
     --notice-control: var(--control-height-1);
     --notice-icon-size: var(--content-icon-size-1);
   }
-  &:where(.rt-r-size-2) {
+  &:where(.kui-r-size-2) {
     --notice-padding: var(--surface-p-2);
     --notice-radius: var(--radius-surface-2);
     --notice-line: var(--line-height-2);
     --notice-control: var(--control-height-2);
     --notice-icon-size: var(--content-icon-size-2);
   }
-  &:where(.rt-r-size-3) {
+  &:where(.kui-r-size-3) {
     --notice-padding: var(--surface-p-3);
     --notice-radius: var(--radius-surface-3);
     --notice-line: var(--line-height-3);
     --notice-control: var(--control-height-3);
     --notice-icon-size: var(--content-icon-size-3);
   }
-  &:where(.rt-r-size-4) {
+  &:where(.kui-r-size-4) {
     --notice-padding: var(--surface-p-4);
     --notice-radius: var(--radius-surface-4);
     --notice-line: var(--line-height-4);

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';
@@ -81,16 +80,16 @@ const Strip = React.forwardRef<HTMLDivElement, StripProps & { kind: 'notice' | '
       aria-live="polite"
       {...props}
       ref={forwardedRef}
-      className={classNames('rt-NoticeRoot', `rt-r-size-${size}`, className)}
+      className={classNames('kui-NoticeRoot', `kui-r-size-${size}`, className)}
       data-kind={kind}
       data-accent-color={color}
     >
       {leading ? (
-        <span className="rt-NoticeIcon" aria-hidden>
+        <span className="kui-NoticeIcon" aria-hidden>
           {leading}
         </span>
       ) : null}
-      <Text as="div" size={size} className="rt-NoticeText">
+      <Text as="div" size={size} className="kui-NoticeText">
         {children}
       </Text>
       {trailing}
@@ -105,14 +104,14 @@ const Notice = React.forwardRef<HTMLDivElement, NoticeProps>(({ icon, action, on
   const size = useThemeSize(sizeProp ?? contextSize, noticeSizePropDef);
   const trailing =
     action || onDismiss ? (
-      <span className="rt-NoticeActions">
+      <span className="kui-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="kui-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;
@@ -133,7 +132,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
       ref={forwardedRef}
       kind="confirmation"
       trailing={
-        <span className="rt-NoticeActions">
+        <span className="kui-NoticeActions">
           <Button size={size} variant="ghost" color="gray" disabled={busy} onClick={onCancel}>
             {cancelLabel}
           </Button>

package/src/components/popover.css

@@ -1,5 +1,5 @@
-.rt-PopoverContent {
-  background-color: var(--color-panel-solid);
+.kui-PopoverContent {
+  background-color: var(--color-surface);
   box-shadow: var(--shadow-5);
   min-width: var(--radix-popover-trigger-width);
   outline: 0;
@@ -10,6 +10,8 @@
   /* Default toolbar padding maps to content padding; overridden per size below */
   --popover-toolbar-padding: var(--popover-content-padding);
   padding: var(--popover-content-padding);
+  /* A surface publishes its padding, so m="bleed" pulls a child to its edge. */
+  --kui-sf-p: var(--popover-content-padding);
   box-sizing: border-box;
 
   transform-origin: var(--radix-popover-content-transform-origin);
@@ -21,7 +23,7 @@
   }
 }
 
-.rt-PopoverToolbar {
+.kui-PopoverToolbar {
   position: absolute;
   top: 0;
   left: 0;
@@ -32,22 +34,22 @@
   align-items: center;
   column-gap: var(--space-2);
   padding: var(--popover-toolbar-padding);
-  background-color: var(--color-panel-solid);
+  background-color: var(--color-surface);
 }
 
-.rt-PopoverToolbarSection {
+.kui-PopoverToolbarSection {
   display: flex;
   align-items: center;
   gap: var(--space-3);
 }
 
-.rt-PopoverToolbarLeft { justify-self: start; }
+.kui-PopoverToolbarLeft { justify-self: start; }
 
-.rt-PopoverToolbarCenter { grid-column: 2; justify-self: center; min-width: 0; text-align: center; }
+.kui-PopoverToolbarCenter { grid-column: 2; justify-self: center; min-width: 0; text-align: center; }
 
-.rt-PopoverToolbarRight { justify-self: end; }
+.kui-PopoverToolbarRight { justify-self: end; }
 
-.rt-PopoverToolbarTitle {
+.kui-PopoverToolbarTitle {
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -61,23 +63,23 @@
  ***************************************************************************************************/
 
 @breakpoints {
-  .rt-PopoverContent {
-    &:where(.rt-r-size-1) {
+  .kui-PopoverContent {
+    &:where(.kui-r-size-1) {
       --popover-content-padding: var(--surface-p-1);
       --popover-toolbar-padding: var(--space-3);
       border-radius: var(--radius-surface-1);
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --popover-content-padding: var(--surface-p-2);
       --popover-toolbar-padding: var(--space-3);
       border-radius: var(--radius-surface-2);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --popover-content-padding: var(--surface-p-3);
       --popover-toolbar-padding: var(--space-4);
       border-radius: var(--radius-surface-3);
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       --popover-content-padding: var(--surface-p-4);
       --popover-toolbar-padding: var(--space-5);
       border-radius: var(--radius-surface-4);

package/src/components/popover.props.tsx

@@ -10,7 +10,7 @@ const popoverContentPropDefs = {
   ...asChildPropDef,
   size: {
     type: 'enum',
-    className: 'rt-r-size',
+    className: 'kui-r-size',
     values: contentSizes,
     default: '2',
     responsive: true,

package/src/components/popover.tsx

@@ -106,7 +106,7 @@ const PopoverContent = React.forwardRef<PopoverContentElement, PopoverContentPro
             {...contentProps}
             ref={combinedRef}
             aria-labelledby={labelId}
-            className={classNames('rt-PopperContent', 'rt-PopoverContent', className)}
+            className={classNames('kui-PopperContent', 'kui-PopoverContent', className)}
           >
             <PopoverContentContext.Provider value={React.useMemo(() => ({ contentRef, setToolbarOffset, setLabelId }), [setToolbarOffset])}>
               {props.children}
@@ -181,7 +181,7 @@ const PopoverToolbarBase = React.forwardRef<PopoverToolbarElement, PopoverToolba
     }, [ctx]);
 
     return (
-      <div {...props} ref={setRefs} className={classNames('rt-PopoverToolbar', className)}>
+      <div {...props} ref={setRefs} className={classNames('kui-PopoverToolbar', className)}>
         {children}
       </div>
     );
@@ -196,7 +196,7 @@ const PopoverToolbarLeft = React.forwardRef<HTMLDivElement, SectionProps>(
     <div
       {...props}
       ref={ref}
-      className={classNames('rt-PopoverToolbarSection', 'rt-PopoverToolbarLeft', className)}
+      className={classNames('kui-PopoverToolbarSection', 'kui-PopoverToolbarLeft', className)}
     />
   ),
 );
@@ -207,7 +207,7 @@ const PopoverToolbarCenter = React.forwardRef<HTMLDivElement, SectionProps>(
     <div
       {...props}
       ref={ref}
-      className={classNames('rt-PopoverToolbarSection', 'rt-PopoverToolbarCenter', className)}
+      className={classNames('kui-PopoverToolbarSection', 'kui-PopoverToolbarCenter', className)}
     />
   ),
 );
@@ -218,7 +218,7 @@ const PopoverToolbarRight = React.forwardRef<HTMLDivElement, SectionProps>(
     <div
       {...props}
       ref={ref}
-      className={classNames('rt-PopoverToolbarSection', 'rt-PopoverToolbarRight', className)}
+      className={classNames('kui-PopoverToolbarSection', 'kui-PopoverToolbarRight', className)}
     />
   ),
 );
@@ -229,7 +229,7 @@ const PopoverToolbarTitle = React.forwardRef<HTMLSpanElement, TitleProps>(
   ({ className, id: idProp, ...props }, ref) => {
     const ctx = usePopoverContentContext('Popover.Toolbar.Title');
     const reactId = React.useId();
-    const id = idProp ?? `rt-popover-toolbar-title-${reactId}`;
+    const id = idProp ?? `kui-popover-toolbar-title-${reactId}`;
     React.useEffect(() => {
       ctx?.setLabelId(id);
       return () => ctx?.setLabelId(undefined);
@@ -239,7 +239,7 @@ const PopoverToolbarTitle = React.forwardRef<HTMLSpanElement, TitleProps>(
         {...props}
         id={id}
         ref={ref}
-        className={classNames('rt-PopoverToolbarTitle', className)}
+        className={classNames('kui-PopoverToolbarTitle', className)}
       />
     );
   },

package/src/components/progress.css

@@ -1,4 +1,4 @@
-.rt-ProgressRoot {
+.kui-ProgressRoot {
   --progress-value: 0;
   --progress-max: 100;
   --progress-duration: var(--progress-default-duration);
@@ -15,7 +15,7 @@
   isolation: isolate;
 }
 
-.rt-ProgressIndicator {
+.kui-ProgressIndicator {
   display: block;
   height: var(--position-full);
   width: var(--position-full);
@@ -25,13 +25,13 @@
    * The bar is full width and slid into place rather than grown. `width` is a
    * layout property: animating it re-lays-out on every frame, and the
    * indeterminate animation never stops, so a visible bar reflowed forever.
-   * `.rt-ProgressRoot` clips the overhang. `max()` keeps a sliver of the bar
+   * `.kui-ProgressRoot` clips the overhang. `max()` keeps a sliver of the bar
    * visible at very low values, as the width form did.
    */
   transform: translateX(calc(-100% + max(calc(var(--progress-value) / var(--progress-max) * 100%), var(--progress-height))));
 
   &:where([data-state='indeterminate']) {
-    animation-name: rt-progress-indicator-indeterminate-grow;
+    animation-name: kui-progress-indicator-indeterminate-grow;
     animation-duration: var(--progress-duration);
     animation-iteration-count: infinite;
     animation-fill-mode: both;
@@ -39,7 +39,7 @@
   }
 }
 
-@keyframes rt-progress-indicator-indeterminate-grow {
+@keyframes kui-progress-indicator-indeterminate-grow {
   0% {
     transform: translateX(calc(-100% + var(--progress-scale-initial) * 100%));
   }
@@ -66,32 +66,32 @@
 
 /* surface */
 
-.rt-ProgressRoot:where(.rt-variant-surface) {
-  background-color: var(--gray-2);
-  box-shadow: inset 0 0 0 1px var(--gray-6);
+.kui-ProgressRoot:where(.kui-variant-surface) {
+  background-color: var(--neutral-2);
+  box-shadow: inset 0 0 0 1px var(--neutral-6);
 
-  & :where(.rt-ProgressIndicator) {
+  & :where(.kui-ProgressIndicator) {
     background-color: var(--accent-solid);
   }
 }
 
 /* soft */
 
-.rt-ProgressRoot:where(.rt-variant-soft) {
-  background-color: var(--gray-3);
+.kui-ProgressRoot:where(.kui-variant-soft) {
+  background-color: var(--neutral-3);
 
-  & :where(.rt-ProgressIndicator) {
+  & :where(.kui-ProgressIndicator) {
     background-color: var(--accent-solid);
   }
 }
 
 /* outline */
 
-.rt-ProgressRoot:where(.rt-variant-outline) {
+.kui-ProgressRoot:where(.kui-variant-outline) {
   /* Base state: no background, just border */
-  box-shadow: inset 0 0 0 1px var(--gray-6);
+  box-shadow: inset 0 0 0 1px var(--neutral-6);
 
-  & :where(.rt-ProgressIndicator) {
+  & :where(.kui-ProgressIndicator) {
     background-color: var(--accent-solid);
   }
 }

package/src/components/progress.props.tsx

@@ -6,7 +6,7 @@ import type { PropDef } from '../props/prop-def.js';
 const variants = ['surface', 'soft', 'outline'] as const;
 
 const progressPropDefs = {
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
+  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'surface' },
   ...colorPropDef,
   ...radiusPropDef,
   duration: { type: 'string' },

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 (
@@ -31,7 +27,7 @@ const Progress = React.forwardRef<ProgressElement, ProgressProps>((props, forwar
       data-accent-color={color}
       data-radius={radius}
       ref={forwardedRef}
-      className={classNames('rt-ProgressRoot', className)}
+      className={classNames('kui-ProgressRoot', className)}
       style={mergeStyles(
         {
           '--progress-duration': 'value' in progressProps ? undefined : duration,
@@ -43,7 +39,7 @@ const Progress = React.forwardRef<ProgressElement, ProgressProps>((props, forwar
       {...progressProps}
       asChild={false}
     >
-      <ProgressPrimitive.Indicator className="rt-ProgressIndicator" />
+      <ProgressPrimitive.Indicator className="kui-ProgressIndicator" />
     </ProgressPrimitive.Root>
   );
 });

package/src/components/radio-group.css

@@ -1,10 +1,10 @@
-.rt-RadioGroupRoot {
+.kui-RadioGroupRoot {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
 }
 
-.rt-RadioGroupItem {
+.kui-RadioGroupItem {
   display: flex;
   gap: 0.5em;
 
@@ -12,7 +12,7 @@
   width: fit-content;
 }
 
-.rt-RadioGroupItemInner {
+.kui-RadioGroupItemInner {
   /* Make layouts with text truncation possible */
   min-width: 0;
 }

package/src/components/radio-group.props.tsx

@@ -10,8 +10,8 @@ const variants = baseRadioPropDefs.variant.values;
 
 const radioGroupRootPropDefs = {
   ...asChildPropDef,
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'raised' },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'raised' },
   ...colorPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;