@tempoxyz/ds 0.2.6 → 0.3.1

package/src/web/components/Select.tsx

@@ -3,7 +3,7 @@ import type { ComponentPropsWithRef } from 'react'
 import type * as zyzz from 'zyzz'
 import { Check } from '../icons/Check.js'
 import { ChevronDown } from '../icons/ChevronDown.js'
-import { style } from '../zyzz.config.js'
+import { style, variants } from '../zyzz.config.js'
 import * as InputGroup from './internal/InputGroup.js'
 import * as Listbox from './internal/Listbox.js'
 
@@ -207,6 +207,20 @@ export namespace Select {
       }
   }
 
+  /**
+   * Leading text in the trigger, before `Select.Value`, in the secondary color. It names what a
+   * filter selects, such as By in By Anyone. Name the trigger with a label or `aria-label` too.
+   */
+  export function Prefix(props: Prefix.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <span {...attributes} {...styles.prefix({ className, style: props.style, vars })} />
+  }
+
+  export namespace Prefix {
+    export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.prefix>
+  }
+
   /**
    * Owns the selected value and open state. Pass `value` and `onValueChange` to control it, and
    * `multiple` to allow several values.
@@ -240,22 +254,26 @@ export namespace Select {
       zyzz.Props.Variants<typeof Listbox.styles.separator>
   }
 
-  /** Matches `Input.Group` in size, fill, radius and invalid treatment. */
+  /**
+   * Matches `TextInput.Group` in height, variant, fill, radius and invalid treatment, and spaces
+   * its parts 6px apart. Focus keeps the fill and draws a 2px ring, which adds 2px to the padding
+   * on each side. A disabled trigger dims to 40% opacity, and an open one takes the hover fill.
+   */
   export function Trigger(props: Trigger.Props) {
-    const { className, invalid, size, variant, vars, ...attributes } = props
+    const { className, invalid, variant, vars, ...attributes } = props
 
     return (
       <BaseUi.Select.Trigger
         {...attributes}
         {...InputGroup.styles.group({
-          className,
-          size,
+          className: styles.trigger({ className, variant }).className,
           style: props.style,
           variant,
           vars,
         })}
         aria-invalid={invalid || attributes['aria-invalid']}
         data-invalid={invalid || undefined}
+        data-select-trigger=""
       />
     )
   }
@@ -264,7 +282,7 @@ export namespace Select {
     export type Props = Omit<ComponentPropsWithRef<'button'>, 'disabled'> &
       zyzz.Props.Variants<typeof InputGroup.styles.group> &
       Pick<BaseUi.Select.Trigger.Props, 'disabled' | 'nativeButton' | 'render'> & {
-        /** Sets `aria-invalid` and `data-invalid`, which show the invalid ring. */
+        /** Sets `aria-invalid` and `data-invalid`, which fill the trigger red. */
         invalid?: boolean | undefined
       }
   }
@@ -279,6 +297,7 @@ export namespace Select {
     return (
       <BaseUi.Select.Value
         {...attributes}
+        data-select-value=""
         {...styles.value({ className, style: props.style, vars })}
       />
     )
@@ -294,24 +313,79 @@ export namespace Select {
 namespace styles {
   export const icon = style(
     {
-      color: 'gray.700',
+      color: 'content.secondary',
       display: 'inline-flex',
       flexShrink: '0 !custom',
-      fontSize: '16',
+      fontSize: '14',
       transitionDuration: '200',
       transitionProperty: 'transform !custom',
       transitionTimingFunction: 'spring',
-      selectors: {
-        '&[data-popup-open]': { transform: 'rotate(180deg) !custom' },
-        '[data-size="medium"] > &': { fontSize: '14' },
-        '[data-size="small"] > &': { fontSize: '12' },
-        '[data-variant="stacked"] > [data-size="small"] > &': { fontSize: '14' },
-      },
+      selectors: { '&[data-popup-open]': { transform: 'rotate(180deg) !custom' } },
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'none !custom' },
     },
     { id: 'tds/web/select/icon' },
   )
 
+  export const prefix = style(
+    {
+      alignItems: 'center',
+      color: 'content.secondary',
+      display: 'inline-flex',
+      flexShrink: '0 !custom',
+    },
+    { id: 'tds/web/select/prefix' },
+  )
+
+  // The trigger also takes the shared field surface, whose stylesheet can land anywhere in the
+  // cascade, so each rule here outranks it with an attribute that Base UI sets. Unlike that
+  // surface, focus keeps the fill and a disabled trigger keeps its colors at 40% opacity.
+  export const trigger = variants(
+    {
+      base: {
+        selectors: {
+          '&[data-popup-open]:not([data-invalid], :disabled, [data-disabled])': {
+            backgroundColor: 'container.strong',
+          },
+          '&[role="combobox"]': { columnGap: '6' },
+          // The 2px focus ring adds its width to the padding, so the content moves 2px inward and
+          // 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' },
+          '&[role="combobox"]:is(:disabled, [data-disabled])': {
+            color: 'content.primary',
+            opacity: 'disabled',
+          },
+        },
+      },
+      defaultVariants: { variant: 'default' },
+      variants: {
+        variant: {
+          default: {
+            selectors: {
+              '&[role="combobox"]:focus-visible:not([data-invalid], [data-invalid] *)': {
+                backgroundColor: 'container.regular',
+              },
+              '&[role="combobox"]:is(:disabled, [data-disabled])': {
+                backgroundColor: 'container.regular',
+              },
+            },
+          },
+          outlined: {
+            selectors: {
+              '&[role="combobox"]:focus-visible:not([data-invalid], [data-invalid] *)': {
+                backgroundColor: 'transparent !custom',
+              },
+              '&[role="combobox"]:is(:disabled, [data-disabled])': {
+                backgroundColor: 'transparent !custom',
+              },
+            },
+          },
+        },
+      },
+    },
+    { id: 'tds/web/select/trigger' },
+  )
+
   export const value = style(
     {
       flexBasis: '0',
@@ -320,18 +394,7 @@ namespace styles {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
-      selectors: {
-        '&[data-placeholder]': { color: 'gray.900' },
-        '[data-variant="card"] > &': {
-          typography: 'heading.24',
-        },
-        // 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]) &[data-placeholder]': {
-          opacity: '0 !custom',
-        },
-      },
+      selectors: { '&[data-placeholder]': { color: 'content.tertiary' } },
     },
     { id: 'tds/web/select/value' },
   )

package/src/web/components/Separator.tsx

@@ -1,18 +1,24 @@
 import * as BaseUi from '@base-ui/react/separator'
-import type { ComponentPropsWithRef } from 'react'
+import { useRender } from '@base-ui/react/use-render'
+import type { ComponentPropsWithRef, ReactNode } from 'react'
 import type * as zyzz from 'zyzz'
 import { style } from '../zyzz.config.js'
 
 /**
  * A 1px rule that renders a `div` with `role="separator"` and a matching `aria-orientation`.
- * A vertical separator stretches to the height of its flex row, with a minimum of `1em`.
+ * A horizontal separator is 16px tall and centers its rule, so it keeps 7.5px of space on each
+ * side. A vertical separator is the 1px rule alone, and stretches to the height of its flex row,
+ * with a minimum of `1em`. With `children`, a horizontal separator centers them as a label
+ * between two rules, such as `or`.
  *
  * - Place it between thematic groups, such as menu sections or toolbar clusters.
+ * - Label it only to join two alternatives, such as two ways to sign in.
  * - Do not use separators in place of headings to structure content.
  *
  * @example
  * <Separator />
  * <Separator orientation="vertical" />
+ * <Separator>or</Separator>
  *
  * @see {@link https://base-ui.com/react/components/separator | Base UI Separator}
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role | MDN separator role}
@@ -20,31 +26,113 @@ import { style } from '../zyzz.config.js'
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
  */
 export function Separator(props: Separator.Props) {
-  const { className, vars, ...attributes } = props
+  const { children, className, orientation, render, vars, ...attributes } = props
+
+  // A separator hides its children from assistive technology, so a labeled one renders a plain
+  // `div` whose label screen readers read in place, between two decorative rules. Children that
+  // React renders as nothing, such as `false` from a condition, leave the separator unlabeled.
+  const labeled =
+    children !== undefined && children !== null && typeof children !== 'boolean' && children !== ''
+  if (labeled && orientation !== 'vertical') return <Labeled {...props} />
 
   return (
     <BaseUi.Separator
       {...attributes}
       {...styles.separator({ className, style: props.style, vars })}
+      orientation={orientation}
+      render={render}
     />
   )
 }
 
+/** A labeled separator, in the element that `render` names, or a `div`. */
+function Labeled(props: Separator.Props) {
+  const { children, className, orientation: _orientation, ref, render, vars, ...attributes } = props
+
+  return useRender({
+    defaultTagName: 'div',
+    props: {
+      ...attributes,
+      ...styles.labeled({ className, style: props.style, vars }),
+      children: (
+        <>
+          <span aria-hidden="true" {...styles.rule()} />
+          <span {...styles.label()}>{children}</span>
+          <span aria-hidden="true" {...styles.rule()} />
+        </>
+      ),
+    },
+    ref,
+    render,
+    // A render function reads the state of a Base UI separator, which a label keeps horizontal.
+    state: { orientation: 'horizontal' as const },
+  })
+}
+
 export namespace Separator {
   export type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> &
     zyzz.Props.Variants<typeof styles.separator> &
-    Pick<BaseUi.Separator.Props, 'orientation' | 'render'>
+    Pick<BaseUi.Separator.Props, 'orientation' | 'render'> & {
+      /**
+       * A label between two rules, such as `or`, read in place by screen readers. A vertical
+       * separator ignores it. Absent, the separator is a single rule.
+       */
+      children?: ReactNode | undefined
+    }
 }
 
 namespace styles {
+  export const label = style(
+    { color: 'content.tertiary', flexShrink: '0 !custom', typography: 'body.b3' },
+    { id: 'tds/web/separator/label' },
+  )
+
+  // The label sits 16px from each rule.
+  export const labeled = style(
+    {
+      alignItems: 'center',
+      alignSelf: 'stretch',
+      columnGap: '16',
+      display: 'flex',
+      flexShrink: '0 !custom',
+      width: '100% !custom',
+    },
+    { id: 'tds/web/separator/labeled' },
+  )
+
+  export const rule = style(
+    { backgroundColor: 'line.secondary', flexGrow: '1 !custom', height: '1' },
+    { id: 'tds/web/separator/rule' },
+  )
+
+  // A horizontal separator centers its rule in a 16px box, as the labeled one does. The rule is a
+  // pseudo-element, so a separator rendered as a void element, such as `hr`, still draws it. The
+  // reset drops the border and margins that a browser gives an `hr`.
   export const separator = style(
     {
       alignSelf: 'stretch',
-      backgroundColor: 'grayAlpha.300',
+      borderStyle: 'none',
       flexShrink: '0 !custom',
+      margin: '0',
       selectors: {
-        '&[data-orientation="horizontal"]': { height: '1', width: '100% !custom' },
-        '&[data-orientation="vertical"]': { minHeight: '1em !custom', width: '1' },
+        '&[data-orientation="horizontal"]': {
+          height: '16',
+          position: 'relative',
+          width: '100% !custom',
+        },
+        '&[data-orientation="horizontal"]::before': {
+          backgroundColor: 'line.secondary',
+          content: '"" !custom',
+          height: '1',
+          insetInline: '0',
+          position: 'absolute',
+          top: 'calc(50% - 0.5px) !custom',
+        },
+        '&[data-orientation="vertical"]': {
+          backgroundColor: 'line.secondary',
+          minHeight: '1em !custom',
+          width: '1',
+        },
       },
     },
     { id: 'tds/web/separator' },