@tempoxyz/ds 0.3.11 → 0.3.13

package/dist/docs/{introduction → product/introduction}/getting-started.md

@@ -360,18 +360,18 @@ namespace styles {
 
 ## Next Steps
 
-[Build a Layout](/docs/components/app-shell)
+[Build a Layout](../components/app-shell.md)
 
 Place a sticky sidebar beside the main content column.
 
-[Trigger Actions](/docs/components/button)
+[Trigger Actions](../components/button.md)
 
 Submit forms, send payments, and run other actions.
 
-[Collect TextInput](/docs/components/field)
+[Collect TextInput](../components/field.md)
 
 Link labels, descriptions, and errors to form controls.
 
-[Show Feedback](/docs/components/toast)
+[Show Feedback](../components/toast.md)
 
 Confirm results with brief notifications.

package/dist/docs/{patterns → product/patterns}/blockchain-values.md

@@ -132,13 +132,13 @@ namespace styles {
 
 ## Addresses and Hashes
 
-Use [Hex](/docs/components/hex) for addresses and transaction hashes. Add `copy` wherever the reader may need the full value.
+Use [Hex](../components/hex.md) for addresses and transaction hashes. Add `copy` wherever the reader may need the full value.
 
 ### Truncate in the Middle
 
-[Hex](/docs/components/hex) keeps the prefix and the checksum ending, and fits the value to its container. For plain strings, such as a [Toast](/docs/components/toast) title, `formatHex` keeps four characters on each side of an ellipsis: 0xd8dA…6045.
+[Hex](../components/hex.md) keeps the prefix and the checksum ending, and fits the value to its container. For plain strings, such as a [Toast](../components/toast.md) title, `formatHex` keeps four characters on each side of an ellipsis: 0xd8dA…6045.
 
-**Do:** Truncate addresses in the middle with [Hex](/docs/components/hex).
+**Do:** Truncate addresses in the middle with [Hex](../components/hex.md).
 
 ```tsx
 /**
@@ -191,14 +191,14 @@ namespace styles {
 
 ### Show the Full Value Where You Verify
 
-Attackers create addresses that match the first and last characters of a known one. Where the reader chooses or confirms a recipient, show the full address, as the [review and receive steps](/docs/patterns/payments#review-before-confirming) of a payment do.
+Attackers create addresses that match the first and last characters of a known one. Where the reader chooses or confirms a recipient, show the full address, as the [review and receive steps](payments.md#review-before-confirming) of a payment do.
 
 * **Short forms:** If only a short form fits but people compare it, keep more characters with the `min` option of `formatHex`, such as 0xd8dA6B…A96045.
 * **Activity lists:** A short value with a contact name is enough. The reader opens the record to verify it.
 
 ### Pair Addresses With Names
 
-Show the known contact or account name beside the address, with an [Identicon](/docs/components/identicon) before both. The [Identicon](/docs/components/identicon) is a cue, never the identifier.
+Show the known contact or account name beside the address, with an [Identicon](../components/identicon.md) before both. The [Identicon](../components/identicon.md) is a cue, never the identifier.
 
 **Do:** Pair the name, identicon, and truncated address with a copy button.
 
@@ -218,19 +218,19 @@ Show the known contact or account name beside the address, with an [Identicon](/
 <Identicon aria-hidden address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" size="32" />
 ```
 
-Keep the letter case of an address as received, since mixed case carries its checksum. Compare addresses without regard to case. [Identicon](/docs/components/identicon) renders the same colors for any letter case.
+Keep the letter case of an address as received, since mixed case carries its checksum. Compare addresses without regard to case. [Identicon](../components/identicon.md) renders the same colors for any letter case.
 
 ## Copy Values
 
 * **Name the Button (aria-label):** The default name is Copy and the value. If that reads poorly, compose `Hex.Copy` with a label such as Copy address.
-* **Confirm Once (2 seconds):** The button shows Copied and announces it politely. Do not add a [Toast](/docs/components/toast).
-* **Your Own Layouts (CopyButton):** Use [CopyButton](/docs/components/copy-button) beside values you lay out yourself, named by what it copies.
+* **Confirm Once (2 seconds):** The button shows Copied and announces it politely. Do not add a [Toast](../components/toast.md).
+* **Your Own Layouts (CopyButton):** Use [CopyButton](../components/copy-button.md) beside values you lay out yourself, named by what it copies.
 
 ## Link to the Explorer
 
 Link transaction hashes, block numbers, and addresses to their page on [explore.tempo.xyz](https://explore.tempo.xyz). In a receipt, use a text link labelled View on explorer.
 
-* **Icon Links (shape=icon):** Name an icon link by destination, and repeat the name in a [Tooltip](/docs/components/tooltip).
+* **Icon Links (shape=icon):** Name an icon link by destination, and repeat the name in a [Tooltip](../components/tooltip.md).
 * **Separate Controls:** Keep copy and link as separate controls. One text never copies on one click and navigates on another.
 
 ## Amounts and Precision
@@ -367,7 +367,7 @@ namespace styles {
 
 [View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Amount/Sign.tsx)
 
-[Payments](/docs/patterns/payments#enter-the-amount) covers entering amounts with [AmountInput](/docs/components/amount-input).
+[Payments](payments.md#enter-the-amount) covers entering amounts with [AmountInput](../components/amount-input.md).
 
 ## Tokens
 
@@ -555,7 +555,7 @@ namespace styles {
 
 [View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Patterns/BlockchainHiddenAmounts.tsx)
 
-* **Toggle:** Use an icon [Button](/docs/components/button) with the eye icons, named Hide amounts, that reports its pressed state.
+* **Toggle:** Use an icon [Button](../components/button.md) with the eye icons, named Hide amounts, that reports its pressed state.
 * **Everywhere:** Hide every amount, including totals, activity, and charts.
 * **Out of the page:** Render the mask in place of the value, not a blur, so the value is absent from the page. Expose the word Hidden to screen readers instead of the dots.
 * **Remembered:** Keep the choice on the device, so amounts stay hidden on the next launch.
@@ -642,7 +642,7 @@ namespace styles {
 
 ## Secrets
 
-Recovery phrases, private keys, API keys, and access keys grant control of funds. Show them with [SecretValue](/docs/components/secret-value), which starts masked and copies without revealing. Never show a secret with [Hex](/docs/components/hex).
+Recovery phrases, private keys, API keys, and access keys grant control of funds. Show them with [SecretValue](../components/secret-value.md), which starts masked and copies without revealing. Never show a secret with [Hex](../components/hex.md).
 
 **Do:** Start masked, and copy without revealing.
 
@@ -676,34 +676,34 @@ Recovery phrases, private keys, API keys, and access keys grant control of funds
 
 ## Related
 
-[Hex](/docs/components/hex)
+[Hex](../components/hex.md)
 
 Use for addresses and hashes.
 
-[CopyButton](/docs/components/copy-button)
+[CopyButton](../components/copy-button.md)
 
 Use for copying values.
 
-[Amount](/docs/components/amount)
+[Amount](../components/amount.md)
 
 Use for formatting amounts.
 
-[TokenLogo](/docs/components/token-logo)
+[TokenLogo](../components/token-logo.md)
 
 Use for token icons.
 
-[Identicon](/docs/components/identicon)
+[Identicon](../components/identicon.md)
 
 Use for address avatars.
 
-[SecretValue](/docs/components/secret-value)
+[SecretValue](../components/secret-value.md)
 
 Use for secrets.
 
-[Payments](/docs/patterns/payments)
+[Payments](payments.md)
 
 Covers send, receive, and deposit flows.
 
-[Tables and Lists](/docs/patterns/tables-and-lists)
+[Tables and Lists](tables-and-lists.md)
 
 Covers columns of values.

package/dist/docs/{patterns → product/patterns}/dashboards.md

@@ -4,7 +4,7 @@ Summarizes system metrics, such as throughput, in tiles, filters, and charts.
 
 ## Overview
 
-A dashboard addresses one question, such as how the latest benchmark run performed. [Tempo Performance](/docs/products/tempo-performance) uses the pattern: a run header, filters for the run and scenario, a row of metric tiles, and sections of charts.
+A dashboard addresses one question, such as how the latest benchmark run performed. [Tempo Performance](../products/tempo-performance.md) uses the pattern: a run header, filters for the run and scenario, a row of metric tiles, and sections of charts.
 
 > [!NOTE]
 > The library has no chart component. The examples are reference layouts with placeholder bars drawn with `style`. Render the plot with your charting library.
@@ -13,11 +13,11 @@ A dashboard addresses one question, such as how the latest benchmark run perform
 
 Build the page in this order, from top to bottom.
 
-* **Header (1):** The page title, the run's date, commit, and duration, and a [Badge](/docs/components/badge) for its type, such as Nightly.
+* **Header (1):** The page title, the run's date, commit, and duration, and a [Badge](../components/badge.md) for its type, such as Nightly.
 * **Filters (2):** One row of labelled controls that apply on change.
-* **Metric Tiles (3):** Four to eight headline numbers in [Surface](/docs/components/surface) tiles, most important first.
-* **Chart Sections (4):** One [Surface](/docs/components/surface) per chart, under section headings such as Throughput.
-* **Detail Tables (5):** A [Table](/docs/components/table) of exact values, such as p50, p95, and p99 timings.
+* **Metric Tiles (3):** Four to eight headline numbers in [Surface](../components/surface.md) tiles, most important first.
+* **Chart Sections (4):** One [Surface](../components/surface.md) per chart, under section headings such as Throughput.
+* **Detail Tables (5):** A [Table](../components/table.md) of exact values, such as p50, p95, and p99 timings.
 
 ```tsx
 import { Badge, Button, ChoiceGroup, Field, Grid, Popover, Select, Skeleton, Stack, style, Surface } from '@tempoxyz/ds'
@@ -325,7 +325,7 @@ namespace styles {
 
 ### Put Definitions in a Popover
 
-A [Tooltip](/docs/components/tooltip) stays closed on touch input, and screen readers do not announce it. Put the definition in a [Popover](/docs/components/popover), and set `openOnHover` on `Popover.Trigger`. Write it in one or two sentences, such as Median settled throughput across 142 measured blocks.
+A [Tooltip](../components/tooltip.md) stays closed on touch input, and screen readers do not announce it. Put the definition in a [Popover](../components/popover.md), and set `openOnHover` on `Popover.Trigger`. Write it in one or two sentences, such as Median settled throughput across 142 measured blocks.
 
 ### Show Change With Text
 
@@ -337,7 +337,7 @@ If a tile compares against a baseline, state the direction and the baseline in t
 * **Long List (Combobox):** One choice from a long, searchable list, such as 60 run IDs.
 * **Few Short Options (ChoiceGroup):** Two to four short options that readers compare often, such as p50, p95, and p99.
 
-**Do:** If a few short options fit, use a [ChoiceGroup](/docs/components/choice-group).
+**Do:** If a few short options fit, use a [ChoiceGroup](../components/choice-group.md).
 
 ```tsx
 /**
@@ -359,7 +359,7 @@ export function Demo() {
 }
 ```
 
-**Don't:** Hide three short options behind a [Select](/docs/components/select).
+**Don't:** Hide three short options behind a [Select](../components/select.md).
 
 ```tsx
 /**
@@ -388,7 +388,7 @@ namespace styles {
 }
 ```
 
-* **Visible labels:** Label every filter. Name a [ChoiceGroup](/docs/components/choice-group) with `aria-labelledby`.
+* **Visible labels:** Label every filter. Name a [ChoiceGroup](../components/choice-group.md) with `aria-labelledby`.
 * **Apply on change:** Do not add an Apply button for single-choice controls.
 * **State in the URL:** Keep filter state in the URL, so a shared link opens the same view.
 * **Scope in titles:** Name the active scope in chart titles, such as Block validation (p95).
@@ -396,8 +396,8 @@ namespace styles {
 
 ## Values and Identifiers
 
-* **Tabular figures:** Set metric values in tabular figures, so digits keep their width on update. [Amount](/docs/components/amount) and `numeric` table cells apply them already.
-* **Monospace identifiers:** Set commits and run IDs in monospace. [Hex](/docs/components/hex) and `mono` table cells apply it already.
+* **Tabular figures:** Set metric values in tabular figures, so digits keep their width on update. [Amount](../components/amount.md) and `numeric` table cells apply them already.
+* **Monospace identifiers:** Set commits and run IDs in monospace. [Hex](../components/hex.md) and `mono` table cells apply it already.
 * **One precision:** Round to the precision readers act on, such as 1.38, not 1.3812. Keep it the same across tiles, charts, and runs.
 * **Larger units:** Switch to a larger unit before values pass four digits, such as 1.38 Ggas.
 
@@ -405,11 +405,11 @@ namespace styles {
 
 Frame every chart the same way, whatever library renders it.
 
-* **Labelled Section (section):** Render each medium [Surface](/docs/components/surface) as a section, labelled by its title.
+* **Labelled Section (section):** Render each medium [Surface](../components/surface.md) as a section, labelled by its title.
 * **Fixed Height (12rem):** Keep the plot area at one height in every state and at every width.
 * **Caption (Units and scope):** Place it below the plot, such as Milliseconds per block, p50.
 * **Legend and Contrast (3:1):** Label series in a legend, and give each color 3:1 contrast. Teal falls short on light surfaces.
-* **Text Alternative (role=img):** Summarize the plot in `aria-label`, such as its range. If readers need the values, add a [Table](/docs/components/table).
+* **Text Alternative (role=img):** Summarize the plot in `aria-label`, such as its range. If readers need the values, add a [Table](../components/table.md).
 
 ```tsx
 import { Alert, ChoiceGroup, Empty, Skeleton, Stack, style, Surface } from '@tempoxyz/ds'
@@ -516,16 +516,16 @@ namespace styles {
 
 ## Grid Reflow
 
-Lay out tiles in a [Grid](/docs/components/grid) with `fit="small"` and charts with `fit="large"`, which keeps each chart at least 20rem wide. Neither needs a media query. On narrow screens, stack charts instead of shrinking them. [Responsive Layout](/docs/patterns/responsive-layout#app-shell-with-content) covers the full-width shell.
+Lay out tiles in a [Grid](../components/grid.md) with `fit="small"` and charts with `fit="large"`, which keeps each chart at least 20rem wide. Neither needs a media query. On narrow screens, stack charts instead of shrinking them. [Responsive Layout](responsive-layout.md#app-shell-with-content) covers the full-width shell.
 
 ## States
 
 * **Empty (Empty):** Inside the plot area, state why and what to try next, such as No blocks in this range.
-* **Error (negative):** Place an [Alert](/docs/components/alert) with a Retry action inside the failed chart. Other charts keep working.
+* **Error (negative):** Place an [Alert](../components/alert.md) with a Retry action inside the failed chart. Other charts keep working.
 * **Partial Data:** Name what is missing, such as Loading validator telemetry, instead of hiding the section.
 * **Updating:** Show when data last changed, such as Updated 30 s ago. Update values in place without layout shift.
 
-**Do:** Show titles at once, and hold the plot height with a [Skeleton](/docs/components/skeleton) while
+**Do:** Show titles at once, and hold the plot height with a [Skeleton](../components/skeleton.md) while
 data loads.
 
 ```tsx
@@ -558,7 +558,7 @@ namespace styles {
 }
 ```
 
-**Don't:** Collapse the chart to a [Spinner](/docs/components/spinner), which shifts every section
+**Don't:** Collapse the chart to a [Spinner](../components/spinner.md), which shifts every section
 below it.
 
 ```tsx
@@ -593,46 +593,46 @@ namespace styles {
 
 * **Description Lists (dl):** Screen readers pair each value with its label, and read the unit with the value.
 * **Info Buttons (About Block time):** Name each by its metric. Give it more room on touch screens.
-* **Announce Once (status):** Announce loading and errors once, through a status region or a [Alert](/docs/components/alert). Do not announce every live update.
+* **Announce Once (status):** Announce loading and errors once, through a status region or a [Alert](../components/alert.md). Do not announce every live update.
 
 ## Related
 
-[Surface](/docs/components/surface)
+[Surface](../components/surface.md)
 
 Use for tiles and chart containers.
 
-[Grid](/docs/components/grid)
+[Grid](../components/grid.md)
 
 Use for reflowing tiles and charts.
 
-[ChoiceGroup](/docs/components/choice-group)
+[ChoiceGroup](../components/choice-group.md)
 
 Use for a few short filter options.
 
-[Select](/docs/components/select)
+[Select](../components/select.md)
 
 Use for filters with a medium list.
 
-[Combobox](/docs/components/combobox)
+[Combobox](../components/combobox.md)
 
 Use for filters with a long list.
 
-[Popover](/docs/components/popover)
+[Popover](../components/popover.md)
 
 Use for metric definitions.
 
-[Skeleton](/docs/components/skeleton)
+[Skeleton](../components/skeleton.md)
 
 Use for loading plots.
 
-[Responsive Layout](/docs/patterns/responsive-layout)
+[Responsive Layout](responsive-layout.md)
 
 Covers the shared breakpoints.
 
-[Tables and Lists](/docs/patterns/tables-and-lists)
+[Tables and Lists](tables-and-lists.md)
 
 Covers exact values.
 
-[Tempo Performance](/docs/products/tempo-performance)
+[Tempo Performance](../products/tempo-performance.md)
 
 Covers the benchmark dashboard.

package/dist/docs/{patterns → product/patterns}/destructive-actions.md

@@ -13,10 +13,10 @@ Add friction in proportion to the risk. Too few safeguards lose data. Too many t
 
 ## Structure
 
-1. **Trigger:** Names the action, such as Delete webhook, after the safe actions or at the end of a [Menu](/docs/components/menu).
+1. **Trigger:** Names the action, such as Delete webhook, after the safe actions or at the end of a [Menu](../components/menu.md).
 2. **Safeguard:** Undo, a confirmation, or a typed confirmation, chosen by risk.
-3. **Confirmation:** An [AlertDialog](/docs/components/alert-dialog) names the object, states the consequence, and repeats the verb on its button.
-4. **Result:** The item disappears, a [Toast](/docs/components/toast) confirms it, and focus moves to the list.
+3. **Confirmation:** An [AlertDialog](../components/alert-dialog.md) names the object, states the consequence, and repeats the verb on its button.
+4. **Result:** The item disappears, a [Toast](../components/toast.md) confirms it, and focus moves to the list.
 
 ```tsx
 import { AlertDialog, Button, ButtonGroup } from '@tempoxyz/ds'
@@ -47,7 +47,7 @@ export function Demo() {
 
 [View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Patterns/DeleteWebhook.tsx)
 
-This reference layout uses [AlertDialog](/docs/components/alert-dialog) and [Button](/docs/components/button). Cancel comes first in the markup, so it takes focus when the dialog opens.
+This reference layout uses [AlertDialog](../components/alert-dialog.md) and [Button](../components/button.md). Cancel comes first in the markup, so it takes focus when the dialog opens.
 
 ## Guidelines
 
@@ -60,13 +60,13 @@ Prefer Undo to confirmation wherever you can build it.
 * **Irreversible (AlertDialog):** Always confirm, and state that the action cannot be undone.
 * **Irreversible and Wide-Reaching (Type to confirm):** Ask the reader to type the object's name or authenticate again.
 
-Actions that move funds, such as a payment or a swap, use the review step as the confirmation (see [Payments](/docs/patterns/payments)). Do not add an [AlertDialog](/docs/components/alert-dialog) after a payment review, since a second prompt trains readers to dismiss prompts.
+Actions that move funds, such as a payment or a swap, use the review step as the confirmation (see [Payments](payments.md)). Do not add an [AlertDialog](../components/alert-dialog.md) after a payment review, since a second prompt trains readers to dismiss prompts.
 
 ### Name the Action and Its Consequence
 
 * **Title (Question):** Name the verb and the object, such as Revoke the Production key?
 * **Description (1 to 2 sentences):** State the consequence, including whether it is reversible. Do not soften it.
-* **Actions (secondary + primary):** Repeat the title's verb on the confirm button, in the [action order](/docs/patterns/forms#order-actions).
+* **Actions (secondary + primary):** Repeat the title's verb on the confirm button, in the [action order](forms.md#order-actions).
 
 **Do:** Name the object and the consequence, and repeat the verb on the button.
 
@@ -488,14 +488,14 @@ namespace styles {
 
 [View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Patterns/RemoveContact.tsx)
 
-Undo in the [Toast](/docs/components/toast) restores the contact in place.
+Undo in the [Toast](../components/toast.md) restores the contact in place.
 
 * **Skip the Confirmation (action):** If an action is easy to reverse, run it at once and offer Undo in a toast.
 * **Keep Another Way Back:** A toast dismisses itself, so keep another way back, such as adding the contact again.
 
 ### Save the Filled Button for the Decision
 
-Give a reversible removal in a list a `tertiary` button, and keep the `primary` button for the confirm step. In a [Menu](/docs/components/menu), give destructive items `intent="negative"` and place them last, after a `Menu.Separator`.
+Give a reversible removal in a list a `tertiary` button, and keep the `primary` button for the confirm step. In a [Menu](../components/menu.md), give destructive items `intent="negative"` and place them last, after a `Menu.Separator`.
 
 **Do:** Use `tertiary` buttons for a reversible removal, and keep `primary` for the confirm step.
 
@@ -559,7 +559,7 @@ namespace styles {
 
 ### Warn Before the Action
 
-If the consequence is not obvious, state it in an [Alert](/docs/components/alert) beside the button. Readers who skim past dialogs still read it.
+If the consequence is not obvious, state it in an [Alert](../components/alert.md) beside the button. Readers who skim past dialogs still read it.
 
 **Do:** State the specific consequence next to the action.
 
@@ -589,7 +589,7 @@ If the consequence is not obvious, state it in an [Alert](/docs/components/alert
 
 * **Loading (loading):** Confirm shows progress, Cancel is disabled, and the dialog stays open until the request ends.
 * **Error:** Keep the dialog open and state the failure in it, so the reader can try again.
-* **Empty:** After the last item goes, the list shows its first use [empty state](/docs/patterns/empty-states).
+* **Empty:** After the last item goes, the list shows its first use [empty state](empty-states.md).
 * **Disabled:** If the reader lacks permission, state who can act instead of a silent disabled button.
 
 ## Accessibility
@@ -601,26 +601,26 @@ If the consequence is not obvious, state it in an [Alert](/docs/components/alert
 
 ## Related
 
-[AlertDialog](/docs/components/alert-dialog)
+[AlertDialog](../components/alert-dialog.md)
 
 Use for confirmations.
 
-[Button](/docs/components/button)
+[Button](../components/button.md)
 
 Use for the confirm and cancel actions.
 
-[Toast](/docs/components/toast)
+[Toast](../components/toast.md)
 
 Use for Undo.
 
-[Menu](/docs/components/menu)
+[Menu](../components/menu.md)
 
 Use for destructive items in a menu.
 
-[Forms](/docs/patterns/forms)
+[Forms](forms.md)
 
 Covers typed input and action order.
 
-[Payments](/docs/patterns/payments)
+[Payments](payments.md)
 
 Covers reviewing transfers.

package/dist/docs/{patterns → product/patterns}/empty-states.md

@@ -4,7 +4,7 @@ Explain why a region has nothing to show, and offer the next step that fills it.
 
 ## Overview
 
-An empty region can mean missing data, a filter with no matches, finished work, or a failed request. Each cause takes different words and actions. [Empty](/docs/components/empty) composes the parts, and every empty state covers three points:
+An empty region can mean missing data, a filter with no matches, finished work, or a failed request. Each cause takes different words and actions. [Empty](../components/empty.md) composes the parts, and every empty state covers three points:
 
 * **What Is This Place? (Empty.Title):** Names the content that would appear.
 * **Why Is It Empty? (Empty.Description):** Explains the cause in one sentence.
@@ -12,7 +12,7 @@ An empty region can mean missing data, a filter with no matches, finished work,
 
 ## Variants
 
-The cause decides the text and the action. These are reference layouts built from [Surface](/docs/components/surface), [Empty](/docs/components/empty), and [Button](/docs/components/button), not shipped components.
+The cause decides the text and the action. These are reference layouts built from [Surface](../components/surface.md), [Empty](../components/empty.md), and [Button](../components/button.md), not shipped components.
 
 ### First Use
 
@@ -382,7 +382,7 @@ namespace styles {
 
 [View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Patterns/EmptyError.tsx)
 
-If the request fails, write Couldn't load followed by the content, and offer Try again. Set `loading` on the [Button](/docs/components/button) while the retry runs.
+If the request fails, write Couldn't load followed by the content, and offer Try again. Set `loading` on the [Button](../components/button.md) while the retry runs.
 
 ## Guidelines
 
@@ -563,19 +563,19 @@ export function Demo() {
 ### Fit the State to the Region
 
 * **Pages and Cards:** Use the full empty state with an icon that hints at the content.
-* **Small Regions:** In a small region, such as a [Popover](/docs/components/popover), use a short line of text and no icon.
-* **Comboboxes (Combobox.Empty):** Render it in a [Combobox](/docs/components/combobox), so an empty result is announced instead of an empty popup.
-* **Keep the Frame:** Keep the heading and filters. In a [Table](/docs/components/table), put the empty state below the header row.
+* **Small Regions:** In a small region, such as a [Popover](../components/popover.md), use a short line of text and no icon.
+* **Comboboxes (Combobox.Empty):** Render it in a [Combobox](../components/combobox.md), so an empty result is announced instead of an empty popup.
+* **Keep the Frame:** Keep the heading and filters. In a [Table](../components/table.md), put the empty state below the header row.
 
 ### Don't Show an Empty State While Loading
 
-* **Load First (Skeleton):** Show a [Skeleton](/docs/components/skeleton) until the request settles. An empty state that flashes first reads as a missing balance.
-* **Then Decide:** After the request settles, choose content, an empty state, or an error (see [Loading](/docs/patterns/loading)).
+* **Load First (Skeleton):** Show a [Skeleton](../components/skeleton.md) until the request settles. An empty state that flashes first reads as a missing balance.
+* **Then Decide:** After the request settles, choose content, an empty state, or an error (see [Loading](loading.md)).
 
 ## States
 
 * **Disabled:** If the reader lacks permission for the action, leave it out and state who can act.
-* **Success (Toast):** The new item replaces the empty state, and a [Toast](/docs/components/toast) confirms it.
+* **Success (Toast):** The new item replaces the empty state, and a [Toast](../components/toast.md) confirms it.
 
 ## Content
 
@@ -591,22 +591,22 @@ export function Demo() {
 
 ## Related
 
-[Empty](/docs/components/empty)
+[Empty](../components/empty.md)
 
 Use for the component parts.
 
-[Combobox](/docs/components/combobox)
+[Combobox](../components/combobox.md)
 
 Use for empty popups.
 
-[Loading](/docs/patterns/loading)
+[Loading](loading.md)
 
 Covers what shows before content.
 
-[Feedback and Status](/docs/patterns/feedback-and-status)
+[Feedback and Status](feedback-and-status.md)
 
 Covers the Couldn't load state.
 
-[Tables and Lists](/docs/patterns/tables-and-lists)
+[Tables and Lists](tables-and-lists.md)
 
 Covers empty tables.