@tempoxyz/ds 0.3.11 → 0.3.13

package/src/oxlint/rules/PreferComponent.ts

@@ -1,11 +1,13 @@
 /** Points native HTML controls and structures at the Web components that replace them. @module */
 import type { ESTree, Rule } from '@oxlint/plugins'
+import * as Docs from '../internal/Docs.ts'
 
 // Each element maps to the component that renders it with Tempo styles, states, and semantics.
 const elements: Record<string, string> = {
   button: 'Button',
   details: 'Accordion',
   dialog: 'Dialog',
+  dl: 'ListGroup',
   fieldset: 'Fieldset',
   hr: 'Separator',
   kbd: 'Kbd',
@@ -35,8 +37,9 @@ const inputs: Record<string, string> = {
 }
 
 /**
- * Reports a native element that a `@tempoxyz/ds` component replaces, such as `<button>` or
- * `<input type="checkbox">`. Elements inside a `render` prop are skipped, since the component that
+ * Reports a native element that a `@tempoxyz/ds` component replaces, such as `<button>`,
+ * `<input type="checkbox">`, or a `<dl>` of labels and values. The message links the docs page of
+ * the component. Elements inside a `render` prop are skipped, since the component that
  * receives them supplies the styles.
  */
 export const rule: Rule = {
@@ -45,7 +48,7 @@ export const rule: Rule = {
       description: 'Prefer `@tempoxyz/ds` components over the native elements they replace.',
     },
     messages: {
-      component: "Use '{{component}}' from '@tempoxyz/ds' instead of <{{element}}>.",
+      component: "Use '{{component}}' from '@tempoxyz/ds' instead of <{{element}}>. See {{url}}",
     },
     schema: [
       {
@@ -95,7 +98,11 @@ export const rule: Rule = {
 
         if (replacement)
           context.report({
-            data: { component: replacement, element: node.name.name },
+            data: {
+              component: replacement,
+              element: node.name.name,
+              url: Docs.component(replacement),
+            },
             messageId: 'component',
             node,
           })

package/src/oxlint/rules/PreferLayout.ts

@@ -0,0 +1,96 @@
+/** Points plain flex and grid wrappers at `Stack`, `Inline`, and `Grid`. @module */
+import type { Rule } from '@oxlint/plugins'
+import * as Docs from '../internal/Docs.ts'
+import * as Styles from '../internal/Styles.ts'
+
+// Block elements that a layout component renders through `render`.
+const tags = new Set([
+  'article',
+  'aside',
+  'div',
+  'footer',
+  'form',
+  'header',
+  'main',
+  'nav',
+  'ol',
+  'section',
+  'ul',
+])
+
+// Declarations that the layout components set. Any other declaration makes the element more than a
+// layout wrapper, so the rule skips it.
+const layout = new Set([
+  'alignItems',
+  'columnGap',
+  'display',
+  'flexDirection',
+  'flexWrap',
+  'gap',
+  'gridTemplateColumns',
+  'justifyContent',
+  'rowGap',
+])
+
+// Equal tracks that `columns` or `fit` on `Grid` produce.
+const tracks = /^repeat\(\s*(?:[1-46]|12|auto-fill|auto-fit)\s*,/
+
+/**
+ * Reports a block element whose only styles lay out its children with flex or grid and a gap.
+ * A column maps to `Stack`, a row to `Inline`, and equal grid tracks to `Grid`. An element
+ * with a `className`, a spread that the rule cannot read, or any other declaration passes.
+ */
+export const rule: Rule = {
+  meta: {
+    docs: {
+      description: 'Use `Stack`, `Inline`, or `Grid` instead of a plain flex or grid wrapper.',
+    },
+    messages: {
+      layout:
+        "Use '{{component}}' from '@tempoxyz/ds' instead of laying out <{{element}}> with {{display}} and a gap. See {{url}}",
+    },
+    schema: [],
+    type: 'suggestion',
+  },
+  create(context) {
+    return Styles.visit((element) => {
+      if (!tags.has(element.tag) || element.open) return
+
+      const declarations = element.declarations
+
+      if (![...declarations.keys()].every((property) => layout.has(property))) return
+      if (!['columnGap', 'gap', 'rowGap'].some((property) => declarations.has(property))) return
+
+      const display = Styles.text(declarations.get('display'))
+      const component = (() => {
+        if (display === 'flex' || display === 'inline-flex') {
+          const direction = declarations.has('flexDirection')
+            ? Styles.text(declarations.get('flexDirection'))
+            : 'row'
+
+          if (direction === 'column') return 'Stack'
+          if (direction === 'row') return 'Inline'
+          return undefined
+        }
+        if (display !== 'grid' && display !== 'inline-grid') return undefined
+        if (!declarations.has('gridTemplateColumns')) return 'Stack'
+
+        const columns = Styles.text(declarations.get('gridTemplateColumns'))
+
+        return columns !== undefined && tracks.test(columns) ? 'Grid' : undefined
+      })()
+
+      if (component)
+        context.report({
+          data: {
+            component,
+            display: display?.replace('inline-', '') ?? '',
+            element: element.tag,
+            url: Docs.component(component),
+          },
+          messageId: 'layout',
+          node: element.node,
+        })
+    })
+  },
+}

package/src/oxlint/rules/PreferProgress.ts

@@ -0,0 +1,49 @@
+/** Points hand-built bars at `Progress` and `ListGroup.Meter`. @module */
+import type { ESTree, Rule } from '@oxlint/plugins'
+import * as Docs from '../internal/Docs.ts'
+import * as Styles from '../internal/Styles.ts'
+
+/**
+ * Reports an empty `div` or `span` whose inline `width` or `inlineSize` is a computed percentage,
+ * such as a template literal that ends in `%`, which draws the fill of a hand-built bar. An element
+ * with children passes, since a resizable pane sets its width the same way.
+ */
+export const rule: Rule = {
+  meta: {
+    docs: { description: 'Use `Progress` or `ListGroup.Meter` instead of a hand-built bar.' },
+    messages: {
+      bar: "Use 'Progress' from '@tempoxyz/ds', or 'ListGroup.Meter' in a ListGroup row, instead of drawing a bar with <{{element}}> and a percentage width. See {{url}}",
+    },
+    schema: [],
+    type: 'suggestion',
+  },
+  create(context) {
+    function percentage(node: ESTree.Node | undefined) {
+      if (node?.type === 'TemplateLiteral')
+        return node.expressions.length > 0 && node.quasis.at(-1)?.value.cooked?.trim() === '%'
+      if (node?.type === 'BinaryExpression')
+        return node.operator === '+' && node.right.type === 'Literal' && node.right.value === '%'
+      return false
+    }
+
+    return Styles.visit((element) => {
+      if (element.tag !== 'div' && element.tag !== 'span') return
+
+      const parent = element.node.parent
+      const empty =
+        parent.type === 'JSXElement' &&
+        parent.children.every((child) => child.type === 'JSXText' && child.value.trim() === '')
+
+      if (!empty) return
+      if (
+        percentage(element.declarations.get('width')) ||
+        percentage(element.declarations.get('inlineSize'))
+      )
+        context.report({
+          data: { element: element.tag, url: Docs.component('Progress') },
+          messageId: 'bar',
+          node: element.node,
+        })
+    })
+  },
+}

package/src/oxlint/rules/PreferSurface.ts

@@ -0,0 +1,70 @@
+/** Points native elements styled as cards at `Surface`. @module */
+import type { Rule } from '@oxlint/plugins'
+import * as Docs from '../internal/Docs.ts'
+import * as Styles from '../internal/Styles.ts'
+
+// Elements that render a card's container. Inline elements and controls draw other components.
+const tags = new Set(['article', 'aside', 'div', 'li', 'section'])
+
+// Values that draw nothing, so the declaration does not make the element a card.
+const empty = /^(?:0(?:\.0+)?(?:px|rem)?|initial|none|transparent|unset)$/
+
+/**
+ * Reports an `article`, `aside`, `div`, `li`, or `section` whose styles draw a card: a corner
+ * radius and padding with a border or a background. A pill radius, such as `full`, and a
+ * positioned element, such as a hand-built popover, pass.
+ */
+export const rule: Rule = {
+  meta: {
+    docs: { description: 'Use `Surface` instead of a native element styled as a card.' },
+    messages: {
+      surface:
+        "Use 'Surface' from '@tempoxyz/ds' instead of styling <{{element}}> as a card. It sets the radius and padding together. See {{url}}",
+    },
+    schema: [],
+    type: 'suggestion',
+  },
+  create(context) {
+    return Styles.visit((element) => {
+      if (!tags.has(element.tag)) return
+
+      const declarations = element.declarations
+
+      function set(property: string) {
+        const node = declarations.get(property)
+
+        if (!node) return false
+
+        const value = Styles.text(node)
+
+        return value === undefined || !empty.test(value)
+      }
+
+      const properties = [...declarations.keys()]
+      const position = Styles.text(declarations.get('position'))
+      const radius = properties.some((property) => {
+        if (!property.endsWith('Radius') || !set(property)) return false
+
+        const value = Styles.text(declarations.get(property))
+
+        return value === undefined || !/^(?:50%|9{3,}(?:px)?|full)$/.test(value)
+      })
+      const padding = properties.some((property) => property.startsWith('padding') && set(property))
+      const border = properties.some(
+        (property) =>
+          /^border(?:Block|Bottom|Inline|Left|Right|Top)?(?:End|Start)?(?:Style|Width)?$/.test(
+            property,
+          ) && set(property),
+      )
+      const background = set('background') || set('backgroundColor')
+
+      if (position === 'absolute' || position === 'fixed' || position === 'sticky') return
+      if (radius && padding && (border || background))
+        context.report({
+          data: { element: element.tag, url: Docs.component('Surface') },
+          messageId: 'surface',
+          node: element.node,
+        })
+    })
+  },
+}

package/src/oxlint/rules/RequireAccessibleName.ts

@@ -13,8 +13,10 @@ const list = new Intl.ListFormat('en', { type: 'disjunction' })
 const web = ['aria-label', 'aria-labelledby']
 const mobile = ['accessibilityLabel', 'accessibilityLabelledBy', 'aria-label', 'aria-labelledby']
 
-// Components from each surface whose rendered output has no text to name it.
+// Components from each surface whose rendered output has no text to name it. Marketing ships no
+// components yet.
 const targets: Record<Imports.Surface, Record<string, Target>> = {
+  marketing: {},
   mobile: { IconButton: { names: mobile } },
   web: {
     Button: { names: web, when: { attribute: 'shape', value: 'icon' } },

package/src/oxlint/rules/RequireScrollRegion.ts

@@ -0,0 +1,92 @@
+/** Requires a name, a role, and a tab stop on native scroll containers. @module */
+import type { ESTree, Rule } from '@oxlint/plugins'
+import * as Docs from '../internal/Docs.ts'
+import * as Styles from '../internal/Styles.ts'
+
+const list = new Intl.ListFormat('en', { type: 'conjunction' })
+
+// Native elements and component names that take focus, so the region's content holds a tab stop.
+const focusable =
+  /^(?:a|button|input|select|summary|textarea|.*(?:Button|Input|Link|Select|Trigger))$/
+
+const overflows = ['overflow', 'overflowBlock', 'overflowInline', 'overflowX', 'overflowY']
+
+/**
+ * Reports a native element that scrolls, through `overflow` set to `auto` or `scroll`, without
+ * `role`, `tabIndex`, and `aria-label` or `aria-labelledby`. Keyboards scroll only a focusable
+ * region, and screen readers announce the region by its name. An element with a spread that the
+ * rule cannot read passes, since the spread can supply the attributes, and so does a container whose
+ * content holds a link, a button, a field, or an element with `tabIndex`.
+ */
+export const rule: Rule = {
+  meta: {
+    docs: { description: 'Name scroll containers and make them focusable.' },
+    messages: {
+      region:
+        'This scrolling <{{element}}> needs {{missing}}, so keyboard and screen reader users can reach and identify it. See {{url}}',
+    },
+    schema: [],
+    type: 'problem',
+  },
+  create(context) {
+    function attribute(node: ESTree.JSXOpeningElement, names: readonly string[]) {
+      return node.attributes.some(
+        (attribute) =>
+          attribute.type === 'JSXAttribute' &&
+          attribute.name.type === 'JSXIdentifier' &&
+          names.includes(attribute.name.name),
+      )
+    }
+
+    // Whether the JSX inside `node` renders an element that takes focus.
+    function interactive(node: ESTree.Node): boolean {
+      if (node.type === 'JSXOpeningElement') {
+        const name = context.sourceCode.getText(node.name).split('.').at(-1) ?? ''
+
+        if (focusable.test(name) || attribute(node, ['href', 'tabIndex'])) return true
+      }
+
+      return (context.sourceCode.visitorKeys[node.type] ?? []).some((field) => {
+        const value: unknown = Reflect.get(node, field)
+
+        return (Array.isArray(value) ? value : [value]).some(
+          (child) => child && typeof child === 'object' && 'type' in child && interactive(child),
+        )
+      })
+    }
+
+    return Styles.visit((element) => {
+      if (element.spread) return
+
+      const scrolls = overflows.some((property) => {
+        const value = Styles.text(element.declarations.get(property))
+
+        return value !== undefined && /\b(?:auto|scroll)\b/.test(value)
+      })
+
+      if (!scrolls) return
+      if (
+        element.node.parent.type === 'JSXElement' &&
+        element.node.parent.children.some(interactive)
+      )
+        return
+
+      const missing = [
+        ...(attribute(element.node, ['role']) ? [] : ['role="region"']),
+        ...(attribute(element.node, ['tabIndex']) ? [] : ['tabIndex={0}']),
+        ...(attribute(element.node, ['aria-label', 'aria-labelledby']) ? [] : ['an aria-label']),
+      ]
+
+      if (missing.length > 0)
+        context.report({
+          data: {
+            element: element.tag,
+            missing: list.format(missing),
+            url: Docs.page('patterns/responsive-layout#scroll-wide-content-inside-its-own-region'),
+          },
+          messageId: 'region',
+          node: element.node,
+        })
+    })
+  },
+}

package/dist/docs/components.md

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