@tempoxyz/ds 0.3.11 → 0.3.13

package/dist/docs/{components → product/components}/asset-chip.md

@@ -8,7 +8,7 @@ Figma: [Elements/Asset Chip](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs
 
 ## Overview
 
-An asset chip renders a small gray label for something a row or value supports, such as the assets a network accepts. Place a [TokenLogo](/docs/components/token-logo) before the text to add a 12px token logo. Give it an `onClick` to pick one asset from a short set.
+An asset chip renders a small gray label for something a row or value supports, such as the assets a network accepts. Place a [TokenLogo](token-logo.md) before the text to add a 12px token logo. Give it an `onClick` to pick one asset from a short set.
 
 ## Examples
 
@@ -43,7 +43,7 @@ namespace styles {
 
 ### Logo
 
-A nested [TokenLogo](/docs/components/token-logo) renders at 12px, whatever its `size`.
+A nested [TokenLogo](token-logo.md) renders at 12px, whatever its `size`.
 
 ```tsx
 import { AssetChip, style, TokenLogo } from '@tempoxyz/ds'
@@ -141,9 +141,9 @@ import { AssetChip, TokenLogo } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Badge](/docs/components/badge) to show a status, such as Pending.
-* Use [Token](/docs/components/token) for a token that a person can change.
-* Use [Button](/docs/components/button) for an action other than picking an asset.
+* Use [Badge](badge.md) to show a status, such as Pending.
+* Use [Token](token.md) for a token that a person can change.
+* Use [Button](button.md) for an action other than picking an asset.
 
 ### List What a Row Supports
 
@@ -194,7 +194,7 @@ namespace styles {
 }
 ```
 
-**Don't:** Use an asset chip to show a status. Use a [Badge](/docs/components/badge).
+**Don't:** Use an asset chip to show a status. Use a [Badge](badge.md).
 
 ```tsx
 /**
@@ -273,22 +273,22 @@ A static chip takes no focus. A chip with an `onClick` is a native button:
 
 ## Related
 
-[TokenLogo](/docs/components/token-logo)
+[TokenLogo](token-logo.md)
 
 Use for token logos.
 
-[Token](/docs/components/token)
+[Token](token.md)
 
 Use for a token that a person can change.
 
-[NetworkLogo](/docs/components/network-logo)
+[NetworkLogo](network-logo.md)
 
 Use for network logos.
 
-[Badge](/docs/components/badge)
+[Badge](badge.md)
 
 Use for statuses.
 
-[ListGroup](/docs/components/list-group)
+[ListGroup](list-group.md)
 
 Use for network and asset lists.

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

@@ -77,13 +77,13 @@ import { Autocomplete } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* If the value must be one of the items, such as the asset to send, use [Combobox](/docs/components/combobox).
-* Use [Select](/docs/components/select) for a short list of fixed options.
-* If there is nothing useful to suggest, use [TextInput](/docs/components/text-input).
+* If the value must be one of the items, such as the asset to send, use [Combobox](combobox.md).
+* Use [Select](select.md) for a short list of fixed options.
+* If there is nothing useful to suggest, use [TextInput](text-input.md).
 
 ### Accept Any Typed Value
 
-Validate the text as you would a plain [TextInput](/docs/components/text-input), such as a 0x prefix on an address, and explain problems in a `Field.Error`.
+Validate the text as you would a plain [TextInput](text-input.md), such as a 0x prefix on an address, and explain problems in a `Field.Error`.
 
 **Do:** Accept a new 0x address that isn't among the suggestions.
 
@@ -231,6 +231,7 @@ const recipients = [
 /** Renders the static preview, which the guideline card shows inert. */
 export function Demo() {
   return (
+    // oxlint-disable-next-line tds/require-scroll-region -- An inert picture of a popup, which never takes focus.
     <div {...styles.popup()}>
       {recipients.map((recipient) => (
         <div key={recipient} {...styles.item()}>
@@ -598,22 +599,22 @@ DOM focus stays on the input while the arrow keys highlight suggestions, so typi
 
 ## Related
 
-[Combobox](/docs/components/combobox)
+[Combobox](combobox.md)
 
 Use for choosing from fixed options.
 
-[TextInput](/docs/components/text-input)
+[TextInput](text-input.md)
 
 Use for text without suggestions.
 
-[Field](/docs/components/field)
+[Field](field.md)
 
 Use for the label and error.
 
-[Select](/docs/components/select)
+[Select](select.md)
 
 Use for short lists.
 
-[Blockchain Values](/docs/patterns/blockchain-values)
+[Blockchain Values](../patterns/blockchain-values.md)
 
 Covers entering and showing addresses.

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

@@ -107,9 +107,9 @@ import { Avatar } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Identicon](/docs/components/identicon) for an account known only by its address.
-* Use [TokenLogo](/docs/components/token-logo) for the icon of a token or asset.
-* Use [IconTile](/docs/components/icon-tile) for the icon above a centered modal title.
+* Use [Identicon](identicon.md) for an account known only by its address.
+* Use [TokenLogo](token-logo.md) for the icon of a token or asset.
+* Use [IconTile](icon-tile.md) for the icon above a centered modal title.
 
 ### Choose Avatar or Identicon
 
@@ -121,7 +121,7 @@ import { Avatar } from '@tempoxyz/ds'
 
 * **People and organizations:** Use initials.
 * **Wallets and apps:** Use an icon.
-* **Accounts known by address:** Use an [Identicon](/docs/components/identicon) with `size="fill"`.
+* **Accounts known by address:** Use an [Identicon](identicon.md) with `size="fill"`.
 
 **Do:** Give every avatar a fallback, such as initials, an icon, or an `Identicon`.
 
@@ -304,18 +304,18 @@ An avatar takes no focus. To open a profile, wrap the avatar and name in one lin
 
 ## Related
 
-[Identicon](/docs/components/identicon)
+[Identicon](identicon.md)
 
 Use for accounts known by address.
 
-[TokenLogo](/docs/components/token-logo)
+[TokenLogo](token-logo.md)
 
 Use for token icons.
 
-[IconTile](/docs/components/icon-tile)
+[IconTile](icon-tile.md)
 
 Use for the icon above a centered modal title.
 
-[ListGroup](/docs/components/list-group)
+[ListGroup](list-group.md)
 
 Use for lists of people and accounts.

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

@@ -166,11 +166,11 @@ import { Badge } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use an [Alert](/docs/components/alert) or [Banner](/docs/components/banner) for a message that needs a sentence.
-* Use a [Button](/docs/components/button) for an action, such as Retry.
-* Use the `status` of a [Table](/docs/components/table) cell to color a status in a table.
-* Use a [ChoiceGroup](/docs/components/choice-group) to switch between two to four views.
-* Use [Kbd](/docs/components/kbd) for keyboard keys.
+* Use an [Alert](alert.md) or [Banner](banner.md) for a message that needs a sentence.
+* Use a [Button](button.md) for an action, such as Retry.
+* Use the `status` of a [Table](table.md) cell to color a status in a table.
+* Use a [ChoiceGroup](choice-group.md) to switch between two to four views.
+* Use [Kbd](kbd.md) for keyboard keys.
 
 ### Choose a Variant by Emphasis
 
@@ -322,18 +322,18 @@ A static badge takes no focus. A badge rendered as a button or link is a native
 
 ## Related
 
-[Table](/docs/components/table)
+[Table](table.md)
 
 Use for status columns.
 
-[Alert](/docs/components/alert)
+[Alert](alert.md)
 
 Use for messages about a section.
 
-[ChoiceGroup](/docs/components/choice-group)
+[ChoiceGroup](choice-group.md)
 
 Use for switching views.
 
-[Feedback and Status](/docs/patterns/feedback-and-status)
+[Feedback and Status](../patterns/feedback-and-status.md)
 
 Covers status conventions.

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

@@ -77,9 +77,9 @@ import { BadgedLogo } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [TokenLogo](/docs/components/token-logo) for a token without a badge.
-* Use [Avatar](/docs/components/avatar) for a person, a contact, or a wallet.
-* Use [IconTile](/docs/components/icon-tile) for one icon above the title of a modal.
+* Use [TokenLogo](token-logo.md) for a token without a badge.
+* Use [Avatar](avatar.md) for a person, a contact, or a wallet.
+* Use [IconTile](icon-tile.md) for one icon above the title of a modal.
 
 ### Put the Logo First and the Badge Last
 
@@ -103,14 +103,14 @@ A badged logo renders `<span>` elements with no role and takes no focus.
 
 ## Related
 
-[TokenLogo](/docs/components/token-logo)
+[TokenLogo](token-logo.md)
 
 Use for a token logo without a badge.
 
-[Avatar](/docs/components/avatar)
+[Avatar](avatar.md)
 
 Use for people, contacts, and wallets.
 
-[IconTile](/docs/components/icon-tile)
+[IconTile](icon-tile.md)
 
 Use for one icon above the title of a modal.

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

@@ -82,10 +82,10 @@ import { Banner } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Alert](/docs/components/alert) for a message about one section, form, or field.
-* Use [Toast](/docs/components/toast) to confirm that an action finished, such as Payment sent.
-* If an action needs a decision before it continues, use [AlertDialog](/docs/components/alert-dialog).
-* Use `Field.Error` from [Field](/docs/components/field) for a validation message on one input.
+* Use [Alert](alert.md) for a message about one section, form, or field.
+* Use [Toast](toast.md) to confirm that an action finished, such as Payment sent.
+* If an action needs a decision before it continues, use [AlertDialog](alert-dialog.md).
+* Use `Field.Error` from [Field](field.md) for a validation message on one input.
 
 ### Choose an Intent by Severity
 
@@ -362,18 +362,18 @@ Renders a plain `div` with no role and no live region. The action and dismiss co
 
 ## Related
 
-[Alert](/docs/components/alert)
+[Alert](alert.md)
 
 Use for a message about one section.
 
-[Toast](/docs/components/toast)
+[Toast](toast.md)
 
 Use for confirming a finished action.
 
-[AlertDialog](/docs/components/alert-dialog)
+[AlertDialog](alert-dialog.md)
 
 Use for a decision 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.

package/dist/docs/{components → product/components}/bar-chart.md

@@ -109,9 +109,9 @@ import { BarChart } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [SplitBar](/docs/components/split-bar) to split one total between two parts.
-* Use [Table](/docs/components/table) when people need to read or compare exact values.
-* Use [Gauge](/docs/components/gauge) for one value against a limit.
+* Use [SplitBar](split-bar.md) to split one total between two parts.
+* Use [Table](table.md) when people need to read or compare exact values.
+* Use [Gauge](gauge.md) for one value against a limit.
 
 ### Keep Each Series in One Color
 
@@ -191,18 +191,18 @@ A bar chart renders a `<div>` with the `figure` role. Its plot takes focus, and
 ### Your Responsibilities
 
 * **Name the Chart (aria-label):** Pass `aria-label`, or `aria-labelledby` pointing at the chart's heading.
-* **Offer the Values (Table):** Offer the same values in a [Table](/docs/components/table) when people need exact values.
+* **Offer the Values (Table):** Offer the same values in a [Table](table.md) when people need exact values.
 
 ## Related
 
-[SplitBar](/docs/components/split-bar)
+[SplitBar](split-bar.md)
 
 Use for one total split between two parts.
 
-[AgentLogo](/docs/components/agent-logo)
+[AgentLogo](agent-logo.md)
 
 Use for the agent of each series.
 
-[Table](/docs/components/table)
+[Table](table.md)
 
 Use for exact values.

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

@@ -68,10 +68,10 @@ import { Breadcrumbs } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [SidebarMenu](/docs/components/sidebar-menu) to move between top-level sections.
-* Use [Stepper](/docs/components/stepper) to show progress through a flow, such as Send payment.
-* Use [Tabs](/docs/components/tabs) to switch between views of the same page.
-* Use `Button.Link` from [Button](/docs/components/button) with `variant="tertiary"` for a single Back link in a two-level product.
+* Use [SidebarMenu](sidebar-menu.md) to move between top-level sections.
+* Use [Stepper](stepper.md) to show progress through a flow, such as Send payment.
+* Use [Tabs](tabs.md) to switch between views of the same page.
+* Use `Button.Link` from [Button](button.md) with `variant="tertiary"` for a single Back link in a two-level product.
 
 ### Reserve Breadcrumbs for Deep Hierarchies
 
@@ -363,18 +363,18 @@ Renders a navigation landmark with an ordered list of links, following the [WAI-
 
 ## Related
 
-[SidebarMenu](/docs/components/sidebar-menu)
+[SidebarMenu](sidebar-menu.md)
 
 Use for top-level navigation.
 
-[AppShell](/docs/components/app-shell)
+[AppShell](app-shell.md)
 
 Use for the page frame that holds the trail.
 
-[Tabs](/docs/components/tabs)
+[Tabs](tabs.md)
 
 Use for switching views within a page.
 
-[Navigation](/docs/patterns/navigation)
+[Navigation](../patterns/navigation.md)
 
 Covers choosing between navigation components.

package/dist/docs/{components → product/components}/button-group.md

@@ -8,7 +8,7 @@ Figma: [Button Group](https://www.figma.com/design/yE96kcymnNR88PJp6G1sPs?node-i
 
 ## Overview
 
-A button group places [Buttons](/docs/components/button) side by side at equal widths, or stacks them at full width.
+A button group places [Buttons](button.md) side by side at equal widths, or stacks them at full width.
 
 ## Examples
 
@@ -83,9 +83,9 @@ import { Button, ButtonGroup } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use a [SplitButton](/docs/components/split-button) for a main action with related alternatives.
-* Use an [Inline](/docs/components/inline) row for actions at their natural width, such as a toolbar.
-* Use a [Menu](/docs/components/menu) for more than three actions.
+* Use a [SplitButton](split-button.md) for a main action with related alternatives.
+* Use an [Inline](inline.md) row for actions at their natural width, such as a toolbar.
+* Use a [Menu](menu.md) for more than three actions.
 
 ### Put the Primary Action Last
 
@@ -265,7 +265,7 @@ namespace styles {
 
 ## Accessibility
 
-`ButtonGroup` renders a `div` with `role="group"` around native buttons. See [Accessibility](/docs/foundations/accessibility) for the baseline.
+`ButtonGroup` renders a `div` with `role="group"` around native buttons. See [Accessibility](../foundations/accessibility.md) for the baseline.
 
 * **Group (group):** Groups the actions. Name it with `aria-label` when the dialog title does not.
 * **Focus Order (Tab):** Follows the source order, which matches the visual order in both orientations.
@@ -273,14 +273,14 @@ namespace styles {
 
 ## Related
 
-[Button](/docs/components/button)
+[Button](button.md)
 
 Use for each action in the group.
 
-[Dialog](/docs/components/dialog)
+[Dialog](dialog.md)
 
 Use for the focused task that the group closes.
 
-[AlertDialog](/docs/components/alert-dialog)
+[AlertDialog](alert-dialog.md)
 
 Use for confirming a destructive action.

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

@@ -270,9 +270,9 @@ import { Button } from '@tempoxyz/ds'
 ### When Not to Use
 
 * Use a text link for navigation inside sentences, lists, and tables.
-* Use [CopyButton](/docs/components/copy-button) to copy a value, and [SplitButton](/docs/components/split-button) for a main action with related alternatives.
-* Use [Tabs](/docs/components/tabs) or [ChoiceGroup](/docs/components/choice-group) to switch views, and [Switch](/docs/components/switch) to turn a setting on or off.
-* If a section has more than three secondary actions, put them in a [Menu](/docs/components/menu) behind an icon button.
+* Use [CopyButton](copy-button.md) to copy a value, and [SplitButton](split-button.md) for a main action with related alternatives.
+* Use [Tabs](tabs.md) or [ChoiceGroup](choice-group.md) to switch views, and [Switch](switch.md) to turn a setting on or off.
+* If a section has more than three secondary actions, put them in a [Menu](menu.md) behind an icon button.
 
 ### Choose a Variant by Emphasis
 
@@ -280,11 +280,11 @@ import { Button } from '@tempoxyz/ds'
 * **Supporting Actions (secondary):** Supporting actions beside a primary action, or actions of equal weight.
 * **Low-Emphasis Actions (tertiary):** Dense areas, such as toolbars, table rows, and inline Cancel actions.
 
-A destructive action takes the variant of its place in the flow, and its label names the outcome, such as Revoke key. Confirm it with an [AlertDialog](/docs/components/alert-dialog), whose confirming button takes `danger`. See [Destructive Actions](/docs/patterns/destructive-actions) and [Payments](/docs/patterns/payments).
+A destructive action takes the variant of its place in the flow, and its label names the outcome, such as Revoke key. Confirm it with an [AlertDialog](alert-dialog.md), whose confirming button takes `danger`. See [Destructive Actions](../patterns/destructive-actions.md) and [Payments](../patterns/payments.md).
 
 ### Use One Primary Action
 
-Give other actions `secondary` or `tertiary`, even if they matter. [Forms](/docs/patterns/forms#submitting) sets the order of the actions.
+Give other actions `secondary` or `tertiary`, even if they matter. [Forms](../patterns/forms.md#submitting) sets the order of the actions.
 
 **Do:** Pair one `primary` action with `secondary` alternatives.
 
@@ -344,7 +344,7 @@ namespace styles {
 * **Default (medium):** Forms, page actions, and actions inside a dialog body, such as Copy address.
 * **Dialog Footers (large):** Every action in a dialog footer, and the final step of a focused flow, such as Confirm send.
 
-Lay out the actions in a dialog footer with a [ButtonGroup](/docs/components/button-group).
+Lay out the actions in a dialog footer with a [ButtonGroup](button-group.md).
 
 ### Show Progress With Loading
 
@@ -364,7 +364,7 @@ export function Demo() {
 }
 ```
 
-**Don't:** Disable the button and place a separate [Spinner](/docs/components/spinner) beside it.
+**Don't:** Disable the button and place a separate [Spinner](spinner.md) beside it.
 
 ```tsx
 /**
@@ -395,7 +395,7 @@ Keep a button enabled when you can, and show validation errors after a press. If
 
 * Explain why in nearby text.
 * Set `focusableWhenDisabled` so keyboard users can reach it.
-* Don't rely on a [Tooltip](/docs/components/tooltip). Many readers can't open it on a disabled button.
+* Don't rely on a [Tooltip](tooltip.md). Many readers can't open it on a disabled button.
 
 **Do:** Explain in nearby text why the button is unavailable.
 
@@ -466,7 +466,7 @@ namespace styles {
 
 ### Use Icons to Reinforce the Label
 
-Place an icon before the label if it aids recognition, such as a plus for Add. An icon-only button (`shape="icon"`) needs a [Tooltip](/docs/components/tooltip) with its `aria-label` text. Use it only for familiar actions, such as Close or Copy.
+Place an icon before the label if it aids recognition, such as a plus for Add. An icon-only button (`shape="icon"`) needs a [Tooltip](tooltip.md) with its `aria-label` text. Use it only for familiar actions, such as Close or Copy.
 
 **Do:** Add an icon only where it aids recognition.
 
@@ -600,7 +600,7 @@ Write Continue to review, not Click here. Screen readers list buttons out of con
 
 ## Accessibility
 
-`Button` renders a native `<button type="button">`, and `Button.Link` a native `<a>`. Both follow the [WAI-ARIA button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/). See [Accessibility](/docs/foundations/accessibility) for the baseline.
+`Button` renders a native `<button type="button">`, and `Button.Link` a native `<a>`. Both follow the [WAI-ARIA button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/). See [Accessibility](../foundations/accessibility.md) for the baseline.
 
 ### Semantics
 
@@ -620,31 +620,31 @@ Write Continue to review, not Click here. Screen readers list buttons out of con
 ### Your Responsibilities
 
 * **Name Icon-Only Buttons (aria-label):** An icon-only button has no visible text. Name the action, such as "Copy address", not "Copy icon".
-* **Announce Loading Results:** Loading announces only the busy state. Announce the outcome with a [Toast](/docs/components/toast) or an [Alert](/docs/components/alert).
+* **Announce Loading Results:** Loading announces only the busy state. Announce the outcome with a [Toast](toast.md) or an [Alert](alert.md).
 * **Use Links for Navigation (Button.Link):** Use it for navigation, not a button with a click handler that changes the page.
 
 ## Related
 
-[ButtonGroup](/docs/components/button-group)
+[ButtonGroup](button-group.md)
 
 Use for the actions at the foot of a dialog.
 
-[SplitButton](/docs/components/split-button)
+[SplitButton](split-button.md)
 
 Use for a main action with alternatives.
 
-[CopyButton](/docs/components/copy-button)
+[CopyButton](copy-button.md)
 
 Use for copying a value.
 
-[AlertDialog](/docs/components/alert-dialog)
+[AlertDialog](alert-dialog.md)
 
 Use for confirming an action.
 
-[Forms](/docs/patterns/forms)
+[Forms](../patterns/forms.md)
 
 Covers placing submit and cancel actions.
 
-[Destructive Actions](/docs/patterns/destructive-actions)
+[Destructive Actions](../patterns/destructive-actions.md)
 
 Covers deleting and revoking.

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

@@ -95,9 +95,9 @@ import { Calendar } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* If the date is one field in a form, use [DatePicker](/docs/components/date-picker). It opens the same calendar in a popup.
-* Use [TextInput](/docs/components/text-input) for dates far from today, such as a date of birth.
-* Use [ChoiceGroup](/docs/components/choice-group) for preset ranges, such as 24H, 7D, and 30D above a chart.
+* If the date is one field in a form, use [DatePicker](date-picker.md). It opens the same calendar in a popup.
+* Use [TextInput](text-input.md) for dates far from today, such as a date of birth.
+* Use [ChoiceGroup](choice-group.md) for preset ranges, such as 24H, 7D, and 30D above a chart.
 
 ### Explain Unavailable Days
 
@@ -211,7 +211,7 @@ export function Demo() {
 
 ### Start on the Month of the Task
 
-`defaultMonth` falls back to the selected day's month, then the current month. Set it to the month of the task, such as the start of a statement period. To sync the page with a typed [TextInput](/docs/components/text-input), control it with `month` and `onMonthChange`.
+`defaultMonth` falls back to the selected day's month, then the current month. Set it to the month of the task, such as the start of a statement period. To sync the page with a typed [TextInput](text-input.md), control it with `month` and `onMonthChange`.
 
 **Do:** Open on the month the task is about.
 
@@ -358,18 +358,18 @@ Turning the page announces the new month in a polite live region.
 
 ## Related
 
-[DatePicker](/docs/components/date-picker)
+[DatePicker](date-picker.md)
 
 Use for a date field in a form.
 
-[TextInput](/docs/components/text-input)
+[TextInput](text-input.md)
 
 Use for typed dates.
 
-[ChoiceGroup](/docs/components/choice-group)
+[ChoiceGroup](choice-group.md)
 
 Use for preset ranges.
 
-[Field](/docs/components/field)
+[Field](field.md)
 
 Use for labelling the date and its constraints.

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

@@ -47,9 +47,9 @@ import { Callout } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use an [Alert](/docs/components/alert) for a message about a status or an outcome.
-* Use a [Banner](/docs/components/banner) for a message about the whole page or product.
-* Use a [Snippet](/docs/components/snippet) for code that people copy.
+* Use an [Alert](alert.md) for a message about a status or an outcome.
+* Use a [Banner](banner.md) for a message about the whole page or product.
+* Use a [Snippet](snippet.md) for code that people copy.
 
 ### Keep the Passage Optional
 
@@ -87,10 +87,10 @@ A callout renders a `<div>` with no role, so screen readers read its text in pla
 
 ## Related
 
-[Alert](/docs/components/alert)
+[Alert](alert.md)
 
 Use for a message about a status or an outcome.
 
-[Banner](/docs/components/banner)
+[Banner](banner.md)
 
 Use for a message about the whole page.

package/dist/docs/{components → product/components}/checkbox-group.md

@@ -6,7 +6,7 @@ Shares one value array across a group of checkboxes.
 
 ## Overview
 
-Each [Checkbox](/docs/components/checkbox) inside it joins the array under its `value`.
+Each [Checkbox](checkbox.md) inside it joins the array under its `value`.
 
 ## Examples
 
@@ -117,11 +117,11 @@ import { CheckboxGroup, Checkbox } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* If only one option can be chosen, use [RadioGroup](/docs/components/radio-group).
-* Use [Combobox](/docs/components/combobox) with `multiple` for a long list filtered by typing, such as assets.
-* If each option needs an icon or a description, use `Choicebox.CheckboxGroup` from [Choicebox](/docs/components/choicebox).
-* Use a single [Checkbox](/docs/components/checkbox) for one independent choice.
-* If choices apply immediately, as in a settings list, use a [Switch](/docs/components/switch) for each.
+* If only one option can be chosen, use [RadioGroup](radio-group.md).
+* Use [Combobox](combobox.md) with `multiple` for a long list filtered by typing, such as assets.
+* If each option needs an icon or a description, use `Choicebox.CheckboxGroup` from [Choicebox](choicebox.md).
+* Use a single [Checkbox](checkbox.md) for one independent choice.
+* If choices apply immediately, as in a settings list, use a [Switch](switch.md) for each.
 
 ### Name the Group With Its Question
 
@@ -259,7 +259,7 @@ namespace styles {
 
 ### Keep the List Short and Ordered
 
-Sort long lists of names alphabetically. If the list no longer fits without scrolling, switch to a [Combobox](/docs/components/combobox) with `multiple`.
+Sort long lists of names alphabetically. If the list no longer fits without scrolling, switch to a [Combobox](combobox.md) with `multiple`.
 
 **Do:** Order options predictably, such as by payment lifecycle.
 
@@ -479,7 +479,7 @@ Wraps related checkboxes in a named `group`. Each checkbox follows the [WAI-ARIA
 ### Semantics
 
 * **Group (group):** Name it with `aria-label` or a `Field.Label`, or screen readers announce an unnamed group.
-* **Checkboxes (checkbox):** Each keeps its own role and state, and adds its `value` to the group. See [Checkbox](/docs/components/checkbox#accessibility).
+* **Checkboxes (checkbox):** Each keeps its own role and state, and adds its `value` to the group. See [Checkbox](checkbox.md#accessibility).
 * **Parent Checkbox (aria-controls):** Points at the checkboxes it controls. Reports a mixed state while only some are checked.
 * **Disabled (aria-disabled):** Disables every checkbox and removes them from the tab order.
 
@@ -500,22 +500,22 @@ Focus stays on a parent checkbox when it changes the other options.
 
 ## Related
 
-[Checkbox](/docs/components/checkbox)
+[Checkbox](checkbox.md)
 
 Use for a single choice.
 
-[Choicebox](/docs/components/choicebox)
+[Choicebox](choicebox.md)
 
 Use for options with descriptions.
 
-[Combobox](/docs/components/combobox)
+[Combobox](combobox.md)
 
 Use for choosing several items from a long list.
 
-[Fieldset](/docs/components/fieldset)
+[Fieldset](fieldset.md)
 
 Use for grouping fields under a legend.
 
-[Field](/docs/components/field)
+[Field](field.md)
 
 Use for naming the group and showing its error.