@flamingo-stack/openframe-frontend-core 0.0.780 → 0.0.782

package/src/components/navigation/header-button.tsx

@@ -2,6 +2,7 @@
 
 import type React from 'react';
 import { cn } from '../../utils/cn';
+import { Button } from '../ui/button';
 import { UnreadDot } from './unread-dot';
 
 export interface HeaderButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -25,19 +26,14 @@ export function HeaderButton({
   ...props
 }: HeaderButtonProps) {
   return (
-    <button
+    <Button
+      variant="cell"
+      data-state={isActive ? 'active' : undefined}
       className={cn(
-        'flex shrink-0 items-center justify-center',
-        'transition-colors duration-200',
         // Square cell width follows the TopNavigation size (56px small /
         // 72px big) via the shell's --top-nav-cell var; 56px fallback for
         // standalone use.
-        'h-full w-[var(--top-nav-cell,3.5rem)]',
-        isActive
-          ? 'bg-ods-bg-active text-ods-text-primary'
-          : // Transparent at rest so the cell inherits the bar's background
-            // (TopNavigation `backgroundClassName` can differ per platform).
-            'bg-transparent text-ods-text-secondary hover:bg-ods-bg-hover',
+        'w-[var(--top-nav-cell,3.5rem)]',
         className,
       )}
       {...props}
@@ -50,7 +46,7 @@ export function HeaderButton({
       ) : (
         icon
       )}
-    </button>
+    </Button>
   );
 }
 

package/src/components/navigation/header-mingo-button.tsx

@@ -4,6 +4,7 @@ import type React from 'react';
 import { cn } from '../../utils/cn';
 import { AgentMark } from '../agent-mark';
 import { XmarkIcon } from '../icons-v2-generated';
+import { Button } from '../ui/button';
 
 export interface HeaderMingoButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /** Active/pressed state — set to `true` while the Mingo drawer is open. */
@@ -37,22 +38,17 @@ export function HeaderMingoButton({
 }: HeaderMingoButtonProps) {
   const showClose = isActive && (iconOnly || closeWhenActive);
   return (
-    <button
+    <Button
+      variant="cell"
       type="button"
       aria-label={showClose ? 'Close Mingo AI' : 'Mingo AI'}
       aria-pressed={isActive}
       className={cn(
-        'flex h-full shrink-0 items-center gap-2 px-4',
         // Fixed 140px cell from md, so the header's right-hand cluster has a
         // known width and a loading placeholder can reserve it exactly
         // (`AppHeaderProps.loadingActionCells` → `'wide'`). Content-width below
         // md, and in `iconOnly` mode, where the control is a square affordance.
-        !iconOnly && 'md:w-[140px] md:justify-center',
-        'transition-colors duration-200',
-        'focus:outline-none focus-visible:ring-2 focus-visible:ring-ods-accent',
-        // Transparent at rest so the cell inherits the bar's background
-        // (TopNavigation `backgroundClassName` can differ per platform).
-        'bg-transparent text-ods-text-primary hover:bg-ods-bg-hover',
+        !iconOnly && 'md:w-[140px]',
         className,
       )}
       {...props}
@@ -68,7 +64,7 @@ export function HeaderMingoButton({
         <AgentMark agent="mingo" className="h-6 w-6 shrink-0" />
       )}
       {!iconOnly && <span className="whitespace-nowrap font-bold tracking-[-0.36px] text-h3">Mingo AI</span>}
-    </button>
+    </Button>
   );
 }
 

package/src/components/navigation/header-organization-filter.tsx

@@ -3,6 +3,7 @@
 import { cn } from '../../utils/cn';
 import { Filter02Icon } from '../icons-v2-generated';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui';
+import { Button } from '../ui/button';
 
 export interface HeaderOrganizationFilterOrganization {
   id: string;
@@ -37,16 +38,7 @@ export function HeaderOrganizationFilter({
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <button
-          className={cn(
-            'flex h-full items-center gap-4 px-4',
-            // Transparent so the cell inherits the bar's background.
-            'border-l border-ods-border bg-transparent',
-            'w-[240px] shrink-0',
-            'transition-colors hover:bg-ods-bg-hover',
-            className,
-          )}
-        >
+        <Button variant="cell" className={cn('w-[240px] justify-start', className)}>
           <Filter02Icon className="h-4 w-4 shrink-0 text-ods-text-secondary" />
           <div className="flex min-w-0 flex-col items-start justify-center">
             <span className="truncate text-ods-text-primary text-h5" title={displayName}>
@@ -56,7 +48,7 @@ export function HeaderOrganizationFilter({
               <span className="truncate text-ods-text-secondary text-h6">{deviceCount.toLocaleString()} Devices</span>
             )}
           </div>
-        </button>
+        </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" className="min-w-[240px]">
         <DropdownMenuItem onClick={() => onOrgChange?.('')}>All Organizations</DropdownMenuItem>

package/src/components/navigation/mobile-burger-menu.tsx

@@ -77,22 +77,15 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenuImpl({
     const isActive = item.isActive ?? false;
 
     return (
-      <button
+      <Button
+        variant="row"
         key={item.id}
         onClick={() => handleItemClick(item)}
         disabled={disabled}
-        className={cn(
-          'relative flex items-center gap-1 p-3',
-          'focus:outline-none focus-visible:outline-none',
-          'transition-colors duration-200',
-          'rounded-md border border-ods-border bg-ods-card',
-          !disabled && 'hover:bg-ods-bg-hover',
-          isGridItem ? 'w-full min-w-0' : 'w-full',
-          // Active state
-          isActive && !disabled && 'border-ods-accent',
-          // Disabled state
-          disabled && 'cursor-not-allowed opacity-50',
-        )}
+        data-state={isActive && !disabled ? 'active' : undefined}
+        // Every entry is a bordered card; the current page's takes the accent border.
+        data-tone="framed"
+        className={isGridItem ? 'min-w-0' : undefined}
         aria-current={isActive ? 'page' : undefined}
         // The same name the sidebar row announces — "Scripts (Beta)" — rather than
         // the content read raw, which Chrome hands over as "Scripts BETA".
@@ -121,7 +114,7 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenuImpl({
           </span>
           {item.badge && <NavigationItemBadge compact label={item.badge} />}
         </span>
-      </button>
+      </Button>
     );
   };
 
@@ -248,18 +241,10 @@ export const MobileBurgerMenu = React.memo(function MobileBurgerMenuImpl({
 
           {/* Logout Button */}
           {onLogout && (
-            <button
-              onClick={onLogout}
-              disabled={disabled}
-              className={cn(
-                'flex w-full items-center gap-1 rounded-md border border-ods-border bg-ods-card p-3 transition-colors',
-                !disabled && 'hover:bg-ods-bg-hover',
-                disabled && 'cursor-not-allowed opacity-50',
-              )}
-            >
+            <Button variant="row" data-tone="framed" onClick={onLogout} disabled={disabled}>
               <Logout02Icon className="size-4 text-ods-error" />
               <span className="flex-1 text-left text-ods-text-primary text-h6">Log Out</span>
-            </button>
+            </Button>
           )}
         </div>
       </div>

package/src/components/navigation/multi-level-navigation.tsx

@@ -4,6 +4,7 @@ import { ChevronDown, ChevronUp, FileText, Folder, FolderOpen } from 'lucide-rea
 import { cn } from '../../utils/cn';
 import { DEFAULT_FOLDER_INDEX_FILE as CANONICAL_FOLDER_INDEX_FILE } from '../../utils/doc-tree-nav';
 import { MediaSkeleton, TextLineSkeleton } from '../loading/unified-skeleton';
+import { BUTTON_KIND_CLASS, Button } from '../ui/button';
 import { useLoadingScope } from '../ui/loading-scope';
 
 export interface NavigationNode {
@@ -48,16 +49,14 @@ const DEFAULT_FOLDER_INDEX_FILE = CANONICAL_FOLDER_INDEX_FILE;
 const NAV_LIST_CLASS = 'space-y-2';
 const NAV_ITEM_CLASS = 'space-y-1';
 const NAV_ROW_FRAME_CLASS = 'relative w-full rounded-lg border transition-all duration-150';
-const NAV_ROW_CONTENT_CLASS = 'flex w-full items-center rounded-lg px-2 text-h6';
+/** A row's button in its line (the folder toggle, when there is one, sits beside it). */
+const NAV_ROW_LAYOUT_CLASS = 'min-w-0 flex-1';
 /** Each entry's side padding, around its row frame. */
 const NAV_ROW_PAD_CLASS = 'px-2';
-/**
- * A row's height (the desktop tree's, the dropdown's), with the folder toggle's square box at the row's end and the
- * room the name leaves for it: read by the loaded rows and by their skeleton.
- */
+/** A row's height (the desktop tree's, the dropdown's): read by the loaded rows and by their skeleton. */
 const NAV_ROW_HEIGHT = {
-  desktop: { row: 'h-12', toggle: 'h-12 w-12', toggleRoom: 'pr-12' },
-  mobile: { row: 'h-11', toggle: 'h-11 w-11', toggleRoom: 'pr-11' },
+  desktop: 'h-12',
+  mobile: 'h-11',
 } as const;
 /**
  * How many rows each skeleton draws (the desktop tree, the mobile dropdown) when its host states no count. The tree
@@ -87,7 +86,7 @@ function NavigationRowSkeleton({
   return (
     <div className={cn(NAV_ROW_PAD_CLASS, indentClass)}>
       <div className={cn(NAV_ROW_FRAME_CLASS, 'border-ods-border bg-ods-card')}>
-        <div className={cn(NAV_ROW_CONTENT_CLASS, rowHeightClass)}>
+        <div className={cn(BUTTON_KIND_CLASS.row, rowHeightClass)}>
           <MediaSkeleton.Icon size="sm" className="mr-2 flex-shrink-0" />
           <TextLineSkeleton type="h6" className={NAV_SKELETON_LABEL_WIDTHS[index % NAV_SKELETON_LABEL_WIDTHS.length]} />
         </div>
@@ -127,7 +126,7 @@ function NavigationTreeSkeleton({
 }
 
 /** The documentation tree while it is read: its rows' frames, each with an icon box and a bar of its name. */
-export function MultiLevelNavigationSkeleton({
+function MultiLevelNavigationSkeleton({
   rows = MULTI_LEVEL_NAVIGATION_SKELETON_ROWS,
   className,
 }: {
@@ -137,7 +136,7 @@ export function MultiLevelNavigationSkeleton({
   return (
     <NavigationTreeSkeleton
       rows={rows}
-      rowHeightClass={NAV_ROW_HEIGHT.desktop.row}
+      rowHeightClass={NAV_ROW_HEIGHT.desktop}
       indentClass={NAV_INDENT_CLASS.desktop}
       className={className}
     />
@@ -145,7 +144,7 @@ export function MultiLevelNavigationSkeleton({
 }
 
 /** The mobile documentation dropdown while it is read: the same rows at the dropdown's height. */
-export function MobileNavigationDropdownSkeleton({
+function MobileNavigationDropdownSkeleton({
   rows = MOBILE_NAVIGATION_SKELETON_ROWS,
   className,
 }: {
@@ -155,7 +154,7 @@ export function MobileNavigationDropdownSkeleton({
   return (
     <NavigationTreeSkeleton
       rows={rows}
-      rowHeightClass={NAV_ROW_HEIGHT.mobile.row}
+      rowHeightClass={NAV_ROW_HEIGHT.mobile}
       indentClass={NAV_INDENT_CLASS.mobile}
       className={className}
     />
@@ -268,14 +267,12 @@ function NavigationItem({
           )}
         >
           <div className="relative flex items-center">
-            <button
-              className={cn(
-                NAV_ROW_CONTENT_CLASS,
-                NAV_ROW_HEIGHT.desktop.row,
-                'text-ods-text-primary transition-all duration-150',
-                !isSelected && 'hover:bg-ods-bg-hover',
-                hasChildren && NAV_ROW_HEIGHT.desktop.toggleRoom,
-              )}
+            <Button
+              variant="row"
+              data-state={isSelected ? 'active' : undefined}
+              // The open page holds its line's border-grey fill: no hover over it.
+              data-tone="muted"
+              className={cn(NAV_ROW_LAYOUT_CLASS, NAV_ROW_HEIGHT.desktop)}
               onClick={() => onNodeClick(node)}
               aria-label={`${isSelected ? 'Selected' : 'Select'} ${node.name}`}
             >
@@ -298,14 +295,13 @@ function NavigationItem({
                   README
                 </span>
               )}
-            </button>
+            </Button>
 
             {hasChildren && (
-              <button
-                className={cn(
-                  'absolute right-0 top-0 flex items-center justify-center text-ods-text-secondary transition-colors duration-150 hover:text-ods-text-primary',
-                  NAV_ROW_HEIGHT.desktop.toggle,
-                )}
+              <Button
+                variant="bare"
+                size="icon-sm"
+                className="mr-[var(--spacing-system-xxs)] shrink-0"
                 onClick={e => {
                   e.stopPropagation();
                   if (onToggleExpand) {
@@ -316,8 +312,8 @@ function NavigationItem({
                 }}
                 aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${node.name}`}
               >
-                {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
-              </button>
+                {isExpanded ? <ChevronUp /> : <ChevronDown />}
+              </Button>
             )}
           </div>
 
@@ -402,14 +398,12 @@ function MobileNavigationItem({
           )}
         >
           <div className="relative flex items-center">
-            <button
-              className={cn(
-                NAV_ROW_CONTENT_CLASS,
-                NAV_ROW_HEIGHT.mobile.row,
-                'text-ods-text-primary transition-all duration-150',
-                !isSelected && 'hover:bg-ods-bg-hover',
-                hasChildren && NAV_ROW_HEIGHT.mobile.toggleRoom,
-              )}
+            <Button
+              variant="row"
+              data-state={isSelected ? 'active' : undefined}
+              // The open page holds its line's border-grey fill: no hover over it.
+              data-tone="muted"
+              className={cn(NAV_ROW_LAYOUT_CLASS, NAV_ROW_HEIGHT.mobile)}
               onClick={() => onNodeClick(node)}
             >
               <span className="mr-2 flex-shrink-0">
@@ -431,14 +425,13 @@ function MobileNavigationItem({
                   README
                 </span>
               )}
-            </button>
+            </Button>
 
             {hasChildren && (
-              <button
-                className={cn(
-                  'absolute right-0 top-0 flex items-center justify-center text-ods-text-secondary transition-colors duration-150 hover:text-ods-text-primary',
-                  NAV_ROW_HEIGHT.mobile.toggle,
-                )}
+              <Button
+                variant="bare"
+                size="icon-sm"
+                className="mr-[var(--spacing-system-xxs)] shrink-0"
                 onClick={e => {
                   e.stopPropagation();
                   if (onToggleExpand) {
@@ -449,8 +442,8 @@ function MobileNavigationItem({
                 }}
                 aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${node.name}`}
               >
-                {isExpanded ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
-              </button>
+                {isExpanded ? <ChevronUp /> : <ChevronDown />}
+              </Button>
             )}
           </div>
 

package/src/components/navigation/navigation-sidebar-item.tsx

@@ -5,15 +5,20 @@ import Link from '../../embed-shims/next-link';
 import type { NavigationSidebarItem } from '../../types/navigation';
 import { cn } from '../../utils';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { BUTTON_KIND_CLASS, Button } from '../ui/button';
+import { useLoadingScope } from '../ui/loading-scope';
 import { NavigationItemBadge } from './navigation-item-badge';
 import { UnreadDot } from './unread-dot';
 
+/** A sidebar row's height: the loaded row (a `rail` button or link) and its loading form are one box. */
+const NAV_SIDEBAR_ROW_LAYOUT_CLASS = 'h-14';
+
 interface IconProps {
   color?: string;
   className?: string;
 }
 
-export interface NavigationSidebarItemButtonProps {
+interface LoadedNavigationSidebarItemButtonProps {
   item: NavigationSidebarItem;
   /** "You are on this page" — pathname-derived, and the only thing that carries `aria-current`. */
   isActive: boolean;
@@ -28,6 +33,14 @@ export interface NavigationSidebarItemButtonProps {
   onClick: (item: NavigationSidebarItem, event?: MouseEvent) => void;
 }
 
+/**
+ * The entry and its handlers, or `loading` while the navigation is read (`NavigationSidebarConfig.loading`): the
+ * row then draws its own loading form (also in a loading scope). `showLabel` is the sidebar's minimized state.
+ */
+export type NavigationSidebarItemButtonProps =
+  | (LoadedNavigationSidebarItemButtonProps & { loading?: boolean })
+  | (Partial<LoadedNavigationSidebarItemButtonProps> & { loading: true; showLabel: boolean });
+
 /**
  * One sidebar entry.
  *
@@ -42,57 +55,28 @@ export interface NavigationSidebarItemButtonProps {
  * destination to link to) and for the disabled state, which an anchor cannot
  * express.
  */
-export const NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonImpl({
+export const NavigationSidebarItemButton = memo(function NavigationSidebarItemButtonSwitch(
+  props: NavigationSidebarItemButtonProps,
+) {
+  // ONE switch: while the navigation is read (`loading`, or a loading scope) the row is its own loading form.
+  if (useLoadingScope() || props.loading) return <NavigationSidebarItemSkeleton showLabel={props.showLabel} />;
+  return <LoadedNavigationSidebarItemButton {...props} />;
+});
+
+function LoadedNavigationSidebarItemButton({
   item,
   isActive,
   isPending,
   showLabel,
   disabled,
   onClick,
-}: NavigationSidebarItemButtonProps) {
+}: LoadedNavigationSidebarItemButtonProps) {
   const unreadCount = item.unreadCount ?? 0;
   const hasUnread = unreadCount > 0;
   // The accessible name carries the stamp — "Devices (Beta)" — because `aria-label`
   // replaces the content; the rail's tooltip is the same string.
   const name = item.badge ? `${item.label} (${item.badge})` : item.label;
 
-  const className = cn(
-    // `isolate` scopes the hover layer's negative z-index to this row, so it
-    // paints over the row's own background and under its content instead of
-    // sliding behind the sidebar.
-    'relative isolate flex w-full items-center justify-start',
-    'h-14 p-[var(--spacing-system-m)]',
-    // The hover/pending wash is its own LAYER, and that separation is the whole
-    // point. Hover and active both want the row's background-color, so a
-    // `transition-colors` that smooths hover necessarily smooths the accent too
-    // — and it runs on the OUTGOING row as well as the incoming one. Measured on
-    // a real navigation: for 150ms two rows carried the accent background AND
-    // the accent bar, mid-fade, with nothing to say which one was the page you
-    // were actually on. Shortening it (300ms -> 150ms) only shortened the lie.
-    //
-    // Split apart, each gets the timing its meaning calls for: the wash fades,
-    // because it is decoration reacting to a cursor; the accent switches in a
-    // single frame, because it is a statement of fact — exactly one row is the
-    // current page, at every instant, including the instant the route commits.
-    "after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-ods-bg-hover after:opacity-0 after:transition-opacity after:duration-150 after:content-['']",
-    "before:absolute before:bottom-0 before:left-0 before:top-0 before:w-1 before:content-['']",
-    // Pending borrows the HOVER weight and nothing else — no accent bar, no
-    // accent text, no `aria-current`. It says "this row is working", not "this
-    // is where you are", and it reads as the row staying pressed under the
-    // cursor, which is exactly what happened.
-    !isActive && !disabled && 'text-ods-text-primary hover:after:opacity-100 [&_svg]:fill-ods-text-secondary',
-    !isActive && !disabled && isPending && 'after:opacity-100',
-    !isActive && disabled && 'text-ods-text-secondary [&_svg]:fill-ods-text-secondary',
-    isActive &&
-      !disabled && [
-        'bg-[var(--ods-open-yellow-light)] text-ods-accent',
-        '[&_svg]:fill-ods-accent',
-        'before:bg-ods-accent',
-      ],
-    isActive && disabled && 'text-ods-text-secondary [&_svg]:fill-ods-text-secondary',
-    disabled && 'cursor-not-allowed opacity-50',
-  );
-
   const content: ReactNode = (
     <>
       <div className="relative flex flex-shrink-0 items-center justify-center">
@@ -128,31 +112,44 @@ export const NavigationSidebarItemButton = memo(function NavigationSidebarItemBu
   );
 
   const shared = {
-    className,
     title: !showLabel ? name : undefined,
     'aria-label': name,
     'aria-current': isActive ? ('page' as const) : undefined,
+    // A row whose route is still committing: announced, never drawn as the current page.
+    'aria-busy': isPending || undefined,
   };
+  // The current page's entry: the rail kind's accent fill, text and bar (`aria-busy` above holds its hover wash).
+  const rowState = isActive && !disabled ? 'active' : undefined;
 
   // An entry with a custom onClick has no destination of its own, and a
   // disabled one must not be followable — both stay buttons.
   if (disabled || !item.path || item.onClick) {
     return (
-      <button type="button" onClick={event => onClick(item, event)} disabled={disabled} {...shared}>
+      <Button
+        variant="rail"
+        type="button"
+        onClick={event => onClick(item, event)}
+        disabled={disabled}
+        data-state={rowState}
+        className={NAV_SIDEBAR_ROW_LAYOUT_CLASS}
+        {...shared}
+      >
         {content}
-      </button>
+      </Button>
     );
   }
 
   return (
-    <Link href={item.path} onClick={event => onClick(item, event)} {...shared}>
-      {content}
-    </Link>
+    <Button asChild variant="rail" data-state={rowState} className={NAV_SIDEBAR_ROW_LAYOUT_CLASS}>
+      <Link href={item.path} onClick={event => onClick(item, event)} {...shared}>
+        {content}
+      </Link>
+    </Button>
   );
-});
+}
 
 /**
- * One placeholder entry, for `NavigationSidebarConfig.loading`.
+ * One entry's loading form (`NavigationSidebarItemButton loading`, for `NavigationSidebarConfig.loading`).
  *
  * Deliberately in this file, beside `NavigationSidebarItemButton`: the two must
  * agree on `h-14`, the `p-[var(--spacing-system-m)]` inset, the 24px icon box and
@@ -161,9 +158,9 @@ export const NavigationSidebarItemButton = memo(function NavigationSidebarItemBu
  * `showLabel` is the sidebar's own minimized state, so the caller passes what it
  * already passes the real row — no separate width handling.
  */
-export function NavigationSidebarItemSkeleton({ showLabel }: { showLabel: boolean }) {
+function NavigationSidebarItemSkeleton({ showLabel }: { showLabel: boolean }) {
   return (
-    <div className="flex h-14 w-full items-center justify-start p-[var(--spacing-system-m)]" aria-hidden="true">
+    <div className={cn(BUTTON_KIND_CLASS.rail, NAV_SIDEBAR_ROW_LAYOUT_CLASS)} aria-hidden="true">
       <div className="relative flex flex-shrink-0 items-center justify-center">
         <UnifiedSkeleton className="h-6 w-6 rounded" />
       </div>

package/src/components/navigation/navigation-sidebar-toggle.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '../../utils';
 import { Chevrons03LeftIcon } from '../icons-v2-generated';
+import { Button } from '../ui/button';
 
 export interface NavigationSidebarToggleProps {
   minimized: boolean;
@@ -12,15 +13,11 @@ export interface NavigationSidebarToggleProps {
 export function NavigationSidebarToggle({ minimized, showLabel, onToggle }: NavigationSidebarToggleProps) {
   return (
     <div className="border-t border-ods-border">
-      <button
+      <Button
+        variant="row"
         onClick={onToggle}
-        className={cn(
-          'relative flex w-full items-center justify-start',
-          'h-14 p-[var(--spacing-system-m)]',
-          'transition-colors duration-300',
-          '[&_svg]:transition-colors [&_svg]:duration-300',
-          'text-ods-text-primary hover:bg-ods-bg-hover',
-        )}
+        // The sidebar's row height (its entries are `h-14` too).
+        className="h-14"
         title={minimized ? 'Hide Menu' : undefined}
         aria-label={'Hide Menu'}
       >
@@ -46,7 +43,7 @@ export function NavigationSidebarToggle({ minimized, showLabel, onToggle }: Navi
         >
           Hide Menu
         </span>
-      </button>
+      </Button>
     </div>
   );
 }

package/src/components/navigation/navigation-sidebar.tsx

@@ -9,7 +9,7 @@ import { useLgUp, useMdUp } from '../../hooks/ui/use-media-query';
 import type { NavigationSidebarConfig, NavigationSidebarItem } from '../../types/navigation';
 import { cn } from '../../utils';
 import { NavigationSidebarHeader } from './navigation-sidebar-header';
-import { NavigationSidebarItemButton, NavigationSidebarItemSkeleton } from './navigation-sidebar-item';
+import { NavigationSidebarItemButton } from './navigation-sidebar-item';
 import { NavigationSidebarToggle } from './navigation-sidebar-toggle';
 
 const MINIMIZED_WIDTH = 56; // 3.5rem = 56px
@@ -376,7 +376,9 @@ export function NavigationSidebar({ config, disabled = false, pushOnTablet = fal
                 and each placeholder row is already `aria-hidden`. */}
             <nav className="flex flex-col" aria-label="Primary navigation" aria-busy={!!loadingRows}>
               {loadingRows
-                ? loadingRows.primary.map(key => <NavigationSidebarItemSkeleton key={key} showLabel={showLabel} />)
+                ? loadingRows.primary.map(key => (
+                    <NavigationSidebarItemButton key={key} loading showLabel={showLabel} />
+                  ))
                 : primaryItems.map(item => (
                     <NavigationSidebarItemButton
                       key={item.id}
@@ -394,7 +396,9 @@ export function NavigationSidebar({ config, disabled = false, pushOnTablet = fal
           {(loadingRows ? loadingRows.secondary.length > 0 : secondaryItems.length > 0) && (
             <nav className="flex flex-col" aria-label="Secondary navigation" aria-busy={!!loadingRows}>
               {loadingRows
-                ? loadingRows.secondary.map(key => <NavigationSidebarItemSkeleton key={key} showLabel={showLabel} />)
+                ? loadingRows.secondary.map(key => (
+                    <NavigationSidebarItemButton key={key} loading showLabel={showLabel} />
+                  ))
                 : secondaryItems.map(item => (
                     <NavigationSidebarItemButton
                       key={item.id}

package/src/components/navigation/sticky-section-nav.tsx

@@ -6,6 +6,7 @@ import Link from '../../embed-shims/next-link';
 import { cn } from '../../utils';
 import { scrollElementIntoView } from '../../utils/scroll-into-view';
 import { TextLineSkeleton } from '../loading/unified-skeleton';
+import { BUTTON_KIND_CLASS, Button } from '../ui/button';
 import { useLoadingScope } from '../ui/loading-scope';
 import { ScrollShadow } from '../ui/scroll-fade';
 
@@ -32,7 +33,9 @@ const PILL_CLASS = cn(
 );
 const VERTICAL_NAV_CLASS = 'relative bg-ods-bg';
 const VERTICAL_ROW_CLASS = 'relative flex h-10 w-full items-stretch transition-all duration-200';
-const VERTICAL_BUTTON_CLASS = 'relative flex flex-1 cursor-pointer items-center gap-2 px-3 py-2';
+/** A section's tab in its row; its box is the `tab` kind's, which the skeleton draws too. */
+const VERTICAL_BUTTON_LAYOUT_CLASS = 'flex-1 justify-start';
+const VERTICAL_BUTTON_SKELETON_CLASS = cn(BUTTON_KIND_CLASS.tab, VERTICAL_BUTTON_LAYOUT_CLASS);
 
 export interface StickyNavSection {
   id: string;
@@ -197,24 +200,17 @@ export function StickySectionNav({
           )}
 
           {/* Navigation button */}
-          <button
+          <Button
+            variant="tab"
             onClick={() => onSectionClick(section.id)}
             // The ribbon is the visual; this is the same state for assistive
             // tech (a table of contents marks the reader's current location).
             aria-current={activeSection === section.id ? 'location' : undefined}
-            className={VERTICAL_BUTTON_CLASS}
+            data-state={activeSection === section.id ? 'active' : undefined}
+            className={VERTICAL_BUTTON_LAYOUT_CLASS}
           >
-            <span
-              className={cn(
-                'text-left transition-all duration-200 text-h6',
-                activeSection === section.id
-                  ? 'text-ods-text-primary'
-                  : 'text-ods-text-secondary hover:text-ods-text-primary',
-              )}
-            >
-              {section.label}
-            </span>
-          </button>
+            <span className="text-left text-h6">{section.label}</span>
+          </Button>
         </div>
       ))}
     </nav>
@@ -228,7 +224,7 @@ const SKELETON_LABEL_WIDTHS = ['w-24', 'w-32', 'w-20', 'w-28', 'w-24'] as const;
  * The section navigation while its sections are read: the same bar (horizontal: its brand and action as given,
  * the sections as pill boxes) or list (vertical: its rail, each row a bar of its label).
  */
-export function StickySectionNavSkeleton({
+function StickySectionNavSkeleton({
   orientation = 'vertical',
   count = STICKY_SECTION_NAV_SKELETON_COUNT,
   brand,
@@ -268,7 +264,7 @@ export function StickySectionNavSkeleton({
       />
       {widths.map((width, i) => (
         <div key={i} className={VERTICAL_ROW_CLASS}>
-          <div className={VERTICAL_BUTTON_CLASS}>
+          <div className={VERTICAL_BUTTON_SKELETON_CLASS}>
             <TextLineSkeleton type="h6" className={width} />
           </div>
         </div>