@tempoxyz/ds 0.3.6 → 0.3.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.3.6",
+  "version": "0.3.9",
   "license": "MIT",
   "files": [
     "DESIGN.md",

package/src/web/components/AmountInput.tsx

@@ -204,8 +204,13 @@ namespace styles {
           typography: 'body.b3',
         },
         '& > :is(p, [data-field-error])': { flexBasis: '100% !custom' },
-        // A `Field.Description`, such as the balance, takes the tertiary color.
+        // A `Field.Description`, such as the balance, takes the tertiary color, and the negative
+        // color while the amount is invalid.
         '& > p': { color: 'content.tertiary' },
+        '&[data-invalid] > p, [data-invalid] & > p': { color: 'content.negative' },
+        // Focus keeps the fill at rest beside the inset focus border of the field. `:where` keeps the
+        // invalid and disabled fills above it.
+        '&:where(:has(input:focus-visible))': { backgroundColor: 'container.regular' },
       },
     },
     { id: 'tds/web/amount-input' },

package/src/web/components/AppShell.tsx

@@ -54,7 +54,7 @@ function useShell() {
  * Application frame with a sticky sidebar beside a content column. `align="center"` centers both
  * on wide viewports, with the sidebar fill to the start edge and the header bar to the end edge.
  * `align="start"` pins the sidebar left with content filling the rest.
- * Below 1024px the sidebar moves into a drawer that `AppShell.Trigger` opens from the right edge.
+ * Below 1024px the sidebar moves into a drawer that `AppShell.Trigger` opens from the bottom bar.
  *
  * - Name the `Sidebar` with `aria-label`. It labels the `aside` on wide viewports and the drawer
  *   dialog below 1024px.
@@ -68,9 +68,9 @@ function useShell() {
  *   <AppShell.Main>
  *     <AppShell.Header>
  *       <AppShell.Title>API Keys</AppShell.Title>
- *       <AppShell.Trigger />
  *     </AppShell.Header>
  *   </AppShell.Main>
+ *   <AppShell.Trigger />
  * </AppShell.Root>
  *
  * @see {@link https://base-ui.com/react/components/drawer | Base UI Drawer}
@@ -81,8 +81,8 @@ function useShell() {
  */
 export namespace AppShell {
   /**
-   * Renders the transparent 56px page header at the top of `Main`, holding the title, actions and
-   * the compact-viewport `Trigger`. It spans the full width of `Main`.
+   * Renders the transparent page header at the top of `Main`, holding the title and actions. It
+   * spans the full width of `Main` and is at least 76px tall, so a one-row header centers on the sidebar account row.
    */
   export function Header(props: Header.Props) {
     const { className, vars, ...attributes } = props
@@ -160,8 +160,9 @@ export namespace AppShell {
           }}
         >
           <TabBar.Context.Provider value={tabBar}>
-            {children}
+            {/* The bar is fixed to the bottom, so leading the DOM puts its menu button early in the tab order. */}
             <BottomBar />
+            {children}
           </TabBar.Context.Provider>
         </div>
       </context.Provider>
@@ -174,7 +175,7 @@ export namespace AppShell {
         /**
          * Collapses the inline sidebar to a 64px column of icons from 768px to 1023px, and opens
          * the drawer only below 768px. Give every `SidebarMenu.Item` an icon as its first child.
-         * Absent, the sidebar opens as a drawer below 1024px.
+         * Absent, the sidebar opens as a drawer below 1024px, and the bottom bar shows there too.
          * @default false
          */
         collapse?: boolean | undefined
@@ -293,32 +294,26 @@ export namespace AppShell {
   }
 
   /**
-   * Toggles the sidebar drawer from a button fixed to the top-right corner, above the drawer, whose
-   * two bars turn into a close mark while it is open. Hidden from 1024px, where the sidebar is
-   * always visible. It is named `Open menu` or `Close menu` and exposes `aria-expanded`. Pass
-   * `aria-label` to replace the name, or `children` to replace the bars. With `tabBar`, the bottom
-   * bar renders it as its floating action button below 768px instead of the top-right button.
+   * Adds the button that toggles the sidebar drawer to the bottom bar, after the `action` items,
+   * wherever the drawer replaces the sidebar. Its two bars turn into a close mark while the drawer
+   * is open, and the other items of the bar fade out. It is named `Open menu` or `Close menu` and
+   * exposes `aria-expanded`. Pass `aria-label` to replace the name, or `children` to replace the bars.
    *
    * @example
-   * <AppShell.Trigger tabBar />
+   * <AppShell.Trigger />
    */
   export function Trigger(props: Trigger.Props) {
-    const { children, className, ref, tabBar = false, vars, ...attributes } = props
-    const shell = useShell()
+    const { children, ref, ...attributes } = props
     const store = use(TabBar.Context)
     const id = useId()
-    // The bottom bar shows below 768px, so the ref follows whichever of the two buttons shows.
-    const bar = useQuery('(max-width: 767px)') && tabBar
+    // Throws outside `Root`, like every other part, though the bottom bar renders the button.
+    useShell()
 
     // Registers on every render, so the bottom bar repeats the current props of the trigger.
     useLayoutEffect(() => {
-      if (!store) return
-      if (!tabBar) return store.delete(id)
-
-      const { style: _, ...rest } = attributes
-      store.set(id, {
+      store?.set(id, {
         active: false,
-        attributes: { ...rest, ref: bar ? ref : undefined },
+        attributes: { ...attributes, ref },
         children,
         variant: 'menu',
       })
@@ -329,31 +324,12 @@ export namespace AppShell {
       return () => store.delete(id)
     }, [id, store])
 
-    return (
-      <BaseUi.Drawer.Trigger
-        aria-label={shell.open ? 'Close menu' : 'Open menu'}
-        {...attributes}
-        {...styles.trigger({ className, style: props.style, vars })}
-        data-app-shell-tab-bar={tabBar ? '' : undefined}
-        handle={shell.handle}
-        ref={bar ? undefined : ref}
-      >
-        {children ?? <Bars />}
-      </BaseUi.Drawer.Trigger>
-    )
+    return null
   }
 
   export namespace Trigger {
     export type Props = ComponentPropsWithRef<'button'> &
-      zyzz.Props.Variants<typeof styles.trigger> &
-      Pick<BaseUi.Drawer.Trigger.Props, 'nativeButton' | 'render'> & {
-        /**
-         * Renders the trigger as the floating action button of the bottom bar below 768px, after
-         * the `action` items, in place of the top-right button. While the drawer is open, the
-         * button stays above it as a close mark, and the other items of the bar fade out.
-         */
-        tabBar?: boolean | undefined
-      }
+      Pick<BaseUi.Drawer.Trigger.Props, 'nativeButton' | 'render'>
   }
 }
 
@@ -368,9 +344,10 @@ function Bars() {
 }
 
 /**
- * Repeats the `SidebarMenu.Item`s that set `tabBar` in a bar fixed to the bottom edge below 768px:
+ * Repeats the `SidebarMenu.Item`s that set `tabBar` in a bar fixed to the bottom edge wherever the
+ * drawer replaces the sidebar, below 1024px or below 768px with `collapse`:
  * `tab` items as icons in a pill `<nav>`, then each `action` item as a floating action button, then
- * the `AppShell.Trigger` that sets `tabBar`. Renders nothing while nothing registers.
+ * the `AppShell.Trigger`. Renders nothing while nothing registers.
  */
 function BottomBar() {
   const store = use(TabBar.Context)!
@@ -423,16 +400,17 @@ function BottomBarItem(props: { entry: TabBar.Entry }) {
   })
 }
 
-/** Renders the `AppShell.Trigger` that sets `tabBar` as a floating action button. */
+/** Renders the `AppShell.Trigger` as a floating action button. */
 function BottomBarTrigger(props: { entry: TabBar.Entry }) {
   const { entry } = props
+  const { className, style, ...attributes } = entry.attributes as AppShell.Trigger.Props
   const shell = useShell()
 
   return (
     <BaseUi.Drawer.Trigger
       aria-label={shell.open ? 'Close menu' : 'Open menu'}
-      {...(entry.attributes as BaseUi.Drawer.Trigger.Props)}
-      {...styles.action()}
+      {...(attributes as BaseUi.Drawer.Trigger.Props)}
+      {...styles.action({ className, style })}
       data-app-shell-menu-trigger=""
       handle={shell.handle}
     >
@@ -557,9 +535,13 @@ namespace styles {
       columnGap: '12',
       display: 'none',
       insetInline: '24',
+      // Without tabs the buttons end at the right edge, and the empty bar lets clicks reach the page.
+      justifyContent: 'flex-end',
+      pointerEvents: 'none',
       position: 'fixed',
       zIndex: '39 !custom',
       selectors: {
+        '& > *': { pointerEvents: 'auto' },
         // A bar that holds the trigger rises above the open drawer, so the trigger closes it. The
         // other items fade out and leave the drawer uncovered.
         '[data-state="open"] > &[data-app-shell-menu]': { zIndex: 'modal' },
@@ -569,6 +551,10 @@ namespace styles {
         },
       },
       '@media (max-width: 767px)': { display: 'flex' },
+      // A sidebar that does not collapse opens as the drawer up to 1023px, so its bar shows too.
+      '@media (min-width: 768px) and (max-width: 1023px)': {
+        selectors: { ':not([data-app-shell-collapse]) > &': { display: 'flex' } },
+      },
     },
     { id: 'tds/web/app-shell/bottom-bar' },
   )
@@ -632,17 +618,14 @@ namespace styles {
         marginBottom: '24',
         marginInline: '-16',
         marginTop: '-20',
-        minHeight: '56',
+        // A 44px row under the sidebar header's 20px inset, so a one-row header centers on the account row.
+        minHeight: '4.75rem !custom',
         minWidth: '0',
+        paddingBottom: '12',
+        paddingTop: '20',
         paddingInline: '16',
         // The title starts on the 28px edge of the content below it, as the Page Header pads it.
         '@media (min-width: 640px)': { marginInline: '-1.75rem !custom', paddingInline: '28' },
-        // Below 1024px the fixed trigger covers the end of the bar, so header actions end 8px
-        // before it: its 40px plus its 16px inset. A collapsed sidebar hides it from 768px.
-        '@media (max-width: 1023px)': { paddingInlineEnd: '64' },
-        '@media (min-width: 768px) and (max-width: 1023px)': {
-          selectors: { '[data-app-shell-collapse] > main > &': { paddingInlineEnd: '24' } },
-        },
       },
     },
     { id: 'tds/web/app-shell/header' },
@@ -693,6 +676,13 @@ namespace styles {
             },
           },
         },
+        '@media (min-width: 768px) and (max-width: 1023px)': {
+          selectors: {
+            '&:not([data-app-shell-collapse]):has(> [data-app-shell-bottom-bar]) > main': {
+              paddingBottom: 'calc(5.5rem + env(safe-area-inset-bottom)) !custom',
+            },
+          },
+        },
       },
       defaultVariants: { align: 'center' },
       variants: {
@@ -710,6 +700,8 @@ namespace styles {
     { id: 'tds/web/app-shell' },
   )
 
+  // The Platform Wallet Sidebar pads its content by 20px, and by 32px above the header, which
+  // sits 32px above the menu.
   export const sidebar = variants(
     {
       base: {
@@ -719,9 +711,9 @@ namespace styles {
         flexDirection: 'column',
         flexShrink: '0 !custom',
         minHeight: '0',
-        paddingBottom: '16',
-        paddingInline: '12',
-        rowGap: '16',
+        paddingBottom: '20',
+        paddingInline: '20',
+        rowGap: '32',
       },
     },
     { id: 'tds/web/app-shell/sidebar' },
@@ -744,7 +736,7 @@ namespace styles {
   // server-rendered markup, which always emits the wide layout.
   export const inline = style(
     {
-      borderInlineEndColor: 'line.secondary',
+      borderInlineEndColor: 'line.tertiary',
       borderInlineEndStyle: 'solid',
       borderInlineEndWidth: '1px !custom',
       height: '100dvh !custom',
@@ -753,10 +745,15 @@ namespace styles {
       position: 'sticky',
       width: 'var(--sidebar-width, 16rem) !custom',
       '@media (max-width: 1023px)': { display: 'none !custom' },
-      // A collapsed sidebar stays inline as a column of icons, which `SidebarMenu` centers.
+      // A collapsed sidebar stays inline as a column of icons, which `SidebarMenu` centers in 12px
+      // of padding.
       '@media (min-width: 768px) and (max-width: 1023px)': {
         selectors: {
-          '&[data-app-shell-rail]': { display: 'flex !custom', width: '4rem !custom' },
+          '&[data-app-shell-rail]': {
+            display: 'flex !custom',
+            paddingInline: '12',
+            width: '4rem !custom',
+          },
         },
       },
     },
@@ -770,11 +767,11 @@ namespace styles {
         '--tds-sidebar-scrollbar-thumb': `${vars.color.line.primary}`,
         flex: '1 !custom',
         // Bleeding into the sidebar's inline padding puts the scrollbar at the sidebar edge.
-        marginInline: '-12',
+        marginInline: '-20',
         minHeight: '0',
         overflowY: 'auto',
         overscrollBehavior: 'contain',
-        paddingInline: '12',
+        paddingInline: '20',
         // A transparent track leaves only the thin thumb over the sidebar fill.
         scrollbarColor: 'var(--tds-sidebar-scrollbar-thumb) transparent !custom',
         // Classic scrollbars keep their own lane instead of covering content at the edge.
@@ -784,6 +781,8 @@ namespace styles {
         '@media (min-width: 768px) and (max-width: 1023px)': {
           selectors: {
             '[data-app-shell-rail] &': {
+              marginInline: '-12',
+              paddingInline: '12',
               scrollbarGutter: 'auto !custom',
               scrollbarWidth: 'none !custom',
             },
@@ -838,14 +837,14 @@ namespace styles {
         flexDirection: 'column',
         flexShrink: '0 !custom',
         marginTop: 'auto !custom',
-        rowGap: '8',
+        rowGap: '12',
       },
     },
     { id: 'tds/web/app-shell/sidebar-footer' },
   )
 
   export const sidebarHeader = variants(
-    { base: { flexShrink: '0 !custom', paddingTop: '16' } },
+    { base: { flexShrink: '0 !custom', paddingTop: '20' } },
     { id: 'tds/web/app-shell/sidebar-header' },
   )
 
@@ -945,66 +944,6 @@ namespace styles {
     { id: 'tds/web/app-shell/title' },
   )
 
-  export const trigger = variants(
-    {
-      base: {
-        alignItems: 'center',
-        backgroundColor: 'background.elevated',
-        borderColor: 'line.secondary',
-        borderRadius: 'full',
-        borderStyle: 'solid',
-        borderWidth: 'regular',
-        boxSizing: 'border-box',
-        color: 'content.primary',
-        cornerShape: 'round',
-        cursor: 'pointer',
-        display: 'inline-flex',
-        height: '40',
-        // Centers the button on the 56px header bar.
-        insetBlockStart: '8',
-        insetInlineEnd: '16',
-        justifyContent: 'center',
-        outlineColor: 'transparent !custom',
-        outlineOffset: '0',
-        outlineStyle: 'solid !custom',
-        outlineWidth: '2',
-        padding: '0',
-        // Fixed above the drawer and its backdrop, so the same button closes what it opened.
-        position: 'fixed',
-        transitionDuration: '160',
-        transitionProperty: 'background-color, outline-color, outline-offset, transform !custom',
-        transitionTimingFunction: 'snappy',
-        width: '40',
-        zIndex: 'modal',
-        selectors: {
-          '&:active': { transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'border.focus', outlineOffset: '2' },
-          '&:hover': { backgroundColor: 'container.regular' },
-          // While open, the button rides out with the drawer and rests 8px outside its left edge,
-          // so the close mark never covers the sidebar. The width matches the drawer's.
-          '&[data-popup-open]': {
-            transform: 'translateX(calc(8px - min(18rem, 85vw))) !custom',
-            transitionDuration: '280',
-            transitionTimingFunction: 'spring',
-          },
-        },
-        '@media (min-width: 1024px)': { display: 'none !custom' },
-        '@media (min-width: 768px) and (max-width: 1023px)': {
-          selectors: { '[data-app-shell-collapse] &': { display: 'none !custom' } },
-        },
-        // The bottom bar renders this trigger as its floating action button.
-        '@media (max-width: 767px)': {
-          selectors: { '&[data-app-shell-tab-bar]': { display: 'none !custom' } },
-        },
-        '@media (prefers-reduced-motion: reduce)': {
-          transitionProperty: 'background-color, outline-color, outline-offset !custom',
-          selectors: { '&:active': { transform: 'none !custom' } },
-        },
-      },
-    },
-    { id: 'tds/web/app-shell/trigger' },
-  )
-
   export const viewport = style(
     {
       display: 'flex',

package/src/web/components/Badge.tsx

@@ -139,7 +139,7 @@ namespace styles {
         variant: {
           // The accent text follows the inverse content color, which turns black in dark mode.
           accent: { backgroundColor: 'accent.blue.background', color: 'inverse.content.primary' },
-          elevated: { backgroundColor: 'background.elevated', color: 'content.primary' },
+          elevated: { backgroundColor: 'background.secondary', color: 'content.primary' },
           inverse: {
             backgroundColor: 'inverse.background.secondary',
             color: 'inverse.content.primary',

package/src/web/components/BadgedLogo.tsx

@@ -0,0 +1,125 @@
+/** The Badged Logo: a token or app logo with a small badge at its lower trailing corner. @module */
+import type { ComponentPropsWithRef } from 'react'
+import { style, vars } from '../zyzz.config.js'
+
+/**
+ * A logo with a small round badge on its lower trailing corner, such as the arrow that marks a
+ * token or an app as the destination of a transfer. The root insets the logo 6px, so the badge and
+ * its ring stay inside its 56px box.
+ *
+ * - Put one logo first: a `TokenLogo`, or a `BadgedLogo.Tile` for an app without artwork. The root
+ *   sizes it to 44px.
+ * - Put one `BadgedLogo.Badge` with one 12px icon last.
+ * - Name what the logo and the badge mean in text beside it. The parts add no semantics.
+ *
+ * @example
+ * <BadgedLogo.Root>
+ *   <TokenLogo symbol="USDC" />
+ *   <BadgedLogo.Badge>
+ *     <ArrowRight />
+ *   </BadgedLogo.Badge>
+ * </BadgedLogo.Root>
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span | MDN span element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html | WCAG 2.2 Non-text Content}
+ */
+export namespace BadgedLogo {
+  /** Renders the 20px circle of the badge, which centers one 12px icon in the primary color. */
+  export function Badge(props: Badge.Props) {
+    const { className, ...attributes } = props
+
+    return (
+      <span
+        data-badged-logo-badge=""
+        {...attributes}
+        {...styles.badge({ className, style: props.style })}
+      />
+    )
+  }
+
+  export namespace Badge {
+    export type Props = ComponentPropsWithRef<'span'>
+  }
+
+  /** Renders the 56px `<span>` that holds the logo and its `BadgedLogo.Badge`. */
+  export function Root(props: Root.Props) {
+    const { className, ...attributes } = props
+
+    return <span {...attributes} {...styles.root({ className, style: props.style })} />
+  }
+
+  export namespace Root {
+    export type Props = ComponentPropsWithRef<'span'>
+  }
+
+  /**
+   * Renders a 44px rounded square that stands in for the logo of an app without artwork, such as
+   * the first letter of its name.
+   */
+  export function Tile(props: Tile.Props) {
+    const { className, ...attributes } = props
+
+    return <span {...attributes} {...styles.tile({ className, style: props.style })} />
+  }
+
+  export namespace Tile {
+    export type Props = ComponentPropsWithRef<'span'>
+  }
+}
+
+namespace styles {
+  // A 2px ring in the elevated background separates the badge from the logo below it.
+  export const badge = style(
+    {
+      alignItems: 'center',
+      backgroundColor: 'background.secondary',
+      borderRadius: 'full',
+      boxShadow: `0 0 0 2px ${vars.color.background.elevated} !custom`,
+      boxSizing: 'border-box',
+      color: 'content.primary',
+      cornerShape: 'round',
+      display: 'inline-flex',
+      height: '20',
+      insetBlockEnd: '4',
+      insetInlineEnd: '4',
+      justifyContent: 'center',
+      position: 'absolute',
+      width: '20',
+      selectors: { '& > svg': { flexShrink: '0 !custom', height: '12', width: '12' } },
+    },
+    { id: 'tds/web/badged-logo/badge' },
+  )
+
+  // The logo takes 44px whatever size it sets itself, such as the 32px of a large `TokenLogo`.
+  export const root = style(
+    {
+      alignItems: 'center',
+      display: 'inline-flex',
+      flexShrink: '0 !custom',
+      justifyContent: 'center',
+      padding: '6',
+      position: 'relative',
+      verticalAlign: 'middle',
+      selectors: {
+        '& > :not([data-badged-logo-badge])': { height: '44', width: '44' },
+      },
+    },
+    { id: 'tds/web/badged-logo' },
+  )
+
+  export const tile = style(
+    {
+      alignItems: 'center',
+      backgroundColor: 'container.regular',
+      borderRadius: 'xs',
+      boxSizing: 'border-box',
+      color: 'content.primary',
+      display: 'inline-flex',
+      height: '44',
+      justifyContent: 'center',
+      typography: 'heading.h3',
+      width: '44',
+    },
+    { id: 'tds/web/badged-logo/tile' },
+  )
+}

package/src/web/components/BarChart.tsx

@@ -406,7 +406,7 @@ namespace styles {
   export const tooltip = variants(
     {
       base: {
-        backgroundColor: 'background.elevated',
+        backgroundColor: 'background.menu',
         borderRadius: 'sm',
         boxShadow: 'regular',
         boxSizing: 'border-box',