@tempoxyz/ds 0.2.6 → 0.3.0

package/src/web/components/ChoiceGroup.tsx

@@ -1,7 +1,14 @@
 import { LabelableProvider } from '@base-ui/react/internals/labelable-provider'
 import * as BaseUi from '@base-ui/react/radio'
 import * as BaseUiGroup from '@base-ui/react/radio-group'
-import { type ComponentPropsWithRef, useCallback, useLayoutEffect, useRef } from 'react'
+import {
+  Children,
+  type ComponentPropsWithRef,
+  type ReactNode,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+} from 'react'
 import type * as zyzz from 'zyzz'
 import { style, variants, vars } from '../zyzz.config.js'
 
@@ -30,10 +37,12 @@ import { style, variants, vars } from '../zyzz.config.js'
 export namespace ChoiceGroup {
   /**
    * One option, rendered as a `span` with `role="radio"` and a hidden native input beside it. Its
-   * text content is its accessible name.
+   * text content is its accessible name. A checked item sets its label in the strong weight, and
+   * every item reserves the width of that weight for the text in its children, so a change of
+   * selection never shifts the row. Text that an element child renders reserves no width.
    */
   export function Item<value>(props: Item.Props<value>) {
-    const { className, vars, ...attributes } = props
+    const { children, className, vars, ...attributes } = props
 
     // Scopes the label so the item keeps its text as its name inside a `Field.Root`, like `Field.Item`.
     return (
@@ -41,7 +50,9 @@ export namespace ChoiceGroup {
         <BaseUi.Radio.Root
           {...attributes}
           {...styles.item({ className, style: props.style, vars })}
-        />
+        >
+          <span {...styles.label()}>{runs(children)}</span>
+        </BaseUi.Radio.Root>
       </LabelableProvider>
     )
   }
@@ -167,11 +178,41 @@ export namespace ChoiceGroup {
   }
 }
 
+/**
+ * Pairs each run of text in `children` with a hidden copy that reserves the width of the strong
+ * weight. Elements render once, so text inside an element reserves no width.
+ */
+function runs(children: ReactNode) {
+  return Children.toArray(children)
+    .reduce<ReactNode[]>((nodes, child) => {
+      const last = nodes.at(-1)
+      const text = typeof child === 'number' ? String(child) : child
+
+      // Adjacent text, such as `Activity {count}`, renders as one flex item, so it stays one run.
+      if (typeof text === 'string' && typeof last === 'string')
+        return [...nodes.slice(0, -1), last + text]
+      return [...nodes, text]
+    }, [])
+    .map((node, index) =>
+      typeof node === 'string' ? (
+        <span key={index} {...styles.text()}>
+          {node}
+          <span aria-hidden="true" data-reserve="" {...styles.reserve()}>
+            {node}
+          </span>
+        </span>
+      ) : (
+        node
+      ),
+    )
+}
+
 namespace styles {
   export const icon = style(
     {
       alignItems: 'center',
       borderRadius: 'full',
+      cornerShape: 'round',
       display: 'inline-flex',
       flexShrink: '0 !custom',
       height: '24',
@@ -186,12 +227,11 @@ namespace styles {
     {
       alignItems: 'center',
       backgroundColor: 'transparent !custom',
-      borderRadius: 'full',
       boxSizing: 'border-box',
-      color: 'gray.900',
-      columnGap: '8',
+      color: 'content.secondary',
       cursor: 'pointer',
       display: 'inline-flex',
+      flexDirection: 'column',
       flexShrink: '0 !custom',
       justifyContent: 'center',
       outlineColor: 'transparent !custom',
@@ -207,9 +247,14 @@ namespace styles {
       zIndex: '1 !custom',
       selectors: {
         '&:active:not([data-disabled])': { scale: 'press' },
-        '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-        '&:hover:not([data-disabled])': { color: 'foreground' },
-        '&[data-checked]': { color: 'foreground' },
+        // The ring sits inside the item, so it clears the neighboring items and the track edge.
+        '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '-2px !custom' },
+        '&:hover:not([data-disabled])': { color: 'content.primary' },
+        // The pill fills a checked item, so only an unchecked item takes the hover fill.
+        '&:hover:not([data-checked], [data-disabled])': {
+          backgroundColor: 'action.tertiary.fill.hover',
+        },
+        '&[data-checked]': { color: 'content.primary' },
         '&[data-disabled]': { cursor: 'default', opacity: 'disabled' },
       },
       '@media (prefers-reduced-motion: reduce)': {
@@ -220,10 +265,15 @@ namespace styles {
     { id: 'tds/web/choice-group/item' },
   )
 
+  export const label = style(
+    { alignItems: 'center', columnGap: '8', display: 'inline-flex' },
+    { id: 'tds/web/choice-group/label' },
+  )
+
   export const pill = style(
     {
-      backgroundColor: 'background.indicator',
-      boxShadow: 'raised',
+      backgroundColor: 'background.elevated',
+      boxShadow: 'small',
       boxSizing: 'border-box',
       insetBlock: '4',
       insetInlineStart: '0',
@@ -243,40 +293,59 @@ namespace styles {
     { id: 'tds/web/choice-group/pill' },
   )
 
+  // The hidden copy of a run of label text holds the strong weight of its size, so the item keeps
+  // the width that the checked label takes.
+  export const reserve = style(
+    { height: '0', overflow: 'hidden', visibility: 'hidden' },
+    { id: 'tds/web/choice-group/reserve' },
+  )
+
   export const root = variants(
     {
       base: { boxSizing: 'border-box', display: 'inline-flex', position: 'relative' },
       // The default track matches Tabs: items and the pill sit 4px in, so their radius is the
-      // track's minus 4px. Chips fill the track height and take the Choicebox tile radius.
+      // track's minus 4px. The small track insets them by 2px instead. Chips fill the track
+      // height and take the Choicebox tile radius.
       compoundVariants: [
         {
           when: { size: 'large', variant: 'default' },
-          style: { borderRadius: '16', selectors: { '& > *': { borderRadius: '12' } } },
+          style: { borderRadius: 'sm', selectors: { '& > *': { borderRadius: 'xs' } } },
         },
         {
           when: { size: 'medium', variant: 'default' },
-          style: { borderRadius: '12', selectors: { '& > *': { borderRadius: '8' } } },
+          style: { borderRadius: 'xs', selectors: { '& > *': { borderRadius: '2xs' } } },
         },
         {
           when: { size: 'small', variant: 'default' },
-          style: { borderRadius: '8', selectors: { '& > *': { borderRadius: '4' } } },
+          style: {
+            // A 10px radius, between the radius steps, keeps the 2xs items concentric 2px in.
+            borderRadius: 'calc(0.625rem * var(--tds-corner-scale, 1)) !custom',
+            columnGap: '2',
+            padding: '2',
+            selectors: {
+              '& > *': { borderRadius: '2xs' },
+              // The pill, which is the only `span` child hidden from assistive technology.
+              '& > span[aria-hidden="true"]': { insetBlock: '2' },
+            },
+          },
         },
         {
           when: { size: 'large', variant: 'chips' },
-          style: { selectors: { '& > [role="radio"]': { borderRadius: '16', height: '56' } } },
+          style: { selectors: { '& > [role="radio"]': { borderRadius: 'sm', height: '56' } } },
         },
         {
           when: { size: 'medium', variant: 'chips' },
-          style: { selectors: { '& > [role="radio"]': { borderRadius: '12', height: '40' } } },
+          style: { selectors: { '& > [role="radio"]': { borderRadius: 'xs', height: '40' } } },
         },
         {
           when: { size: 'small', variant: 'chips' },
-          style: { selectors: { '& > [role="radio"]': { borderRadius: '8', height: '32' } } },
+          style: { selectors: { '& > [role="radio"]': { borderRadius: '2xs', height: '32' } } },
         },
       ],
       defaultVariants: { size: 'medium', variant: 'default' },
       variants: {
-        // The shared control scale: 32, 40 and 56px tracks with items inset by 4px.
+        // The shared control scale: 32, 40 and 56px tracks with 28, 32 and 48px items. Labels
+        // take the strong weight only while their item is checked.
         size: {
           large: {
             height: '56',
@@ -284,8 +353,10 @@ namespace styles {
               '& > [role="radio"]': {
                 height: '48',
                 paddingInline: '20',
-                typography: 'button.16',
+                typography: 'body.b1',
               },
+              '& > [role="radio"][data-checked]': { typography: 'body.b1Strong' },
+              '& > [role="radio"] [data-reserve]': { typography: 'body.b1Strong' },
             },
           },
           medium: {
@@ -294,18 +365,22 @@ namespace styles {
               '& > [role="radio"]': {
                 height: '32',
                 paddingInline: '16',
-                typography: 'button.14',
+                typography: 'body.b2',
               },
+              '& > [role="radio"][data-checked]': { typography: 'body.b2Strong' },
+              '& > [role="radio"] [data-reserve]': { typography: 'body.b2Strong' },
             },
           },
           small: {
             height: '32',
             selectors: {
               '& > [role="radio"]': {
-                height: '24',
+                height: '28',
                 paddingInline: '12',
-                typography: 'button.12',
+                typography: 'body.b3',
               },
+              '& > [role="radio"][data-checked]': { typography: 'body.b3Strong' },
+              '& > [role="radio"] [data-reserve]': { typography: 'body.b3Strong' },
             },
           },
         },
@@ -322,14 +397,20 @@ namespace styles {
             selectors: {
               '&::-webkit-scrollbar': { display: 'none !custom' },
               '& > [role="radio"]': { paddingInline: '12' },
-              '& > [role="radio"][data-checked]': { backgroundColor: 'grayAlpha.100' },
+              '& > [role="radio"][data-checked]': { backgroundColor: 'container.regular' },
             },
           },
           // Hugs its items in a `Field.Root` grid instead of stretching the track past them.
-          default: { backgroundColor: 'grayAlpha.100', justifySelf: 'start', padding: '4' },
+          default: { backgroundColor: 'container.regular', justifySelf: 'start', padding: '4' },
         },
       },
     },
     { id: 'tds/web/choice-group' },
   )
+
+  // Stacks a run of label text over its reserve, so the run takes the wider of the two widths.
+  export const text = style(
+    { alignItems: 'center', display: 'inline-flex', flexDirection: 'column' },
+    { id: 'tds/web/choice-group/text' },
+  )
 }

package/src/web/components/Choicebox.tsx

@@ -330,11 +330,11 @@ namespace styles {
     {
       alignItems: 'center',
       backgroundColor: 'transparent !custom',
-      borderColor: 'grayAlpha.500',
+      borderColor: 'line.primary',
       borderStyle: 'solid',
       borderWidth: '1.5px !custom',
       boxSizing: 'border-box',
-      color: 'background.surface',
+      color: 'background.elevated',
       display: 'inline-flex',
       flexShrink: '0 !custom',
       height: '20',
@@ -345,9 +345,9 @@ namespace styles {
       transitionTimingFunction: 'snappy',
       width: '20',
       selectors: {
-        '&[data-checked]': { backgroundColor: 'foreground', borderColor: 'foreground' },
+        '&[data-checked]': { backgroundColor: 'content.primary', borderColor: 'content.primary' },
       },
-      borderRadius: '6',
+      borderRadius: '2xs',
     },
     { id: 'tds/web/choicebox/checkbox' },
   )
@@ -377,14 +377,15 @@ namespace styles {
   )
 
   export const description = style(
-    { color: 'gray.900', typography: 'copy.14' },
+    { color: 'content.secondary', typography: 'body.b2' },
     { id: 'tds/web/choicebox/description' },
   )
 
   export const dot = style(
     {
-      backgroundColor: 'background.surface',
+      backgroundColor: 'background.elevated',
       borderRadius: 'full',
+      cornerShape: 'round',
       height: '8',
       width: '8',
       transitionDuration: '200',
@@ -410,7 +411,7 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        color: 'foreground',
+        color: 'content.primary',
         display: 'inline-flex',
         fontSize: '20',
         gridColumn: '1 !custom',
@@ -431,12 +432,12 @@ namespace styles {
         size: {
           large: {
             selectors: {
-              '& > :is(label, button)': { borderRadius: '16', columnGap: '20', padding: '24' },
+              '& > :is(label, button)': { borderRadius: 'sm', columnGap: '20', padding: '24' },
               '& [data-choicebox-icon]': { fontSize: '24', marginInlineEnd: '24' },
-              '& [data-choicebox-title]': { typography: 'copy.18.strong' },
-              '& [data-choicebox-description]': { typography: 'copy.15' },
+              '& [data-choicebox-title]': { typography: 'body.b1Strong' },
+              '& [data-choicebox-description]': { typography: 'body.b1' },
               '& :is([role="checkbox"], [role="radio"])': { height: '24', width: '24' },
-              '& [role="checkbox"]': { borderRadius: '8' },
+              '& [role="checkbox"]': { borderRadius: '2xs' },
               '& [role="radio"] > span': { height: '10', width: '10' },
             },
           },
@@ -444,15 +445,15 @@ namespace styles {
           small: {
             selectors: {
               '& > :is(label, button)': {
-                borderRadius: '8',
+                borderRadius: '2xs',
                 columnGap: '12',
                 padding: '12',
               },
               '& [data-choicebox-icon]': { fontSize: '16', marginInlineEnd: '12' },
-              '& [data-choicebox-title]': { typography: 'label.14.strong' },
-              '& [data-choicebox-description]': { typography: 'copy.13' },
+              '& [data-choicebox-title]': { typography: 'body.b2Strong' },
+              '& [data-choicebox-description]': { typography: 'body.b3' },
               '& :is([role="checkbox"], [role="radio"])': { height: '16', width: '16' },
-              '& [role="checkbox"]': { borderRadius: '4' },
+              '& [role="checkbox"]': { borderRadius: '3xs' },
               '& [role="radio"] > span': { height: '6', width: '6' },
             },
           },
@@ -466,11 +467,12 @@ namespace styles {
     {
       alignItems: 'center',
       backgroundColor: 'transparent !custom',
-      borderColor: 'grayAlpha.500',
+      borderColor: 'line.primary',
       borderStyle: 'solid',
       borderWidth: '1.5px !custom',
       boxSizing: 'border-box',
-      color: 'background.surface',
+      color: 'background.elevated',
+      cornerShape: 'round',
       display: 'inline-flex',
       flexShrink: '0 !custom',
       height: '20',
@@ -481,7 +483,7 @@ namespace styles {
       transitionTimingFunction: 'snappy',
       width: '20',
       selectors: {
-        '&[data-checked]': { backgroundColor: 'foreground', borderColor: 'foreground' },
+        '&[data-checked]': { backgroundColor: 'content.primary', borderColor: 'content.primary' },
       },
       borderRadius: 'full',
     },
@@ -491,15 +493,15 @@ namespace styles {
   export const tile = style(
     {
       alignItems: 'flex-start',
-      backgroundColor: 'background.surface',
-      borderRadius: '12',
+      backgroundColor: 'background.elevated',
+      borderRadius: 'xs',
       boxSizing: 'border-box',
-      color: 'foreground',
+      color: 'content.primary',
       columnGap: '16',
       cursor: 'pointer',
       display: 'flex',
       // The resting outline draws the tile edge inside the box, so it never shifts the content.
-      outlineColor: 'grayAlpha.200',
+      outlineColor: 'line.secondary',
       outlineOffset: '-1px !custom',
       outlineStyle: 'solid !custom',
       outlineWidth: '1',
@@ -512,20 +514,20 @@ namespace styles {
         '&:active:not(:has([data-disabled]))': { scale: 'press' },
         '&:hover:not(:disabled, :focus-visible, :has([data-checked], [data-disabled], :focus-visible))':
           {
-            outlineColor: 'grayAlpha.400',
+            outlineColor: 'line.secondary',
           },
         '&:has(:focus-visible)': {
-          outlineColor: 'blue.700',
+          outlineColor: 'border.focus',
           outlineOffset: '2',
           outlineWidth: '2',
         },
         '&:has([data-checked])': {
-          outlineColor: 'foreground',
+          outlineColor: 'content.primary',
           outlineOffset: '-2',
           outlineWidth: '2',
         },
         '&:has([data-checked]):has(:focus-visible)': {
-          outlineColor: 'blue.700',
+          outlineColor: 'border.focus',
           outlineOffset: '2',
         },
         '&:has([data-disabled])': { cursor: 'default', opacity: 'disabled' },
@@ -537,7 +539,7 @@ namespace styles {
           width: '100% !custom',
         },
         '&:is(button):focus-visible': {
-          outlineColor: 'blue.700',
+          outlineColor: 'border.focus',
           outlineOffset: '2',
           outlineWidth: '2',
         },
@@ -552,5 +554,5 @@ namespace styles {
     { id: 'tds/web/choicebox/tile' },
   )
 
-  export const title = style({ typography: 'label.16.strong' }, { id: 'tds/web/choicebox/title' })
+  export const title = style({ typography: 'body.b1Strong' }, { id: 'tds/web/choicebox/title' })
 }

package/src/web/components/Combobox.tsx

@@ -215,16 +215,16 @@ export namespace Combobox {
   }
 
   /**
-   * Renders the field frame around the input and its actions. `size` sets 32, 40 or 56px heights.
-   * `invalid` only styles the frame, so also set `aria-invalid` on the input to expose the state.
+   * Renders the 48px field frame around the input and its actions. `invalid` only fills the frame
+   * red, so also set `aria-invalid` on the input to expose the state.
    */
   export function InputGroup(props: InputGroup.Props) {
-    const { className, invalid, size, variant, vars, ...attributes } = props
+    const { className, invalid, variant, vars, ...attributes } = props
 
     return (
       <BaseUi.Combobox.InputGroup
         {...attributes}
-        {...Field.styles.field({ className, size, style: props.style, variant, vars })}
+        {...Field.styles.field({ className, style: props.style, variant, vars })}
         data-invalid={invalid || undefined}
       />
     )
@@ -454,10 +454,11 @@ namespace styles {
   export const chip = style(
     {
       alignItems: 'center',
-      backgroundColor: 'grayAlpha.200',
+      backgroundColor: 'container.strong',
       borderRadius: 'full',
       boxSizing: 'border-box',
       columnGap: '4',
+      cornerShape: 'round',
       display: 'inline-flex',
       height: '32',
       outline: 'none !custom',
@@ -466,10 +467,10 @@ namespace styles {
       transitionDuration: '120',
       transitionProperty: 'background-color, color, opacity !custom',
       transitionTimingFunction: 'snappy',
-      typography: 'copy.14',
+      typography: 'body.b2',
       selectors: {
         '&:focus-within, &[data-highlighted]': {
-          backgroundColor: 'foreground',
+          backgroundColor: 'content.primary',
           color: 'background.primary',
         },
         '&[data-disabled]': { opacity: 'disabled' },
@@ -485,6 +486,7 @@ namespace styles {
       border: 'none !custom',
       borderRadius: 'full',
       color: 'inherit !custom',
+      cornerShape: 'round',
       cursor: 'pointer',
       display: 'inline-flex',
       fontSize: '12',
@@ -525,7 +527,7 @@ namespace styles {
   export const prefix = style(
     {
       alignItems: 'center',
-      color: 'gray.900',
+      color: 'content.secondary',
       display: 'inline-flex',
       flexShrink: '0 !custom',
     },

package/src/web/components/CopyButton.tsx

@@ -32,7 +32,7 @@ export function CopyButton(props: CopyButton.Props) {
     size = 'small',
     title,
     value,
-    variant = 'text',
+    variant = 'tertiary',
     ...attributes
   } = props
   const own = useCopy(value)