@tempoxyz/ds 0.3.0 → 0.3.2

package/src/web/components/ListGroup.tsx

@@ -122,8 +122,8 @@ export namespace ListGroup {
   /**
    * Stacks a `ListGroup.Title` above a `ListGroup.Description`, beside a leading avatar or logo and a
    * trailing control. A row that holds it pads 12px above and below. `large` sets a 16px title 2px
-   * above a monospace description, for the row that introduces a `boxed` group, such as a wallet
-   * above its address. Defaults to `size="medium"`.
+   * above a monospace description, in a row that pads 8px above and below, for the row that
+   * introduces a `boxed` group, such as a wallet above its address. Defaults to `size="medium"`.
    */
   export function Info(props: Info.Props) {
     const { className, size, vars, ...attributes } = props
@@ -267,6 +267,7 @@ export namespace ListGroup {
    *
    * 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 +276,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>
@@ -288,9 +291,11 @@ export namespace ListGroup {
   /**
    * Renders a button when pressable, a `label` around a radio when it has a `value`, or a link or
    * other element through `render`. `ref` and attributes reach that element. Children sit 12px
-   * 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
+   * apart, such as an `Avatar`, a `ListGroup.Info` and a trailing `Button`. A pressable row stays
+   * flush with its content, and its hover fill and focus ring bleed 12px past it at each side. 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
@@ -385,8 +390,8 @@ export namespace ListGroup {
         /** Content of the row, laid out 12px apart. */
         children?: ReactNode | undefined
         /**
-         * Dims the row to 40% and disables it: a button row sets `disabled`, a radio row disables
-         * its radio and ignores presses, and any other row sets `aria-disabled` and ignores
+         * Dims the row to 40% opacity and disables it: a button row sets `disabled`, a radio row
+         * disables its radio and ignores presses, and any other row sets `aria-disabled` and ignores
          * presses. A static row also disables the native controls inside it, such as a Copy
          * `Button`, and every `Switch` and `Checkbox`, which leave the Tab order and ignore presses
          * and input. Its children receive no presses, and its text stays readable.
@@ -443,6 +448,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' },
   )
@@ -623,12 +652,14 @@ namespace styles {
           '& > [data-divider]:first-child::before': { display: 'none' },
           // A title over a description pads 12px, which fits a 40px leading image.
           '& [data-divider]:has([data-info])': { paddingBlock: '12' },
+          // A large title over a description pads 8px, which fits a 40px leading image in 56px.
+          '& [data-divider]:has([data-info][data-size="large"])': { paddingBlock: '8' },
           // 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' },
         },
       },
@@ -648,12 +679,6 @@ namespace styles {
             borderWidth: 'regular',
             paddingBlock: '8',
             paddingInline: '16',
-            selectors: {
-              // A large title leads the group from the block's own top padding.
-              '& > [data-divider]:first-child:has([data-info][data-size="large"])': {
-                paddingBlockStart: '0',
-              },
-            },
           },
           plain: {},
           spaced: {
@@ -693,36 +718,57 @@ namespace styles {
         columnGap: '12',
         display: 'flex',
         font: 'inherit !custom',
+        // The row isolates its highlight, which paints below the content and above whatever is
+        // behind the row.
+        isolation: 'isolate !custom',
         minHeight: '36',
         outlineColor: 'transparent !custom',
-        outlineOffset: '0',
         outlineStyle: 'solid !custom',
         outlineWidth: '2',
         paddingBlock: '2',
         paddingInline: '0',
+        position: 'relative',
         textAlign: 'start',
         textDecoration: 'none !custom',
         transitionDuration: '160',
-        transitionProperty: 'background-color, opacity, outline-color, outline-offset',
+        transitionProperty: 'opacity',
         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])':
-            { borderRadius: 'xs' },
-          '&:is(a[href], button, [role="button"], :has(a[href], button, input, select, textarea)):not(:disabled, [data-disabled], [data-radio]):hover':
+          // The row keeps Figma's List Row geometry, flush with its content. Its highlight is a
+          // layer behind the content that bleeds 12px past the content at each side, rounds at
+          // 12px, and draws the hover fill and the focus ring. A dialog body scrolls and clips at
+          // its 4px padding, so the bleed there is 4px, except in a surface. A static row that
+          // holds an enabled control takes the same fill on hover, without becoming pressable.
+          '&[data-divider]::after': {
+            backgroundColor: 'transparent !custom',
+            borderRadius: 'xs',
+            content: '"" !custom',
+            insetBlock: '0',
+            insetInline: '-12',
+            outlineColor: 'transparent !custom',
+            outlineOffset: '-2',
+            outlineStyle: 'solid !custom',
+            outlineWidth: '2',
+            pointerEvents: 'none',
+            position: 'absolute',
+            transitionDuration: '160',
+            transitionProperty: 'background-color, outline-color',
+            transitionTimingFunction: 'snappy',
+            zIndex: '-1 !custom',
+          },
+          '&: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' },
           '&: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"]):focus-visible': {
+          '&:is(a[href], button, [role="button"]):not(:disabled, [data-disabled], [data-radio]):active::after':
+            { backgroundColor: 'container.strong' },
+          '&:is(a[href], button, [role="button"]):not([data-radio]):focus-visible::after': {
             outlineColor: 'border.focus',
-            outlineOffset: '-2',
           },
+          ':is([data-dialog-body], [data-dialog-body] :not([data-surface-size])) > [data-list-group]:not([data-variant="boxed"]) > &[data-divider]::after':
+            { insetInline: '-4' },
           // A radio row is a bordered block whose border thickens when checked and focused, as
           // Figma lays out its stroke, so the row grows by 1px a side for focus.
           '&[data-radio]': {
@@ -752,13 +798,14 @@ namespace styles {
             borderWidth: 'thick',
           },
           '&[data-radio]:active:not(:has(> [data-disabled]))': { scale: 'press' },
+          // The Platform designs dim a disabled row to 40%, as they dim a disabled button, above the
+          // 32% of opacity.disabled.
           '&[data-disabled], &[data-radio]:has(> [data-disabled])': {
             cursor: 'default',
-            opacity: 'disabled',
+            opacity: '0.4 !custom',
           },
         },
         '@media (prefers-reduced-motion: reduce)': {
-          transitionProperty: 'background-color, opacity, outline-color',
           selectors: {
             '&[data-radio]': { transitionProperty: 'background-color, border-color, opacity' },
             '&[data-radio]:active': { scale: 'none !custom' },

package/src/web/components/NativeSelect.tsx

@@ -0,0 +1,167 @@
+import * as BaseUi from '@base-ui/react/field'
+import type { ComponentPropsWithRef } from 'react'
+import type * as zyzz from 'zyzz'
+import { ChevronDown } from '../icons/ChevronDown.js'
+import { style } from '../zyzz.config.js'
+
+/**
+ * A native `select` styled as a 48px field, with a chevron at its end. It registers as the control
+ * of the enclosing `Field.Root`, which supplies its label, description, error and disabled state.
+ * The browser draws the options in its own picker, so it fits forms that need the platform picker,
+ * such as on touch devices. Base UI has no primitive for a native `select`, so it renders the
+ * element through `Field.Control`.
+ *
+ * - Give it a visible `Field.Label`, or an `aria-label` when none fits.
+ * - Lead with a disabled, empty `option` that names the choice, such as "Select environment", and
+ *   set `defaultValue=""` so it shows until a value is picked.
+ * - Use `Select` instead when the options need icons, groups with styling, or a custom popup.
+ *
+ * @example
+ * <Field.Root>
+ *   <Field.Label>Environment</Field.Label>
+ *   <NativeSelect defaultValue="">
+ *     <option disabled value="">
+ *       Select environment
+ *     </option>
+ *     <option value="production">Production</option>
+ *     <option value="staging">Staging</option>
+ *   </NativeSelect>
+ * </Field.Root>
+ *
+ * @see {@link https://base-ui.com/react/components/field | Base UI Field}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select | MDN select element}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions.html | WCAG 2.2 Labels or Instructions}
+ * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html | WCAG 2.2 Error Identification}
+ */
+export function NativeSelect(props: NativeSelect.Props) {
+  const { className, invalid = false, vars, ...attributes } = props
+
+  return (
+    <span {...styles.root()} data-native-select="">
+      {/* Field.Control sets aria-invalid for an invalid Field.Root, which an absent prop keeps. */}
+      <BaseUi.Field.Control
+        render={
+          <select
+            {...(invalid && { 'aria-invalid': true })}
+            {...attributes}
+            {...styles.select({ className, style: props.style, vars })}
+          />
+        }
+      />
+      <ChevronDown {...styles.icon()} />
+    </span>
+  )
+}
+
+export namespace NativeSelect {
+  export type Props = ComponentPropsWithRef<'select'> &
+    zyzz.Props.Variants<typeof styles.select> & {
+      /**
+       * Fills the field red with a 1px red border and sets `aria-invalid`. An invalid
+       * `Field.Root` sets it too.
+       *
+       * @default false
+       */
+      invalid?: boolean | undefined
+    }
+}
+
+namespace styles {
+  // The chevron keeps the primary color, and a disabled field fades it to 40%, as the design does.
+  export const icon = style(
+    {
+      alignSelf: 'center',
+      color: 'content.primary',
+      fontSize: '16',
+      gridArea: '1 / 1 !custom',
+      justifySelf: 'end',
+      marginInlineEnd: '16',
+      pointerEvents: 'none',
+      transitionDuration: '160',
+      transitionProperty: 'opacity !custom',
+      transitionTimingFunction: 'snappy',
+      selectors: { ':has(> select:disabled) > &': { opacity: '0.4 !custom' } },
+    },
+    { id: 'tds/web/native-select/icon' },
+  )
+
+  // The focus border is drawn over the field, so focus never moves the text past its 0.5px line.
+  export const root = style(
+    {
+      borderRadius: 'xs',
+      display: 'grid',
+      position: 'relative',
+      selectors: {
+        '&::after': {
+          borderColor: 'transparent !custom',
+          borderRadius: 'inherit !custom',
+          borderStyle: 'solid !custom',
+          borderWidth: 'regular',
+          boxSizing: 'border-box',
+          content: '"" !custom',
+          cornerShape: 'inherit !custom',
+          inset: '0',
+          pointerEvents: 'none',
+          position: 'absolute',
+          transitionDuration: '160',
+          transitionProperty: 'border-color !custom',
+          transitionTimingFunction: 'snappy',
+        },
+        '&:has(> select:focus-visible)::after': { borderColor: 'border.focus' },
+      },
+    },
+    { id: 'tds/web/native-select' },
+  )
+
+  // The end padding holds the 16px chevron, 8px from the text and 16px from the edge.
+  export const select = style(
+    {
+      appearance: 'none !custom',
+      backgroundColor: 'background.elevated',
+      borderColor: 'line.secondary',
+      borderRadius: 'xs',
+      borderStyle: 'solid',
+      borderWidth: 'thin',
+      boxSizing: 'border-box',
+      color: 'content.primary',
+      cursor: 'pointer',
+      gridArea: '1 / 1 !custom',
+      height: '48',
+      margin: '0',
+      minWidth: '0',
+      // Forced colors paint transparent outlines, so this outline is the focus ring only there.
+      outlineColor: 'transparent !custom',
+      outlineOffset: '2',
+      outlineStyle: 'solid !custom',
+      outlineWidth: '2',
+      paddingBlock: '0',
+      paddingInlineEnd: '40',
+      paddingInlineStart: '16',
+      transitionDuration: '160',
+      transitionProperty: 'background-color, border-color, color, outline-color !custom',
+      transitionTimingFunction: 'snappy',
+      typography: 'body.b2',
+      width: '100% !custom',
+      selectors: {
+        '&:where(:hover:not(:disabled))': { borderColor: 'line.primary' },
+        '&[aria-invalid="true"], [data-invalid] &': {
+          backgroundColor: 'container.negative',
+          borderColor: 'border.negative',
+          borderWidth: 'regular',
+        },
+        // Chromium fades a disabled select to 70%, which the subtle fill replaces.
+        '&:disabled': {
+          backgroundColor: 'container.subtle',
+          color: 'content.tertiary',
+          cursor: 'default',
+          opacity: '1 !custom',
+        },
+      },
+      '@media (forced-colors: active)': {
+        outlineStyle: 'none !custom',
+        selectors: { '&:focus-visible': { outlineStyle: 'solid !custom' } },
+      },
+    },
+    { id: 'tds/web/native-select/select' },
+  )
+}

package/src/web/components/Progress.tsx

@@ -164,17 +164,18 @@ namespace styles {
   )
 
   export const label = style(
-    { color: 'content.primary', flex: '1 !custom', typography: 'body.b3' },
+    { color: 'content.primary', flex: '1 !custom', typography: 'body.b3Strong' },
     { id: 'tds/web/progress/label' },
   )
 
+  // The label row sits 12px above the track.
   export const root = variants(
     {
       base: {
         columnGap: '8',
         display: 'flex',
         flexWrap: 'wrap',
-        rowGap: '8',
+        rowGap: '12',
         width: '100% !custom',
       },
       defaultVariants: { intent: 'neutral' },

package/src/web/components/RadioGroup.tsx

@@ -91,7 +91,7 @@ export namespace RadioGroup {
 namespace styles {
   export const group = variants(
     {
-      base: { display: 'flex', flexDirection: 'column', rowGap: '12' },
+      base: { display: 'flex', flexDirection: 'column', rowGap: '16' },
       defaultVariants: { size: 'medium' },
       variants: {
         // Every item is 16, 20 or 24px with a dot that scales with it. The hit area stays at least 36px.

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 })}
       />
     )
@@ -349,9 +351,10 @@ namespace styles {
           // a trigger that hugs its content grows 4px wider.
           '&[role="combobox"]:focus-visible': { paddingInline: 'calc(1rem + 2px) !custom' },
           '&[role="combobox"]:focus-visible::before': { borderWidth: 'thick' },
+          // The Platform select dims to 40%, past the 32% of the shared disabled opacity.
           '&[role="combobox"]:is(:disabled, [data-disabled])': {
             color: 'content.primary',
-            opacity: 'disabled',
+            opacity: '0.4 !custom',
           },
         },
       },

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',
@@ -398,8 +448,10 @@ namespace styles {
             paddingInline: '10',
           },
           // Base UI triggers mark the row `data-popup-open` while their menu or popover is open.
-          '&:hover:not(:disabled, [data-disabled]), &[data-popup-open]': {
-            backgroundColor: 'container.regular',
+          '&:hover:not(:disabled, [data-disabled])': { backgroundColor: 'container.regular' },
+          // An open row keeps the stronger fill while the pointer rests on it.
+          '&[data-popup-open]:not(:disabled, [data-disabled])': {
+            backgroundColor: 'container.strong',
           },
           '&:is(:disabled, [data-disabled])': { cursor: 'default', opacity: 'disabled' },
         },
@@ -413,7 +465,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 +526,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,16 +596,39 @@ 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: {
         active: {
           false: {},
           true: {
-            backgroundColor: 'container.regular',
+            backgroundColor: 'container.strong',
             color: 'content.primary',
             typography: 'body.b2Strong',
-            selectors: { '[data-sidebar-menu-size="large"] &': { typography: 'body.b1Strong' } },
+            selectors: {
+              '&:hover': { backgroundColor: 'container.strong' },
+              '[data-sidebar-menu-size="large"] &': { typography: 'body.b1Strong' },
+            },
           },
         },
       },
@@ -579,6 +675,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' },
   )