@womp/kookie-ui 0.20.0 → 0.22.0

package/src/components/sidebar.tsx

@@ -10,26 +10,26 @@ 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
 interface SidebarSeparatorProps extends ComponentPropsWithout<typeof Separator, RemovedProps> {}
 
 const SidebarSeparator = React.forwardRef<React.ComponentRef<typeof Separator>, SidebarSeparatorProps>(({ className, ...props }, forwardedRef) => (
-  <Separator {...props} ref={forwardedRef} className={classNames('rt-SidebarSeparator', className)} />
+  <Separator {...props} ref={forwardedRef} className={classNames('kui-SidebarSeparator', className)} />
 ));
 SidebarSeparator.displayName = 'Sidebar.Separator';
 
@@ -38,14 +38,14 @@ SidebarSeparator.displayName = 'Sidebar.Separator';
 interface SidebarMenuProps extends React.ComponentPropsWithoutRef<'ul'> {}
 
 const SidebarMenu = React.forwardRef<HTMLUListElement, SidebarMenuProps>(({ className, ...props }, forwardedRef) => (
-  <ul {...props} ref={forwardedRef} className={classNames('rt-SidebarMenu', className)} />
+  <ul {...props} ref={forwardedRef} className={classNames('kui-SidebarMenu', className)} />
 ));
 SidebarMenu.displayName = 'Sidebar.Menu';
 
 interface SidebarMenuItemProps extends React.ComponentPropsWithoutRef<'li'> {}
 
 const SidebarMenuItem = React.forwardRef<HTMLLIElement, SidebarMenuItemProps>(({ className, ...props }, forwardedRef) => (
-  <li {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuItem', className)} />
+  <li {...props} ref={forwardedRef} className={classNames('kui-SidebarMenuItem', className)} />
 ));
 SidebarMenuItem.displayName = 'Sidebar.MenuItem';
 
@@ -63,7 +63,7 @@ function separateIconsAndLabels(node: React.ReactNode): { icons: React.ReactNode
 
   React.Children.forEach(node, (child) => {
     if (typeof child === 'string' || typeof child === 'number') {
-      labels.push(<span key={labels.length} className="rt-SidebarMenuLabel">{child}</span>);
+      labels.push(<span key={labels.length} className="kui-SidebarMenuLabel">{child}</span>);
     } else if (React.isValidElement(child)) {
       const el = child as React.ReactElement<any>;
       if (el.type === 'svg' || (el.props && el.props.icon) || (typeof el.type === 'function' && ((el.type as any).displayName?.includes('Icon') || (el.type as any).name?.includes('Icon')))) {
@@ -81,7 +81,7 @@ function separateIconsAndLabels(node: React.ReactNode): { icons: React.ReactNode
 
 function wrapTextNodes(node: React.ReactNode): React.ReactNode {
   if (typeof node === 'string' || typeof node === 'number') {
-    return <span className="rt-SidebarMenuLabel">{node}</span>;
+    return <span className="kui-SidebarMenuLabel">{node}</span>;
   }
   if (Array.isArray(node)) {
     return node.map((child, index) => <React.Fragment key={index}>{wrapTextNodes(child)}</React.Fragment>);
@@ -89,7 +89,7 @@ function wrapTextNodes(node: React.ReactNode): React.ReactNode {
   if (React.isValidElement(node)) {
     const el = node as React.ReactElement<any>;
     const className: string = (el.props && (el.props as any).className) || '';
-    const isAlreadyLabel = typeof el.type === 'string' && className.split(' ').includes('rt-SidebarMenuLabel');
+    const isAlreadyLabel = typeof el.type === 'string' && className.split(' ').includes('kui-SidebarMenuLabel');
     if (isAlreadyLabel) return el;
     const newChildren = wrapTextNodes((el.props as any)?.children);
     return React.cloneElement(el, { ...(el.props as any) }, newChildren);
@@ -110,9 +110,9 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLButtonElement>) => {
         if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-          const scope = event.currentTarget.closest('.rt-SidebarContent, .rt-SidebarSearchPopover');
+          const scope = event.currentTarget.closest('.kui-SidebarContent, .kui-SidebarSearchPopover');
           const buttons = scope
-            ? Array.from(scope.querySelectorAll<HTMLElement>('.rt-SidebarMenuButton')).filter((el) => el.offsetParent !== null)
+            ? Array.from(scope.querySelectorAll<HTMLElement>('.kui-SidebarMenuButton')).filter((el) => el.offsetParent !== null)
             : [];
           const index = buttons.indexOf(event.currentTarget);
           const next = buttons[index + (event.key === 'ArrowDown' ? 1 : -1)];
@@ -146,20 +146,20 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
           <>
             {originalInnerChildren}
             {badge && (
-              <div className="rt-SidebarMenuBadge">
+              <div className="kui-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>
             )}
             {shortcut && (
-              <div className="rt-BaseMenuShortcut rt-SidebarMenuShortcut">
+              <div className="kui-BaseMenuShortcut kui-SidebarMenuShortcut">
                 <Kbd size={sidebarSize}>{shortcut}</Kbd>
               </div>
             )}
@@ -177,7 +177,7 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
         {...props}
         ref={forwardedRef}
         aria-current={isActive ? 'page' : undefined}
-        className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', className)}
+        className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-SidebarMenuButton', className)}
         data-active={isActive || undefined}
         onKeyDown={handleKeyDown}
       >
@@ -185,11 +185,11 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
           slottedChildren
         ) : isThinMode && icons.length > 0 ? (
           <>
-            <span className="rt-SidebarMenuIconWrapper">{icons}</span>
+            <span className="kui-SidebarMenuIconWrapper">{icons}</span>
             {labels.map((label, index) => (
               <React.Fragment key={index}>
                 {typeof label === 'string' || typeof label === 'number' ? (
-                  <span className="rt-SidebarMenuLabel">{label}</span>
+                  <span className="kui-SidebarMenuLabel">{label}</span>
                 ) : (
                   label
                 )}
@@ -200,20 +200,20 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
           <>
             {processedChildren}
             {badge && (
-              <div className="rt-SidebarMenuBadge">
+              <div className="kui-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>
             )}
             {shortcut && (
-              <div className="rt-BaseMenuShortcut rt-SidebarMenuShortcut">
+              <div className="kui-BaseMenuShortcut kui-SidebarMenuShortcut">
                 <Kbd size={sidebarSize}>{shortcut}</Kbd>
               </div>
             )}
@@ -273,7 +273,7 @@ const SidebarMenuSubTrigger = React.forwardRef<React.ElementRef<typeof Accordion
             ref={forwardedRef as any}
             type="button"
             aria-haspopup="menu"
-            className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', 'rt-SidebarMenuSubTrigger', className)}
+            className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-SidebarMenuButton', 'kui-SidebarMenuSubTrigger', className)}
           >
             {children}
           </button>
@@ -288,14 +288,14 @@ const SidebarMenuSubTrigger = React.forwardRef<React.ElementRef<typeof Accordion
             {...props}
             ref={forwardedRef}
             asChild={asChild}
-            className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', 'rt-SidebarMenuSubTrigger', className)}
+            className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-SidebarMenuButton', 'kui-SidebarMenuSubTrigger', className)}
           >
             {asChild ? (
               children
             ) : (
               <>
                 {children}
-                <ThickChevronRightIcon className={classNames('rt-BaseMenuSubTriggerIcon', 'rt-SidebarMenuSubTriggerIcon')} />
+                <ThickChevronRightIcon className={classNames('kui-BaseMenuSubTriggerIcon', 'kui-SidebarMenuSubTriggerIcon')} />
               </>
             )}
           </Accordion.Trigger>
@@ -356,8 +356,8 @@ const SidebarMenuSubContent = React.forwardRef<React.ElementRef<typeof Accordion
   }
 
   return (
-    <Accordion.Content {...props} ref={forwardedRef} className={classNames('rt-SidebarMenuSubContent', className)}>
-      <div className="rt-SidebarMenuSubList">{children}</div>
+    <Accordion.Content {...props} ref={forwardedRef} className={classNames('kui-SidebarMenuSubContent', className)}>
+      <div className="kui-SidebarMenuSubList">{children}</div>
     </Accordion.Content>
   );
 });
@@ -367,7 +367,7 @@ SidebarMenuSubContent.displayName = 'Sidebar.MenuSubContent';
 interface SidebarGroupProps extends React.ComponentPropsWithoutRef<'div'> {}
 
 const SidebarGroup = React.forwardRef<HTMLDivElement, SidebarGroupProps>(({ className, ...props }, forwardedRef) => (
-  <div {...props} ref={forwardedRef} className={classNames('rt-BaseMenuGroup', 'rt-SidebarGroup', className)} />
+  <div {...props} ref={forwardedRef} className={classNames('kui-BaseMenuGroup', 'kui-SidebarGroup', className)} />
 ));
 SidebarGroup.displayName = 'Sidebar.Group';
 
@@ -378,14 +378,14 @@ interface SidebarGroupLabelProps extends React.ComponentPropsWithoutRef<'div'> {
 const SidebarGroupLabel = React.forwardRef<HTMLDivElement, SidebarGroupLabelProps>(({ asChild = false, className, ...props }, forwardedRef) => {
   const Comp = asChild ? Slot : 'div';
 
-  return <Comp {...props} ref={forwardedRef} className={classNames('rt-BaseMenuLabel', 'rt-SidebarGroupLabel', className)} />;
+  return <Comp {...props} ref={forwardedRef} className={classNames('kui-BaseMenuLabel', 'kui-SidebarGroupLabel', className)} />;
 });
 SidebarGroupLabel.displayName = 'Sidebar.GroupLabel';
 
 interface SidebarGroupContentProps extends React.ComponentPropsWithoutRef<'div'> {}
 
 const SidebarGroupContent = React.forwardRef<HTMLDivElement, SidebarGroupContentProps>(({ className, ...props }, forwardedRef) => (
-  <div {...props} ref={forwardedRef} className={classNames('rt-SidebarGroupContent', className)} />
+  <div {...props} ref={forwardedRef} className={classNames('kui-SidebarGroupContent', className)} />
 ));
 SidebarGroupContent.displayName = 'Sidebar.GroupContent';
 
@@ -513,34 +513,34 @@ const SidebarSearch = React.forwardRef<HTMLDivElement, SidebarSearchProps>(
 
     if (isThin) {
       return (
-        <div {...props} ref={forwardedRef} className={classNames('rt-SidebarSearch', 'rt-SidebarSearch--thin', className)}>
+        <div {...props} ref={forwardedRef} className={classNames('kui-SidebarSearch', 'kui-SidebarSearch--thin', className)}>
           <Popover.Root>
             <Popover.Trigger>
               <button
                 type="button"
-                className={classNames('rt-reset', 'rt-BaseMenuItem', 'rt-SidebarMenuButton', 'rt-SidebarSearchTrigger')}
+                className={classNames('kui-reset', 'kui-BaseMenuItem', 'kui-SidebarMenuButton', 'kui-SidebarSearchTrigger')}
                 aria-label={searchLabel}
               >
-                <span className="rt-SidebarMenuIconWrapper">
+                <span className="kui-SidebarMenuIconWrapper">
                   <SearchIcon />
                 </span>
-                <span className="rt-SidebarMenuLabel">Search</span>
+                <span className="kui-SidebarMenuLabel">Search</span>
               </button>
             </Popover.Trigger>
             <Popover.Content side="right" align="start" size="2" width="280px" aria-label={searchLabel}>
               {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- keyDown manages arrow-key navigation between input and results, which is accessibility-enhancing */}
               <div
                 ref={popoverRef}
-                className="rt-SidebarSearchPopover"
+                className="kui-SidebarSearchPopover"
                 role="search"
                 onKeyDown={handlePopoverKeyDown}
               >
-                <div className="rt-SidebarSearchInputWrapper">
-                  <SearchIcon className="rt-SidebarSearchIcon" />
+                <div className="kui-SidebarSearchInputWrapper">
+                  <SearchIcon className="kui-SidebarSearchIcon" />
                   <input
                     ref={inputRef}
                     type="search"
-                    className="rt-SidebarSearchInput"
+                    className="kui-SidebarSearchInput"
                     value={value}
                     onChange={(e) => onValueChange(e.target.value)}
                     onKeyDown={handleKeyDown}
@@ -553,7 +553,7 @@ const SidebarSearch = React.forwardRef<HTMLDivElement, SidebarSearchProps>(
                   {value && (
                     <button
                       type="button"
-                      className="rt-reset rt-SidebarSearchClear"
+                      className="kui-reset kui-SidebarSearchClear"
                       onClick={() => {
                         onValueChange('');
                         inputRef.current?.focus();
@@ -578,13 +578,13 @@ const SidebarSearch = React.forwardRef<HTMLDivElement, SidebarSearchProps>(
 
     // Expanded mode: inline input
     return (
-      <div {...props} ref={forwardedRef} className={classNames('rt-SidebarSearch', 'rt-SidebarSearch--expanded', 'rt-ShellPaneChrome', `rt-r-size-${visual?.size ?? '2'}`, className)} role="search">
-        <div className="rt-SidebarSearchInputWrapper">
-          <SearchIcon className="rt-SidebarSearchIcon" />
+      <div {...props} ref={forwardedRef} className={classNames('kui-SidebarSearch', 'kui-SidebarSearch--expanded', 'kui-ShellPaneChrome', `kui-r-size-${visual?.size ?? '2'}`, className)} role="search">
+        <div className="kui-SidebarSearchInputWrapper">
+          <SearchIcon className="kui-SidebarSearchIcon" />
           <input
             ref={inputRef}
             type="search"
-            className="rt-SidebarSearchInput"
+            className="kui-SidebarSearchInput"
             value={value}
             onChange={(e) => onValueChange(e.target.value)}
             onKeyDown={handleKeyDown}
@@ -594,7 +594,7 @@ const SidebarSearch = React.forwardRef<HTMLDivElement, SidebarSearchProps>(
           {value && (
             <button
               type="button"
-              className="rt-reset rt-SidebarSearchClear"
+              className="kui-reset kui-SidebarSearchClear"
               onClick={() => {
                 onValueChange('');
                 inputRef.current?.focus();

package/src/components/slider.css

@@ -1,4 +1,4 @@
-.rt-SliderRoot {
+.kui-SliderRoot {
   --slider-thumb-width: var(--space-4);
   --slider-thumb-height: var(--space-3);
 
@@ -27,7 +27,7 @@
   }
 }
 
-.rt-SliderTrack {
+.kui-SliderTrack {
   overflow: hidden;
   position: relative;
   flex-grow: 1;
@@ -42,7 +42,7 @@
   }
 }
 
-.rt-SliderRange {
+.kui-SliderRange {
   position: absolute;
   border-radius: inherit;
 
@@ -55,7 +55,7 @@
   }
 }
 
-.rt-SliderThumb {
+.kui-SliderThumb {
   display: block;
   width: var(--slider-thumb-width);
   height: var(--slider-thumb-height);
@@ -104,8 +104,8 @@
 /* Track thickness is v2's slider ladder (4/5/6/7). The thumb keeps v1's shape: its overshoot
  * still reads v1's track thickness, so a thinner track does not shrink it. */
 @breakpoints {
-  .rt-SliderRoot {
-    &:where(.rt-r-size-1) {
+  .kui-SliderRoot {
+    &:where(.kui-r-size-1) {
       --slider-track-size: var(--slider-track-1, calc(4px * var(--scale)));
       --slider-thumb-overshoot-base: var(--progress-slider-height-1);
       --slider-radius: var(--progress-slider-radius-1);
@@ -113,7 +113,7 @@
       --slider-thumb-height: var(--space-3);
       --slider-thumb-radius: calc(var(--radius-1) * 0.75);
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       --slider-track-size: var(--slider-track-2, calc(5px * var(--scale)));
       --slider-thumb-overshoot-base: var(--progress-slider-height-2);
       --slider-radius: var(--progress-slider-radius-2);
@@ -121,7 +121,7 @@
       --slider-thumb-height: calc(var(--space-3) + var(--space-2));
       --slider-thumb-radius: calc(var(--radius-2) * 0.75);
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       --slider-track-size: var(--slider-track-3, calc(6px * var(--scale)));
       --slider-thumb-overshoot-base: var(--progress-slider-height-3);
       --slider-radius: var(--progress-slider-radius-3);
@@ -129,7 +129,7 @@
       --slider-thumb-height: var(--space-4);
       --slider-thumb-radius: calc(var(--radius-3) * 0.75);
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       --slider-track-size: var(--slider-track-4, calc(7px * var(--scale)));
       --slider-thumb-overshoot-base: var(--progress-slider-height-4);
       --slider-radius: var(--progress-slider-radius-4);
@@ -148,50 +148,50 @@
 
 /* surface */
 
-.rt-SliderRoot:where(.rt-variant-surface) {
-  & :where(.rt-SliderTrack) {
-    background-color: var(--gray-2);
-    box-shadow: inset 0 0 0 1px var(--gray-6);
+.kui-SliderRoot:where(.kui-variant-surface) {
+  & :where(.kui-SliderTrack) {
+    background-color: var(--neutral-2);
+    box-shadow: inset 0 0 0 1px var(--neutral-6);
 
     &:where([data-disabled]) {
-      box-shadow: inset 0 0 0 1px var(--gray-5);
+      box-shadow: inset 0 0 0 1px var(--neutral-5);
     }
   }
 
-  & :where(.rt-SliderRange) {
+  & :where(.kui-SliderRange) {
     background-color: var(--accent-solid);
   }
 }
 
 /* soft */
 
-.rt-SliderRoot:where(.rt-variant-soft) {
-  & :where(.rt-SliderTrack) {
-    background-color: var(--gray-3);
+.kui-SliderRoot:where(.kui-variant-soft) {
+  & :where(.kui-SliderTrack) {
+    background-color: var(--neutral-3);
   }
 
-  & :where(.rt-SliderRange) {
+  & :where(.kui-SliderRange) {
     background-color: var(--accent-solid);
   }
 
-  & :where(.rt-SliderThumb) {
+  & :where(.kui-SliderThumb) {
     --slider-thumb-box-shadow: var(--shadow-3);
   }
 }
 
 /* outline */
 
-.rt-SliderRoot:where(.rt-variant-outline) {
-  & :where(.rt-SliderTrack) {
+.kui-SliderRoot:where(.kui-variant-outline) {
+  & :where(.kui-SliderTrack) {
     /* 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-SliderRange) {
+  & :where(.kui-SliderRange) {
     background-color: var(--accent-solid);
   }
 
-  & :where(.rt-SliderThumb) {
+  & :where(.kui-SliderThumb) {
     --slider-thumb-box-shadow: var(--shadow-3);
   }
 }
@@ -199,22 +199,22 @@
 /* all disabled Sliders: a colour remap, never opacity, and a default cursor */
 
 [data-disabled] {
-  .rt-SliderRoot:where(&) {
+  .kui-SliderRoot:where(&) {
     cursor: default;
   }
-  .rt-SliderTrack:where(&) {
-    background-color: var(--gray-a3) !important;
+  .kui-SliderTrack:where(&) {
+    background-color: var(--neutral-a3) !important;
     box-shadow: none !important;
   }
-  .rt-SliderRange:where(&) {
+  .kui-SliderRange:where(&) {
     background-color: var(--accent-a3) !important;
   }
-  .rt-SliderThumb:where(&) {
+  .kui-SliderThumb:where(&) {
     cursor: default;
   }
-  .rt-SliderThumb:where(&)::after {
+  .kui-SliderThumb:where(&)::after {
     cursor: default;
-    background-color: var(--gray-3) !important;
+    background-color: var(--neutral-3) !important;
     box-shadow: none !important;
   }
 }
@@ -225,21 +225,20 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-SliderContainer {
+.kui-SliderContainer {
   position: relative;
 }
 
-.rt-SliderTicks {
+.kui-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;
 }
 
-.rt-SliderTick {
+.kui-SliderTick {
   position: absolute;
   top: 0;
   display: flex;
@@ -258,45 +257,45 @@
 }
 
 @media (hover: hover) {
-  .rt-SliderTick:where(:hover) {
-    :where(.rt-SliderTickMark) {
-      background-color: var(--gray-12) !important;
+  .kui-SliderTick:where(:hover) {
+    :where(.kui-SliderTickMark) {
+      background-color: var(--neutral-12) !important;
     }
 
-    :where(.rt-SliderTickLabel) {
-      color: var(--gray-12) !important;
+    :where(.kui-SliderTickLabel) {
+      color: var(--neutral-12) !important;
       font-weight: var(--font-weight-medium);
     }
   }
 }
 
-.rt-SliderTick:where(:active) {
-  :where(.rt-SliderTickMark) {
-    background-color: var(--gray-12) !important;
+.kui-SliderTick:where(:active) {
+  :where(.kui-SliderTickMark) {
+    background-color: var(--neutral-12) !important;
   }
 
-  :where(.rt-SliderTickLabel) {
-    color: var(--gray-12) !important;
+  :where(.kui-SliderTickLabel) {
+    color: var(--neutral-12) !important;
     font-weight: var(--font-weight-medium);
   }
 }
 
-.rt-SliderTick:where(:focus-visible) {
+.kui-SliderTick:where(:focus-visible) {
   outline: var(--focus-ring-width, 2px) solid var(--focus-8);
   outline-offset: var(--focus-ring-offset, 2px);
 }
 
-.rt-SliderTickMark {
+.kui-SliderTickMark {
   width: 1px;
   height: var(--space-3);
-  background-color: var(--gray-6);
+  background-color: var(--neutral-6);
   border-radius: 1px;
 }
 
-.rt-SliderTickLabel {
+.kui-SliderTickLabel {
   font-size: var(--font-size-1);
   line-height: var(--line-height-1);
-  color: var(--gray-11);
+  color: var(--neutral-11);
   font-weight: var(--font-weight-regular);
   white-space: nowrap;
   overflow: hidden;

package/src/components/slider.props.tsx

@@ -7,10 +7,10 @@ const sizes = ['1', '2', '3', '4'] as const;
 const variants = ['surface', 'soft', 'outline'] as const;
 
 const sliderPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
-  showTickLabels: { type: 'boolean', className: 'rt-show-tick-labels' },
-  snapToTicks: { type: 'boolean', className: 'rt-snap-to-ticks' },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
+  variant: { type: 'enum', className: 'kui-variant', values: variants, default: 'surface' },
+  showTickLabels: { type: 'boolean', className: 'kui-show-tick-labels' },
+  snapToTicks: { type: 'boolean', className: 'kui-snap-to-ticks' },
   ...colorPropDef,
   ...radiusPropDef,
 } satisfies {

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;
 
@@ -150,7 +146,7 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
   }, []);
 
   return (
-    <div className="rt-SliderContainer">
+    <div className="kui-SliderContainer">
       {/* Live region for screen reader announcements */}
       <div
         ref={announceRef}
@@ -174,7 +170,7 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
         step={step}
         onValueChange={handleValueChange}
         asChild={false}
-        className={classNames('rt-SliderRoot', className)}
+        className={classNames('kui-SliderRoot', className)}
         // Essential ARIA attributes for WCAG 2.2 AA compliance
         aria-valuemin={min}
         aria-valuemax={max}
@@ -182,16 +178,16 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
         aria-valuetext={formatValueText(currentValue as number[])}
         aria-label={props['aria-label'] || `${isRange ? 'Range' : 'Value'} slider`}
       >
-        <SliderPrimitive.Track className="rt-SliderTrack">
+        <SliderPrimitive.Track className="kui-SliderTrack">
           <SliderPrimitive.Range
-            className="rt-SliderRange"
+            className="kui-SliderRange"
             data-inverted={sliderProps.inverted ? '' : undefined}
           />
         </SliderPrimitive.Track>
         {(sliderProps.value ?? sliderProps.defaultValue ?? []).map((value, index) => (
           <SliderPrimitive.Thumb
             key={index}
-            className="rt-SliderThumb"
+            className="kui-SliderThumb"
             {...(tabIndex !== undefined ? { tabIndex } : undefined)}
             aria-label={
               isRange
@@ -203,12 +199,12 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
         ))}
       </SliderPrimitive.Root>
       {tickElements && (
-        <div className="rt-SliderTicks" role="group" aria-label="Slider tick marks">
+        <div className="kui-SliderTicks" role="group" aria-label="Slider tick marks">
           {tickElements.map((tick) => {
             return (
               <button
                 key={tick.index}
-                className="rt-SliderTick"
+                className="kui-SliderTick"
                 style={{
                   left: `${tick.percentage}%`,
                   transform: 'translateX(-50%)',
@@ -225,9 +221,9 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((ownProps, forwarded
                 aria-describedby={tick.label ? undefined : `tick-${tick.index}-value`}
                 type="button"
               >
-                <div className="rt-SliderTickMark" />
+                <div className="kui-SliderTickMark" />
                 {tick.label && showTickLabels !== false && (
-                  <div className="rt-SliderTickLabel">{tick.label}</div>
+                  <div className="kui-SliderTickLabel">{tick.label}</div>
                 )}
                 {!tick.label && (
                   <span id={`tick-${tick.index}-value`} className="sr-only">