@tempoxyz/ds 0.3.11 → 0.3.13

package/dist/docs/{components → product/components}/status-row.md

@@ -8,7 +8,7 @@ Figma: [Messaging/Status Row](https://www.figma.com/design/yE96kcymnNR88PJp6G1sP
 
 ## Overview
 
-A status row renders a tinted row with a leading mark, a title over a description, and an optional trailing [StatusChip](/docs/components/status-chip). It announces a change of its text to screen readers, so it can update in place as the task moves on.
+A status row renders a tinted row with a leading mark, a title over a description, and an optional trailing [StatusChip](status-chip.md). It announces a change of its text to screen readers, so it can update in place as the task moves on.
 
 ## Examples
 
@@ -89,9 +89,9 @@ import { StatusRow } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Alert](/docs/components/alert) for guidance that is not tied to a running task.
-* Use [Toast](/docs/components/toast) to confirm an action briefly and out of the flow.
-* Use [ListGroup](/docs/components/list-group) for a list of finished payments.
+* Use [Alert](alert.md) for guidance that is not tied to a running task.
+* Use [Toast](toast.md) to confirm an action briefly and out of the flow.
+* Use [ListGroup](list-group.md) for a list of finished payments.
 
 ### Match the Mark to the State
 
@@ -161,14 +161,14 @@ A status row renders a `<div>` with the `status` role, so screen readers announc
 
 ## Related
 
-[StatusChip](/docs/components/status-chip)
+[StatusChip](status-chip.md)
 
 Use for the status at the end of the row.
 
-[Spinner](/docs/components/spinner)
+[Spinner](spinner.md)
 
 Use for the leading mark while the task runs.
 
-[Alert](/docs/components/alert)
+[Alert](alert.md)
 
 Use for guidance that is not tied to a running task.

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

@@ -78,10 +78,10 @@ import { Stepper } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Progress](/docs/components/progress) for measurable work, such as a file upload or a sync to the latest block.
-* Use [Tabs](/docs/components/tabs) for sections in any order. A stepper is not interactive, and its segments don't link to steps.
-* Use [Breadcrumbs](/docs/components/breadcrumbs) to show where a page sits in the hierarchy.
-* Use one form, laid out with [Field](/docs/components/field) and [Fieldset](/docs/components/fieldset), when the task fits on one screen.
+* Use [Progress](progress.md) for measurable work, such as a file upload or a sync to the latest block.
+* Use [Tabs](tabs.md) for sections in any order. A stepper is not interactive, and its segments don't link to steps.
+* Use [Breadcrumbs](breadcrumbs.md) to show where a page sits in the hierarchy.
+* Use one form, laid out with [Field](field.md) and [Fieldset](fieldset.md), when the task fits on one screen.
 
 ### Keep the Step Count Fixed
 
@@ -331,7 +331,7 @@ namespace styles {
 
 ### Keep It in One Place
 
-Place the stepper in the same spot on every step. In a [Dialog](/docs/components/dialog) or a [Frame](/docs/components/frame), center it in the header, with the Back button on the left from the second step.
+Place the stepper in the same spot on every step. In a [Dialog](dialog.md) or a [Frame](frame.md), center it in the header, with the Back button on the left from the second step.
 
 **Do:** Place the stepper at the top, above the step's heading.
 
@@ -434,18 +434,18 @@ A stepper renders a `progressbar` whose value is the current step. The segments
 
 ## Related
 
-[Progress](/docs/components/progress)
+[Progress](progress.md)
 
 Use for measurable work.
 
-[Dialog](/docs/components/dialog)
+[Dialog](dialog.md)
 
 Use for flows that open over the page.
 
-[Forms](/docs/patterns/forms)
+[Forms](../patterns/forms.md)
 
 Covers laying out each step.
 
-[Payments](/docs/patterns/payments)
+[Payments](../patterns/payments.md)
 
 Covers send and review flows.

package/dist/docs/{components → product/components}/success-hero.md

@@ -14,7 +14,7 @@ A success hero renders a dark 520px card. Streaks slide in behind a bottom row t
 
 ### Basic
 
-Compose `SuccessHero.Body` and an action. A default [Button](/docs/components/button) fills light on the dark card.
+Compose `SuccessHero.Body` and an action. A default [Button](button.md) fills light on the dark card.
 
 ```tsx
 /** Demonstrates SuccessHero in the documentation. @module */
@@ -98,8 +98,8 @@ import { SuccessHero } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [HeroVisual](/docs/components/hero-visual) beside the steps while the flow runs.
-* Use [Toast](/docs/components/toast) to confirm a small action.
+* Use [HeroVisual](hero-visual.md) beside the steps while the flow runs.
+* Use [Toast](toast.md) to confirm a small action.
 
 ### Offer One Action
 
@@ -148,10 +148,10 @@ The card renders a `<div>` with no role. Screen readers skip the artwork and rea
 
 ## Related
 
-[HeroVisual](/docs/components/hero-visual)
+[HeroVisual](hero-visual.md)
 
 Use for the hero card while the flow runs.
 
-[Button](/docs/components/button)
+[Button](button.md)
 
 Use for the action of the card.

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

@@ -113,7 +113,7 @@ namespace styles {
 
 ### List
 
-A [ListGroup](/docs/components/list-group) inside a surface bleeds into its padding, so a row's hover fill reaches the edges of the surface. Each row is 44px, and a [Select](/docs/components/select) in a row hugs its value at the end of the row.
+A [ListGroup](list-group.md) inside a surface bleeds into its padding, so a row's hover fill reaches the edges of the surface. Each row is 44px, and a [Select](select.md) in a row hugs its value at the end of the row.
 
 ```tsx
 /** Renders a small surface whose list holds a network picker and a row of token logos, for the Surface docs. @module */
@@ -320,14 +320,14 @@ import { Surface } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Alert](/docs/components/alert) for a message about a section, and [Banner](/docs/components/banner) for one about the page.
-* Use [Dialog](/docs/components/dialog) or [Popover](/docs/components/popover) for content that opens over the page.
-* Use [Stack](/docs/components/stack) or [Inset](/docs/components/inset) to space content without a visible container.
-* Use [Frame](/docs/components/frame) inside a surface for a card with a footer of actions.
+* Use [Alert](alert.md) for a message about a section, and [Banner](banner.md) for one about the page.
+* Use [Dialog](dialog.md) or [Popover](popover.md) for content that opens over the page.
+* Use [Stack](stack.md) or [Inset](inset.md) to space content without a visible container.
+* Use [Frame](frame.md) inside a surface for a card with a footer of actions.
 
 ### Name Each Card
 
-Start a card with a `Surface.Header` that holds a `Surface.Title`. Put a card-level action at the end of the header, such as a `small` `tertiary` [Button](/docs/components/button).
+Start a card with a `Surface.Header` that holds a `Surface.Title`. Put a card-level action at the end of the header, such as a `small` `tertiary` [Button](button.md).
 
 **Do:** Name the card with a `Surface.Title`, and put its action at the end of the header.
 
@@ -504,7 +504,7 @@ namespace styles {
 
 ### Don't Nest Surfaces
 
-Divide the content of one surface with [ListGroup](/docs/components/list-group), a [Table](/docs/components/table), or a [Separator](/docs/components/separator). A table placed directly inside a surface bleeds 12px into its padding, so its rows end 12px inside the edges of a large surface and its text stays on the content edge. The surface draws no border around it.
+Divide the content of one surface with [ListGroup](list-group.md), a [Table](table.md), or a [Separator](separator.md). A table placed directly inside a surface bleeds 12px into its padding, so its rows end 12px inside the edges of a large surface and its text stays on the content edge. The surface draws no border around it.
 
 **Do:** Divide one surface with ListGroup.
 
@@ -622,18 +622,18 @@ For a pressable surface rendered as a button or link:
 
 ## Related
 
-[Frame](/docs/components/frame)
+[Frame](frame.md)
 
 Use for a header, body, and footer inside a card.
 
-[ListGroup](/docs/components/list-group)
+[ListGroup](list-group.md)
 
 Use for divided content in a card.
 
-[Grid](/docs/components/grid)
+[Grid](grid.md)
 
 Use for laying out several cards.
 
-[Dashboards](/docs/patterns/dashboards)
+[Dashboards](../patterns/dashboards.md)
 
 Covers metric tiles.

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

@@ -26,7 +26,7 @@ export function Demo() {
 
 ### Size
 
-Set `size` to `small`, `medium`, or `large`. It defaults to `medium`, or `small` inside [ListGroup](/docs/components/list-group).
+Set `size` to `small`, `medium`, or `large`. It defaults to `medium`, or `small` inside [ListGroup](list-group.md).
 
 ```tsx
 import { style, Switch } from '@tempoxyz/ds'
@@ -147,9 +147,9 @@ import { Switch } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use a [Checkbox](/docs/components/checkbox) for a choice that applies on form submit, or for agreeing to terms.
-* Use a [RadioGroup](/docs/components/radio-group) or [ChoiceGroup](/docs/components/choice-group) when the two states aren't on and off, such as Daily and Weekly.
-* Use a [Button](/docs/components/button) for a one-time action, such as Revoke key.
+* Use a [Checkbox](checkbox.md) for a choice that applies on form submit, or for agreeing to terms.
+* Use a [RadioGroup](radio-group.md) or [ChoiceGroup](choice-group.md) when the two states aren't on and off, such as Daily and Weekly.
+* Use a [Button](button.md) for a one-time action, such as Revoke key.
 
 ### Apply the Change Immediately
 
@@ -188,7 +188,7 @@ namespace styles {
 }
 ```
 
-**Don't:** Add a Save button to a group of switches. Use a [Checkbox](/docs/components/checkbox) in a
+**Don't:** Add a Save button to a group of switches. Use a [Checkbox](checkbox.md) in a
 form instead.
 
 ```tsx
@@ -234,8 +234,8 @@ namespace styles {
 }
 ```
 
-* **Failed saves:** Update `checked` optimistically. If the save fails, flip it back and explain why in a [Toast](/docs/components/toast).
-* **Risky changes:** If a change needs confirmation, costs money, or can't be undone, use a [Button](/docs/components/button) and an [AlertDialog](/docs/components/alert-dialog).
+* **Failed saves:** Update `checked` optimistically. If the save fails, flip it back and explain why in a [Toast](toast.md).
+* **Risky changes:** If a change needs confirmation, costs money, or can't be undone, use a [Button](button.md) and an [AlertDialog](alert-dialog.md).
 * **Delayed changes:** If a change takes a few seconds to apply, state it in the description, such as Applies to new payments.
 
 ### Name the Setting, Not the State
@@ -455,18 +455,18 @@ A switch follows the [WAI-ARIA switch pattern](https://www.w3.org/WAI/ARIA/apg/p
 
 ## Related
 
-[Checkbox](/docs/components/checkbox)
+[Checkbox](checkbox.md)
 
 Use for choices submitted with a form.
 
-[Field](/docs/components/field)
+[Field](field.md)
 
 Use for the label and description.
 
-[Fieldset](/docs/components/fieldset)
+[Fieldset](fieldset.md)
 
 Use for grouping settings rows.
 
-[Toast](/docs/components/toast)
+[Toast](toast.md)
 
 Use for reporting a failed save.

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

@@ -73,7 +73,7 @@ namespace styles {
 
 ### Two Lines
 
-Set a second line in `Table.Subtitle`, lead the first cell with a `Table.LeadTile` or a [TokenLogo](/docs/components/token-logo), and set `muted` on a value that matters less, such as a zero amount.
+Set a second line in `Table.Subtitle`, lead the first cell with a `Table.LeadTile` or a [TokenLogo](token-logo.md), and set `muted` on a value that matters less, such as a zero amount.
 
 ```tsx
 import { Inline, StatusChip, style, Surface, Table } from '@tempoxyz/ds'
@@ -538,10 +538,10 @@ import { Table } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [ListGroup](/docs/components/list-group) with `ListGroup.Label` for the fields of one record, such as a transaction's network, fee, and status.
-* Use [ListGroup](/docs/components/list-group) with `action="navigation"` for a short list of pages or settings to open.
-* Use [Grid](/docs/components/grid) or [Stack](/docs/components/stack) to arrange content.
-* Use a [Surface](/docs/components/surface) with a large [Amount](/docs/components/amount) for one headline number, such as a balance or the current TPS.
+* Use [ListGroup](list-group.md) with `ListGroup.Label` for the fields of one record, such as a transaction's network, fee, and status.
+* Use [ListGroup](list-group.md) with `action="navigation"` for a short list of pages or settings to open.
+* Use [Grid](grid.md) or [Stack](stack.md) to arrange content.
+* Use a [Surface](surface.md) with a large [Amount](amount.md) for one headline number, such as a balance or the current TPS.
 
 ### Align Numbers to the End
 
@@ -633,11 +633,11 @@ export function Demo() {
 }
 ```
 
-An [Amount](/docs/components/amount) in a cell renders as a block and sets its own alignment. Give it `align="right"` in an end-aligned column.
+An [Amount](amount.md) in a cell renders as a block and sets its own alignment. Give it `align="right"` in an end-aligned column.
 
 ### Truncate Hashes in the Middle
 
-Set `mono` on cells with hashes, addresses, and commit IDs, and shorten them with `formatHex`. Link the row to a details view that shows the full value in a [Hex](/docs/components/hex) with `copy`.
+Set `mono` on cells with hashes, addresses, and commit IDs, and shorten them with `formatHex`. Link the row to a details view that shows the full value in a [Hex](hex.md) with `copy`.
 
 **Do:** Keep the `0x` prefix and four characters on each side, such as `0x4f2a…91c3`.
 
@@ -717,7 +717,7 @@ export function Demo() {
 
 ### Pair Status Color With Words
 
-`status` colors a cell's text `positive`, `negative`, or `warning`. If the status needs more weight, use a [Badge](/docs/components/badge) in the cell.
+`status` colors a cell's text `positive`, `negative`, or `warning`. If the status needs more weight, use a [Badge](badge.md) in the cell.
 
 **Do:** Keep a word with each color, such as Failed.
 
@@ -890,7 +890,7 @@ export function Demo() {
 ### Keep Long Tables Readable
 
 * **Sticky headers:** Set `sticky` on `Table.Head`, and place the table in a scrolling container with a fixed height.
-* **Long histories:** Split them with [Pagination](/docs/components/pagination).
+* **Long histories:** Split them with [Pagination](pagination.md).
 
 ### Match Density to the Data
 
@@ -938,30 +938,30 @@ With `interactive`, a focused body row shows an outline inside its edges. A focu
 
 ## Related
 
-[ListGroup](/docs/components/list-group)
+[ListGroup](list-group.md)
 
 Use for the details of one record.
 
-[Amount](/docs/components/amount)
+[Amount](amount.md)
 
 Use for money and token amounts in cells.
 
-[Hex](/docs/components/hex)
+[Hex](hex.md)
 
 Use for addresses and hashes.
 
-[Badge](/docs/components/badge)
+[Badge](badge.md)
 
 Use for statuses.
 
-[Pagination](/docs/components/pagination)
+[Pagination](pagination.md)
 
 Use for long histories.
 
-[Tables and Lists](/docs/patterns/tables-and-lists)
+[Tables and Lists](../patterns/tables-and-lists.md)
 
 Covers choosing a layout.
 
-[Dashboards](/docs/patterns/dashboards)
+[Dashboards](../patterns/dashboards.md)
 
 Covers benchmark and metric views.

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

@@ -219,10 +219,10 @@ import { Tabs } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [ChoiceGroup](/docs/components/choice-group) to pick a value that changes the current view, such as a chart's 1D, 1W, or 1M range.
-* Use [SidebarMenu](/docs/components/sidebar-menu) or links to move between pages with their own URLs.
-* Use [Stepper](/docs/components/stepper) for steps completed in order.
-* Use [Accordion](/docs/components/accordion) to open several sections at once, or to compare them.
+* Use [ChoiceGroup](choice-group.md) to pick a value that changes the current view, such as a chart's 1D, 1W, or 1M range.
+* Use [SidebarMenu](sidebar-menu.md) or links to move between pages with their own URLs.
+* Use [Stepper](stepper.md) for steps completed in order.
+* Use [Accordion](accordion.md) to open several sections at once, or to compare them.
 
 ### Keep Tabs Few and Short
 
@@ -334,7 +334,7 @@ export function Demo() {
 
 ### Keep Panels Independent
 
-Make each panel complete on its own. A Save button in one panel can't show errors in another, so use a [Stepper](/docs/components/stepper) flow or one longer form.
+Make each panel complete on its own. A Save button in one panel can't show errors in another, so use a [Stepper](stepper.md) flow or one longer form.
 
 **Do:** Keep the fields of one form together.
 
@@ -503,7 +503,7 @@ namespace styles {
 
 ### Expand Tabs in Narrow Containers
 
-Set `expand` in a narrow container, such as a [Surface](/docs/components/surface) or a phone-width column. Leave it off across a wide page, where stretched tabs drift apart.
+Set `expand` in a narrow container, such as a [Surface](surface.md) or a phone-width column. Leave it off across a wide page, where stretched tabs drift apart.
 
 **Do:** Stretch the tabs across a narrow card with `expand`.
 
@@ -606,22 +606,22 @@ Set `activateOnFocus` on `Tabs.List` to activate a tab on focus. Use it only if
 
 ## Related
 
-[ChoiceGroup](/docs/components/choice-group)
+[ChoiceGroup](choice-group.md)
 
 Use for one value that changes a view.
 
-[SidebarMenu](/docs/components/sidebar-menu)
+[SidebarMenu](sidebar-menu.md)
 
 Use for navigating between pages.
 
-[Accordion](/docs/components/accordion)
+[Accordion](accordion.md)
 
 Use for sections you open together.
 
-[Snippet](/docs/components/snippet)
+[Snippet](snippet.md)
 
 Use for a command with a tab per tool.
 
-[Navigation](/docs/patterns/navigation)
+[Navigation](../patterns/navigation.md)
 
 Covers choosing between navigation components.

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

@@ -115,8 +115,8 @@ import { TempoLogo } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [NetworkLogo](/docs/components/network-logo) for the Tempo network beside a token or an address.
-* Use [TokenLogo](/docs/components/token-logo) for a token.
+* Use [NetworkLogo](network-logo.md) for the Tempo network beside a token or an address.
+* Use [TokenLogo](token-logo.md) for a token.
 
 ### Match the Type to the Space
 
@@ -176,10 +176,10 @@ A Tempo logo renders an `<svg>` that is hidden from screen readers by default. I
 
 ## Related
 
-[NetworkLogo](/docs/components/network-logo)
+[NetworkLogo](network-logo.md)
 
 Use for network logos.
 
-[SidebarMenu](/docs/components/sidebar-menu)
+[SidebarMenu](sidebar-menu.md)
 
 Use for the app sidebar that holds the logo.

package/dist/docs/{components → product/components}/text-input.md

@@ -73,7 +73,7 @@ namespace styles {
 
 ### Search
 
-Add a `Search` icon in `TextInput.Prefix` and a `TextInput.Clear`. The clear button shows once the field has a value, and Escape empties the field before it closes an enclosing [Dialog](/docs/components/dialog).
+Add a `Search` icon in `TextInput.Prefix` and a `TextInput.Clear`. The clear button shows once the field has a value, and Escape empties the field before it closes an enclosing [Dialog](dialog.md).
 
 ```tsx
 import { Field, style, TextInput } from '@tempoxyz/ds'
@@ -338,11 +338,11 @@ import { TextInput } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [AmountInput](/docs/components/amount-input) for token and fiat amounts. It rejects non-decimals and adds a Max action.
-* Use [NumberField](/docs/components/number-field) for quantities that step up and down.
-* Use [Textarea](/docs/components/textarea) for text over one line.
-* Use [OtpField](/docs/components/otp-field) for one-time passcodes.
-* Use [Select](/docs/components/select) or [Combobox](/docs/components/combobox) if the value must come from a list, and [Autocomplete](/docs/components/autocomplete) if a list only suggests values.
+* Use [AmountInput](amount-input.md) for token and fiat amounts. It rejects non-decimals and adds a Max action.
+* Use [NumberField](number-field.md) for quantities that step up and down.
+* Use [Textarea](textarea.md) for text over one line.
+* Use [OtpField](otp-field.md) for one-time passcodes.
+* Use [Select](select.md) or [Combobox](combobox.md) if the value must come from a list, and [Autocomplete](autocomplete.md) if a list only suggests values.
 
 ### Always Show a Label
 
@@ -563,11 +563,11 @@ Set `type`, `inputMode`, and `autoComplete` on `TextInput.Control` to select the
 
 Avoid `type="number"` for amounts and identifiers. It drops leading zeros, accepts `e`, and some browsers change the value on scroll.
 
-For labels, descriptions, errors, and validation timing, see [Field](/docs/components/field).
+For labels, descriptions, errors, and validation timing, see [Field](field.md).
 
 ## Accessibility
 
-An input renders a native `<input>` inside a styled group. Inside a `Field.Root`, it links to the label, description, and error. See [Accessibility](/docs/foundations/accessibility) for the baseline.
+An input renders a native `<input>` inside a styled group. Inside a `Field.Root`, it links to the label, description, and error. See [Accessibility](../foundations/accessibility.md) for the baseline.
 
 ### Semantics
 
@@ -599,26 +599,26 @@ All other keys follow the native input.
 
 ## Related
 
-[Field](/docs/components/field)
+[Field](field.md)
 
 Use for labels, descriptions, and errors.
 
-[AmountInput](/docs/components/amount-input)
+[AmountInput](amount-input.md)
 
 Use for token and fiat amounts.
 
-[Textarea](/docs/components/textarea)
+[Textarea](textarea.md)
 
 Use for multi-line text.
 
-[Combobox](/docs/components/combobox)
+[Combobox](combobox.md)
 
 Use for picking from a long list by typing.
 
-[Forms](/docs/patterns/forms)
+[Forms](../patterns/forms.md)
 
 Covers laying out fields and actions.
 
-[Errors and Validation](/docs/patterns/errors-and-validation)
+[Errors and Validation](../patterns/errors-and-validation.md)
 
 Covers when and where to show errors.

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

@@ -186,9 +186,9 @@ import { Textarea } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [TextInput](/docs/components/text-input) for single-line values, even long ones such as a 0x address or a webhook URL.
-* Use [Snippet](/docs/components/snippet) for a command or JSON payload to copy, not edit.
-* Use [Select](/docs/components/select), [RadioGroup](/docs/components/radio-group), or [Checkbox](/docs/components/checkbox) when the answer fits a known set of options.
+* Use [TextInput](text-input.md) for single-line values, even long ones such as a 0x address or a webhook URL.
+* Use [Snippet](snippet.md) for a command or JSON payload to copy, not edit.
+* Use [Select](select.md), [RadioGroup](radio-group.md), or [Checkbox](checkbox.md) when the answer fits a known set of options.
 
 ### Set Rows to the Expected Length
 
@@ -335,18 +335,18 @@ All other keys follow the native textarea.
 
 ## Related
 
-[TextInput](/docs/components/text-input)
+[TextInput](text-input.md)
 
 Use for single-line text.
 
-[Field](/docs/components/field)
+[Field](field.md)
 
 Use for labels, descriptions, and errors.
 
-[Snippet](/docs/components/snippet)
+[Snippet](snippet.md)
 
 Use for read-only code and values.
 
-[Forms](/docs/patterns/forms)
+[Forms](../patterns/forms.md)
 
 Covers laying out fields and actions.

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

@@ -190,15 +190,15 @@ import { Toast } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use an [Alert](/docs/components/alert) for an error or warning that must stay beside its content, such as a failed payment.
-* Use a [Banner](/docs/components/banner) for a condition that affects the whole product, such as an outage.
-* Use an [AlertDialog](/docs/components/alert-dialog) for a decision before an action continues.
-* Use `Field.Error` from [Field](/docs/components/field) for validation messages on an input.
-* Use `loading` on a [Button](/docs/components/button), or [Progress](/docs/components/progress), for work that still runs.
+* Use an [Alert](alert.md) for an error or warning that must stay beside its content, such as a failed payment.
+* Use a [Banner](banner.md) for a condition that affects the whole product, such as an outage.
+* Use an [AlertDialog](alert-dialog.md) for a decision before an action continues.
+* Use `Field.Error` from [Field](field.md) for validation messages on an input.
+* Use `loading` on a [Button](button.md), or [Progress](progress.md), for work that still runs.
 
 ### Keep Required Actions Out of Toasts
 
-A toast dismisses itself, and keyboard users must press F6 to reach it. Put required steps in the page or in an [AlertDialog](/docs/components/alert-dialog).
+A toast dismisses itself, and keyboard users must press F6 to reach it. Put required steps in the page or in an [AlertDialog](alert-dialog.md).
 
 **Do:** Confirm a finished action and include the detail that identifies it.
 
@@ -513,23 +513,23 @@ Toasts never take focus on their own. Don't move focus to a new toast yourself.
 
 ### Your Responsibilities
 
-* **Reserve High Priority (priority: 'high'):** Use it only for urgent messages. Show critical errors inline or in a [Dialog](/docs/components/dialog).
+* **Reserve High Priority (priority: 'high'):** Use it only for urgent messages. Show critical errors inline or in a [Dialog](dialog.md).
 * **Render One Viewport (F6):** Render one viewport per app, so the shortcut always reaches it.
 
 ## Related
 
-[Alert](/docs/components/alert)
+[Alert](alert.md)
 
 Use for messages that stay beside their content.
 
-[Banner](/docs/components/banner)
+[Banner](banner.md)
 
 Use for messages about the whole product.
 
-[AlertDialog](/docs/components/alert-dialog)
+[AlertDialog](alert-dialog.md)
 
 Use for decisions before an action continues.
 
-[Feedback and Status](/docs/patterns/feedback-and-status)
+[Feedback and Status](../patterns/feedback-and-status.md)
 
 Covers choosing a message component.