banhaten 0.4.0 → 0.6.0

package/registry/components/sidebar.tsx

@@ -8,6 +8,7 @@ import {
   ChevronRightIcon,
   ChevronsUpDownIcon,
   FolderIcon,
+  MoreHorizontalIcon,
   PanelLeftIcon,
   SearchIcon,
   SparklesIcon,
@@ -22,10 +23,13 @@ import {
 } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
 
+type SidebarSize = "default" | "comfortable"
+
 type SidebarContextValue = {
   collapsed: boolean
   dir?: "ltr" | "rtl"
   setCollapsed: (collapsed: boolean) => void
+  size: SidebarSize
   toggle: () => void
 }
 
@@ -34,6 +38,7 @@ type SidebarProviderProps = React.ComponentProps<"div"> & {
   defaultCollapsed?: boolean
   dir?: "ltr" | "rtl"
   onCollapsedChange?: (collapsed: boolean) => void
+  size?: SidebarSize
 }
 type SidebarProps = React.ComponentProps<"aside"> & {
   side?: "start" | "end"
@@ -45,10 +50,11 @@ type SidebarHeaderActionProps = React.ComponentProps<"button"> & {
 type SidebarHeaderBrandProps = React.ComponentProps<"div"> & {
   brand?: React.ReactNode
   collapseAction?: React.ReactNode | false
-  logo?: React.ReactNode
+  logo?: React.ReactNode | false
   onSearchClick?: React.MouseEventHandler<HTMLButtonElement>
   searchAction?: React.ReactNode | false
   searchLabel?: string
+  subtitle?: React.ReactNode
 }
 type SidebarWorkspaceVariant = "actions" | "card"
 type SidebarHeaderWorkspaceSwitchProps = React.ComponentProps<"div"> & {
@@ -63,12 +69,16 @@ type SidebarHeaderWorkspaceSwitchProps = React.ComponentProps<"div"> & {
   variant?: SidebarWorkspaceVariant
   workspaceLabel?: string
 }
+type SidebarFooterProps = SidebarSectionProps & {
+  divider?: boolean
+}
 type SidebarFooterUserProps = React.ComponentProps<"button"> & {
-  avatar?: React.ReactNode
+  avatar?: React.ReactNode | false
   name?: React.ReactNode
+  showIdentityPreview?: boolean
   supportText?: React.ReactNode
-  trailingIcon?: React.ReactNode
-  variant?: "default" | "supporting-text"
+  trailingIcon?: React.ReactNode | false
+  variant?: "default" | "supporting-text" | "card"
 }
 type SidebarGroupLabelProps = React.ComponentProps<"div"> & {
   actions?: React.ReactNode
@@ -134,6 +144,7 @@ function SidebarProvider({
   defaultCollapsed = false,
   dir,
   onCollapsedChange,
+  size = "default",
   ...props
 }: SidebarProviderProps) {
   const [uncontrolledCollapsed, setUncontrolledCollapsed] =
@@ -156,9 +167,10 @@ function SidebarProvider({
       collapsed: resolvedCollapsed,
       dir,
       setCollapsed,
+      size,
       toggle: () => setCollapsed(!resolvedCollapsed),
     }),
-    [dir, resolvedCollapsed, setCollapsed]
+    [dir, resolvedCollapsed, setCollapsed, size]
   )
 
   return (
@@ -166,6 +178,7 @@ function SidebarProvider({
       <TooltipProvider delayDuration={0}>
         <div
           data-collapsed={resolvedCollapsed ? "true" : "false"}
+          data-size={size}
           data-slot="sidebar-provider"
           dir={dir}
           className={cn("relative min-w-0", className)}
@@ -178,29 +191,66 @@ function SidebarProvider({
   )
 }
 
-/** The 280px navigation surface that contracts to the Figma 48px icon rail. */
+/** The 280px navigation surface with a 900px minimum height that contracts to the Figma 48px icon rail. */
 const Sidebar = React.forwardRef<HTMLElement, SidebarProps>(function Sidebar(
-  { className, side = "start", ...props },
+  { className, onTransitionEnd, side = "start", ...props },
   ref
 ) {
   const context = React.useContext(SidebarContext)
   const collapsed = context?.collapsed ?? false
   const dir = context?.dir
+  const size = context?.size ?? "default"
+  const [overflowVisible, setOverflowVisible] = React.useState(collapsed)
+  const previousCollapsed = React.useRef(collapsed)
+
+  React.useEffect(() => {
+    if (previousCollapsed.current === collapsed) return
+    previousCollapsed.current = collapsed
+
+    if (!collapsed) {
+      setOverflowVisible(false)
+      return
+    }
+
+    const prefersReducedMotion =
+      typeof window !== "undefined" &&
+      typeof window.matchMedia === "function" &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches
+
+    setOverflowVisible(prefersReducedMotion)
+  }, [collapsed])
 
   return (
     <aside
       data-collapsed={collapsed ? "true" : "false"}
+      data-overflow-visible={overflowVisible ? "true" : "false"}
       data-side={side}
+      data-size={size}
       data-slot="sidebar"
       dir={dir}
       ref={ref}
       className={cn(
-        "group/sidebar flex h-full min-h-[var(--bh-space-19xl-384)] w-[var(--bh-sidebar-width)] max-w-full shrink-0 flex-col overflow-hidden bg-[var(--bh-sidebar-bg)] text-[var(--bh-content-default)] transition-[width,background-color]",
+        "group/sidebar flex h-full min-h-[var(--bh-sidebar-min-height)] w-[var(--bh-sidebar-width)] max-w-full shrink-0 flex-col overflow-hidden bg-[var(--bh-sidebar-bg)] text-[var(--bh-content-default)] transition-[width,background-color] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] will-change-[width] motion-reduce:transition-none",
         "border-e border-[var(--bh-sidebar-border)]",
         "data-[collapsed=true]:w-[var(--bh-sidebar-width-collapsed)] data-[collapsed=true]:bg-[var(--bh-sidebar-bg-collapsed)]",
+        collapsed && overflowVisible && "overflow-visible",
         side === "end" && "ms-auto border-e-0 border-s",
+        // Comfortable, expanded: the ATS360 shell rail's 1px inside stroke on all four sides, an outline inset by its own
+        // width so it takes no width and draws above the header and footer fills.
+        size === "comfortable" &&
+          "data-[collapsed=false]:border-0 data-[collapsed=false]:[outline:var(--bh-border-width-default)_solid_var(--bh-sidebar-border)] data-[collapsed=false]:[outline-offset:calc(var(--bh-border-width-default)*-1)]",
         className
       )}
+      onTransitionEnd={(event) => {
+        onTransitionEnd?.(event)
+        if (
+          !event.defaultPrevented &&
+          event.currentTarget === event.target &&
+          event.propertyName === "width"
+        ) {
+          setOverflowVisible(collapsed)
+        }
+      }}
       {...props}
     />
   )
@@ -212,8 +262,9 @@ function SidebarHeader({ className, ...props }: SidebarSectionProps) {
     <div
       data-slot="sidebar-header"
       className={cn(
-        "flex shrink-0 flex-col items-start gap-[var(--bh-space-lg-10)] overflow-hidden bg-[var(--bh-sidebar-bg)] p-[var(--bh-sidebar-padding)]",
-        "group-data-[collapsed=true]/sidebar:items-center group-data-[collapsed=true]/sidebar:px-[var(--bh-space-xs-4)] group-data-[collapsed=true]/sidebar:py-[var(--bh-space-md-8)]",
+        "flex shrink-0 flex-col items-center gap-[var(--bh-space-lg-10)] overflow-hidden bg-[var(--bh-sidebar-bg)] p-[var(--bh-sidebar-padding)] transition-[padding] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        "group-data-[collapsed=true]/sidebar:px-[var(--bh-space-xs-4)] group-data-[collapsed=true]/sidebar:py-[var(--bh-space-md-8)]",
+        "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:px-[var(--bh-sidebar-comfortable-padding)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:pb-[var(--bh-space-none)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:pt-[var(--bh-sidebar-comfortable-padding)]",
         className
       )}
       {...props}
@@ -237,7 +288,7 @@ const SidebarHeaderAction = React.forwardRef<
       type={type}
       className={cn(
         "inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] border border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,border-color,box-shadow,color]",
-        "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--shadow-button-focus)]",
+        "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--elevation-button-focus)]",
         className
       )}
       {...props}
@@ -253,7 +304,10 @@ const SidebarHeaderAction = React.forwardRef<
   )
 })
 
-/** Brand header with optional search and collapse actions; actions disappear on the icon rail. */
+/**
+ * Brand header with optional search and collapse actions; actions disappear on the icon rail.
+ * Pass logo={false} for a text-only brand and subtitle for a stacked product or module line.
+ */
 function SidebarHeaderBrand({
   brand = "Banhaten",
   className,
@@ -262,63 +316,123 @@ function SidebarHeaderBrand({
   onSearchClick,
   searchAction,
   searchLabel = "Search",
+  subtitle,
   ...props
 }: SidebarHeaderBrandProps) {
   const { collapsed } = useSidebarContext()
+  const hasCollapseAction = collapseAction !== false
+  const showLogo = logo !== false
+  const stacked = subtitle !== undefined && subtitle !== null && subtitle !== false
+
+  const name = (
+    <span
+      aria-hidden={collapsed || undefined}
+      data-slot="sidebar-brand-name"
+      dir="auto"
+      className={cn(
+        "max-w-[calc(var(--bh-sidebar-width)-var(--bh-space-10xl-80))] truncate opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        "text-[length:var(--bh-text-body-xl-semibold-font-size)] font-[var(--bh-text-body-xl-semibold-font-weight)] leading-[var(--bh-text-body-xl-semibold-line-height)] tracking-[var(--bh-text-body-xl-semibold-letter-spacing)]",
+        "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:text-[length:var(--bh-text-heading-md-semibold-font-size)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:font-[var(--bh-text-heading-md-semibold-font-weight)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:leading-[var(--bh-text-heading-md-semibold-line-height)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:tracking-[var(--bh-text-heading-md-semibold-letter-spacing)]",
+        collapsed &&
+          "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+      )}
+    >
+      {brand}
+    </span>
+  )
 
   return (
     <div
       data-collapsed={collapsed ? "true" : "false"}
       data-slot="sidebar-header-brand"
+      data-stacked={stacked ? "true" : "false"}
       className={cn(
-        "flex h-[var(--bh-sidebar-brand-height)] w-full items-center justify-between py-[var(--bh-space-xs-4)] ps-[var(--bh-space-sm-6)] pe-[var(--bh-space-xs-4)]",
-        collapsed &&
-          "size-[var(--bh-sidebar-compact-control-size)] justify-center gap-[var(--bh-space-md-8)] p-0",
+        "relative h-[var(--bh-sidebar-brand-height)] w-full transition-[width,height] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        stacked && !collapsed && "h-auto",
+        collapsed && hasCollapseAction &&
+          "h-[calc(var(--bh-sidebar-header-action-size)+var(--bh-space-sm-6)+var(--bh-sidebar-header-action-size))] w-[var(--bh-sidebar-compact-control-size)]",
+        collapsed && !hasCollapseAction &&
+          "h-[var(--bh-sidebar-header-action-size)] w-[var(--bh-sidebar-compact-control-size)]",
         className
       )}
       {...props}
     >
       <span
         data-slot="sidebar-brand-content"
-        className="flex min-w-0 items-center gap-[var(--bh-space-md-8)]"
+        className={cn(
+          "absolute start-[var(--bh-space-sm-6)] top-[var(--bh-space-xs-4)] flex min-w-0 items-center gap-[var(--bh-space-md-8)] transition-[inset-inline-start,top,gap] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+          stacked && !collapsed &&
+            "static items-start px-[var(--bh-space-sm-6)] py-[var(--bh-space-xs-4)] group-data-[size=comfortable]/sidebar:p-[var(--bh-sidebar-comfortable-brand-padding)]",
+          collapsed && "start-[var(--bh-space-xs-4)] top-0 gap-0"
+        )}
       >
-        <span
-          data-slot="sidebar-brand-logo"
-          className="inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] [&>*]:size-full"
-        >
-          {logo ?? (
-            <span className="inline-flex size-full items-center justify-center bg-[var(--bh-bg-brand-default)] text-[var(--bh-content-on-brand)]">
-              <SparklesIcon
-                aria-hidden="true"
-                className="size-[var(--bh-sidebar-icon-size)]"
-              />
-            </span>
-          )}
-        </span>
-        {!collapsed ? (
+        {showLogo ? (
           <span
-            data-slot="sidebar-brand-name"
-            dir="auto"
-            className="truncate text-[length:var(--bh-text-body-xl-semibold-font-size)] font-[var(--bh-text-body-xl-semibold-font-weight)] leading-[var(--bh-text-body-xl-semibold-line-height)] tracking-[var(--bh-text-body-xl-semibold-letter-spacing)]"
+            data-slot="sidebar-brand-logo"
+            className="inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] [&>*]:size-full"
           >
-            {brand}
+            {logo ?? (
+              <span className="inline-flex size-full items-center justify-center bg-[var(--bh-bg-brand-default)] text-[var(--bh-content-on-brand)]">
+                <SparklesIcon
+                  aria-hidden="true"
+                  className="size-[var(--bh-sidebar-icon-size)]"
+                />
+              </span>
+            )}
           </span>
         ) : null}
+        {stacked ? (
+          <span
+            aria-hidden={collapsed || undefined}
+            data-slot="sidebar-brand-text"
+            className={cn(
+              "flex min-w-0 flex-col gap-[var(--bh-space-xs-4)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+              collapsed &&
+                "pointer-events-none max-w-0 overflow-hidden opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+            )}
+          >
+            {name}
+            <span
+              data-slot="sidebar-brand-subtitle"
+              dir="auto"
+              className="max-w-[calc(var(--bh-sidebar-width)-var(--bh-space-10xl-80))] truncate text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+            >
+              {subtitle}
+            </span>
+          </span>
+        ) : (
+          name
+        )}
       </span>
 
-      {!collapsed ? (
+      {searchAction !== false || hasCollapseAction ? (
         <span
           data-slot="sidebar-brand-actions"
-          className="flex shrink-0 items-center gap-[var(--bh-space-sm-6)]"
+          className={cn(
+            "absolute end-[var(--bh-space-xs-4)] top-[calc((var(--bh-sidebar-brand-height)-var(--bh-sidebar-header-action-size))/2)] flex shrink-0 items-center gap-[var(--bh-space-sm-6)] transition-[top,inset-inline-end,gap] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed && hasCollapseAction &&
+              "end-[var(--bh-space-xs-4)] top-[calc(var(--bh-sidebar-header-action-size)+var(--bh-space-sm-6))] gap-0"
+          )}
         >
-          {searchAction === false
-            ? null
-            : searchAction ?? (
+          {searchAction === false ? null : (
+            <span
+              aria-hidden={collapsed || undefined}
+              data-slot="sidebar-brand-search-action"
+              inert={collapsed ? true : undefined}
+              className={cn(
+                "inline-flex max-w-[var(--bh-sidebar-header-action-size)] overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] duration-[var(--bh-sidebar-motion-duration-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+                collapsed &&
+                  "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)]"
+              )}
+            >
+              {searchAction ?? (
                 <SidebarHeaderAction label={searchLabel} onClick={onSearchClick}>
                   <SearchIcon aria-hidden="true" />
                 </SidebarHeaderAction>
               )}
-          {collapseAction === false ? null : collapseAction ?? <SidebarTrigger />}
+            </span>
+          )}
+          {hasCollapseAction ? collapseAction ?? <SidebarTrigger /> : null}
         </span>
       ) : null}
     </div>
@@ -342,6 +456,7 @@ function SidebarHeaderWorkspaceSwitch({
 }: SidebarHeaderWorkspaceSwitchProps) {
   const { collapsed } = useSidebarContext()
   const card = variant === "card"
+  const hasCollapseAction = collapseAction !== false
 
   const workspaceButton = (
     <button
@@ -350,20 +465,20 @@ function SidebarHeaderWorkspaceSwitch({
       onClick={onWorkspaceClick}
       type="button"
       className={cn(
-        "group/workspace relative flex min-w-0 items-center text-start outline-none transition-[background-color,border-color,box-shadow]",
+        "group/workspace absolute start-0 top-0 flex min-w-0 items-center overflow-hidden text-start outline-none transition-[width,height,gap,padding,border-radius,background-color,border-color,box-shadow] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
         card
           ? "h-[var(--bh-sidebar-workspace-card-height)] w-full gap-[var(--bh-space-md-8)] overflow-hidden rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-bg-default-hover)] focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)]"
           : "h-[var(--bh-sidebar-compact-control-size)] w-[var(--bh-sidebar-workspace-trigger-width)] max-w-[var(--bh-sidebar-workspace-trigger-max-width)] gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-md-6)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)]",
         collapsed && card &&
-          "size-[var(--bh-sidebar-compact-control-size)] justify-center gap-0 p-0",
+          "size-[var(--bh-sidebar-compact-control-size)] gap-0 px-[var(--bh-space-xxs-2)] py-0",
         collapsed && !card &&
-          "size-[var(--bh-sidebar-item-height-collapsed)] max-w-[var(--bh-sidebar-item-height-collapsed)] justify-center gap-0 p-0"
+          "size-[var(--bh-sidebar-item-height-collapsed)] max-w-[var(--bh-sidebar-item-height-collapsed)] gap-0 px-[var(--bh-space-sm-6)] py-0"
       )}
     >
       <span
         data-slot="sidebar-workspace-image"
         className={cn(
-          "inline-flex shrink-0 items-center justify-center overflow-hidden [&>*]:size-full",
+          "inline-flex shrink-0 items-center justify-center overflow-hidden transition-[width,height,border-radius] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none [&>*]:size-full",
           card
             ? "size-[var(--bh-space-6xl-32)] rounded-[var(--bh-radius-md-6)]"
             : "size-[var(--bh-space-5xl-24)] rounded-[var(--bh-radius-lg-8)]",
@@ -379,54 +494,75 @@ function SidebarHeaderWorkspaceSwitch({
         )}
       </span>
 
-      {!collapsed ? (
-        card ? (
-          <span className="flex min-w-0 flex-1 flex-col items-start justify-center">
-            <span
-              data-slot="sidebar-workspace-label"
-              dir="auto"
-              className="w-full truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
-            >
-              {label}
-            </span>
-            <span
-              data-slot="sidebar-workspace-support"
-              dir="auto"
-              className="w-full truncate text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
-            >
-              {supportText}
-            </span>
+      {card ? (
+        <span
+          aria-hidden={collapsed || undefined}
+          className={cn(
+            "flex min-w-0 max-w-[var(--bh-sidebar-width)] flex-1 flex-col items-start justify-center overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed &&
+              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
+        >
+          <span
+            data-slot="sidebar-workspace-label"
+            dir="auto"
+            className="w-full truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
+          >
+            {label}
           </span>
-        ) : (
-          <span className="flex min-w-0 items-center gap-[var(--bh-space-xxs-2)]">
-            <span
-              data-slot="sidebar-workspace-label"
-              dir="auto"
-              className="truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
-            >
-              {label}
-            </span>
-            <ChevronDownIcon
-              aria-hidden="true"
-              className="size-[var(--bh-space-3xl-16)] shrink-0"
-              data-rtl-flip="true"
-            />
+          <span
+            data-slot="sidebar-workspace-support"
+            dir="auto"
+            className="w-full truncate text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+          >
+            {supportText}
           </span>
-        )
-      ) : !card ? (
+        </span>
+      ) : (
+        <span
+          aria-hidden={collapsed || undefined}
+          className={cn(
+            "flex min-w-0 max-w-[var(--bh-sidebar-width)] items-center gap-[var(--bh-space-xxs-2)] overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed &&
+              "pointer-events-none max-w-0 gap-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
+        >
+          <span
+            data-slot="sidebar-workspace-label"
+            dir="auto"
+            className="truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
+          >
+            {label}
+          </span>
+          <ChevronDownIcon
+            aria-hidden="true"
+            className="size-[var(--bh-space-3xl-16)] shrink-0"
+            data-rtl-flip="true"
+          />
+        </span>
+      )}
+
+      {!card ? (
         <span
           aria-hidden="true"
           data-slot="sidebar-workspace-caret"
-          className="absolute end-0 top-1/2 inline-flex size-[var(--bh-space-3xl-16)] -translate-y-1/2 items-center justify-center rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)]"
+          className={cn(
+            "pointer-events-none absolute end-0 top-1/2 inline-flex size-[var(--bh-space-3xl-16)] -translate-y-1/2 items-center justify-center rounded-[var(--bh-radius-full)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] opacity-[var(--bh-opacity-0)] transition-opacity duration-[var(--bh-sidebar-motion-duration-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed &&
+              "opacity-[var(--bh-opacity-100)] delay-[var(--bh-sidebar-motion-delay-content)]"
+          )}
         >
           <ChevronDownIcon className="size-[var(--bh-space-xl-12)]" />
         </span>
       ) : null}
 
-      {card && !collapsed ? (
+      {card ? (
         <ChevronsUpDownIcon
           aria-hidden="true"
-          className="size-[var(--bh-space-3xl-16)] shrink-0 text-[var(--bh-content-muted)]"
+          className={cn(
+            "size-[var(--bh-space-3xl-16)] shrink-0 text-[var(--bh-content-muted)] opacity-[var(--bh-opacity-100)] transition-opacity duration-[var(--bh-sidebar-motion-duration-content)] delay-[var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed && "opacity-[var(--bh-opacity-0)] delay-0"
+          )}
         />
       ) : null}
     </button>
@@ -438,31 +574,58 @@ function SidebarHeaderWorkspaceSwitch({
       data-slot="sidebar-header-workspace-switch"
       data-variant={variant}
       className={cn(
-        "flex w-full items-center",
+        "relative w-full transition-[width,height] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
         card
           ? "h-[var(--bh-sidebar-workspace-card-height)]"
-          : "h-[var(--bh-sidebar-compact-control-size)] justify-between pe-[var(--bh-space-md-8)]",
-        collapsed && card && "size-[var(--bh-sidebar-compact-control-size)]",
-        collapsed && !card &&
-          "size-[var(--bh-sidebar-item-height-collapsed)] justify-center p-0",
+          : "h-[var(--bh-sidebar-compact-control-size)]",
+        collapsed && card && hasCollapseAction &&
+          "h-[calc(var(--bh-sidebar-compact-control-size)+var(--bh-space-sm-6)+var(--bh-sidebar-header-action-size))] w-[var(--bh-sidebar-compact-control-size)]",
+        collapsed && card && !hasCollapseAction &&
+          "h-[var(--bh-sidebar-compact-control-size)] w-[var(--bh-sidebar-compact-control-size)]",
+        collapsed && !card && hasCollapseAction &&
+          "h-[calc(var(--bh-sidebar-item-height-collapsed)+var(--bh-space-sm-6)+var(--bh-sidebar-header-action-size))] w-[var(--bh-sidebar-item-height-collapsed)]",
+        collapsed && !card && !hasCollapseAction &&
+          "h-[var(--bh-sidebar-item-height-collapsed)] w-[var(--bh-sidebar-item-height-collapsed)]",
         className
       )}
       {...props}
     >
       {workspaceButton}
-      {!card && !collapsed ? (
+      {(!card && searchAction !== false) || hasCollapseAction ? (
         <span
+          aria-hidden={(card && !collapsed) || undefined}
           data-slot="sidebar-workspace-actions"
-          className="flex shrink-0 items-center gap-[var(--bh-space-sm-6)]"
+          inert={card && !collapsed ? true : undefined}
+          className={cn(
+            "absolute flex shrink-0 items-center gap-[var(--bh-space-sm-6)] transition-[top,inset-inline-end,gap,opacity] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            card
+              ? "pointer-events-none end-[var(--bh-space-xs-4)] top-[calc((var(--bh-sidebar-workspace-card-height)-var(--bh-sidebar-header-action-size))/2)] opacity-[var(--bh-opacity-0)]"
+              : "end-[var(--bh-space-md-8)] top-[calc((var(--bh-sidebar-compact-control-size)-var(--bh-sidebar-header-action-size))/2)] opacity-[var(--bh-opacity-100)]",
+            collapsed && card &&
+              "pointer-events-auto end-[var(--bh-space-xs-4)] top-[calc(var(--bh-sidebar-compact-control-size)+var(--bh-space-sm-6))] gap-0 opacity-[var(--bh-opacity-100)]",
+            collapsed && !card &&
+              "end-[var(--bh-space-sm-6)] top-[calc(var(--bh-sidebar-item-height-collapsed)+var(--bh-space-sm-6))] gap-0"
+          )}
         >
-          {searchAction === false
-            ? null
-            : searchAction ?? (
+          {!card && searchAction !== false ? (
+            <span
+              aria-hidden={collapsed || undefined}
+              data-slot="sidebar-workspace-search-action"
+              inert={collapsed ? true : undefined}
+              className={cn(
+                "inline-flex max-w-[var(--bh-sidebar-header-action-size)] overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] duration-[var(--bh-sidebar-motion-duration-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+                collapsed &&
+                  "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)]"
+              )}
+            >
+              {searchAction ?? (
                 <SidebarHeaderAction label={searchLabel} onClick={onSearchClick}>
                   <SearchIcon aria-hidden="true" />
                 </SidebarHeaderAction>
               )}
-          {collapseAction === false ? null : collapseAction ?? <SidebarTrigger />}
+            </span>
+          ) : null}
+          {hasCollapseAction ? collapseAction ?? <SidebarTrigger /> : null}
         </span>
       ) : null}
     </div>
@@ -475,8 +638,9 @@ function SidebarBody({ className, ...props }: SidebarSectionProps) {
     <div
       data-slot="sidebar-body"
       className={cn(
-        "min-h-0 flex-1 overflow-auto px-[var(--bh-space-xl-12)] py-0",
+        "min-h-0 flex-1 overflow-auto px-[var(--bh-space-xl-12)] py-0 transition-[padding] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
         "group-data-[collapsed=true]/sidebar:px-0",
+        "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:flex group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:flex-col group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:gap-[var(--bh-sidebar-comfortable-section-gap)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:px-[var(--bh-sidebar-comfortable-padding)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:pt-[var(--bh-sidebar-comfortable-section-gap)]",
         className
       )}
       {...props}
@@ -484,14 +648,17 @@ function SidebarBody({ className, ...props }: SidebarSectionProps) {
   )
 }
 
-/** Bottom-pinned footer with the matching expanded and collapsed padding. */
-function SidebarFooter({ className, ...props }: SidebarSectionProps) {
+/** Bottom-pinned footer with the matching expanded and collapsed padding; divider={false} drops the top rule. */
+function SidebarFooter({ className, divider = true, ...props }: SidebarFooterProps) {
   return (
     <div
+      data-divider={divider ? "true" : "false"}
       data-slot="sidebar-footer"
       className={cn(
-        "mt-auto shrink-0 border-t border-[var(--bh-sidebar-border)] bg-[var(--bh-sidebar-bg)] px-[var(--bh-sidebar-padding)] py-[var(--bh-space-md-8)]",
+        "mt-auto shrink-0 bg-[var(--bh-sidebar-bg)] px-[var(--bh-sidebar-padding)] py-[var(--bh-space-md-8)] transition-[padding] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        divider && "border-t border-[var(--bh-sidebar-border)]",
         "group-data-[collapsed=true]/sidebar:p-[var(--bh-space-xs-4)]",
+        "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:p-[var(--bh-sidebar-comfortable-padding)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:pt-[var(--bh-sidebar-comfortable-section-gap)]",
         className
       )}
       {...props}
@@ -509,6 +676,7 @@ const SidebarFooterUser = React.forwardRef<
     avatar,
     className,
     name = "Username",
+    showIdentityPreview = true,
     supportText = "user@example.com",
     trailingIcon,
     type = "button",
@@ -518,7 +686,16 @@ const SidebarFooterUser = React.forwardRef<
   ref
 ) {
   const { collapsed } = useSidebarContext()
+  const card = variant === "card"
   const supporting = variant === "supporting-text"
+  const showSupport = supporting || card
+  // The card treatment is text-only unless an avatar or trailing icon is passed;
+  // the collapsed rail always keeps a glyph so the control stays visible.
+  const showAvatar =
+    collapsed || (avatar !== false && (!card || (avatar !== undefined && avatar !== null)))
+  const showTrailing =
+    trailingIcon !== false &&
+    (!card || (trailingIcon !== undefined && trailingIcon !== null))
   const resolvedLabel =
     ariaLabel ?? (typeof name === "string" ? name : "Open user menu")
 
@@ -531,13 +708,15 @@ const SidebarFooterUser = React.forwardRef<
       ref={ref}
       type={type}
       className={cn(
-        "flex w-full items-center rounded-[var(--bh-radius-lg-8)] text-start outline-none transition-[background-color,border-color,box-shadow]",
-        supporting
-          ? "h-[var(--bh-space-8xl-48)] gap-[var(--bh-space-xs-4)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-interactive-ghost-hover)]"
-          : "h-[var(--bh-sidebar-item-height-collapsed)] gap-[var(--bh-space-xs-4)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] px-[var(--bh-space-sm-6)] py-[var(--bh-space-md-8)] hover:bg-[var(--bh-bg-default-hover)]",
-        "focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)]",
+        "group/footer-user relative flex w-full items-center rounded-[var(--bh-radius-lg-8)] text-start outline-none transition-[width,height,gap,padding,border-radius,background-color,border-color,box-shadow] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        card
+          ? "gap-[var(--bh-space-xs-4)] bg-[var(--bh-sidebar-user-card-bg)] p-[var(--bh-space-md-8)] hover:bg-[var(--bh-sidebar-user-card-bg-hover)]"
+          : supporting
+            ? "h-[var(--bh-space-8xl-48)] gap-[var(--bh-space-xs-4)] p-[var(--bh-space-sm-6)] hover:bg-[var(--bh-interactive-ghost-hover)]"
+            : "h-[var(--bh-sidebar-item-height-collapsed)] gap-[var(--bh-space-xs-4)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-default)] px-[var(--bh-space-sm-6)] py-[var(--bh-space-md-8)] hover:bg-[var(--bh-bg-default-hover)]",
+        "focus-visible:border-[length:var(--bh-border-width-strong)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--elevation-button-focus)]",
         collapsed &&
-          "mx-auto size-[var(--bh-sidebar-compact-control-size)] justify-center gap-0 rounded-[var(--bh-radius-full)] border-0 p-0 hover:bg-[var(--bh-interactive-ghost-hover)]",
+          "mx-auto size-[var(--bh-sidebar-compact-control-size)] justify-center gap-0 rounded-[var(--bh-radius-full)] border-0 bg-[var(--bh-interactive-ghost-default)] p-0 hover:bg-[var(--bh-interactive-ghost-hover)]",
         className
       )}
       {...props}
@@ -545,70 +724,125 @@ const SidebarFooterUser = React.forwardRef<
       <span
         data-slot="sidebar-footer-user-content"
         className={cn(
-          "flex min-w-0 flex-1 items-center gap-[var(--bh-space-md-8)] px-[var(--bh-space-xxs-2)]",
-          collapsed &&
-            "size-[var(--bh-sidebar-compact-control-size)] flex-none justify-center gap-0 p-0"
+          "flex min-w-0 flex-1 items-center gap-[var(--bh-space-md-8)] overflow-hidden px-[var(--bh-space-xxs-2)] transition-[width,height,gap,padding] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+          card && "px-[var(--bh-space-none)]",
+          collapsed && "gap-0 p-0"
         )}
       >
+        {showAvatar ? (
+          <span
+            data-slot="sidebar-footer-user-avatar"
+            className={cn(
+              "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] transition-[width,height,border-radius] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none [&>*]:size-full",
+              supporting || card ? "size-[var(--bh-space-6xl-32)]" : "size-[var(--bh-space-5xl-24)]",
+              collapsed && "size-[var(--bh-sidebar-compact-control-size)]"
+            )}
+          >
+            {avatar === false || avatar === undefined || avatar === null ? (
+              <UserIcon
+                aria-hidden="true"
+                className="size-[var(--bh-sidebar-icon-size)]"
+              />
+            ) : (
+              avatar
+            )}
+          </span>
+        ) : null}
         <span
-          data-slot="sidebar-footer-user-avatar"
+          aria-hidden={collapsed || undefined}
+          data-slot="sidebar-footer-user-text"
           className={cn(
-            "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] [&>*]:size-full",
-            supporting ? "size-[var(--bh-space-6xl-32)]" : "size-[var(--bh-space-5xl-24)]",
-            collapsed && "size-[var(--bh-sidebar-compact-control-size)]"
+            "flex min-w-0 max-w-[var(--bh-sidebar-width)] flex-1 flex-col items-start justify-center overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none rtl:items-end rtl:text-right",
+            card && "gap-[var(--bh-space-xs-4)]",
+            collapsed &&
+              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
           )}
         >
-          {avatar ?? (
-            <UserIcon
-              aria-hidden="true"
-              className="size-[var(--bh-sidebar-icon-size)]"
-            />
-          )}
-        </span>
-        {!collapsed ? (
           <span
-            data-slot="sidebar-footer-user-text"
-            className="flex min-w-0 flex-1 flex-col items-start justify-center"
+            data-slot="sidebar-footer-user-name"
+            dir="auto"
+            className={cn(
+              "w-full truncate",
+              card
+                ? "text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-content-default)]"
+                : "text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
+            )}
           >
+            {name}
+          </span>
+          {showSupport ? (
             <span
-              data-slot="sidebar-footer-user-name"
+              data-slot="sidebar-footer-user-support"
               dir="auto"
-              className="w-full truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)]"
+              className={cn(
+                "w-full truncate text-[var(--bh-content-subtle)]",
+                card
+                  ? "text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)]"
+                  : "text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)]"
+              )}
             >
-              {name}
+              {supportText}
             </span>
-            {supporting ? (
-              <span
-                data-slot="sidebar-footer-user-support"
-                dir="auto"
-                className="w-full truncate text-[length:var(--bh-text-body-2xs-regular-font-size)] font-[var(--bh-text-body-2xs-regular-font-weight)] leading-[var(--bh-text-body-2xs-regular-line-height)] tracking-[var(--bh-text-body-2xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
-              >
-                {supportText}
-              </span>
-            ) : null}
-          </span>
-        ) : null}
+          ) : null}
+        </span>
       </span>
-      {!collapsed ? (
+      {showTrailing ? (
         <span
           aria-hidden="true"
           data-slot="sidebar-footer-user-trailing"
-          className="inline-flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center text-[var(--bh-content-muted)] [&_svg]:size-[var(--bh-space-3xl-16)]"
+          className={cn(
+            "inline-flex size-[var(--bh-space-4xl-20)] max-w-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center overflow-hidden text-[var(--bh-content-muted)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none [&_svg]:size-[var(--bh-space-3xl-16)]",
+            collapsed &&
+              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
         >
           {trailingIcon ?? <ChevronsUpDownIcon />}
         </span>
       ) : null}
+      {collapsed && showIdentityPreview ? (
+        <span
+          aria-hidden="true"
+          data-slot="sidebar-footer-user-preview"
+          className={cn(
+            "pointer-events-none invisible absolute bottom-0 start-[calc(100%+var(--bh-sidebar-user-preview-gap))] z-[var(--bh-z-overlay)] flex h-[var(--bh-sidebar-user-preview-height)] w-[var(--bh-sidebar-user-preview-width)] items-center gap-[var(--bh-space-md-8)] rounded-[var(--bh-radius-xl-10)] border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] px-[var(--bh-space-xl-12)] py-[var(--bh-space-md-8)] opacity-[var(--bh-opacity-0)] shadow-[var(--elevation-component-default)] transition-[opacity,visibility]",
+            "group-hover/footer-user:visible group-hover/footer-user:opacity-[var(--bh-opacity-100)] group-focus-visible/footer-user:visible group-focus-visible/footer-user:opacity-[var(--bh-opacity-100)] group-data-[state=open]/footer-user:hidden",
+            "group-data-[side=end]/sidebar:start-auto group-data-[side=end]/sidebar:end-[calc(100%+var(--bh-sidebar-user-preview-gap))]"
+          )}
+        >
+          <span className="flex min-w-0 flex-1 flex-col items-start justify-center">
+            <span
+              dir="auto"
+              className="w-full truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-default)]"
+            >
+              {name}
+            </span>
+            <span
+              dir="auto"
+              className="w-full truncate text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+            >
+              {supportText}
+            </span>
+          </span>
+          <span className="inline-flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center text-[var(--bh-content-muted)] [&_svg]:size-[var(--bh-space-3xl-16)]">
+            {trailingIcon ?? <MoreHorizontalIcon />}
+          </span>
+        </span>
+      ) : null}
     </button>
   )
 })
 
-/** A Figma sidebar group: 12px top padding, 6px bottom padding, and no menu gap. */
+/**
+ * A Figma sidebar group: 12px top padding, 6px bottom padding, and no menu gap.
+ * The comfortable size drops the padding (the body's section gap separates groups) and spaces label and rows by 8px.
+ */
 function SidebarGroup({ className, ...props }: SidebarSectionProps) {
   return (
     <div
       data-slot="sidebar-group"
       className={cn(
         "flex w-full flex-col items-start pb-[var(--bh-space-sm-6)] pt-[var(--bh-space-xl-12)]",
+        "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:gap-[var(--bh-sidebar-comfortable-item-gap)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:py-[var(--bh-space-none)]",
         className
       )}
       {...props}
@@ -627,46 +861,56 @@ function SidebarGroupLabel({
 }: SidebarGroupLabelProps) {
   const { collapsed } = useSidebarContext()
 
-  if (collapsed) return null
-
   return (
     <div
-      data-slot="sidebar-group-label"
+      aria-hidden={collapsed || undefined}
+      data-slot="sidebar-group-label-motion"
+      inert={collapsed ? true : undefined}
       className={cn(
-        "group/label flex h-[var(--bh-space-5xl-24)] w-full items-center gap-[var(--bh-space-xs-4)] rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-sm-6)] pb-[var(--bh-space-xs-4)]",
-        className
+        "grid w-full grid-rows-[1fr] opacity-[var(--bh-opacity-100)] transition-[grid-template-rows,opacity] duration-[var(--bh-sidebar-motion-duration-content)] delay-[var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        collapsed &&
+          "pointer-events-none grid-rows-[0fr] opacity-[var(--bh-opacity-0)] delay-0"
       )}
-      {...props}
     >
-      <span
-        data-slot="sidebar-group-label-content"
-        className="flex min-w-0 flex-1 items-center gap-[var(--bh-space-xxxs-1)]"
+      <div
+        data-slot="sidebar-group-label"
+        className={cn(
+          "group/label flex min-h-0 h-[var(--bh-space-5xl-24)] w-full items-center gap-[var(--bh-space-xs-4)] overflow-hidden rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-sm-6)] pb-[var(--bh-space-xs-4)]",
+          "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:h-[var(--bh-sidebar-comfortable-group-label-height)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:px-[var(--bh-space-none)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:pb-[var(--bh-space-none)]",
+          className
+        )}
+        {...props}
       >
         <span
-          data-slot="sidebar-group-label-text"
-          dir="auto"
-          className="truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-content-muted)]"
+          data-slot="sidebar-group-label-content"
+          className="flex min-w-0 flex-1 items-center gap-[var(--bh-space-xxxs-1)]"
         >
-          {children}
+          <span
+            data-slot="sidebar-group-label-text"
+            dir="auto"
+            className="truncate text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-sidebar-group-label-content)]"
+          >
+            {children}
+          </span>
+          {expandable ? (
+            <span
+              aria-hidden="true"
+              data-slot="sidebar-group-label-expand"
+              className="inline-flex size-[var(--bh-space-3xl-16)] shrink-0 items-center justify-center opacity-[var(--bh-opacity-0)] transition-opacity group-hover/label:opacity-[var(--bh-opacity-100)] group-focus-within/label:opacity-[var(--bh-opacity-100)] [&_svg]:size-full"
+            >
+              {expandIcon ?? <ChevronRightIcon data-rtl-flip="true" />}
+            </span>
+          ) : null}
         </span>
-        {expandable ? (
+        {actions ? (
           <span
-            aria-hidden="true"
-            data-slot="sidebar-group-label-expand"
-            className="inline-flex size-[var(--bh-space-3xl-16)] shrink-0 items-center justify-center opacity-[var(--bh-opacity-0)] transition-opacity group-hover/label:opacity-[var(--bh-opacity-100)] group-focus-within/label:opacity-[var(--bh-opacity-100)] [&_svg]:size-full"
+            data-slot="sidebar-group-label-actions"
+            className="flex shrink-0 items-center gap-[var(--bh-space-xs-4)] opacity-[var(--bh-opacity-0)] transition-opacity group-hover/label:opacity-[var(--bh-opacity-100)] group-focus-within/label:opacity-[var(--bh-opacity-100)]"
           >
-            {expandIcon ?? <ChevronRightIcon data-rtl-flip="true" />}
+            {actions}
           </span>
         ) : null}
-      </span>
-      {actions ? (
-        <span
-          data-slot="sidebar-group-label-actions"
-          className="flex shrink-0 items-center gap-[var(--bh-space-xs-4)] opacity-[var(--bh-opacity-0)] transition-opacity group-hover/label:opacity-[var(--bh-opacity-100)] group-focus-within/label:opacity-[var(--bh-opacity-100)]"
-        >
-          {actions}
-        </span>
-      ) : null}
+      </div>
     </div>
   )
 }
@@ -698,12 +942,16 @@ const SidebarGroupAction = React.forwardRef<
   )
 })
 
-/** List wrapper for contiguous 32px sidebar menu rows. */
+/** List wrapper for contiguous 32px sidebar menu rows, or 40px rows 8px apart at the comfortable size. */
 function SidebarMenu({ className, ...props }: SidebarMenuProps) {
   return (
     <ul
       data-slot="sidebar-menu"
-      className={cn("m-0 flex w-full list-none flex-col p-0", className)}
+      className={cn(
+        "m-0 flex w-full list-none flex-col p-0",
+        "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:gap-[var(--bh-sidebar-comfortable-item-gap)]",
+        className
+      )}
       {...props}
     />
   )
@@ -765,8 +1013,6 @@ const SidebarMenuButton = React.forwardRef<
   const resolvedLabel =
     ariaLabel ?? (typeof label === "string" ? label : undefined)
 
-  if (collapsed && isLevel2) return null
-
   const content = (
     <>
       {isLevel2 ? (
@@ -808,37 +1054,58 @@ const SidebarMenuButton = React.forwardRef<
         </span>
       ) : null}
 
-      {!collapsed ? (
-        <span
-          data-slot="sidebar-menu-label"
-          dir="auto"
-          className="min-w-0 flex-1 truncate ps-[var(--bh-space-xs-4)]"
-        >
-          {label}
-        </span>
-      ) : null}
+      <span
+        aria-hidden={collapsed || undefined}
+        data-slot="sidebar-menu-label"
+        dir="auto"
+        className={cn(
+          "min-w-0 max-w-[var(--bh-sidebar-width)] flex-1 truncate ps-[var(--bh-space-xs-4)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity,padding] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content),0ms] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content),0ms] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+          "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:ps-[var(--bh-sidebar-comfortable-label-padding)]",
+          collapsed &&
+            "pointer-events-none max-w-0 p-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms,var(--bh-sidebar-motion-duration-content)]"
+        )}
+      >
+        {label}
+      </span>
 
-      {!collapsed && supportText ? (
+      {supportText ? (
         <span
+          aria-hidden={collapsed || undefined}
           data-slot="sidebar-menu-support"
           dir="auto"
-          className="shrink-0 whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-muted)]"
+          className={cn(
+            "max-w-[var(--bh-sidebar-width)] shrink-0 overflow-hidden whitespace-nowrap text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-muted)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed &&
+              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
         >
           {supportText}
         </span>
       ) : null}
 
-      {!collapsed && badge ? (
-        <span data-slot="sidebar-menu-badge-slot" className="inline-flex shrink-0">
+      {badge ? (
+        <span
+          aria-hidden={collapsed || undefined}
+          data-slot="sidebar-menu-badge-slot"
+          className={cn(
+            "inline-flex max-w-[var(--bh-sidebar-width)] shrink-0 overflow-hidden opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+            collapsed &&
+              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
+        >
           {badge}
         </span>
       ) : null}
 
-      {!collapsed && trailingIcon ? (
+      {trailingIcon ? (
         <span
           aria-hidden="true"
           data-slot="sidebar-menu-trailing"
-          className="inline-flex size-[var(--bh-sidebar-icon-slot-size)] shrink-0 items-center justify-center text-[var(--bh-content-muted)] [&_svg]:size-[var(--bh-sidebar-icon-size)] [&_svg]:shrink-0"
+          className={cn(
+            "inline-flex size-[var(--bh-sidebar-icon-slot-size)] max-w-[var(--bh-sidebar-icon-slot-size)] shrink-0 items-center justify-center overflow-hidden text-[var(--bh-content-muted)] opacity-[var(--bh-opacity-100)] transition-[max-width,opacity] [transition-duration:0ms,var(--bh-sidebar-motion-duration-content)] [transition-delay:0ms,var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none [&_svg]:size-[var(--bh-sidebar-icon-size)] [&_svg]:shrink-0",
+            collapsed &&
+              "pointer-events-none max-w-0 opacity-[var(--bh-opacity-0)] [transition-delay:var(--bh-sidebar-motion-duration-content),0ms]"
+          )}
         >
           {trailingIcon}
         </span>
@@ -847,7 +1114,7 @@ const SidebarMenuButton = React.forwardRef<
   )
 
   const buttonClassName = cn(
-    "group/menu-button relative flex w-full min-w-0 items-center gap-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-lg-8)] border-[length:var(--bh-border-width-strong)] border-transparent px-[var(--bh-sidebar-item-padding-x)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-sidebar-item-content)] outline-none transition-[background-color,border-color,color]",
+    "group/menu-button relative flex w-full min-w-0 items-center gap-[var(--bh-space-sm-6)] overflow-hidden rounded-[var(--bh-radius-lg-8)] border-[length:var(--bh-border-width-strong)] border-transparent px-[var(--bh-sidebar-item-padding-x)] text-start text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-sidebar-item-content)] opacity-[var(--bh-opacity-100)] outline-none transition-[width,height,gap,padding,margin,opacity,background-color,border-color,color] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
     "hover:rounded-[var(--bh-radius-md-6)] hover:bg-[var(--bh-sidebar-item-bg-hover)]",
     "focus-visible:rounded-[var(--bh-radius-md-6)] focus-visible:border-[var(--bh-border-focus)]",
     "data-[state=hover]:rounded-[var(--bh-radius-md-6)] data-[state=hover]:bg-[var(--bh-sidebar-item-bg-hover)]",
@@ -855,22 +1122,29 @@ const SidebarMenuButton = React.forwardRef<
     "disabled:pointer-events-none disabled:text-[var(--bh-content-disabled)]",
     variant === "avatar"
       ? "h-[var(--bh-sidebar-compact-control-size)]"
-      : "h-[var(--bh-sidebar-item-height)]",
+      : "h-[var(--bh-sidebar-item-height)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:h-[var(--bh-sidebar-comfortable-item-height)]",
+    "group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:text-[length:var(--bh-text-body-md-regular-font-size)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:leading-[var(--bh-text-body-md-regular-line-height)] group-data-[size=comfortable]/sidebar:group-data-[collapsed=false]/sidebar:tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
     (active || state === "active") &&
       "rounded-[var(--bh-radius-md-6)] bg-[var(--bh-sidebar-item-bg-active)] font-[var(--bh-text-body-sm-medium-font-weight)] text-[var(--bh-sidebar-item-content-active)]",
-    collapsed &&
-      "mx-auto size-[var(--bh-sidebar-item-height-collapsed)] justify-center gap-0 rounded-[var(--bh-radius-lg-8)] p-0",
+    collapsed && !isLevel2 &&
+      "ms-[var(--bh-space-xs-4)] size-[var(--bh-sidebar-item-height-collapsed)] gap-0 rounded-[var(--bh-radius-lg-8)] px-[var(--bh-space-md-8)] py-0",
+    collapsed && !isLevel2 && variant === "avatar" &&
+      "px-[var(--bh-space-sm-6)]",
+    collapsed && isLevel2 &&
+      "pointer-events-none h-0 w-full gap-0 border-0 p-0 opacity-[var(--bh-opacity-0)]",
     className
   )
 
   const commonProps = {
     "aria-current": active ? ("page" as const) : undefined,
+    "aria-hidden": collapsed && isLevel2 ? true : undefined,
     "aria-label": resolvedLabel,
     "data-active": active ? "true" : "false",
     "data-collapsed": collapsed ? "true" : "false",
     "data-slot": "sidebar-menu-button",
     "data-state": state,
     "data-variant": variant,
+    inert: collapsed && isLevel2 ? true : undefined,
     className: buttonClassName,
   }
 
@@ -885,33 +1159,48 @@ const SidebarMenuButton = React.forwardRef<
   )
 
   const resolvedTooltip = tooltip ?? resolvedLabel
-  if (!collapsed || !resolvedTooltip) return button
+  if (!resolvedTooltip || isLevel2) return button
 
   return (
     <Tooltip>
       <TooltipTrigger asChild>{button}</TooltipTrigger>
-      <TooltipContent
-        pointerPosition={dir === "rtl" ? "center-right" : "center-left"}
-        showShortcut={false}
-        side={dir === "rtl" ? "left" : "right"}
-      >
-        {resolvedTooltip}
-      </TooltipContent>
+      {collapsed ? (
+        <TooltipContent
+          pointerPosition={dir === "rtl" ? "center-right" : "center-left"}
+          showShortcut={false}
+          side={dir === "rtl" ? "left" : "right"}
+        >
+          {resolvedTooltip}
+        </TooltipContent>
+      ) : null}
     </Tooltip>
   )
 })
 
-/** Nested menu list that unmounts when the parent sidebar is collapsed. */
+/** Nested menu list that contracts before the icon rail settles. */
 function SidebarMenuSub({ className, ...props }: SidebarMenuSubProps) {
   const { collapsed } = useSidebarContext()
-  if (collapsed) return null
 
   return (
-    <ul
-      data-slot="sidebar-menu-sub"
-      className={cn("m-0 flex w-full list-none flex-col p-0", className)}
-      {...props}
-    />
+    <div
+      aria-hidden={collapsed || undefined}
+      data-slot="sidebar-menu-sub-motion"
+      inert={collapsed ? true : undefined}
+      className={cn(
+        "grid w-full grid-rows-[1fr] opacity-[var(--bh-opacity-100)] transition-[grid-template-rows,opacity] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        collapsed &&
+          "pointer-events-none grid-rows-[0fr] opacity-[var(--bh-opacity-0)]"
+      )}
+    >
+      <ul
+        data-slot="sidebar-menu-sub"
+        className={cn(
+          "m-0 flex min-h-0 w-full list-none flex-col overflow-hidden p-0",
+          className
+        )}
+        {...props}
+      />
+    </div>
   )
 }
 
@@ -958,7 +1247,6 @@ const SidebarMenuTreeItem = React.forwardRef<
   ref
 ) {
   const { collapsed } = useSidebarContext()
-  if (collapsed) return null
 
   const label = getSlottableLabel(children, asChild)
   const resolvedLabel =
@@ -998,18 +1286,23 @@ const SidebarMenuTreeItem = React.forwardRef<
   const commonProps = {
     "aria-current": active ? ("page" as const) : undefined,
     "aria-expanded": showChevron ? expanded : undefined,
+    "aria-hidden": collapsed || undefined,
     "aria-label": resolvedLabel,
     "data-active": active ? "true" : "false",
+    "data-collapsed": collapsed ? "true" : "false",
     "data-level": String(level),
     "data-slot": "sidebar-menu-tree-item",
     "data-state": state,
+    inert: collapsed ? true : undefined,
     className: cn(
-      "flex h-[var(--bh-sidebar-tree-item-height)] w-full min-w-0 items-center gap-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-lg-8)] border-[length:var(--bh-border-width-strong)] border-transparent pe-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)] outline-none transition-[background-color,border-color,color]",
+      "flex h-[var(--bh-sidebar-tree-item-height)] w-full min-w-0 items-center gap-[var(--bh-space-sm-6)] overflow-hidden rounded-[var(--bh-radius-lg-8)] border-[length:var(--bh-border-width-strong)] border-transparent pe-[var(--bh-space-sm-6)] text-start text-[length:var(--bh-text-body-xs-regular-font-size)] font-[var(--bh-text-body-xs-regular-font-weight)] leading-[var(--bh-text-body-xs-regular-line-height)] tracking-[var(--bh-text-body-xs-regular-letter-spacing)] text-[var(--bh-content-subtle)] opacity-[var(--bh-opacity-100)] outline-none transition-[height,gap,padding,opacity,background-color,border-color,color] duration-[var(--bh-sidebar-motion-duration-content)] delay-[var(--bh-sidebar-motion-delay-content)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
       "hover:rounded-[var(--bh-radius-md-6)] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:rounded-[var(--bh-radius-md-6)] focus-visible:border-[var(--bh-border-focus)]",
       "data-[state=hover]:rounded-[var(--bh-radius-md-6)] data-[state=hover]:bg-[var(--bh-interactive-ghost-hover)] data-[state=focus]:rounded-[var(--bh-radius-md-6)] data-[state=focus]:border-[var(--bh-border-focus)]",
       (active || state === "active") &&
         "rounded-[var(--bh-radius-md-6)] bg-[var(--bh-interactive-ghost-active)] font-[var(--bh-text-body-xs-semibold-font-weight)] text-[var(--bh-content-default)]",
       treeLevelClasses[level],
+      collapsed &&
+        "pointer-events-none h-0 gap-0 border-0 p-0 opacity-[var(--bh-opacity-0)] delay-0",
       className
     ),
   }
@@ -1036,32 +1329,42 @@ function SidebarTreeGroup({
   ...props
 }: SidebarTreeGroupProps) {
   const { collapsed } = useSidebarContext()
-  if (collapsed) return null
 
   return (
     <div
-      data-slot="sidebar-tree-group"
+      aria-hidden={collapsed || undefined}
+      data-slot="sidebar-tree-group-motion"
+      inert={collapsed ? true : undefined}
       className={cn(
-        "flex w-full flex-col items-start gap-[var(--bh-space-sm-6)] pb-[var(--bh-space-sm-6)] pt-[var(--bh-space-xl-12)]",
-        className
+        "grid w-full grid-rows-[1fr] opacity-[var(--bh-opacity-100)] transition-[grid-template-rows,opacity] duration-[var(--bh-sidebar-motion-duration)] ease-[var(--bh-sidebar-motion-easing)] motion-reduce:transition-none",
+        collapsed &&
+          "pointer-events-none grid-rows-[0fr] opacity-[var(--bh-opacity-0)]"
       )}
-      {...props}
     >
-      {label ? (
-        <SidebarGroupLabel
-          actions={actions}
-          className={cn(
-            expandable &&
-              "[&_[data-slot=sidebar-group-label-expand]]:opacity-[var(--bh-opacity-100)]"
-          )}
-          expandable={expandable}
-          expandIcon={expandIcon ?? (expandable ? <ChevronDownIcon /> : undefined)}
-        >
-          {label}
-        </SidebarGroupLabel>
-      ) : null}
-      <div data-slot="sidebar-tree-menu" className="flex w-full flex-col">
-        {children}
+      <div
+        data-slot="sidebar-tree-group"
+        className={cn(
+          "flex min-h-0 w-full flex-col items-start gap-[var(--bh-space-sm-6)] overflow-hidden pb-[var(--bh-space-sm-6)] pt-[var(--bh-space-xl-12)]",
+          className
+        )}
+        {...props}
+      >
+        {label ? (
+          <SidebarGroupLabel
+            actions={actions}
+            className={cn(
+              expandable &&
+                "[&_[data-slot=sidebar-group-label-expand]]:opacity-[var(--bh-opacity-100)]"
+            )}
+            expandable={expandable}
+            expandIcon={expandIcon ?? (expandable ? <ChevronDownIcon /> : undefined)}
+          >
+            {label}
+          </SidebarGroupLabel>
+        ) : null}
+        <div data-slot="sidebar-tree-menu" className="flex w-full flex-col">
+          {children}
+        </div>
       </div>
     </div>
   )
@@ -1084,7 +1387,7 @@ const SidebarToggle = React.forwardRef<HTMLButtonElement, SidebarToggleProps>(
         type={type}
         className={cn(
           "inline-flex size-[var(--bh-sidebar-header-action-size)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] border border-transparent bg-[var(--bh-interactive-ghost-default)] text-[var(--bh-content-default)] outline-none transition-[background-color,border-color,box-shadow,color]",
-          "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--shadow-button-focus)]",
+          "hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:border-[var(--bh-border-focus)] focus-visible:shadow-[var(--elevation-button-focus)]",
           className
         )}
         onClick={(event) => {
@@ -1203,6 +1506,7 @@ export {
   SidebarTrigger,
 }
 export type {
+  SidebarFooterProps,
   SidebarFooterUserProps,
   SidebarGroupActionProps,
   SidebarGroupLabelProps,
@@ -1223,6 +1527,7 @@ export type {
   SidebarProviderProps,
   SidebarRailProps,
   SidebarSectionProps,
+  SidebarSize,
   SidebarToggleProps,
   SidebarTreeGroupProps,
   SidebarTriggerProps,