@tempoxyz/ds 0.3.0 → 0.3.1

package/src/web/components/ListGroup.tsx

@@ -5,7 +5,7 @@ import { useRender } from '@base-ui/react/use-render'
 import type { ComponentPropsWithRef, MouseEvent, ReactNode } from 'react'
 import type * as zyzz from 'zyzz'
 import { ChevronRight } from '../icons/ChevronRight.js'
-import { style, variants } from '../zyzz.config.js'
+import { style, variants, vars } from '../zyzz.config.js'
 import * as RowDisabled from './internal/RowDisabled.js'
 import * as RowsSize from './internal/RowsSize.js'
 
@@ -262,11 +262,13 @@ export namespace ListGroup {
 
   /**
    * `variant` sets the container. `plain` rows have none and line up with the content around them.
-   * `boxed` rows sit in a bordered block with 16px sides and 8px above and below. `spaced` rows
+   * `boxed` rows sit in a bordered block with 16px sides and 8px above and below, and a row's
+   * hover fill reaches the border. `spaced` rows
    * sit in the same block with 16px all round, 12px apart, with 14px text and no row padding.
    *
    * Rows are 36px with 12px text, which fits a 32px control. `dividers={false}` drops the line
    * between rows, which `spaced` never draws. Variants default to `dividers`, `variant="plain"`.
+   * Inside a `Surface`, `plain` rows reach its edges and pad by its padding.
    */
   export function Root(props: Root.Props) {
     const { className, dividers, variant, vars, ...attributes } = props
@@ -275,6 +277,8 @@ export namespace ListGroup {
       <RowsSize.Context value>
         <div
           {...attributes}
+          data-list-group=""
+          data-variant={variant ?? 'plain'}
           {...styles.root({ className, dividers, style: props.style, variant, vars })}
         />
       </RowsSize.Context>
@@ -291,6 +295,8 @@ export namespace ListGroup {
    * apart, such as an `Avatar`, a `ListGroup.Info` and a trailing `Button`. A pressable row's hover
    * fill covers the row, flush with its content. A static row that holds a control, such as a Copy
    * `Button`, takes the same fill on hover and stays static, so the control is the only target.
+   * A `Select` in a row hugs its value at the row's end, in the row's type, 32px tall and without a
+   * fill of its own.
    *
    * A row with a `value` is a radio of the `ListGroup.RadioGroup` around it, in a 12px block with
    * 16px sides. A press anywhere on the row selects it, and a 16px ring at its end shows the
@@ -443,6 +449,30 @@ namespace styles {
       minWidth: '0',
       padding: '0',
       textAlign: 'start',
+      selectors: {
+        // A select in a row reads as the row's value: it hugs its value at the end in the row's
+        // type, fits the row's 32px control height, and draws no fill, since the row draws the
+        // hover. A disabled or invalid trigger keeps its own fill. Its box ends on the content
+        // edge, so it never overflows the container, and its chevron sits 8px inside its focus
+        // ring. `:is(*, :focus-visible)` outweighs the trigger's focus padding, so focus never moves
+        // the value. `Select.Trigger` marks itself, so text-input comboboxes keep their field and a
+        // trigger rendered as another element still matches.
+        '& [data-select-trigger][role="combobox"]:is(*, :focus-visible)': {
+          flex: '0 1 auto !custom',
+          font: 'inherit !custom',
+          height: '32',
+          letterSpacing: 'inherit !custom',
+          marginInlineStart: 'auto !custom',
+          minWidth: '0',
+          paddingInline: '8',
+          width: 'auto !custom',
+        },
+        '& [data-select-trigger]:not(:disabled, [data-disabled], [data-invalid], [aria-invalid="true"])':
+          {
+            backgroundColor: 'transparent !custom',
+          },
+        '& [data-select-trigger] > [data-select-value]': { flex: '0 1 auto !custom' },
+      },
     },
     { id: 'tds/web/list-group/content' },
   )
@@ -626,9 +656,9 @@ namespace styles {
           // A row with a meter pads 10px, which centers a 24px agent logo in 44px.
           '& [data-divider]:has([role="meter"])': { paddingBlock: '10' },
           // A hovered row's fill would otherwise sit between two visible separators.
-          '& [data-divider]:is(a[href], button, [role="button"], :has(a[href], button, input, select, textarea)):not(:disabled, [data-disabled]):hover::before':
+          '& [data-divider]:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled]):hover::before':
             { display: 'none' },
-          '& [data-divider]:is(a[href], button, [role="button"], :has(a[href], button, input, select, textarea)):not(:disabled, [data-disabled]):hover + [data-divider]::before':
+          '& [data-divider]:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled]):hover + [data-divider]::before':
             { display: 'none' },
         },
       },
@@ -646,6 +676,7 @@ namespace styles {
             borderRadius: 'sm',
             borderStyle: 'solid',
             borderWidth: 'regular',
+            isolation: 'isolate !custom',
             paddingBlock: '8',
             paddingInline: '16',
             selectors: {
@@ -653,6 +684,39 @@ namespace styles {
               '& > [data-divider]:first-child:has([data-info][data-size="large"])': {
                 paddingBlockStart: '0',
               },
+              // A row's fill is a layer behind the row that reaches the border across the block's
+              // 16px sides, and its 8px above the first row and below the last. The row keeps its
+              // place, and the fill rounds inside the border at the block's corners.
+              '& > [data-divider]::after': {
+                backgroundColor: 'transparent !custom',
+                content: '"" !custom',
+                insetBlock: '0',
+                insetInline: '-16',
+                position: 'absolute',
+                transitionDuration: '160',
+                transitionProperty: 'background-color',
+                transitionTimingFunction: 'snappy',
+                zIndex: '-1 !custom',
+              },
+              '& > [data-divider]:first-child::after': {
+                borderStartEndRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                borderStartStartRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                insetBlockStart: '-8',
+              },
+              '& > [data-divider]:last-child::after': {
+                borderEndEndRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                borderEndStartRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                insetBlockEnd: '-8',
+              },
+              '& > [data-divider]:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled], [data-radio]):hover::after':
+                { backgroundColor: 'container.regular' },
+              '& > [data-divider]:is(a[href], button, [role="button"]):not(:disabled, [data-disabled]):active::after':
+                {
+                  backgroundColor: 'container.strong',
+                },
+            },
+            '@media (prefers-reduced-motion: reduce)': {
+              selectors: { '& > [data-divider]::after': { transitionProperty: 'none' } },
             },
           },
           plain: {},
@@ -703,22 +767,39 @@ namespace styles {
         textAlign: 'start',
         textDecoration: 'none !custom',
         transitionDuration: '160',
-        transitionProperty: 'background-color, opacity, outline-color, outline-offset',
+        transitionProperty: 'background-color, box-shadow, opacity, outline-color, outline-offset',
         transitionTimingFunction: 'snappy',
         width: '100% !custom',
         selectors: {
-          // The fill covers the row, flush with its content, as Figma's List Row draws it. A static
-          // row that holds a control takes the same fill on hover, without becoming pressable.
-          '&:is(a[href], button, [role="button"], :has(a[href], button, input, select, textarea)):not([data-radio])':
+          // The row keeps Figma's List Row geometry, flush with its content, and its fill bleeds
+          // 12px past the content at each side. A shadow on each side draws the bleed: an outer
+          // shadow never paints under the row, so a translucent fill never doubles. A dialog body
+          // scrolls and clips at its 4px padding, so the bleed there is 4px, except in a surface,
+          // whose rows draw none. A boxed group draws the fill behind its rows. A static row that holds an enabled control takes the same fill
+          // on hover, without becoming pressable.
+          '&:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not([data-radio])':
             { borderRadius: 'xs' },
-          '&:is(a[href], button, [role="button"], :has(a[href], button, input, select, textarea)):not(:disabled, [data-disabled], [data-radio]):hover':
-            { backgroundColor: 'container.regular' },
+          '&:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled], [data-radio], [data-variant="boxed"] > *):hover':
+            {
+              backgroundColor: 'container.regular',
+              boxShadow: `-12px 0 0 0 ${vars.color.container.regular}, 12px 0 0 0 ${vars.color.container.regular} !custom`,
+            },
           '&:is(a[href], button, [role="button"]):not(:disabled, [data-disabled])': {
             cursor: 'pointer',
           },
-          '&:is(a[href], button, [role="button"]):not(:disabled, [data-disabled]):active': {
-            backgroundColor: 'container.strong',
-          },
+          '&:is(a[href], button, [role="button"]):not(:disabled, [data-disabled], [data-variant="boxed"] > *):active':
+            {
+              backgroundColor: 'container.strong',
+              boxShadow: `-12px 0 0 0 ${vars.color.container.strong}, 12px 0 0 0 ${vars.color.container.strong} !custom`,
+            },
+          ':is([data-dialog-body], [data-dialog-body] :not([data-surface-size])) > [data-list-group]:not([data-variant="boxed"]) > &:is(a[href], button, [role="button"], :has(:where(a[href], :is(button, input, select, textarea, [data-select-trigger]):not(:disabled, [data-disabled])))):not(:disabled, [data-disabled], [data-radio]):hover':
+            {
+              boxShadow: `-4px 0 0 0 ${vars.color.container.regular}, 4px 0 0 0 ${vars.color.container.regular} !custom`,
+            },
+          ':is([data-dialog-body], [data-dialog-body] :not([data-surface-size])) > [data-list-group]:not([data-variant="boxed"]) > &:is(a[href], button, [role="button"]):not(:disabled, [data-disabled]):active':
+            {
+              boxShadow: `-4px 0 0 0 ${vars.color.container.strong}, 4px 0 0 0 ${vars.color.container.strong} !custom`,
+            },
           '&:is(a[href], button, [role="button"]):focus-visible': {
             outlineColor: 'border.focus',
             outlineOffset: '-2',
@@ -758,7 +839,7 @@ namespace styles {
           },
         },
         '@media (prefers-reduced-motion: reduce)': {
-          transitionProperty: 'background-color, opacity, outline-color',
+          transitionProperty: 'background-color, box-shadow, opacity, outline-color',
           selectors: {
             '&[data-radio]': { transitionProperty: 'background-color, border-color, opacity' },
             '&[data-radio]:active': { scale: 'none !custom' },

package/src/web/components/Select.tsx

@@ -273,6 +273,7 @@ export namespace Select {
         })}
         aria-invalid={invalid || attributes['aria-invalid']}
         data-invalid={invalid || undefined}
+        data-select-trigger=""
       />
     )
   }
@@ -296,6 +297,7 @@ export namespace Select {
     return (
       <BaseUi.Select.Value
         {...attributes}
+        data-select-value=""
         {...styles.value({ className, style: props.style, vars })}
       />
     )

package/src/web/components/SidebarMenu.tsx

@@ -13,6 +13,8 @@ import type * as zyzz from 'zyzz'
 import { ChevronDown } from '../icons/ChevronDown.js'
 import { ChevronRight } from '../icons/ChevronRight.js'
 import { style, variants } from '../zyzz.config.js'
+import * as TabBar from './internal/TabBar.js'
+import * as Text from './internal/Text.js'
 
 // A group names itself after the ID of the label inside it, which a caller can set.
 type GroupContext = { id: string; setLabel: (id: string | undefined) => void }
@@ -180,15 +182,44 @@ export namespace SidebarMenu {
    * Renders a link by default. Pass `render` to use a router link. `active` marks the current page
    * 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
+   * `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.
+   *
+   * @example
+   * <SidebarMenu.Item active href="/" tabBar="tab">
+   *   <Home />
+   *   Home
+   * </SidebarMenu.Item>
    */
   export function Item(props: Item.Props) {
-    const { active = false, className, ref, render, vars, ...attributes } = props
+    const { active = false, className, ref, render, tabBar, vars, ...attributes } = props
+    const store = use(TabBar.Context)
+    const id = useId()
+
+    // Registers on every render, so the bottom bar repeats the current props of the item.
+    useLayoutEffect(() => {
+      if (!store) return
+      if (!tabBar) return store.delete(id)
+
+      const { children, style: _, ...rest } = attributes
+      store.set(id, { active, attributes: rest, children, render, variant: tabBar })
+    })
+
+    useLayoutEffect(() => {
+      if (!store) return
+      return () => store.delete(id)
+    }, [id, store])
 
     return useRender({
       defaultTagName: 'a',
       props: {
         ...attributes,
         'aria-current': active ? 'page' : undefined,
+        // Text renders in a span, so the collapsed sidebar can hide it as an element.
+        children: Text.wrap(attributes.children),
         ...styles.item({ active, className, style: props.style, vars }),
       },
       ref,
@@ -200,6 +231,12 @@ export namespace SidebarMenu {
     export type Props = Omit<useRender.ComponentProps<'a'>, 'color'> &
       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
+         * 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.
+         */
+        tabBar?: TabBar.Variant | undefined
       }
   }
 
@@ -293,7 +330,8 @@ export namespace SidebarMenu {
         {...attributes}
         {...styles.item({ className, style: props.style, vars })}
       >
-        {children}
+        {/* Text renders in a span, so the collapsed sidebar can hide it as an element. */}
+        {Text.wrap(children)}
         <ChevronRight {...styles.chevron()} />
       </BaseUi.Collapsible.Trigger>
     )
@@ -330,6 +368,9 @@ namespace styles {
       selectors: {
         ':hover > &, [data-popup-open] > &': { color: 'content.primary' },
       },
+      '@media (min-width: 768px) and (max-width: 1023px)': {
+        selectors: { '[data-app-shell-rail] &': { display: 'none !custom' } },
+      },
     },
     { id: 'tds/web/sidebar-menu/account-chevron' },
   )
@@ -365,6 +406,15 @@ namespace styles {
   export const accountRow = variants(
     {
       base: {
+        '@media (min-width: 768px) and (max-width: 1023px)': {
+          selectors: {
+            '[data-app-shell-rail] &': {
+              columnGap: '0',
+              justifyContent: 'center',
+              paddingInline: '0',
+            },
+          },
+        },
         alignItems: 'center',
         appearance: 'none !custom',
         backgroundColor: 'transparent !custom',
@@ -413,7 +463,24 @@ namespace styles {
   )
 
   export const accountText = style(
-    { display: 'flex', flex: '1 !custom', flexDirection: 'column', minWidth: '0' },
+    {
+      display: 'flex',
+      flex: '1 !custom',
+      flexDirection: 'column',
+      minWidth: '0',
+      '@media (min-width: 768px) and (max-width: 1023px)': {
+        selectors: {
+          '[data-app-shell-rail] &': {
+            clipPath: 'inset(50%) !custom',
+            height: '1px !custom',
+            overflow: 'hidden',
+            position: 'absolute',
+            whiteSpace: 'nowrap',
+            width: '1px !custom',
+          },
+        },
+      },
+    },
     { id: 'tds/web/sidebar-menu/account-text' },
   )
 
@@ -457,6 +524,10 @@ namespace styles {
         paddingInline: '8',
         selectors: { '[data-sidebar-menu-size="large"] &': { paddingInline: '12' } },
         typography: 'body.b3',
+        // The collapsed sidebar keeps the label for the name of its group without painting it.
+        '@media (min-width: 768px) and (max-width: 1023px)': {
+          selectors: { '[data-app-shell-rail] &': { display: 'none !custom' } },
+        },
       },
     },
     { id: 'tds/web/sidebar-menu/group-label' },
@@ -523,6 +594,26 @@ namespace styles {
           transitionProperty: 'background-color, color, outline-color !custom',
           selectors: { '&:active': { scale: 'none !custom' } },
         },
+        // The collapsed sidebar centers the first element, such as the icon, in a 40px row. Its
+        // other elements and its text stay in the accessible name.
+        '@media (min-width: 768px) and (max-width: 1023px)': {
+          selectors: {
+            '[data-app-shell-rail] &': {
+              columnGap: '0',
+              justifyContent: 'center',
+              paddingInline: '0',
+              position: 'relative',
+            },
+            '[data-app-shell-rail] & > :not(:first-child)': {
+              clipPath: 'inset(50%) !custom',
+              height: '1px !custom',
+              overflow: 'hidden',
+              position: 'absolute',
+              whiteSpace: 'nowrap',
+              width: '1px !custom',
+            },
+          },
+        },
       },
       defaultVariants: { active: false },
       variants: {
@@ -579,6 +670,9 @@ namespace styles {
         '[data-sidebar-menu-size="large"] &': { paddingTop: '4', rowGap: '4' },
         '[data-sidebar-menu-size="small"] &': { paddingInlineStart: '24' },
       },
+      '@media (min-width: 768px) and (max-width: 1023px)': {
+        selectors: { '[data-app-shell-rail] &': { paddingInlineStart: '0' } },
+      },
     },
     { id: 'tds/web/sidebar-menu/submenu-content' },
   )

package/src/web/components/Surface.tsx

@@ -13,6 +13,9 @@ import { variants, vars } from '../zyzz.config.js'
  * - A pressable surface should hold no other interactive controls, since nested targets conflict.
  * - A direct child `table` bleeds 12px into the padding at the sides and the bottom, as rows pad
  *   their cells, so its text stays on the content edge. The surface draws no border around it.
+ * - A direct child `plain` `ListGroup` bleeds into the padding, so a hover fill reaches the edges.
+ *   Each row is 44px, pads its sides by the surface's padding, and shares the height of the
+ *   tallest row.
  *
  * @example
  * <Surface>
@@ -62,7 +65,13 @@ export namespace Surface {
   export function Header(props: Header.Props) {
     const { className, vars, ...attributes } = props
 
-    return <div {...attributes} {...styles.header({ className, style: props.style, vars })} />
+    return (
+      <div
+        {...attributes}
+        data-surface-header=""
+        {...styles.header({ className, style: props.style, vars })}
+      />
+    )
   }
 
   export namespace Header {
@@ -226,6 +235,38 @@ namespace styles {
           // table clips rather than hides its overflow, so a sticky header still sticks to the
           // scrolling ancestor. The surface draws no border around the rows.
           '&:has(> table)': { borderStyle: 'none', overflow: 'clip !custom' },
+          // Every row takes the height of the tallest, such as a row that holds a 48px field. The
+          // column can shrink below a row's content, so a long value truncates inside the surface.
+          '& > [data-list-group][data-variant="plain"]': {
+            display: 'grid',
+            gridAutoRows: '1fr !custom',
+            gridTemplateColumns: 'minmax(0, 1fr) !custom',
+          },
+          // Rows are 44px, with 4px above and below a 32px control. Their fills stay square, except
+          // at the surface's corners, where each size rounds them inside the border.
+          '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+            borderRadius: 'none',
+            minHeight: '44',
+            paddingBlock: '4',
+          },
+          // A row of a title over a description, or of a meter, keeps its own block padding.
+          '& > [data-list-group][data-variant="plain"] > [data-divider]:has([data-info])': {
+            paddingBlock: '12',
+          },
+          '& > [data-list-group][data-variant="plain"] > [data-divider]:has([role="meter"])': {
+            paddingBlock: '10',
+          },
+          // The rows already reach the surface's edges, so their fills draw no bleed past them.
+          '& > [data-list-group][data-variant="plain"] > [data-divider]:is(:hover, :active)': {
+            boxShadow: 'none !custom',
+          },
+          // After a header, the list rises by the 14px above the text of a one-line row, so the
+          // text keeps the header's 20px gap. After other content, the list keeps its place, so its
+          // fills never cover that content.
+          '& > [data-surface-header] + [data-list-group][data-variant="plain"]:has(> [data-divider])':
+            {
+              marginBlockStart: 'calc((1rem - 2.75rem) / 2) !custom',
+            },
           // A table bleeds by the 12px that its rows pad their edge cells, so the rows sit 12px
           // inside the padding and their text on the content edge.
           '& > table': {
@@ -267,12 +308,35 @@ namespace styles {
       variants: {
         // Each size pads by its own radius, and they scale together. A direct child table with a
         // header bleeds into the top padding, and its header cells take back exactly the padding.
+        // A direct child list bleeds into the padding at the sides, and above and below it at the
+        // surface's edges once it holds a row, so an empty list keeps the padding. Its rows take
+        // back the padding at the sides.
         size: {
           large: {
             borderRadius: 'md',
             padding: '24',
             selectors: {
               '& > table:first-child:has(> thead)': { marginBlockStart: '-24' },
+              '& > [data-list-group][data-variant="plain"]': { marginInline: '-24' },
+              '& > [data-list-group][data-variant="plain"]:first-child:has(> [data-divider])': {
+                marginBlockStart: '-24',
+              },
+              '& > [data-list-group][data-variant="plain"]:last-child:has(> [data-divider])': {
+                marginBlockEnd: '-24',
+              },
+              '& > [data-list-group][data-variant="plain"]:first-child > [data-divider]:first-child':
+                {
+                  borderStartEndRadius: `calc(${vars.radius.md} - 1px) !custom`,
+                  borderStartStartRadius: `calc(${vars.radius.md} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"]:last-child > [data-divider]:last-child':
+                {
+                  borderEndEndRadius: `calc(${vars.radius.md} - 1px) !custom`,
+                  borderEndStartRadius: `calc(${vars.radius.md} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                paddingInline: '24',
+              },
               '& > table:first-child > thead > tr:first-child > th': {
                 paddingBlockStart: '24',
               },
@@ -283,6 +347,26 @@ namespace styles {
             padding: '16',
             selectors: {
               '& > table:first-child:has(> thead)': { marginBlockStart: '-16' },
+              '& > [data-list-group][data-variant="plain"]': { marginInline: '-16' },
+              '& > [data-list-group][data-variant="plain"]:first-child:has(> [data-divider])': {
+                marginBlockStart: '-16',
+              },
+              '& > [data-list-group][data-variant="plain"]:last-child:has(> [data-divider])': {
+                marginBlockEnd: '-16',
+              },
+              '& > [data-list-group][data-variant="plain"]:first-child > [data-divider]:first-child':
+                {
+                  borderStartEndRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                  borderStartStartRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"]:last-child > [data-divider]:last-child':
+                {
+                  borderEndEndRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                  borderEndStartRadius: `calc(${vars.radius.sm} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                paddingInline: '16',
+              },
               '& > table:first-child > thead > tr:first-child > th': {
                 paddingBlockStart: '16',
               },
@@ -293,6 +377,26 @@ namespace styles {
             padding: '12',
             selectors: {
               '& > table:first-child:has(> thead)': { marginBlockStart: '-12' },
+              '& > [data-list-group][data-variant="plain"]': { marginInline: '-12' },
+              '& > [data-list-group][data-variant="plain"]:first-child:has(> [data-divider])': {
+                marginBlockStart: '-12',
+              },
+              '& > [data-list-group][data-variant="plain"]:last-child:has(> [data-divider])': {
+                marginBlockEnd: '-12',
+              },
+              '& > [data-list-group][data-variant="plain"]:first-child > [data-divider]:first-child':
+                {
+                  borderStartEndRadius: `calc(${vars.radius.xs} - 1px) !custom`,
+                  borderStartStartRadius: `calc(${vars.radius.xs} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"]:last-child > [data-divider]:last-child':
+                {
+                  borderEndEndRadius: `calc(${vars.radius.xs} - 1px) !custom`,
+                  borderEndStartRadius: `calc(${vars.radius.xs} - 1px) !custom`,
+                },
+              '& > [data-list-group][data-variant="plain"] > [data-divider]': {
+                paddingInline: '12',
+              },
               '& > table:first-child > thead > tr:first-child > th': {
                 paddingBlockStart: '12',
               },

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

@@ -0,0 +1,52 @@
+/**
+ * Holds the `SidebarMenu.Item` entries that `AppShell` repeats in its bottom bar below 768px. The
+ * store lives outside React state, so an item that registers on every render updates the bar
+ * without rendering the shell again.
+ * @module
+ */
+import type { useRender } from '@base-ui/react/use-render'
+import { createContext, type ReactNode } from 'react'
+
+/** The props of a `SidebarMenu.Item` that the bottom bar repeats, without its sidebar styles. */
+export type Entry = {
+  active: boolean
+  attributes: Readonly<Record<string, unknown>>
+  children: ReactNode
+  render: useRender.ComponentProps<'a'>['render']
+  variant: Variant
+}
+
+/** `tab` renders an icon in the tab bar, and `action` the floating action button beside it. */
+export type Variant = 'action' | 'tab'
+
+export type Store = ReturnType<typeof create>
+
+export const Context = createContext<Store | undefined>(undefined)
+
+/** Creates the store of one `AppShell.Root`. Entries keep the order in which they first register. */
+export function create() {
+  const entries = new Map<string, Entry>()
+  const listeners = new Set<() => void>()
+  let snapshot: readonly (readonly [string, Entry])[] = []
+
+  const notify = () => {
+    snapshot = [...entries]
+    for (const listener of listeners) listener()
+  }
+
+  return {
+    delete(id: string) {
+      if (!entries.delete(id)) return
+      notify()
+    },
+    set(id: string, entry: Entry) {
+      entries.set(id, entry)
+      notify()
+    },
+    snapshot: () => snapshot,
+    subscribe(listener: () => void) {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+  }
+}

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

@@ -0,0 +1,39 @@
+/**
+ * Wraps each run of adjacent string and number children in one span, so a rule can hide a label
+ * as an element while the label still reads as one run, such as `Inbox ({count})`.
+ * @module
+ */
+import { Children, createElement, type HTMLAttributes, type ReactNode } from 'react'
+
+/** Returns `children` with each run of adjacent text wrapped in a span with `props`. */
+export function wrap(children: ReactNode, props: HTMLAttributes<HTMLSpanElement> = {}) {
+  const result: ReactNode[] = []
+  let run: (number | string)[] = []
+
+  // A run of only whitespace, such as the space between two elements on one JSX line, renders no
+  // flex item in a flex row, so it passes through unwrapped and adds no gap.
+  const flush = () => {
+    if (run.length === 0) return
+    if (run.every((part) => typeof part === 'string' && part.trim() === '')) {
+      result.push(...run)
+      run = []
+      return
+    }
+
+    result.push(createElement('span', { ...props, key: result.length }, ...run))
+    run = []
+  }
+
+  for (const child of Children.toArray(children)) {
+    if (typeof child === 'string' || typeof child === 'number') {
+      run.push(child)
+      continue
+    }
+
+    flush()
+    result.push(child)
+  }
+
+  flush()
+  return result
+}