@womp/kookie-ui 0.21.0 → 0.22.0

package/src/components/_internal/base-sidebar-menu.css

@@ -5,8 +5,8 @@
   - Relies on Base Menu tokens: --base-menu-*
 */
 
-/* Sidebar Menu - based on rt-BaseMenuViewport */
-.rt-SidebarMenu {
+/* Sidebar Menu - based on kui-BaseMenuViewport */
+.kui-SidebarMenu {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -17,18 +17,18 @@
   padding: 0;
   min-height: 0;
 
-  :where(.rt-SidebarContent:has(.rt-ScrollAreaScrollbar[data-orientation='vertical'])) & {
+  :where(.kui-SidebarContent:has(.kui-ScrollAreaScrollbar[data-orientation='vertical'])) & {
     padding-inline-end: var(--space-4);
   }
 }
 
 /* Sidebar Menu Item */
-.rt-SidebarMenuItem {
+.kui-SidebarMenuItem {
   list-style: none;
 }
 
 /* Sidebar Menu Button - inherit from BaseMenuItem */
-.rt-SidebarMenuButton {
+.kui-SidebarMenuButton {
   display: flex;
   align-items: center;
   gap: var(--base-menu-item-gap);
@@ -56,11 +56,11 @@
   cursor: var(--cursor-menu-item);
   &:where([data-disabled]) {
     cursor: default;
-    color: var(--gray-a8);
+    color: var(--neutral-a8);
   }
 
   /* Active navigation state - always accent-based */
-  &:where([data-active], .rt-active) {
+  &:where([data-active], .kui-active) {
     background-color: var(--accent-a3);
     color: var(--accent-a12);
   }
@@ -77,20 +77,20 @@
   }
 
   /* Muted text sits a step lower inside items */
-  & :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
-    color: var(--gray-a10);
+  & :where(.kui-Text.kui-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
+    color: var(--neutral-a10);
   }
 
   /* Ensure shortcuts inherit color in disabled/highlighted/hover/active states */
   &:where([data-disabled], [data-highlighted], [data-active]) {
-    & :where(.rt-SidebarMenuShortcut) {
+    & :where(.kui-SidebarMenuShortcut) {
       color: inherit;
     }
   }
 
   @media (hover: hover) {
     &:where(:hover) {
-      & :where(.rt-SidebarMenuShortcut) {
+      & :where(.kui-SidebarMenuShortcut) {
         color: inherit;
       }
     }
@@ -100,19 +100,19 @@
 }
 
 /* Sidebar Menu Sub Components - Radix Accordion */
-.rt-SidebarMenuSubTrigger {
+.kui-SidebarMenuSubTrigger {
   justify-content: space-between;
 }
 
 /* Accordion trigger icon rotation */
-.rt-SidebarMenuSubTrigger {
+.kui-SidebarMenuSubTrigger {
 
-  &:where([data-state='open']) :where(.rt-SidebarMenuSubTriggerIcon) {
+  &:where([data-state='open']) :where(.kui-SidebarMenuSubTriggerIcon) {
     transform: rotate(90deg);
   }
 }
 
-.rt-SidebarMenuSubContent {
+.kui-SidebarMenuSubContent {
   overflow: hidden;
 
   /* Allow focus outlines to show */
@@ -123,13 +123,13 @@
   /* Radix Accordion animation support */
 }
 
-.rt-SidebarMenuSubList {
+.kui-SidebarMenuSubList {
   padding-inline-start: var(--space-5);
-  border-inline-start: 1px solid var(--gray-a5);
+  border-inline-start: 1px solid var(--neutral-a5);
   margin-inline-start: var(--space-4);
 }
 
-.rt-SidebarGroupLabel {
+.kui-SidebarGroupLabel {
   /* Inherit all BaseMenuLabel styles */
   display: flex;
   align-items: center;
@@ -140,30 +140,30 @@
   padding-inline-end: var(--base-menu-item-padding-right);
   box-sizing: border-box;
   /* a11 keeps the label above 4.5:1 on every sidebar background. */
-  color: var(--gray-a11);
+  color: var(--neutral-a11);
   user-select: none;
   cursor: default;
 
   /* After items, the extra air is inside the label's own box - identical to BaseMenuLabel */
-  :where(.rt-SidebarMenuItem) + & {
+  :where(.kui-SidebarMenuItem) + & {
     min-height: calc(var(--base-menu-item-height) + var(--space-3));
     padding-top: calc(var(--base-menu-item-padding-y) + var(--space-3));
   }
 }
 
-.rt-SidebarMenuShortcut {
+.kui-SidebarMenuShortcut {
   display: flex;
   align-items: center;
   margin-inline-start: auto;
   padding-inline-start: var(--space-5);
-  color: var(--gray-a11);
+  color: var(--neutral-a11);
 }
 
 /*
  * A trailing badge sits the row's inset from the far edge, like a shortcut. A badge is taller
  * than the line, so it may spend the row's block insets rather than grow the row past its height.
  */
-.rt-SidebarMenuBadge {
+.kui-SidebarMenuBadge {
   display: flex;
   align-items: center;
   margin-inline-start: auto;
@@ -174,14 +174,14 @@
 }
 
 /* Add balanced spacing for sidebar menu items while preserving base menu border radius */
-.rt-SidebarContent :where(.rt-BaseMenuItem) {
+.kui-SidebarContent :where(.kui-BaseMenuItem) {
   margin-top: 1px;
   margin-bottom: 1px;
 }
 
 /* Add same balanced spacing for submenu items */
 /* stylelint-disable-next-line selector-max-specificity */
-.rt-SidebarContent :where(.rt-SidebarMenuSubList) .rt-SidebarMenuButton {
+.kui-SidebarContent :where(.kui-SidebarMenuSubList) .kui-SidebarMenuButton {
   margin-top: 1px;
   margin-bottom: 1px;
 }

package/src/components/_internal/base-sidebar.css

@@ -2,7 +2,6 @@
   Base Sidebar Layout and Container Styles
   - Slot containers: Root, Container, Header, Content, Footer, Separator
   - No visual variants here; only structure and slot-level primitives
-  - Shared tokens defined/consumed: --sidebar-base-border-radius, etc.
 */
 
 /* Removed Sidebar Provider (unused) */
@@ -10,15 +9,14 @@
 /* Sidebar Root Container */
 /* Sidebar Container */
 /* Sidebar Header */
-.rt-SidebarHeader {
+.kui-SidebarHeader {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  border-radius: var(--sidebar-base-border-radius) var(--sidebar-base-border-radius) 0 0;
 }
 
-/* Sidebar Content - based on rt-BaseMenuContent */
-.rt-SidebarContent {
+/* Sidebar Content - based on kui-BaseMenuContent */
+.kui-SidebarContent {
   --scrollarea-scrollbar-vertical-margin-top: var(--base-menu-content-padding);
   --scrollarea-scrollbar-vertical-margin-bottom: var(--base-menu-content-padding);
   --scrollarea-scrollbar-horizontal-margin-left: var(--base-menu-content-padding);
@@ -41,20 +39,20 @@
 
   /* Add gap between groups using flex */
   /* stylelint-disable-next-line selector-max-specificity */
-  & .rt-BaseMenuViewport {
+  & .kui-BaseMenuViewport {
     /* gap: var(--base-menu-content-padding); */
     gap: var(--space-6);
   }
 
   /* Ensure ScrollArea takes full height within SidebarContent */
-  & :where(.rt-ScrollAreaRoot) {
+  & :where(.kui-ScrollAreaRoot) {
     flex: 1;
     display: flex;
     flex-direction: column;
     min-height: 0;
   }
 
-  & :where(.rt-ScrollAreaViewport) {
+  & :where(.kui-ScrollAreaViewport) {
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -62,22 +60,21 @@
   }
 
   /* Isolate painting to prevent cross-layer nudges */
-  & :where(.rt-BaseMenuViewport) {
+  & :where(.kui-BaseMenuViewport) {
     contain: paint;
   }
 }
 
 /* Sidebar Footer */
-.rt-SidebarFooter {
+.kui-SidebarFooter {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   margin-top: auto;
-  border-radius: 0 0 var(--sidebar-base-border-radius) var(--sidebar-base-border-radius);
 }
 
 /* Sidebar Separator - ensure full width and proper spacing */
-.rt-SidebarSeparator {
+.kui-SidebarSeparator {
   width: 100%;
   margin: var(--space-3) 0;
 }

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

@@ -1,4 +1,4 @@
-.rt-BaseTabList {
+.kui-BaseTabList {
   display: flex;
   justify-content: flex-start;
   overflow-x: auto;
@@ -14,7 +14,7 @@
   }
 }
 
-.rt-BaseTabListTrigger {
+.kui-BaseTabListTrigger {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -24,23 +24,23 @@
   scroll-behavior: smooth;
 }
 
-.rt-BaseTabListTriggerInner,
-.rt-BaseTabListTriggerInnerHidden {
+.kui-BaseTabListTriggerInner,
+.kui-BaseTabListTriggerInnerHidden {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.rt-BaseTabListTriggerInner {
+.kui-BaseTabListTriggerInner {
   position: absolute;
 
-  :where(.rt-BaseTabListTrigger[data-state='inactive']) & {
+  :where(.kui-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']) & {
+  :where(.kui-BaseTabListTrigger[data-state='active']) & {
     font-weight: var(--font-weight-medium);
     letter-spacing: var(--tab-active-letter-spacing);
     word-spacing: var(--tab-active-word-spacing);
@@ -48,7 +48,7 @@
   }
 }
 
-.rt-BaseTabListTriggerInnerHidden {
+.kui-BaseTabListTriggerInnerHidden {
   visibility: hidden;
   font-weight: var(--font-weight-medium);
   letter-spacing: var(--tab-active-letter-spacing);
@@ -65,22 +65,22 @@
  * Height is the control ladder. The hover pill pads by --control-px-N; half a control gap on each
  * side of it sets neighbouring pills one --control-gap-N apart.
  */
-.rt-BaseTabListTrigger {
+.kui-BaseTabListTrigger {
   box-sizing: border-box;
   height: var(--tab-height);
   padding-inline: var(--tab-padding-x);
 }
 
-.rt-BaseTabListTriggerInner,
-.rt-BaseTabListTriggerInnerHidden {
+.kui-BaseTabListTriggerInner,
+.kui-BaseTabListTriggerInnerHidden {
   box-sizing: border-box;
   padding: var(--tab-inner-padding-y) var(--tab-inner-padding-x);
   border-radius: var(--tab-inner-border-radius);
 }
 
 @breakpoints {
-  .rt-BaseTabList {
-    &:where(.rt-r-size-1) {
+  .kui-BaseTabList {
+    &:where(.kui-r-size-1) {
       font-size: var(--font-size-1);
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
@@ -97,11 +97,11 @@
         height: var(--icon-size-1);
       }
 
-      & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
+      & :where(.kui-BaseTabListTriggerInner, .kui-BaseTabListTriggerInnerHidden) {
         gap: var(--control-gap-1);
       }
     }
-    &:where(.rt-r-size-2) {
+    &:where(.kui-r-size-2) {
       font-size: var(--font-size-2);
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
@@ -118,11 +118,11 @@
         height: var(--icon-size-2);
       }
 
-      & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
+      & :where(.kui-BaseTabListTriggerInner, .kui-BaseTabListTriggerInnerHidden) {
         gap: var(--control-gap-2);
       }
     }
-    &:where(.rt-r-size-3) {
+    &:where(.kui-r-size-3) {
       font-size: var(--font-size-3);
       line-height: var(--line-height-3);
       letter-spacing: var(--letter-spacing-3);
@@ -139,11 +139,11 @@
         height: var(--icon-size-3);
       }
 
-      & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
+      & :where(.kui-BaseTabListTriggerInner, .kui-BaseTabListTriggerInnerHidden) {
         gap: var(--control-gap-3);
       }
     }
-    &:where(.rt-r-size-4) {
+    &:where(.kui-r-size-4) {
       font-size: var(--font-size-4);
       line-height: var(--line-height-4);
       letter-spacing: var(--letter-spacing-4);
@@ -160,7 +160,7 @@
         height: var(--icon-size-4);
       }
 
-      & :where(.rt-BaseTabListTriggerInner, .rt-BaseTabListTriggerInnerHidden) {
+      & :where(.kui-BaseTabListTriggerInner, .kui-BaseTabListTriggerInnerHidden) {
         gap: var(--control-gap-4);
       }
     }
@@ -173,33 +173,33 @@
  *                                                                                                 *
  ***************************************************************************************************/
 
-.rt-BaseTabList {
-  box-shadow: inset 0 calc(-1 * var(--border-width-standard)) 0 0 var(--gray-a5);
+.kui-BaseTabList {
+  box-shadow: inset 0 calc(-1 * var(--border-width-standard)) 0 0 var(--neutral-a5);
 }
 
-.rt-BaseTabListTrigger {
-  color: var(--gray-a11);
+.kui-BaseTabListTrigger {
+  color: var(--neutral-a11);
 
   @media (hover: hover) {
     &:where(:hover) {
-      color: var(--gray-12);
+      color: var(--neutral-12);
     }
-    &:where(:hover) :where(.rt-BaseTabListTriggerInner) {
-      background-color: var(--gray-a3);
+    &:where(:hover) :where(.kui-BaseTabListTriggerInner) {
+      background-color: var(--neutral-a3);
     }
-    &:where(:focus-visible:hover) :where(.rt-BaseTabListTriggerInner) {
+    &:where(:focus-visible:hover) :where(.kui-BaseTabListTriggerInner) {
       background-color: var(--accent-a3);
     }
   }
   /* Hover is one step up, press two. */
-  &:where(:active:not([data-disabled])) :where(.rt-BaseTabListTriggerInner) {
-    background-color: var(--gray-a4);
+  &:where(:active:not([data-disabled])) :where(.kui-BaseTabListTriggerInner) {
+    background-color: var(--neutral-a4);
   }
   &:where([data-state='active'], [data-active]) {
-    color: var(--gray-12);
+    color: var(--neutral-12);
   }
   /* Drawn inside the trigger: the scrolling list clips anything outside it. */
-  &:where(:focus-visible) :where(.rt-BaseTabListTriggerInner) {
+  &:where(:focus-visible) :where(.kui-BaseTabListTriggerInner) {
     outline: var(--focus-ring-width, 2px) solid var(--focus-8);
     outline-offset: var(--focus-outline-offset-inset);
     scroll-margin: var(--space-3);
@@ -219,22 +219,22 @@
 
 /* Forced colors support */
 @media (forced-colors: active) {
-  .rt-BaseTabListTrigger:where([data-state='active'])::before {
+  .kui-BaseTabListTrigger:where([data-state='active'])::before {
     background-color: Highlight;
   }
 
-  .rt-BaseTabListTrigger:where(:focus-visible) :where(.rt-BaseTabListTriggerInner) {
+  .kui-BaseTabListTrigger:where(:focus-visible) :where(.kui-BaseTabListTriggerInner) {
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
 }
 
 /* Disabled: the same treatment as a disabled menu item, a colour remap with no opacity. It keeps no hover or press fill. */
-.rt-BaseTabListTrigger:where([data-disabled]) {
-  color: var(--gray-a8);
+.kui-BaseTabListTrigger:where([data-disabled]) {
+  color: var(--neutral-a8);
   cursor: default;
 
-  & :where(.rt-BaseTabListTriggerInner) {
+  & :where(.kui-BaseTabListTriggerInner) {
     background-color: transparent;
   }
 }

package/src/components/_internal/base-tab-list.props.ts

@@ -7,16 +7,16 @@ const wrapValues = ['nowrap', 'wrap', 'wrap-reverse'] as const;
 const justifyValues = ['start', 'center', 'end'] as const;
 
 const baseTabListPropDefs = {
-  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
+  size: { type: 'enum', className: 'kui-r-size', values: sizes, default: '2', responsive: true },
   wrap: {
     type: 'enum',
-    className: 'rt-r-fw',
+    className: 'kui-r-fw',
     values: wrapValues,
     responsive: true,
   },
   justify: {
     type: 'enum',
-    className: 'rt-r-jc',
+    className: 'kui-r-jc',
     values: justifyValues,
     responsive: true,
   },

package/src/components/_internal/dropdown-menu-drill-down.tsx

@@ -45,7 +45,7 @@ interface DrillDownState {
 const INITIAL_STATE: DrillDownState = { stack: [], direction: null, lastChange: null };
 
 const PANEL_ITEM_SELECTOR = '[role^="menuitem"]:not([data-disabled])';
-const BACK_ITEM_CLASS = 'rt-DropdownMenuDrillDownBackItem';
+const BACK_ITEM_CLASS = 'kui-DropdownMenuDrillDownBackItem';
 
 function escapeAttributeValue(value: string) {
   return value.replace(/["\\]/g, '\\$&');
@@ -91,8 +91,8 @@ class DrillDownStore {
     const root = this.rootElement;
     if (!root) return null;
     return (
-      root.closest<HTMLElement>('.rt-ScrollAreaViewport') ??
-      root.closest<HTMLElement>('.rt-BaseMenuViewport')
+      root.closest<HTMLElement>('.kui-ScrollAreaViewport') ??
+      root.closest<HTMLElement>('.kui-BaseMenuViewport')
     );
   }
 
@@ -272,7 +272,7 @@ function DrillDownRoot({ store, behavior, open, children }: DrillDownRootProps)
       {/* Event capture only records the input modality; it does not handle interaction. */}
       <div
         ref={rootRef}
-        className="rt-DropdownMenuDrillDownRoot"
+        className="kui-DropdownMenuDrillDownRoot"
         data-submenu-behavior={behavior}
         data-drill-down-active={isRoot ? undefined : true}
         data-animation-direction={isDrillDown ? (direction ?? undefined) : undefined}

package/src/components/_internal/pane-chrome.tsx

@@ -49,7 +49,7 @@ function useChromeClasses() {
   const shellSize = React.useContext(ShellSizeContext);
   const size = visual?.size ?? shellSize;
   const menuVariant = visual?.menuVariant ?? 'soft';
-  return ['rt-ShellPaneChrome', `rt-r-size-${size}`, `rt-menu-variant-${menuVariant}`];
+  return ['kui-ShellPaneChrome', `kui-r-size-${size}`, `kui-menu-variant-${menuVariant}`];
 }
 
 type BandSize = '1' | '2' | '3' | '4';
@@ -92,7 +92,7 @@ const PaneHeader = React.forwardRef<HTMLDivElement, PaneHeaderProps>(({ classNam
       {...props}
       ref={forwardedRef}
       data-float={float || undefined}
-      className={classNames('rt-ShellPaneHeader', 'rt-SidebarHeader', 'rt-SidebarHeader--container', ...chrome, className)}
+      className={classNames('kui-ShellPaneHeader', 'kui-SidebarHeader', 'kui-SidebarHeader--container', ...chrome, className)}
     >
       <PaneBandSizeContext.Provider value={band}>{children}</PaneBandSizeContext.Provider>
     </div>
@@ -114,7 +114,7 @@ const PaneFooter = React.forwardRef<HTMLDivElement, PaneFooterProps>(({ classNam
       {...props}
       ref={forwardedRef}
       data-float={float || undefined}
-      className={classNames('rt-ShellPaneFooter', 'rt-SidebarFooter', 'rt-SidebarFooter--container', ...chrome, className)}
+      className={classNames('kui-ShellPaneFooter', 'kui-SidebarFooter', 'kui-SidebarFooter--container', ...chrome, className)}
     >
       <PaneBandSizeContext.Provider value={band}>{children}</PaneBandSizeContext.Provider>
     </div>
@@ -134,11 +134,11 @@ interface ScrollProps extends React.ComponentPropsWithoutRef<'div'> {
 const Scroll = React.forwardRef<HTMLDivElement, ScrollProps>(({ className, children, fade = false, ...props }, forwardedRef) => {
   const chrome = useChromeClasses();
   return (
-    <ScrollArea type="hover" fade={fade} className="rt-ShellScroll">
-      <div {...props} ref={forwardedRef} className={classNames('rt-BaseMenuContent', 'rt-SidebarContent', ...chrome, className)}>
+    <ScrollArea type="hover" fade={fade} className="kui-ShellScroll">
+      <div {...props} ref={forwardedRef} className={classNames('kui-BaseMenuContent', 'kui-SidebarContent', ...chrome, className)}>
         {/* A header's band does not reach a Toolbar in the scrolling list. */}
         <PaneBandSizeContext.Provider value={null}>
-          <div className="rt-BaseMenuViewport">{children}</div>
+          <div className="kui-BaseMenuViewport">{children}</div>
         </PaneBandSizeContext.Provider>
       </div>
     </ScrollArea>

package/src/components/_internal/shell-bottom.tsx

@@ -132,7 +132,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
       {...withoutRemovedPaneProps(domProps)}
       id={pane.id}
       ref={composedRef}
-      className={classNames('rt-ShellPane', 'rt-ShellBottom', className)}
+      className={classNames('kui-ShellPane', 'kui-ShellBottom', className)}
       {...paneAttributes(pane, attributes)}
       data-inset={inset || undefined}
       tabIndex={pane.overlaying ? -1 : domProps.tabIndex}
@@ -145,7 +145,7 @@ export const Bottom = React.forwardRef<HTMLDivElement, BottomPublicProps>((props
         } as CSSPropertiesWithVars
       }
     >
-      <div className="rt-ShellBottomContent">{content}</div>
+      <div className="kui-ShellBottomContent">{content}</div>
       {handle}
     </div>
   );

package/src/components/_internal/shell-handles.tsx

@@ -72,7 +72,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
   const ceiling = React.useCallback(() => {
     const container = containerRef.current;
     const handle = handleRef.current;
-    const frame = container?.closest('.rt-ShellRoot')?.getBoundingClientRect();
+    const frame = container?.closest('.kui-ShellRoot')?.getBoundingClientRect();
     if (!container || !frame || !handle) return maxSize;
     const pane = container.getBoundingClientRect();
     const hitBox = handle.getBoundingClientRect();
@@ -108,7 +108,7 @@ export const PaneHandle = React.forwardRef<HTMLDivElement, React.ComponentPropsW
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <div
       ref={setRef}
-      className={classNames('rt-ShellResizer', className)}
+      className={classNames('kui-ShellResizer', className)}
       data-orientation={orientation}
       data-edge={edge}
       role="separator"

package/src/components/_internal/shell-inspector.tsx

@@ -134,7 +134,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
       {...withoutRemovedPaneProps(domProps)}
       id={pane.id}
       ref={composedRef}
-      className={classNames('rt-ShellPane', 'rt-ShellInspector', className)}
+      className={classNames('kui-ShellPane', 'kui-ShellInspector', className)}
       {...paneAttributes(pane, attributes)}
       data-inset={inset || undefined}
       tabIndex={pane.overlaying ? -1 : domProps.tabIndex}
@@ -147,7 +147,7 @@ export const Inspector = React.forwardRef<HTMLDivElement, InspectorPublicProps>(
         } as CSSPropertiesWithVars
       }
     >
-      <div className="rt-ShellInspectorContent">{content}</div>
+      <div className="kui-ShellInspectorContent">{content}</div>
       {handle}
     </div>
   );

package/src/components/_internal/shell-resizable.tsx

@@ -102,7 +102,7 @@ export function useResizablePane(options: ResizableOptions): PaneResizeContextVa
       const el = elementRef.current;
       if (!el) return;
       el.style.setProperty(cssVarName, `${value}px`);
-      for (const handle of el.querySelectorAll(':scope > .rt-ShellResizer')) handle.setAttribute('aria-valuenow', String(Math.round(value)));
+      for (const handle of el.querySelectorAll(':scope > .kui-ShellResizer')) handle.setAttribute('aria-valuenow', String(Math.round(value)));
       if (own) ownedRef.current = true;
     },
     [elementRef, cssVarName],

package/src/components/_internal/shell-sidebar.tsx

@@ -153,7 +153,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
       {...withoutRemovedPaneProps(domProps)}
       id={pane.id}
       ref={composedRef}
-      className={classNames('rt-ShellPane', 'rt-ShellSidebar', className)}
+      className={classNames('kui-ShellPane', 'kui-ShellSidebar', className)}
       {...paneAttributes(pane, attributes)}
       data-inset={inset || undefined}
       tabIndex={pane.overlaying ? -1 : domProps.tabIndex}
@@ -167,7 +167,7 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarPublicProps>((pro
         } as CSSPropertiesWithVars
       }
     >
-      <div className="rt-ShellSidebarContent">
+      <div className="kui-ShellSidebarContent">
         <PaneChromeScope>{content}</PaneChromeScope>
       </div>
       {handle}