@tempoxyz/ds 0.3.1 → 0.3.4

package/src/web/components/ListGroup.tsx

@@ -5,7 +5,7 @@ import { useRender } from '@base-ui/react/use-render'
 import type { ComponentPropsWithRef, MouseEvent, ReactNode } from 'react'
 import type * as zyzz from 'zyzz'
 import { ChevronRight } from '../icons/ChevronRight.js'
-import { style, variants, vars } from '../zyzz.config.js'
+import { style, variants } from '../zyzz.config.js'
 import * as RowDisabled from './internal/RowDisabled.js'
 import * as RowsSize from './internal/RowsSize.js'
 
@@ -122,8 +122,8 @@ export namespace ListGroup {
   /**
    * Stacks a `ListGroup.Title` above a `ListGroup.Description`, beside a leading avatar or logo and a
    * trailing control. A row that holds it pads 12px above and below. `large` sets a 16px title 2px
-   * above a monospace description, for the row that introduces a `boxed` group, such as a wallet
-   * above its address. Defaults to `size="medium"`.
+   * above a monospace description, in a row that pads 8px above and below, for the row that
+   * introduces a `boxed` group, such as a wallet above its address. Defaults to `size="medium"`.
    */
   export function Info(props: Info.Props) {
     const { className, size, vars, ...attributes } = props
@@ -262,8 +262,7 @@ export namespace ListGroup {
 
   /**
    * `variant` sets the container. `plain` rows have none and line up with the content around them.
-   * `boxed` rows sit in a bordered block with 16px sides and 8px above and below, and a row's
-   * hover fill reaches the border. `spaced` rows
+   * `boxed` rows sit in a bordered block with 16px sides and 8px above and below. `spaced` rows
    * sit in the same block with 16px all round, 12px apart, with 14px text and no row padding.
    *
    * Rows are 36px with 12px text, which fits a 32px control. `dividers={false}` drops the line
@@ -292,8 +291,8 @@ export namespace ListGroup {
   /**
    * Renders a button when pressable, a `label` around a radio when it has a `value`, or a link or
    * other element through `render`. `ref` and attributes reach that element. Children sit 12px
-   * apart, such as an `Avatar`, a `ListGroup.Info` and a trailing `Button`. A pressable row's hover
-   * fill covers the row, flush with its content. A static row that holds a control, such as a Copy
+   * apart, such as an `Avatar`, a `ListGroup.Info` and a trailing `Button`. A pressable row stays
+   * flush with its content, and its hover fill and focus ring bleed 12px past it at each side. A static row that holds a control, such as a Copy
    * `Button`, takes the same fill on hover and stays static, so the control is the only target.
    * A `Select` in a row hugs its value at the row's end, in the row's type, 32px tall and without a
    * fill of its own.
@@ -391,8 +390,8 @@ export namespace ListGroup {
         /** Content of the row, laid out 12px apart. */
         children?: ReactNode | undefined
         /**
-         * Dims the row to 40% and disables it: a button row sets `disabled`, a radio row disables
-         * its radio and ignores presses, and any other row sets `aria-disabled` and ignores
+         * Dims the row to 40% opacity and disables it: a button row sets `disabled`, a radio row
+         * disables its radio and ignores presses, and any other row sets `aria-disabled` and ignores
          * presses. A static row also disables the native controls inside it, such as a Copy
          * `Button`, and every `Switch` and `Checkbox`, which leave the Tab order and ignore presses
          * and input. Its children receive no presses, and its text stays readable.
@@ -653,6 +652,8 @@ namespace styles {
           '& > [data-divider]:first-child::before': { display: 'none' },
           // A title over a description pads 12px, which fits a 40px leading image.
           '& [data-divider]:has([data-info])': { paddingBlock: '12' },
+          // A large title over a description pads 8px, which fits a 40px leading image in 56px.
+          '& [data-divider]:has([data-info][data-size="large"])': { paddingBlock: '8' },
           // A row with a meter pads 10px, which centers a 24px agent logo in 44px.
           '& [data-divider]:has([role="meter"])': { paddingBlock: '10' },
           // A hovered row's fill would otherwise sit between two visible separators.
@@ -676,48 +677,8 @@ namespace styles {
             borderRadius: 'sm',
             borderStyle: 'solid',
             borderWidth: 'regular',
-            isolation: 'isolate !custom',
             paddingBlock: '8',
             paddingInline: '16',
-            selectors: {
-              // A large title leads the group from the block's own top padding.
-              '& > [data-divider]:first-child:has([data-info][data-size="large"])': {
-                paddingBlockStart: '0',
-              },
-              // A row's fill is a layer behind the row that reaches the border across the block's
-              // 16px sides, and its 8px above the first row and below the last. The row keeps its
-              // place, and the fill rounds inside the border at the block's corners.
-              '& > [data-divider]::after': {
-                backgroundColor: 'transparent !custom',
-                content: '"" !custom',
-                insetBlock: '0',
-                insetInline: '-16',
-                position: 'absolute',
-                transitionDuration: '160',
-                transitionProperty: 'background-color',
-                transitionTimingFunction: 'snappy',
-                zIndex: '-1 !custom',
-              },
-              '& > [data-divider]:first-child::after': {
-                borderStartEndRadius: `calc(${vars.radius.sm} - 1px) !custom`,
-                borderStartStartRadius: `calc(${vars.radius.sm} - 1px) !custom`,
-                insetBlockStart: '-8',
-              },
-              '& > [data-divider]:last-child::after': {
-                borderEndEndRadius: `calc(${vars.radius.sm} - 1px) !custom`,
-                borderEndStartRadius: `calc(${vars.radius.sm} - 1px) !custom`,
-                insetBlockEnd: '-8',
-              },
-              '& > [data-divider]:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled], [data-radio]):hover::after':
-                { backgroundColor: 'container.regular' },
-              '& > [data-divider]:is(a[href], button, [role="button"]):not(:disabled, [data-disabled]):active::after':
-                {
-                  backgroundColor: 'container.strong',
-                },
-            },
-            '@media (prefers-reduced-motion: reduce)': {
-              selectors: { '& > [data-divider]::after': { transitionProperty: 'none' } },
-            },
           },
           plain: {},
           spaced: {
@@ -757,53 +718,57 @@ namespace styles {
         columnGap: '12',
         display: 'flex',
         font: 'inherit !custom',
+        // The row isolates its highlight, which paints below the content and above whatever is
+        // behind the row.
+        isolation: 'isolate !custom',
         minHeight: '36',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0',
         outlineStyle: 'solid !custom',
         outlineWidth: '2',
         paddingBlock: '2',
         paddingInline: '0',
+        position: 'relative',
         textAlign: 'start',
         textDecoration: 'none !custom',
         transitionDuration: '160',
-        transitionProperty: 'background-color, box-shadow, opacity, outline-color, outline-offset',
+        transitionProperty: 'opacity',
         transitionTimingFunction: 'snappy',
         width: '100% !custom',
         selectors: {
-          // The row keeps Figma's List Row geometry, flush with its content, and its fill bleeds
-          // 12px past the content at each side. A shadow on each side draws the bleed: an outer
-          // shadow never paints under the row, so a translucent fill never doubles. A dialog body
-          // scrolls and clips at its 4px padding, so the bleed there is 4px, except in a surface,
-          // whose rows draw none. A boxed group draws the fill behind its rows. A static row that holds an enabled control takes the same fill
-          // on hover, without becoming pressable.
-          '&:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not([data-radio])':
-            { borderRadius: 'xs' },
-          '&:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled], [data-radio], [data-variant="boxed"] > *):hover':
-            {
-              backgroundColor: 'container.regular',
-              boxShadow: `-12px 0 0 0 ${vars.color.container.regular}, 12px 0 0 0 ${vars.color.container.regular} !custom`,
-            },
+          // The row keeps Figma's List Row geometry, flush with its content. Its highlight is a
+          // layer behind the content that bleeds 12px past the content at each side, rounds at
+          // 12px, and draws the hover fill and the focus ring. A dialog body scrolls and clips at
+          // its 4px padding, so the bleed there is 4px, except in a surface. A static row that
+          // holds an enabled control takes the same fill on hover, without becoming pressable.
+          '&[data-divider]::after': {
+            backgroundColor: 'transparent !custom',
+            borderRadius: 'xs',
+            content: '"" !custom',
+            insetBlock: '0',
+            insetInline: '-12',
+            outlineColor: 'transparent !custom',
+            outlineOffset: '-2',
+            outlineStyle: 'solid !custom',
+            outlineWidth: '2',
+            pointerEvents: 'none',
+            position: 'absolute',
+            transitionDuration: '160',
+            transitionProperty: 'background-color, outline-color',
+            transitionTimingFunction: 'snappy',
+            zIndex: '-1 !custom',
+          },
+          '&:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled], [data-radio]):hover::after':
+            { backgroundColor: 'container.regular' },
           '&:is(a[href], button, [role="button"]):not(:disabled, [data-disabled])': {
             cursor: 'pointer',
           },
-          '&:is(a[href], button, [role="button"]):not(:disabled, [data-disabled], [data-variant="boxed"] > *):active':
-            {
-              backgroundColor: 'container.strong',
-              boxShadow: `-12px 0 0 0 ${vars.color.container.strong}, 12px 0 0 0 ${vars.color.container.strong} !custom`,
-            },
-          ':is([data-dialog-body], [data-dialog-body] :not([data-surface-size])) > [data-list-group]:not([data-variant="boxed"]) > &:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled], [data-radio]):hover':
-            {
-              boxShadow: `-4px 0 0 0 ${vars.color.container.regular}, 4px 0 0 0 ${vars.color.container.regular} !custom`,
-            },
-          ':is([data-dialog-body], [data-dialog-body] :not([data-surface-size])) > [data-list-group]:not([data-variant="boxed"]) > &:is(a[href], button, [role="button"]):not(:disabled, [data-disabled]):active':
-            {
-              boxShadow: `-4px 0 0 0 ${vars.color.container.strong}, 4px 0 0 0 ${vars.color.container.strong} !custom`,
-            },
-          '&:is(a[href], button, [role="button"]):focus-visible': {
+          '&:is(a[href], button, [role="button"]):not(:disabled, [data-disabled], [data-radio]):active::after':
+            { backgroundColor: 'container.strong' },
+          '&:is(a[href], button, [role="button"]):not([data-radio]):focus-visible::after': {
             outlineColor: 'border.focus',
-            outlineOffset: '-2',
           },
+          ':is([data-dialog-body], [data-dialog-body] :not([data-surface-size])) > [data-list-group]:not([data-variant="boxed"]) > &[data-divider]::after':
+            { insetInline: '-4' },
           // A radio row is a bordered block whose border thickens when checked and focused, as
           // Figma lays out its stroke, so the row grows by 1px a side for focus.
           '&[data-radio]': {
@@ -833,13 +798,14 @@ namespace styles {
             borderWidth: 'thick',
           },
           '&[data-radio]:active:not(:has(> [data-disabled]))': { scale: 'press' },
+          // The Platform designs dim a disabled row to 40%, as they dim a disabled button, above the
+          // 32% of opacity.disabled.
           '&[data-disabled], &[data-radio]:has(> [data-disabled])': {
             cursor: 'default',
-            opacity: 'disabled',
+            opacity: '0.4 !custom',
           },
         },
         '@media (prefers-reduced-motion: reduce)': {
-          transitionProperty: 'background-color, box-shadow, opacity, outline-color',
           selectors: {
             '&[data-radio]': { transitionProperty: 'background-color, border-color, opacity' },
             '&[data-radio]:active': { scale: 'none !custom' },

package/src/web/components/NativeSelect.tsx

@@ -0,0 +1,167 @@
+import * as BaseUi from '@base-ui/react/field'
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { ChevronDown } from '../icons/ChevronDown.js'
+import { style } from '../zyzz.config.js'
+
+/**
+ * A native `select` styled as a 48px field, with a chevron at its end. It registers as the control
+ * of the enclosing `Field.Root`, which supplies its label, description, error and disabled state.
+ * The browser draws the options in its own picker, so it fits forms that need the platform picker,
+ * such as on touch devices. Base UI has no primitive for a native `select`, so it renders the
+ * element through `Field.Control`.
+ *
+ * - Give it a visible `Field.Label`, or an `aria-label` when none fits.
+ * - Lead with a disabled, empty `option` that names the choice, such as "Select environment", and
+ *   set `defaultValue=""` so it shows until a value is picked.
+ * - Use `Select` instead when the options need icons, groups with styling, or a custom popup.
+ *
+ * @example
+ * <Field.Root>
+ *   <Field.Label>Environment</Field.Label>
+ *   <NativeSelect defaultValue="">
+ *     <option disabled value="">
+ *       Select environment
+ *     </option>
+ *     <option value="production">Production</option>
+ *     <option value="staging">Staging</option>
+ *   </NativeSelect>
+ * </Field.Root>
+ *
+ * @see {@link https://base-ui.com/react/components/field | Base UI Field}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select | MDN select element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html | WCAG 2.2 Labels or Instructions}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html | WCAG 2.2 Error Identification}
+ */
+export function NativeSelect(props: NativeSelect.Props) {
+  const { className, invalid = false, vars, ...attributes } = props
+
+  return (
+    <span {...styles.root()} data-native-select="">
+      {/* Field.Control sets aria-invalid for an invalid Field.Root, which an absent prop keeps. */}
+      <BaseUi.Field.Control
+        render={
+          <select
+            {...(invalid && { 'aria-invalid': true })}
+            {...attributes}
+            {...styles.select({ className, style: props.style, vars })}
+          />
+        }
+      />
+      <ChevronDown {...styles.icon()} />
+    </span>
+  )
+}
+
+export namespace NativeSelect {
+  export type Props = ComponentPropsWithRef<'select'> &
+    zyzz.Props.Variants<typeof styles.select> & {
+      /**
+       * Fills the field red with a 1px red border and sets `aria-invalid`. An invalid
+       * `Field.Root` sets it too.
+       *
+       * @default false
+       */
+      invalid?: boolean | undefined
+    }
+}
+
+namespace styles {
+  // The chevron keeps the primary color, and a disabled field fades it to 40%, as the design does.
+  export const icon = style(
+    {
+      alignSelf: 'center',
+      color: 'content.primary',
+      fontSize: '16',
+      gridArea: '1 / 1 !custom',
+      justifySelf: 'end',
+      marginInlineEnd: '16',
+      pointerEvents: 'none',
+      transitionDuration: '160',
+      transitionProperty: 'opacity !custom',
+      transitionTimingFunction: 'snappy',
+      selectors: { ':has(> select:disabled) > &': { opacity: '0.4 !custom' } },
+    },
+    { id: 'tds/web/native-select/icon' },
+  )
+
+  // The focus border is drawn over the field, so focus never moves the text past its 0.5px line.
+  export const root = style(
+    {
+      borderRadius: 'xs',
+      display: 'grid',
+      position: 'relative',
+      selectors: {
+        '&::after': {
+          borderColor: 'transparent !custom',
+          borderRadius: 'inherit !custom',
+          borderStyle: 'solid !custom',
+          borderWidth: 'regular',
+          boxSizing: 'border-box',
+          content: '"" !custom',
+          cornerShape: 'inherit !custom',
+          inset: '0',
+          pointerEvents: 'none',
+          position: 'absolute',
+          transitionDuration: '160',
+          transitionProperty: 'border-color !custom',
+          transitionTimingFunction: 'snappy',
+        },
+        '&:has(> select:focus-visible)::after': { borderColor: 'border.focus' },
+      },
+    },
+    { id: 'tds/web/native-select' },
+  )
+
+  // The end padding holds the 16px chevron, 8px from the text and 16px from the edge.
+  export const select = style(
+    {
+      appearance: 'none !custom',
+      backgroundColor: 'background.elevated',
+      borderColor: 'line.secondary',
+      borderRadius: 'xs',
+      borderStyle: 'solid',
+      borderWidth: 'thin',
+      boxSizing: 'border-box',
+      color: 'content.primary',
+      cursor: 'pointer',
+      gridArea: '1 / 1 !custom',
+      height: '48',
+      margin: '0',
+      minWidth: '0',
+      // Forced colors paint transparent outlines, so this outline is the focus ring only there.
+      outlineColor: 'transparent !custom',
+      outlineOffset: '2',
+      outlineStyle: 'solid !custom',
+      outlineWidth: '2',
+      paddingBlock: '0',
+      paddingInlineEnd: '40',
+      paddingInlineStart: '16',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, border-color, color, outline-color !custom',
+      transitionTimingFunction: 'snappy',
+      typography: 'body.b2',
+      width: '100% !custom',
+      selectors: {
+        '&:where(:hover:not(:disabled))': { borderColor: 'line.primary' },
+        '&[aria-invalid="true"], [data-invalid] &': {
+          backgroundColor: 'container.negative',
+          borderColor: 'border.negative',
+          borderWidth: 'regular',
+        },
+        // Chromium fades a disabled select to 70%, which the subtle fill replaces.
+        '&:disabled': {
+          backgroundColor: 'container.subtle',
+          color: 'content.tertiary',
+          cursor: 'default',
+          opacity: '1 !custom',
+        },
+      },
+      '@media (forced-colors: active)': {
+        outlineStyle: 'none !custom',
+        selectors: { '&:focus-visible': { outlineStyle: 'solid !custom' } },
+      },
+    },
+    { id: 'tds/web/native-select/select' },
+  )
+}

package/src/web/components/Progress.tsx

@@ -164,17 +164,18 @@ namespace styles {
   )
 
   export const label = style(
-    { color: 'content.primary', flex: '1 !custom', typography: 'body.b3' },
+    { color: 'content.primary', flex: '1 !custom', typography: 'body.b3Strong' },
     { id: 'tds/web/progress/label' },
   )
 
+  // The label row sits 12px above the track.
   export const root = variants(
     {
       base: {
         columnGap: '8',
         display: 'flex',
         flexWrap: 'wrap',
-        rowGap: '8',
+        rowGap: '12',
         width: '100% !custom',
       },
       defaultVariants: { intent: 'neutral' },

package/src/web/components/RadioGroup.tsx

@@ -91,7 +91,7 @@ export namespace RadioGroup {
 namespace styles {
   export const group = variants(
     {
-      base: { display: 'flex', flexDirection: 'column', rowGap: '12' },
+      base: { display: 'flex', flexDirection: 'column', rowGap: '16' },
       defaultVariants: { size: 'medium' },
       variants: {
         // Every item is 16, 20 or 24px with a dot that scales with it. The hit area stays at least 36px.

package/src/web/components/Select.tsx

@@ -351,9 +351,10 @@ namespace styles {
           // a trigger that hugs its content grows 4px wider.
           '&[role="combobox"]:focus-visible': { paddingInline: 'calc(1rem + 2px) !custom' },
           '&[role="combobox"]:focus-visible::before': { borderWidth: 'thick' },
+          // The Platform select dims to 40%, past the 32% of the shared disabled opacity.
           '&[role="combobox"]:is(:disabled, [data-disabled])': {
             color: 'content.primary',
-            opacity: 'disabled',
+            opacity: '0.4 !custom',
           },
         },
       },

package/src/web/components/SidebarMenu.tsx

@@ -448,8 +448,10 @@ namespace styles {
             paddingInline: '10',
           },
           // Base UI triggers mark the row `data-popup-open` while their menu or popover is open.
-          '&:hover:not(:disabled, [data-disabled]), &[data-popup-open]': {
-            backgroundColor: 'container.regular',
+          '&:hover:not(:disabled, [data-disabled])': { backgroundColor: 'container.regular' },
+          // An open row keeps the stronger fill while the pointer rests on it.
+          '&[data-popup-open]:not(:disabled, [data-disabled])': {
+            backgroundColor: 'container.strong',
           },
           '&:is(:disabled, [data-disabled])': { cursor: 'default', opacity: 'disabled' },
         },
@@ -620,10 +622,13 @@ namespace styles {
         active: {
           false: {},
           true: {
-            backgroundColor: 'container.regular',
+            backgroundColor: 'container.strong',
             color: 'content.primary',
             typography: 'body.b2Strong',
-            selectors: { '[data-sidebar-menu-size="large"] &': { typography: 'body.b1Strong' } },
+            selectors: {
+              '&:hover': { backgroundColor: 'container.strong' },
+              '[data-sidebar-menu-size="large"] &': { typography: 'body.b1Strong' },
+            },
           },
         },
       },

package/src/web/components/SplitButton.tsx

@@ -52,6 +52,7 @@ export namespace SplitButton {
     return (
       <splitContext.Provider value={{ size, variant }}>
         <div
+          data-size={size ?? 'medium'}
           data-variant={variant ?? 'primary'}
           role="group"
           {...attributes}
@@ -63,10 +64,11 @@ export namespace SplitButton {
 
   export namespace Root {
     export type Props = ComponentPropsWithRef<'div'> &
-      zyzz.Props.Variants<typeof styles.root> &
-      Pick<Button.Props, 'variant'> & {
+      zyzz.Props.Variants<typeof styles.root> & {
         /** Size of both buttons. The 24px `xsmall` pill can't join a trigger, so it is left out. */
         size?: Exclude<Button.Props['size'], 'xsmall'> | undefined
+        /** Style of both buttons. The `text` style has no fill to join a trigger, so it is left out. */
+        variant?: Exclude<Button.Props['variant'], 'text'> | undefined
       }
   }
 
@@ -107,11 +109,16 @@ namespace styles {
         // and squircle rather than the circle of an icon button.
         '& > [aria-haspopup]': {
           borderBottomLeftRadius: 'none',
-          borderBottomRightRadius: 'xs',
+          borderBottomRightRadius: 'sm',
           borderTopLeftRadius: 'none',
-          borderTopRightRadius: 'xs',
+          borderTopRightRadius: 'sm',
           cornerShape: 'squircle',
         },
+        // A small action rounds at xs, so its trigger does too.
+        '&[data-size="small"] > [aria-haspopup]': {
+          borderBottomRightRadius: 'xs',
+          borderTopRightRadius: 'xs',
+        },
         '& > [aria-haspopup] > svg': {
           transitionDuration: '240',
           transitionProperty: 'transform',

package/src/web/components/StatusIndicator.tsx

@@ -0,0 +1,94 @@
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { style, variants } from '../zyzz.config.js'
+
+/**
+ * A label led by an 8px dot in the color of its `intent`, rendered as a `span` without a fill. It
+ * sets no live region, so a status that changes in place needs one around it.
+ *
+ * - Keep the label to one or two words that name the status, such as Online or Degraded.
+ * - Pick the `intent` from the outcome: `positive` for healthy or live, `warning` for degraded,
+ *   `negative` for down or failed, and `neutral` for idle or unknown.
+ * - Use `StatusChip` where the status needs a filled pill, such as in a table row.
+ *
+ * @example
+ * <StatusIndicator intent="positive">Operational</StatusIndicator>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span | MDN span element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html | WCAG 2.2 Use of Color}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html | WCAG 2.2 Status Messages}
+ */
+export function StatusIndicator(props: StatusIndicator.Props) {
+  const { children, className, intent, vars, ...attributes } = props
+
+  return (
+    <span
+      {...attributes}
+      data-intent={intent ?? 'neutral'}
+      {...styles.indicator({ className, intent, style: props.style, vars })}
+    >
+      {/* The label names the status, so the dot is decorative. */}
+      <span aria-hidden="true" data-status-indicator-dot="" {...styles.dot()} />
+      {children}
+    </span>
+  )
+}
+
+export namespace StatusIndicator {
+  export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.indicator>
+}
+
+namespace styles {
+  export const dot = style(
+    {
+      borderRadius: 'full',
+      cornerShape: 'round',
+      flexShrink: '0 !custom',
+      height: '8',
+      width: '8',
+    },
+    { id: 'tds/web/status-indicator/dot' },
+  )
+
+  // The label stays secondary at every intent, and the dot takes the intent color.
+  export const indicator = variants(
+    {
+      base: {
+        alignItems: 'center',
+        color: 'content.secondary',
+        columnGap: '8',
+        display: 'inline-flex',
+        height: '24',
+        typography: 'body.b3',
+        verticalAlign: 'middle',
+        whiteSpace: 'nowrap',
+      },
+      defaultVariants: { intent: 'neutral' },
+      variants: {
+        intent: {
+          negative: {
+            selectors: {
+              '& > [data-status-indicator-dot]': { backgroundColor: 'content.negative' },
+            },
+          },
+          neutral: {
+            selectors: {
+              '& > [data-status-indicator-dot]': { backgroundColor: 'content.secondary' },
+            },
+          },
+          positive: {
+            selectors: {
+              '& > [data-status-indicator-dot]': { backgroundColor: 'content.positive' },
+            },
+          },
+          warning: {
+            selectors: {
+              '& > [data-status-indicator-dot]': { backgroundColor: 'content.warning' },
+            },
+          },
+        },
+      },
+    },
+    { id: 'tds/web/status-indicator' },
+  )
+}