diff --git a/AGENTS.md b/AGENTS.md
index 615f10f..78b2311 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -633,6 +633,23 @@ grows (clipped controls, cramped rows, same-row controls that stop matching heig
 
 - Every interactive control sets `cursor-pointer` (Button, Switch, segmented
   item, …). Disabled flips to `cursor-not-allowed`.
+- **It must be set explicitly — there is no safety net.** Tailwind v4's
+  preflight dropped the v3-era `button, [role=button] { cursor: pointer }`
+  rule, so every clickable element falls back to the UA default (the plain
+  arrow) unless the component sets the class itself. When adding a new
+  interactive component, `cursor-pointer` is part of the base class, not an
+  afterthought — a shared trigger class (e.g. `lib/trigger.ts`
+  `selectTriggerClass`) carries it once for all consumers.
+- **Deliberate non-pointer exceptions** (do not "fix" these):
+  - **Menu rows and menu labels** (`lib/menu.ts`) use `cursor-default` — the
+    macOS menu convention: an open menu is a transient command surface the
+    pointer glides over, not a page of buttons.
+  - **Select scroll up/down buttons** — part of the menu surface, same
+    convention.
+  - **Text-field addons** (`InputGroup` inline text/icons) use `cursor-text` —
+    they belong to the field's text zone.
+  - **Resize rails** (`SidebarRail`) use the resize cursor; **the ScrollArea
+    thumb** keeps its default (drag affordance is its own vocabulary).
 
 ## Dirty patterns — anti-examples (do NOT copy)
 
@@ -842,3 +859,13 @@ When you lock a new cross-cutting decision (a color role, a duration, an icon
 rule, a shape law): (1) add/identify the token in `style.css`, (2) document it
 here, (3) add a guard check in `scripts/check-ui-contract.mjs` if it is
 mechanically detectable. A decision that is not written here will be re-invented.
+
+## Nested menu alignment
+
+DropdownMenuSubContent 与 ContextMenuSubContent 默认将子菜单首个条目的垂直中心对齐父触发条目的中心，而非对齐两个矩形的顶边。共享 useSubmenuAlignment 测量条目、边框与内框，适应字体缩放和异步内容；调用层不添加补偿偏移。显式 alignOffset 仍可覆盖默认规则。碰撞处理继续由 Reka 负责：空间不足时允许翻转或移动以保持可操作，不以绝对对齐强迫内容溢出。子菜单复用锚定菜单的进入/退出动画与变换原点。
+
+## Menu leading icons
+
+菜单首图标的外框尺寸与间距由菜单组件统一管理，调用方直接传入图标，不添加 `mr-*`、`ml-*`、尺寸或偏移修正。共享样式兼容旧调用的 margin/size 类；SVG 内部几何仍由图标层负责。DropdownMenu 和 ContextMenu 的菜单项遵循同一规则；根 ContextMenu 在光标锚点使用共享淡入缩放与退出动画，不使用方向滑动。
+
+普通操作菜单与 Select 共用 `--menu-min-width`（10rem）作为舒展的基础宽度，窄屏允许收缩。Select 仍不得窄于触发器；更长内容可扩展。菜单比例通过宽度和内容组织调整，不通过压低共享行高补偿。业务确需不同宽度时使用已有 class 覆盖，不为短文案逐页设置最小宽度。
diff --git a/package.json b/package.json
index a307742..74bc7aa 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "reka-ui": "^2.10.1",
     "tailwind-merge": "^3.4.0",
     "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0",
     "vee-validate": "^4.15.1",
     "vue-input-otp": "^0.3.2",
     "zod": "3.25.76"
@@ -50,7 +51,6 @@
     "misans-vf": "1.0.0",
     "npm-run-all2": "^8.0.4",
     "tsx": "^4.21.0",
-    "tw-animate-css": "^1.4.0",
     "typescript": "~6.0.3",
     "unplugin-dts": "1.0.0-beta.6",
     "vite": "^8.1.5",
diff --git a/showcase/AGENTS.md b/showcase/AGENTS.md
index b4fd68d..297dc55 100644
--- a/showcase/AGENTS.md
+++ b/showcase/AGENTS.md
@@ -103,6 +103,38 @@ spec has `usage`).
 - **A spec opts into the matrix** by declaring `matrix: { rows, cols }` with
   control keys — only axes a reviewer actually scans (Button: variant × size).
 
+## Examples pages — the example IS the page
+
+`pages/examples/` holds whole-page specimens of classic product surfaces
+(a settings page, …) — the surfaces every product has, where library-wide
+passes (cursor, motion, width) are judged on a real interface instead of
+single-component playgrounds. They are a third page kind beside component
+pages and foundation pages, with their own law:
+
+- **No doc frame.** The example fills the content area directly — its own
+  `PageShell` IS the page. Never wrap it in a documentation spine, a
+  `STAGE_FRAME_CLASS` frame, or a `CanvasStage`: the point is to feel the
+  components in a real surface, and a stage would turn them back into
+  boxed specimens.
+- **Owners only, stricter than anywhere else.** An example page is the
+  strongest copy-precedent surface in the repo — compose it exclusively
+  from owner vocabulary (`PageShell` / `SettingsSection` / `SettingsRow` /
+  the controls themselves). If a shape the page needs has no owner, that
+  is a vocabulary gap to legislate, not a class to hand-write.
+- **No width pinning, no state seeding beyond defaults.** Controls render
+  at their library defaults (`Select` at `w-fit`, `Input` at `w-full`, …)
+  so the page exposes true default behavior in real rows. If a row looks
+  wrong, the fix belongs in the library, not in a class on the page.
+- **Overlays uncontrolled, state local** (per the overlay invariants
+  below): each `Select`/`Dialog` owns its open state; page state is plain
+  refs. No fake backends, no demo data plumbing.
+- **Bilingual, generic copy.** All strings go through `tt()` and read as
+  "any product's" copy — an example names no concrete product and teaches
+  no Memoh-specific business wording.
+
+Register each page in `registry.ts` under the `examples` nav group via the
+`example()` helper (id prefix `examples/`).
+
 ## Overlay invariants (dead-locked three times — do not re-try)
 
 - **Overlay specs render UNCONTROLLED — `interactive: true`, NO `open`
diff --git a/showcase/pages/examples/SettingsPageExample.vue b/showcase/pages/examples/SettingsPageExample.vue
new file mode 100644
index 0000000..a2a3b42
--- /dev/null
+++ b/showcase/pages/examples/SettingsPageExample.vue
@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { Button } from '#/components/button'
+import { Input } from '#/components/input'
+import { SegmentedControl } from '#/components/segmented'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemText,
+  SelectTrigger,
+  SelectValue,
+} from '#/components/select'
+import { PageShell, SettingsRow, SettingsSection } from '#/components/settings'
+import { Switch } from '#/components/switch'
+import { tt } from '../../lib/i18n'
+
+// Examples / Settings — a whole-page specimen of the classic product settings
+// surface, composed ONLY from the library's owner vocabulary (PageShell /
+// SettingsSection / SettingsRow + the controls themselves). This page is the
+// shared testbed for the library-wide cursor / motion / width passes: those
+// rounds are judged on a real surface, not on single-component playgrounds.
+//
+// Two deliberate rules, do not "fix" them:
+// 1. NO width is pinned on any control. The page renders every control at its
+//    library default (Select trigger is w-fit, Input is w-full, …) on purpose —
+//    exposing the current defaults in a real row layout is the point of the
+//    width pass. If a row looks wrong, the fix belongs in the library, not in
+//    a class on this page.
+// 2. Overlays are uncontrolled (each Select owns its open state) and all state
+//    is local refs — this is an interaction specimen, not a data demo.
+//
+// Copy is bilingual via tt() and deliberately generic: the page must read as
+// "any product's settings", so strings name no concrete product.
+
+const language = ref('default')
+const themeItems = computed(() => [
+  { value: 'system', label: tt('System', '跟随系统') },
+  { value: 'light', label: tt('Light', '浅色') },
+  { value: 'dark', label: tt('Dark', '深色') },
+])
+const theme = ref('system')
+const notifications = ref(true)
+const autosuggest = ref(true)
+const model = ref('auto')
+const imageGeneration = ref(false)
+const displayName = ref('Felinic')
+const inlineDisplayName = ref('Felinic')
+</script>
+
+<template>
+  <PageShell
+    :title="tt('Settings', '设置')"
+    width="md"
+  >
+    <div class="flex flex-col gap-8">
+      <SettingsSection :title="tt('Preferences', '偏好')">
+        <SettingsRow
+          :label="tt('Language', '语言')"
+          :description="tt('The language the interface displays in', '界面显示的语言')"
+        >
+          <Select v-model="language">
+            <SelectTrigger
+              size="sm"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent
+              align="end"
+              :align-offset="0"
+            >
+              <SelectItem value="default">
+                <SelectItemText>Default</SelectItemText>
+              </SelectItem>
+              <SelectItem value="en">
+                <SelectItemText>English</SelectItemText>
+              </SelectItem>
+              <SelectItem value="zh">
+                <SelectItemText>中文</SelectItemText>
+              </SelectItem>
+              <SelectItem value="ja">
+                <SelectItemText>日本語</SelectItemText>
+              </SelectItem>
+              <!-- Long fake languages: stress data so the menu widens far past
+                   the trigger and the align="end" trial is actually visible. -->
+              <SelectItem value="ro">
+                <SelectItemText>română (România)</SelectItemText>
+              </SelectItem>
+              <SelectItem value="sk">
+                <SelectItemText>slovenčina (Slovensko)</SelectItemText>
+              </SelectItem>
+              <SelectItem value="sr-cyrl">
+                <SelectItemText>српски (ћирилица, Црна Гора)</SelectItemText>
+              </SelectItem>
+              <SelectItem value="sv">
+                <SelectItemText>svenska (Sverige)</SelectItemText>
+              </SelectItem>
+              <SelectItem value="ta">
+                <SelectItemText>தமிழ் (இந்தியா)</SelectItemText>
+              </SelectItem>
+              <!-- Short-value stress set: extreme narrow values against the
+                   long ones above, so the width/animation pass can be judged
+                   across the full text-length range in one menu. -->
+              <SelectItem value="el">
+                <SelectItemText>ελ</SelectItemText>
+              </SelectItem>
+              <SelectItem value="id">
+                <SelectItemText>ID</SelectItemText>
+              </SelectItem>
+              <SelectItem value="ms">
+                <SelectItemText>ms</SelectItemText>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </SettingsRow>
+        <SettingsRow :label="tt('Theme', '主题')">
+          <SegmentedControl
+            v-model="theme"
+            :items="themeItems"
+            :aria-label="tt('Theme', '主题')"
+          />
+        </SettingsRow>
+        <SettingsRow
+          :label="tt('Notifications', '通知')"
+          :description="tt('Get notified when a task finishes or needs your input', '任务完成或需要你处理时收到通知')"
+        >
+          <Switch v-model="notifications" />
+        </SettingsRow>
+        <SettingsRow
+          :label="tt('Autosuggest', '输入建议')"
+          :description="tt('Show suggestions while you type', '输入时显示建议')"
+        >
+          <Switch v-model="autosuggest" />
+        </SettingsRow>
+      </SettingsSection>
+
+      <SettingsSection :title="tt('Model', '模型')">
+        <SettingsRow
+          :label="tt('Default model', '默认模型')"
+          :description="tt('The model used for new conversations', '新对话使用的模型')"
+        >
+          <Select v-model="model">
+            <SelectTrigger
+              size="sm"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent
+              align="end"
+              :align-offset="0"
+            >
+              <SelectItem value="auto">
+                <SelectItemText>Auto</SelectItemText>
+              </SelectItem>
+              <SelectItem value="fast">
+                <SelectItemText>Fast</SelectItemText>
+              </SelectItem>
+              <SelectItem value="thinking">
+                <SelectItemText>Thinking</SelectItemText>
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </SettingsRow>
+        <SettingsRow
+          :label="tt('Image generation', '图像生成')"
+          :description="tt('Allow the model to generate images', '允许模型生成图像')"
+        >
+          <Switch v-model="imageGeneration" />
+        </SettingsRow>
+      </SettingsSection>
+
+      <SettingsSection :title="tt('Account', '账户')">
+        <SettingsRow
+          :label="tt('Display name', '显示名称')"
+          stack="sm"
+        >
+          <Input v-model="displayName" />
+        </SettingsRow>
+        <SettingsRow :label="tt('Password', '密码')">
+          <Button
+            variant="outline"
+            size="sm"
+          >
+            {{ tt('Change', '修改') }}
+          </Button>
+        </SettingsRow>
+        <SettingsRow
+          :label="tt('Delete account', '删除账户')"
+          :description="tt('This action is irreversible', '此操作不可撤销')"
+        >
+          <Button
+            variant="destructive"
+            size="sm"
+          >
+            {{ tt('Delete', '删除') }}
+          </Button>
+        </SettingsRow>
+      </SettingsSection>
+      <SettingsSection :title="tt('Inline controls', '同行控件')">
+        <SettingsRow
+          :label="tt('Display name', '显示名称')"
+          stack="sm"
+        >
+          <div class="flex min-w-0 items-center gap-2">
+            <Input
+              v-model="inlineDisplayName"
+              size="sm"
+              :aria-label="tt('Inline display name', '同行显示名称')"
+            />
+            <Button
+              size="sm"
+              variant="outline"
+            >
+              {{ tt('Save', '保存') }}
+            </Button>
+          </div>
+        </SettingsRow>
+      </SettingsSection>
+    </div>
+  </PageShell>
+</template>
diff --git a/showcase/registry.ts b/showcase/registry.ts
index cbefd8e..681951f 100644
--- a/showcase/registry.ts
+++ b/showcase/registry.ts
@@ -10,6 +10,7 @@ import RadiusPage from './pages/foundations/RadiusPage.vue'
 import SpacingPage from './pages/foundations/SpacingPage.vue'
 import TypographyPage from './pages/foundations/TypographyPage.vue'
 import OverviewPage from './pages/OverviewPage.vue'
+import SettingsPageExample from './pages/examples/SettingsPageExample.vue'
 
 // Single manifest: drives the sidebar groups, the hash routes, AND prev/next
 // order — one list, three consumers, so they can never drift.
@@ -31,6 +32,10 @@ function foundation(id: string, title: string, titleZh: string, component: Compo
   return { kind: 'static', id: `foundations/${id}`, title, titleZh, component }
 }
 
+function example(id: string, title: string, titleZh: string, component: Component): PageEntry {
+  return { kind: 'static', id: `examples/${id}`, title, titleZh, component }
+}
+
 export const navGroups: NavGroup[] = [
   {
     id: 'foundations',
@@ -59,6 +64,14 @@ export const navGroups: NavGroup[] = [
       spec,
     })),
   },
+  {
+    id: 'examples',
+    label: 'Examples',
+    labelZh: '示例',
+    pages: [
+      example('settings', 'Settings', '设置', SettingsPageExample),
+    ],
+  },
 ]
 
 export const flatPages: PageEntry[] = navGroups.flatMap(g => g.pages)
diff --git a/src/components/accordion/AccordionTrigger.vue b/src/components/accordion/AccordionTrigger.vue
index b73f144..981e8c7 100644
--- a/src/components/accordion/AccordionTrigger.vue
+++ b/src/components/accordion/AccordionTrigger.vue
@@ -18,7 +18,7 @@ const forwarded = useForwardProps(delegatedProps)
       data-slot="accordion-trigger"
       v-bind="forwarded"
       :class="cn(
-        'flex flex-1 items-center justify-between gap-2 py-3.5 text-label font-medium outline-none transition-colors hover:underline disabled:pointer-events-none disabled:opacity-40 [&[data-state=open]>svg]:rotate-180',
+        'flex flex-1 cursor-pointer items-center justify-between gap-2 py-3.5 text-label font-medium outline-none transition-colors hover:underline disabled:pointer-events-none disabled:opacity-40 [&[data-state=open]>svg]:rotate-180',
         props.class,
       )"
     >
diff --git a/src/components/action-card/ActionCard.vue b/src/components/action-card/ActionCard.vue
index 1b77dc6..6d32e49 100644
--- a/src/components/action-card/ActionCard.vue
+++ b/src/components/action-card/ActionCard.vue
@@ -68,6 +68,8 @@ const props = withDefaults(defineProps<PrimitiveProps & {
   /** Optional one-line supporting text (truncates — never wraps). Grows the row
    *  past the 48px single-line height. The #description slot overrides. */
   description?: string
+  /** Keep a boundary when nested inside another card-colored surface. */
+  bordered?: boolean
   class?: HTMLAttributes['class']
 }>(), {
   as: 'button',
@@ -78,11 +80,13 @@ const props = withDefaults(defineProps<PrimitiveProps & {
 <template>
   <Primitive
     data-slot="action-card"
+    :data-bordered="bordered || undefined"
     :as="as"
     :as-child="asChild"
     :class="cn(
       'group/action relative isolate flex w-full min-h-[3rem] items-center gap-3 border bg-card px-4 py-3.5 text-left',
       'cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring/50',
+      !bordered && 'dark:border-0',
       props.class,
     )"
   >
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index fa155f6..7d57f1a 100644
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -11,6 +11,8 @@ import { buttonVariants } from '.'
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
+  /** Muted resting color for ghost toolbar actions; interaction restores foreground. */
+  tone?: 'default' | 'muted'
   /** Corner shape, orthogonal to size. `circle` forces rounded-full over the
    *  size's rounded-md — use with size="icon"/"icon-sm" for a round icon button
    *  instead of hand-writing `class="rounded-full"` at the call site. */
@@ -54,6 +56,7 @@ const resolvedVariant = computed<ButtonVariants['variant']>(() => props.variant
 const buttonClass = computed(() =>
   cn(
     buttonVariants({ variant: resolvedVariant.value, size: props.size, shape: props.shape }),
+    resolvedVariant.value === 'ghost' && props.tone === 'muted' && 'text-muted-foreground',
     props.block && 'w-full',
     props.class,
   ),
@@ -73,6 +76,7 @@ const buttonClass = computed(() =>
     :as="as"
     :as-child="asChild"
     :data-variant="resolvedVariant"
+    :data-tone="resolvedVariant === 'ghost' ? tone : undefined"
     :data-size="size || undefined"
     :data-block="block ? '' : undefined"
     :data-loading="loading ? '' : undefined"
diff --git a/src/components/collapsible/CollapsibleTrigger.vue b/src/components/collapsible/CollapsibleTrigger.vue
index ca6b60c..8c19e73 100644
--- a/src/components/collapsible/CollapsibleTrigger.vue
+++ b/src/components/collapsible/CollapsibleTrigger.vue
@@ -6,8 +6,11 @@ const props = defineProps<CollapsibleTriggerProps>()
 </script>
 
 <template>
+  <!-- A trigger is a button: cursor-pointer is the contract's Pointer Cursor
+       rule. Everything else stays a transparent passthrough on purpose. -->
   <CollapsibleTrigger
     data-slot="collapsible-trigger"
+    class="cursor-pointer"
     v-bind="props"
   >
     <slot />
diff --git a/src/components/command/CommandGroup.vue b/src/components/command/CommandGroup.vue
index 2ee61d1..e8496db 100644
--- a/src/components/command/CommandGroup.vue
+++ b/src/components/command/CommandGroup.vue
@@ -4,7 +4,7 @@ import type { HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
 import { computed, onMounted, onUnmounted } from 'vue'
-import { menuLabelClass } from '#/lib/menu'
+import { menuLabelClass, menuViewportClass } from '#/lib/menu'
 import { cn } from '#/lib/utils'
 import { provideCommandGroupContext, useCommand } from '.'
 
@@ -35,7 +35,7 @@ onUnmounted(() => {
     v-bind="delegatedProps"
     :id="id"
     data-slot="command-group"
-    :class="cn('text-foreground flex flex-col gap-0.5 overflow-hidden p-1.5', props.class)"
+    :class="cn(menuViewportClass, 'text-foreground overflow-hidden', props.class)"
     :hidden="isRender ? undefined : true"
   >
     <ListboxGroupLabel
diff --git a/src/components/context-menu/ContextMenuCheckboxItem.vue b/src/components/context-menu/ContextMenuCheckboxItem.vue
index 68009c3..7185186 100644
--- a/src/components/context-menu/ContextMenuCheckboxItem.vue
+++ b/src/components/context-menu/ContextMenuCheckboxItem.vue
@@ -23,9 +23,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <ContextMenuCheckboxItem
     data-slot="context-menu-checkbox-item"
     v-bind="forwarded"
-    :class="cn(menuItemClass, 'pr-8', props.class)"
+    :class="cn(menuItemClass, 'pr-9', props.class)"
   >
-    <span class="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+    <span class="pointer-events-none absolute right-3 flex size-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
         <slot name="indicator-icon">
           <Check class="size-4" />
diff --git a/src/components/context-menu/ContextMenuContent.vue b/src/components/context-menu/ContextMenuContent.vue
index 3b2e665..3932e22 100644
--- a/src/components/context-menu/ContextMenuContent.vue
+++ b/src/components/context-menu/ContextMenuContent.vue
@@ -7,7 +7,8 @@ import {
   ContextMenuPortal,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { menuContentClass, menuViewportClass } from '#/lib/menu'
+import { menuWidthClass, menuContentClass, menuAnchoredMotionClass } from '#/lib/menu'
+import MenuScrollArea from '../menu-scroll-area/MenuScrollArea.vue'
 import { cn } from '#/lib/utils'
 
 defineOptions({
@@ -28,13 +29,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       data-slot="context-menu-content"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="cn(
+        menuWidthClass,
         menuContentClass,
-        menuViewportClass,
-        'max-h-(--reka-context-menu-content-available-height) min-w-[8rem]',
+        menuAnchoredMotionClass,
+        'origin-(--reka-context-menu-content-transform-origin)',
+        'flex min-h-0 flex-col overflow-hidden max-h-(--reka-context-menu-content-available-height)',
+        '',
         props.class,
       )"
     >
-      <slot />
+      <MenuScrollArea><slot /></MenuScrollArea>
     </ContextMenuContent>
   </ContextMenuPortal>
 </template>
diff --git a/src/components/context-menu/ContextMenuRadioItem.vue b/src/components/context-menu/ContextMenuRadioItem.vue
index fb8a66c..ef0ec9b 100644
--- a/src/components/context-menu/ContextMenuRadioItem.vue
+++ b/src/components/context-menu/ContextMenuRadioItem.vue
@@ -23,9 +23,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <ContextMenuRadioItem
     data-slot="context-menu-radio-item"
     v-bind="forwarded"
-    :class="cn(menuItemClass, 'pr-8', props.class)"
+    :class="cn(menuItemClass, 'pr-9', props.class)"
   >
-    <span class="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+    <span class="pointer-events-none absolute right-3 flex size-3.5 items-center justify-center">
       <ContextMenuItemIndicator>
         <slot name="indicator-icon">
           <Circle class="size-2 fill-current" />
diff --git a/src/components/context-menu/ContextMenuSubContent.vue b/src/components/context-menu/ContextMenuSubContent.vue
index fdfe974..55ddd41 100644
--- a/src/components/context-menu/ContextMenuSubContent.vue
+++ b/src/components/context-menu/ContextMenuSubContent.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { ContextMenuSubContentEmits, ContextMenuSubContentProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
+import { computed, ref, type HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import {
   ContextMenuSubContent,
+  ContextMenuPortal,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { menuContentClass, menuSlideClass, menuViewportClass } from '#/lib/menu'
+import { menuWidthClass, menuContentClass, menuAnchoredMotionClass } from '#/lib/menu'
+import MenuScrollArea from '../menu-scroll-area/MenuScrollArea.vue'
+import { useSubmenuAlignment } from '../../lib/useSubmenuAlignment'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<ContextMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
@@ -15,22 +18,32 @@ const emits = defineEmits<ContextMenuSubContentEmits>()
 const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const menuArea = ref<InstanceType<typeof MenuScrollArea>>()
+const currentElement = computed(() => menuArea.value?.viewportElement?.closest<HTMLElement>('[data-slot="context-menu-sub-content"]') ?? undefined)
+const { alignOffset, ready } = useSubmenuAlignment(currentElement)
 </script>
 
 <template>
-  <ContextMenuSubContent
-    data-slot="context-menu-sub-content"
-    v-bind="forwarded"
-    :class="
-      cn(
-        menuContentClass,
-        menuSlideClass,
-        menuViewportClass,
-        'min-w-[8rem] origin-(--reka-context-menu-content-transform-origin)',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </ContextMenuSubContent>
+  <ContextMenuPortal>
+    <ContextMenuSubContent
+      data-slot="context-menu-sub-content"
+      v-bind="forwarded"
+      :align-offset="props.alignOffset ?? alignOffset"
+      :style="{ visibility: ready ? undefined : 'hidden' }"
+      :class="
+        cn(
+          menuWidthClass,
+          menuContentClass,
+          menuAnchoredMotionClass,
+          'flex min-h-0 flex-col overflow-hidden max-h-(--reka-context-menu-content-available-height)',
+          ' origin-(--reka-context-menu-content-transform-origin)',
+          props.class,
+        )
+      "
+    >
+      <MenuScrollArea ref="menuArea">
+        <slot />
+      </MenuScrollArea>
+    </ContextMenuSubContent>
+  </ContextMenuPortal>
 </template>
diff --git a/src/components/context-menu/ContextMenuSubTrigger.vue b/src/components/context-menu/ContextMenuSubTrigger.vue
index 0277e2e..39b548b 100644
--- a/src/components/context-menu/ContextMenuSubTrigger.vue
+++ b/src/components/context-menu/ContextMenuSubTrigger.vue
@@ -7,7 +7,7 @@ import {
   ContextMenuSubTrigger,
   useForwardProps,
 } from 'reka-ui'
-import { menuItemClass } from '#/lib/menu'
+import { menuIndicatorStrokeWidth, menuItemClass } from '#/lib/menu'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
@@ -29,6 +29,9 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRight class="ml-auto" />
+    <ChevronRight
+      :stroke-width="menuIndicatorStrokeWidth"
+      class="ml-auto"
+    />
   </ContextMenuSubTrigger>
 </template>
diff --git a/src/components/date-range-picker/DateRangePicker.vue b/src/components/date-range-picker/DateRangePicker.vue
index 1410045..a6f2b3a 100644
--- a/src/components/date-range-picker/DateRangePicker.vue
+++ b/src/components/date-range-picker/DateRangePicker.vue
@@ -102,7 +102,7 @@ function applyPreset(preset: DateRangePreset) {
             v-for="preset in presets"
             :key="preset.label"
             type="button"
-            class="rounded-menu px-2.5 py-1.5 text-left text-control transition-colors hover:bg-[color:var(--ui-hover)] data-[active=true]:bg-[color:var(--ui-selected)] data-[active=true]:font-medium"
+            class="cursor-pointer rounded-menu px-2.5 py-1.5 text-left text-control transition-colors hover:bg-[color:var(--ui-hover)] data-[active=true]:bg-[color:var(--ui-selected)] data-[active=true]:font-medium"
             :data-active="activePreset?.label === preset.label ? 'true' : undefined"
             @click="applyPreset(preset)"
           >
diff --git a/src/components/dialog/DialogBody.vue b/src/components/dialog/DialogBody.vue
index 8e2f307..31a204c 100644
--- a/src/components/dialog/DialogBody.vue
+++ b/src/components/dialog/DialogBody.vue
@@ -21,7 +21,8 @@
 // overflow-hidden (it clips its height tween) so it can never be the
 // scroller. Nest it: <DialogBody><AutoHeight>…</AutoHeight></DialogBody>.
 import type { HTMLAttributes } from 'vue'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { ref } from 'vue'
+import { useScrollFade } from '#/lib/useScrollFade'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
@@ -29,88 +30,20 @@ const props = defineProps<{
 }>()
 
 const el = ref<HTMLElement | null>(null)
-const fadeTop = ref(false)
-const fadeBottom = ref(false)
-let observer: ResizeObserver | null = null
-
-function update() {
-  const node = el.value
-  if (!node)
-    return
-  // 1px slack: fractional scroll positions (zoom, dvh rounding) never quite
-  // reach scrollHeight - clientHeight exactly.
-  const remaining = node.scrollHeight - node.clientHeight - node.scrollTop
-  fadeTop.value = node.scrollTop > 1
-  fadeBottom.value = remaining > 1
-}
-
-onMounted(() => {
-  update()
-  // Watch BOTH boxes: the scroller (dialog cap / viewport changes) and the
-  // content (AutoHeight tween, rows added/removed). Observing only the
-  // scroller misses scrollHeight changes — its own box doesn't resize when
-  // content grows inside a capped row.
-  observer = new ResizeObserver(update)
-  if (el.value) {
-    observer.observe(el.value)
-    for (const child of Array.from(el.value.children)) observer.observe(child)
-  }
-})
-
-onBeforeUnmount(() => {
-  observer?.disconnect()
-  observer = null
-})
+const { fadeTop, fadeBottom } = useScrollFade(el)
 </script>
 
 <template>
   <div
     ref="el"
     data-slot="dialog-body"
-    class="dialog-body -mr-3 overflow-y-auto pr-3"
+    class="scroll-fade -mr-3 overflow-y-auto pr-3"
     :class="cn(props.class)"
     :style="{
-      '--dialog-body-fade-top': fadeTop ? '16px' : '0px',
-      '--dialog-body-fade-bottom': fadeBottom ? '16px' : '0px',
+      '--scroll-fade-top': fadeTop ? '16px' : '0px',
+      '--scroll-fade-bottom': fadeBottom ? '16px' : '0px',
     }"
-    @scroll.passive="update"
   >
     <slot />
   </div>
 </template>
-
-<style scoped>
-/* Registered as <length> (not inherited) so the fade distance itself can
-   transition — an unregistered custom prop would snap between values. */
-@property --dialog-body-fade-top {
-  syntax: '<length>';
-  inherits: false;
-  initial-value: 0px;
-}
-
-@property --dialog-body-fade-bottom {
-  syntax: '<length>';
-  inherits: false;
-  initial-value: 0px;
-}
-
-.dialog-body {
-  /* transparent/black here are ALPHA stops in a mask, not paint colors. */
-  mask-image: linear-gradient(
-    to bottom,
-    transparent,
-    black var(--dialog-body-fade-top),
-    black calc(100% - var(--dialog-body-fade-bottom)),
-    transparent
-  );
-  transition:
-    --dialog-body-fade-top 200ms ease,
-    --dialog-body-fade-bottom 200ms ease;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dialog-body {
-    transition: none;
-  }
-}
-</style>
diff --git a/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue b/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
index 8da0374..77b9bd8 100644
--- a/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -23,9 +23,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuCheckboxItem
     data-slot="dropdown-menu-checkbox-item"
     v-bind="forwarded"
-    :class="cn(menuItemClass, 'pr-8', props.class)"
+    :class="cn(menuItemClass, 'pr-9', props.class)"
   >
-    <span class="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+    <span class="pointer-events-none absolute right-3 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <slot name="indicator-icon">
           <Check class="size-4" />
diff --git a/src/components/dropdown-menu/DropdownMenuContent.vue b/src/components/dropdown-menu/DropdownMenuContent.vue
index 469e63c..0e9eef4 100644
--- a/src/components/dropdown-menu/DropdownMenuContent.vue
+++ b/src/components/dropdown-menu/DropdownMenuContent.vue
@@ -7,7 +7,8 @@ import {
   DropdownMenuPortal,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { menuContentClass, menuSlideClass, menuViewportClass } from '#/lib/menu'
+import { menuWidthClass, menuContentClass, menuAnchoredMotionClass } from '#/lib/menu'
+import MenuScrollArea from '../menu-scroll-area/MenuScrollArea.vue'
 import { cn } from '#/lib/utils'
 
 defineOptions({
@@ -33,14 +34,17 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       data-slot="dropdown-menu-content"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="cn(
+        menuWidthClass,
         menuContentClass,
-        menuSlideClass,
-        menuViewportClass,
-        'max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin)',
+        menuAnchoredMotionClass,
+        'flex min-h-0 flex-col overflow-hidden',
+        'max-h-(--reka-dropdown-menu-content-available-height)  origin-(--reka-dropdown-menu-content-transform-origin)',
         props.class
       )"
     >
-      <slot />
+      <MenuScrollArea>
+        <slot />
+      </MenuScrollArea>
     </DropdownMenuContent>
   </DropdownMenuPortal>
 </template>
diff --git a/src/components/dropdown-menu/DropdownMenuRadioItem.vue b/src/components/dropdown-menu/DropdownMenuRadioItem.vue
index e83040c..8dd6b05 100644
--- a/src/components/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/src/components/dropdown-menu/DropdownMenuRadioItem.vue
@@ -24,9 +24,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuRadioItem
     data-slot="dropdown-menu-radio-item"
     v-bind="forwarded"
-    :class="cn(menuItemClass, 'pr-8', props.class)"
+    :class="cn(menuItemClass, 'pr-9', props.class)"
   >
-    <span class="pointer-events-none absolute right-2 flex size-3.5 items-center justify-center">
+    <span class="pointer-events-none absolute right-3 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
         <slot name="indicator-icon">
           <Circle class="size-2 fill-current" />
diff --git a/src/components/dropdown-menu/DropdownMenuSubContent.vue b/src/components/dropdown-menu/DropdownMenuSubContent.vue
index 467a408..766dde7 100644
--- a/src/components/dropdown-menu/DropdownMenuSubContent.vue
+++ b/src/components/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'reka-ui'
-import type { HTMLAttributes } from 'vue'
+import { computed, ref, type HTMLAttributes } from 'vue'
 import { reactiveOmit } from '@vueuse/core'
 import {
   DropdownMenuSubContent,
+  DropdownMenuPortal,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { menuContentClass, menuSlideClass, menuViewportClass } from '#/lib/menu'
+import { menuWidthClass, menuContentClass, menuAnchoredMotionClass } from '#/lib/menu'
+import MenuScrollArea from '../menu-scroll-area/MenuScrollArea.vue'
+import { useSubmenuAlignment } from '../../lib/useSubmenuAlignment'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
@@ -15,14 +18,23 @@ const emits = defineEmits<DropdownMenuSubContentEmits>()
 const delegatedProps = reactiveOmit(props, 'class')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const menuArea = ref<InstanceType<typeof MenuScrollArea>>()
+const currentElement = computed(() => menuArea.value?.viewportElement?.closest<HTMLElement>('[data-slot="dropdown-menu-sub-content"]') ?? undefined)
+const { alignOffset, ready } = useSubmenuAlignment(currentElement)
 </script>
 
 <template>
-  <DropdownMenuSubContent
-    data-slot="dropdown-menu-sub-content"
-    v-bind="forwarded"
-    :class="cn(menuContentClass, menuSlideClass, menuViewportClass, 'min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin)', props.class)"
-  >
-    <slot />
-  </DropdownMenuSubContent>
+  <DropdownMenuPortal>
+    <DropdownMenuSubContent
+      data-slot="dropdown-menu-sub-content"
+      v-bind="forwarded"
+      :align-offset="props.alignOffset ?? alignOffset"
+      :style="{ visibility: ready ? undefined : 'hidden' }"
+      :class="cn(menuWidthClass, menuContentClass, menuAnchoredMotionClass, 'flex min-h-0 flex-col overflow-hidden max-h-(--reka-dropdown-menu-content-available-height)', ' origin-(--reka-dropdown-menu-content-transform-origin)', props.class)"
+    >
+      <MenuScrollArea ref="menuArea">
+        <slot />
+      </MenuScrollArea>
+    </DropdownMenuSubContent>
+  </DropdownMenuPortal>
 </template>
diff --git a/src/components/dropdown-menu/DropdownMenuSubTrigger.vue b/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
index e9fe08b..8e65648 100644
--- a/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/src/components/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -7,7 +7,7 @@ import {
   DropdownMenuSubTrigger,
   useForwardProps,
 } from 'reka-ui'
-import { menuItemClass } from '#/lib/menu'
+import { menuIndicatorStrokeWidth, menuItemClass } from '#/lib/menu'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
@@ -27,6 +27,9 @@ const forwardedProps = useForwardProps(delegatedProps)
     )"
   >
     <slot />
-    <ChevronRight class="ml-auto size-4" />
+    <ChevronRight
+      :stroke-width="menuIndicatorStrokeWidth"
+      class="ml-auto size-4"
+    />
   </DropdownMenuSubTrigger>
 </template>
diff --git a/src/components/input/Input.vue b/src/components/input/Input.vue
index d44bb5a..4d48703 100644
--- a/src/components/input/Input.vue
+++ b/src/components/input/Input.vue
@@ -28,9 +28,9 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 })
 
 const sizeClass = computed(() => ({
-  sm: 'h-8 px-2.5 text-body',
-  default: 'h-9 px-3 text-label',
-  lg: 'h-10 px-3.5 text-control',
+  sm: 'h-8 px-2.5',
+  default: 'h-9 px-3',
+  lg: 'h-9.5 px-3.5',
 }[props.size]))
 </script>
 
@@ -41,7 +41,7 @@ const sizeClass = computed(() => ({
     :data-size="props.size"
     :data-emphasis="props.emphasis && props.emphasis !== 'solid' ? props.emphasis : undefined"
     :class="cn(
-      'w-full min-w-0 rounded-md tracking-[0.01em] py-2 text-foreground',
+      'w-full min-w-0 rounded-md tracking-[0.01em] py-2 text-control font-medium text-foreground',
       sizeClass,
       'outline-none',
       '[&:read-only:not(:disabled)]:bg-muted [&:read-only:not(:disabled)]:text-muted-foreground [&:read-only:not(:disabled)]:cursor-not-allowed',
diff --git a/src/components/menu-scroll-area/MenuScrollArea.vue b/src/components/menu-scroll-area/MenuScrollArea.vue
new file mode 100644
index 0000000..8de53b0
--- /dev/null
+++ b/src/components/menu-scroll-area/MenuScrollArea.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { Component, HTMLAttributes } from 'vue'
+import { computed, ref } from 'vue'
+import { Primitive, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui'
+import { ScrollBar } from '../scroll-area'
+import { useScrollFade } from '../../lib/useScrollFade'
+import { menuViewportClass } from '../../lib/menu'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(defineProps<{
+  /** Reka viewport adapter; as-child keeps one physical scroll element. */
+  viewportAs?: Component
+  viewportAttrs?: HTMLAttributes & Record<string, unknown>
+  /** Virtualizers own their spacer and row positioning, but share this viewport. */
+  layout?: 'list' | 'virtual'
+}>(), { viewportAs: () => Primitive, layout: 'list' })
+
+const viewport = ref<InstanceType<typeof ScrollAreaViewport> | null>(null)
+const element = computed(() => viewport.value?.viewportElement)
+defineExpose({ viewportElement: element })
+const { fadeTop, fadeBottom } = useScrollFade(element)
+</script>
+
+<template>
+  <ScrollAreaRoot
+    type="hover"
+    :scroll-hide-delay="300"
+    class="relative m-(--menu-frame-spacing) flex min-h-0 flex-col"
+  >
+    <component
+      :is="props.viewportAs"
+      as-child
+      v-bind="props.viewportAttrs"
+    >
+      <ScrollAreaViewport
+        ref="viewport"
+        data-slot="menu-scroll-viewport"
+        class="scroll-fade min-h-0 max-h-(--menu-viewport-max-height)"
+        :style="{
+          '--scroll-fade-top': fadeTop ? '16px' : '0px',
+          '--scroll-fade-bottom': fadeBottom ? '16px' : '0px',
+        }"
+        :tabindex="-1"
+      >
+        <div :class="props.layout === 'virtual' ? '' : cn(menuViewportClass, 'p-0')">
+          <slot />
+        </div>
+      </ScrollAreaViewport>
+    </component>
+    <ScrollBar />
+  </ScrollAreaRoot>
+</template>
diff --git a/src/components/menu-scroll-area/index.ts b/src/components/menu-scroll-area/index.ts
new file mode 100644
index 0000000..dd15454
--- /dev/null
+++ b/src/components/menu-scroll-area/index.ts
@@ -0,0 +1 @@
+export { default as MenuScrollArea } from './MenuScrollArea.vue'
diff --git a/src/components/native-select/NativeSelect.vue b/src/components/native-select/NativeSelect.vue
index 6f99086..212b57d 100644
--- a/src/components/native-select/NativeSelect.vue
+++ b/src/components/native-select/NativeSelect.vue
@@ -45,7 +45,7 @@ const sizeClass = computed(() => ({
       data-slot="native-select"
       :data-size="props.size"
       :class="cn(
-        'selection:bg-foreground selection:text-background w-full min-w-0 appearance-none rounded-md py-2 pr-9 tracking-[0.01em] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+        'selection:bg-foreground selection:text-background w-full min-w-0 cursor-pointer appearance-none rounded-md py-2 pr-9 tracking-[0.01em] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
         sizeClass,
         props.class,
       )"
diff --git a/src/components/persona-tile/index.vue b/src/components/persona-tile/index.vue
index d725faf..3aa7835 100644
--- a/src/components/persona-tile/index.vue
+++ b/src/components/persona-tile/index.vue
@@ -1,7 +1,7 @@
 <template>
   <button
     type="button"
-    class="group/tile relative flex w-52 flex-col items-center rounded-menu-shell border border-border p-5 text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40"
+    class="group/tile relative flex w-52 cursor-pointer flex-col items-center rounded-menu-shell border border-border p-5 text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40"
     :class="surfaceClass"
   >
     <!-- Corner status: entry-only, and present only when the tile has something
diff --git a/src/components/popover/PopoverContent.vue b/src/components/popover/PopoverContent.vue
index 6e65e9a..6d5baae 100644
--- a/src/components/popover/PopoverContent.vue
+++ b/src/components/popover/PopoverContent.vue
@@ -8,7 +8,7 @@ import {
   useForwardPropsEmits,
 } from 'reka-ui'
 import { computed } from 'vue'
-import { menuSlideClass } from '#/lib/menu'
+import { menuAnchoredMotionClass } from '#/lib/menu'
 import { cn } from '#/lib/utils'
 
 defineOptions({
@@ -18,21 +18,9 @@ defineOptions({
 const props = withDefaults(
   defineProps<PopoverContentProps & {
     class?: HTMLAttributes['class']
-    // `menu` turns this Popover into a host for a menu surface (Combobox = Popover +
-    // Command). It drops the generic popover chrome (border/shadow/padding/width) and
-    // the zoom motion, and instead plays the menu family's fade + 1-unit directional
-    // slide at duration-75 — identical to SelectContent — so an anchored picker reads
-    // the same whether it's a Select or a Combobox. The inner surface (Command) brings
-    // its own border/shadow/radius, so this wrapper stays transparent and unpadded.
+    // Menu hosts delegate their chrome to the inner list while retaining the
+    // shared anchored-menu motion. Explicit zoom panels keep their own motion.
     menu?: boolean
-    // Entrance motion for a CHROMED popover (ignored when `menu` is set — a host
-    // always uses menu motion):
-    //   'menu' (default) — the menu-family feel: fade + 1-unit slide at duration-75,
-    //                      NO zoom. Same motion as DropdownMenu/Select/HoverCard, so an
-    //                      anchored popover reads as part of the one menu language.
-    //   'zoom'           — the older generic-popover feel: fade + 2-unit slide +
-    //                      zoom-95. Opt-in only, for a panel that should read as
-    //                      growing out of nothing rather than as a menu.
     motion?: 'zoom' | 'menu'
   }>(),
   {
@@ -58,10 +46,7 @@ const chromeClass = computed(() => props.menu
 
 // Menu motion when hosting a menu surface OR when explicitly opted in via motion.
 const motionClass = computed(() => (props.menu || props.motion === 'menu')
-  ? cn(
-    'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-75',
-    menuSlideClass,
-  )
+  ? menuAnchoredMotionClass
   : 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2')
 
 // Menu HOST keeps its original resting directional offset (1 unit off the trigger
diff --git a/src/components/range-calendar/RangeCalendar.vue b/src/components/range-calendar/RangeCalendar.vue
index 8548a2b..ae9fbd2 100644
--- a/src/components/range-calendar/RangeCalendar.vue
+++ b/src/components/range-calendar/RangeCalendar.vue
@@ -32,7 +32,7 @@ const delegatedProps = reactiveOmit(props, 'class')
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
 const navButtonClass = cn(
-  'inline-flex size-7 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors',
+  'inline-flex size-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none transition-colors',
   'hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/30',
   'disabled:pointer-events-none disabled:opacity-40',
 )
@@ -49,7 +49,7 @@ const cellClass = cn(
 // The day button itself: transparent at rest (band shows through), charcoal fill on
 // the two endpoints, accent on the hover-preview span, muted for out-of-month/disabled.
 const cellTriggerClass = cn(
-  'relative inline-flex size-9 select-none items-center justify-center rounded-md text-sm font-normal text-foreground outline-none transition-colors',
+  'relative inline-flex size-9 cursor-pointer select-none items-center justify-center rounded-md text-sm font-normal text-foreground outline-none transition-colors',
   'hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring/30',
   'data-[highlighted]:bg-accent data-[highlighted]:text-foreground',
   'data-[selection-start]:bg-foreground data-[selection-start]:text-background data-[selection-start]:hover:bg-foreground',
diff --git a/src/components/select/SelectContent.vue b/src/components/select/SelectContent.vue
index 589b96e..a53034d 100644
--- a/src/components/select/SelectContent.vue
+++ b/src/components/select/SelectContent.vue
@@ -9,10 +9,10 @@ import {
   SelectViewport,
   useForwardPropsEmits,
 } from 'reka-ui'
-import { onBeforeUnmount, ref, watch } from 'vue'
-import { menuContentClass, menuAlignOffset, menuSlideClass, menuViewportClass } from '#/lib/menu'
+import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import { menuWidthClass, menuContentClass, menuAnchoredMotionClass, menuAlignOffset } from '#/lib/menu'
 import { cn } from '#/lib/utils'
-import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+import MenuScrollArea from '../menu-scroll-area/MenuScrollArea.vue'
 
 defineOptions({
   inheritAttrs: false,
@@ -43,18 +43,6 @@ function onMenuPointerMove(e: PointerEvent): void {
   }
   if (e.clientX !== originX || e.clientY !== originY) clearHint()
 }
-watch(() => rootContext.open.value, (open) => {
-  if (open) {
-    openHint.value = true
-    originX = Number.NaN
-    originY = Number.NaN
-    document.addEventListener('keydown', clearHint, true)
-  }
-  else {
-    openHint.value = false
-    document.removeEventListener('keydown', clearHint, true)
-  }
-}, { immediate: true })
 onBeforeUnmount(() => document.removeEventListener('keydown', clearHint, true))
 
 const props = withDefaults(
@@ -80,11 +68,55 @@ const props = withDefaults(
     alignOffset: menuAlignOffset,
   },
 )
+watch(() => rootContext.open.value, (open) => {
+  if (open) {
+    openHint.value = true
+    originX = Number.NaN
+    originY = Number.NaN
+    document.addEventListener('keydown', clearHint, true)
+  }
+  else {
+    openHint.value = false
+    document.removeEventListener('keydown', clearHint, true)
+  }
+}, { immediate: true })
+
 const emits = defineEmits<SelectContentEmits>()
 
 const delegatedProps = reactiveOmit(props, 'class', 'size')
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const scrollViewport = ref<InstanceType<typeof MenuScrollArea> | null>(null)
+const viewportElement = computed(() => scrollViewport.value?.viewportElement)
+const measurementReady = ref(false)
+
+watch(viewportElement, async (element, _previous, onCleanup) => {
+  measurementReady.value = false
+  if (!element?.isConnected)
+    return
+  let cancelled = false
+  onCleanup(() => { cancelled = true })
+  // Measuring mounted text starts any lazily loaded font subsets. Keep the
+  // panel measurable but invisible until their final metrics reach Floating UI.
+  element.getBoundingClientRect()
+  if (document.fonts.status === 'loading') {
+    await document.fonts.ready
+    // ResizeObserver schedules Floating UI's update after the font relayout;
+    // the following frame paints with that updated position.
+    await new Promise<void>(resolve => requestAnimationFrame(() => requestAnimationFrame(() => resolve())))
+  }
+  if (!cancelled) {
+    measurementReady.value = true
+    await nextTick()
+    // Reka may attempt initial focus while font measurement keeps the menu
+    // invisible. Restore it after reveal, without moving an existing item focus.
+    if (!cancelled && rootContext.open.value && !element.contains(document.activeElement)) {
+      const selected = element.querySelector<HTMLElement>('[data-slot="select-item"][data-state="checked"]:not([data-disabled])')
+      const first = element.querySelector<HTMLElement>('[data-slot="select-item"]:not([data-disabled])')
+      ;(selected ?? first)?.focus({ preventScroll: true })
+    }
+  }
+}, { flush: 'post' })
 </script>
 
 <template>
@@ -93,31 +125,34 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       data-slot="select-content"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="cn(
+        menuWidthClass,
         menuContentClass,
-        'relative max-h-(--reka-select-content-available-height) min-w-[8rem]',
+        !measurementReady && 'invisible animate-none!',
+        'relative flex flex-col overflow-hidden max-h-(--reka-select-content-available-height) ',
         position === 'popper'
-          && cn(menuSlideClass, 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1'),
-        // A Select is a value CHOOSER, not an action menu: its rows track the
-        // TRIGGER's type size (default 13px / sm 12px), never the 14px action-menu
-        // size — so the open list reads as the same control, not a heavier menu.
-        // Only the type scales; row padding/height stay comfortable (no cramping).
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        position === 'popper' && menuAnchoredMotionClass,
+        'origin-(--reka-select-content-transform-origin)',
+        // Increase label size without growing the established row height.
         size === 'sm'
-          ? '[&_[data-slot=select-item]]:text-body'
-          : '[&_[data-slot=select-item]]:text-label',
+          ? '[&_[data-slot=select-item]]:text-label'
+          : '[&_[data-slot=select-item]]:text-control',
         props.class,
       )
       "
     >
-      <SelectScrollUpButton />
-      <SelectViewport
-        data-slot="select-viewport"
-        :data-open-hint="openHint ? '' : undefined"
-        :class="cn(menuViewportClass, position === 'popper' && 'w-full min-w-[calc(var(--reka-select-trigger-width)_+_8px)] scroll-my-1')"
-        @pointermove="onMenuPointerMove"
+      <MenuScrollArea
+        ref="scrollViewport"
+        :viewport-as="SelectViewport"
+        :viewport-attrs="{
+          'data-slot': 'select-viewport',
+          class: position === 'popper' ? 'min-w-(--reka-select-trigger-width) scroll-my-1' : undefined,
+          'data-open-hint': openHint ? '' : undefined,
+          onPointermove: onMenuPointerMove,
+        }"
       >
         <slot />
-      </SelectViewport>
-      <SelectScrollDownButton />
+      </MenuScrollArea>
     </SelectContent>
   </SelectPortal>
 </template>
diff --git a/src/components/select/SelectItem.vue b/src/components/select/SelectItem.vue
index 6614e7a..cf1a6b5 100644
--- a/src/components/select/SelectItem.vue
+++ b/src/components/select/SelectItem.vue
@@ -25,15 +25,14 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="
       cn(
-        // Shared menu row (lib/menu.ts). Right-side check ⇒ pr-8.
         menuItemClass,
-        'pr-8',
+        'pr-9',
         '*:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
         props.class,
       )
     "
   >
-    <span class="absolute right-2 flex size-3.5 items-center justify-center">
+    <span class="absolute right-3 flex size-3.5 items-center justify-center">
       <SelectItemIndicator>
         <slot name="indicator-icon">
           <Check class="size-4" />
@@ -41,7 +40,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       </SelectItemIndicator>
     </span>
 
-    <SelectItemText>
+    <SelectItemText data-slot="select-item-text">
       <slot />
     </SelectItemText>
   </SelectItem>
diff --git a/src/components/settings/BackendCard.vue b/src/components/settings/BackendCard.vue
index 03fda04..0b00d60 100644
--- a/src/components/settings/BackendCard.vue
+++ b/src/components/settings/BackendCard.vue
@@ -8,6 +8,8 @@ import StatusDot from './StatusDot.vue'
 // rounded-menu-shell, text-sm→text-control, text-xs→text-body; the two alpha
 // values travel as pinned owner values (markers below).
 withDefaults(defineProps<{
+  /** Keep a boundary when nested inside another card-colored surface. */
+  bordered?: boolean
   name: string
   subtitle?: string
   enabled?: boolean
@@ -17,14 +19,14 @@ withDefaults(defineProps<{
 })
 
 /* ui-allow-alpha: hover:bg-accent/30 — pinned owner value, lifted verbatim. */
-const cardClass = 'group/card flex items-center gap-3 rounded-menu-shell border border-border bg-card p-3.5 text-left transition-colors hover:bg-accent/30 dark:hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring' /* ui-allow-alpha */
+const cardClass = 'group/card flex cursor-pointer items-center gap-3 rounded-menu-shell border border-border bg-card p-3.5 text-left transition-colors hover:bg-accent/30 dark:hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring' /* ui-allow-alpha */
 const trailingIconClass = 'size-4 shrink-0 text-muted-foreground/60' /* ui-allow-alpha: pinned owner value, lifted verbatim. */
 </script>
 
 <template>
   <button
     type="button"
-    :class="cardClass"
+    :class="[cardClass, !bordered && 'dark:border-0']"
   >
     <span class="relative shrink-0">
       <slot name="leading" />
diff --git a/src/components/settings/DetailPane.vue b/src/components/settings/DetailPane.vue
index 6c9e5da..431b6c8 100644
--- a/src/components/settings/DetailPane.vue
+++ b/src/components/settings/DetailPane.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { Skeleton } from '../skeleton'
 import SettingsBackButton from './BackButton.vue'
 import SettingsShell from './SettingsShell.vue'
+import SettingsSection from './SettingsSection.vue'
 import { settingsWidthClass, type SettingsWidth } from './width'
 
 // DetailPane — the in-page detail surface: a back row on the content's rails,
@@ -52,26 +53,28 @@ const widthClass = computed(() => settingsWidthClass(props.width))
       data-testid="detail-pane-skeleton"
     >
       <div class="space-y-6">
-        <section class="flex items-center gap-3 rounded-menu-shell border border-border bg-card px-4 py-3">
-          <!-- Real header uses size-9 rounded-full avatar; force full round so the
+        <SettingsSection>
+          <div class="flex items-center gap-3 px-4 py-3">
+            <!-- Real header uses size-9 rounded-full avatar; force full round so the
                Skeleton base rounded-lg cannot leave a square chip. -->
-          <Skeleton class="size-9 shrink-0 !rounded-full" />
-          <div class="min-w-0 flex-1">
-            <Skeleton class="h-4 w-36 max-w-full !rounded-md" />
-          </div>
-          <div class="ml-auto flex shrink-0 items-center gap-2">
-            <!-- icon-sm trash affordance — use solid Tailwind radius tokens.
+            <Skeleton class="size-9 shrink-0 !rounded-full" />
+            <div class="min-w-0 flex-1">
+              <Skeleton class="h-4 w-36 max-w-full !rounded-md" />
+            </div>
+            <div class="ml-auto flex shrink-0 items-center gap-2">
+              <!-- icon-sm trash affordance — use solid Tailwind radius tokens.
                  Arbitrary rounded-[var(--radius-control)] was not applying, so
                  the block rendered as a sharp square. -->
-            <Skeleton class="size-8 shrink-0 !rounded-md" />
-            <!-- Switch track (h-5 w-9 rounded-full), not a square block -->
-            <Skeleton class="h-5 w-9 shrink-0 !rounded-full" />
+              <Skeleton class="size-8 shrink-0 !rounded-md" />
+              <!-- Switch track (h-5 w-9 rounded-full), not a square block -->
+              <Skeleton class="h-5 w-9 shrink-0 !rounded-full" />
+            </div>
           </div>
-        </section>
+        </SettingsSection>
 
         <!-- Form card: SettingsRow geometry (mx-4 / py-3.5 / inset hairlines) +
              h-9 field controls matching real Input / Select height. -->
-        <div class="overflow-hidden rounded-menu-shell border border-border bg-card">
+        <SettingsSection>
           <div
             v-for="i in 4"
             :key="i"
@@ -80,7 +83,7 @@ const widthClass = computed(() => settingsWidthClass(props.width))
             <Skeleton class="h-4 w-24 shrink-0 !rounded-md" />
             <Skeleton class="h-9 w-80 max-w-[55%] !rounded-md" />
           </div>
-        </div>
+        </SettingsSection>
       </div>
     </SettingsShell>
     <slot v-else />
diff --git a/src/components/settings/ExpandableSettingsRow.vue b/src/components/settings/ExpandableSettingsRow.vue
index 0b9dc70..4963f6d 100644
--- a/src/components/settings/ExpandableSettingsRow.vue
+++ b/src/components/settings/ExpandableSettingsRow.vue
@@ -9,7 +9,7 @@
   <div class="mx-4 border-b border-border py-3 last:border-b-0">
     <button
       type="button"
-      class="flex min-h-[3.75rem] w-full items-center py-0 text-left"
+      class="flex min-h-[3.75rem] w-full cursor-pointer items-center py-0 text-left"
       :aria-expanded="open"
       @click="open = !open"
     >
diff --git a/src/components/settings/MetricReadout.vue b/src/components/settings/MetricReadout.vue
index 1b897e4..2b40329 100644
--- a/src/components/settings/MetricReadout.vue
+++ b/src/components/settings/MetricReadout.vue
@@ -5,7 +5,10 @@
        (no current caller uses it — kept as the escape hatch for bare stats so
        the next one doesn't fork the tile). Shared min-h so a cold-load tile
        doesn't jump. -->
-  <div :class="framed ? 'flex min-h-[4.375rem] flex-col rounded-menu-shell border border-border bg-card p-3' : 'flex flex-col'">
+  <div
+    data-slot="metric-readout"
+    :class="[framed ? 'flex min-h-[4.375rem] flex-col rounded-menu-shell border border-border bg-card p-3' : 'flex flex-col', framed && !bordered && 'dark:border-0']"
+  >
     <!-- tracking-tight:紧凑指标标签的原有字距(context-card 8 块原样如此),
          统一后 bot-overview 的标签一并收紧。 -->
     <p class="text-caption tracking-tight text-muted-foreground">
@@ -59,7 +62,7 @@
 // vs the host original:
 // - token renames: framed radius rounded-[var(--radius-menu-shell)] →
 //   rounded-menu-shell, status value text-sm → text-control.
-// Everything else is byte-identical to the host original.
+// Dark framed tiles follow SettingsSection; bordered preserves nested boundaries.
 import { computed } from 'vue'
 
 const props = withDefaults(defineProps<{
@@ -67,6 +70,8 @@ const props = withDefaults(defineProps<{
   value?: string
   sub?: string
   framed?: boolean
+  /** Keep a boundary when nested inside another card-colored surface. */
+  bordered?: boolean
   // A rationed signal state. Present = the value line is a status dot + label
   // instead of a bare figure; absent = a plain metric readout.
   status?: 'ok' | 'warn' | 'error'
@@ -74,6 +79,7 @@ const props = withDefaults(defineProps<{
   value: '',
   sub: '',
   framed: true,
+  bordered: false,
 })
 
 const dotClass = computed(() => {
diff --git a/src/components/settings/ModelListRow.vue b/src/components/settings/ModelListRow.vue
index aae4226..e8c59a9 100644
--- a/src/components/settings/ModelListRow.vue
+++ b/src/components/settings/ModelListRow.vue
@@ -29,7 +29,7 @@ const emit = defineEmits<{ click: [] }>()
 // (BackendCard, CalloutBanner's clickable variant) — the row's own chrome,
 // not a page injection.
 const rowClass = 'flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-foreground transition-colors disabled:pointer-events-none' /* ui-allow-style */
-const interactiveRowClass = 'hover:bg-accent disabled:opacity-40' /* ui-allow-style */
+const interactiveRowClass = 'cursor-pointer hover:bg-accent disabled:opacity-40' /* ui-allow-style */
 // ui-allow-alpha: pinned owner value, lifted verbatim with the row.
 const trailingIconClass = 'size-4 shrink-0 text-muted-foreground/60' /* ui-allow-alpha */
 </script>
diff --git a/src/components/settings/SettingsSection.vue b/src/components/settings/SettingsSection.vue
index 50b9f5a..dcae4c0 100644
--- a/src/components/settings/SettingsSection.vue
+++ b/src/components/settings/SettingsSection.vue
@@ -5,8 +5,11 @@
 // shim) so the section card has exactly one implementation.
 withDefaults(defineProps<{
   title?: string
+  /** Keep a boundary when nested inside another card-colored surface. */
+  bordered?: boolean
 }>(), {
   title: '',
+  bordered: false,
 })
 </script>
 
@@ -31,8 +34,8 @@ withDefaults(defineProps<{
          whatever content element sits directly above the footer's hairline. -->
     <div
       data-settings-section-card
-      class="overflow-hidden rounded-menu-shell border border-border bg-card"
-      :class="$slots.footer ? '[&>:nth-last-child(3)]:border-b-0' : ''"
+      class="overflow-hidden rounded-menu-shell border border-border bg-section-card"
+      :class="[!bordered && 'dark:border-0', $slots.footer && '[&>:nth-last-child(3)]:border-b-0']"
     >
       <slot />
       <!-- Footer: a right-aligned action bar (Save/Cancel) or a pagination strip.
diff --git a/src/components/table/Table.vue b/src/components/table/Table.vue
index 4d757c8..963baf6 100644
--- a/src/components/table/Table.vue
+++ b/src/components/table/Table.vue
@@ -3,6 +3,8 @@ import type { HTMLAttributes } from 'vue'
 import { cn } from '#/lib/utils'
 
 const props = defineProps<{
+  /** Keep a boundary when nested inside another card-colored surface. */
+  bordered?: boolean
   class?: HTMLAttributes['class']
 }>()
 </script>
@@ -11,6 +13,7 @@ const props = defineProps<{
   <div
     data-slot="table-container"
     class="relative w-full overflow-auto rounded-lg border border-border bg-card"
+    :class="!bordered && 'dark:border-0'"
   >
     <table
       data-slot="table"
diff --git a/src/components/tags-input/TagsInputItemDelete.vue b/src/components/tags-input/TagsInputItemDelete.vue
index 76a4f71..3223069 100644
--- a/src/components/tags-input/TagsInputItemDelete.vue
+++ b/src/components/tags-input/TagsInputItemDelete.vue
@@ -26,7 +26,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       //      stop (-border). The ghost button's --btn-ghost-hover is tuned for a
       //      white page and would vanish on this already-gray chip, so the ramp step
       //      is the correct reuse here. Icon is muted at rest, foreground on hover.
-      'inline-flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground',
+      'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground',
       'transition-colors hover:bg-accent-gray-border hover:text-foreground',
       'focus-visible:outline-none focus-visible:bg-accent-gray-border focus-visible:text-foreground',
       props.class,
diff --git a/src/index.ts b/src/index.ts
index 4f1ba9f..9fd66ef 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -67,3 +67,6 @@ export * from './components/textarea/index'
 export * from './components/time-input/index'
 export * from './components/toggle/index'
 export * from './components/tooltip/index'
+
+
+export * from './components/menu-scroll-area'
diff --git a/src/lib/menu.ts b/src/lib/menu.ts
index 6f572f5..ca9b220 100644
--- a/src/lib/menu.ts
+++ b/src/lib/menu.ts
@@ -5,22 +5,18 @@
 // Select had already moved to the tokenised menu language. Component-specific bits
 // (reka size/origin vars, indicator padding, inset) stay inline in each component.
 
-// Floating panel chrome: tokenised hairline + dropdown shadow + shell radius, plus
-// the base open/close transition — fade only, no zoom/scale (a panel that grows out
-// of nothing reads as a generic popover, not a menu). Kept very short (duration-75)
-// so it feels instant. The directional slide is NOT here: it lives in menuSlideClass
-// and is opt-in, because only trigger-anchored menus should drift in from a side —
-// a ContextMenu opens AT the cursor and must just fade. The border-color MUST be a
-// utility — an @layer components rule would silently lose to Tailwind's border
-// utility — so it is pinned here as border-[color:var(--border-menu)]. The explicit
-// `color:` hint is required: in Tailwind v4 a bare border-[var(--x)] is ambiguous
-// between width and color, so we type it the same way we do bg-[color:var(...)].
-// Size/position vars (--reka-*-available-height, trigger-width, transform-origin)
-// are reka-specific and appended inline by each Content wrapper.
+// Floating panel chrome and base fade. Cursor-positioned context menus keep this
+// fade; trigger-anchored panels add menuAnchoredMotionClass below.
+// Keyframes own motion, so geometry updates must never inherit a CSS transition.
 export const menuContentClass
   = 'bg-popover text-popover-foreground border border-[color:var(--border-menu)] rounded-menu-shell shadow-[var(--shadow-dropdown)] z-(--z-overlay) overflow-x-hidden overflow-y-auto '
     + 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 '
-    + 'duration-75'
+    + 'duration-75 transition-none'
+
+// Shared trigger-anchored motion. Content wrappers supply their Reka transform
+// origin; Presence keeps the closed panel mounted through its exit animation.
+export const menuAnchoredMotionClass
+  = 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 duration-100 data-[state=closed]:duration-120 transition-none motion-reduce:animate-none'
 
 // Opt-in directional slide: a 1-unit drift in *from the trigger side*. Add it to
 // trigger-anchored surfaces (Dropdown/Select content, every sub-content) so the
@@ -29,10 +25,10 @@ export const menuContentClass
 export const menuSlideClass
   = 'data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1'
 
-// Inner padding/gap for a menu panel: p-1.5 frame, gap-0.5 rows. Select puts
+// Inner padding/gap for a menu panel: 4px frame, gap-0.5 rows. Select puts
 // this on its SelectViewport;
 // flatter menus put it straight on the content box.
-export const menuViewportClass = 'flex flex-col gap-0.5 p-1.5'
+export const menuViewportClass = 'menu-viewport flex flex-col gap-(--menu-row-gap) p-(--menu-frame-spacing)'
 
 // Chrome-only subset of menuContentClass, for the inner panel div of a menu host
 // (Popover with `menu`). The host carries the overlay-tier z-index (--z-overlay)
@@ -46,12 +42,13 @@ export const menuChromeClass
 // rows are absolutely positioned (so it can't take menuViewportClass's
 // `flex flex-col gap-0.5`). Inter-row spacing comes from the virtualizer's `gap`
 // option, not a wrapper. `scroll-my-1` keeps keyboard-scrolled rows off the edge.
-export const virtualListboxClass = 'max-h-64 scroll-my-1 overflow-y-auto p-1.5'
+/** @deprecated Use MenuScrollArea with layout="virtual" and its viewportElement. */
+export const virtualListboxClass = 'max-h-64 scroll-my-1 overflow-y-auto p-(--menu-frame-spacing)'
 
 // How far to shift a menu left (negative alignOffset) so its first row's TEXT
 // lands under the trigger's TEXT — not the menu box edge under the trigger edge.
 // This is a geometric consequence of the shared insets, not a magic number:
-//   menu text from its edge = border(1) + menuViewportClass p-1.5(6) + menuItemClass px-2.5(10) = 17
+//   menu text from its edge = border(1) + menuViewportClass frame(4) + menuItemClass px-3(12) = 17
 //   trigger text from its edge = selectTriggerClass px-3 = 12
 //   delta = 17 - 12 = 5 → shift the menu left by 5px so the two text columns line up.
 // Applied by any menu host anchored to a selectTrigger (SelectContent, and the
@@ -61,7 +58,7 @@ export const menuAlignOffset = -5
 
 // Search field header inside a menu host (SearchableSelectPopover, ModelOptions):
 // a 40px row with a bottom hairline. The input's px-4 (16) lines its text up with
-// the row text (border(1) + viewport p-1.5(6) + item px-2.5(10) = 17 — the 1px is
+// the row text (border(1) + viewport frame(4) + item px-3(12) = 17 — the 1px is
 // the chrome border the search row sits inside, so both land at 17 from the panel
 // edge). Shared so the two searchable surfaces don't each hand-write the header.
 export const menuSearchHeaderClass = 'flex h-10 shrink-0 items-center gap-2 border-b border-border/40 px-4'
@@ -72,18 +69,17 @@ export const menuSearchHeaderClass = 'flex h-10 shrink-0 items-center gap-2 bord
 export const menuSearchInputClass = 'flex h-full w-full bg-transparent text-control [@media(pointer:coarse)]:text-title outline-hidden placeholder:text-muted-foreground'
 
 // One menu row: layout + roving-focus highlight. Geometry is pinned to the
-// shared row contract: px-2.5 / py-1.5 / text-control (14px) / rounded-menu
+// shared row contract: px-3 / py-2 / text-control (14px) / rounded-menu
 // (8px) — so every menu shares the exact same row height, text size and inset.
 // The highlight is reka's [data-highlighted] (the reka/Radix equivalent of shadcn's
 // focus:bg-accent), so it simply follows the pointer/keyboard. The selected value is
 // shown by an indicator (check / dot), never by the row background. Components only
 // override the right gutter for an indicator (pr-8) or the left for an inset (pl-8).
 export const menuItemClass
-  = 'relative flex w-full cursor-default items-center gap-2 rounded-menu px-2.5 py-1.5 text-control outline-hidden select-none transition-colors duration-[60ms] data-[highlighted]:bg-[color:var(--ui-selected)] data-[disabled]:pointer-events-none data-[disabled]:opacity-40 [&_svg:not([class*=text-])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4'
+  = 'menu-item relative flex w-full cursor-default items-center gap-2 rounded-menu px-3 py-2 text-control leading-(--text-label--line-height) outline-hidden select-none transition-colors duration-[60ms] data-[highlighted]:bg-[color:var(--ui-selected)] data-[disabled]:pointer-events-none data-[disabled]:opacity-40 [&_svg:not([class*=text-])]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4'
 
-// Full-width hairline divider between menu rows — item-width (no negative margin),
-// dimmed so it separates without competing with the rows.
-export const menuSeparatorClass = 'bg-border/60 pointer-events-none my-1 h-px'
+// Quiet hairline divider; the shared menu viewport owns its inset and gap clearance.
+export const menuSeparatorClass = 'bg-(--menu-separator-color) pointer-events-none my-1 h-px'
 
 // Section heading inside a menu — a quiet, muted group marker. One notch
 // smaller/dimmer than rows (text-body, medium) and short (py-1) so it reads as a
@@ -96,3 +92,9 @@ export const menuSeparatorClass = 'bg-border/60 pointer-events-none my-1 h-px'
 // sitting slightly RIGHT of the row text; trimming 2px pulls its left edge back so
 // the heading and the row labels line up to the eye.
 export const menuLabelClass = 'text-muted-foreground cursor-default pr-2.5 pl-2 py-1 text-body font-medium select-none'
+
+// Short labels retain a comfortable menu width; narrow screens may shrink it.
+export const menuWidthClass = 'min-w-[min(var(--menu-min-width),calc(100vw-1rem))]'
+
+// Shared stroke for submenu direction hints.
+export const menuIndicatorStrokeWidth = 1.75
diff --git a/src/lib/trigger.ts b/src/lib/trigger.ts
index 4a86d7a..bdfb7a9 100644
--- a/src/lib/trigger.ts
+++ b/src/lib/trigger.ts
@@ -9,8 +9,13 @@
 //    (`data-size=sm|default|lg`), matching how reka's SelectTrigger sizes.
 //  - placeholder tint: driven by a `data-placeholder` attribute (reka sets it on
 //    SelectTrigger; the Combobox sets it manually when no value is selected).
+// cursor-pointer lives here (not per consumer): the trigger is a button, and
+// the contract's Pointer Cursor rule applies to every consumer of this class —
+// Select, DateRangePicker, and the app-level Combobox alike. Tailwind v4's
+// preflight no longer puts `cursor: pointer` on <button>, so without this the
+// trigger renders the default arrow and reads as inert.
 export const selectTriggerClass
-  = 'flex items-center justify-between gap-2 rounded-md px-3 py-2 tracking-[0.01em] whitespace-nowrap outline-none select-none '
+  = 'flex items-center justify-between gap-2 rounded-md px-3 py-2 tracking-[0.01em] whitespace-nowrap outline-none select-none cursor-pointer '
     + 'data-[placeholder]:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-40 '
     + 'data-[size=sm]:h-8 data-[size=sm]:text-body data-[size=default]:h-9 data-[size=default]:text-label data-[size=lg]:h-10 data-[size=lg]:text-control data-[size=lg]:px-3.5 '
     + '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 '
diff --git a/src/lib/useScrollFade.ts b/src/lib/useScrollFade.ts
new file mode 100644
index 0000000..d1402a7
--- /dev/null
+++ b/src/lib/useScrollFade.ts
@@ -0,0 +1,36 @@
+import type { Ref } from 'vue'
+import { ref, watchEffect } from 'vue'
+import { useEventListener } from '@vueuse/core'
+
+export function useScrollFade(el: Ref<HTMLElement | null | undefined>) {
+  const fadeTop = ref(false)
+  const fadeBottom = ref(false)
+
+  function update() {
+    const node = el.value
+    if (!node)
+      return
+    // 1px slack: fractional scroll positions (zoom, dvh rounding) never quite
+    // reach scrollHeight - clientHeight exactly.
+    const remaining = node.scrollHeight - node.clientHeight - node.scrollTop
+    fadeTop.value = node.scrollTop > 1
+    fadeBottom.value = remaining > 1
+  }
+
+  watchEffect((onCleanup) => {
+    update()
+    // Watch BOTH boxes: the scroller (dialog cap / viewport changes) and the
+    // content (AutoHeight tween, rows added/removed). Observing only the
+    // scroller misses scrollHeight changes — its own box doesn't resize when
+    // content grows inside a capped row.
+    const observer = new ResizeObserver(update)
+    if (el.value) {
+      observer.observe(el.value)
+      for (const child of Array.from(el.value.children)) observer.observe(child)
+    }
+    onCleanup(() => observer.disconnect())
+  })
+
+  useEventListener(el, 'scroll', update, { passive: true })
+  return { fadeTop, fadeBottom }
+}
diff --git a/src/lib/useSubmenuAlignment.ts b/src/lib/useSubmenuAlignment.ts
new file mode 100644
index 0000000..ec26946
--- /dev/null
+++ b/src/lib/useSubmenuAlignment.ts
@@ -0,0 +1,35 @@
+import { ref, watchPostEffect, type Ref } from 'vue'
+
+/** Align the first row with its trigger, leaving collision handling to Reka. */
+export function useSubmenuAlignment(content: Readonly<Ref<HTMLElement | undefined>>) {
+  const alignOffset = ref(0)
+  const ready = ref(false)
+  watchPostEffect((cleanup) => {
+    const element = content.value
+    ready.value = false
+    if (!element) return
+    const trigger = document.getElementById(element.getAttribute('aria-labelledby') ?? '')
+    if (!trigger) { ready.value = true; return }
+    const measure = () => {
+      const first = element.querySelector<HTMLElement>('[role^="menuitem"]')
+      if (first && element.offsetWidth) {
+        const bounds = element.getBoundingClientRect()
+        // Opening scale animation must not influence layout measurements.
+        const scale = bounds.width / element.offsetWidth
+        if (scale > 0) {
+          alignOffset.value = trigger.offsetHeight / 2
+            - (first.getBoundingClientRect().top - bounds.top) / scale - first.offsetHeight / 2
+        }
+      }
+      ready.value = true
+    }
+    const resize = new ResizeObserver(measure)
+    resize.observe(element)
+    resize.observe(trigger)
+    const mutation = new MutationObserver(measure)
+    mutation.observe(element, { childList: true, subtree: true })
+    measure()
+    cleanup(() => { resize.disconnect(); mutation.disconnect() })
+  })
+  return { alignOffset, ready }
+}
diff --git a/src/style.css b/src/style.css
index 0c8d632..e84167b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,11 @@
+/* tw-animate-css defines the animate-in/fade/zoom/slide utilities that the
+   overlay components emit (lib/menu.ts, Dialog, Popover, Select…). The library
+   must import it itself: before this line, a consumer that only imported
+   style.css got silently DEAD animation classes (no open/close motion at all)
+   unless it happened to import tw-animate-css on its own — which the showcase
+   didn't, so every overlay here used to pop in instantly. */
+@import "tw-animate-css";
+
 @custom-variant dark (&:is(.dark *));
 
 @layer components {
@@ -188,6 +196,11 @@
     box-shadow: inset 0 0 0 1px var(--field-edge);
     transition: box-shadow 0.07s ease-out;
   }
+  /* Plain inputs share the resting edge of Select and secondary buttons;
+     focus and validation below still replace that edge in place. */
+  [data-slot="input"] {
+    --field-edge: var(--border-hairline);
+  }
   /* Placeholder: same type metrics as real input (size/weight/tracking) so the
      hint sits on the exact same rhythm as typed text — only the color is lighter
      so it reads as a soft hint rather than competing with real input. */
@@ -268,15 +281,20 @@
     box-shadow: 0 0 0 1000px var(--background) inset;
   }
 
-  /* ── Select — a BUTTON, not a field. The trigger wears light secondary-button
-     chrome: a faint resting hairline plus a gray fill on hover, instead of the
-     input field-edge that flashed a near-black committed border. */
+  /* ── Select — a BUTTON, not a field. The trigger wears THE SAME secondary-button
+     chrome as outline/secondary <Button>: the --shadow-hairline inset edge and the
+     same hover fill language, instead of the input field-edge that flashed a
+     near-black committed border. This keeps the two control families reading as
+     one (they used to share the field edge, then drifted apart when the button
+     chrome was tuned). */
   [data-slot="select-trigger"] {
     background-color: transparent;
-    box-shadow: inset 0 0 0 1px var(--field-edge-rest);
+    box-shadow: var(--shadow-hairline);
     transition:
       background-color 110ms ease,
-      box-shadow 110ms ease;
+      box-shadow 0.06s ease-out; /* button-side hover drops the ring at 60ms —
+       the trigger borrows the pair but keeps its slower 110ms hover; the ring
+       dropping on a value chooser read as the field-edge flash this rule replaced. */
     /* Hover is PURELY pointer-driven (pointer on = fill, off = none). Reka sets
        pointer-events:none on the page while the menu is open, which would make
        the trigger inert (unhoverable) — and, on close, the page stays inert for
@@ -289,7 +307,7 @@
     pointer-events: auto;
   }
   [data-slot="select-trigger"]:hover {
-    background-color: var(--ui-hover);
+    background-color: var(--btn-secondary-overlay);
   }
   /* No focus ring: reka returns DOM focus to the trigger after a mouse pick,
      and the browser then paints :focus-visible — which left a near-black ring
@@ -355,6 +373,16 @@
     position: relative;
     isolation: isolate;
   }
+  /* Toolbar actions stay secondary at rest, retaining the ghost hover surface.
+     Color belongs to the button so nested glyphs and labels change together. */
+  [data-button][data-variant="ghost"][data-tone="muted"]:is(:focus-visible, :active, [data-state="open"], [aria-expanded="true"]):not(:disabled) {
+    color: var(--foreground) !important;
+  }
+  @media (hover: hover) {
+    [data-button][data-variant="ghost"][data-tone="muted"]:hover:not(:disabled) {
+      color: var(--foreground) !important;
+    }
+  }
   [data-button][data-variant="ghost"]::before {
     content: "";
     position: absolute;
@@ -525,7 +553,7 @@
     width: 1.5rem;
     opacity: 1;
   }
-  [data-button][data-loading][data-loading-mode="icon"] > [data-button-content] > svg:first-child {
+  [data-button][data-loading][data-loading-mode="icon"] > [data-button-content] > :is(svg, img):first-child {
     animation: button-spin 1s linear infinite;
   }
   /* Busy holds the most-engaged color (no pop on the click→spin handoff). */
@@ -609,6 +637,10 @@
     background-color: transparent;
     transition: background-color 15ms ease;
   }
+  /* Borderless dark cards keep the interaction overlay inside their own box. */
+  .dark [data-slot="action-card"]:not([data-bordered])::before {
+    inset: 0;
+  }
   :is(button, a)[data-slot="action-card"]:hover::before {
     background-color: var(--action-card-hover);
   }
@@ -1046,6 +1078,16 @@
 }
 
 :root, [data-color-scheme-preview="memoh"] {
+  --select-fade-midpoint: rgb(0 0 0 / 0.4); /* Mask alpha, independent of theme. */
+  /* Nine 34px rows and eight 2px gaps, scaling with the root font. */
+  --menu-frame-spacing: 0.25rem;
+  --menu-separator-color: var(--border-soft);
+  --menu-row-gap: 0.125rem;
+  --menu-leading-icon-size: 1rem;
+  --menu-min-width: 10rem;
+  --menu-item-leading-size: calc(var(--text-label--line-height) + 1rem);
+  --menu-viewport-max-height: calc(2.125rem * 9 + 0.125rem * 8);
+  --select-viewport-max-height: var(--menu-viewport-max-height);
   --font-sans: "Inter Variable", "Inter", "MiSans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Noto Sans SC", sans-serif;
   --radius: 0.625rem;
   --scheme-hue: 72;
@@ -1076,6 +1118,7 @@
   --background-chrome: oklch(0.975 0.0026 63);
   --foreground: oklch(0.21 0.004 95);
   --card: oklch(1 0 0);
+  --section-card: var(--card);
   --card-foreground: oklch(0.21 0.004 95);
   --popover: var(--card);
   --popover-foreground: var(--card-foreground);
@@ -1226,8 +1269,9 @@
        --shadow-hairline  1px inset edge (outline / secondary button chrome)
        --shadow-thumb     subtle lift for the segmented sliding thumb
        --shadow-dropdown  dropdown elevation for menu surfaces */
-  /* Hairline edge color — shared by secondary/outline button chrome and small
-     control borders (checkbox). A future Design Token revision target. */
+  /* Hairline edge color — shared by secondary/outline button chrome, the Select
+     trigger, and small control borders (checkbox). A future Design Token
+     revision target. */
   --border-hairline: oklch(0 0 0 / 0.16);
   /* Edge for ELEVATED surfaces (dropdown / popover menus). A neutral hairline a
      touch stronger than the field/button edge (--field-edge-rest 0.11) so the
@@ -1246,7 +1290,7 @@
   --border-menu-elevated: transparent;
   --shadow-hairline: inset 0 0 0 1px var(--border-hairline);
   --shadow-thumb: 0 1px 2px oklch(0 0 0 / 0.08);
-  --shadow-dropdown: 0 1px 2px 0 oklch(0 0 0 / 0.04), 0 6px 18px -6px oklch(0 0 0 / 0.08);
+  --shadow-dropdown: 0 1px 2px 0 oklch(0 0 0 / 0.03), 0 4px 12px -6px oklch(0 0 0 / 0.05);
   /* Elevation for any surface floating in the MODAL layer over a scrim — the card
      Dialog / Sheet panels AND the CommandDialog menu palette all share it so modal
      depth never fragments (was: per-component shadow-2xl / shadow-lg / a bespoke
@@ -1465,9 +1509,10 @@
 }
 
 .dark, .dark [data-color-scheme-preview="memoh"] {
-  --background: oklch(0.152 0 0);
+  --background: oklch(0.12212 0 0);
   --foreground: oklch(0.90 0 0);
   --card: oklch(0.21 0 0);
+  --section-card: var(--card);
   --card-foreground: oklch(0.90 0 0);
   --popover: oklch(0.21 0 0);
   --popover-foreground: oklch(0.90 0 0);
@@ -1490,7 +1535,7 @@
    * unchanged (1px) — only the contrast tracks the brighter surface. Still well
    * below the old hard 10%. Light mode is unaffected. */
   --border: oklch(1 0 0 / 8%);
-  --border-hairline: oklch(0.422 0 0);
+  --border-hairline: oklch(0.34543 0 0); /* ~RGB 57: +33 over the RGB 24 card. */
   --border-menu: oklch(1 0 0 / 0.14);
   /* Dark: a dark palette on a dark scrim DOES need an edge, so here the elevated
      menu border is a WHITE hairline (light-on-dark), a touch stronger than
@@ -1889,7 +1934,7 @@
 }
 
 .dark[data-color-scheme]:not([data-color-scheme="memoh"]), .dark [data-color-scheme-preview]:not([data-color-scheme-preview="memoh"]) {
-  --background: oklch(0.152 0.006 var(--scheme-hue));
+  --background: oklch(0.12212 0.006 var(--scheme-hue));
   --foreground: oklch(0.90 0.004 var(--scheme-hue));
   --card: oklch(0.21 0.006 var(--scheme-hue));
   --card-foreground: oklch(0.90 0.004 var(--scheme-hue));
@@ -1923,6 +1968,7 @@
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
+  --color-section-card: var(--section-card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
@@ -2451,3 +2497,117 @@
     transition-duration: 1ms;
   }
 }
+
+
+/* Registered as <length> (not inherited) so the fade distance itself can
+   transition — an unregistered custom prop would snap between values. */
+@property --scroll-fade-top {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --scroll-fade-bottom {
+  syntax: '<length>';
+  inherits: false;
+  initial-value: 0px;
+}
+
+.scroll-fade {
+  /* transparent/black here are ALPHA stops in a mask, not paint colors. */
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black var(--scroll-fade-top),
+    black calc(100% - var(--scroll-fade-bottom)),
+    transparent
+  );
+  transition:
+    --scroll-fade-top 200ms ease,
+    --scroll-fade-bottom 200ms ease;
+}
+
+.scroll-fade[data-slot="select-viewport"] {
+  /* Keep the fade distance while reducing content opacity earlier in the edge. */
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    var(--select-fade-midpoint) calc(var(--scroll-fade-top) / 2),
+    black var(--scroll-fade-top),
+    black calc(100% - var(--scroll-fade-bottom)),
+    var(--select-fade-midpoint) calc(100% - var(--scroll-fade-bottom) / 2),
+    transparent
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .scroll-fade {
+    transition: none;
+  }
+}
+
+/* Motion ported from Memoh sidebar-scroll.css at 8382d42eb (#1076).
+   Reka Presence keeps the scrollbar mounted until the exit animation ends. */
+[data-slot="scroll-area-scrollbar"][data-state="visible"] {
+  animation: scroll-area-in 0.1s ease-out both;
+}
+[data-slot="scroll-area-scrollbar"][data-state="hidden"] {
+  animation: scroll-area-out 0.16s ease-in both;
+}
+@keyframes scroll-area-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes scroll-area-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="scroll-area-scrollbar"] { animation: none; }
+}
+
+/* Icon-leading rows reserve a square column matching the single-line row.
+   The menu owns icon size and spacing; grid alignment centers the glyph.
+   SelectItemText is transparent to this grid only when it has a leading icon. */
+@layer utilities {
+  .menu-item:has(> :is(svg, img):first-child),
+  .menu-item:has(> [data-slot="select-item-text"] > :is(svg, img):first-child) {
+    display: grid;
+    grid-template-columns: var(--menu-item-leading-size) minmax(0, 1fr);
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    min-height: var(--menu-item-leading-size);
+    padding-block: 0;
+    padding-inline-start: 0;
+    column-gap: 0;
+  }
+  .menu-item > :is(svg, img):first-child,
+  .menu-item > [data-slot="select-item-text"] > :is(svg, img):first-child {
+    /* Menu geometry overrides legacy size/margin utilities at call sites. */
+    width: var(--menu-leading-icon-size) !important;
+    height: var(--menu-leading-icon-size) !important;
+    margin: 0 !important;
+    justify-self: center;
+    align-self: center;
+  }
+  .menu-item > [data-slot="select-item-text"]:has(> :is(svg, img):first-child) {
+    display: contents;
+  }
+}
+
+
+@layer components {
+  .menu-item [data-menu-item-hint] { opacity: 0; }
+  .menu-item[data-highlighted] [data-menu-item-hint],
+  .menu-item:focus-visible [data-menu-item-hint] { opacity: 1; }
+}
+
+@layer utilities {
+  /* The flex gap already contributes to separator clearance. Match the outer
+     frame rather than adding a second full frame above and below the line. */
+  .menu-viewport > [role="separator"] {
+    margin-block: max(0px, calc(var(--menu-frame-spacing) - var(--menu-row-gap)));
+    margin-inline: calc(var(--menu-frame-spacing) * 2);
+  }
+}