@duro-app/ui 5.4.0 → 5.6.0

package/src/components/PageNav/PageNav.tsx

@@ -0,0 +1,93 @@
+import {createContext, type ReactNode, useContext} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {linkClickHandler, type OnNavigate} from '../../shared/navigate'
+
+/* PageNav — the previous and next pages in reading order, at the foot of a
+ * page: a labelled `nav` holding up to two link cards. Each card shows a small
+ * direction label ("Previous", from your text catalog) over the page title.
+ * Prev holds the left slot and Next the right one even when the other is
+ * missing, so Next stays right-aligned on the last-but-one page too; on a
+ * narrow container (below the `xs` breakpoint) the two stack.
+ *
+ * Not `Pagination` (numbered result pages, in `@duro-app/ui/table`). */
+
+// Prev and Next place themselves in Root's two-column grid.
+const PageNavContext = createContext(false)
+
+function usePageNav() {
+  if (!useContext(PageNavContext))
+    throw new Error('PageNav compound components must be used within PageNav.Root')
+}
+
+// --- Root ---
+
+interface RootProps {
+  /** Names the landmark ("Pages"); required, from your text catalog. */
+  'aria-label': string
+  /** A `PageNav.Prev` and/or a `PageNav.Next`. */
+  children: ReactNode
+}
+
+function Root({'aria-label': ariaLabel, children}: RootProps) {
+  return (
+    <PageNavContext.Provider value={true}>
+      <html.nav aria-label={ariaLabel} style={styles.root}>
+        <html.div style={styles.grid}>{children}</html.div>
+      </html.nav>
+    </PageNavContext.Provider>
+  )
+}
+
+// --- Prev / Next ---
+
+interface LinkProps {
+  href: string
+  /** The page's title. */
+  title: ReactNode
+  /** The direction label above the title ("Previous", "Next"), from your text catalog. */
+  label: ReactNode
+  /**
+   * Client-side navigation: called for a plain primary click (no modifier
+   * key). Call `event.preventDefault()`, then your router's navigate.
+   */
+  onNavigate?: OnNavigate
+}
+
+function Prev({href, title, label, onNavigate}: LinkProps) {
+  usePageNav()
+  return (
+    <html.a
+      href={href}
+      onClick={linkClickHandler(href, onNavigate)}
+      style={[styles.card, styles.prev]}
+    >
+      <html.span style={styles.label}>
+        <html.span aria-hidden>←</html.span> {label}
+      </html.span>
+      <html.span style={styles.title}>{title}</html.span>
+    </html.a>
+  )
+}
+
+function Next({href, title, label, onNavigate}: LinkProps) {
+  usePageNav()
+  return (
+    <html.a
+      href={href}
+      onClick={linkClickHandler(href, onNavigate)}
+      style={[styles.card, styles.next]}
+    >
+      <html.span style={styles.label}>
+        {label} <html.span aria-hidden>→</html.span>
+      </html.span>
+      <html.span style={styles.title}>{title}</html.span>
+    </html.a>
+  )
+}
+
+export const PageNav = {
+  Root,
+  Prev,
+  Next,
+}

package/src/components/PageNav/styles.css.ts

@@ -0,0 +1,100 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {breakpoints} from '@duro-app/tokens/tokens/breakpoints.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+
+// Below this container width the two cards stack (Mobile.dc.html); above it
+// they sit side by side, each in its own half (Reader.dc.html).
+const STACK_BP = breakpoints.xs
+const STACKED = `@container (max-width: ${STACK_BP})`
+
+// The picked docs browser (docs/mockups/docs-nav/Reader.dc.html and
+// Mobile.dc.html, `.pn .card`): two interactive cards, a small muted
+// direction label over the title, Next aligned right.
+export const styles = css.create({
+  // hosts the container query: a container cannot query itself
+  root: {
+    containerType: 'inline-size',
+    minWidth: 0,
+  },
+  grid: {
+    display: 'grid',
+    gridTemplateColumns: {
+      default: 'minmax(0, 1fr) minmax(0, 1fr)',
+      [STACKED]: 'minmax(0, 1fr)',
+    },
+    gap: spacing.md,
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: spacing.md,
+    fontFamily: typography.fontFamily,
+    color: colors.text,
+    textDecorationLine: 'none',
+    backgroundColor: {
+      default: colors.bgCard,
+      ':hover': colors.bgCardHover,
+    },
+    borderWidth: borders.hairline,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderRadius: radii.md,
+    cursor: 'pointer',
+    transitionProperty: 'background-color',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
+    outlineWidth: {
+      default: 0,
+      ':focus-visible': borders.focusRing,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-visible': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-visible': colors.accent,
+    },
+    outlineOffset: {
+      default: 0,
+      ':focus-visible': borders.focusOffset,
+    },
+  },
+  // each side keeps its slot: Next stays in the right half without a Prev
+  prev: {
+    gridColumn: {
+      default: '1',
+      [STACKED]: 'auto',
+    },
+    gridRow: {
+      default: '1',
+      [STACKED]: 'auto',
+    },
+  },
+  next: {
+    gridColumn: {
+      default: '2',
+      [STACKED]: 'auto',
+    },
+    gridRow: {
+      default: '1',
+      [STACKED]: 'auto',
+    },
+    textAlign: {
+      default: 'right',
+      [STACKED]: 'left',
+    },
+  },
+  label: {
+    fontSize: typography.fontSizeXs,
+    color: colors.textMuted,
+  },
+  title: {
+    fontSize: typography.fontSizeSm,
+    overflowWrap: 'anywhere',
+  },
+})

package/src/components/Popover/Popover.meta.ts

@@ -2,10 +2,11 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Non-modal anchored overlay for small interactive content. Compound component — Root is required (throws without it). Anchored to Popover.Trigger, or to a virtual anchor (a () => DOMRect) when there is no Trigger; call reposition() through a ref when the anchor moves.',
+    'Non-modal anchored overlay for small interactive content. Compound component — Root is required (throws without it). Anchored to Popover.Trigger, or to a virtual anchor (a () => DOMRect) when there is no Trigger; call reposition() through a ref when the anchor moves. Popover.Trigger takes size="small" beside small Toggles. Popover.Popup raised draws it over another floating surface (floatingRaised, popoverRaised in a modal), never over a modal.',
   whenToUse: [
     'A small form or controls tied to one element that stay open while you work in them',
     'Anchoring to a spot that is not a button (a canvas point, a text selection) with a virtual anchor',
+    'One floating surface over another (a link editor over a selection format bar) — Popover.Popup raised',
     'Holding a Select or Combobox: their portalled list counts as inside the popover, so choosing an item keeps it open; Escape closes an open Select, Combobox or Menu before the popover',
   ],
   whenNotToUse: [

package/src/components/Popover/Popover.tsx

@@ -22,6 +22,7 @@ import {PopoverLayerContext, type PopoverLayerContextValue} from './PopoverLayer
 import {useGroupedControl} from '../ButtonGroup/useGroupedControl'
 import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
 import {mergeRefs} from '../../shared/mergeRefs'
+import type {ControlSize} from '../../shared/types'
 import {useInModal} from '../../shared/ModalContext'
 
 // --- Context ---
@@ -166,6 +167,8 @@ function Root({
           unregisterParent?.()
         }
       },
+      // Inside a raised Popup, this Popover is raised too.
+      raised: parentLayer?.raised,
     }),
     [parentLayer],
   )
@@ -201,11 +204,13 @@ interface TriggerProps {
   children: ReactNode
   /** Accessible name: required when the label is an icon only. */
   'aria-label'?: string
+  /** `small` matches a small Toggle or Button beside it. Default: `default`. */
+  size?: ControlSize
   /** The trigger <button>, e.g. to measure it or return focus to it. */
   ref?: Ref<HTMLButtonElement>
 }
 
-function Trigger({children, 'aria-label': ariaLabel, ref}: TriggerProps) {
+function Trigger({children, 'aria-label': ariaLabel, size = 'default', ref}: TriggerProps) {
   const {open, setOpen, popoverId, triggerRef} = usePopover('Trigger')
   const grouped = useGroupedControl<HTMLButtonElement>()
 
@@ -220,7 +225,7 @@ function Trigger({children, 'aria-label': ariaLabel, ref}: TriggerProps) {
       aria-haspopup="dialog"
       aria-expanded={open}
       aria-controls={open ? popoverId : undefined}
-      style={[styles.trigger, grouped.style]}
+      style={[styles.trigger, size === 'small' && styles.triggerSmall, grouped.style]}
     >
       {children}
     </html.button>
@@ -233,9 +238,18 @@ interface PopupProps {
   children: ReactNode
   /** Accessible name for the dialog. */
   label: string
+  /**
+   * Draw over another floating surface: `layers.floatingRaised` outside a
+   * modal, `layers.popoverRaised` inside a Dialog or Drawer, instead of
+   * `floating` / `popover`. For one floating thing that must cover a sibling
+   * one (a link editor over a format bar), never for covering a modal: a
+   * Dialog opened later still covers it. A Popover nested inside a raised one
+   * is raised too. Default: inherited, else `false`.
+   */
+  raised?: boolean
 }
 
-function Popup({children, label}: PopupProps) {
+function Popup({children, label, raised}: PopupProps) {
   const {open, popoverId, side, align, anchor, triggerRef, popupRef, repositionRef} =
     usePopover('Popup')
   const [coords, setCoords] = useState({top: 0, left: 0})
@@ -243,6 +257,14 @@ function Popup({children, label}: PopupProps) {
   // tokens cascade into the popup and it stacks above dialogs.
   const mount = usePortalMount()
   const inModal = useInModal()
+  const layer = useContext(PopoverLayerContext)
+  const isRaised = raised ?? layer?.raised ?? false
+  // Re-provided around the children: the Root can't see this prop, and a
+  // Popover nested in here reads it to stay above this one.
+  const raisedLayer = useMemo<PopoverLayerContextValue | null>(
+    () => (layer ? {...layer, raised: isRaised} : null),
+    [layer, isRaised],
+  )
 
   // Measure before paint on open; re-measure on scroll/resize (capture phase
   // catches any scrolling ancestor) and when Root.reposition() is called.
@@ -291,10 +313,13 @@ function Popup({children, label}: PopupProps) {
       style={[
         styles.popup,
         inModal && styles.popupInModal,
+        isRaised && (inModal ? styles.popupInModalRaised : styles.popupRaised),
         styles.popupPosition(coords.top, coords.left),
       ]}
     >
-      <ControlContextBoundary>{children}</ControlContextBoundary>
+      <PopoverLayerContext.Provider value={raisedLayer}>
+        <ControlContextBoundary>{children}</ControlContextBoundary>
+      </PopoverLayerContext.Provider>
     </html.div>,
     mount ?? document.body,
   )

package/src/components/Popover/PopoverLayerContext.ts

@@ -5,6 +5,9 @@ import {type RefObject, createContext, useContext, useLayoutEffect} from 'react'
 // on them counts as inside the Popover.
 export interface PopoverLayerContextValue {
   register: (el: Element) => () => void
+  /** Set by a `raised` Popup for what it holds, so a Popover nested in it is
+   *  raised too and is not drawn under its parent. */
+  raised?: boolean
 }
 
 export const PopoverLayerContext = createContext<PopoverLayerContextValue | null>(null)

package/src/components/Popover/PopoverRaised.stories.tsx

@@ -0,0 +1,334 @@
+import {useState, type ReactNode} from 'react'
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, userEvent, waitFor, within} from 'storybook/test'
+import {html} from 'react-strict-dom'
+import {LAYERS} from '@duro-app/tokens/keys'
+import {Popover} from './Popover'
+import {Button} from '../Button/Button'
+import {Dialog} from '../Dialog/Dialog'
+import {Drawer} from '../Drawer/Drawer'
+import {Select} from '../Select/Select'
+import {Stack} from '../Stack/Stack'
+import {Text} from '../Text/Text'
+import {useInModal} from '../../shared/ModalContext'
+
+/**
+ * `Popover.Popup raised`: one floating surface over another (a link editor
+ * over a selection format bar). Outside a modal it is `floatingRaised` (60),
+ * inside a Dialog or Drawer `popoverRaised` (1041). The raised Popover renders
+ * first, so without the layer the plain one, portalled after it, would be on
+ * top.
+ */
+const meta: Meta = {
+  title: 'Components/Popover/Raised',
+}
+
+export default meta
+type Story = StoryObj
+
+const page = () => within(document.body)
+
+/** A small rect at the viewport's centre: every Popover here anchors to it. */
+const centre = () => new DOMRect(window.innerWidth / 2 - 10, window.innerHeight / 2 - 10, 20, 20)
+
+/** True when the element drawn at (x, y) is `el` or inside it. */
+const drawnAt = (el: Element, x: number, y: number) => {
+  const hit = document.elementFromPoint(x, y)
+  return hit !== null && el.contains(hit)
+}
+
+const centreOf = (el: Element) => {
+  const r = el.getBoundingClientRect()
+  return [r.left + r.width / 2, r.top + r.height / 2] as const
+}
+
+const zIndexOf = (el: Element) => getComputedStyle(el).zIndex
+
+/** The format bar: wider and taller than the link editor drawn over it. */
+function FormatBar() {
+  return (
+    <Popover.Root defaultOpen anchor={centre} align="center">
+      <Popover.Popup label="Format bar">
+        <Stack gap="md">
+          <Text>Bold · Italic · Underline · Strikethrough · Code · Link</Text>
+          <Text>Second row of formatting</Text>
+          <Text>Third row of formatting</Text>
+        </Stack>
+      </Popover.Popup>
+    </Popover.Root>
+  )
+}
+
+function LinkEditor({children}: {children?: ReactNode}) {
+  return (
+    <Popover.Root defaultOpen anchor={centre} align="center">
+      <Popover.Popup label="Link editor" raised>
+        <Stack gap="sm">
+          <Text>https://</Text>
+          {children}
+        </Stack>
+      </Popover.Popup>
+    </Popover.Root>
+  )
+}
+
+/** Raised first, then the plain one: DOM order alone would put the bar on top. */
+function Pair({children}: {children?: ReactNode}) {
+  return (
+    <>
+      <LinkEditor>{children}</LinkEditor>
+      <FormatBar />
+    </>
+  )
+}
+
+function OpenDialog({children}: {children: ReactNode}) {
+  return (
+    <Dialog.Root open>
+      <Dialog.Portal size="sm">
+        <Dialog.Header>
+          <Dialog.Title>Editor</Dialog.Title>
+        </Dialog.Header>
+        <Dialog.Body>
+          <Stack gap="md">
+            {/* Enough body for the panel to reach under the Popovers. */}
+            {['First', 'Second', 'Third', 'Fourth', 'Fifth', 'Sixth'].map((n) => (
+              <Text key={n}>{`${n} paragraph of the document being edited.`}</Text>
+            ))}
+            {children}
+          </Stack>
+        </Dialog.Body>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}
+
+async function expectRaisedOverBar(layer: number) {
+  const editor = await page().findByRole('dialog', {name: 'Link editor'})
+  const bar = await page().findByRole('dialog', {name: 'Format bar'})
+  await expect(zIndexOf(editor)).toBe(String(layer))
+  await waitFor(() => expect(drawnAt(editor, ...centreOf(editor))).toBe(true))
+  // The bar is still drawn where the editor does not cover it.
+  const b = bar.getBoundingClientRect()
+  const e = editor.getBoundingClientRect()
+  await expect(b.left).toBeLessThan(e.left)
+  await expect(drawnAt(bar, b.left + 2, b.top + b.height / 2)).toBe(true)
+  return {editor, bar}
+}
+
+/** Outside a modal: the raised editor (60) is over the bar (50). */
+export const RaisedOverFloating: Story = {
+  render: () => <Pair />,
+  play: async () => {
+    const {bar} = await expectRaisedOverBar(LAYERS.floatingRaised)
+    await expect(zIndexOf(bar)).toBe(String(LAYERS.floating))
+  },
+}
+
+/** Inside an open Dialog: the raised editor (1041) is over the bar (1040),
+ *  and both are over the Dialog panel. */
+export const RaisedInDialog: Story = {
+  render: () => (
+    <OpenDialog>
+      <Pair />
+    </OpenDialog>
+  ),
+  play: async () => {
+    const {editor, bar} = await expectRaisedOverBar(LAYERS.popoverRaised)
+    await expect(zIndexOf(bar)).toBe(String(LAYERS.popover))
+    // Both overlap the panel and are drawn there: the editor at its centre,
+    // the bar where the editor leaves it uncovered.
+    const panel = page().getByRole('dialog', {name: 'Editor'})
+    const p = panel.getBoundingClientRect()
+    const b = bar.getBoundingClientRect()
+    const e = editor.getBoundingClientRect()
+    // Under the editor, inside the bar.
+    const x = b.left + b.width / 2
+    const y = (e.bottom + b.bottom) / 2
+    await expect(x > p.left && x < p.right && y > p.top && y < p.bottom).toBe(true)
+    await expect(drawnAt(bar, x, y)).toBe(true)
+    const [ex, ey] = centreOf(editor)
+    await expect(ex > p.left && ex < p.right && ey > p.top && ey < p.bottom).toBe(true)
+    await expect(drawnAt(editor, ex, ey)).toBe(true)
+  },
+}
+
+/** The Settings dialog's centre once it is open, the viewport's before. */
+const settingsCentre = () => {
+  const dialog = page().queryByRole('dialog', {name: 'Settings'})
+  if (!dialog) return centre()
+  // Just above the centre: the editor opens below its anchor, over the centre.
+  const [x, y] = centreOf(dialog)
+  return new DOMRect(x - 10, y - 30, 20, 20)
+}
+
+function RaisedThenDialog() {
+  const [dialogOpen, setDialogOpen] = useState(false)
+  return (
+    <>
+      <Popover.Root open anchor={settingsCentre} align="center">
+        <Popover.Popup label="Link editor" raised>
+          <Text>Stays open: controlled</Text>
+        </Popover.Popup>
+      </Popover.Root>
+      <html.button type="button" onClick={() => setDialogOpen(true)}>
+        Open dialog
+      </html.button>
+      <Dialog.Root open={dialogOpen} onOpenChange={setDialogOpen}>
+        <Dialog.Portal size="sm">
+          <Dialog.Header>
+            <Dialog.Title>Settings</Dialog.Title>
+          </Dialog.Header>
+          <Dialog.Body>
+            <Text>A modal opened over a raised Popover.</Text>
+          </Dialog.Body>
+        </Dialog.Portal>
+      </Dialog.Root>
+    </>
+  )
+}
+
+/** A raised Popover held open, then a Dialog: the Popover is still mounted
+ *  and the Dialog covers it at the Dialog's centre. */
+export const DialogOverRaised: Story = {
+  render: () => <RaisedThenDialog />,
+  play: async ({canvas}) => {
+    const editor = await page().findByRole('dialog', {name: 'Link editor'})
+    await userEvent.click(canvas.getByRole('button', {name: 'Open dialog'}))
+    const dialog = await page().findByRole('dialog', {name: 'Settings'})
+    await expect(editor).toBeInTheDocument()
+    // Re-place the editor against the open Dialog, so it sits under the
+    // Dialog's centre: the check below is not vacuous.
+    window.dispatchEvent(new Event('resize'))
+    await waitFor(() => {
+      const [x, y] = centreOf(dialog)
+      const e = editor.getBoundingClientRect()
+      expect(x >= e.left && x <= e.right && y >= e.top && y <= e.bottom).toBe(true)
+    })
+    const [x, y] = centreOf(dialog)
+    await waitFor(() => expect(drawnAt(dialog, x, y)).toBe(true))
+  },
+}
+
+/** A Popover nested in a raised one inherits `raised`: it is drawn over its
+ *  parent, not at the plain layer under it. */
+function NestedInRaised() {
+  return (
+    <Popover.Root defaultOpen anchor={centre} align="center">
+      <Popover.Popup label="Link editor" raised>
+        <Stack gap="md">
+          <Popover.Root align="center">
+            <Popover.Trigger>Open child</Popover.Trigger>
+            <Popover.Popup label="Child">
+              <Text>Child</Text>
+            </Popover.Popup>
+          </Popover.Root>
+          <Text>Parent: a raised Popover, wider than the child</Text>
+          <Text>Second row</Text>
+          <Text>Third row</Text>
+          <Text>Fourth row</Text>
+        </Stack>
+      </Popover.Popup>
+    </Popover.Root>
+  )
+}
+
+async function expectChildOnTop(layer: number) {
+  await userEvent.click(await page().findByRole('button', {name: 'Open child'}))
+  const child = await page().findByRole('dialog', {name: 'Child'})
+  // Non-vacuous: the child overlaps its parent.
+  const parent = page().getByRole('dialog', {name: 'Link editor'}).getBoundingClientRect()
+  const [cx, cy] = centreOf(child)
+  await expect(cx > parent.left && cx < parent.right && cy > parent.top && cy < parent.bottom).toBe(
+    true,
+  )
+  await expect(zIndexOf(child)).toBe(String(layer))
+  await waitFor(() => expect(drawnAt(child, ...centreOf(child))).toBe(true))
+}
+
+export const NestedInRaised_NoModal: Story = {
+  name: 'Nested in raised, no modal',
+  render: () => <NestedInRaised />,
+  play: async () => expectChildOnTop(LAYERS.floatingRaised),
+}
+
+export const NestedInRaised_InDialog: Story = {
+  name: 'Nested in raised, in a Dialog',
+  render: () => (
+    <OpenDialog>
+      <NestedInRaised />
+    </OpenDialog>
+  ),
+  play: async () => expectChildOnTop(LAYERS.popoverRaised),
+}
+
+/** A Select opened from a raised Popover in a Dialog: its listbox (popup,
+ *  1050) is on top. */
+export const SelectInRaisedInDialog: Story = {
+  render: () => (
+    <OpenDialog>
+      <Pair>
+        <Select.Root defaultValue="https">
+          <Select.Trigger aria-label="Scheme">
+            <Select.Value />
+            <Select.Icon />
+          </Select.Trigger>
+          <Select.Popup>
+            <Select.Item value="https">https</Select.Item>
+            <Select.Item value="mailto">mailto</Select.Item>
+            <Select.Item value="tel">tel</Select.Item>
+          </Select.Popup>
+        </Select.Root>
+      </Pair>
+    </OpenDialog>
+  ),
+  play: async () => {
+    await userEvent.click(await page().findByRole('combobox', {name: 'Scheme'}))
+    const listbox = await page().findByRole('listbox')
+    await expect(zIndexOf(listbox)).toBe(String(LAYERS.popup))
+    for (const name of ['https', 'mailto', 'tel']) {
+      const option = await page().findByRole('option', {name})
+      await waitFor(() => expect(drawnAt(option, ...centreOf(option))).toBe(true))
+    }
+  },
+}
+
+function InModalProbe({label}: {label: string}) {
+  return <Text>{`${label}: ${String(useInModal())}`}</Text>
+}
+
+/** `useInModal()`: true in a Dialog and a Drawer, false outside. Its export
+ *  from the package root is checked by shared/exports.typecheck.ts. */
+export const UseInModal: Story = {
+  render: () => (
+    <>
+      <InModalProbe label="page" />
+      <Button>Unrelated</Button>
+      <Dialog.Root open>
+        <Dialog.Portal size="sm">
+          <Dialog.Header>
+            <Dialog.Title>In a dialog</Dialog.Title>
+          </Dialog.Header>
+          <Dialog.Body>
+            <InModalProbe label="dialog" />
+          </Dialog.Body>
+        </Dialog.Portal>
+      </Dialog.Root>
+      <Drawer.Root open>
+        <Drawer.Portal>
+          <Drawer.Header>
+            <Drawer.Title>In a drawer</Drawer.Title>
+          </Drawer.Header>
+          <Drawer.Body>
+            <InModalProbe label="drawer" />
+          </Drawer.Body>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </>
+  ),
+  play: async () => {
+    await expect(await page().findByText('page: false')).toBeInTheDocument()
+    await expect(await page().findByText('dialog: true')).toBeInTheDocument()
+    await expect(await page().findByText('drawer: true')).toBeInTheDocument()
+  },
+}

package/src/components/Popover/styles.css.ts

@@ -4,6 +4,7 @@ import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
 import {duration} from '@duro-app/tokens/tokens/motion.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 import {borders} from '@duro-app/tokens/tokens/borders.css'
 import {layers} from '@duro-app/tokens/tokens/layers.css'
 
@@ -31,11 +32,31 @@ export const styles = css.create({
     transitionProperty: 'background-color, border-color',
     transitionDuration: duration.fast,
   },
+  // size="small": Toggle sizeSmall's values, as longhands so they win over the
+  // trigger's own longhands. Every small control is at least controlSm tall,
+  // whatever it holds, and the touch target under a coarse pointer.
+  triggerSmall: {
+    gap: spacing.xs,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
+    fontSize: typography.fontSizeXs,
+    minHeight: {default: sizes.controlSm, '@media (pointer: coarse)': sizes.touchTarget},
+  },
   // Inside a Dialog or Drawer: above that modal (same portal mount), below a
   // Select or Menu opened from inside the Popover.
   popupInModal: {
     zIndex: layers.popover,
   },
+  // `raised`: over another floating surface, outside a modal (still under a
+  // Dialog or Drawer opened later) and inside one (still under its popups).
+  popupRaised: {
+    zIndex: layers.floatingRaised,
+  },
+  popupInModalRaised: {
+    zIndex: layers.popoverRaised,
+  },
   popup: {
     position: 'fixed',
     top: 0,