@tempoxyz/ds 0.2.6 → 0.3.1

package/src/web/components/AppShell.tsx

@@ -1,4 +1,5 @@
 import * as BaseUi from '@base-ui/react/drawer'
+import { useRender } from '@base-ui/react/use-render'
 import {
   type ComponentPropsWithRef,
   createContext,
@@ -8,9 +9,12 @@ import {
 } from 'react'
 import type * as zyzz from 'zyzz'
 import { keyframes } from 'zyzz/web'
-import { style, variants } from '../zyzz.config.js'
+import { style, variants, vars } from '../zyzz.config.js'
+import * as TabBar from './internal/TabBar.js'
+import * as Text from './internal/Text.js'
 
 type Context = {
+  collapse: boolean
   container: HTMLDivElement | null
   handle: BaseUi.Drawer.Handle<unknown>
   open: boolean
@@ -19,10 +23,11 @@ type Context = {
 
 const context = createContext<Context | undefined>(undefined)
 
-const compactQuery = '(max-width: 1023px)'
+// The sidebar opens as a drawer below 1024px, or below 768px when it collapses to its icons from
+// 768px to 1023px. The breakpoints are literals because media queries cannot read CSS variables.
+function useCompact(collapse: boolean) {
+  const compactQuery = collapse ? '(max-width: 767px)' : '(max-width: 1023px)'
 
-// The viewport breakpoint is a literal because media queries cannot read CSS variables.
-function useCompact() {
   return useSyncExternalStore(
     (notify) => {
       const query = window.matchMedia(compactQuery)
@@ -42,7 +47,8 @@ function useShell() {
 
 /**
  * Application frame with a sticky sidebar beside a content column. `align="center"` centers both
- * on wide viewports, and `align="start"` pins the sidebar left with content filling the rest.
+ * 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.
  *
  * - Name the `Sidebar` with `aria-label`. It labels the `aside` on wide viewports and the drawer
@@ -69,11 +75,23 @@ function useShell() {
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/focus-order.html | WCAG 2.2 Focus Order}
  */
 export namespace AppShell {
-  /** Page header row holding the title, actions and the compact-viewport `Trigger`. */
+  /**
+   * Renders the 56px page header bar at the top of `Main`, in the fill of the sidebar with a bottom
+   * border, holding the title, actions and the compact-viewport `Trigger`. It spans the full width
+   * of `Main`. With `align="center"` on wide viewports, its fill and border continue to the end
+   * edge. A `Main` that scrolls itself clips them at its own edge, so scroll the root instead when
+   * the shell fills a fixed-height region.
+   */
   export function Header(props: Header.Props) {
     const { className, vars, ...attributes } = props
 
-    return <header {...attributes} {...styles.header({ className, style: props.style, vars })} />
+    return (
+      <header
+        {...attributes}
+        {...styles.header({ className, style: props.style, vars })}
+        data-app-shell-header=""
+      />
+    )
   }
 
   export namespace Header {
@@ -99,7 +117,9 @@ export namespace AppShell {
   export function Root(props: Root.Props) {
     const {
       align,
+      children,
       className,
+      collapse = false,
       defaultOpen = false,
       onOpenChange,
       open,
@@ -108,6 +128,7 @@ export namespace AppShell {
       ...attributes
     } = props
     const [handle] = useState(() => BaseUi.Drawer.createHandle<unknown>())
+    const [tabBar] = useState(TabBar.create)
     const [uncontrolled, setUncontrolled] = useState(defaultOpen)
     const [container, setContainer] = useState<HTMLDivElement | null>(null)
     const current = open ?? uncontrolled
@@ -115,6 +136,7 @@ export namespace AppShell {
     return (
       <context.Provider
         value={{
+          collapse,
           container,
           handle,
           open: current,
@@ -127,13 +149,19 @@ export namespace AppShell {
         <div
           {...attributes}
           {...styles.root({ align, className, style: props.style, vars })}
+          data-app-shell-collapse={collapse ? '' : undefined}
           data-state={current ? 'open' : 'closed'}
           ref={(node) => {
             setContainer(node)
             if (typeof ref === 'function') ref(node)
             else if (ref) ref.current = node
           }}
-        />
+        >
+          <TabBar.Context.Provider value={tabBar}>
+            {children}
+            <BottomBar />
+          </TabBar.Context.Provider>
+        </div>
       </context.Provider>
     )
   }
@@ -141,6 +169,14 @@ export namespace AppShell {
   export namespace Root {
     export type Props = ComponentPropsWithRef<'div'> &
       zyzz.Props.Variants<typeof styles.root> & {
+        /**
+         * 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.
+         * @default false
+         */
+        collapse?: boolean | undefined
+
         /**
          * Initial drawer state when `open` is uncontrolled.
          * @default false
@@ -156,7 +192,7 @@ export namespace AppShell {
   }
 
   /**
-   * Renders a sticky `aside` from 1024px, `var(--sidebar-width, 16.25rem)` wide. Below that it
+   * Renders a sticky `aside` from 1024px, `var(--sidebar-width, 16rem)` wide. Below that it
    * renders a modal Base UI drawer popup as an `aside` with the dialog role, which takes focus on
    * open, returns it to the trigger on close, and dismisses with Escape, the backdrop or a swipe
    * right. Server rendering always emits the wide layout.
@@ -164,10 +200,18 @@ export namespace AppShell {
   export function Sidebar(props: Sidebar.Props) {
     const { className, vars, ...attributes } = props
     const shell = useShell()
-    const compact = useCompact()
+    const compact = useCompact(shell.collapse)
     const sidebar = styles.sidebar({ className, style: props.style, vars })
 
-    if (!compact) return <aside {...attributes} {...styles.inline(sidebar)} />
+    if (!compact)
+      return (
+        <aside
+          {...attributes}
+          {...styles.inline(sidebar)}
+          data-app-shell-rail={shell.collapse ? '' : undefined}
+          data-app-shell-sidebar="inline"
+        />
+      )
 
     return (
       <BaseUi.Drawer.Root
@@ -176,7 +220,8 @@ export namespace AppShell {
         open={shell.open}
         swipeDirection="right"
       >
-        <BaseUi.Drawer.Portal container={shell.container}>
+        {/* The closed drawer stays mounted, so its items register in the bottom bar. */}
+        <BaseUi.Drawer.Portal container={shell.container} keepMounted>
           <BaseUi.Drawer.Backdrop {...styles.backdrop()} />
           <BaseUi.Drawer.Viewport {...styles.viewport()}>
             <BaseUi.Drawer.Popup
@@ -206,6 +251,7 @@ export namespace AppShell {
       zyzz.Props.Variants<typeof styles.sidebarBody>
   }
 
+  /** The bottom of the sidebar, such as the account menu. It stays at the bottom edge. */
   export function SidebarFooter(props: SidebarFooter.Props) {
     const { className, vars, ...attributes } = props
 
@@ -219,6 +265,7 @@ export namespace AppShell {
       zyzz.Props.Variants<typeof styles.sidebarFooter>
   }
 
+  /** The top of the sidebar, such as the product or project switcher. */
   export function SidebarHeader(props: SidebarHeader.Props) {
     const { className, vars, ...attributes } = props
 
@@ -277,6 +324,54 @@ export namespace AppShell {
   }
 }
 
+/**
+ * Repeats the `SidebarMenu.Item`s that set `tabBar` in a bar fixed to the bottom edge below 768px:
+ * `tab` items as icons in a pill `<nav>`, then each `action` item as a floating action button.
+ * Renders nothing while no item sets `tabBar`.
+ */
+function BottomBar() {
+  const store = use(TabBar.Context)!
+  const entries = useSyncExternalStore(store.subscribe, store.snapshot, store.snapshot)
+  const tabs = entries.filter(([, entry]) => entry.variant === 'tab')
+  const actions = entries.filter(([, entry]) => entry.variant === 'action')
+
+  if (entries.length === 0) return null
+
+  return (
+    <div {...styles.bottomBar()} data-app-shell-bottom-bar="">
+      {tabs.length > 0 && (
+        <nav aria-label="Main" {...styles.tabBar()}>
+          {tabs.map(([id, entry]) => (
+            <BottomBarItem entry={entry} key={id} />
+          ))}
+        </nav>
+      )}
+      {actions.map(([id, entry]) => (
+        <BottomBarItem entry={entry} key={id} />
+      ))}
+    </div>
+  )
+}
+
+/**
+ * Renders the element of a `SidebarMenu.Item` with the attributes and `render` of the item, and
+ * shows only its first element, such as its icon. Its text stays in the accessible name.
+ */
+function BottomBarItem(props: { entry: TabBar.Entry }) {
+  const { entry } = props
+
+  return useRender({
+    defaultTagName: 'a',
+    props: {
+      ...entry.attributes,
+      'aria-current': entry.active ? 'page' : undefined,
+      ...(entry.variant === 'tab' ? styles.tab({ active: entry.active }) : styles.action()),
+      children: Text.wrap(entry.children, styles.label()),
+    },
+    render: entry.render,
+  })
+}
+
 const fadeIn = keyframes(
   { from: { opacity: 0 }, to: { opacity: 1 } },
   { id: 'tds/web/app-shell/fade-in' },
@@ -288,9 +383,56 @@ const fadeOut = keyframes(
 )
 
 namespace styles {
+  // The 56px circle of the Platform Floating Action Button, filled like the primary button.
+  export const action = style(
+    {
+      alignItems: 'center',
+      backgroundColor: 'inverse.background.primary',
+      borderRadius: 'full',
+      boxShadow: 'large',
+      boxSizing: 'border-box',
+      color: 'inverse.content.primary',
+      cornerShape: 'round',
+      cursor: 'pointer',
+      display: 'flex',
+      flexShrink: '0 !custom',
+      height: '56',
+      justifyContent: 'center',
+      outlineColor: 'transparent !custom',
+      outlineOffset: '2',
+      outlineStyle: 'solid !custom',
+      outlineWidth: '2',
+      position: 'relative',
+      textDecoration: 'none !custom',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, outline-color, scale !custom',
+      transitionTimingFunction: 'snappy',
+      width: '56',
+      selectors: {
+        '& > :first-child': { flexShrink: '0 !custom', fontSize: '24' },
+        '& > :not(:first-child)': {
+          clipPath: 'inset(50%) !custom',
+          height: '1px !custom',
+          overflow: 'hidden',
+          position: 'absolute',
+          whiteSpace: 'nowrap',
+          width: '1px !custom',
+        },
+        '&:active': { scale: 'press', transitionDuration: '100' },
+        '&:focus-visible': { outlineColor: 'border.focus' },
+        '&:hover': { backgroundColor: 'action.primary.fill.hover' },
+      },
+      '@media (prefers-reduced-motion: reduce)': {
+        transitionProperty: 'background-color, outline-color !custom',
+        selectors: { '&:active': { scale: 'none !custom' } },
+      },
+    },
+    { id: 'tds/web/app-shell/action' },
+  )
+
   export const backdrop = style(
     {
-      backgroundColor: 'black',
+      backgroundColor: 'neutral.100',
       inset: '0',
       opacity: '0.6 !custom',
       position: 'fixed',
@@ -310,6 +452,7 @@ namespace styles {
     {
       backgroundColor: 'currentColor !custom',
       borderRadius: 'full',
+      cornerShape: 'round',
       height: '2',
       insetInlineStart: '0',
       position: 'absolute',
@@ -334,6 +477,22 @@ namespace styles {
     { id: 'tds/web/app-shell/bar' },
   )
 
+  // Floats over the content, inset by the 24px page margin of the Mobile layout and 16px from the
+  // bottom edge. It sits below the drawer and its backdrop.
+  export const bottomBar = style(
+    {
+      alignItems: 'center',
+      bottom: 'calc(1rem + env(safe-area-inset-bottom)) !custom',
+      columnGap: '12',
+      display: 'none',
+      insetInline: '24',
+      position: 'fixed',
+      zIndex: '39 !custom',
+      '@media (max-width: 767px)': { display: 'flex' },
+    },
+    { id: 'tds/web/app-shell/bottom-bar' },
+  )
+
   export const bars = style(
     { display: 'block', height: '16', position: 'relative', width: '16' },
     { id: 'tds/web/app-shell/bars' },
@@ -341,7 +500,7 @@ namespace styles {
 
   export const drawer = style(
     {
-      borderInlineStartColor: 'grayAlpha.200',
+      borderInlineStartColor: 'line.secondary',
       borderInlineStartStyle: 'solid',
       borderInlineStartWidth: '1px !custom',
       height: '100% !custom',
@@ -359,6 +518,9 @@ namespace styles {
         },
         '&[data-starting-style]': { transform: 'translateX(100%) !custom' },
         '&[data-swiping]': { transitionDuration: '0', userSelect: 'none' },
+        // The closed drawer stays mounted with the `hidden` attribute, which the flex layout of
+        // the sidebar would override.
+        '&[hidden]': { display: 'none !custom' },
       },
       '@media (prefers-reduced-motion: reduce)': {
         transitionProperty: 'opacity !custom',
@@ -373,19 +535,33 @@ namespace styles {
     { id: 'tds/web/app-shell/drawer' },
   )
 
+  // The bar bleeds into the padding of `Main`, so it spans the column and starts at its top edge.
+  // The header takes the fill of the sidebar, so the two frame the page.
   export const header = variants(
     {
       base: {
         alignItems: 'center',
+        backgroundColor: 'background.sidebar',
+        borderBottomColor: 'line.secondary',
+        borderBottomStyle: 'solid',
+        borderBottomWidth: '1px !custom',
+        boxSizing: 'border-box',
         columnGap: '8',
         display: 'flex',
         justifyContent: 'space-between',
         marginBottom: '24',
+        marginInline: '-16',
+        marginTop: '-20',
+        minHeight: '56',
         minWidth: '0',
-        // Below 1024px the fixed trigger covers the top-right corner, so header actions end 8px
-        // before it: its 40px plus 16px inset, less the main column's own side padding.
-        '@media (max-width: 1023px)': { paddingInlineEnd: '48' },
-        '@media (min-width: 640px) and (max-width: 1023px)': { paddingInlineEnd: '32' },
+        paddingInline: '16',
+        '@media (min-width: 640px)': { marginInline: '-2rem !custom', paddingInline: '24' },
+        // 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' },
@@ -413,23 +589,50 @@ namespace styles {
     {
       base: {
         backgroundColor: 'background.primary',
-        color: 'foreground',
+        color: 'content.primary',
         display: 'flex',
         minHeight: '100dvh !custom',
         position: 'relative',
-        typography: 'copy.14',
+        typography: 'body.b2',
         selectors: {
-          // Equal gutters center the sidebar and content column on wide viewports.
+          // Equal gutters center the sidebar and content column on wide viewports. The start
+          // gutter takes the fill of the sidebar, so the sidebar reaches the start edge.
           '&::after, &::before': { content: '"" !custom', flex: '1 !custom' },
+          '&::before': { backgroundColor: 'background.sidebar' },
         },
         '@media (max-width: 1023px)': {
           selectors: { '&::after, &::before': { display: 'none !custom' } },
         },
+        // The bottom bar covers the end of the page, so content can scroll clear of it: 16px
+        // below the bar, its 56px, and 16px above it.
+        '@media (max-width: 767px)': {
+          selectors: {
+            '&:has(> [data-app-shell-bottom-bar]) > main': {
+              paddingBottom: 'calc(5.5rem + env(safe-area-inset-bottom)) !custom',
+            },
+          },
+        },
       },
       defaultVariants: { align: 'center' },
       variants: {
         align: {
-          center: {},
+          // The header bar continues across the end gutter as the outset of a border image, which
+          // is ink overflow. It adds no scroll and changes no layout, and a scrolling `Main` clips
+          // it at its own edge. The image draws the fill and the 1px bottom border of the header.
+          // The outset takes the gutter from the viewport width, since the root of an application
+          // frame spans the viewport.
+          center: {
+            '@media (min-width: 1024px)': {
+              selectors: {
+                '& > main > [data-app-shell-header]': {
+                  borderImageOutset: `0 max(0px, calc((100vw - var(--sidebar-width, 16rem) - ${vars.container['1024']}) / 2)) 0 0 !custom`,
+                  borderImageSlice: '0 fill !custom',
+                  borderImageSource: `linear-gradient(${vars.color.background.sidebar} calc(100% - 1px), ${vars.color.line.secondary} 0) !custom`,
+                  borderImageWidth: '0 !custom',
+                },
+              },
+            },
+          },
           start: {
             selectors: {
               '&::after, &::before': { display: 'none !custom' },
@@ -445,33 +648,52 @@ namespace styles {
   export const sidebar = variants(
     {
       base: {
-        backgroundColor: 'background.primary',
+        backgroundColor: 'background.sidebar',
         boxSizing: 'border-box',
         display: 'flex',
         flexDirection: 'column',
         flexShrink: '0 !custom',
         minHeight: '0',
-        paddingBottom: '20',
-        paddingInline: '10',
-        rowGap: '24',
+        paddingBottom: '16',
+        paddingInline: '12',
+        rowGap: '16',
       },
     },
     { id: 'tds/web/app-shell/sidebar' },
   )
 
+  // Keeps the label of a bottom bar item in its accessible name without painting it.
+  export const label = style(
+    {
+      clipPath: 'inset(50%) !custom',
+      height: '1px !custom',
+      overflow: 'hidden',
+      position: 'absolute',
+      whiteSpace: 'nowrap',
+      width: '1px !custom',
+    },
+    { id: 'tds/web/app-shell/label' },
+  )
+
   // Follows `sidebar`, so its compact `display: none` overrides the sidebar's `display: flex` in
   // server-rendered markup, which always emits the wide layout.
   export const inline = style(
     {
-      borderInlineEndColor: 'grayAlpha.200',
+      borderInlineEndColor: 'line.secondary',
       borderInlineEndStyle: 'solid',
       borderInlineEndWidth: '1px !custom',
       height: '100dvh !custom',
       insetBlockStart: '0',
       overflowY: 'auto',
       position: 'sticky',
-      width: 'var(--sidebar-width, 16.25rem) !custom',
+      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.
+      '@media (min-width: 768px) and (max-width: 1023px)': {
+        selectors: {
+          '&[data-app-shell-rail]': { display: 'flex !custom', width: '4rem !custom' },
+        },
+      },
     },
     { id: 'tds/web/app-shell/inline' },
   )
@@ -479,20 +701,33 @@ namespace styles {
   export const sidebarBody = variants(
     {
       base: {
+        // Custom string values only take literal CSS, so the thumb color reaches `scrollbarColor` through a property.
+        '--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: '-10',
+        marginInline: '-12',
         minHeight: '0',
         overflowY: 'auto',
         overscrollBehavior: 'contain',
-        paddingInline: '10',
+        paddingInline: '12',
+        // 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.
         scrollbarGutter: 'stable',
         scrollbarWidth: 'thin',
+        // The collapsed sidebar has no room for a scrollbar lane beside its 40px icons.
+        '@media (min-width: 768px) and (max-width: 1023px)': {
+          selectors: {
+            '[data-app-shell-rail] &': {
+              scrollbarGutter: 'auto !custom',
+              scrollbarWidth: 'none !custom',
+            },
+          },
+        },
         selectors: {
           // Curtains fade content into the sidebar at whichever end has more to scroll.
           '&::after, &::before': {
-            backgroundColor: 'background.primary',
+            backgroundColor: 'background.sidebar',
             content: '"" !custom',
             display: 'block',
             height: '24',
@@ -530,23 +765,107 @@ namespace styles {
     { id: 'tds/web/app-shell/sidebar-body' },
   )
 
+  // The automatic top margin keeps the footer at the bottom edge when no `SidebarBody` grows.
   export const sidebarFooter = variants(
-    { base: { display: 'flex', flexDirection: 'column', flexShrink: '0 !custom', rowGap: '12' } },
+    {
+      base: {
+        display: 'flex',
+        flexDirection: 'column',
+        flexShrink: '0 !custom',
+        marginTop: 'auto !custom',
+        rowGap: '8',
+      },
+    },
     { id: 'tds/web/app-shell/sidebar-footer' },
   )
 
   export const sidebarHeader = variants(
-    { base: { flexShrink: '0 !custom', paddingTop: '20' } },
+    { base: { flexShrink: '0 !custom', paddingTop: '16' } },
     { id: 'tds/web/app-shell/sidebar-header' },
   )
 
+  // An icon-only item of the Platform Tab Bar, which fills its share of the pill.
+  export const tab = variants(
+    {
+      base: {
+        alignItems: 'center',
+        borderRadius: 'full',
+        boxSizing: 'border-box',
+        color: 'content.secondary',
+        cornerShape: 'round',
+        cursor: 'pointer',
+        display: 'flex',
+        flex: '1 !custom',
+        height: '100% !custom',
+        justifyContent: 'center',
+        minWidth: '0',
+        outlineColor: 'transparent !custom',
+        outlineOffset: '-2',
+        outlineStyle: 'solid !custom',
+        outlineWidth: '2',
+        position: 'relative',
+        textDecoration: 'none !custom',
+        transitionDuration: '160',
+        transitionProperty: 'background-color, color, outline-color, scale !custom',
+        transitionTimingFunction: 'snappy',
+        selectors: {
+          '& > :first-child': { flexShrink: '0 !custom', fontSize: '24' },
+          '& > :not(:first-child)': {
+            clipPath: 'inset(50%) !custom',
+            height: '1px !custom',
+            overflow: 'hidden',
+            position: 'absolute',
+            whiteSpace: 'nowrap',
+            width: '1px !custom',
+          },
+          '&:active': { scale: 'press', transitionDuration: '100' },
+          '&:focus-visible': { outlineColor: 'border.focus' },
+          '&:hover': { color: 'content.primary' },
+        },
+        '@media (prefers-reduced-motion: reduce)': {
+          transitionProperty: 'background-color, color, outline-color !custom',
+          selectors: { '&:active': { scale: 'none !custom' } },
+        },
+      },
+      defaultVariants: { active: false },
+      variants: {
+        active: {
+          false: {},
+          true: { backgroundColor: 'container.regular', color: 'content.primary' },
+        },
+      },
+    },
+    { id: 'tds/web/app-shell/tab' },
+  )
+
+  // The 56px pill of the Platform Tab Bar, which takes the width beside the action button.
+  export const tabBar = style(
+    {
+      alignItems: 'center',
+      backgroundColor: 'background.secondary',
+      borderColor: 'line.secondary',
+      borderRadius: 'full',
+      borderStyle: 'solid',
+      borderWidth: 'regular',
+      boxShadow: 'regular',
+      boxSizing: 'border-box',
+      cornerShape: 'round',
+      display: 'flex',
+      flex: '1 !custom',
+      height: '56',
+      minWidth: '0',
+      padding: '4',
+    },
+    { id: 'tds/web/app-shell/tab-bar' },
+  )
+
   export const title = variants(
     {
       base: {
-        color: 'foreground',
+        color: 'content.primary',
         margin: '0',
         minWidth: '0',
-        typography: 'heading.24',
+        typography: 'heading.h2',
       },
     },
     { id: 'tds/web/app-shell/title' },
@@ -556,18 +875,19 @@ namespace styles {
     {
       base: {
         alignItems: 'center',
-        backgroundColor: 'background.surface',
-        borderColor: 'grayAlpha.200',
+        backgroundColor: 'background.elevated',
+        borderColor: 'line.secondary',
         borderRadius: 'full',
         borderStyle: 'solid',
-        borderWidth: '1',
-        boxShadow: 'raised',
+        borderWidth: 'regular',
         boxSizing: 'border-box',
-        color: 'foreground',
+        color: 'content.primary',
+        cornerShape: 'round',
         cursor: 'pointer',
         display: 'inline-flex',
         height: '40',
-        insetBlockStart: '16',
+        // Centers the button on the 56px header bar.
+        insetBlockStart: '8',
         insetInlineEnd: '16',
         justifyContent: 'center',
         outlineColor: 'transparent !custom',
@@ -584,8 +904,8 @@ namespace styles {
         zIndex: 'modal',
         selectors: {
           '&:active': { transform: 'scale(0.96) !custom' },
-          '&:focus-visible': { outlineColor: 'blue.700', outlineOffset: '2' },
-          '&:hover': { backgroundColor: 'gray.100' },
+          '&: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]': {
@@ -595,6 +915,9 @@ namespace styles {
           },
         },
         '@media (min-width: 1024px)': { display: 'none !custom' },
+        '@media (min-width: 768px) and (max-width: 1023px)': {
+          selectors: { '[data-app-shell-collapse] &': { display: 'none !custom' } },
+        },
         '@media (prefers-reduced-motion: reduce)': {
           transitionProperty: 'background-color, outline-color, outline-offset !custom',
           selectors: { '&:active': { transform: 'none !custom' } },
@@ -611,6 +934,7 @@ namespace styles {
       justifyContent: 'flex-end',
       position: 'fixed',
       zIndex: 'popover',
+      selectors: { '&[hidden]': { display: 'none !custom' } },
     },
     { id: 'tds/web/app-shell/viewport' },
   )