@kushagradhawan/kookie-ui 0.1.49 → 0.1.50

package/schemas/index.json

@@ -3,7 +3,7 @@
   "title": "Kookie UI Button Components",
   "description": "Complete JSON Schema collection for all button components in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-11T22:13:16.362Z",
+  "generatedAt": "2025-09-12T18:14:42.772Z",
   "source": "Zod schemas",
   "components": {
     "base-button": {
@@ -287,7 +287,7 @@
       "title": "Base-button Component Props",
       "description": "Props schema for the base-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-11T22:13:16.352Z",
+      "generatedAt": "2025-09-12T18:14:42.763Z",
       "source": "Zod schema"
     },
     "button": {
@@ -822,7 +822,7 @@
       "title": "Button Component Props",
       "description": "Props schema for the button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-11T22:13:16.358Z",
+      "generatedAt": "2025-09-12T18:14:42.768Z",
       "source": "Zod schema"
     },
     "icon-button": {
@@ -1140,7 +1140,7 @@
       "title": "Icon-button Component Props",
       "description": "Props schema for the icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-11T22:13:16.359Z",
+      "generatedAt": "2025-09-12T18:14:42.770Z",
       "source": "Zod schema"
     },
     "toggle-button": {
@@ -1683,7 +1683,7 @@
       "title": "Toggle-button Component Props",
       "description": "Props schema for the toggle-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-11T22:13:16.360Z",
+      "generatedAt": "2025-09-12T18:14:42.771Z",
       "source": "Zod schema"
     },
     "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
       "title": "Toggle-icon-button Component Props",
       "description": "Props schema for the toggle-icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2025-09-11T22:13:16.361Z",
+      "generatedAt": "2025-09-12T18:14:42.772Z",
       "source": "Zod schema"
     }
   }

package/schemas/toggle-button.json

@@ -538,6 +538,6 @@
   "title": "Toggle-button Component Props",
   "description": "Props schema for the toggle-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-11T22:13:16.360Z",
+  "generatedAt": "2025-09-12T18:14:42.771Z",
   "source": "Zod schema"
 }

package/schemas/toggle-icon-button.json

@@ -321,6 +321,6 @@
   "title": "Toggle-icon-button Component Props",
   "description": "Props schema for the toggle-icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2025-09-11T22:13:16.361Z",
+  "generatedAt": "2025-09-12T18:14:42.772Z",
   "source": "Zod schema"
 }

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

@@ -165,7 +165,7 @@
       --base-menu-content-padding: var(--space-2);
       --base-menu-item-padding-left: calc(var(--space-5) / 1.2);
       --base-menu-item-padding-right: var(--space-2);
-      --base-menu-item-padding-y: calc(var(--space-1) * 0.75);
+      --base-menu-item-padding-y: var(--space-2);
       --base-menu-item-height: var(--space-5);
       border-radius: var(--radius-3);
 
@@ -209,7 +209,7 @@
       --base-menu-content-padding: var(--space-3);
       --base-menu-item-padding-left: var(--space-3);
       --base-menu-item-padding-right: var(--space-3);
-      --base-menu-item-padding-y: var(--space-1);
+      --base-menu-item-padding-y: var(--space-2);
       --base-menu-item-height: var(--space-6);
       border-radius: var(--radius-5);
 
@@ -253,7 +253,7 @@
       --base-menu-content-padding: var(--space-3);
       --base-menu-item-padding-left: var(--space-3);
       --base-menu-item-padding-right: var(--space-3);
-      --base-menu-item-padding-y: var(--space-1);
+      --base-menu-item-padding-y: var(--space-2);
       --base-menu-item-height: var(--space-6);
       border-radius: var(--radius-6);
 
@@ -311,8 +311,7 @@
 }
 
 /* Ensure gray text appears muted in non-highlighted state */
-.rt-BaseMenuItem
-  :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
+.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
   color: var(--gray-a10);
 }
 .rt-BaseMenuItem:where([data-disabled], [data-highlighted]),

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

@@ -10,7 +10,6 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding-bottom: var(--base-menu-content-padding);
   box-sizing: border-box;
   list-style: none;
   margin: 0;

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

@@ -78,6 +78,13 @@
   box-shadow: none !important;
   border-radius: 0 !important;
 
+  /* Add gap between groups using flex */
+  /* stylelint-disable-next-line selector-max-specificity */
+  & .rt-BaseMenuViewport {
+    /* gap: var(--base-menu-content-padding); */
+    gap: var(--space-5);
+  }
+
   /* Ensure ScrollArea takes full height within SidebarContent */
   & :where(.rt-ScrollAreaRoot) {
     flex: 1;

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

@@ -86,6 +86,29 @@ export const Sidebar = React.forwardRef<
     const resolvedPresentation = useResponsivePresentation(presentation);
     const isOverlay = resolvedPresentation === 'overlay';
     const isStacked = resolvedPresentation === 'stacked';
+    // Use library-managed phase for thin ↔ expanded sequencing
+    const transitionPhase = (shell as any).sidebarPhase as 'idle' | 'hiding' | 'resizing' | 'showing' | undefined;
+    React.useLayoutEffect(() => {
+      if (isOverlay) return;
+      const containerEl = localRef.current;
+      if (!containerEl) return;
+      if (transitionPhase === 'hiding') {
+        // Freeze width while we fade out
+        try {
+          const rect = containerEl.getBoundingClientRect();
+          containerEl.style.width = `${Math.round(rect.width)}px`;
+        } catch {}
+      } else if (transitionPhase === 'resizing') {
+        // Release width so the CSS width transition happens
+        try {
+          containerEl.style.removeProperty('width');
+        } catch {}
+      } else if (transitionPhase === 'idle') {
+        try {
+          containerEl.style.removeProperty('width');
+        } catch {}
+      }
+    }, [transitionPhase, isOverlay]);
     const localRef = React.useRef<HTMLDivElement | null>(null);
     const setRef = React.useCallback(
       (node: HTMLDivElement | null) => {
@@ -334,7 +357,7 @@ export const Sidebar = React.forwardRef<
             : {}),
         }}
       >
-        <div className="rt-ShellSidebarContent" data-visible={isContentVisible || undefined}>
+        <div className="rt-ShellSidebarContent" data-visible={isContentVisible || undefined} data-phase={transitionPhase && transitionPhase !== 'idle' ? transitionPhase : undefined}>
           {contentChildren}
         </div>
         {handleEl}

package/src/components/shell.context.tsx

@@ -20,6 +20,9 @@ export interface ShellContextValue {
   peekPane: (target: PaneTarget) => void;
   clearPeek: () => void;
 
+  // Sidebar presentation sequencing phase (library-managed)
+  sidebarPhase?: 'idle' | 'hiding' | 'resizing' | 'showing';
+
   // Composition detection
   hasLeft: boolean;
   setHasLeft: (has: boolean) => void;

package/src/components/shell.css

@@ -74,6 +74,8 @@
 
 .rt-ShellRail[data-mode='collapsed'] {
   width: 0px;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 /* Keep collapsed panes out of flow to avoid layout blips when exiting peek */
@@ -128,6 +130,8 @@
 
 .rt-ShellPanel:not([data-visible]) {
   width: 0px;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 /* Keep collapsed panel out of flow to avoid layout blips when exiting peek */
@@ -188,6 +192,8 @@
 
 .rt-ShellSidebar[data-mode='collapsed'] {
   width: 0px;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 /* Keep collapsed sidebar out of flow to avoid layout blips when exiting peek */
@@ -218,6 +224,22 @@
   opacity: 1;
 }
 
+/* Sidebar presentation switch sequencing (thin ↔ expanded) */
+.rt-ShellSidebarContent[data-phase='hiding'] {
+  /* Immediately fade out */
+  opacity: 0;
+  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+.rt-ShellSidebarContent[data-phase='resizing'] {
+  /* Keep hidden during width transition */
+  opacity: 0;
+}
+.rt-ShellSidebarContent[data-phase='showing'] {
+  /* Fade back in after width settles */
+  opacity: 1;
+  transition: opacity var(--motion-duration-small) var(--motion-ease-standard);
+}
+
 .rt-ShellSidebar[data-mode='collapsed'] .rt-ShellSidebarContent {
   /* Exit animation: fade out content first */
   opacity: 0;
@@ -274,6 +296,8 @@
 
 .rt-ShellInspector[data-mode='collapsed'] {
   width: 0px;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 .rt-ShellInspector[data-mode='collapsed'] {
@@ -327,6 +351,8 @@
   position: absolute;
   inset-inline: 0;
   inset-block-end: 0;
+  /* Delay container collapse until content fade completes */
+  transition-delay: var(--motion-duration-small);
 }
 
 .rt-ShellBottomContent {
@@ -537,13 +563,14 @@
   box-shadow: 0 -4px 8px -4px rgba(0, 0, 0, 0.15);
 }
 
-/* Force content visible during peek */
+/* Peek: expand container first, then fade content in */
 .rt-ShellRail[data-peek] .rt-ShellRailContent,
 .rt-ShellPanel[data-peek] .rt-ShellPanelContent,
 .rt-ShellSidebar[data-peek] .rt-ShellSidebarContent,
 .rt-ShellInspector[data-peek] .rt-ShellInspectorContent,
 .rt-ShellBottom[data-peek] .rt-ShellBottomContent {
   opacity: 1;
+  transition-delay: var(--motion-duration-small);
 }
 
 /* Rail peek: left edge */

package/src/components/shell.tsx

@@ -99,6 +99,8 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
   const [leftMode, setLeftMode] = React.useState<PaneMode>('collapsed');
   const [panelMode, setPanelMode] = React.useState<PaneMode>('collapsed');
   const [sidebarMode, setSidebarMode] = React.useState<SidebarMode>('expanded');
+  // Library-managed phase for sidebar presentation changes (thin ↔ expanded)
+  const [sidebarPhase, setSidebarPhase] = React.useState<'idle' | 'hiding' | 'resizing' | 'showing'>('idle');
   const [inspectorMode, setInspectorMode] = React.useState<PaneMode>('collapsed');
   const [bottomMode, setBottomMode] = React.useState<PaneMode>('collapsed');
 
@@ -169,9 +171,26 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
             setPanelMode((prev) => (prev === 'expanded' ? 'collapsed' : 'expanded'));
           }
           break;
-        case 'sidebar':
-          setSidebarMode((prev) => sidebarToggleComputerRef.current(prev as SidebarMode));
+        case 'sidebar': {
+          // Orchestrate thin ↔ expanded sequencing: fade out → change mode → fade in
+          const next = sidebarToggleComputerRef.current(sidebarMode as SidebarMode);
+          const isWidthOnlyChange = sidebarMode !== next && sidebarMode !== 'collapsed' && next !== 'collapsed';
+          if (!isWidthOnlyChange) {
+            setSidebarMode(next);
+            break;
+          }
+          const SMALL_MS = 150;
+          setSidebarPhase('hiding');
+          window.setTimeout(() => {
+            setSidebarPhase('resizing');
+            setSidebarMode(next);
+            window.setTimeout(() => {
+              setSidebarPhase('showing');
+              window.setTimeout(() => setSidebarPhase('idle'), SMALL_MS);
+            }, SMALL_MS);
+          }, SMALL_MS);
           break;
+        }
         case 'inspector':
           setInspectorMode((prev) => (prev === 'expanded' ? 'collapsed' : 'expanded'));
           break;
@@ -180,7 +199,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
           break;
       }
     },
-    [leftMode],
+    [leftMode, sidebarMode],
   );
 
   const expandPane = React.useCallback((target: PaneTarget) => {
@@ -238,6 +257,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
       setInspectorMode,
       bottomMode,
       setBottomMode,
+      sidebarPhase,
       hasLeft,
       setHasLeft,
       hasSidebar,
@@ -259,6 +279,7 @@ const Root = React.forwardRef<HTMLDivElement, ShellRootProps>(({ className, chil
       sidebarMode,
       inspectorMode,
       bottomMode,
+      sidebarPhase,
       hasLeft,
       hasSidebar,
       currentBreakpoint,

package/src/components/sidebar.css

@@ -19,55 +19,252 @@
 */
 
 /* Rail Layout Styling */
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarContent),
-.rt-ShellSidebarRail :where(.rt-SidebarContent),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarContent) {
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent) {
   padding: var(--space-2);
 }
 
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuButton),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuButton),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuButton) {
-  justify-content: center;
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuViewport) {
+  padding: var(--space-2) !important;
+}
+
+/* Enforce vertical stack and compact typography for all buttons in thin mode */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent) :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+  justify-content: center !important;
+  align-items: center !important;
+  flex-direction: column !important;
+  gap: var(--space-1) !important;
+  text-align: center !important;
+  font-size: var(--font-size-0) !important;
+  line-height: var(--line-height-0) !important;
+  padding-top: var(--space-2) !important;
+  padding-bottom: var(--space-2) !important;
+  padding-left: var(--space-1) !important;
+  padding-right: var(--space-1) !important;
+}
+
+/* Consolidated thin mode size blocks */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-1) {
+  /* Horizontal padding tokens to free space for text */
+  --base-menu-item-padding-left: var(--space-1) !important;
+  --base-menu-item-padding-right: var(--space-1) !important;
+  /* Unify vertical padding via tokens (used by BaseMenuItem) */
+  --base-menu-item-padding-y: var(--space-2) !important;
+
+  /* Override BaseMenu left padding resets */
+  &:where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+  }
+  &:where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+  }
+
+  /* Button and subtrigger layout */
+  :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--space-1);
+    text-align: center;
+    font-size: var(--font-size-0);
+    line-height: var(--line-height-0);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  /* Icon sizing */
+  /* stylelint-disable-next-line selector-max-type */
+  :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) :where(svg) {
+    width: var(--content-icon-size-3);
+    height: var(--content-icon-size-3);
+  }
+}
+
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-2) {
+  --base-menu-item-padding-left: var(--space-1) !important;
+  --base-menu-item-padding-right: var(--space-1) !important;
+  --base-menu-item-padding-y: var(--space-2) !important;
+
+  &:where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+  }
+  &:where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+  }
+
+  :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--space-1);
+    text-align: center;
+    font-size: var(--font-size-0);
+    line-height: var(--line-height-0);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  /* stylelint-disable-next-line selector-max-type */
+  :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) :where(svg) {
+    width: var(--content-icon-size-4);
+    height: var(--content-icon-size-4);
+  }
+}
+
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-r-size-3) {
+  --base-menu-item-padding-left: var(--space-1) !important;
+  --base-menu-item-padding-right: var(--space-1) !important;
+  --base-menu-item-padding-y: var(--space-2) !important;
+
+  &:where(:not(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem))) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+  }
+  &:where(:has(.rt-BaseMenuCheckboxItem, .rt-BaseMenuRadioItem)) {
+    --base-menu-item-padding-left: var(--space-1) !important;
+  }
+
+  :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) {
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--space-1);
+    text-align: center;
+    font-size: var(--font-size-0);
+    line-height: var(--line-height-0);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  /* stylelint-disable-next-line selector-max-type */
+  :where(.rt-SidebarMenuButton, .rt-SidebarMenuSubTrigger) :where(svg) {
+    width: var(--content-icon-size-5);
+    height: var(--content-icon-size-5);
+  }
+}
+
+/* Ellipsis on root child content when using asChild (e.g., Next.js Link) */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton > *) {
+  display: flex;
+  flex-direction: column;
   align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Ensure submenu trigger asChild containers also stack vertically */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubTrigger > *) {
+  display: flex;
   flex-direction: column;
-  gap: var(--space-1);
-  padding: var(--space-2) var(--space-1);
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+/* stylelint-disable-next-line selector-max-type */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton > * > svg) {
+  flex-shrink: 0;
 }
 
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuBadge),
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuShortcut),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuBadge),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuShortcut),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuBadge),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuShortcut) {
-  display: none;
+/* Ensure submenu anchors also truncate */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent .rt-SidebarMenuButton > *) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  min-width: 0;
+}
+
+/* Ensure icons remain visible at their token sizes in thin mode */
+/* stylelint-disable-next-line selector-max-type */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton) :where(svg) {
+  /* svg size is already controlled by tokens; this ensures layout stability */
+  display: block;
 }
 
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarGroupLabel),
-.rt-ShellSidebarRail :where(.rt-SidebarGroupLabel),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarGroupLabel) {
+/* Truncate labels inside an explicit label span */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton .rt-SidebarMenuLabel) {
   display: block;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   text-align: center;
+  color: var(--accent-11);
   font-size: var(--font-size-0);
   line-height: var(--line-height-0);
-  color: var(--gray-a9);
-  font-weight: var(--font-weight-medium);
+}
+
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuBadge),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuShortcut),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-Badge),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-Kbd) {
+  display: none !important;
+}
+
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarGroupLabel) {
+  display: none !important;
 }
 
 /* Hide submenu chevrons and flatten sublists in rail */
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuSubTriggerIcon),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuSubTriggerIcon),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubTriggerIcon) {
-  display: none;
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubTriggerIcon),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubTriggerIcon) {
+  display: none !important;
+}
+
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubList),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubList) {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+  border-left: 0 !important;
+  border-top: 0 !important;
+  border-bottom: 0 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+/* Also remove any decorative rule on the submenu list in thin mode */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubList::before),
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-BaseMenuSubList::before) {
+  content: none !important;
+  display: none !important;
+}
+
+/* Ensure the Accordion content wrapper doesn't add indentation */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent) {
+  padding-left: 0 !important;
+  margin-left: 0 !important;
+  border-left: 0 !important;
+  border-top: 1px solid var(--gray-a6) !important;
+  border-bottom: 1px solid var(--gray-a6) !important;
+  margin-top: var(--space-2) !important;
+  margin-bottom: var(--space-2) !important;
+  /* background-color: var(--accent-3); */
 }
 
-:where(.rt-SidebarContainer.rt-layout-rail .rt-SidebarMenuSubList),
-.rt-ShellSidebarRail :where(.rt-SidebarMenuSubList),
-:where(.rt-ShellSidebar[data-state='rail'] .rt-SidebarMenuSubList) {
-  padding-left: 0;
-  border-left: none;
-  margin-left: 0;
+/* Remove vertical connector in thin mode */
+/* (intentionally no ::before) */
+
+/* Ensure submenu buttons also truncate */
+:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuSubContent .rt-SidebarMenuButton) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 
 /* Panel Layout Styling (default) - inherits existing styles */
@@ -347,7 +544,7 @@
       line-height: var(--line-height-1);
       letter-spacing: var(--letter-spacing-1);
       border-radius: var(--radius-1);
-      font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-regular);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
@@ -373,7 +570,7 @@
       line-height: var(--line-height-2);
       letter-spacing: var(--letter-spacing-2);
       border-radius: var(--radius-2);
-      font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-regular);
 
       /* stylelint-disable-next-line selector-max-type */
       & :where(svg) {
@@ -482,6 +679,7 @@
   & :where(.rt-SidebarMenuButton[data-active]) {
     background-color: var(--accent-9);
     color: var(--accent-contrast);
+    font-weight: var(--font-weight-medium);
 
     /* Force all text elements to inherit active color */
     & :where(.rt-Text) {
@@ -547,6 +745,7 @@
     & :where(.rt-SidebarMenuButton[data-active]) {
       background-color: var(--accent-12);
       color: var(--accent-1);
+      font-weight: var(--font-weight-medium);
 
       & :where(.rt-Text) {
         color: inherit !important;
@@ -667,6 +866,7 @@
     /* Base state: solid accent for solid panels */
     background-color: var(--accent-3);
     color: var(--accent-12);
+    font-weight: var(--font-weight-medium);
 
     /* Theme-level translucent override */
     :where([data-panel-background='translucent']) & {