@tempoxyz/ds 0.3.7 → 0.3.10

package/package.json

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

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: {
@@ -854,7 +844,7 @@ namespace styles {
   )
 
   export const sidebarHeader = variants(
-    { base: { flexShrink: '0 !custom', paddingTop: '32' } },
+    { base: { flexShrink: '0 !custom', paddingTop: '20' } },
     { id: 'tds/web/app-shell/sidebar-header' },
   )
 
@@ -954,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/OtpField.tsx

@@ -9,7 +9,7 @@ const InvalidContext = createContext(false)
 /**
  * One-time passcode entry with a slot per character. Slots render by default from `length`.
  * Setting `invalid` fills the slots red and nudges them sideways. Setting `success` fills them
- * green and pops them in sequence.
+ * green.
  *
  * Base UI renders a `role="group"` of text inputs that accepts digits by default. Pasting a code
  * into a slot fills it and the slots after it. The first slot carries
@@ -124,14 +124,6 @@ const nudge = keyframes(
   { id: 'tds/web/otp-field/nudge' },
 )
 
-const pop = keyframes(
-  {
-    '0%, 100%': { transform: 'scale(1) !custom' },
-    '45%': { transform: 'scale(1.12) !custom' },
-  },
-  { id: 'tds/web/otp-field/pop' },
-)
-
 namespace styles {
   export const input = style(
     {
@@ -158,21 +150,7 @@ namespace styles {
         '&:focus-visible': { backgroundColor: 'background.elevated', outlineColor: 'border.focus' },
         // Invalid and success fills follow focus, so a focused slot keeps its state fill.
         '&[data-invalid], [data-invalid] &': { backgroundColor: 'container.negative' },
-        '[data-success] &': {
-          animation: `${pop} 320ms ${vars.ease.overshoot} both !custom`,
-          backgroundColor: 'container.positive',
-        },
-        // Delays follow the `animation` shorthand above, which would otherwise reset them.
-        '[data-success] &:nth-child(2)': { animationDelay: '40ms !custom' },
-        '[data-success] &:nth-child(3)': { animationDelay: '80ms !custom' },
-        '[data-success] &:nth-child(4)': { animationDelay: '120ms !custom' },
-        '[data-success] &:nth-child(5)': { animationDelay: '160ms !custom' },
-        '[data-success] &:nth-child(6)': { animationDelay: '200ms !custom' },
-        '[data-success] &:nth-child(7)': { animationDelay: '240ms !custom' },
-        '[data-success] &:nth-child(8)': { animationDelay: '280ms !custom' },
-      },
-      '@media (prefers-reduced-motion: reduce)': {
-        selectors: { '[data-success] &': { animation: 'none !custom' } },
+        '[data-success] &': { backgroundColor: 'container.positive' },
       },
     },
     { id: 'tds/web/otp-field/input' },

package/src/web/components/SidebarMenu.tsx

@@ -185,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.
@@ -234,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.
          */

package/src/web/components/Tabs.tsx

@@ -212,8 +212,7 @@ namespace styles {
         position: 'relative',
       },
       // The pill sizes follow the Platform Tab: 48, 40 and 32px, padded by 32, 24 and 16px, with
-      // a label in Pilat at the size and weight of B2 Strong, or of B3 Strong for small. Each
-      // family follows its typography set, which sets the family of the body.
+      // an L2 label, or an L3 label for small.
       compoundVariants: [
         {
           when: { size: 'large', variant: 'pill' },
@@ -222,16 +221,13 @@ namespace styles {
               '& > [role="tab"]': {
                 height: '48',
                 paddingInline: '32',
-                typography: 'body.b2Strong',
-                fontFamily: 'heading',
+                typography: 'label.l2',
               },
               '& > [role="tab"]:is([data-active], [data-active]:hover)': {
-                typography: 'body.b2Strong',
-                fontFamily: 'heading',
+                typography: 'label.l2',
               },
               '& > [role="tab"] [data-reserve]': {
-                typography: 'body.b2Strong',
-                fontFamily: 'heading',
+                typography: 'label.l2',
               },
             },
           },
@@ -246,16 +242,13 @@ namespace styles {
             selectors: {
               '& > [role="tab"]': {
                 paddingInline: '16',
-                typography: 'body.b3Strong',
-                fontFamily: 'heading',
+                typography: 'label.l3',
               },
               '& > [role="tab"]:is([data-active], [data-active]:hover)': {
-                typography: 'body.b3Strong',
-                fontFamily: 'heading',
+                typography: 'label.l3',
               },
               '& > [role="tab"] [data-reserve]': {
-                typography: 'body.b3Strong',
-                fontFamily: 'heading',
+                typography: 'label.l3',
               },
             },
           },
@@ -366,16 +359,13 @@ namespace styles {
                 minWidth: '5rem !custom',
                 outlineOffset: '2',
                 transitionProperty: 'background-color, color, outline-color, scale',
-                typography: 'body.b2Strong',
-                fontFamily: 'heading',
+                typography: 'label.l2',
               },
               '& > [role="tab"]:is([data-active], [data-active]:hover)': {
-                typography: 'body.b2Strong',
-                fontFamily: 'heading',
+                typography: 'label.l2',
               },
               '& > [role="tab"] [data-reserve]': {
-                typography: 'body.b2Strong',
-                fontFamily: 'heading',
+                typography: 'label.l2',
               },
               // The fill marks the active tab, so the list hides the underline indicator.
               '& > span:not([role="tab"])': { display: 'none' },

package/src/web/components/Toast.tsx

@@ -284,10 +284,9 @@ namespace styles {
     { id: 'tds/web/toast/content' },
   )
 
-  // The title and description set Pilat at the size of their typography set, so the family
-  // follows the set, which sets the family of the body.
+  // The title and description set their Pilat labels through the label typography sets.
   export const description = style(
-    { color: 'content.secondary', margin: '0', typography: 'body.b3Strong', fontFamily: 'heading' },
+    { color: 'content.secondary', margin: '0', typography: 'label.l3' },
     { id: 'tds/web/toast/description' },
   )
 
@@ -380,7 +379,7 @@ namespace styles {
   )
 
   export const title = style(
-    { color: 'content.primary', margin: '0', typography: 'body.b2Strong', fontFamily: 'heading' },
+    { color: 'content.primary', margin: '0', typography: 'label.l2' },
     { id: 'tds/web/toast/title' },
   )
 

package/src/web/components/internal/TabBar.ts

@@ -1,5 +1,5 @@
 /**
- * Holds the `SidebarMenu.Item` entries that `AppShell` repeats in its bottom bar below 768px. The
+ * Holds the `SidebarMenu.Item` entries that `AppShell` repeats in its bottom bar. The
  * store lives outside React state, so an item that registers on every render updates the bar
  * without rendering the shell again.
  * @module

package/src/web/vars.ts

@@ -683,6 +683,24 @@ export const variables = Vars.define(
           lineHeight: '20.7px',
         },
       },
+      // Labels set Pilat at the size and weight of B2 Strong and B3 Strong, tracked by 1% as the
+      // Platform Tab and Toast draw them.
+      label: {
+        l2: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '14px',
+          fontWeight: 500,
+          letterSpacing: '.14px',
+          lineHeight: '20px',
+        },
+        l3: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '12px',
+          fontWeight: 500,
+          letterSpacing: '.15px',
+          lineHeight: '16px',
+        },
+      },
       mono: {
         m1: {
           fontFamily: vars.fontFamily.mono,