@tempoxyz/ds 0.3.6 → 0.3.9

package/src/web/components/Button.tsx

@@ -42,6 +42,7 @@ export function Button(props: Button.Props) {
     loading = false,
     shape,
     size,
+    underline,
     variant,
     vars,
     ...attributes
@@ -50,13 +51,22 @@ export function Button(props: Button.Props) {
   return (
     <BaseUi.Button
       {...attributes}
-      {...styles.button({ appearance, className, shape, size, style: props.style, variant, vars })}
+      {...styles.button({
+        appearance,
+        className,
+        shape,
+        size,
+        style: props.style,
+        underline,
+        variant,
+        vars,
+      })}
       aria-busy={loading || undefined}
       data-loading={loading || undefined}
       disabled={disabled || loading}
     >
-      <span {...styles.content({ loading })}>{children}</span>
-      {loading && <Spinner aria-label="Loading" {...styles.spinner()} />}
+      {loading && <Spinner aria-label="Loading" />}
+      <span {...styles.content()}>{children}</span>
     </BaseUi.Button>
   )
 }
@@ -66,8 +76,8 @@ export namespace Button {
     zyzz.Props.Variants<typeof styles.button> & {
       disabled?: boolean | undefined
       /**
-       * Disables the button, sets `aria-busy`, and swaps the label for a `Spinner` labelled
-       * "Loading" while keeping the button's width.
+       * Disables the button, sets `aria-busy`, and renders a `Spinner` labelled "Loading" before
+       * the label, which stays visible.
        *
        * @default false
        */
@@ -87,6 +97,7 @@ export namespace Button {
       render,
       shape,
       size,
+      underline,
       variant,
       vars,
       ...attributes
@@ -96,8 +107,17 @@ export namespace Button {
       defaultTagName: 'a',
       props: {
         ...attributes,
-        ...styles.button({ appearance, className, shape, size, style: props.style, variant, vars }),
-        children: <span {...styles.content({ loading: false })}>{children}</span>,
+        ...styles.button({
+          appearance,
+          className,
+          shape,
+          size,
+          style: props.style,
+          underline,
+          variant,
+          vars,
+        }),
+        children: <span {...styles.content()}>{children}</span>,
       },
       ref,
       render,
@@ -163,9 +183,18 @@ namespace styles {
             flexShrink: '0 !custom',
             minWidth: '0',
             paddingInline: '0',
-            selectors: { '& > span:first-child': { minWidth: '0 !custom' } },
+            // A loading icon button shows the spinner alone in the center of the circle.
+            selectors: {
+              '& > span:last-child': { minWidth: '0 !custom' },
+              '&[data-loading] > span:last-child': { display: 'none' },
+            },
           },
         },
+        // The large Platform Icon Button draws a 20px icon.
+        {
+          when: { shape: 'icon', size: 'large' },
+          style: { selectors: { '& > span > svg': { fontSize: '20' } } },
+        },
         // The Platform Icon Button fills its primary circle a step lighter than the primary
         // Button in light mode.
         {
@@ -261,7 +290,13 @@ namespace styles {
           },
         },
       ],
-      defaultVariants: { appearance: 'base', shape: 'default', size: 'medium', variant: 'primary' },
+      defaultVariants: {
+        appearance: 'base',
+        shape: 'default',
+        size: 'medium',
+        underline: false,
+        variant: 'primary',
+      },
       variants: {
         /**
          * The surface under the button: the page for `base`, an inverse surface, such as
@@ -284,18 +319,18 @@ namespace styles {
             borderRadius: 'sm',
             height: '48',
             paddingInline: '32',
-            selectors: { '& > span:first-child': { minWidth: '1rem !custom' } },
+            selectors: { '& > span:last-child': { minWidth: '1rem !custom' } },
           },
           medium: {
             borderRadius: 'sm',
             height: '40',
             paddingInline: '24',
-            selectors: { '& > span:first-child': { minWidth: '2rem !custom' } },
+            selectors: { '& > span:last-child': { minWidth: '2rem !custom' } },
           },
           small: {
             height: '32',
             paddingInline: '16',
-            selectors: { '& > span:first-child': { minWidth: '3rem !custom' } },
+            selectors: { '& > span:last-child': { minWidth: '3rem !custom' } },
           },
           xsmall: {
             borderRadius: 'full',
@@ -303,9 +338,21 @@ namespace styles {
             height: '24',
             paddingInline: '12',
             typography: 'body.b3Strong',
-            selectors: { '& > span > svg': { fontSize: '12' } },
+            selectors: {
+              '& > [role="progressbar"]': { height: '12', width: '12' },
+              '& > span > svg': { fontSize: '12' },
+            },
           },
         },
+        /**
+         * Underlines the label, such as a `text` button inside running content.
+         *
+         * @default false
+         */
+        underline: {
+          false: {},
+          true: { textDecoration: 'underline !custom', textUnderlineOffset: '0.2em !custom' },
+        },
         // Each pressed fill follows its hover fill, so it wins while the pointer stays over the
         // button.
         variant: {
@@ -354,7 +401,7 @@ namespace styles {
             padding: '0',
             typography: 'body.b2Strong',
             selectors: {
-              '& > span:first-child': { minWidth: '0 !custom' },
+              '& > span:last-child': { minWidth: '0 !custom' },
               '& > span > svg': { fontSize: '12' },
               '&:focus-visible': { outlineOffset: '2' },
               '&:hover:not(:disabled)': { color: 'content.primary' },
@@ -366,30 +413,13 @@ namespace styles {
     { id: 'tds/web/button' },
   )
 
-  export const content = variants(
+  export const content = style(
     {
-      base: {
-        alignItems: 'inherit !custom',
-        columnGap: 'inherit !custom',
-        display: 'inline-flex',
-        justifyContent: 'center',
-        transitionDuration: '160',
-        transitionProperty: 'opacity, visibility !custom',
-        transitionTimingFunction: 'snappy',
-      },
-      defaultVariants: { loading: false },
-      variants: { loading: { false: {}, true: { opacity: '0 !custom', visibility: 'hidden' } } },
+      alignItems: 'inherit !custom',
+      columnGap: 'inherit !custom',
+      display: 'inline-flex',
+      justifyContent: 'center',
     },
     { id: 'tds/web/button/content' },
   )
-
-  export const spinner = style(
-    {
-      insetBlockStart: '50% !custom',
-      insetInlineStart: '50% !custom',
-      position: 'absolute',
-      translate: '-50% -50% !custom',
-    },
-    { id: 'tds/web/button/spinner' },
-  )
 }

package/src/web/components/Dialog.tsx

@@ -114,6 +114,8 @@ export namespace Dialog {
    * - `stacked`: puts a `Dialog.Nav` above left-aligned text, for step 2 onward of a flow.
    * - `centered`: centers the hero and the text below a `Dialog.Nav`, for acknowledgments,
    *   onboarding, progress and success.
+   * - `hero`: centers the parts as `centered` does, without the 16px below the `Dialog.Nav`, for
+   *   a hero that brings its own space above it, such as a `Visual`.
    */
   export function Header(props: Header.Props) {
     const { className, layout, vars, ...attributes } = props
@@ -328,6 +330,15 @@ export namespace styles {
             textAlign: 'center',
             selectors: { '& > :is(div, h2, p)': { alignSelf: 'stretch' } },
           },
+          // A hero header centers its parts as a centered one does, directly below the nav row.
+          hero: {
+            alignItems: 'center',
+            textAlign: 'center',
+            selectors: {
+              '& > :is(div, h2, p)': { alignSelf: 'stretch' },
+              '& > [data-dialog-nav]': { marginBottom: '0' },
+            },
+          },
           // The text keeps 16px clear of the 40px close button, and starts 8px lower to meet it.
           inline: {
             selectors: { '[data-close-button] &': { paddingInlineEnd: '56', paddingTop: '8' } },

package/src/web/components/ListGroup.tsx

@@ -211,8 +211,10 @@ export namespace ListGroup {
 
   /**
    * Holds the selected `value` of the rows inside it, each a radio with its own `value`, in a
-   * `radiogroup` element. The rows stack 12px apart, each in its own bordered block. The group is
-   * one Tab stop, and arrow keys move focus and selection together. Pass the choices as a type
+   * `radiogroup` element. The rows stack 12px apart. The group is one Tab stop, and arrow keys move
+   * focus and selection together. `variant` sets how a row shows its selection: `radio` rows sit in
+   * bordered blocks with a ring at the end, and `option` rows, such as the accounts of a picker, pad
+   * 12px without a border or ring and fill when selected. Defaults to `variant="radio"`. Pass the choices as a type
    * argument, such as `ListGroup.RadioGroup<'maya' | 'acme'>`, to narrow `value`, `defaultValue`
    * and `onValueChange`.
    *
@@ -230,12 +232,13 @@ export namespace ListGroup {
    * </ListGroup.RadioGroup>
    */
   export function RadioGroup<const value extends string = string>(props: RadioGroup.Props<value>) {
-    const { className, vars, ...attributes } = props
+    const { className, variant, vars, ...attributes } = props
 
     return (
       <BaseUiRadioGroup.RadioGroup
         {...attributes}
-        {...styles.radioGroup({ className, style: props.style, vars })}
+        data-variant={variant ?? 'radio'}
+        {...styles.radioGroup({ className, style: props.style, variant, vars })}
       />
     )
   }
@@ -466,7 +469,7 @@ namespace styles {
           paddingInline: '8',
           width: 'auto !custom',
         },
-        '& [data-select-trigger]:not(:disabled, [data-disabled], [data-invalid], [aria-invalid="true"])':
+        '& [data-select-trigger][role="combobox"]:is(*, :hover, [data-popup-open]):not(:disabled, [data-disabled], [data-invalid], [aria-invalid="true"])':
           {
             backgroundColor: 'transparent !custom',
           },
@@ -612,6 +615,12 @@ namespace styles {
           boxShadow: 'inset 0 0 0 5px currentColor !custom',
           color: 'content.primary',
         },
+        // An option row shows its selection with its fill, so its radio stays focusable but unseen.
+        '[data-variant="option"] > [data-radio] > &': {
+          opacity: '0 !custom',
+          pointerEvents: 'none',
+          position: 'absolute',
+        },
       },
       '@media (prefers-reduced-motion: reduce)': { transitionProperty: 'color' },
     },
@@ -627,6 +636,16 @@ namespace styles {
         rowGap: '12',
         typography: 'body.b2',
       },
+      defaultVariants: { variant: 'radio' },
+      variants: {
+        /**
+         * How a row shows its selection: `radio` with a bordered block and a ring, or `option` with
+         * a fill and no border.
+         *
+         * @default 'radio'
+         */
+        variant: { option: {}, radio: {} },
+      },
     },
     { id: 'tds/web/list-group/radio-group' },
   )
@@ -672,7 +691,7 @@ namespace styles {
         // The block keeps a 16px radius with 16px sides, below the usual one and a half times.
         variant: {
           boxed: {
-            backgroundColor: 'background.secondary',
+            backgroundColor: 'background.elevated',
             borderColor: 'line.secondary',
             borderRadius: 'sm',
             borderStyle: 'solid',
@@ -682,7 +701,7 @@ namespace styles {
           },
           plain: {},
           spaced: {
-            backgroundColor: 'background.secondary',
+            backgroundColor: 'background.elevated',
             borderColor: 'line.secondary',
             borderRadius: 'sm',
             borderStyle: 'solid',
@@ -804,10 +823,37 @@ namespace styles {
             cursor: 'default',
             opacity: '0.4 !custom',
           },
+          // An option row keeps a transparent 1px border inside its 12px padding. It fills on hover
+          // and when selected, and draws the focus ring as an outline.
+          '[data-variant="option"] > &[data-radio]': {
+            backgroundColor: 'transparent !custom',
+            borderColor: 'transparent !custom',
+            paddingBlock: 'calc(0.75rem - 1px) !custom',
+            paddingInline: 'calc(0.75rem - 1px) !custom',
+            transitionProperty: 'background-color, opacity, outline-color, scale !custom',
+          },
+          '[data-variant="option"] > &[data-radio]:hover:not(:has(> [data-disabled]))': {
+            backgroundColor: 'action.tertiary.fill.hover',
+            borderColor: 'transparent !custom',
+          },
+          '[data-variant="option"] > &[data-radio]:has(> [data-checked]):is(*, :hover)': {
+            backgroundColor: 'container.subtle',
+            borderColor: 'transparent !custom',
+            borderWidth: 'regular',
+          },
+          '[data-variant="option"] > &[data-radio]:has(> [role="radio"]:focus-visible)': {
+            borderColor: 'transparent !custom',
+            borderWidth: 'regular',
+            outlineColor: 'border.focus',
+            outlineOffset: '-2',
+          },
         },
         '@media (prefers-reduced-motion: reduce)': {
           selectors: {
             '&[data-radio]': { transitionProperty: 'background-color, border-color, opacity' },
+            '[data-variant="option"] > &[data-radio]': {
+              transitionProperty: 'background-color, opacity, outline-color',
+            },
             '&[data-radio]:active': { scale: 'none !custom' },
           },
         },

package/src/web/components/Select.tsx

@@ -255,9 +255,10 @@ export namespace Select {
   }
 
   /**
-   * 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.
+   * Matches `TextInput.Group` in height, variant, radius and invalid treatment, and spaces its parts
+   * 6px apart. The `default` trigger takes the quiet control fill, which darkens on hover. 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, variant, vars, ...attributes } = props
@@ -338,13 +339,14 @@ namespace styles {
 
   // 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.
+  // surface, the trigger fills with the quiet control fill, 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"][data-popup-open]:not([data-invalid], :disabled, [data-disabled])': {
+            backgroundColor: 'action.secondary.fill.hover',
           },
           '&[role="combobox"]': { columnGap: '6' },
           // The 2px focus ring adds its width to the padding, so the content moves 2px inward and
@@ -363,11 +365,16 @@ namespace styles {
         variant: {
           default: {
             selectors: {
+              '&[role="combobox"]:not([data-invalid], [data-invalid] *)': {
+                backgroundColor: 'container.control',
+              },
+              '&[role="combobox"]:hover:not([data-invalid], [data-invalid] *, :disabled, [data-disabled])':
+                { backgroundColor: 'action.secondary.fill.hover' },
               '&[role="combobox"]:focus-visible:not([data-invalid], [data-invalid] *)': {
-                backgroundColor: 'container.regular',
+                backgroundColor: 'container.control',
               },
               '&[role="combobox"]:is(:disabled, [data-disabled])': {
-                backgroundColor: 'container.regular',
+                backgroundColor: 'container.control',
               },
             },
           },

package/src/web/components/SidebarMenu.tsx

@@ -12,7 +12,9 @@ import {
 import type * as zyzz from 'zyzz'
 import { ChevronDown } from '../icons/ChevronDown.js'
 import { ChevronRight } from '../icons/ChevronRight.js'
+import { Close } from '../icons/Close.js'
 import { style, variants } from '../zyzz.config.js'
+import { Button } from './Button.js'
 import * as TabBar from './internal/TabBar.js'
 import * as Text from './internal/Text.js'
 
@@ -183,7 +185,8 @@ export namespace SidebarMenu {
    * with `aria-current="page"`, and sets its label in the strong weight. Keyboard focus draws a
    * 2px ring inside the row and moves its content 2px inward.
    *
-   * Inside an `AppShell`, `tabBar` repeats the item in the bottom bar below 768px, with the same
+   * Inside an `AppShell`, `tabBar` repeats the item in the bottom bar wherever the drawer replaces
+   * the sidebar (below 1024px, or below 768px with `collapse`), with the same
    * `href`, `render` and handlers. In an `AppShell` with `collapse`, the sidebar shows only the
    * first element of each item from 768px to 1023px, such as its icon, and keeps its text as the
    * accessible name.
@@ -232,7 +235,7 @@ export namespace SidebarMenu {
       Omit<zyzz.Props.Variants<typeof styles.item>, 'active'> & {
         active?: boolean | undefined
         /**
-         * Repeats the item in the bottom bar of an `AppShell` below 768px: `tab` as an icon in the
+         * Repeats the item in the bottom bar of an `AppShell` wherever the drawer replaces the sidebar: `tab` as an icon in the
          * tab bar, or `action` as the floating action button beside it. Give the tab bar up to
          * three items and one action. Absent, the item stays in the sidebar drawer only.
          */
@@ -262,6 +265,101 @@ export namespace SidebarMenu {
     export type Props = ComponentPropsWithRef<'span'> & zyzz.Props.Variants<typeof styles.logo>
   }
 
+  /**
+   * Renders the brand at the top of a sidebar, such as a 20px `TempoLogo`, in the primary content
+   * color and 12px from the start edge of the items. Put it in `AppShell.SidebarHeader`. In an
+   * `AppShell` with `collapse`, it centers its content from 768px to 1023px, which fits
+   * `TempoLogo` with `type="mark"`.
+   *
+   * @example
+   * <AppShell.SidebarHeader>
+   *   <SidebarMenu.Mark>
+   *     <TempoLogo aria-label="Tempo" />
+   *   </SidebarMenu.Mark>
+   * </AppShell.SidebarHeader>
+   */
+  export function Mark(props: Mark.Props) {
+    const { className, vars, ...attributes } = props
+
+    return <div {...attributes} {...styles.mark({ className, style: props.style, vars })} />
+  }
+
+  export namespace Mark {
+    export type Props = ComponentPropsWithRef<'div'> & zyzz.Props.Variants<typeof styles.mark>
+  }
+
+  /**
+   * Renders a card at the bottom of a sidebar that promotes one task, such as setting up a
+   * passkey: `title`, an optional dismiss button, `children` as the description, then `action`,
+   * which spans the card. The card is a `group` named by its title. Put it in
+   * `AppShell.SidebarFooter`, above the account row. The collapsed sidebar of an `AppShell` with
+   * `collapse` hides it from 768px to 1023px.
+   *
+   * @example
+   * <SidebarMenu.Promo
+   *   action={
+   *     <Button size="small" variant="secondary">
+   *       Set up
+   *     </Button>
+   *   }
+   *   onDismiss={dismiss}
+   *   title="Set up a passkey"
+   * >
+   *   Sign in with Face ID or Touch ID instead of a code.
+   * </SidebarMenu.Promo>
+   */
+  export function Promo(props: Promo.Props) {
+    const { action, children, className, onDismiss, title, vars, ...attributes } = props
+    const id = useId()
+
+    return (
+      <div
+        aria-labelledby={id}
+        role="group"
+        {...attributes}
+        {...styles.promo({ className, style: props.style, vars })}
+      >
+        <div {...styles.promoHeader()}>
+          <span id={id} {...styles.promoTitle()}>
+            {title}
+          </span>
+          {onDismiss && (
+            <Button
+              aria-label="Dismiss"
+              onClick={onDismiss}
+              shape="icon"
+              size="small"
+              variant="tertiary"
+            >
+              <Close />
+            </Button>
+          )}
+        </div>
+        {children !== undefined && children !== null && (
+          <p {...styles.promoDescription()}>{children}</p>
+        )}
+        {action}
+      </div>
+    )
+  }
+
+  export namespace Promo {
+    export type Props = Omit<ComponentPropsWithRef<'div'>, 'title'> &
+      zyzz.Props.Variants<typeof styles.promo> & {
+        /** The call to action under the description, such as a small `secondary` `Button`. */
+        action?: ReactNode | undefined
+        /** The description in the secondary color. Absent, the action follows the title. */
+        children?: ReactNode | undefined
+        /**
+         * Called when the dismiss button is pressed. Remove the card in it. Absent, the card
+         * renders no dismiss button.
+         */
+        onDismiss?: (() => void) | undefined
+        /** The heading of the card, which names its group. */
+        title: ReactNode
+      }
+  }
+
   /**
    * Renders the `<nav>` landmark, labelled `Main` unless you pass `aria-label`. Give each
    * landmark on a page a distinct label. `size` sets 32, 36 or 56px rows, and `small` also uses
@@ -504,12 +602,12 @@ namespace styles {
       base: {
         display: 'flex',
         flexDirection: 'column',
-        rowGap: '2',
+        rowGap: '4',
         selectors: {
           // With the row gap of the menu, groups sit 24px below preceding content, or 16px in a
           // small menu.
-          '* + &': { marginTop: '1.375rem !custom' },
-          '[data-sidebar-menu-size="large"] * + &': { marginTop: '20' },
+          '* + &': { marginTop: '20' },
+          '[data-sidebar-menu-size="small"] &': { rowGap: '2' },
           '[data-sidebar-menu-size="small"] * + &': { marginTop: '0.875rem !custom' },
         },
       },
@@ -654,11 +752,64 @@ namespace styles {
     { id: 'tds/web/sidebar-menu/logo' },
   )
 
+  export const mark = variants(
+    {
+      base: {
+        alignItems: 'center',
+        color: 'content.primary',
+        display: 'flex',
+        paddingInlineStart: '12',
+        '@media (min-width: 768px) and (max-width: 1023px)': {
+          selectors: {
+            '[data-app-shell-rail] &': { justifyContent: 'center', paddingInlineStart: '0' },
+          },
+        },
+      },
+    },
+    { id: 'tds/web/sidebar-menu/mark' },
+  )
+
+  // A box at the `sm` radius pads by 16px.
+  export const promo = variants(
+    {
+      base: {
+        backgroundColor: 'container.regular',
+        borderRadius: 'sm',
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '16',
+        rowGap: '12',
+        '@media (min-width: 768px) and (max-width: 1023px)': {
+          selectors: { '[data-app-shell-rail] &': { display: 'none !custom' } },
+        },
+      },
+    },
+    { id: 'tds/web/sidebar-menu/promo' },
+  )
+
+  export const promoDescription = style(
+    { color: 'content.secondary', margin: '0', typography: 'body.b3' },
+    { id: 'tds/web/sidebar-menu/promo-description' },
+  )
+
+  // The dismiss button aligns its top edge with the first line of the title.
+  export const promoHeader = style(
+    { alignItems: 'flex-start', columnGap: '8', display: 'flex' },
+    { id: 'tds/web/sidebar-menu/promo-header' },
+  )
+
+  export const promoTitle = style(
+    { color: 'content.primary', flex: '1 !custom', minWidth: '0', typography: 'body.b2Strong' },
+    { id: 'tds/web/sidebar-menu/promo-title' },
+  )
+
   export const root = variants(
     {
-      base: { display: 'flex', flexDirection: 'column', minWidth: '0', rowGap: '2' },
+      // The Platform Wallet Sidebar spaces its items by 4px. Small rows keep 2px.
+      base: { display: 'flex', flexDirection: 'column', minWidth: '0', rowGap: '4' },
       defaultVariants: { size: 'medium' },
-      variants: { size: { large: { rowGap: '4' }, medium: {}, small: {} } },
+      variants: { size: { large: {}, medium: {}, small: { rowGap: '2' } } },
     },
     { id: 'tds/web/sidebar-menu' },
   )
@@ -669,11 +820,14 @@ namespace styles {
       flexDirection: 'column',
       // Nested labels line up with the trigger's label: icon width plus the icon gap.
       paddingInlineStart: '32',
-      paddingTop: '2',
-      rowGap: '2',
+      paddingTop: '4',
+      rowGap: '4',
       selectors: {
-        '[data-sidebar-menu-size="large"] &': { paddingTop: '4', rowGap: '4' },
-        '[data-sidebar-menu-size="small"] &': { paddingInlineStart: '24' },
+        '[data-sidebar-menu-size="small"] &': {
+          paddingInlineStart: '24',
+          paddingTop: '2',
+          rowGap: '2',
+        },
       },
       '@media (min-width: 768px) and (max-width: 1023px)': {
         selectors: { '[data-app-shell-rail] &': { paddingInlineStart: '0' } },