@tempoxyz/ds 0.2.5 → 0.3.0

package/src/web/components/{Input.tsx → TextInput.tsx}

@@ -2,14 +2,14 @@ import * as BaseUi from '@base-ui/react/input'
 import { type ComponentPropsWithRef, useContext, useMemo, useRef } from 'react'
 import type * as zyzz from 'zyzz'
 import { style } from '../zyzz.config.js'
-import { Close } from '../icons/Close.js'
 import * as InputGroup from './internal/InputGroup.js'
 
 /**
- * Filled text field. Compose `Group` with optional `Prefix`, `Control`, `Suffix` and `Clear`.
- * Place it inside `Field.Root` to get a label, description, error and the stacked variant.
- * `invalid` draws a red ring and `success` a green tint and ring, each also inherited from
- * `Field.Root`. Entering either state after mount plays a one-shot nudge or pop.
+ * A 48px text field. Compose `Group` with optional `Prefix`, `Control`, `Suffix` and `Clear`, and
+ * place it inside `Field.Root` to get a label, description and error. Focus turns the field
+ * elevated with a 1px border. `invalid` fills it red and `success` ends it with a check, each also
+ * inherited from `Field.Root`. Entering either state after mount plays a one-shot nudge or pop.
+ * For search, put a `Search` icon in `Prefix` and add `Clear`.
  *
  * - Give every control a visible `Field.Label`. A placeholder is not a label.
  * - Set `autoComplete`, `inputMode` and `type` so browsers and keyboards can help fill the field.
@@ -18,11 +18,11 @@ import * as InputGroup from './internal/InputGroup.js'
  * @example
  * <Field.Root>
  *   <Field.Label>Amount</Field.Label>
- *   <Input.Group>
- *     <Input.Prefix>$</Input.Prefix>
- *     <Input.Control inputMode="decimal" />
- *     <Input.Suffix>USDC</Input.Suffix>
- *   </Input.Group>
+ *   <TextInput.Group>
+ *     <TextInput.Prefix>$</TextInput.Prefix>
+ *     <TextInput.Control inputMode="decimal" />
+ *     <TextInput.Suffix>USDC</TextInput.Suffix>
+ *   </TextInput.Group>
  * </Field.Root>
  *
  * @see {@link https://base-ui.com/react/components/input | Base UI Input}
@@ -31,19 +31,10 @@ import * as InputGroup from './internal/InputGroup.js'
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html | WCAG 2.2 Identify Input Purpose}
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html | WCAG 2.2 Error Identification}
  */
-export namespace Input {
+export namespace TextInput {
   /** The field surface, rendered as a `div` that holds the other parts. */
   export function Group(props: Group.Props) {
-    const {
-      className,
-      invalid = false,
-      ref,
-      size,
-      success = false,
-      variant,
-      vars,
-      ...attributes
-    } = props
+    const { className, invalid = false, ref, success = false, variant, vars, ...attributes } = props
     const control = useRef<HTMLInputElement | null>(null)
     const element = useRef<HTMLDivElement | null>(null)
     const context = useMemo(() => ({ control, invalid }), [invalid])
@@ -54,13 +45,7 @@ export namespace Input {
       <InputGroup.Context.Provider value={context}>
         <div
           {...attributes}
-          {...InputGroup.styles.group({
-            className,
-            size,
-            style: props.style,
-            variant,
-            vars,
-          })}
+          {...InputGroup.styles.group({ className, style: props.style, variant, vars })}
           data-invalid={invalid || undefined}
           data-success={success || undefined}
           ref={(node) => {
@@ -77,13 +62,13 @@ export namespace Input {
     export type Props = ComponentPropsWithRef<'div'> &
       zyzz.Props.Variants<typeof InputGroup.styles.group> & {
         /**
-         * Draws the red ring and sets `aria-invalid` on `Input.Control`.
+         * Fills the field red and sets `aria-invalid` on `TextInput.Control`.
          *
          * @default false
          */
         invalid?: boolean | undefined
         /**
-         * Draws the green tint and ring. It sets no ARIA state.
+         * Ends the field with a check. It sets no ARIA state.
          *
          * @default false
          */
@@ -93,10 +78,12 @@ export namespace Input {
 
   /**
    * The native `input`. Inside `Field.Root`, Base UI links it to the label, description and error.
-   * `onValueChange` receives the new string value.
+   * `onValueChange` receives the new string value. In a group with an enabled `TextInput.Clear`,
+   * Escape empties a filled, editable control and stops there, so an enclosing dialog closes only on
+   * the next Escape.
    */
   export function Control(props: Control.Props) {
-    const { className, ref, vars, ...attributes } = props
+    const { className, onKeyDown, ref, vars, ...attributes } = props
     const group = useContext(InputGroup.Context)
 
     return (
@@ -104,6 +91,17 @@ export namespace Input {
         aria-invalid={group?.invalid || undefined}
         {...attributes}
         {...styles.control({ className, style: props.style, vars })}
+        onKeyDown={(event) => {
+          onKeyDown?.(event)
+          const input = event.currentTarget
+          if (event.defaultPrevented || event.key !== 'Escape' || !input.value) return
+          if (input.readOnly) return
+          if (!input.parentElement?.querySelector(':scope > [data-input-clear]:enabled')) return
+
+          clear(input)
+          event.preventDefault()
+          event.stopPropagation()
+        }}
         ref={(node) => {
           if (group) group.control.current = node as HTMLInputElement | null
           if (typeof ref === 'function') ref(node as HTMLInputElement | null)
@@ -119,7 +117,10 @@ export namespace Input {
       Pick<BaseUi.Input.Props, 'onValueChange' | 'render'>
   }
 
-  /** Leading content before the control, such as a currency symbol or icon. */
+  /**
+   * Leading content before the control, such as a currency symbol or an icon that gives the field
+   * its meaning, like `Search`. Icons render at 16px.
+   */
   export function Prefix(props: Prefix.Props) {
     const { className, vars, ...attributes } = props
 
@@ -130,7 +131,7 @@ export namespace Input {
     export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.prefix>
   }
 
-  /** Trailing content after the control, such as a unit. */
+  /** Trailing content after the control, such as a unit or an icon. Icons size as in `Prefix`. */
   export function Suffix(props: Suffix.Props) {
     const { className, vars, ...attributes } = props
 
@@ -142,7 +143,7 @@ export namespace Input {
   }
 
   /**
-   * Empties the control and returns focus to it. It renders a `Close` icon with
+   * Empties the control and returns focus to it. It renders a circled X with
    * `aria-label="Clear"` by default. It is visible only inside a `Field.Root` whose control has a
    * value, and calling `preventDefault` in `onClick` skips the clear.
    */
@@ -156,18 +157,28 @@ export namespace Input {
         type="button"
         {...attributes}
         {...styles.clear({ className, style: props.style, vars })}
+        data-input-clear=""
         onClick={(event) => {
           onClick?.(event)
           const input = group?.control.current
           if (event.defaultPrevented || !input) return
 
-          // The native setter and a bubbling input event reach React for controlled and uncontrolled fields.
-          Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, '')
-          input.dispatchEvent(new Event('input', { bubbles: true }))
+          clear(input)
           input.focus()
         }}
       >
-        {children ?? <Close />}
+        {children ?? (
+          // The icon set has no X Circle yet, so this draws its ring and cross at 1px.
+          <svg aria-hidden fill="none" height="1em" viewBox="0 0 16 16" width="1em">
+            <path
+              clipRule="evenodd"
+              d="M8 1.33301C11.6817 1.33318 14.666 4.31919 14.666 8.00098C14.6656 11.6824 11.6815 14.6668 8 14.667C4.31837 14.667 1.33345 11.6825 1.33301 8.00098C1.33301 4.31908 4.3181 1.33301 8 1.33301ZM8 2.33398C4.87039 2.33398 2.33301 4.87137 2.33301 8.00098C2.33345 11.1302 4.87066 13.667 8 13.667C11.1292 13.6668 13.6656 11.1301 13.666 8.00098C13.666 4.87147 11.1294 2.33416 8 2.33398Z"
+              fill="currentColor"
+              fillRule="evenodd"
+            />
+            <path d="M10 6 6 10M6 6l4 4" stroke="currentColor" strokeLinecap="round" />
+          </svg>
+        )}
       </button>
     )
   }
@@ -177,20 +188,30 @@ export namespace Input {
   }
 }
 
+/** Empties the input through the native setter and a bubbling event, which reach React for controlled and uncontrolled fields. */
+function clear(input: HTMLInputElement) {
+  Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, '')
+  input.dispatchEvent(new Event('input', { bubbles: true }))
+}
+
 namespace styles {
-  /** Scales with the group `size` and sits as far from the end edge as from the top. */
+  /**
+   * A circled X drawn in tertiary content. It sits 16px from the end edge and the top, and its hit
+   * area extends past its circle.
+   */
   export const clear = style(
     {
       alignItems: 'center',
-      backgroundColor: 'grayAlpha.200',
+      backgroundColor: 'transparent !custom',
       border: 'none !custom',
       borderRadius: 'full',
-      color: 'foreground',
+      color: 'content.tertiary',
+      cornerShape: 'round',
       cursor: 'pointer',
       display: 'inline-flex',
       flexShrink: '0 !custom',
-      fontSize: '12',
-      height: '24',
+      fontSize: '16',
+      height: '16',
       justifyContent: 'center',
       opacity: '0 !custom',
       outlineColor: 'transparent !custom',
@@ -202,15 +223,15 @@ namespace styles {
       position: 'relative',
       transform: 'scale(0.6) !custom',
       transitionDuration: '160',
-      transitionProperty: 'background-color, opacity, outline-color, transform, visibility !custom',
+      transitionProperty: 'color, opacity, outline-color, transform, visibility !custom',
       transitionTimingFunction: 'snappy',
       visibility: 'hidden',
-      width: '24',
+      width: '16',
       selectors: {
         '&::after': { content: '"" !custom', inset: '-8', position: 'absolute' },
         '&:active': { transform: 'scale(0.9) !custom', transitionDuration: '100' },
-        '&:focus-visible': { outlineColor: 'blue.700' },
-        '&:hover': { backgroundColor: 'grayAlpha.300' },
+        '&:focus-visible': { outlineColor: 'border.focus' },
+        '&:hover': { color: 'content.secondary' },
         '[data-filled] &': {
           opacity: '1 !custom',
           pointerEvents: 'auto',
@@ -218,123 +239,71 @@ namespace styles {
           visibility: 'visible',
         },
         '[data-filled] &:active': { transform: 'scale(0.9) !custom' },
-        '[data-size="large"] > &:last-child': { marginInlineEnd: '-4' },
-        '[data-size="medium"] > &': { fontSize: '12', height: '20', width: '20' },
-        '[data-size="medium"] > &:last-child': { marginInlineEnd: '-6' },
-        '[data-size="small"] > &': { fontSize: '12', height: '16', width: '16' },
-        '[data-size="small"] > &:last-child': { marginInlineEnd: '-4' },
-        // A small stacked field takes the medium size, so Clear takes the medium size too.
-        '[data-variant="stacked"] > [data-size="small"] > &': {
-          fontSize: '12',
-          height: '20',
-          width: '20',
-        },
-        '[data-variant="stacked"] > [data-size="small"] > &:last-child': {
-          marginInlineEnd: '-6',
-        },
       },
       '@media (forced-colors: active)': {
         outlineStyle: 'none !custom',
         selectors: { '&:focus-visible': { outlineStyle: 'solid !custom' } },
       },
       '@media (prefers-reduced-motion: reduce)': {
-        transitionProperty: 'background-color, opacity, outline-color, visibility !custom',
+        transitionProperty: 'color, opacity, outline-color, visibility !custom',
         selectors: {
           '&, &:active, [data-filled] &:active': { transform: 'none !custom' },
         },
       },
     },
-    { id: 'tds/web/input/clear' },
+    { id: 'tds/web/text-input/clear' },
   )
 
+  // The group carries the type, so the control inherits it. Browsers reset the tracking of a form
+  // control, so it inherits that too.
   export const control = style(
     {
       appearance: 'none !custom',
       backgroundColor: 'transparent !custom',
       border: 'none !custom',
       boxSizing: 'border-box',
-      color: 'foreground',
+      color: 'content.primary',
       flex: '1 !custom',
       font: 'inherit !custom',
+      letterSpacing: 'inherit !custom',
       minWidth: '0',
       outline: 'none !custom',
       padding: '0',
       selectors: {
         '&::-webkit-search-cancel-button': { appearance: 'none !custom', display: 'none' },
-        '&::placeholder': {
-          color: 'grayAlpha.900',
-          transitionDuration: '160',
-          transitionProperty: 'opacity !custom',
-          transitionTimingFunction: 'snappy',
-        },
-        '[data-variant="card"] > &': {
-          typography: 'heading.24',
-        },
-        // The group carries the size, so card text scales with it.
-        '[data-variant="card"][data-size="small"] &': {
-          typography: 'heading.20',
-        },
-        '[data-variant="card"][data-size="large"] &': {
-          typography: 'heading.32',
-        },
-        // The value sits below the floating label, which needs more room in a large field.
-        '[data-variant="stacked"] &': { paddingTop: '12' },
-        '[data-variant="stacked"] [data-size="large"] &': { paddingTop: '16' },
-        '[data-variant="stacked"]:not([data-focused]) &::placeholder': { opacity: '0 !custom' },
+        '&::placeholder': { color: 'content.tertiary' },
+        '&:disabled, &:disabled::placeholder': { color: 'content.subtle' },
       },
     },
-    { id: 'tds/web/input/control' },
+    { id: 'tds/web/text-input/control' },
   )
 
+  // Text adornments keep 4.5:1 contrast, while icons take the tertiary color.
   export const prefix = style(
     {
       alignItems: 'center',
-      color: 'gray.900',
+      color: 'content.secondary',
       display: 'inline-flex',
       flexShrink: '0 !custom',
       selectors: {
-        '[data-variant="card"] > &': {
-          typography: 'heading.24',
-        },
-        '[data-variant="card"][data-size="small"] &': {
-          typography: 'heading.20',
-        },
-        '[data-variant="card"][data-size="large"] &': {
-          typography: 'heading.32',
-        },
-        // The value sits below the floating label, which needs more room in a large field.
-        '[data-variant="stacked"] &': { paddingTop: '12' },
-        '[data-variant="stacked"] [data-size="large"] &': { paddingTop: '16' },
-        '[data-variant="stacked"]:not([data-filled]):not([data-focused]) &': {
-          opacity: '0 !custom',
-        },
+        '& > svg': { color: 'content.tertiary', flexShrink: '0 !custom', fontSize: '16' },
+        ':has(input:disabled) > &, :has(input:disabled) > & > svg': { color: 'content.subtle' },
       },
     },
-    { id: 'tds/web/input/prefix' },
+    { id: 'tds/web/text-input/prefix' },
   )
 
   export const suffix = style(
     {
       alignItems: 'center',
-      color: 'gray.900',
+      color: 'content.secondary',
       display: 'inline-flex',
       flexShrink: '0 !custom',
       selectors: {
-        '[data-variant="card"] > &': {
-          color: 'foreground',
-          typography: 'heading.24',
-        },
-        '[data-variant="card"][data-size="small"] &': {
-          typography: 'heading.20',
-        },
-        '[data-variant="card"][data-size="large"] &': {
-          typography: 'heading.32',
-        },
-        // The value sits below the floating label, which needs more room in a large field.
-        '[data-variant="stacked"] &': { paddingTop: '12' },
-        '[data-variant="stacked"] [data-size="large"] &': { paddingTop: '16' },
+        '& > svg': { color: 'content.tertiary', flexShrink: '0 !custom', fontSize: '16' },
+        ':has(input:disabled) > &, :has(input:disabled) > & > svg': { color: 'content.subtle' },
       },
     },
-    { id: 'tds/web/input/suffix' },
+    { id: 'tds/web/text-input/suffix' },
   )
 }

package/src/web/components/Textarea.tsx

@@ -5,8 +5,8 @@ import { variants } from '../zyzz.config.js'
 
 /**
  * A native `textarea` registered as the control of the enclosing `Field.Root`, which supplies its
- * label, description, error and disabled state. It inherits the `stacked` layout from the field
- * and defaults to three rows with vertical resizing.
+ * label, description, error and disabled state. It defaults to three rows with vertical resizing,
+ * and `variant="outlined"` draws a 1px line instead of the fill.
  *
  * - Use it for multi-line answers. Set `rows` to the expected length of the answer.
  * - `resize="auto"` grows the box with its content through `field-sizing`. Browsers without that
@@ -25,21 +25,14 @@ import { variants } from '../zyzz.config.js'
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html | WCAG 2.2 Error Identification}
  */
 export function Textarea(props: Textarea.Props) {
-  const { className, resize, rows = 3, size, variant, vars, ...attributes } = props
+  const { className, resize, rows = 3, variant, vars, ...attributes } = props
 
   return (
     <BaseUi.Field.Control
       render={
         <textarea
           {...attributes}
-          {...styles.textarea({
-            className,
-            resize,
-            size,
-            style: props.style,
-            variant,
-            vars,
-          })}
+          {...styles.textarea({ className, resize, style: props.style, variant, vars })}
           rows={rows}
         />
       }
@@ -57,53 +50,41 @@ namespace styles {
     {
       base: {
         appearance: 'none !custom',
-        backgroundColor: 'grayAlpha.100',
+        backgroundColor: 'container.regular',
+        // A transparent 1px border carries the focus border, as the inset border of `TextInput.Group` does.
         borderColor: 'transparent !custom',
+        borderRadius: 'xs',
         borderStyle: 'solid',
-        borderWidth: '2',
+        borderWidth: 'regular',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
         display: 'block',
+        // Forced colors paint transparent outlines, so this outline is the focus ring only there.
         outlineColor: 'transparent !custom',
         outlineOffset: '2',
         outlineStyle: 'solid !custom',
         outlineWidth: '2',
+        // One row is as tall as a `TextInput.Group`: 48px, with the 1px border inside it.
+        paddingBlock: '13px !custom',
+        paddingInline: '16',
         transitionDuration: '160',
         transitionProperty: 'background-color, border-color, opacity, outline-color !custom',
         transitionTimingFunction: 'snappy',
+        typography: 'body.b2',
         width: '100% !custom',
         selectors: {
-          '&:disabled': { opacity: 'disabled' },
-          '&:focus-visible': { outlineColor: 'blue.700' },
-          '&:hover:not(:disabled)': { backgroundColor: 'grayAlpha.200' },
-          '&::placeholder': {
-            color: 'grayAlpha.900',
-            transitionDuration: '160',
-            transitionProperty: 'opacity !custom',
-            transitionTimingFunction: 'snappy',
+          // `:where` keeps the hover and focus fills below the invalid and disabled fills.
+          '&:where(:hover:not(:disabled))': { backgroundColor: 'container.strong' },
+          '&:where(:focus-visible)': { backgroundColor: 'background.elevated' },
+          '&:focus-visible': { borderColor: 'border.focus' },
+          '&::placeholder': { color: 'content.tertiary' },
+          '&[aria-invalid="true"], [data-invalid] &': { backgroundColor: 'container.negative' },
+          '&:disabled': {
+            backgroundColor: 'container.subtle',
+            color: 'content.subtle',
+            cursor: 'default',
           },
-          '&[aria-invalid="true"], [data-invalid] &': { borderColor: 'red.800' },
-          '&[aria-invalid="true"]:focus-visible, [data-invalid] &:focus-visible': {
-            borderColor: 'transparent !custom',
-            outlineColor: 'red.800',
-          },
-          // Card sizes match Input: medium is the default card.
-          '&[data-variant="card"][data-size="small"]': {
-            borderRadius: '8',
-            padding: '12',
-          },
-          '&[data-variant="card"][data-size="large"]': { borderRadius: '16', padding: '24' },
-          // The first line sits below the floating label, as in a stacked Input of the same size.
-          '[data-variant="stacked"] > &': { gridArea: '1 / 1', paddingTop: '14' },
-          '[data-variant="stacked"] > &[data-size="large"]': { paddingTop: '22' },
-          // A small stacked field takes the medium size, as Input does.
-          '[data-variant="stacked"] > &[data-size="small"]': {
-            borderRadius: '12',
-            paddingBottom: '8',
-            paddingInline: '14',
-            typography: 'copy.14',
-          },
-          '[data-variant="stacked"]:not([data-focused]) &::placeholder': { opacity: '0 !custom' },
+          '&:disabled::placeholder': { color: 'content.subtle' },
         },
         '@media (forced-colors: active)': {
           outlineStyle: 'none !custom',
@@ -113,51 +94,25 @@ namespace styles {
           transitionProperty: 'background-color, border-color, opacity, outline-color !custom',
         },
       },
-      defaultVariants: { resize: 'vertical', size: 'medium', variant: 'default' },
+      defaultVariants: { resize: 'vertical', variant: 'default' },
       variants: {
         resize: {
           auto: { fieldSizing: 'content !custom', resize: 'none !custom' },
           none: { resize: 'none !custom' },
           vertical: { resize: 'vertical !custom' },
         },
-        // One row is as tall as an `Input.Group` of the same size: 32, 40 or 56px. Paddings leave
-        // room for the 2px border that carries the invalid ring.
-        size: {
-          large: {
-            borderRadius: '16',
-            paddingBlock: '14',
-            paddingInline: '18',
-            typography: 'copy.16',
-          },
-          medium: {
-            borderRadius: '12',
-            paddingBlock: '8',
-            paddingInline: '14',
-            typography: 'copy.14',
-          },
-          small: {
-            borderRadius: '8',
-            paddingBlock: '5px !custom',
-            paddingInline: '10',
-            typography: 'copy.13',
-          },
-        },
         variant: {
-          card: {
-            backgroundColor: 'background.surface',
-            borderColor: 'grayAlpha.200',
-            borderRadius: '12',
-            borderStyle: 'solid',
-            borderWidth: '1',
-            padding: '16',
+          default: {},
+          // A 1px line and no fill. Focus darkens the line, and an invalid value fills it red.
+          outlined: {
+            backgroundColor: 'transparent !custom',
+            borderColor: 'line.primary',
             selectors: {
-              '&:hover:not(:disabled)': {
-                backgroundColor: 'background.surface',
-                borderColor: 'grayAlpha.400',
+              '&:where([aria-invalid="true"], [data-invalid] *)': {
+                borderColor: 'border.negative',
               },
             },
           },
-          default: {},
         },
       },
     },