@tempoxyz/ds 0.3.11 → 0.3.13

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

@@ -206,16 +206,16 @@ import { Field } from '@tempoxyz/ds'
 
 ### When to Use
 
-* Label an input control, such as [TextInput](/docs/components/text-input), [AmountInput](/docs/components/amount-input), [Textarea](/docs/components/textarea), [Select](/docs/components/select), or [Combobox](/docs/components/combobox).
+* Label an input control, such as [TextInput](text-input.md), [AmountInput](amount-input.md), [Textarea](textarea.md), [Select](select.md), or [Combobox](combobox.md).
 * Attach a hint or an error to that control.
-* Put a [Checkbox](/docs/components/checkbox) or radio on one row with its label through `Field.Item`.
-* Label a [Switch](/docs/components/switch) above it, with its description below.
+* Put a [Checkbox](checkbox.md) or radio on one row with its label through `Field.Item`.
+* Label a [Switch](switch.md) above it, with its description below.
 
 ### When Not to Use
 
-* Use [Fieldset](/docs/components/fieldset) to name a group of related fields, such as a billing address.
-* Use [ListGroup](/docs/components/list-group) for read-only details.
-* Use an [Alert](/docs/components/alert) above the form to summarize a failed submission.
+* Use [Fieldset](fieldset.md) to name a group of related fields, such as a billing address.
+* Use [ListGroup](list-group.md) for read-only details.
+* Use an [Alert](alert.md) above the form to summarize a failed submission.
 
 ### Give Every Control a Visible Label
 
@@ -392,7 +392,7 @@ namespace styles {
 
 ### Validate When the Value Is Complete
 
-`Field.Root` validates on submit, then on each change after a failed submit. For format checks, such as a URL, set `validationMode="onBlur"`. Pass `validate` for custom rules. If another library owns validation, set `invalid`. See [Errors and Validation](/docs/patterns/errors-and-validation).
+`Field.Root` validates on submit, then on each change after a failed submit. For format checks, such as a URL, set `validationMode="onBlur"`. Pass `validate` for custom rules. If another library owns validation, set `invalid`. See [Errors and Validation](../patterns/errors-and-validation.md).
 
 **Do:** Leave a partial value unmarked until focus leaves the field.
 
@@ -527,7 +527,7 @@ namespace styles {
 
 ## Accessibility
 
-A field connects a control to its label, description, and error. See [Accessibility](/docs/foundations/accessibility) for the baseline.
+A field connects a control to its label, description, and error. See [Accessibility](../foundations/accessibility.md) for the baseline.
 
 ### Semantics
 
@@ -545,26 +545,26 @@ A field connects a control to its label, description, and error. See [Accessibil
 * **Focus the First Error:** The error is not a live region. If a submit fails, focus the first invalid field.
 * **Confirm Success in Text (success):** The `success` check sets no ARIA state and isn't announced. Confirm a verified value in text.
 * **State Requirements:** State requirements and formats in text, such as "(required)" in the label, not only with a symbol.
-* **Label a Date Picker Trigger (aria-labelledby):** `Field.Label` doesn't name a [DatePicker](/docs/components/date-picker) trigger. Point `aria-labelledby` at a visible label.
+* **Label a Date Picker Trigger (aria-labelledby):** `Field.Label` doesn't name a [DatePicker](date-picker.md) trigger. Point `aria-labelledby` at a visible label.
 
 ## Related
 
-[TextInput](/docs/components/text-input)
+[TextInput](text-input.md)
 
 Use for single-line text.
 
-[Fieldset](/docs/components/fieldset)
+[Fieldset](fieldset.md)
 
 Use for grouping fields under a legend.
 
-[Textarea](/docs/components/textarea)
+[Textarea](textarea.md)
 
 Use for multi-line text.
 
-[Forms](/docs/patterns/forms)
+[Forms](../patterns/forms.md)
 
 Covers laying out and submitting forms.
 
-[Errors and Validation](/docs/patterns/errors-and-validation)
+[Errors and Validation](../patterns/errors-and-validation.md)
 
 Covers when and how to show errors.

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

@@ -99,9 +99,9 @@ import { Field, Fieldset } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Field](/docs/components/field) alone for a single control. A fieldset around one field repeats its label.
+* Use [Field](field.md) alone for a single control. A fieldset around one field repeats its label.
 * Use a heading for a page section with no form controls.
-* Use [Stepper](/docs/components/stepper) to split a long form into steps, not many fieldsets on one screen.
+* Use [Stepper](stepper.md) to split a long form into steps, not many fieldsets on one screen.
 
 ### Write the Legend as the Group's Topic
 
@@ -381,18 +381,18 @@ A fieldset renders a native `<fieldset>` named by its legend. Screen readers rea
 
 ## Related
 
-[Field](/docs/components/field)
+[Field](field.md)
 
 Use for labelling a single control.
 
-[RadioGroup](/docs/components/radio-group)
+[RadioGroup](radio-group.md)
 
 Use for one choice from a group.
 
-[CheckboxGroup](/docs/components/checkbox-group)
+[CheckboxGroup](checkbox-group.md)
 
 Use for several choices from a group.
 
-[Forms](/docs/patterns/forms)
+[Forms](../patterns/forms.md)
 
 Covers laying out groups of fields.

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

@@ -6,7 +6,7 @@ Lays out a header, body, and footer in a column.
 
 ## Overview
 
-A frame lays out a header, body, and footer in a column with no fill. Wrap it in a [Surface](/docs/components/surface) for a card, or put it in a [Dialog](/docs/components/dialog) or [Drawer](/docs/components/drawer) popup.
+A frame lays out a header, body, and footer in a column with no fill. Wrap it in a [Surface](surface.md) for a card, or put it in a [Dialog](dialog.md) or [Drawer](drawer.md) popup.
 
 The actions share the width of the footer equally.
 
@@ -151,13 +151,13 @@ import { Frame } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Surface](/docs/components/surface) with `Surface.Header` and `Surface.Title` for a card with only a heading and content.
-* Use [AppShell](/docs/components/app-shell) for the frame of a whole page.
-* Use [Stack](/docs/components/stack) for a plain column without a header or footer.
+* Use [Surface](surface.md) with `Surface.Header` and `Surface.Title` for a card with only a heading and content.
+* Use [AppShell](app-shell.md) for the frame of a whole page.
+* Use [Stack](stack.md) for a plain column without a header or footer.
 
 ### Put Actions in the Footer
 
-Put `Frame.Actions` inside `Frame.Footer`, in the [Button](/docs/components/button) order. `Frame.Body` grows to fill the frame, so the footer stays at the bottom of a tall container, such as a dialog popup. The body never scrolls, so let the container handle overflow.
+Put `Frame.Actions` inside `Frame.Footer`, in the [Button](button.md) order. `Frame.Body` grows to fill the frame, so the footer stays at the bottom of a tall container, such as a dialog popup. The body never scrolls, so let the container handle overflow.
 
 **Do:** Keep the actions in `Frame.Footer`, at the bottom of the frame.
 
@@ -417,18 +417,18 @@ A frame adds headings and an optional close button. It doesn't move or trap focu
 
 ## Related
 
-[Surface](/docs/components/surface)
+[Surface](surface.md)
 
 Use for the card around a frame.
 
-[Dialog](/docs/components/dialog)
+[Dialog](dialog.md)
 
 Use for frames that open over the page.
 
-[Drawer](/docs/components/drawer)
+[Drawer](drawer.md)
 
 Use for side panels.
 
-[Button](/docs/components/button)
+[Button](button.md)
 
 Use for ordering actions.

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

@@ -113,9 +113,9 @@ import { Gauge } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Progress](/docs/components/progress) for a task that advances, such as an upload.
-* Use [Skeleton](/docs/components/skeleton) or [Spinner](/docs/components/spinner) while the measurement loads.
-* Use [Slider](/docs/components/slider) when the user sets the value.
+* Use [Progress](progress.md) for a task that advances, such as an upload.
+* Use [Skeleton](skeleton.md) or [Spinner](spinner.md) while the measurement loads.
+* Use [Slider](slider.md) when the user sets the value.
 * Use plain text if the value has no fixed maximum, such as 4,812 TPS.
 
 ### Show the Value in Text
@@ -254,7 +254,7 @@ namespace styles {
 
 * **Most Measurements (neutral):** The default, for a measurement such as API requests against a quota.
 * **Full Is Good (positive):** A measurement where a full value is good, such as 100% uptime.
-* **Nearing a Limit (Alert):** There is no `warning` intent. Add a `warning` [Alert](/docs/components/alert) with the next step.
+* **Nearing a Limit (Alert):** There is no `warning` intent. Add a `warning` [Alert](alert.md) with the next step.
 
 ### Match Size to Context
 
@@ -286,14 +286,14 @@ A gauge renders a `meter`. It follows the [WAI-ARIA Authoring Practices meter pa
 
 ## Related
 
-[Progress](/docs/components/progress)
+[Progress](progress.md)
 
 Use for a task that advances.
 
-[Alert](/docs/components/alert)
+[Alert](alert.md)
 
 Use for a warning when usage nears a limit.
 
-[Dashboards](/docs/patterns/dashboards)
+[Dashboards](../patterns/dashboards.md)
 
 Covers laying out metric tiles.

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

@@ -78,8 +78,8 @@ import { GetStartedVisual } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Visual](/docs/components/visual) for the top of a modal.
-* Use [IconTile](/docs/components/icon-tile) for a step that needs only an icon.
+* Use [Visual](visual.md) for the top of a modal.
+* Use [IconTile](icon-tile.md) for a step that needs only an icon.
 
 ### Match the Artwork to the Step
 
@@ -108,10 +108,10 @@ The visual renders a `<div>` with no role and takes no focus. Screen readers ski
 
 ## Related
 
-[Visual](/docs/components/visual)
+[Visual](visual.md)
 
 Use for the illustration at the top of a modal.
 
-[HeroVisual](/docs/components/hero-visual)
+[HeroVisual](hero-visual.md)
 
 Use for the hero card beside a setup flow.

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

@@ -139,8 +139,8 @@ import { Grid } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Table](/docs/components/table) for records to compare across columns, such as transactions.
-* Use [Stack](/docs/components/stack) for one column, and [Inline](/docs/components/inline) for one row.
+* Use [Table](table.md) for records to compare across columns, such as transactions.
+* Use [Stack](stack.md) for one column, and [Inline](inline.md) for one row.
 
 ### Prefer Fit Over Fixed Columns
 
@@ -245,7 +245,7 @@ namespace styles {
 
 ### Change Columns at Breakpoints
 
-If a layout needs a set count per width, change `gridTemplateColumns` under a [breakpoint](/docs/foundations/layout#breakpoints) key. Write the narrowest layout as the base style.
+If a layout needs a set count per width, change `gridTemplateColumns` under a [breakpoint](../foundations/layout.md#breakpoints) key. Write the narrowest layout as the base style.
 
 * **Base (0 to 767px):** One column on phones, with no media key.
 * **Tablet ('@media 768'):** More columns from 48rem.
@@ -271,18 +271,18 @@ Grid has no role, name, or keyboard behavior.
 
 ## Related
 
-[Surface](/docs/components/surface)
+[Surface](surface.md)
 
 Use for the cards inside a grid.
 
-[Table](/docs/components/table)
+[Table](table.md)
 
 Use for comparing records.
 
-[Dashboards](/docs/patterns/dashboards)
+[Dashboards](../patterns/dashboards.md)
 
 Covers metric tile layouts.
 
-[Responsive Layout](/docs/patterns/responsive-layout)
+[Responsive Layout](../patterns/responsive-layout.md)
 
 Covers adapting pages across breakpoints.

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

@@ -101,8 +101,8 @@ import { HeroVisual } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [SuccessHero](/docs/components/success-hero) once the flow finishes.
-* Use [GetStartedVisual](/docs/components/get-started-visual) for the cards of a get started list.
+* Use [SuccessHero](success-hero.md) once the flow finishes.
+* Use [GetStartedVisual](get-started-visual.md) for the cards of a get started list.
 
 ### Advance the Step With the Flow
 
@@ -146,10 +146,10 @@ The card renders a `<div>` with no role. Screen readers skip the artwork and the
 
 ## Related
 
-[SuccessHero](/docs/components/success-hero)
+[SuccessHero](success-hero.md)
 
 Use for the confirmation after the flow finishes.
 
-[Stepper](/docs/components/stepper)
+[Stepper](stepper.md)
 
 Use for the steps beside the card.

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

@@ -195,9 +195,9 @@ import { Hex } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [SecretValue](/docs/components/secret-value) for private keys and other secrets. Hex shows its value in the clear.
-* Use [Snippet](/docs/components/snippet) for URLs, commands, and other values that aren't hex.
-* Use [CopyButton](/docs/components/copy-button) alone when the value isn't displayed.
+* Use [SecretValue](secret-value.md) for private keys and other secrets. Hex shows its value in the clear.
+* Use [Snippet](snippet.md) for URLs, commands, and other values that aren't hex.
+* Use [CopyButton](copy-button.md) alone when the value isn't displayed.
 
 ### Always Offer Copy
 
@@ -245,7 +245,7 @@ export function Demo() {
 
 ### Truncate in the Middle
 
-People check an address by its first and last characters. For plain strings, such as a [Toast](/docs/components/toast) message, `formatHex` keeps both ends too.
+People check an address by its first and last characters. For plain strings, such as a [Toast](toast.md) message, `formatHex` keeps both ends too.
 
 **Do:** Keep both ends of the value visible.
 
@@ -466,22 +466,22 @@ Hex renders a `<span>` with the truncated value on screen and the full value for
 
 ## Related
 
-[CopyButton](/docs/components/copy-button)
+[CopyButton](copy-button.md)
 
 Use for copying without a visible value.
 
-[Identicon](/docs/components/identicon)
+[Identicon](identicon.md)
 
 Use for an image beside an address.
 
-[SecretValue](/docs/components/secret-value)
+[SecretValue](secret-value.md)
 
 Use for secrets.
 
-[Snippet](/docs/components/snippet)
+[Snippet](snippet.md)
 
 Use for commands and URLs.
 
-[Blockchain Values](/docs/patterns/blockchain-values)
+[Blockchain Values](../patterns/blockchain-values.md)
 
 Covers addresses, hashes, and amounts.

package/dist/docs/{components → product/components}/icon-tile.md

@@ -81,10 +81,10 @@ import { IconTile } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Avatar](/docs/components/avatar) with an icon to lead a list row, such as a wallet or app.
-* Use [Button](/docs/components/button) with `shape="icon"` for an icon that does something. The chip isn't interactive.
-* Use [Badge](/docs/components/badge) to show a status.
-* Use [Visual](/docs/components/visual) for an illustrated onboarding or feature modal. Never pair the two.
+* Use [Avatar](avatar.md) with an icon to lead a list row, such as a wallet or app.
+* Use [Button](button.md) with `shape="icon"` for an icon that does something. The chip isn't interactive.
+* Use [Badge](badge.md) to show a status.
+* Use [Visual](visual.md) for an illustrated onboarding or feature modal. Never pair the two.
 
 ### Pair the Chip With a Title
 
@@ -275,18 +275,18 @@ An icon tile renders a `<span>` with no role and takes no focus. The icon inside
 
 ## Related
 
-[Avatar](/docs/components/avatar)
+[Avatar](avatar.md)
 
 Use for people, contacts, and wallets in list rows.
 
-[Button](/docs/components/button)
+[Button](button.md)
 
 Use for icon actions.
 
-[Visual](/docs/components/visual)
+[Visual](visual.md)
 
 Use for illustrated onboarding and feature modals.
 
-[Iconography](/docs/foundations/iconography)
+[Iconography](../foundations/iconography.md)
 
 Covers choosing icons.

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

@@ -100,9 +100,9 @@ import { Identicon } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Avatar](/docs/components/avatar) for people and organizations with a name.
-* Use [TokenLogo](/docs/components/token-logo) for a token contract, which has its own icon.
-* Use [Hex](/docs/components/hex) to read, compare, or copy the address.
+* Use [Avatar](avatar.md) for people and organizations with a name.
+* Use [TokenLogo](token-logo.md) for a token contract, which has its own icon.
+* Use [Hex](hex.md) to read, compare, or copy the address.
 
 ### Always Show the Address Beside It
 
@@ -354,18 +354,18 @@ An identicon renders an `<svg>` with the `img` role. It takes no focus.
 
 ## Related
 
-[Avatar](/docs/components/avatar)
+[Avatar](avatar.md)
 
 Use for people and organizations.
 
-[Hex](/docs/components/hex)
+[Hex](hex.md)
 
 Use for showing and copying addresses.
 
-[TokenLogo](/docs/components/token-logo)
+[TokenLogo](token-logo.md)
 
 Use for token icons.
 
-[Blockchain Values](/docs/patterns/blockchain-values)
+[Blockchain Values](../patterns/blockchain-values.md)
 
 Covers displaying addresses.

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

@@ -127,9 +127,9 @@ import { Inline } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Stack](/docs/components/stack) for a vertical column.
-* Use [Grid](/docs/components/grid) to align items in rows and columns.
-* Use `Frame.Actions` of [Frame](/docs/components/frame) for the actions at the bottom of a card or dialog.
+* Use [Stack](stack.md) for a vertical column.
+* Use [Grid](grid.md) to align items in rows and columns.
+* Use `Frame.Actions` of [Frame](frame.md) for the actions at the bottom of a card or dialog.
 
 ### Set Wrap When Content Varies
 
@@ -216,18 +216,18 @@ Inline has no role, name, or keyboard behavior.
 
 ## Related
 
-[Stack](/docs/components/stack)
+[Stack](stack.md)
 
 Use for vertical spacing.
 
-[Button](/docs/components/button)
+[Button](button.md)
 
 Use for ordering actions in a row.
 
-[Badge](/docs/components/badge)
+[Badge](badge.md)
 
 Use for status labels.
 
-[Layout](/docs/foundations/layout)
+[Layout](../foundations/layout.md)
 
 Covers the spacing scale.

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

@@ -100,13 +100,13 @@ import { Inset } from '@tempoxyz/ds'
 
 ### When Not to Use
 
-* Use [Surface](/docs/components/surface) for a card. Its `size` sets padding and corner radius.
-* Use [Container](/docs/components/container) for page gutters that grow with the viewport.
-* Use the `gap` of [Stack](/docs/components/stack), [Inline](/docs/components/inline), or [Grid](/docs/components/grid) for space between siblings.
+* Use [Surface](surface.md) for a card. Its `size` sets padding and corner radius.
+* Use [Container](container.md) for page gutters that grow with the viewport.
+* Use the `gap` of [Stack](stack.md), [Inline](inline.md), or [Grid](grid.md) for space between siblings.
 
 ### Don't Double the Padding
 
-[Surface](/docs/components/surface), [Dialog](/docs/components/dialog), and `AppShell.Main` of [AppShell](/docs/components/app-shell) already pad their content.
+[Surface](surface.md), [Dialog](dialog.md), and `AppShell.Main` of [AppShell](app-shell.md) already pad their content.
 
 **Do:** Place content directly in a Surface, so it lines up with the cards beside it.
 
@@ -192,7 +192,7 @@ namespace styles {
 
 ### Match Surface Padding
 
-Use `16` or `24` for most regions, so they line up with a `medium` or `large` [Surface](/docs/components/surface).
+Use `16` or `24` for most regions, so they line up with a `medium` or `large` [Surface](surface.md).
 
 * **Medium (16):** Matches a `medium` Surface, such as a dashboard tile.
 * **Large (24):** Matches a `large` Surface, such as a page card.
@@ -212,14 +212,14 @@ Keep large inline padding off narrow viewports, so content [reflows](https://www
 
 ## Related
 
-[Surface](/docs/components/surface)
+[Surface](surface.md)
 
 Use for padded cards.
 
-[Stack](/docs/components/stack)
+[Stack](stack.md)
 
 Use for space between siblings.
 
-[Layout](/docs/foundations/layout)
+[Layout](../foundations/layout.md)
 
 Covers the spacing scale.

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

@@ -138,14 +138,14 @@ import { Kbd } from '@tempoxyz/ds'
 
 ### When to Use
 
-* Show the shortcut beside its action, such as in a [Menu](/docs/components/menu) item, a [Tooltip](/docs/components/tooltip), or a search field hint.
+* Show the shortcut beside its action, such as in a [Menu](menu.md) item, a [Tooltip](tooltip.md), or a search field hint.
 * Name keys in instructions, such as Press Esc to close.
 
 ### When Not to Use
 
-* Use [Snippet](/docs/components/snippet) for terminal commands.
-* Use [Badge](/docs/components/badge) for a status or attribute.
-* Use a visible [Button](/docs/components/button) to run an action. A shortcut only makes it faster.
+* Use [Snippet](snippet.md) for terminal commands.
+* Use [Badge](badge.md) for a status or attribute.
+* Use a visible [Button](button.md) to run an action. A shortcut only makes it faster.
 
 ### Use Modifier Props
 
@@ -406,18 +406,18 @@ Kbd renders a native `<kbd>` element and is not interactive.
 
 ## Related
 
-[Menu](/docs/components/menu)
+[Menu](menu.md)
 
 Use for actions with shortcuts.
 
-[Tooltip](/docs/components/tooltip)
+[Tooltip](tooltip.md)
 
 Use for labelling icon buttons.
 
-[Snippet](/docs/components/snippet)
+[Snippet](snippet.md)
 
 Use for terminal commands.
 
-[Badge](/docs/components/badge)
+[Badge](badge.md)
 
 Use for statuses and attributes.