frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/{Dropdown → Menu}/utils.ts

@@ -1,22 +1,22 @@
 import type {
-  DropdownGroupOption,
-  DropdownItem,
-  DropdownOption,
-  DropdownOptions,
-  DropdownTheme,
+  MenuGroupOption,
+  MenuItem,
+  MenuOption,
+  MenuOptions,
+  MenuTheme,
 } from './types'
 
 /**
  * Group object after normalization. `options` is guaranteed to be present
  * (the deprecated `items` alias has been resolved into it).
  */
-export type NormalizedDropdownGroup = DropdownGroupOption & {
-  options: DropdownOption[]
+export type NormalizedMenuGroup = MenuGroupOption & {
+  options: MenuOption[]
 }
 
-export const dropdownClasses = {
+export const menuClasses = {
   content:
-    'dropdown-content min-w-40 divide-y divide-outline-gray-modals rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none',
+    'menu-content min-w-40 divide-y divide-outline-elevation-2 rounded-lg bg-surface-elevation-2 shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none',
   group: 'p-1.5',
   groupLabel: 'flex h-7 items-center px-2 text-sm font-medium text-ink-gray-4',
   itemIcon: 'size-4 shrink-0',
@@ -26,45 +26,41 @@ export const dropdownClasses = {
     'cursor-pointer rounded outline-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed',
 } as const
 
-export function isDropdownGroupOption(
-  item: DropdownItem,
-): item is DropdownGroupOption {
+export function isMenuGroupOption(item: MenuItem): item is MenuGroupOption {
   return 'group' in item && ('options' in item || 'items' in item)
 }
 
-function resolveGroupChildren(group: DropdownGroupOption): DropdownOption[] {
+function resolveGroupChildren(group: MenuGroupOption): MenuOption[] {
   if (import.meta.env.DEV && group.options && group.items) {
     console.warn(
-      '[Dropdown] grouped entry has both `options` and `items`. `options` wins; `items` is the deprecated alias.',
+      '[Menu] grouped entry has both `options` and `items`. `options` wins; `items` is the deprecated alias.',
     )
   }
 
   return group.options ?? group.items ?? []
 }
 
-export function isDropdownSwitchOption(item: DropdownOption) {
+export function isMenuSwitchOption(item: MenuOption) {
   return item.switch === true
 }
 
-export function isDropdownSubmenuOption(item: DropdownOption) {
+export function isMenuSubmenuOption(item: MenuOption) {
   return Array.isArray(item.submenu)
 }
 
-export function isDropdownComponentOption(item: DropdownOption) {
+export function isMenuComponentOption(item: MenuOption) {
   return 'component' in item && Boolean(item.component)
 }
 
-function shouldRenderOption(option: DropdownOption) {
+function shouldRenderOption(option: MenuOption) {
   return option.condition ? option.condition() : true
 }
 
-function normalizeTheme(theme?: DropdownTheme): DropdownTheme {
+function normalizeTheme(theme?: MenuTheme): MenuTheme {
   return theme ?? 'gray'
 }
 
-export function normalizeDropdownOption(
-  option: DropdownOption,
-): DropdownOption {
+export function normalizeMenuOption(option: MenuOption): MenuOption {
   return {
     ...option,
     theme: normalizeTheme(option.theme),
@@ -72,18 +68,18 @@ export function normalizeDropdownOption(
   }
 }
 
-function normalizeGroupItems(items: DropdownOption[]) {
+function normalizeGroupItems(items: MenuOption[]) {
   return (items || [])
     .filter(Boolean)
     .filter(shouldRenderOption)
-    .map(normalizeDropdownOption)
+    .map(normalizeMenuOption)
 }
 
-export function normalizeDropdownOptions(
-  options: DropdownOptions = [],
-): NormalizedDropdownGroup[] {
-  const groups: NormalizedDropdownGroup[] = []
-  let currentGroup: NormalizedDropdownGroup | null = null
+export function normalizeMenuOptions(
+  options: MenuOptions = [],
+): NormalizedMenuGroup[] {
+  const groups: NormalizedMenuGroup[] = []
+  let currentGroup: NormalizedMenuGroup | null = null
   let implicitGroupIndex = 0
 
   function flushCurrentGroup() {
@@ -99,7 +95,7 @@ export function normalizeDropdownOptions(
   for (const [index, item] of options.entries()) {
     if (!item) continue
 
-    if (isDropdownGroupOption(item)) {
+    if (isMenuGroupOption(item)) {
       flushCurrentGroup()
 
       const visibleItems = normalizeGroupItems(resolveGroupChildren(item))
@@ -129,7 +125,7 @@ export function normalizeDropdownOptions(
       }
     }
 
-    currentGroup.options.push(normalizeDropdownOption(item))
+    currentGroup.options.push(normalizeMenuOption(item))
   }
 
   flushCurrentGroup()
@@ -137,33 +133,33 @@ export function normalizeDropdownOptions(
   return groups
 }
 
-export function groupHasIcons(group: NormalizedDropdownGroup) {
+export function groupHasIcons(group: NormalizedMenuGroup) {
   return group.options.some((item) => Boolean(item.icon))
 }
 
-export function getDropdownIconColor(item: {
+export function getMenuIconColor(item: {
   disabled?: boolean
-  theme?: DropdownTheme
+  theme?: MenuTheme
 }) {
   if (item.disabled) return 'text-ink-gray-4'
-  return item.theme === 'red' ? 'text-ink-red-3' : 'text-ink-gray-6'
+  return item.theme === 'red' ? 'text-ink-red-6' : 'text-ink-gray-6'
 }
 
-export function getDropdownTextColor(item: {
+export function getMenuTextColor(item: {
   disabled?: boolean
-  theme?: DropdownTheme
+  theme?: MenuTheme
 }) {
   if (item.disabled) return 'text-ink-gray-4'
-  return item.theme === 'red' ? 'text-ink-red-3' : 'text-ink-gray-7'
+  return item.theme === 'red' ? 'text-ink-red-6' : 'text-ink-gray-7'
 }
 
-export function getDropdownBackgroundColor(item: { theme?: DropdownTheme }) {
+export function getMenuBackgroundColor(item: { theme?: MenuTheme }) {
   if (item.theme === 'red') {
     return 'focus:bg-surface-red-3 data-[highlighted]:bg-surface-red-3 data-[state=open]:bg-surface-red-3'
   }
 
   return [
-    'focus:bg-surface-gray-2 data-[highlighted]:bg-surface-gray-2 data-[state=open]:bg-surface-gray-2',
+    'focus:bg-surface-gray-2 data-[highlighted]:bg-surface-alpha-gray-2 data-[state=open]:bg-surface-gray-2',
     'data-[state=checked]:bg-surface-gray-3',
     'data-[highlighted]:data-[state=checked]:bg-surface-gray-4',
   ].join(' ')

package/src/components/MobileNav/MobileNav.api.md

@@ -0,0 +1,70 @@
+<!-- Auto Generated by scripts/propsgen.ts -->
+<script setup>
+  import PropsTable from '@/components/Docs/PropsTable.vue'
+  import SlotsTable from '@/components/Docs/SlotsTable.vue'
+  import EmitsTable from '@/components/Docs/EmitsTable.vue'
+
+  const mobileNavSlots = [
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  }
+]
+
+  const mobileNavItemProps = [
+  {
+    name: 'label',
+    description: 'Label under the icon; also the accessible name.',
+    required: true,
+    type: 'string'
+  },
+  {
+    name: 'icon',
+    description: 'Icon CSS class, e.g. `lucide-home`, or a component. Ignored when the\ndefault slot is used (for a custom glyph or an avatar).',
+    required: false,
+    type: 'string | Component'
+  },
+  {
+    name: 'to',
+    description: 'Navigation target. Renders a router link. Tapping the item while it is\nalready the current route scrolls the shell to the top instead of\nre-navigating.',
+    required: false,
+    type: 'string | kt | Tt'
+  },
+  {
+    name: 'active',
+    description: 'Highlight this item. Independent of the current route so one tab can stay\nlit across a whole section (e.g. Home across community routes). Defaults to\nwhether `to` resolves to the current route.',
+    required: false,
+    type: 'boolean'
+  }
+]
+
+  const mobileNavItemSlots = [
+  {
+    name: 'default',
+    description: '',
+    type: '{ active: boolean; }'
+  }
+]
+
+  const mobileNavItemEmits = [
+  {
+    name: 'click',
+    description: '',
+    type: '[event: MouseEvent]'
+  }
+]
+</script>
+## API Reference
+
+### MobileNav
+
+<SlotsTable :data="mobileNavSlots"/>
+
+### MobileNavItem
+
+<PropsTable folder="MobileNav" name="MobileNavItem" :data="mobileNavItemProps"/>
+
+<SlotsTable :data="mobileNavItemSlots"/>
+
+<EmitsTable :data="mobileNavItemEmits"/>

package/src/components/MobileNav/MobileNav.cy.ts

@@ -0,0 +1,89 @@
+import { h } from 'vue'
+import { createMemoryHistory, createRouter } from 'vue-router'
+import MobileNav from './MobileNav.vue'
+import MobileNavItem from './MobileNavItem.vue'
+import {
+  registerScrollContainer,
+  unregisterScrollContainer,
+} from '../../composables/useScrollContainer'
+
+function routerAt(path: string) {
+  const router = createRouter({
+    history: createMemoryHistory(),
+    routes: [
+      { path: '/', name: 'home', component: { template: '<div />' } },
+      { path: '/search', name: 'search', component: { template: '<div />' } },
+    ],
+  })
+  router.push(path)
+  return router
+}
+
+describe('<MobileNav />', () => {
+  it('lays its items out as an equal-width grid', () => {
+    cy.mount(MobileNav, {
+      slots: {
+        default: () => [
+          h(MobileNavItem, { label: 'Home', icon: 'lucide-house' }),
+          h(MobileNavItem, { label: 'Search', icon: 'lucide-search' }),
+        ],
+      },
+    })
+    cy.get('[data-slot=mobile-nav]').should('have.class', 'grid')
+    cy.get('[data-slot=mobile-nav-item]').should('have.length', 2)
+  })
+})
+
+describe('<MobileNavItem />', () => {
+  it('renders a button and emits click when there is no `to`', () => {
+    const onClick = cy.stub().as('click')
+    cy.mount(MobileNavItem, { props: { label: 'Home', icon: 'lucide-house', onClick } })
+    cy.get('button[data-slot=mobile-nav-item]').should('exist')
+    cy.get('button').click()
+    cy.get('@click').should('have.been.calledOnce')
+  })
+
+  it('renders a router link to a different route', () => {
+    cy.mount(MobileNavItem, {
+      props: { label: 'Search', icon: 'lucide-search', to: '/search' },
+      global: { plugins: [routerAt('/')] },
+    })
+    cy.get('a[data-slot=mobile-nav-item]').should('have.attr', 'href', '/search')
+  })
+
+  it('is a button (not a link) when `to` is already the current route', () => {
+    cy.mount(MobileNavItem, {
+      props: { label: 'Home', icon: 'lucide-house', to: '/' },
+      global: { plugins: [routerAt('/')] },
+    })
+    cy.get('button[data-slot=mobile-nav-item]').should('exist')
+    cy.get('a[data-slot=mobile-nav-item]').should('not.exist')
+    cy.get('[data-slot=mobile-nav-item]').should('have.attr', 'aria-current', 'page')
+  })
+
+  it('scrolls the registered container to the top when the current tab is tapped', () => {
+    const scroller = document.createElement('div')
+    Object.defineProperty(scroller, 'scrollHeight', { value: 2000 })
+    const scrollTo = cy.stub().as('scrollTo')
+    scroller.scrollTo = scrollTo
+    registerScrollContainer(scroller)
+
+    cy.mount(MobileNavItem, {
+      props: { label: 'Home', icon: 'lucide-house', to: '/' },
+      global: { plugins: [routerAt('/')] },
+    })
+    cy.get('button[data-slot=mobile-nav-item]').click()
+    cy.get('@scrollTo')
+      .should('have.been.calledOnce')
+      .then(() => unregisterScrollContainer(scroller))
+  })
+
+  it('reflects `active` in data-state and exposes it to the default slot', () => {
+    cy.mount(MobileNavItem, {
+      props: { label: 'You', active: true },
+      slots: { default: (props: { active: boolean }) => h('span', `active:${props.active}`) },
+    })
+    cy.get('[data-slot=mobile-nav-item][data-state=active]').should('exist')
+    cy.get('[data-slot=mobile-nav-item]').should('contain.text', 'active:true')
+  })
+})

package/src/components/MobileNav/MobileNav.md

@@ -0,0 +1,34 @@
+# MobileNav
+
+The bottom tab bar for a [`MobileShell`](/docs/components/mobileshell).
+`MobileNav` is a grid frame; each `MobileNavItem` becomes one equal-width tab, so
+the bar adapts to any number of items.
+
+<ComponentPreview name="MobileNav-Default" />
+
+## MobileNavItem
+
+Each item takes a `label`, an `icon` (or a default slot for custom content like
+an avatar), and a `to` target. It renders a router link when navigating
+somewhere new, and — when it's already the current route — a button that scrolls
+the shell's scroll container to the top instead of re-navigating.
+
+`active` controls the highlight and is independent of the current route, so one
+tab can stay lit across a whole section (e.g. Home across every community route)
+while tapping it still navigates home. When `active` is omitted it defaults to
+whether `to` matches the current route. The default slot receives `{ active }`
+so custom content — an avatar, a badge — can react to the highlight:
+
+```vue
+<MobileNavItem label="You" :to="{ name: 'More' }" :active="isMoreRoute">
+  <template #default="{ active }">
+    <UserAvatar :user="me" :class="{ 'ring-2 ring-outline-gray-4': active }" />
+  </template>
+</MobileNavItem>
+```
+
+Like `SidebarItem`, `MobileNavItem` is router-optional: mounted without
+vue-router it degrades to a plain `<a>`/`<button>` with no warnings, so it works
+in docs, tests, and embedded use.
+
+<!-- @include: ./MobileNav.api.md -->

package/src/components/MobileNav/MobileNav.vue

@@ -0,0 +1,15 @@
+<template>
+  <nav
+    data-slot="mobile-nav"
+    class="grid shrink-0 auto-cols-fr grid-flow-col border-t border-outline-gray-2 bg-surface-elevation-2 [@media(display-mode:standalone)]:pb-4"
+  >
+    <slot />
+  </nav>
+</template>
+
+<script setup lang="ts">
+// A bare grid frame: each MobileNavItem becomes one equal-width column
+// (auto-cols-fr + grid-flow-col), so the bar adapts to any item count without
+// hardcoding a column class. Bottom padding clears the home indicator in an
+// installed PWA (display-mode: standalone).
+</script>

package/src/components/MobileNav/MobileNavItem.vue

@@ -0,0 +1,125 @@
+<template>
+  <!--
+    A real link when navigating somewhere new; a plain button when this item is
+    already the current route (tap = scroll to top) or has no target. Switching
+    the element on `isCurrent` — rather than preventing RouterLink's default —
+    keeps the scroll-vs-navigate decision unambiguous. The 'button' string can't
+    go through <component :is> (it collides with the global <Button>), so the
+    button stays a literal v-else; the inner content is shared.
+  -->
+  <component
+    :is="linkComponent"
+    v-if="to && !isCurrent"
+    v-bind="linkAttrs"
+    data-slot="mobile-nav-item"
+    :data-state="resolvedActive ? 'active' : 'inactive'"
+    :aria-label="label"
+    :aria-current="isCurrent ? 'page' : undefined"
+    class="flex min-h-14 flex-col items-center justify-center gap-1 py-2 transition active:scale-95"
+    @click="emit('click', $event)"
+  >
+    <slot :active="resolvedActive">
+      <span
+        v-if="typeof icon === 'string'"
+        :class="[icon, resolvedActive ? 'text-ink-gray-8' : 'text-ink-gray-5']"
+        class="size-6"
+        aria-hidden="true"
+      />
+      <component
+        v-else-if="icon"
+        :is="icon"
+        :class="resolvedActive ? 'text-ink-gray-8' : 'text-ink-gray-5'"
+        class="size-6"
+        aria-hidden="true"
+      />
+    </slot>
+    <span
+      class="text-xs-medium"
+      :class="resolvedActive ? 'text-ink-gray-8' : 'text-ink-gray-5'"
+    >
+      {{ label }}
+    </span>
+  </component>
+
+  <button
+    v-else
+    type="button"
+    data-slot="mobile-nav-item"
+    :data-state="resolvedActive ? 'active' : 'inactive'"
+    :aria-label="label"
+    :aria-current="isCurrent ? 'page' : undefined"
+    class="flex min-h-14 flex-col items-center justify-center gap-1 py-2 transition active:scale-95"
+    @click="onButtonClick"
+  >
+    <slot :active="resolvedActive">
+      <span
+        v-if="typeof icon === 'string'"
+        :class="[icon, resolvedActive ? 'text-ink-gray-8' : 'text-ink-gray-5']"
+        class="size-6"
+        aria-hidden="true"
+      />
+      <component
+        v-else-if="icon"
+        :is="icon"
+        :class="resolvedActive ? 'text-ink-gray-8' : 'text-ink-gray-5'"
+        class="size-6"
+        aria-hidden="true"
+      />
+    </slot>
+    <span
+      class="text-xs-medium"
+      :class="resolvedActive ? 'text-ink-gray-8' : 'text-ink-gray-5'"
+    >
+      {{ label }}
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue'
+import { RouterLink } from 'vue-router'
+import { scrollToTop } from '../../composables/useScrollContainer'
+import type { MobileNavItemProps } from './types'
+
+const props = defineProps<MobileNavItemProps>()
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+
+// Read router/route off global properties (not useRouter/useRoute) so the item
+// works without warnings when mounted outside a vue-router app — docs, tests,
+// embedded use. Same approach as SidebarItem.
+const globals = getCurrentInstance()?.appContext.config.globalProperties
+const hasRouter = computed(() => Boolean(globals?.$router))
+
+const linkComponent = computed(() => (hasRouter.value ? RouterLink : 'a'))
+const linkAttrs = computed(() =>
+  hasRouter.value
+    ? { to: props.to }
+    : { href: typeof props.to === 'string' ? props.to : undefined },
+)
+
+const resolvedRoute = computed(() =>
+  props.to && globals?.$router ? globals.$router.resolve(props.to) : null,
+)
+
+// Is this item's target the exact current route? Drives scroll-vs-navigate and
+// aria-current — distinct from `active`, which may span a whole section.
+const isCurrent = computed(() => {
+  const target = resolvedRoute.value
+  const current = globals?.$route
+  if (!target || !current) return false
+  return target.name
+    ? current.name === target.name
+    : current.path === target.path
+})
+
+// Explicit `active` wins (broad section highlight); otherwise fall back to the
+// current-route match so simple navs light up the current item automatically.
+const resolvedActive = computed(() => props.active ?? isCurrent.value)
+
+function onButtonClick(event: MouseEvent) {
+  // Reached only when this item is already current (or has no target): a tap
+  // scrolls the shell's scroll container to the top.
+  if (isCurrent.value) scrollToTop()
+  emit('click', event)
+}
+</script>

package/src/components/MobileNav/index.ts

@@ -0,0 +1,4 @@
+export { default as MobileNav } from './MobileNav.vue'
+export { default as MobileNavItem } from './MobileNavItem.vue'
+
+export type { MobileNavProps, MobileNavItemProps } from './types'

package/src/components/MobileNav/stories/Default.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MobileNav, MobileNavItem, Avatar } from 'frappe-ui'
+
+const tab = ref('home')
+</script>
+
+<template>
+  <div class="mx-auto w-[360px] overflow-hidden rounded-xl border bg-surface-white">
+    <MobileNav>
+      <MobileNavItem
+        label="Home"
+        icon="lucide-house"
+        :active="tab === 'home'"
+        @click="tab = 'home'"
+      />
+      <MobileNavItem
+        label="Notifications"
+        icon="lucide-bell"
+        :active="tab === 'notifications'"
+        @click="tab = 'notifications'"
+      />
+      <MobileNavItem
+        label="Search"
+        icon="lucide-search"
+        :active="tab === 'search'"
+        @click="tab = 'search'"
+      />
+      <MobileNavItem label="You" :active="tab === 'you'" @click="tab = 'you'">
+        <template #default="{ active }">
+          <Avatar
+            label="Jane Doe"
+            size="md"
+            :class="active ? 'ring-2 ring-outline-gray-4' : ''"
+          />
+        </template>
+      </MobileNavItem>
+    </MobileNav>
+  </div>
+</template>

package/src/components/MobileNav/types.ts

@@ -0,0 +1,33 @@
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+/**
+ * `MobileNav` (the bar) has no props — it's a grid frame for `MobileNavItem`s.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface MobileNavProps {}
+
+export interface MobileNavItemProps {
+  /** Label under the icon; also the accessible name. */
+  label: string
+
+  /**
+   * Icon CSS class, e.g. `lucide-home`, or a component. Ignored when the
+   * default slot is used (for a custom glyph or an avatar).
+   */
+  icon?: string | Component
+
+  /**
+   * Navigation target. Renders a router link. Tapping the item while it is
+   * already the current route scrolls the shell to the top instead of
+   * re-navigating.
+   */
+  to?: RouteLocationRaw
+
+  /**
+   * Highlight this item. Independent of the current route so one tab can stay
+   * lit across a whole section (e.g. Home across community routes). Defaults to
+   * whether `to` resolves to the current route.
+   */
+  active?: boolean
+}

package/src/components/MobileShell/MobileShell.api.md

@@ -0,0 +1,23 @@
+<!-- Auto Generated by scripts/propsgen.ts -->
+<script setup>
+  import PropsTable from '@/components/Docs/PropsTable.vue'
+  import SlotsTable from '@/components/Docs/SlotsTable.vue'
+  import EmitsTable from '@/components/Docs/EmitsTable.vue'
+
+  const slotsData = [
+  {
+    name: 'default',
+    description: '',
+    type: '{}'
+  },
+  {
+    name: 'nav',
+    description: '',
+    type: '{}'
+  }
+]
+</script>
+## API Reference
+
+<SlotsTable :data="slotsData"/> 
+

package/src/components/MobileShell/MobileShell.cy.ts

@@ -0,0 +1,25 @@
+import { h } from 'vue'
+import MobileShell from './MobileShell.vue'
+import { getScrollContainer } from '../../composables/useScrollContainer'
+
+describe('<MobileShell />', () => {
+  it('renders the default content and #nav slots', () => {
+    cy.mount(MobileShell, {
+      slots: {
+        default: () => h('div', { 'data-test': 'page' }, 'page body'),
+        nav: () => h('div', { 'data-test': 'nav' }, 'tab bar'),
+      },
+    })
+    cy.get('[data-slot=mobile-shell]').should('exist')
+    cy.get('[data-slot=mobile-shell-scroll]').should('contain.text', 'page body')
+    cy.get('[data-test=nav]').should('contain.text', 'tab bar')
+  })
+
+  it('registers its scroll region so getScrollContainer() resolves', () => {
+    cy.mount(MobileShell, { slots: { default: () => h('div', 'content') } })
+    cy.get('[data-slot=mobile-shell-scroll]').should('exist')
+    cy.then(() => {
+      expect(getScrollContainer()).to.not.be.null
+    })
+  })
+})

package/src/components/MobileShell/MobileShell.md

@@ -0,0 +1,24 @@
+# MobileShell
+
+The mobile app frame. `MobileShell` is a fixed, full-height column: a pinned
+`PageHeaderTarget` on top (with safe-area padding for installed PWAs), a
+native-scrolling content area, and a `#nav` slot for a bottom
+[`MobileNav`](/docs/components/mobilenav). It's a separate family from
+[`DesktopShell`](/docs/components/desktopshell) — mobile and desktop are
+different navigation models, so the app chooses which to render for the viewport
+rather than toggling one responsive component.
+
+<ComponentPreview name="MobileShell-Default" />
+
+Put the routed page in the default slot and the tab bar in `#nav`. The content
+area scrolls with the platform's own momentum and overscroll; the header and nav
+stay fixed to the edges.
+
+## Scroll container
+
+Like `DesktopShell`, the content area registers into the scroll-container
+registry, so [`useScrollContainer()`](/docs/other/utilities) and
+`getScrollContainer()` resolve it — a tapped-active tab or a router
+`scrollBehavior` can drive it with no app-owned global.
+
+<!-- @include: ./MobileShell.api.md -->