@tempoxyz/ds 0.0.5 → 0.0.7

package/src/platform/README.md

@@ -1,6 +1,6 @@
 # Platform
 
-Use `@tempoxyz/ds/platform` with `@tempoxyz/ds/platform.css` for product interfaces. Implemented exports have Figma mappings, independent style contracts, and browser suites.
+Use `@tempoxyz/ds/platform` with `@tempoxyz/ds/platform.css` for product interfaces. Implemented exports have Figma mappings, independent style contracts, and browser suites. Card has browser suites only, since Platform Figma has no Card family yet.
 
 ## Components
 
@@ -8,27 +8,28 @@ Use `@tempoxyz/ds/platform` with `@tempoxyz/ds/platform.css` for product interfa
 | ---------------- | ----------------------------------------------------- | -------------------------- |
 | Alert            | `tone`, `title`, `description`, `action`, `onDismiss` | Inline notifications       |
 | Avatar           | `alt`, `fallback`, `scale`, `src`                     | Identity images            |
-| Badge            | `scale`, `variant`                                    | Classification labels      |
+| Badge            | `compact`, `scale`, `variant`                         | Classification labels      |
 | Button           | `appearance`, `scale`, `variant`                      | Discrete actions           |
 | ButtonGroup      | `horizontal`                                          | Related actions            |
 | Callout          | `title`, `children`                                   | Supporting information     |
+| Card             | `padding`, `render`                                   | Raised content surfaces    |
 | Checkbox         | `label`, `checked`, `indeterminate`                   | Independent choices        |
-| DenseTable       | `children`, native table attributes                   | Compact tabular data       |
+| DenseTable       | `compact`, `children`, native table attributes        | Compact tabular data       |
 | IconBadge        | `appearance`, `scale`, `children`                     | Icon classification        |
 | IconButton       | `appearance`, `scale`, `variant`, `aria-label`        | Icon actions               |
 | InlineCode       | `children`                                            | Code within text           |
 | KeyboardKey      | Native kbd attributes                                 | Keyboard shortcuts         |
-| NativeSelect     | Native select attributes                              | Native option selection    |
+| NativeSelect     | `scale`, native select attributes                     | Native option selection    |
 | Progress         | `value`, `max`                                        | Progress toward completion |
 | RadioGroup       | `items`, `value`, `onValueChange`                     | Mutually exclusive choices |
 | Search           | `appearance`, `value`, `onValueChange`                | Search input with clearing |
-| SegmentedControl | `items`, `value`, `onValueChange`                     | Three related choices      |
+| SegmentedControl | `items`, `value`, `onValueChange`                     | Two to four choices        |
 | SimpleTable      | `children`, native description list attributes        | Description pairs          |
 | Spinner          | `elevated`                                            | Indeterminate progress     |
 | StatusIndicator  | `tone`                                                | Compact status marks       |
 | Tab              | `appearance`, `scale`, `value`, `logo`                | Coordinated panels         |
 | TextButton       | `children`                                            | Inline actions             |
-| TextInput        | `appearance`, `extended`, `label`                     | Text entry                 |
+| TextInput        | `appearance`, `extended`, `label`, `stretch`          | Text entry                 |
 | Toast            | `toast`, `icon`                                       | Queued notifications       |
 | Tooltip          | `children`, `content`                                 | Contextual hints           |
 
@@ -73,6 +74,45 @@ import '@tempoxyz/ds/platform.css'
 
 `DenseTable` also supports `Colgroup`, `Col`, and `Tfoot`. `SimpleTable` renders a native description list.
 
+## Dense layouts
+
+Defaults follow Figma. These props fit components into toolbars, filters, and data grids.
+
+| Component                    | Prop      | Behavior                                                                            |
+| ---------------------------- | --------- | ----------------------------------------------------------------------------------- |
+| Badge                        | `compact` | Fits its label instead of the 80px minimum width                                    |
+| DenseTable                   | `compact` | Uses 8px row padding and 12px column gaps, and sizes columns to unwrapped content   |
+| DenseTable.Td, DenseTable.Th | `numeric` | Right-aligns tabular figures without wrapping                                       |
+| NativeSelect                 | `scale`   | Matches Button heights: `large` (48px, default), `medium` (40px), or `small` (32px) |
+| SegmentedControl             | `items`   | Accepts two to four segments                                                        |
+| TextInput                    | `stretch` | Fills its container instead of the 320px width                                      |
+
+```tsx
+import { Badge, DenseTable, NativeSelect, TextInput } from '@tempoxyz/ds/platform'
+import '@tempoxyz/ds/platform.css'
+
+<TextInput aria-label="Search runs" stretch />
+<NativeSelect aria-label="Preset" scale="small">
+  <option>All presets</option>
+</NativeSelect>
+<Badge compact scale="small" variant="gray">v2</Badge>
+
+<DenseTable compact>
+  <DenseTable.Thead>
+    <DenseTable.Tr>
+      <DenseTable.Th scope="col">Preset</DenseTable.Th>
+      <DenseTable.Th numeric scope="col">TPS</DenseTable.Th>
+    </DenseTable.Tr>
+  </DenseTable.Thead>
+  <DenseTable.Tbody>
+    <DenseTable.Tr>
+      <DenseTable.Td>transfer-heavy</DenseTable.Td>
+      <DenseTable.Td numeric>12,480</DenseTable.Td>
+    </DenseTable.Tr>
+  </DenseTable.Tbody>
+</DenseTable>
+```
+
 ## Base UI
 
 Check [Base UI's component catalog](https://base-ui.com/react/overview/quick-start) before implementing each component. Reuse matching primitives for behavior and retain DS styling and props.
@@ -81,6 +121,7 @@ Check [Base UI's component catalog](https://base-ui.com/react/overview/quick-sta
 | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
 | Avatar                                                                                                         | Use [Avatar](https://base-ui.com/react/components/avatar) for image loading and fallback.                                 |
 | Button, IconButton, Search actions, TextButton                                                                 | Use [Button](https://base-ui.com/react/components/button).                                                                |
+| Card                                                                                                           | Use [useRender](https://base-ui.com/react/utils/use-render) for the caller's element. Base UI has no card primitive.      |
 | Checkbox                                                                                                       | Use [Checkbox](https://base-ui.com/react/components/checkbox) with an enclosing native label.                             |
 | Progress, Spinner                                                                                              | Use [Progress](https://base-ui.com/react/components/progress) for progress semantics.                                     |
 | RadioGroup, SegmentedControl                                                                                   | Use [Radio Group](https://base-ui.com/react/components/radio-group) for keyboard selection and form values.               |
@@ -91,6 +132,25 @@ Check [Base UI's component catalog](https://base-ui.com/react/overview/quick-sta
 | Toast                                                                                                          | Use [Toast](https://base-ui.com/react/components/toast) for queues, announcements, timing, and dismissal.                 |
 | Tooltip                                                                                                        | Use [Tooltip](https://base-ui.com/react/components/tooltip) for positioning, focus, and dismissal.                        |
 
+## Cards
+
+Card renders a `div` on `background.secondary` with the Platform `xs` radius. Set `padding` to `none`, `12`, `16`, `20`, `24`, or `32` from the spacing scale. It defaults to `none` for flush content such as charts and tables.
+
+Pass a link or button to `render` for an interactive card. Card keeps the native element and its semantics. Element attributes such as `href`, `disabled`, and element refs belong on the `render` element.
+
+```tsx
+import { Card } from '@tempoxyz/ds/platform'
+
+<Card padding="24">Throughput summary</Card>
+<Card padding="16" render={<a href="/runs/42" />}>Run 42</Card>
+<Card padding="16" render={<button onClick={openRun} type="button" />}>Open run</Card>
+```
+
+Links and enabled buttons show a `line.primary` outline on hover and a `border.focus` ring on focus-visible. Other elements show no hover or pointer affordance. Button cards inherit the surrounding font and text alignment.
+
+> [!NOTE]
+> Platform Figma has no Card family yet. Card follows Platform variables until a family is published and mapped.
+
 ## Coordinated controls
 
 ```tsx
@@ -135,10 +195,94 @@ function Notifications() {
 
 Scope the provider to the interface that owns notifications. Position the viewport in the consumer layout; the library does not create a global queue.
 
+## Accent colors
+
+Use `content.accent`, `container.accent`, and `border.accent` for links, selections, and highlighted values. The `inverse` set swaps the content and container colors.
+
+```tsx
+import { style } from '@tempoxyz/ds/platform'
+
+const selected = style({
+  backgroundColor: 'container.accent',
+  borderColor: 'border.accent',
+  color: 'content.accent',
+})
+```
+
+> [!NOTE]
+> Figma does not define the accent variables yet. They follow the positive, negative, and warning variables until Figma adds matching ones.
+
+## Charts
+
+Chart tokens provide ordered categorical series colors and neutral ink for Light, Dark, and Inverse backgrounds. Series alias Core accents, and ink aliases Platform roles.
+
+| Token            | Light                 | Dark                 |
+| ---------------- | --------------------- | -------------------- |
+| `chart.series.1` | `accent.blueLight`    | `accent.blueLight`   |
+| `chart.series.2` | `accent.magentaLight` | `accent.magentaDark` |
+| `chart.series.3` | `accent.orangeLight`  | `accent.orangeLight` |
+| `chart.series.4` | `accent.purpleLight`  | `accent.purpleLight` |
+| `chart.series.5` | `accent.greenLight`   | `accent.greenLight`  |
+| `chart.series.6` | `accent.violetLight`  | `accent.violetDark`  |
+| `chart.series.7` | `accent.redLight`     | `accent.redLight`    |
+
+| Token         | Alias               | Use                                 |
+| ------------- | ------------------- | ----------------------------------- |
+| `chart.axis`  | `content.secondary` | Axis labels and tick text           |
+| `chart.grid`  | `line.secondary`    | Grid lines and axis rules           |
+| `chart.muted` | `content.tertiary`  | De-emphasized series, such as Other |
+
+- Assign series in slot order from `chart.series.1`. Keep each series on its slot when filters hide others.
+- Fold an eighth series into `chart.muted` as Other, or split the chart into small multiples. Do not cycle slots.
+- The order keeps adjacent slots distinct under protanopia and deuteranopia for lines, bars, and stacks. In scatter plots, where any two marks can touch, use at most three series.
+- Series 3, 5, and 7 share hues with `content.warning`, `content.positive`, and `content.negative`. When a series means good or bad, use those status tokens, and do not mix them with series tokens in one chart.
+- Label series with text tokens such as `chart.axis`, not series colors. On Light `background.primary`, series 3 and 5 fall below 3:1, so draw charts on `background.secondary` or label series directly.
+- `chart.muted` stays below 3:1 on Light backgrounds, so label muted series directly or offer a table view.
+
+Apply chart tokens through CSS `fill` and `stroke` with `style` or `variants`. Browsers do not reliably resolve `var()` or `light-dark()` in SVG presentation attributes. Attributes without tokens, such as `fill="none"` and `strokeWidth`, stay on the element.
+
+```tsx
+import { style, variants } from '@tempoxyz/ds/platform'
+
+namespace styles {
+  export const axis = style({ fill: 'chart.axis' })
+
+  export const grid = style({ stroke: 'chart.grid' })
+
+  export const line = variants({
+    variants: {
+      series: {
+        '1': { stroke: 'chart.series.1' },
+        '2': { stroke: 'chart.series.2' },
+      },
+    },
+  })
+}
+
+;<svg viewBox="0 0 320 120">
+  <line {...styles.grid()} x1="0" x2="320" y1="100" y2="100" />
+  <polyline
+    {...styles.line({ series: '1' })}
+    fill="none"
+    points="0,80 160,40 320,60"
+    strokeWidth={2}
+  />
+  <text {...styles.axis()} x="0" y="116">
+    Mon
+  </text>
+</svg>
+```
+
+Libraries that accept only color strings can read the resolved value with `getComputedStyle(element).stroke` from an element that applies the token. Read it again when the color scheme changes.
+
 ## Coverage
 
 Badge covers all ten Figma scale/style combinations. KeyboardKey covers its single definition. ButtonGroup covers both orientations with keyboard activation and focus checks. Browser suites capture labelled sheets in Light and Dark, at mobile and desktop widths.
 
+Card has no Figma cases, so its suite defines its own matrix: every padding value, plus link and button cards through hover, focus-visible, pressed, and disabled states.
+
+Figma does not define the dense layout props yet. Browser sheets label their rows `not in Figma`, and Figma parity checks skip them.
+
 Checkbox and Radio Group labels retain the unbound black fills in Figma, including Dark mode. Tab logo fixtures exercise the slot using a Platform icon; they do not verify deferred Brand artwork.
 
 ## Icons

package/src/platform/components/Badge.tsx

@@ -5,12 +5,12 @@ import { inverse } from '../vars.js'
 import { variants } from '../zyzz.config.js'
 
 export function Badge(props: Badge.Props) {
-  const { className, scale, variant, vars, ...attributes } = props
+  const { className, compact, scale, variant, vars, ...attributes } = props
 
   return (
     <span
       {...attributes}
-      {...styles.badge({ className, scale, style: props.style, variant, vars })}
+      {...styles.badge({ className, compact, scale, style: props.style, variant, vars })}
     />
   )
 }
@@ -36,8 +36,13 @@ namespace styles {
         position: 'relative',
         whiteSpace: 'nowrap',
       },
-      defaultVariants: { scale: 'medium', variant: 'black' },
+      defaultVariants: { compact: false, scale: 'medium', variant: 'black' },
       variants: {
+        // Figma badges keep an 80px minimum width. Compact badges fit their content instead.
+        compact: {
+          false: {},
+          true: { minWidth: 'auto !custom' },
+        },
         scale: {
           medium: {
             borderRadius: '2xs',

package/src/platform/components/Card.tsx

@@ -0,0 +1,72 @@
+import * as BaseUi from '@base-ui/react/use-render'
+import type * as zyzz from 'zyzz'
+import { variants } from '../zyzz.config.js'
+
+export function Card(props: Card.Props) {
+  const { className, padding, render, vars, ...attributes } = props
+
+  return BaseUi.useRender({
+    defaultTagName: 'div',
+    props: {
+      ...attributes,
+      ...styles.card({ className, padding, style: props.style, vars }),
+    },
+    render,
+  })
+}
+
+export namespace Card {
+  export type Props = BaseUi.useRender.ComponentProps<'div'> &
+    zyzz.Props.Variants<typeof styles.card>
+}
+
+// Hover and pointer styles match only links and enabled buttons, so a static card never presents an
+// interactive affordance.
+namespace styles {
+  export const card = variants(
+    {
+      base: {
+        backgroundColor: 'background.secondary',
+        borderRadius: 'xs',
+        boxSizing: 'border-box',
+        color: 'content.primary',
+        display: 'block',
+        margin: 'none',
+        selectors: {
+          '&:where(button)': {
+            border: 'none !custom',
+            font: 'inherit !custom',
+            letterSpacing: 'inherit !custom',
+            textAlign: 'inherit !custom',
+          },
+          '&:where(:any-link)': { textDecoration: 'none !custom' },
+          '&:where(:any-link, button:enabled)': { cursor: 'pointer' },
+          // `:where` keeps hover at focus-visible specificity, so the later focus ring wins while
+          // a focused card is hovered.
+          '&:where(:any-link, button:enabled):hover': {
+            outline: '1px solid !custom',
+            outlineColor: 'line.primary',
+            outlineOffset: '-1px !custom',
+          },
+          '&:focus-visible': {
+            outline: '2px solid !custom',
+            outlineColor: 'border.focus',
+            outlineOffset: '2px !custom',
+          },
+        },
+      },
+      defaultVariants: { padding: 'none' },
+      variants: {
+        padding: {
+          '12': { padding: '12' },
+          '16': { padding: '16' },
+          '20': { padding: '20' },
+          '24': { padding: '24' },
+          '32': { padding: '32' },
+          none: { padding: 'none' },
+        },
+      },
+    },
+    { id: 'tds/platform/card' },
+  )
+}

package/src/platform/components/DenseTable.tsx

@@ -1,13 +1,13 @@
 import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
-import { style } from '../zyzz.config.js'
+import { style, variants } from '../zyzz.config.js'
 
 export function DenseTable(props: DenseTable.Props) {
-  const { className, vars, ...attributes } = props
+  const { className, compact, vars, ...attributes } = props
 
   return (
     <div {...styles.scroll()}>
-      <table {...attributes} {...styles.table({ className, style: props.style, vars })} />
+      <table {...attributes} {...styles.table({ className, compact, style: props.style, vars })} />
     </div>
   )
 }
@@ -51,11 +51,16 @@ export namespace DenseTable {
   }
 
   export function Td(props: Td.Props) {
-    return <td {...props} />
+    const { numeric, ...attributes } = props
+
+    return <td {...attributes} data-numeric={numeric ? '' : undefined} />
   }
 
   export namespace Td {
-    export type Props = ComponentPropsWithRef<'td'>
+    export type Props = ComponentPropsWithRef<'td'> & {
+      /** Right-aligns the cell with tabular figures and no wrapping. */
+      numeric?: boolean | undefined
+    }
   }
 
   export function Tfoot(props: Tfoot.Props) {
@@ -67,11 +72,16 @@ export namespace DenseTable {
   }
 
   export function Th(props: Th.Props) {
-    return <th {...props} />
+    const { numeric, ...attributes } = props
+
+    return <th {...attributes} data-numeric={numeric ? '' : undefined} />
   }
 
   export namespace Th {
-    export type Props = ComponentPropsWithRef<'th'>
+    export type Props = ComponentPropsWithRef<'th'> & {
+      /** Right-aligns the header with tabular figures and no wrapping. */
+      numeric?: boolean | undefined
+    }
   }
 
   export function Thead(props: Thead.Props) {
@@ -102,38 +112,60 @@ namespace styles {
     { id: 'tds/platform/dense-table/scroll' },
   )
 
-  export const table = style(
+  export const table = variants(
     {
-      borderCollapse: 'collapse',
-      color: 'content.primary',
-      tableLayout: 'fixed',
-      typography: 'body.b2',
-      width: '100% !custom',
-      selectors: {
-        '& th': {
-          paddingTop: 'none',
-          paddingBottom: '16',
-          paddingRight: '16',
-          textAlign: 'left',
-          typography: 'body.b2Strong',
+      base: {
+        borderCollapse: 'collapse',
+        color: 'content.primary',
+        tableLayout: 'fixed',
+        typography: 'body.b2',
+        width: '100% !custom',
+        selectors: {
+          '& th': {
+            paddingTop: 'none',
+            paddingBottom: '16',
+            paddingRight: '16',
+            textAlign: 'left',
+            typography: 'body.b2Strong',
+          },
+          '& td': {
+            paddingBlock: '16',
+            paddingRight: '16',
+            position: 'relative',
+          },
+          '& td::before': {
+            backgroundColor: 'line.secondary',
+            content: '"" !custom',
+            height: '1px !custom',
+            left: '0px !custom',
+            position: 'absolute',
+            right: '0px !custom',
+            top: '-1px !custom',
+          },
+          '& td, & th': { overflowWrap: 'anywhere', paddingLeft: 'none', verticalAlign: 'middle' },
+          '& td:last-child, & th:last-child': { paddingRight: 'none' },
+          '& tbody tr:last-child td': { paddingBottom: 'none' },
+          '& td[data-numeric], & th[data-numeric]': {
+            fontVariantNumeric: 'tabular-nums',
+            textAlign: 'right',
+            whiteSpace: 'nowrap',
+          },
         },
-        '& td': {
-          paddingBlock: '16',
-          paddingRight: '16',
-          position: 'relative',
-        },
-        '& td::before': {
-          backgroundColor: 'line.secondary',
-          content: '"" !custom',
-          height: '1px !custom',
-          left: '0px !custom',
-          position: 'absolute',
-          right: '0px !custom',
-          top: '-1px !custom',
+      },
+      defaultVariants: { compact: false },
+      variants: {
+        // Figma defines only the regular density. Compact columns size to unwrapped content.
+        compact: {
+          false: {},
+          true: {
+            tableLayout: 'auto',
+            selectors: {
+              '& th': { paddingBottom: '8', paddingRight: '12' },
+              '& td': { paddingBlock: '8', paddingRight: '12' },
+              '& td, & th': { overflowWrap: 'normal', whiteSpace: 'nowrap' },
+            },
+          },
         },
-        '& td, & th': { overflowWrap: 'anywhere', paddingLeft: 'none', verticalAlign: 'middle' },
-        '& td:last-child, & th:last-child': { paddingRight: 'none' },
-        '& tbody tr:last-child td': { paddingBottom: 'none' },
       },
     },
     { id: 'tds/platform/dense-table' },

package/src/platform/components/NativeSelect.tsx

@@ -1,17 +1,17 @@
 import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
 import { ChevronDown } from '../icons/index.js'
-import { style } from '../zyzz.config.js'
+import { style, variants } from '../zyzz.config.js'
 
 export function NativeSelect(props: NativeSelect.Props) {
-  const { children, className, invalid = false, vars, ...attributes } = props
+  const { children, className, invalid = false, scale, vars, ...attributes } = props
 
   return (
-    <div {...styles.root({ className, style: props.style, vars })}>
+    <div {...styles.root({ className, scale, style: props.style, vars })}>
       <select
         {...attributes}
         aria-invalid={invalid || attributes['aria-invalid']}
-        {...styles.select()}
+        {...styles.select({ scale })}
       >
         {children}
       </select>
@@ -33,61 +33,81 @@ namespace styles {
       pointerEvents: 'none',
       position: 'absolute',
       right: '16',
-      top: '16',
+      top: '50% !custom',
+      transform: 'translateY(-50%) !custom',
       width: '16',
     },
     { id: 'tds/platform/native-select/chevron' },
   )
 
-  export const root = style(
+  export const root = variants(
     {
-      alignItems: 'center',
-      backgroundColor: 'background.secondary',
-      borderColor: 'line.secondary',
-      borderRadius: 'xs',
-      borderStyle: 'solid',
-      borderWidth: 'thin',
-      boxSizing: 'border-box',
-      columnGap: '8',
-      display: 'flex',
-      height: '48',
-      maxWidth: '100% !custom',
-      paddingInline: '16',
-      position: 'relative',
-      width: '320px !custom',
-      selectors: {
-        '&:has(select:disabled)': { backgroundColor: 'container.subtle' },
-        '&:has(select:disabled) > svg': { opacity: '0.4 !custom' },
-        '&:has(select[aria-invalid="true"])': {
-          backgroundColor: 'container.negative',
-          borderColor: 'border.negative',
-          borderWidth: 'regular',
+      base: {
+        alignItems: 'center',
+        backgroundColor: 'background.secondary',
+        borderColor: 'line.secondary',
+        borderRadius: 'xs',
+        borderStyle: 'solid',
+        borderWidth: 'thin',
+        boxSizing: 'border-box',
+        columnGap: '8',
+        display: 'flex',
+        maxWidth: '100% !custom',
+        paddingInline: '16',
+        position: 'relative',
+        width: '320px !custom',
+        selectors: {
+          '&:has(select:disabled)': { backgroundColor: 'container.subtle' },
+          '&:has(select:disabled) > svg': { opacity: '0.4 !custom' },
+          '&:has(select[aria-invalid="true"])': {
+            backgroundColor: 'container.negative',
+            borderColor: 'border.negative',
+            borderWidth: 'regular',
+          },
+          '&:has(select:focus-visible)': {
+            outline: '2px solid currentColor !custom',
+            outlineOffset: '2px !custom',
+          },
         },
-        '&:has(select:focus-visible)': {
-          outline: '2px solid currentColor !custom',
-          outlineOffset: '2px !custom',
+      },
+      defaultVariants: { scale: 'large' },
+      variants: {
+        // Scales follow Button heights. Figma defines only the 48px large scale.
+        scale: {
+          large: { height: '48' },
+          medium: { borderRadius: '2xs', height: '40' },
+          small: { borderRadius: '2xs', height: '32' },
         },
       },
     },
     { id: 'tds/platform/native-select' },
   )
 
-  export const select = style(
+  export const select = variants(
     {
-      appearance: 'none',
-      backgroundColor: 'transparent !custom',
-      border: 'none !custom',
-      boxSizing: 'border-box',
-      color: 'content.primary',
-      height: '100% !custom',
-      paddingBlock: 'none',
-      paddingLeft: 'none',
-      paddingRight: '24',
-      outline: 'none !custom',
-      typography: 'body.b2',
-      width: '100% !custom',
-      selectors: {
-        '&:disabled': { color: 'content.tertiary' },
+      base: {
+        appearance: 'none',
+        backgroundColor: 'transparent !custom',
+        border: 'none !custom',
+        boxSizing: 'border-box',
+        color: 'content.primary',
+        height: '100% !custom',
+        paddingBlock: 'none',
+        paddingLeft: 'none',
+        paddingRight: '24',
+        outline: 'none !custom',
+        width: '100% !custom',
+        selectors: {
+          '&:disabled': { color: 'content.tertiary' },
+        },
+      },
+      defaultVariants: { scale: 'large' },
+      variants: {
+        scale: {
+          large: { typography: 'body.b2' },
+          medium: { typography: 'body.b2' },
+          small: { typography: 'body.b3' },
+        },
       },
     },
     { id: 'tds/platform/native-select/select' },

package/src/platform/components/SegmentedControl.tsx

@@ -28,6 +28,8 @@ export function SegmentedControl<const value extends string>(props: SegmentedCon
 }
 
 export namespace SegmentedControl {
+  type Item<value extends string> = { label: ReactNode; value: value }
+
   export type Props<value extends string = string> = Omit<
     ComponentPropsWithRef<'div'>,
     'children' | 'defaultValue'
@@ -44,11 +46,11 @@ export namespace SegmentedControl {
       | 'required'
       | 'value'
     > & {
-      items: readonly [
-        { label: ReactNode; value: value },
-        { label: ReactNode; value: value },
-        { label: ReactNode; value: value },
-      ]
+      /** Two to four segments. Figma defines three, and the 354px control fits four at 80px each. */
+      items:
+        | readonly [Item<value>, Item<value>]
+        | readonly [Item<value>, Item<value>, Item<value>]
+        | readonly [Item<value>, Item<value>, Item<value>, Item<value>]
     }
 }
 

package/src/platform/components/Spinner.tsx

@@ -40,7 +40,6 @@ namespace styles {
   export const glyph = style(
     {
       animation: `${rotation} 1s linear infinite !custom`,
-      color: '#000000 !custom',
       flexShrink: '0 !custom',
       height: '16',
       width: '16',
@@ -56,6 +55,7 @@ namespace styles {
         backgroundColor: 'transparent !custom',
         border: 'none !custom',
         boxSizing: 'border-box',
+        color: 'content.primary',
         display: 'inline-flex',
         height: '16',
         justifyContent: 'center',