@tempoxyz/ds 0.3.11 → 0.3.13

package/dist/docs/{components → product/components}/token-logo.md

@@ -154,12 +154,12 @@ import { TokenLogo } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Token](/docs/components/token) to show which token an amount is in, and to let a person change it.
-* Use [Identicon](/docs/components/identicon) for an account address.
-* Use [Avatar](/docs/components/avatar) for people and organizations.
-* Use [IconTile](/docs/components/icon-tile) for a feature or category icon.
-* Use [NetworkLogo](/docs/components/network-logo) for the chain a token lives on.
-* Use [AssetChip](/docs/components/asset-chip) to list the assets a row supports.
+* Use [Token](token.md) to show which token an amount is in, and to let a person change it.
+* Use [Identicon](identicon.md) for an account address.
+* Use [Avatar](avatar.md) for people and organizations.
+* Use [IconTile](icon-tile.md) for a feature or category icon.
+* Use [NetworkLogo](network-logo.md) for the chain a token lives on.
+* Use [AssetChip](asset-chip.md) to list the assets a row supports.
 
 ### Pair the Icon With the Symbol
 
@@ -252,7 +252,7 @@ Pass `resolveSrc` or `resolveAddress` to `TokenLogo.Provider` to load icons or a
 
 A gray circle renders while an icon loads or after it fails.
 
-**Do:** Show the address in a [Hex](/docs/components/hex) beside the symbol of a token that isn't on the
+**Do:** Show the address in a [Hex](hex.md) beside the symbol of a token that isn't on the
 list.
 
 ```tsx
@@ -319,7 +319,7 @@ namespace styles {
 ### Match Size to the Context
 
 * **Small (16px):** Inline beside an amount.
-* **Medium (20px):** The default, and the logo in a [Token](/docs/components/token).
+* **Medium (20px):** The default, and the logo in a [Token](token.md).
 * **Large (32px):** In asset rows and token pickers.
 
 ## Accessibility
@@ -338,34 +338,34 @@ A token logo renders a native `<img>`, decorative by default. It is not interact
 
 ## Related
 
-[Amount](/docs/components/amount)
+[Amount](amount.md)
 
 Use for token amounts.
 
-[Token](/docs/components/token)
+[Token](token.md)
 
 Use for a token pill that labels or picks a token.
 
-[AssetChip](/docs/components/asset-chip)
+[AssetChip](asset-chip.md)
 
 Use for listing the assets a row supports.
 
-[NetworkLogo](/docs/components/network-logo)
+[NetworkLogo](network-logo.md)
 
 Use for the chain a token lives on.
 
-[Identicon](/docs/components/identicon)
+[Identicon](identicon.md)
 
 Use for account addresses.
 
-[Avatar](/docs/components/avatar)
+[Avatar](avatar.md)
 
 Use for people and organizations.
 
-[Select](/docs/components/select)
+[Select](select.md)
 
 Use for token selectors.
 
-[Blockchain Values](/docs/patterns/blockchain-values)
+[Blockchain Values](../patterns/blockchain-values.md)
 
 Covers tokens and addresses.

package/dist/docs/{components → product/components}/token.md

@@ -8,7 +8,7 @@ Figma: [Elements/Token](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node
 
 ## Overview
 
-A token renders a pill with a [TokenLogo](/docs/components/token-logo) and the token's symbol. By default it is a button with a chevron that opens a token picker. Set `readOnly` for a static pill.
+A token renders a pill with a [TokenLogo](token-logo.md) and the token's symbol. By default it is a button with a chevron that opens a token picker. Set `readOnly` for a static pill.
 
 ## Examples
 
@@ -48,7 +48,7 @@ export function Demo() {
 
 ### Picker
 
-Pass the token to a trigger's `render`, such as a [Dialog](/docs/components/dialog) trigger, to open a token picker.
+Pass the token to a trigger's `render`, such as a [Dialog](dialog.md) trigger, to open a token picker.
 
 ```tsx
 import { Dialog, style, Token, TokenLogo } from '@tempoxyz/ds'
@@ -127,14 +127,14 @@ import { Token } from '@tempoxyz/ds'
 
 ### When to Use
 
-* Name the token after the digits in an [AmountInput](/docs/components/amount-input), and let a person change it.
+* Name the token after the digits in an [AmountInput](amount-input.md), and let a person change it.
 * Name a fixed token in a review or a receipt with `readOnly`.
 
 ### When Not to Use
 
-* Use [TokenLogo](/docs/components/token-logo) for a logo beside a symbol in a list row.
-* Use [AssetChip](/docs/components/asset-chip) to list the assets a row supports.
-* Use [Select](/docs/components/select) to choose a token in a form field with a label.
+* Use [TokenLogo](token-logo.md) for a logo beside a symbol in a list row.
+* Use [AssetChip](asset-chip.md) to list the assets a row supports.
+* Use [Select](select.md) to choose a token in a form field with a label.
 
 ### Show the Chevron Only on a Picker
 
@@ -230,18 +230,18 @@ A token renders a native `<button>` built on Base UI Button, or a `<span>` when
 
 ## Related
 
-[TokenLogo](/docs/components/token-logo)
+[TokenLogo](token-logo.md)
 
 Use for token logos.
 
-[AmountInput](/docs/components/amount-input)
+[AmountInput](amount-input.md)
 
 Use for entering an amount beside a token.
 
-[AssetChip](/docs/components/asset-chip)
+[AssetChip](asset-chip.md)
 
 Use for listing the assets a row supports.
 
-[Dialog](/docs/components/dialog)
+[Dialog](dialog.md)
 
 Use for a token picker.

package/dist/docs/{components → product/components}/tooltip.md

@@ -107,11 +107,11 @@ import { Tooltip } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use a [Popover](/docs/components/popover) with `openOnHover` on `Popover.Trigger` for info icons, such as the explanation beside a dashboard metric.
-* Use visible text, such as a `Field.Description` from [Field](/docs/components/field), for fees, limits, requirements, and errors.
-* Use an [Alert](/docs/components/alert) for warnings.
-* Write the reason for a disabled [Button](/docs/components/button) in nearby text, not in a tooltip.
-* Don't add a tooltip to a [Button](/docs/components/button) with a visible label. It repeats the label and covers nearby content.
+* Use a [Popover](popover.md) with `openOnHover` on `Popover.Trigger` for info icons, such as the explanation beside a dashboard metric.
+* Use visible text, such as a `Field.Description` from [Field](field.md), for fees, limits, requirements, and errors.
+* Use an [Alert](alert.md) for warnings.
+* Write the reason for a disabled [Button](button.md) in nearby text, not in a tooltip.
+* Don't add a tooltip to a [Button](button.md) with a visible label. It repeats the label and covers nearby content.
 
 ### Use Tooltips as Labels Only
 
@@ -160,7 +160,7 @@ namespace styles {
 ```
 
 **Don't:** Put links, buttons, or other controls in a tooltip. Use a
-[Popover](/docs/components/popover).
+[Popover](popover.md).
 
 ```tsx
 /**
@@ -469,22 +469,22 @@ A tooltip is visual only, so the trigger needs its own accessible name.
 
 ## Related
 
-[Popover](/docs/components/popover)
+[Popover](popover.md)
 
 Use for info icons and interactive content.
 
-[Button](/docs/components/button)
+[Button](button.md)
 
 Use for icon-only buttons.
 
-[CopyButton](/docs/components/copy-button)
+[CopyButton](copy-button.md)
 
 Use for a copy action that names itself.
 
-[Field](/docs/components/field)
+[Field](field.md)
 
 Use for descriptions that stay visible.
 
-[Dashboards](/docs/patterns/dashboards)
+[Dashboards](../patterns/dashboards.md)
 
 Covers metric explanations.

package/dist/docs/{components → product/components}/verification-code.md

@@ -51,8 +51,8 @@ import { VerificationCode } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [OtpField](/docs/components/otp-field) when the person types a code.
-* Use [Snippet](/docs/components/snippet) for a command or a value to copy.
+* Use [OtpField](otp-field.md) when the person types a code.
+* Use [Snippet](snippet.md) for a command or a value to copy.
 
 ### Match the Other Device
 
@@ -107,10 +107,10 @@ A verification code renders a `<div>` with the label in a `<p>` and the code in
 
 ## Related
 
-[OtpField](/docs/components/otp-field)
+[OtpField](otp-field.md)
 
 Use for a code that a person types.
 
-[Snippet](/docs/components/snippet)
+[Snippet](snippet.md)
 
 Use for a command or a value to copy.

package/dist/docs/{components → product/components}/visual.md

@@ -78,8 +78,8 @@ import { Visual } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [IconTile](/docs/components/icon-tile) for acknowledgment, success, and destructive confirmation modals.
-* Use a [Dialog](/docs/components/dialog) without a visual for form and review modals.
+* Use [IconTile](icon-tile.md) for acknowledgment, success, and destructive confirmation modals.
+* Use a [Dialog](dialog.md) without a visual for form and review modals.
 
 ### Use One Visual Above the Title
 
@@ -125,7 +125,7 @@ namespace styles {
 }
 ```
 
-**Don't:** Stack a visual and an [IconTile](/docs/components/icon-tile).
+**Don't:** Stack a visual and an [IconTile](icon-tile.md).
 
 ```tsx
 /**
@@ -240,10 +240,10 @@ A visual renders a `<div>` with no role and takes no focus. Screen readers skip
 
 ## Related
 
-[IconTile](/docs/components/icon-tile)
+[IconTile](icon-tile.md)
 
 Use for icons at the top of other centered modals.
 
-[Dialog](/docs/components/dialog)
+[Dialog](dialog.md)
 
 Use for the modal that holds the visual.

package/dist/docs/product/components.md

@@ -0,0 +1,203 @@
+# Overview
+
+Components for building Tempo products, grouped by the job each one does.
+
+## Principles
+
+* **Native First:** Components render native elements such as `<button>`, `<input>`, and `<table>`, and accept their attributes, refs, classes, and styles.
+* **Accessible Behavior:** Components that coordinate focus, keyboard, or popups build on Base UI primitives, which supply keyboard support and ARIA wiring.
+* **Composable Parts:** Larger components split into named parts, such as `Dialog.Root` and `Dialog.Title`, so you control the markup between them.
+* **Shared Tokens:** Every component reads Tempo variables for color, spacing, type, and motion. A variable scope on a wrapper restyles everything inside it.
+
+## Actions
+
+Controls that start an action or copy a value.
+
+- [Button](components/button.md): Triggers an action, such as submitting a form or sending a payment.
+- [ButtonGroup](components/button-group.md): Lays out the actions at the foot of a dialog or focused flow.
+- [CopyButton](components/copy-button.md): Copies a value to the clipboard and confirms the copy.
+- [SplitButton](components/split-button.md): Pairs a primary action with a menu of alternatives.
+
+## Forms and Inputs
+
+Controls that collect values, and the parts that label and group them. Wrap each control in a [Field](components/field.md) to link its label, description, and error.
+
+- [AmountInput](components/amount-input.md): Accepts a decimal amount, such as a payment or transfer value.
+- [Autocomplete](components/autocomplete.md): A text input that suggests values while people type.
+- [Calendar](components/calendar.md): A month grid for picking one date or a date range.
+- [Checkbox](components/checkbox.md): Turns a single independent option on or off.
+- [CheckboxGroup](components/checkbox-group.md): Shares one value array across a group of checkboxes.
+- [Choicebox](components/choicebox.md): A selectable tile with an optional icon, title, and description.
+- [ChoiceGroup](components/choice-group.md): A segmented control for a few mutually exclusive options.
+- [Combobox](components/combobox.md): A text input that filters a list of fixed options while people type.
+- [DatePicker](components/date-picker.md): Shows the selected date and opens a calendar in a popup.
+- [Field](components/field.md): Links a label, description, and error message to a control.
+- [Fieldset](components/fieldset.md): Groups related fields under a shared legend.
+- [NativeSelect](components/native-select.md): A native select styled as a field, which opens the browser's own picker.
+- [NumberField](components/number-field.md): A numeric input with increment and decrement buttons.
+- [OtpField](components/otp-field.md): Accepts a one-time passcode, one character per slot.
+- [RadioGroup](components/radio-group.md): Lets you pick a single option from a short list.
+- [Select](components/select.md): Opens a list of options for choosing one value.
+- [Slider](components/slider.md): Picks a single value or a range by dragging.
+- [Switch](components/switch.md): Toggles a setting that applies immediately.
+- [Textarea](components/textarea.md): A multi-line text field.
+- [TextInput](components/text-input.md): A text field with optional prefix, suffix, and clear button.
+
+## Feedback and Status
+
+Components that report progress, results, and system state.
+
+- [Alert](components/alert.md): Shows an inline message tied to nearby content.
+- [Banner](components/banner.md): Shows a full-width message about the system or page.
+- [Callout](components/callout.md): Sets a short passage of body text apart in a subtle box.
+- [Empty](components/empty.md): Fills a region that has nothing to show yet.
+- [Gauge](components/gauge.md): Shows a measurement within a range as a ring.
+- [LoadingDots](components/loading-dots.md): Shows three pulsing dots for inline loading.
+- [Progress](components/progress.md): Shows how far a task has advanced.
+- [Skeleton](components/skeleton.md): Holds the place of content while it loads.
+- [Spinner](components/spinner.md): Shows that something is loading.
+- [StatusChip](components/status-chip.md): Names the status of a payment, an authorization, or a network.
+- [StatusIndicator](components/status-indicator.md): Names the status of a system or a service with a dot and a label.
+- [StatusRow](components/status-row.md): Follows the status of one payment or task while it runs.
+- [Toast](components/toast.md): Shows a brief notification that dismisses itself.
+
+## Overlays
+
+Popups that open above the page from a trigger.
+
+- [AlertDialog](components/alert-dialog.md): Asks you to confirm a critical action before it happens.
+- [Dialog](components/dialog.md): Opens a modal popup over the page.
+- [Drawer](components/drawer.md): Slides a modal panel in from an edge of the viewport.
+- [Menu](components/menu.md): Opens a list of actions from a button.
+- [Popover](components/popover.md): Opens a non-modal popup anchored to a trigger.
+- [Tooltip](components/tooltip.md): Shows a short label for a control on hover or focus.
+
+## Navigation
+
+Components that move between pages, views, and steps.
+
+- [Breadcrumbs](components/breadcrumbs.md): Shows where the current page sits in the site hierarchy.
+- [Pagination](components/pagination.md): Moves between pages of a long list.
+- [SidebarMenu](components/sidebar-menu.md): Vertical navigation for sidebars and drawers.
+- [Stepper](components/stepper.md): Shows progress through a fixed sequence of steps.
+- [Tabs](components/tabs.md): Switches between related views.
+
+## Layout
+
+Primitives that size, space, and arrange content. They carry no meaning, so pair them with semantic elements where structure matters.
+
+- [AppShell](components/app-shell.md): Places a sticky sidebar beside the main content column.
+- [Container](components/container.md): Centers content at a maximum width.
+- [Frame](components/frame.md): Lays out a header, body, and footer in a column.
+- [Grid](components/grid.md): Lays out children on a responsive grid.
+- [Inline](components/inline.md): Lays out children in a horizontal row.
+- [Inset](components/inset.md): Pads content with spacing tokens.
+- [Separator](components/separator.md): Draws a rule between groups of content.
+- [Stack](components/stack.md): Lays out children in a vertical column.
+- [Surface](components/surface.md): A card container for grouping related content.
+
+## Data Display
+
+Components that present content and records.
+
+- [Accordion](components/accordion.md): Stacks collapsible sections that each reveal a labelled panel.
+- [AgentLogo](components/agent-logo.md): Shows the logo of an AI agent that works with a wallet.
+- [Avatar](components/avatar.md): Represents a person, contact, or wallet with an image, initials, or an icon.
+- [Badge](components/badge.md): Labels a status or category in a compact chip.
+- [BarChart](components/bar-chart.md): Shows values over time as stacked bars, such as the daily spend of each agent.
+- [Code](components/code.md): Sets a command, identifier, or value apart inside a sentence.
+- [GetStartedVisual](components/get-started-visual.md): Illustrates one step of a get started flow at the top of its card.
+- [HeroVisual](components/hero-visual.md): Shows animated streaks and a title beside the steps of a setup flow.
+- [IconTile](components/icon-tile.md): Anchors a centered modal with one icon in a rounded square.
+- [Kbd](components/kbd.md): Shows a keyboard key or shortcut.
+- [ListGroup](components/list-group.md): Stacks rows for details, pickers, checklists, and settings.
+- [Snippet](components/snippet.md): Shows a command or value with a copy button.
+- [SplitBar](components/split-bar.md): Splits one total between two parts, with a legend under the bar.
+- [SuccessHero](components/success-hero.md): Confirms that a setup flow finished, on a dark card of animated streaks.
+- [Table](components/table.md): Displays tabular data in rows and columns.
+- [TempoLogo](components/tempo-logo.md): Shows the Tempo brand logo.
+- [VerificationCode](components/verification-code.md): Shows a code that a person compares with the one another app shows.
+- [Visual](components/visual.md): Illustrates the top of an onboarding or feature modal.
+
+## Blockchain
+
+Components for onchain values such as addresses, amounts, and tokens.
+
+- [AddressCard](components/address-card.md): Shows a wallet address to receive funds, with its QR code and networks.
+- [Amount](components/amount.md): Formats a number as money or a token amount.
+- [AssetChip](components/asset-chip.md): Labels a supported asset or network in a small chip, which can also pick one.
+- [BadgedLogo](components/badged-logo.md): Marks a token or an app with a small badge on the corner of its logo.
+- [Hex](components/hex.md): Shows a hex string, such as an address, truncated to fit.
+- [Identicon](components/identicon.md): Shows a unique gradient avatar derived from an address.
+- [NetworkLogo](components/network-logo.md): Shows the logo of the network a token lives on.
+- [Qr](components/qr.md): Renders a value as a QR code.
+- [SecretValue](components/secret-value.md): Masks a secret and adds reveal and copy buttons.
+- [Token](components/token.md): Shows which token an amount is in, and opens a picker to change it.
+- [TokenLogo](components/token-logo.md): Shows a token logo by contract address or symbol.
+
+## Choosing a Component
+
+### Choosing One Option
+
+* **[RadioGroup](components/radio-group.md):** Two to five options, all visible at once.
+* **[ChoiceGroup](components/choice-group.md):** Two to four short options that switch a view or mode.
+* **[Choicebox](components/choicebox.md):** A few options that each need an icon or description.
+* **[Select](components/select.md):** Many options, or limited space.
+* **[Combobox](components/combobox.md):** A long list to filter by typing.
+* **[Autocomplete](components/autocomplete.md):** Free text with suggested values.
+
+### On and Off
+
+* **[Switch](components/switch.md):** A setting that applies the moment you flip it.
+* **[Checkbox](components/checkbox.md):** A choice that applies on form submit, or agreement to terms.
+
+### Messages
+
+* **[Banner](components/banner.md):** A message about the whole product or page, such as an outage.
+* **[Alert](components/alert.md):** A message about a specific section or field.
+* **[Toast](components/toast.md):** Confirms that an action finished.
+* **[AlertDialog](components/alert-dialog.md):** An action that needs a decision before it continues.
+
+### Loading
+
+* **[Skeleton](components/skeleton.md):** Content with a known shape.
+* **[Progress](components/progress.md):** A task with a measurable amount of work.
+* **[Spinner](components/spinner.md):** A region or control that is busy for an unknown time.
+* **[LoadingDots](components/loading-dots.md):** A short wait inside a line of text.
+
+### Popups
+
+* **[Dialog](components/dialog.md):** A focused task that blocks the page.
+* **[Drawer](components/drawer.md):** A long form or details panel that keeps page context visible.
+* **[Menu](components/menu.md):** A list of actions.
+* **[Popover](components/popover.md):** Interactive content anchored to a trigger, without a block on the page.
+* **[Tooltip](components/tooltip.md):** A label for an icon button.
+
+### Showing a Status
+
+* **[Table](components/table.md) cell `status`:** A status in a table row, as a colored word such as Failed.
+* **[StatusChip](components/status-chip.md):** The status of a payment, an authorization, or a network, at the end of a row or beside a title.
+* **[StatusIndicator](components/status-indicator.md):** The live state of a system, a service, or a connection, such as Degraded.
+* **[StatusRow](components/status-row.md):** One running task that a person follows until it finishes.
+* **[Badge](components/badge.md):** A category or an attribute, such as Testnet or Nightly.
+
+### Lists of Records
+
+* **[Table](components/table.md):** Many records with the same fields, such as payouts or team members, to compare by column.
+* **[ListGroup](components/list-group.md):** The fields of one record, a short list to pick from or open, or table rows below 640px.
+* **[Surface](components/surface.md) in a [Grid](components/grid.md):** A few similar items that each stand alone, such as metric tiles. Don't make a card per record.
+
+### Identifiers
+
+* **[Hex](components/hex.md):** An address or a hash in a row, a card, or a details view. It truncates in the middle to fit its container, down to the prefix and one character on each side, and overflows a narrower one.
+* **[Table](components/table.md) cell `mono`:** An address or a hash in a table column, shortened with `formatHex` to `0x4f2a…91c3`. Link the row to a details view with a Hex.
+* **[Snippet](components/snippet.md):** A URL, a command, or another value that isn't hex.
+* **[SecretValue](components/secret-value.md):** A private key or another secret, hidden until a reveal.
+
+Set `copy` on a Hex wherever people need the full value. [Building From Intent](foundations/intent.md) shows how to choose by the job of the content.
+
+### Copying Values
+
+* **[Snippet](components/snippet.md):** A command or value with its own copy button.
+* **[CopyButton](components/copy-button.md):** Copy beside content that you lay out yourself.
+* **[SecretValue](components/secret-value.md):** A value that stays hidden until a reveal.

package/dist/docs/{foundations → product/foundations}/accessibility.md

@@ -10,7 +10,7 @@ Components render native elements, follow the [WAI-ARIA Authoring Practices](htt
 
 ## Color and Contrast
 
-Every foreground and background pair meets these ratios in both schemes, and [Color](/docs/foundations/color#contrast) lists the pairs that pass.
+Every foreground and background pair meets these ratios in both schemes, and [Color](color.md#contrast) lists the pairs that pass.
 
 * **Body Text (4.5:1):** For readable text, such as `content.primary` or `content.secondary` ([SC 1.4.3](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)).
 * **Large Text (3:1):** For large text, at least 24px in regular weight or 18.66px in bold.
@@ -19,7 +19,7 @@ Every foreground and background pair meets these ratios in both schemes, and [Co
 
 ### Never Use Color Alone
 
-Pair color with text, an icon, or a shape ([SC 1.4.1](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)), as [Color](/docs/foundations/color#never-use-color-alone) shows.
+Pair color with text, an icon, or a shape ([SC 1.4.1](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)), as [Color](color.md#never-use-color-alone) shows.
 
 * **Statuses:** Pair each status color with an icon and a label.
 * **Errors:** Pair the invalid fill with an error message.
@@ -53,7 +53,7 @@ Components use the keys the Authoring Practices define for each widget.
 
 * **Reserved Keys:** Don't take over keys that browsers or assistive technology use.
 * **Single-Key Shortcuts:** Let the reader turn off or remap them, or limit them to a focused control ([SC 2.1.4](https://www.w3.org/WAI/WCAG22/Understanding/character-key-shortcuts.html)).
-* **Show Shortcuts (Kbd):** Show them with [Kbd](/docs/components/kbd), which reads modifiers by name, such as Command K.
+* **Show Shortcuts (Kbd):** Show them with [Kbd](../components/kbd.md), which reads modifiers by name, such as Command K.
 
 ### Visible Focus
 
@@ -116,13 +116,13 @@ Never let sticky bars, banners, or toasts fully hide a focused control ([SC 2.4.
 
 ### Overlays
 
-Modal overlays, such as [Dialog](/docs/components/dialog), [AlertDialog](/docs/components/alert-dialog), and [Drawer](/docs/components/drawer), manage focus from open to close. Anchored popups, such as [Popover](/docs/components/popover), [Menu](/docs/components/menu), and [Tooltip](/docs/components/tooltip), follow their own rules.
+Modal overlays, such as [Dialog](../components/dialog.md), [AlertDialog](../components/alert-dialog.md), and [Drawer](../components/drawer.md), manage focus from open to close. Anchored popups, such as [Popover](../components/popover.md), [Menu](../components/menu.md), and [Tooltip](../components/tooltip.md), follow their own rules.
 
 * **On Open:** Focus moves into the overlay, so the reader starts inside it.
 * **While Open (Tab and Shift+Tab):** Focus cycles within the overlay. The page behind is inert and locked. Escape closes it.
 * **On Close:** Focus returns to the control that opened it, so the reader keeps their place.
 * **Popover:** Moves focus inside without a trap, and the page behind stays interactive.
-* **Menu:** Returns focus to the trigger on Escape or an outside press, as [Popover](/docs/components/popover) does.
+* **Menu:** Returns focus to the trigger on Escape or an outside press, as [Popover](../components/popover.md) does.
 * **Tooltip:** Never moves focus. It opens on hover and keyboard focus, and Escape dismisses it.
 * **Removed Trigger:** If the trigger is gone on close, such as a deleted row, move focus to a logical place.
 
@@ -150,10 +150,10 @@ Screen reader users navigate by headings and landmarks ([SC 1.3.1](https://www.w
 
 * **Title and H1 (h1):** Use one main heading per page, and a unique title that names it ([SC 2.4.2](https://www.w3.org/WAI/WCAG22/Understanding/page-titled.html)).
 * **Heading Levels:** Use headings in order, without skipping levels, and pick each level for the outline.
-* **Landmarks (main):** [AppShell](/docs/components/app-shell) and [SidebarMenu](/docs/components/sidebar-menu) render them. Layout primitives take one through `render`.
+* **Landmarks (main):** [AppShell](../components/app-shell.md) and [SidebarMenu](../components/sidebar-menu.md) render them. Layout primitives take one through `render`.
 * **Named Regions (aria-label):** Name tab lists and the sidebar, and give each landmark a distinct label.
 * **Skip Link:** If the sidebar holds many links, add a skip link to the main content.
-* **Lists and Tables (list):** Mark up lists as lists and tabular data as a [Table](/docs/components/table), not as styled divs.
+* **Lists and Tables (list):** Mark up lists as lists and tabular data as a [Table](../components/table.md), not as styled divs.
 
 ### Status Messages
 
@@ -228,10 +228,10 @@ namespace styles {
 }
 ```
 
-* **Linked Label (Field.Label):** [Field](/docs/components/field) links the label to its control, which takes it as its name.
+* **Linked Label (Field.Label):** [Field](../components/field.md) links the label to its control, which takes it as its name.
 * **Hints and Errors (aria-describedby):** `Field.Description` and a shown `Field.Error` read after the control's name.
 * **Required and Optional:** Mark required or optional fields in text, not by color or an asterisk alone.
-* **Group Related Controls (legend):** Group radios in a [Fieldset](/docs/components/fieldset) whose legend asks one question.
+* **Group Related Controls (legend):** Group radios in a [Fieldset](../components/fieldset.md) whose legend asks one question.
 * **Autocomplete (autocomplete):** Set it on fields that collect personal data, such as email or name ([SC 1.3.5](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html)).
 
 ### Errors
@@ -319,7 +319,7 @@ Content must survive these spacing overrides at once, without clipping or overla
 
 ## Motion
 
-[Motion](/docs/foundations/motion#reduced-motion) shows how to apply the reduced-motion preference to your own styles.
+[Motion](motion.md#reduced-motion) shows how to apply the reduced-motion preference to your own styles.
 
 * **Reduced Motion (prefers-reduced-motion):** Components remove movement and scaling, but keep color changes and brief fades.
 * **Moving Content (5 seconds):** Let the reader pause, stop, or hide anything that moves on its own for longer ([SC 2.2.2](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)).
@@ -327,7 +327,7 @@ Content must survive these spacing overrides at once, without clipping or overla
 
 ## Content
 
-* **Link Text:** Describe the destination, even out of context ([SC 2.4.4](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html)). See [Writing Style](/docs/foundations/content/writing-style#links).
+* **Link Text:** Describe the destination, even out of context ([SC 2.4.4](https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html)). See [Writing Style](content/writing-style.md#links).
 * **Alt Text (alt):** Describe meaningful images, and leave it empty on decorative ones ([SC 1.1.1](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html)).
 * **Time Limits:** Announce a time limit before it starts, and let the reader extend it ([SC 2.2.1](https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html)).
 * **Toast Actions (timeout: 0):** Offer a toast's action elsewhere too, or keep the toast open until dismissed.
@@ -356,22 +356,22 @@ Before you ship a screen, confirm each item.
 
 ## Related
 
-[Color](/docs/foundations/color)
+[Color](color.md)
 
 Covers contrast and color use.
 
-[Motion](/docs/foundations/motion)
+[Motion](motion.md)
 
 Covers reduced motion.
 
-[Forms](/docs/patterns/forms)
+[Forms](../patterns/forms.md)
 
 Covers labels and grouping.
 
-[Errors and Validation](/docs/patterns/errors-and-validation)
+[Errors and Validation](../patterns/errors-and-validation.md)
 
 Covers writing and announcing errors.
 
-[Button](/docs/components/button)
+[Button](../components/button.md)
 
 Use for icon buttons and loading states.