remix 3.0.0-beta.4 → 3.0.0-beta.5

package/src/session/README.md

@@ -126,7 +126,7 @@ This will clear all session data from storage the next time it is saved. It also
 
 Several strategies are provided out of the box for storing session data across requests, depending on your needs.
 
-A session storage object must always be initialized with a _signed_ session cookie. This is used to identify the session and to store the session data in the response.
+Session storage objects read and save cookie values. Use the `session` middleware with a signed `Cookie` to parse the incoming `Cookie` header, expose the session on request context, and serialize any saved value back into a `Set-Cookie` response header.
 
 #### Filesystem Storage
 

package/src/ui/README.md

@@ -1,15 +1,14 @@
 # ui
 
-Runtime UI primitives for Remix apps, including the component runtime, server rendering, frame hydration, reusable mixins, first-party components, and theme tokens.
+Runtime UI primitives for Remix apps, including the component runtime, server rendering, frame hydration, reusable mixins, and headless first-party behavior primitives.
 
 ## Features
 
 - Component runtime APIs for rendering, hydration, frame navigation, and JSX
 - Server rendering APIs for streaming Remix UI trees and frames
 - `mix` composition with event, ref, CSS, and animation helpers
-- First-party components such as buttons, menus, listboxes, popovers, and selects
-- Fixed typed `theme` contract whose leaves resolve to `var(--rmx-...)`
-- `createTheme()` and `createGlyphSheet()` utilities for shared app styling and glyphs
+- Headless behavior primitives for controls such as menus, listboxes, popovers, selects, and comboboxes
+- Lower-level utilities for keyboard events, typeahead search, refs, attributes, and CSS transition timing
 
 ## Installation
 
@@ -19,188 +18,75 @@ npm i remix
 
 ## Usage
 
-Define your app theme once:
+Compose behavior primitives with your own markup and styles:
 
 ```tsx
-import { createTheme } from 'remix/ui'
-
-let Theme = createTheme({
-  space: {
-    none: '0px',
-    px: '1px',
-    xs: '2px',
-    sm: '4px',
-    md: '8px',
-    lg: '12px',
-    xl: '16px',
-    xxl: '24px',
-  },
-  radius: {
-    none: '0px',
-    sm: '4px',
-    md: '8px',
-    lg: '12px',
-    xl: '16px',
-    full: '9999px',
-  },
-  fontSize: {
-    xxxs: '10px',
-    xxs: '11px',
-    xs: '12px',
-    sm: '14px',
-    md: '16px',
-    lg: '18px',
-    xl: '20px',
-    xxl: '28px',
-  },
-  lineHeight: {
-    tight: '1.2',
-    normal: '1.5',
-    relaxed: '1.7',
-  },
-  fontWeight: {
-    normal: '400',
-    medium: '500',
-    semibold: '600',
-    bold: '700',
-  },
-  shadow: {
-    xs: '0 1px 2px rgb(0 0 0 / 0.05)',
-    sm: '0 1px 3px rgb(0 0 0 / 0.10)',
-    md: '0 4px 10px rgb(0 0 0 / 0.12)',
-    lg: '0 10px 30px rgb(0 0 0 / 0.16)',
-    xl: '0 20px 50px rgb(0 0 0 / 0.20)',
-  },
-  zIndex: {
-    dropdown: '1000',
-    popover: '1100',
-    sticky: '1200',
-    overlay: '1300',
-    modal: '1400',
-    toast: '1500',
-    tooltip: '1600',
-  },
-  surface: {
-    lvl0: '#ffffff',
-    lvl1: '#f8fafc',
-    lvl2: '#f1f5f9',
-    lvl3: '#e5edf7',
-    lvl4: '#dbe6f4',
-  },
-  colors: {
-    text: {
-      primary: '#111827',
-      secondary: '#374151',
-      muted: '#6b7280',
-      link: '#2563eb',
-    },
-    border: {
-      subtle: '#e5e7eb',
-      default: '#d1d5db',
-      strong: '#9ca3af',
-    },
-    focus: {
-      ring: '#3b82f6',
-    },
-    overlay: {
-      scrim: 'rgb(0 0 0 / 0.45)',
-    },
-    action: {
-      primary: {
-        background: '#2563eb',
-        backgroundHover: '#1d4ed8',
-        backgroundActive: '#1e40af',
-        foreground: '#ffffff',
-        border: '#2563eb',
-      },
-      secondary: {
-        background: '#ffffff',
-        backgroundHover: '#f8fafc',
-        backgroundActive: '#f1f5f9',
-        foreground: '#111827',
-        border: '#d1d5db',
-      },
-      danger: {
-        background: '#dc2626',
-        backgroundHover: '#b91c1c',
-        backgroundActive: '#991b1b',
-        foreground: '#ffffff',
-        border: '#dc2626',
-      },
-    },
-  },
+import { css } from 'remix/ui'
+import * as popover from 'remix/ui/popover'
+
+let triggerCss = css({
+  border: '1px solid #d1d5db',
+  borderRadius: '6px',
+  padding: '6px 10px',
 })
-```
 
-Render the theme once near the top of your document:
+let surfaceCss = css({
+  background: 'white',
+  border: '1px solid #d1d5db',
+  borderRadius: '6px',
+  padding: '8px',
+})
 
-```tsx
-import type { Handle, RemixNode } from 'remix/ui'
+function ViewOptions() {
+  let open = false
 
-function Layout(handle: Handle<{ children: RemixNode }>) {
   return () => (
-    <html>
-      <head>
-        <Theme />
-      </head>
-      <body>{handle.props.children}</body>
-    </html>
+    <popover.Context>
+      <button
+        mix={[triggerCss, popover.anchor({ placement: 'bottom-end' }), popover.focusOnHide()]}
+        onClick={() => {
+          open = true
+        }}
+        type="button"
+      >
+        View options
+      </button>
+      <div
+        mix={[
+          surfaceCss,
+          popover.surface({
+            open,
+            onHide() {
+              open = false
+            },
+          }),
+        ]}
+      >
+        Panel content
+      </div>
+    </popover.Context>
   )
 }
 ```
 
-Consume the shared token contract from app code and first-party components:
-
-```tsx
-import { css } from 'remix/ui'
-import { theme } from 'remix/ui'
-
-let card = css({
-  backgroundColor: theme.surface.lvl0,
-  color: theme.colors.text.primary,
-  border: `1px solid ${theme.colors.border.subtle}`,
-  borderRadius: theme.radius.md,
-  paddingInline: theme.space.md,
-  paddingBlock: theme.space.sm,
-})
-
-<div mix={card} />
-```
-
-Render shared glyphs separately from the theme styles:
+Button styling is available as a composable mixin:
 
 ```tsx
-import type { Handle, RemixNode } from 'remix/ui'
-import { Button } from 'remix/ui/button'
-import { Glyph } from 'remix/ui/glyph'
-import { RMX_01, RMX_01_GLYPHS } from 'remix/ui/theme'
+import button from 'remix/ui/button'
 
-function Layout(handle: Handle<{ children: RemixNode }>) {
-  return () => (
-    <html>
-      <head>
-        <RMX_01 />
-      </head>
-      <body>
-        <RMX_01_GLYPHS />
-        <Button startIcon={<Glyph name="add" />} tone="primary">
-          New project
-        </Button>
-        {handle.props.children}
-      </body>
-    </html>
-  )
+function Actions() {
+  return () => <button mix={button({ tone: 'primary' })}>Create project</button>
 }
 ```
 
 ## Cascade Layers
 
-Remix UI emits its built-in theme reset in `rmx-reset` and generated `css(...)` rules under `rmx`. Unlayered CSS outranks layered component CSS, so use explicit layer order when mixing Remix UI with global styles.
+Remix UI emits generated `css(...)` rules under the `rmx` cascade layer. Unlayered CSS outranks layered CSS, so use explicit layer order when mixing Remix UI with global styles.
 
-Put layers that should lose to Remix UI before `rmx-reset` and `rmx`:
+Put layers that should lose to Remix UI before `rmx`:
 
 ```css
-@layer base, rmx-reset, rmx;
+@layer base, rmx;
 
 @layer base {
   button,

package/src/ui/accordion/README.md

@@ -2,7 +2,7 @@
 
 `Accordion` renders a disclosure set with one or more expandable items. Use it for grouped settings, FAQ sections, and dense panels where each item owns a trigger and content region.
 
-## Usage
+## Component Usage
 
 ```tsx
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'remix/ui/accordion'
@@ -82,16 +82,11 @@ export function ControlledAccordion(handle: Handle) {
 }
 ```
 
-Listen for bubbling `AccordionChangeEvent` events with `onAccordionChange`.
+Listen for bubbling `AccordionChangeEvent` events with `onAccordionChange` from `remix/ui/accordion/primitives`.
 
 ```tsx
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  onAccordionChange,
-} from 'remix/ui/accordion'
+import { onAccordionChange } from 'remix/ui/accordion/primitives'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'remix/ui/accordion'
 
 export function TrackedAccordion() {
   return (
@@ -124,7 +119,7 @@ Set `collapsible={false}` in single mode when the open item must stay open. The
 </Accordion>
 ```
 
-Use `headingLevel` to choose the heading wrapper rendered around each trigger. The default level is `3`.
+Use `headingLevel` to choose the heading element rendered around each trigger. The default level is `3`.
 
 ```tsx
 <Accordion defaultValue="shipping" headingLevel={2}>
@@ -142,16 +137,57 @@ Pass `indicator={null}` to remove the default chevron, or pass a custom node to
 <AccordionTrigger indicator={<span aria-hidden>+</span>}>Custom indicator</AccordionTrigger>
 ```
 
-## `accordion.*`
+## Primitive Usage
+
+Use the lower-level primitives when app code owns the accordion markup and styles:
+
+```tsx
+import * as accordion from 'remix/ui/accordion/primitives'
+import { contentStyle, headingStyle, itemStyle, rootStyle, triggerStyle } from './accordion.styles'
+
+export function PrimitiveAccordion() {
+  return (
+    <accordion.Context defaultValue="shipping">
+      <div mix={[rootStyle, accordion.root()]}>
+        <accordion.ItemContext value="shipping">
+          <div mix={[itemStyle, accordion.item()]}>
+            <h3 mix={headingStyle}>
+              <button mix={[triggerStyle, accordion.trigger()]} type="button">
+                Shipping
+              </button>
+            </h3>
+            <div mix={[contentStyle, accordion.content()]}>
+              Delivery windows and carrier defaults.
+            </div>
+          </div>
+        </accordion.ItemContext>
+      </div>
+    </accordion.Context>
+  )
+}
+```
+
+## `remix/ui/accordion`
 
 - `Accordion`: root component. Defaults to single-item mode and supports controlled `value`, uncontrolled `defaultValue`, `onValueChange`, `disabled`, `headingLevel`, `collapsible`, and `type="multiple"`.
 - `AccordionItem`: registers one accordion item by `value`. Pass `disabled` to prevent that item from opening or receiving keyboard focus.
 - `AccordionTrigger`: heading-wrapped button for an item. It wires `aria-expanded`, `aria-controls`, keyboard navigation, and the default chevron indicator.
 - `AccordionContent`: panel for an item. It wires the panel id, `aria-labelledby`, `aria-hidden`, inert state, and open/closed state attributes.
+- `rootStyle`, `itemStyle`, `headingStyle`, `triggerStyle`, `indicatorStyle`, `panelStyle`, and `bodyStyle`: flat style mixins used by the component markup.
+- `AccordionProps`, `AccordionSingleProps`, `AccordionMultipleProps`, `AccordionItemProps`, `AccordionTriggerProps`, and `AccordionContentProps`: public TypeScript props for the composed APIs.
+
+## `remix/ui/accordion/primitives`
+
+- `Context`: lower-level provider for custom accordion composition.
+- `ItemContext`: lower-level provider for one item value.
+- `root()`: wires the root element and bubbling change events.
+- `item()`: wires one item wrapper.
+- `trigger()`: wires the item trigger, keyboard navigation, and trigger ARIA attributes.
+- `content()`: wires the item panel id, hidden state, inert state, and open/closed state attributes.
 - `onAccordionChange(...)`: event mixin for the bubbling `AccordionChangeEvent`.
-- `AccordionChangeEvent`: bubbling event class with `value`, `itemValue`, and `accordionType`.
-- `AccordionProps`, `AccordionSingleProps`, `AccordionMultipleProps`, `AccordionItemProps`, `AccordionTriggerProps`, and `AccordionContentProps`: public TypeScript props.
-- `rootStyle`, `itemStyle`, `triggerStyle`, `indicatorStyle`, `panelStyle`, and `bodyStyle`: flat style mixins used by the component wrappers.
+- `AccordionChangeEvent`: bubbling event with `value`, `itemValue`, and `accordionType`.
+- `AccordionType`, `AccordionValue`, `AccordionSingleValue`, `AccordionMultipleValue`, and `AccordionHeadingLevel`: public TypeScript state and configuration types.
+- `AccordionBaseContextProps`, `AccordionSingleContextProps`, `AccordionMultipleContextProps`, `AccordionContextProps`, `AccordionRootOptions`, `AccordionItemOptions`, `AccordionTriggerOptions`, and `AccordionContentOptions`: primitive prop and option types for custom composition.
 
 ## Behavior Notes
 

package/src/ui/accordion/primitives/README.md

@@ -0,0 +1,202 @@
+# accordion
+
+`Accordion` renders a disclosure set with one or more expandable items. Use it for grouped settings, FAQ sections, and dense panels where each item owns a trigger and content region.
+
+## Component Usage
+
+```tsx
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'remix/ui/accordion'
+
+export function SettingsAccordion() {
+  return (
+    <Accordion defaultValue="account">
+      <AccordionItem value="account">
+        <AccordionTrigger>Account</AccordionTrigger>
+        <AccordionContent>Manage account preferences.</AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="billing">
+        <AccordionTrigger>Billing</AccordionTrigger>
+        <AccordionContent>Review billing details.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+```
+
+Use `type="multiple"` when more than one panel may stay open. `defaultValue` and `value` are arrays in multiple mode.
+
+```tsx
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'remix/ui/accordion'
+
+export function StatusAccordion() {
+  return (
+    <Accordion defaultValue={['api', 'alerts']} type="multiple">
+      <AccordionItem value="api">
+        <AccordionTrigger>API status checks</AccordionTrigger>
+        <AccordionContent>Review uptime checks and response time alerts.</AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem disabled value="access">
+        <AccordionTrigger>Access control sync</AccordionTrigger>
+        <AccordionContent>This disabled item cannot be opened or focused.</AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="alerts">
+        <AccordionTrigger>Alert routing</AccordionTrigger>
+        <AccordionContent>Confirm escalation rules and notification channels.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+```
+
+Control the open value when state should live in the owning component. Single mode uses `string | null`; multiple mode uses `string[]`.
+
+```tsx
+import type { Handle } from 'remix/ui'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'remix/ui/accordion'
+
+export function ControlledAccordion(handle: Handle) {
+  let value: string | null = 'account'
+
+  return () => (
+    <Accordion
+      value={value}
+      onValueChange={(nextValue) => {
+        value = nextValue
+        void handle.update()
+      }}
+    >
+      <AccordionItem value="account">
+        <AccordionTrigger>Account</AccordionTrigger>
+        <AccordionContent>Manage account preferences.</AccordionContent>
+      </AccordionItem>
+
+      <AccordionItem value="billing">
+        <AccordionTrigger>Billing</AccordionTrigger>
+        <AccordionContent>Review billing details.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+```
+
+Listen for bubbling `AccordionChangeEvent` events with `onAccordionChange` from `remix/ui/accordion/primitives`.
+
+```tsx
+import { onAccordionChange } from 'remix/ui/accordion/primitives'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'remix/ui/accordion'
+
+export function TrackedAccordion() {
+  return (
+    <div
+      mix={[
+        onAccordionChange((event) => {
+          console.log(event.accordionType, event.itemValue, event.value)
+        }),
+      ]}
+    >
+      <Accordion>
+        <AccordionItem value="account">
+          <AccordionTrigger>Account</AccordionTrigger>
+          <AccordionContent>Manage account preferences.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  )
+}
+```
+
+Set `collapsible={false}` in single mode when the open item must stay open. The locked-open trigger receives `aria-disabled`.
+
+```tsx
+<Accordion collapsible={false} defaultValue="account">
+  <AccordionItem value="account">
+    <AccordionTrigger>Account</AccordionTrigger>
+    <AccordionContent>Manage account preferences.</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+Use `headingLevel` to choose the heading element rendered around each trigger. The default level is `3`.
+
+```tsx
+<Accordion defaultValue="shipping" headingLevel={2}>
+  <AccordionItem value="shipping">
+    <AccordionTrigger>Shipping</AccordionTrigger>
+    <AccordionContent>Review shipping preferences.</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+Pass `indicator={null}` to remove the default chevron, or pass a custom node to replace it.
+
+```tsx
+<AccordionTrigger indicator={null}>No indicator</AccordionTrigger>
+<AccordionTrigger indicator={<span aria-hidden>+</span>}>Custom indicator</AccordionTrigger>
+```
+
+## Primitive Usage
+
+Use the lower-level primitives when app code owns the accordion markup and styles:
+
+```tsx
+import * as accordion from 'remix/ui/accordion/primitives'
+import { contentStyle, headingStyle, itemStyle, rootStyle, triggerStyle } from './accordion.styles'
+
+export function PrimitiveAccordion() {
+  return (
+    <accordion.Context defaultValue="shipping">
+      <div mix={[rootStyle, accordion.root()]}>
+        <accordion.ItemContext value="shipping">
+          <div mix={[itemStyle, accordion.item()]}>
+            <h3 mix={headingStyle}>
+              <button mix={[triggerStyle, accordion.trigger()]} type="button">
+                Shipping
+              </button>
+            </h3>
+            <div mix={[contentStyle, accordion.content()]}>
+              Delivery windows and carrier defaults.
+            </div>
+          </div>
+        </accordion.ItemContext>
+      </div>
+    </accordion.Context>
+  )
+}
+```
+
+## `remix/ui/accordion`
+
+- `Accordion`: root component. Defaults to single-item mode and supports controlled `value`, uncontrolled `defaultValue`, `onValueChange`, `disabled`, `headingLevel`, `collapsible`, and `type="multiple"`.
+- `AccordionItem`: registers one accordion item by `value`. Pass `disabled` to prevent that item from opening or receiving keyboard focus.
+- `AccordionTrigger`: heading-wrapped button for an item. It wires `aria-expanded`, `aria-controls`, keyboard navigation, and the default chevron indicator.
+- `AccordionContent`: panel for an item. It wires the panel id, `aria-labelledby`, `aria-hidden`, inert state, and open/closed state attributes.
+- `rootStyle`, `itemStyle`, `headingStyle`, `triggerStyle`, `indicatorStyle`, `panelStyle`, and `bodyStyle`: flat style mixins used by the component markup.
+- `AccordionProps`, `AccordionSingleProps`, `AccordionMultipleProps`, `AccordionItemProps`, `AccordionTriggerProps`, and `AccordionContentProps`: public TypeScript props for the composed APIs.
+
+## `remix/ui/accordion/primitives`
+
+- `Context`: lower-level provider for custom accordion composition.
+- `ItemContext`: lower-level provider for one item value.
+- `root()`: wires the root element and bubbling change events.
+- `item()`: wires one item wrapper.
+- `trigger()`: wires the item trigger, keyboard navigation, and trigger ARIA attributes.
+- `content()`: wires the item panel id, hidden state, inert state, and open/closed state attributes.
+- `onAccordionChange(...)`: event mixin for the bubbling `AccordionChangeEvent`.
+- `AccordionChangeEvent`: bubbling event with `value`, `itemValue`, and `accordionType`.
+- `AccordionType`, `AccordionValue`, `AccordionSingleValue`, `AccordionMultipleValue`, and `AccordionHeadingLevel`: public TypeScript state and configuration types.
+- `AccordionBaseContextProps`, `AccordionSingleContextProps`, `AccordionMultipleContextProps`, `AccordionContextProps`, `AccordionRootOptions`, `AccordionItemOptions`, `AccordionTriggerOptions`, and `AccordionContentOptions`: primitive prop and option types for custom composition.
+
+## Behavior Notes
+
+- Single mode stores one open value or `null`; multiple mode stores an array of open values.
+- Single accordions are collapsible by default. Set `collapsible={false}` to keep the open item locked open.
+- Root `disabled` disables every item. Item `disabled` only disables that item.
+- Arrow keys move between enabled triggers. `Home` and `End` move to the first and last enabled triggers.
+- Disabled items are skipped by keyboard navigation.
+- Trigger and panel ids are generated and linked with `aria-controls`, `aria-labelledby`, and `aria-expanded`; closed panels receive `aria-hidden` and `inert`.
+- `AccordionTrigger` renders inside an `h1`-`h6` element based on `headingLevel`.
+- Each item and trigger receives `data-state="open"` or `data-state="closed"` for styling.
+- `AccordionChangeEvent` bubbles from the root and includes `value`, `itemValue`, and `accordionType`.

package/src/ui/accordion/primitives.ts

@@ -0,0 +1,2 @@
+// IMPORTANT: This file is auto-generated, please do not edit manually.
+export * from '@remix-run/ui/accordion/primitives'

package/src/ui/anchor/README.md

@@ -2,7 +2,7 @@
 
 `anchor` positions a floating element against an anchor element or viewport coordinates and keeps it constrained to the viewport. Use it for custom floating surfaces that need placement, flipping, offsets, and optional relative alignment.
 
-## Usage
+## Primitive Usage
 
 ```tsx
 import { anchor } from 'remix/ui/anchor'
@@ -55,7 +55,42 @@ Anchor to coordinates when the surface should open at a pointer location.
 let cleanup = anchor(popover, { x: event.clientX, y: event.clientY }, { placement: 'bottom-start' })
 ```
 
-## `anchor.*`
+Keep presentation app-owned when the anchored element is rendered by your component:
+
+```tsx
+import { anchor } from 'remix/ui/anchor'
+import { on, ref, type Handle } from 'remix/ui'
+import { panelStyle } from './floating.styles'
+
+export function AnchoredPanel(handle: Handle) {
+  let cleanup = () => {}
+  let trigger: HTMLElement | null = null
+  let panel: HTMLElement | null = null
+
+  function position() {
+    cleanup()
+    if (trigger && panel) {
+      cleanup = anchor(panel, trigger, { placement: 'bottom-start', offset: 8 })
+    }
+  }
+
+  return () => (
+    <>
+      <button
+        mix={[ref((node) => (trigger = node as HTMLElement)), on('click', position)]}
+        type="button"
+      >
+        Open
+      </button>
+      <div data-panel mix={[panelStyle, ref((node) => (panel = node as HTMLElement))]}>
+        Panel
+      </div>
+    </>
+  )
+}
+```
+
+## `remix/ui/anchor`
 
 - `anchor(floatingElement, anchorTarget, options)`: positions `floatingElement` against an element or coordinate target, starts animation-frame polling for geometry changes, and returns a cleanup function.
 - `AnchorOptions`: placement, inset, relative alignment, and offset options.

package/src/ui/breadcrumbs/README.md

@@ -2,7 +2,7 @@
 
 `Breadcrumbs` renders semantic breadcrumb navigation from a list of items. Use it when the page needs a compact path back through parent sections.
 
-## Usage
+## Component Usage
 
 ```tsx
 import { Breadcrumbs } from 'remix/ui/breadcrumbs'
@@ -32,13 +32,13 @@ Mark an earlier item as current when the page belongs to a parent section but th
 />
 ```
 
-Pass `separator` to replace the default chevron glyph.
+Pass `separator` to replace the default chevron icon.
 
 ```tsx
 <Breadcrumbs items={[{ href: '/', label: 'Home' }, { label: 'Breadcrumbs' }]} separator="/" />
 ```
 
-## `breadcrumbs.*`
+## `remix/ui/breadcrumbs`
 
 - `Breadcrumbs`: component that renders a `<nav>` with an ordered list of breadcrumb items.
 - `BreadcrumbItem`: item shape with `label`, optional `href`, and optional `current`.
@@ -52,4 +52,4 @@ Pass `separator` to replace the default chevron glyph.
 - An explicit current item wins over the last-item default.
 - Current items render as text with `aria-current="page"`, even when they include `href`.
 - Non-current items with `href` render as links; non-current items without `href` render as text.
-- The default separator is the `chevronRight` glyph. Separators render between items and are hidden from assistive technology.
+- The default separator is a chevron icon. Separators render between items and are hidden from assistive technology.