@telefonica/mistica 17.3.0 → 17.5.0

package/src/sidenav-bar.css.ts

@@ -0,0 +1,1018 @@
+import {createVar, globalStyle, style, styleVariants} from '@vanilla-extract/css';
+import {sprinkles} from './sprinkles.css';
+import {vars as skinVars} from './skins/skin-contract.css';
+
+import type {NonDeprecatedVariant} from './theme-variant-context';
+
+export const DEFAULT_WIDTH = 240;
+export const COLLAPSED_WIDTH = 72;
+const BOXED_INSET = 8;
+// Left padding of a second-level row. It adds to the 8px left margin of the row (which clears the selected
+// indicator on the rail), so the content of a second-level row lands 24px from the rail, as the Figma spec asks
+// (16 + 8). The full 24 here would count the 8px margin twice.
+const SECOND_LEVEL_INDENT = 16;
+export const LOGO_SIZE = 32;
+// Horizontal inset of the items rail on each side of a section (see `sectionContent`). The selected
+// indicator of an item sits on that inset, at the left edge of the rail.
+const RAIL_INSET = 10;
+// Margin of the row of an item, on each side of the items rail. On the left it is measured from the left
+// edge of the selected indicator, which is 2px wide, so the row keeps a gap of 6px from that indicator.
+// The expanded sidenav and the collapsed rail share this number: the row of an item stands in the same
+// place in both states, 18px from each edge of the sidenav.
+const ITEM_ROW_INSET = 8;
+const ITEM_ROW_GAP = 8;
+const ITEM_ROW_HEIGHT = 44;
+// Vertical padding of a row. A label that wraps keeps this room above and below its text, and a label of
+// one line keeps the row at `ITEM_ROW_HEIGHT`: `Text2` measures 24px on the skin that gives it the most
+// room, and 24 plus the two paddings is exactly that height.
+const ITEM_ROW_PADDING_Y = 10;
+const SECTION_TITLE_INSET = 24;
+// Horizontal inset of the floating dialog panel. The row of each item adds `ITEM_ROW_INSET` on top of it,
+// so the content of a child item lands at `SECTION_TITLE_INSET` from the edge of the panel.
+const DIALOG_PANEL_INSET = 8;
+const DIALOG_PANEL_PADDING_Y = 16;
+// Vertical space that every entry of the first level of the body (a section or a stand-alone item) owns
+// above and below itself. Two neighbours therefore stand twice this apart, and the first and the last
+// entries keep it towards the header and the footer.
+const ENTRY_SPACE_Y = 8;
+// Vertical space between a section divider and the items that it faces. The outward side of the divider
+// owns nothing: the entries around it already stand `ENTRY_SPACE_Y` apart on each side.
+const SECTION_DIVIDER_MARGIN_Y = 16;
+const SECTION_DIVIDER_MARGIN_X = 8;
+const HEADER_SCROLL_SPACER_HEIGHT = 24;
+const SLOT_INSET_X = 24;
+// The collapsed rail draws both slots on the rail of the items, so they take `RAIL_INSET` there. The
+// expanded inset would leave a slot only 24px of the 72px rail.
+const COLLAPSED_SLOT_INSET_X = RAIL_INSET;
+// Vertical insets of the footer slot, which are not equal to each other: the Figma anatomy frame of the
+// footer region gives its slot 8px above and 32px below.
+const FOOTER_PADDING_TOP = 8;
+const FOOTER_PADDING_BOTTOM = 32;
+const FOCUS_RING_ROOM = 4;
+
+export const sidenavWidthVar = createVar();
+// The second column always takes the `width` of the expanded sidenav, so it needs its own variable: the
+// variable above carries the width of the collapsed rail while the sidenav is collapsed.
+export const sidenavPanelWidthVar = createVar();
+
+// Animation ------------------------------------------------------------------
+
+export const COLLAPSE_DURATION_MS = 350;
+export const CONTENT_DURATION_MS = 400;
+
+const COLLAPSE_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';
+const CONTENT_EASING = 'ease';
+
+// `SidenavBar` fills both durations on its root element, and every rule below reads them from there.
+// An acceptance run receives 0ms, so a test that presses a control and reads the result at once never
+// catches a frame of the movement.
+export const collapseDurationVar = createVar();
+export const contentDurationVar = createVar();
+
+// Every animated rule of this file carries this block: the spec asks for an instant change when the
+// user turns motion down in the operating system.
+const reducedMotion = {
+    '@media': {
+        ['(prefers-reduced-motion)']: {
+            transition: 'none',
+        },
+    },
+} as const;
+
+// Tokens ----------------------------------------------------------------------
+
+// The spec paints the header, the body and the footer of every variant with an existing background token,
+// one member per variant. A boxed sidenav paints the same colours as a full-height one, with one exception:
+// the negative boxed header (see `headerNegativeBoxedBackground`).
+const regionBackgroundColor: Record<NonDeprecatedVariant, string> = {
+    default: skinVars.colors.background,
+    brand: skinVars.colors.navigationBarBackground,
+    alternative: skinVars.colors.backgroundAlternative,
+    negative: skinVars.colors.backgroundNegative,
+    media: skinVars.colors.backgroundNegative,
+};
+
+// The negative variant is the only one whose boxed header takes a different token: the spec gives it
+// `backgroundContainerNegative`, while its body and footer keep `backgroundNegative`. The header cannot be
+// transparent, because the content scrolls underneath it while it is fixed.
+export const headerNegativeBoxedBackground = style({
+    backgroundColor: skinVars.colors.backgroundContainerNegative,
+});
+
+// Every divider of the sidenav (the right divider, the two overscroll dividers, the section dividers and the
+// separator of the double panel column) takes the same token for a given variant.
+const dividerColor: Record<NonDeprecatedVariant, string> = {
+    default: skinVars.colors.divider,
+    brand: skinVars.colors.dividerBrand,
+    alternative: skinVars.colors.divider,
+    negative: skinVars.colors.dividerNegative,
+    media: skinVars.colors.dividerNegative,
+};
+
+const sectionTitleColor: Record<NonDeprecatedVariant, string> = {
+    default: skinVars.colors.textSecondary,
+    brand: skinVars.colors.textSecondaryBrand,
+    alternative: skinVars.colors.textSecondary,
+    negative: skinVars.colors.textSecondaryNegative,
+    media: skinVars.colors.textSecondaryNegative,
+};
+
+type ItemColors = {
+    label: string;
+    asset: string;
+    chevron: string;
+    indicator: string;
+    hover: string;
+    pressed: string;
+    selected: string;
+    selectedHover: string;
+    selectedPressed: string;
+};
+
+// The resting background of an item is transparent in every variant, so the region behind it shows through.
+const itemColors: Record<NonDeprecatedVariant, ItemColors> = {
+    default: {
+        label: skinVars.colors.textPrimary,
+        asset: 'currentColor',
+        chevron: skinVars.colors.chevronIndicator,
+        indicator: skinVars.colors.controlActivated,
+        hover: skinVars.colors.backgroundContainerHover,
+        pressed: skinVars.colors.backgroundContainerPressed,
+        selected: skinVars.colors.backgroundSelected,
+        selectedHover: skinVars.colors.backgroundSelectedHover,
+        selectedPressed: skinVars.colors.backgroundSelectedPressed,
+    },
+    brand: {
+        label: skinVars.colors.textPrimaryBrand,
+        asset: 'currentColor',
+        chevron: skinVars.colors.neutralHighBrand,
+        indicator: skinVars.colors.controlActivatedBrand,
+        hover: skinVars.colors.backgroundContainerBrandHover,
+        pressed: skinVars.colors.backgroundContainerBrandPressed,
+        selected: skinVars.colors.backgroundSelectedBrand,
+        selectedHover: skinVars.colors.backgroundSelectedBrandHover,
+        selectedPressed: skinVars.colors.backgroundSelectedBrandPressed,
+    },
+    alternative: {
+        label: skinVars.colors.textPrimary,
+        asset: 'currentColor',
+        chevron: skinVars.colors.chevronIndicator,
+        indicator: skinVars.colors.controlActivated,
+        hover: skinVars.colors.backgroundContainerHover,
+        pressed: skinVars.colors.backgroundContainerPressed,
+        selected: skinVars.colors.backgroundSelected,
+        selectedHover: skinVars.colors.backgroundSelectedHover,
+        selectedPressed: skinVars.colors.backgroundSelectedPressed,
+    },
+    negative: {
+        label: skinVars.colors.textPrimaryNegative,
+        asset: 'currentColor',
+        chevron: skinVars.colors.neutralHighNegative,
+        indicator: skinVars.colors.controlActivatedNegative,
+        hover: skinVars.colors.backgroundContainerHover,
+        pressed: skinVars.colors.backgroundContainerPressed,
+        selected: skinVars.colors.backgroundSelectedNegative,
+        selectedHover: skinVars.colors.backgroundSelectedNegativeHover,
+        selectedPressed: skinVars.colors.backgroundSelectedNegativePressed,
+    },
+    media: {
+        label: skinVars.colors.textPrimaryNegative,
+        asset: 'currentColor',
+        chevron: skinVars.colors.neutralHighNegative,
+        indicator: skinVars.colors.controlActivatedNegative,
+        hover: skinVars.colors.backgroundContainerHover,
+        pressed: skinVars.colors.backgroundContainerPressed,
+        selected: skinVars.colors.backgroundSelected,
+        selectedHover: skinVars.colors.backgroundSelectedHover,
+        selectedPressed: skinVars.colors.backgroundSelectedPressed,
+    },
+};
+
+// The container is a row of columns: the main column, and the double panel column when it is open. Its
+// width is intrinsic, so an open panel widens the sidenav and pushes the main content of the layout.
+// It paints no background of its own: each region owns its token, and the body of the default variant
+// is transparent, so the page shows through it.
+// The three heights below replace the plain `100%` that a rail of `SidenavLayout` would need on its own.
+// A percentage height resolves to `auto` under a parent that takes the height of its content, and the
+// sidenav then shrinks to the height of its items, which is what a consumer sees when it renders the bar
+// outside of the layout. A percentage `min-height` reads as `0` under that same parent, and a percentage
+// `max-height` reads as `none`, so the two of them pin the sidenav to the height of its parent wherever
+// that height exists, and they leave the height of the viewport wherever it does not.
+export const container = style([
+    sprinkles({
+        display: 'flex',
+        flexDirection: 'row',
+    }),
+    {
+        position: 'relative',
+        boxSizing: 'border-box',
+        // The width belongs to the columns, so the root takes the width that they ask for. A block-level
+        // box otherwise fills the width of its parent, and the edge of a boxed sidenav, which the root
+        // paints, then stood far to the right of the items of a narrower `width`. A flex item resolves
+        // its width the same way, so a rail of `SidenavLayout` measured the columns already.
+        width: 'fit-content',
+        height: '100vh',
+        minHeight: '100%',
+        maxHeight: '100%',
+        overflow: 'hidden',
+    },
+]);
+
+// The column that carries the header, the body, and the footer regions.
+// `sidenavWidthVar` carries the width of the expanded sidenav or the width of the collapsed rail, so the
+// transition below runs whenever the user toggles the sidenav.
+export const mainColumn = style([
+    sprinkles({
+        display: 'flex',
+        flexDirection: 'column',
+    }),
+    {
+        position: 'relative',
+        boxSizing: 'border-box',
+        height: '100%',
+        width: sidenavWidthVar,
+        flexShrink: 0,
+        minWidth: 0,
+        transition: `width ${collapseDurationVar} ${COLLAPSE_EASING}`,
+        ...reducedMotion,
+    },
+]);
+
+// A vertical divider paints over the last pixel column of the box that owns it, as an absolutely
+// positioned overlay. A real border grows the intrinsic width of the container instead, so the whole
+// sidenav (and the content next to it) shifted by 1px when the consumer toggled the divider. With the
+// overlay, `width` is a total width, dividers included, for both columns, and no child moves. An
+// outline is not an option either: the container has `overflow: hidden`, which clips it.
+const verticalDividerOverlay = {
+    content: '',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 1,
+    pointerEvents: 'none',
+    // Above the sticky scroll dividers of the body, above the header, and above the edge of a boxed
+    // sidenav (see `boxedBorder`), so this line reaches the top and the bottom of the box.
+    zIndex: 4,
+} as const;
+
+export const withRightDivider = styleVariants(dividerColor, (color) => ({
+    '::after': {...verticalDividerOverlay, backgroundColor: color},
+}));
+
+// The header, the body and the footer share one background per variant, so the three bands of the sidenav
+// stay uniform, and a boxed sidenav paints the same colours as a full-height one.
+export const regionBackground = styleVariants(regionBackgroundColor, (color) => ({
+    backgroundColor: color,
+}));
+
+// While the rail moves, every column of the sidenav stops answering the pointer: the row that the user
+// aims at is travelling, and a floating panel opened here would measure an edge that has not arrived yet.
+// The rule lands on the columns, and not on the container, so the container still takes the press: a press
+// that fell through to the page behind would read as a press outside of the bar, and it would close the
+// second column.
+export const columnsWhileMoving = style({});
+
+globalStyle(`${columnsWhileMoving} > *`, {
+    pointerEvents: 'none',
+});
+
+// The margins of the box belong to the height, so a boxed sidenav and a full-height one take the same
+// room. The three heights follow the rule of `container` above.
+export const boxed = style({
+    margin: BOXED_INSET,
+    height: `calc(100vh - ${BOXED_INSET * 2}px)`,
+    minHeight: `calc(100% - ${BOXED_INSET * 2}px)`,
+    maxHeight: `calc(100% - ${BOXED_INSET * 2}px)`,
+    borderRadius: skinVars.borderRadii.popup,
+});
+
+// The edge of the box is an overlay, not a real border. A real border takes 1px of the container on
+// each side, and `overflow: hidden` clips every child to the padding box, so the separator of the
+// double panel could not reach the top and the bottom edge of the box: it stopped one pixel short of
+// them, and that pixel reads as a gap wherever the border token matches the background of the sidenav,
+// which every dark mode does. The overlay keeps the border out of the intrinsic size too, so a boxed
+// sidenav of `width` pixels measures exactly that width. An outline is not an option: `overflow:
+// hidden` clips a negatively-offset outline.
+// `shouldShowBoxedBorder` decides when this class applies: the border only reads over a default or an
+// alternative page, and a skin can switch it off.
+// todo https://github.com/Telefonica/mistica-design/issues/2827 review Boxed border rendering logic
+export const boxedBorder = style({
+    '::before': {
+        content: '',
+        position: 'absolute',
+        inset: 0,
+        boxSizing: 'border-box',
+        border: `1px solid ${skinVars.colors.border}`,
+        // The container owns the radius (see `boxed`), and the edge follows it.
+        borderRadius: 'inherit',
+        pointerEvents: 'none',
+        // Above the background of both columns, the sticky scroll dividers of the body and the header,
+        // and below the vertical dividers, which cross it (see `verticalDividerOverlay`).
+        zIndex: 3,
+    },
+});
+
+// Header region ---------------------------------------------------------------
+
+// The 24px inset above the logo belongs to the header, so the header band reaches the top edge of the
+// sidenav in every variant.
+// The 32px gap separates the collapse action from the header slot, and the collapsed rail keeps it: the
+// spec gives one value for both states.
+export const headerBase = style({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: 24,
+    flexShrink: 0,
+    paddingTop: 24,
+    // Above the background of the body and above the painted scroll spacer, which follow it. Without a
+    // header slot, the collapse control ends the header, and its focus ring draws a few pixels below it,
+    // over the body: the body background, or the band of the spacer while the user scrolls, would
+    // otherwise cover that part of the ring. Below the boxed edge (zIndex 3) and the vertical dividers
+    // (zIndex 4).
+    position: 'relative',
+    zIndex: 2,
+});
+
+// The logo and the collapse control stack, both 32px tall. Their left edge is placed with
+// explicit padding rather than by centering, so that it stays at 20px in both states
+// regardless of the right divider border and of whether the consumer loads css/reset.css.
+export const headerControls = style({
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap: 8,
+    width: '100%',
+    paddingLeft: 20,
+    paddingRight: 24,
+});
+
+// The collapsed rail keeps the same left padding, and it keeps `flex-start` too. Centring the controls
+// gives the same result at rest, because the rail leaves the logo exactly its 32px, but it moves them
+// while the rail moves: a centre travels with the box that holds it, and a left edge does not.
+export const headerControlsCollapsed = style({
+    paddingRight: 20,
+});
+
+// The default isotype is a square as wide as its height in both states. The collapsed rail still clamps
+// the width, because a logo of the consumer, or the function form of the prop, can be wider than the rail.
+// The spec fades the label of the header 50ms after the rail starts to move. Our default header carries no
+// label, because the default logo is the isotype in both states, so what this rule gives is the smooth
+// clamp of the width, and a smooth fade for a consumer that drives the opacity of its own logo.
+export const logo = style({
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    // The spot grows with a logo of the consumer that is taller than the default isotype. The minimum
+    // keeps the 32px band of the spec, so the header rhythm does not change with the default logo.
+    height: 'auto',
+    minHeight: LOGO_SIZE,
+    // The clamp below is a `max-width`, and not a `width`, so that it interpolates: `auto` has no value to
+    // animate from.
+    maxWidth: '100%',
+    // A logo of the consumer that is larger than this box is clipped, so it never paints over the
+    // controls of the header or past the edge of the collapsed rail.
+    overflow: 'hidden',
+    transition: `max-width ${collapseDurationVar} ${COLLAPSE_EASING}, opacity ${collapseDurationVar} ${COLLAPSE_EASING} 50ms`,
+    ...reducedMotion,
+});
+
+// The child keeps its own width while the clamp narrows the box. A flex item shrinks to its minimum
+// otherwise, and a text inside it then re-wraps letter by letter, which makes the spot grow with every
+// line. This way the edge of the box cuts the child, which stands still (see `itemLabelFrozenWidth`).
+globalStyle(`${logo} > *`, {
+    flexShrink: 0,
+});
+
+// The svg of the default logo draws a few pixels taller than the size that it receives, and the amount
+// depends on the skin. The default spot holds the 32px of the spec, so the header keeps its rhythm in
+// every skin.
+export const logoDefault = style({
+    height: LOGO_SIZE,
+});
+
+export const logoCollapsed = style({
+    maxWidth: LOGO_SIZE,
+});
+
+// The slot follows the same rule as the logo above. It never rests at opacity 0, because the collapsed
+// rail keeps the slot: the fade serves a consumer that drives the opacity of its own header content.
+// The padding travels with the rail, so the slot never snaps to its collapsed inset while the rail moves.
+export const headerSlot = style({
+    boxSizing: 'border-box',
+    width: '100%',
+    minWidth: 0,
+    paddingLeft: SLOT_INSET_X,
+    paddingRight: SLOT_INSET_X,
+    transition: `opacity ${collapseDurationVar} ${COLLAPSE_EASING} 50ms, padding ${collapseDurationVar} ${COLLAPSE_EASING}`,
+    ...reducedMotion,
+});
+
+export const headerSlotCollapsed = style({
+    paddingLeft: COLLAPSED_SLOT_INSET_X,
+    paddingRight: COLLAPSED_SLOT_INSET_X,
+});
+
+// Body region -----------------------------------------------------------------
+
+// The body scrolls up and down, never sideways. The rule below is not the default: a box that scrolls on
+// one axis takes `auto` on the other one as well, and the title of a section, which keeps the width of its
+// text while the sidenav moves, would then give the collapsed rail a horizontal scrollbar.
+export const bodyBase = style({
+    flex: 1,
+    minHeight: 0,
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+    // When the keyboard moves the focus to a row outside of the view, the browser scrolls that row just
+    // to the edge of the scrollport. At the top, that edge sits under the painted spacer, which would
+    // cover the top of the focus ring. The scroll padding makes the browser leave the spacer and the
+    // ring their room. `FOCUS_RING_ROOM` is the room of the ring alone, top and bottom.
+    scrollPaddingTop: HEADER_SCROLL_SPACER_HEIGHT + FOCUS_RING_ROOM,
+    scrollPaddingBottom: FOCUS_RING_ROOM,
+});
+
+// The inset between the header and the first row lives inside the scrollport, as this sticky
+// spacer, and not as a padding of the header or of the body. A padding of the header sits outside the
+// scrollport, and the seam clips the focus ring of the first row; a padding of the body sits inside it,
+// and the rows stay visible under the header while the user scrolls. The spacer gives both behaviours:
+// transparent at rest, it leaves the ring its room, and while the content scrolls it paints the
+// background of the body over the rows that pass beneath, with the divider on its bottom edge. It is
+// always in the flow, so nothing jumps on the scroll threshold: only its paint changes.
+// The flex places the line of the spacer on its outer edge: the last child lands on the bottom edge of
+// the header spacer, and the first child on the top edge of the footer spacer. An absolutely positioned
+// line is not an option: it does not anchor to the sticky box reliably, and it lands at the bottom of
+// the scroll content instead.
+const scrollSpacerBase = {
+    flexShrink: 0,
+    position: 'sticky',
+    zIndex: 1,
+    pointerEvents: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+} as const;
+
+export const headerScrollSpacer = style({
+    ...scrollSpacerBase,
+    height: HEADER_SCROLL_SPACER_HEIGHT,
+    top: 0,
+    justifyContent: 'flex-end',
+});
+
+// The mirror of `headerScrollSpacer` for a fixed footer, which sits outside of the scrollport like the
+// header does. The band covers the rows that pass beneath it toward the footer. It is shorter than the
+// header spacer, because it carries the top inset of the footer, which the spec makes smaller.
+export const footerScrollSpacer = style({
+    ...scrollSpacerBase,
+    height: FOOTER_PADDING_TOP,
+    bottom: 0,
+});
+
+// The line of a spacer. It stops 1px before the right edge, so it never crosses the vertical divider
+// that sits there (see the comment of `scrollDivider` below), and a boxed sidenav insets it on the left
+// (see the `boxed` rule below).
+export const scrollSpacerDivider = style({
+    height: 1,
+    marginRight: 1,
+});
+
+// A keyboard-focused row must stop clear of the band of the fixed footer: the height of the band plus the
+// room of the ring, like `scrollPaddingTop` above. The inline footer keeps the `FOCUS_RING_ROOM` of
+// `bodyBase`, because it scrolls with the content and needs no band.
+export const bodyWithFixedFooter = style({
+    scrollPaddingBottom: FOOTER_PADDING_TOP + FOCUS_RING_ROOM,
+});
+
+// List of first-level entries (sections and stand-alone items). Every entry owns `ENTRY_SPACE_Y` above and
+// below itself, whatever its kind: the gap carries the two spaces that meet between two neighbours, and the
+// padding carries the space of the first entry and of the last one. The space lives on this list, so the
+// scroll sentinels and the footer, which are its siblings, stay untouched.
+export const bodyContent = style({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: ENTRY_SPACE_Y * 2,
+    paddingTop: ENTRY_SPACE_Y,
+    paddingBottom: ENTRY_SPACE_Y,
+});
+
+// Scroll-intersection divider of the footer (appears when content scrolls past the footer).
+// It stops 1px before the right edge, so it never crosses the vertical divider that sits there (the right
+// divider, or the separator of the double panel). The divider token is translucent in dark mode, so two
+// lines that overlap paint a brighter pixel at the crossing. The gap is invisible when no vertical divider
+// is there, because the right edge of the sidenav is transparent then. A boxed sidenav also insets it on
+// the left (see the `boxed` rule below), where its edge draws a border too.
+export const scrollDivider = style({
+    height: 1,
+    flexShrink: 0,
+    pointerEvents: 'none',
+    position: 'sticky',
+    zIndex: 1,
+    marginRight: 1,
+});
+
+export const footerScrollDivider = style({
+    bottom: 0,
+});
+
+export const scrollDividerVariant = styleVariants(dividerColor, (color) => ({backgroundColor: color}));
+
+// Footer region ---------------------------------------------------------------
+
+// The horizontal padding travels with the rail, like the one of `headerSlot`: the two slots keep the same
+// two edges through the whole movement, and neither of them snaps to its collapsed inset.
+export const footerBase = style({
+    flexShrink: 0,
+    paddingTop: FOOTER_PADDING_TOP,
+    paddingBottom: FOOTER_PADDING_BOTTOM,
+    paddingLeft: SLOT_INSET_X,
+    paddingRight: SLOT_INSET_X,
+    transition: `padding ${collapseDurationVar} ${COLLAPSE_EASING}`,
+    ...reducedMotion,
+});
+
+export const footerCollapsed = style({
+    paddingLeft: COLLAPSED_SLOT_INSET_X,
+    paddingRight: COLLAPSED_SLOT_INSET_X,
+});
+
+// A fixed footer hands its top inset to `footerScrollSpacer`, which owns that space inside the
+// scrollport, so the focus ring of the last row has room to draw. The footer content does not move: it
+// anchors to the bottom, and only the boundary of its band shifts. The stacking mirrors `headerBase`:
+// a control on the top edge of the footer slot draws its ring a few pixels above the footer, and the
+// painted band would cover that part of the ring otherwise.
+export const footerFixed = style({
+    paddingTop: 0,
+    position: 'relative',
+    zIndex: 2,
+});
+
+// Section ---------------------------------------------------------------------
+
+// No vertical padding here: a section owns no space of its own. Its dividers own the space that faces the
+// items (see `sectionDividerTop`), and the body list owns the space between the entries.
+export const section = style({
+    display: 'flex',
+    flexDirection: 'column',
+});
+
+// The box of the title closes while the rail narrows, so the items move up with it. A grid row goes from
+// `1fr` to `0fr` with a transition, which a height in `auto` cannot do (the same pattern as the panel of the
+// Accordion). The CI Chromium predates that interpolation and snaps the row, which its screenshots accept.
+// The text fades apart from the fold, so the fade shows instead of the clip of the row: it fades out over
+// the first half of a collapse, before the row cuts it, and it fades in over the second half of an
+// expansion, once the row has room for it. A transition runs with the timing of the state that it goes
+// to, so this rule times the expansion and `sectionTitleCollapsed` times the collapse.
+const TITLE_FADE_DURATION = `calc(${collapseDurationVar} / 2)`;
+
+export const sectionTitle = style({
+    display: 'grid',
+    gridTemplateRows: '1fr',
+    marginBottom: 8,
+    transition: `grid-template-rows ${collapseDurationVar} ${COLLAPSE_EASING}, margin-bottom ${collapseDurationVar} ${COLLAPSE_EASING}, opacity ${TITLE_FADE_DURATION} ${COLLAPSE_EASING} ${TITLE_FADE_DURATION}`,
+    ...reducedMotion,
+});
+
+// The row of the grid clips its content, so the text disappears with the row and never paints over the
+// items while the row closes.
+export const sectionTitleContent = style({
+    minHeight: 0,
+    overflow: 'hidden',
+    padding: `0 ${SECTION_TITLE_INSET}px`,
+});
+
+// The title text inherits this colour (see the `color="inherit"` of its `Text3`), so every title of the
+// sidenav takes its token from one place.
+export const sectionTitleVariant = styleVariants(sectionTitleColor, (color) => ({color}));
+
+// Collapsed: the title gives its space back, so the first item of a section moves up to where the title
+// stood. The element stays in the document, out of the reading order with `aria-hidden`, because the
+// list of the section takes its name from it (see `sidenav-bar-section.tsx`). No `visibility: hidden`: a
+// box without height takes no click, and jsdom would drop the name of the list with it.
+export const sectionTitleCollapsed = style({
+    gridTemplateRows: '0fr',
+    marginBottom: 0,
+    opacity: 0,
+    transition: `grid-template-rows ${collapseDurationVar} ${COLLAPSE_EASING}, margin-bottom ${collapseDurationVar} ${COLLAPSE_EASING}, opacity ${TITLE_FADE_DURATION} ${COLLAPSE_EASING}`,
+    ...reducedMotion,
+});
+
+// A title that the consumer hides (`title={{text, hidden: true}}`) never paints, in any state, and it
+// takes no space. It stays in the document because the list of the section takes its name from it, as in
+// the collapsed state above. No `display: none`: that drops the element from the accessibility tree, and
+// the name of the list would go with it.
+export const sectionTitleHidden = style({
+    gridTemplateRows: '0fr',
+    marginBottom: 0,
+    opacity: 0,
+    transition: 'none',
+});
+
+// While the sidenav moves, the title keeps the width that it had at rest (an inline `width`, see
+// `useRestWidth`), for the same reason as the label of an item (see `itemLabelFrozenWidth`). Without
+// this, the title would wrap over several lines as the rail narrows, and the whole body of the sidenav
+// would move down with it. A title with no width at rest yet takes the width of its text on one line.
+export const sectionTitleKeepsWidth = style({
+    width: 'max-content',
+});
+
+// The rail that carries the items of a section. A first-level stand-alone item reuses it, so that
+// it lands on the same rail as the items that belong to a section (see `standaloneItem`).
+// The left inset hosts the selected indicator, and the row of each item adds `ITEM_ROW_INSET` on top of
+// it, which gives the 18px that the spec measures from the edge of the sidenav to the row.
+export const sectionContent = style({
+    display: 'flex',
+    flexDirection: 'column',
+    paddingLeft: RAIL_INSET,
+    paddingRight: RAIL_INSET,
+});
+
+// A stand-alone item is not wrapped in a section, so it carries the items rail itself. It is a class of
+// its own, so that a selector can tell it from the rail inside a section.
+export const standaloneItem = style([sectionContent]);
+
+// The dividers sit outside `sectionContent`, on the edges of the section. The anatomy of a section reads,
+// top to bottom: top divider, 16px, title, 8px, items, 16px, bottom divider. Each divider carries its 16px
+// as a margin on the side of the items only. The outward side is the edge of the entry, and the body list
+// keeps every entry 16px from its neighbour there, so a line reads 16px on each side, shared or not. The
+// collapsed rail keeps the same distances, because the title closes without a trace. The horizontal margin
+// also keeps the line off the vertical divider on the right edge, for the same reason as `scrollDivider`
+// above.
+const sectionDividerBase = style({
+    marginLeft: SECTION_DIVIDER_MARGIN_X,
+    marginRight: SECTION_DIVIDER_MARGIN_X,
+});
+
+export const sectionDividerTop = style([sectionDividerBase, {marginBottom: SECTION_DIVIDER_MARGIN_Y}]);
+export const sectionDividerBottom = style([sectionDividerBase, {marginTop: SECTION_DIVIDER_MARGIN_Y}]);
+
+// A boxed sidenav draws a border on its left edge too (see `boxedBorder`), so the scroll dividers keep off
+// that edge as well. A non-boxed sidenav has no divider on the left, so the lines reach that edge. A section
+// divider needs no rule here: its 8px margin already clears both edges.
+globalStyle(`${boxed} ${scrollDivider}, ${boxed} ${scrollSpacerDivider}`, {
+    marginLeft: 1,
+});
+
+// Item ------------------------------------------------------------------------
+
+export const itemRow = style({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+});
+
+// The row of an item takes the same box in both states: `ITEM_ROW_INSET` on each side of the items rail.
+// Its width is a percentage of the rail, so it follows the rail while the rail moves, and it needs no
+// transition of its own. The collapsed rail leaves it 36px, which holds the icon and its two paddings.
+// The overflow keeps the label, the right slot and the chevron inside the row while it narrows.
+// The height is a minimum, and not a fixed number: the spec asks for a label that wraps over several
+// lines instead of one that truncates, and the row grows with it. A row that holds a single line keeps the
+// 44px of the spec, because `ITEM_ROW_PADDING_Y` leaves that line the room that it needs: one line of
+// `Text2` measures 24px on the widest skin, and 44px hold it with the two paddings.
+export const itemTouchable = style({
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    gap: ITEM_ROW_GAP,
+    flex: 'none',
+    width: `calc(100% - ${ITEM_ROW_INSET * 2}px)`,
+    minWidth: 0,
+    minHeight: ITEM_ROW_HEIGHT,
+    padding: `${ITEM_ROW_PADDING_Y}px 8px`,
+    marginLeft: ITEM_ROW_INSET,
+    marginRight: ITEM_ROW_INSET,
+    borderRadius: 8,
+    backgroundColor: 'transparent',
+    overflow: 'hidden',
+});
+
+// The label inherits the `color` of the row (see the `color="inherit"` of its `Text2`). The asset inherits it
+// too (the spec paints it with `currentColor`), while the chevron overrides it with its own token (see
+// `itemChevronVariant`).
+export const itemTouchableVariant = styleVariants(itemColors, (colors) => ({
+    color: colors.label,
+    selectors: {
+        '&:hover': {backgroundColor: colors.hover},
+        '&:focus-visible': {backgroundColor: colors.hover},
+        '&:active': {backgroundColor: colors.pressed},
+    },
+}));
+
+// The collapsed rail keeps the box of the row untouched, so that the row never moves between the two
+// states. The 36px that the rail leaves hold the icon and its two paddings exactly, which places the icon
+// at the centre of the rail. The label and the gap that precedes it overflow that box, and the row clips
+// them, so the icon keeps its place from the first frame of the movement to the last one.
+export const itemTouchableCollapsed = style({
+    border: 'none',
+    lineHeight: 1,
+    textDecoration: 'none',
+});
+
+// It follows `itemTouchableVariant` in this file on purpose: both rules have the same specificity, so the
+// selected background wins over the resting one by source order.
+export const itemTouchableSelected = styleVariants(itemColors, (colors) => ({
+    backgroundColor: colors.selected,
+    selectors: {
+        '&:hover': {backgroundColor: colors.selectedHover},
+        '&:focus-visible': {backgroundColor: colors.selectedHover},
+        '&:active': {backgroundColor: colors.selectedPressed},
+    },
+}));
+
+// The accent stays on the collapsed rail: a selected first-level item keeps its bar in both states. Only
+// a parent whose descendant is selected marks the selection with the background alone, because the bar
+// belongs to the selected child (see `showAccent` in `sidenav-bar-first-level-item.tsx`).
+export const itemAccent = style({
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: 2,
+    height: 20,
+    borderRadius: 8,
+    pointerEvents: 'none',
+});
+
+export const itemAccentVariant = styleVariants(itemColors, (colors) => ({
+    backgroundColor: colors.indicator,
+}));
+
+export const itemAsset = style({
+    display: 'flex',
+    flexShrink: 0,
+    width: 20,
+    height: 20,
+});
+
+export const itemAssetVariant = styleVariants(itemColors, (colors) => ({color: colors.asset}));
+
+// The label keeps its box in the DOM on the collapsed rail, so a screen reader still reads it, and so the
+// fade of the spec has something to fade. Its own box needs no width animation: it grows and shrinks with
+// the row that holds it, because it takes the space that the row leaves.
+// The box is a grid row that folds from `1fr` to the height of one line while the rail collapses, the same
+// pattern as the section title: a label that wraps over several lines then shrinks its row with the rail,
+// instead of making it jump to one line at the first frame. The CI Chromium snaps that row (see
+// `sectionTitle`).
+export const itemLabel = style({
+    flex: 1,
+    minWidth: 0,
+    display: 'grid',
+    gridTemplateRows: '1fr',
+    transition: `grid-template-rows ${collapseDurationVar} ${COLLAPSE_EASING}, opacity ${collapseDurationVar} ${COLLAPSE_EASING}`,
+    ...reducedMotion,
+});
+
+// The folded row stops at one line of text, which is what a row of 44px holds, so a label of one line
+// never changes its box. The clip hides the lines below the first one while the row folds.
+export const itemLabelContent = style({
+    minHeight: skinVars.textPresets.text2.lineHeight,
+    overflow: 'hidden',
+});
+
+// The label keeps its place beside the icon, so the text stands still while it fades. A margin or a width
+// of its own would drag the text toward the icon instead.
+export const itemLabelCollapsed = style({
+    gridTemplateRows: '0fr',
+    opacity: 0,
+});
+
+// While the sidenav moves, the label keeps the width that it had at rest (an inline `width`, see
+// `useRestWidth`), instead of taking the share of the row that the flex layout would give it. The row
+// narrows under a text that does not move, and the edge of the sidenav passes over that text: without
+// this, the label would wrap over more and more lines as the rail narrows, and every row of the body would
+// grow and then shrink again. The expanded sidenav at rest drops this rule, so a label longer than the
+// row wraps there, which is what the spec asks for.
+export const itemLabelFrozenWidth = style({
+    flex: 'none',
+});
+
+// Fallback for a label with no width at rest yet (a sidenav that mounted collapsed): the width that its
+// text asks for, on one line. The label then wraps when the rail settles, which is one jump at the end.
+export const itemLabelKeepsWidth = style({
+    minWidth: 'max-content',
+});
+
+// The right slot and the chevron stay in the DOM on the collapsed rail and fade with the label of their
+// item, so that nothing of the row pops while the rail moves. The `visibility` step ends with the fade,
+// which takes the slot out of the accessibility tree and the tab order once the rail stopped.
+export const itemRightSlot = style({
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    transition: `opacity ${collapseDurationVar} ${COLLAPSE_EASING}, visibility ${collapseDurationVar} ${COLLAPSE_EASING}`,
+    ...reducedMotion,
+});
+
+export const itemRightSlotCollapsed = style({
+    opacity: 0,
+    visibility: 'hidden',
+});
+
+export const itemChevron = style({
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+    width: 16,
+    height: 16,
+    transition: `transform ${contentDurationVar} ${CONTENT_EASING}, opacity ${collapseDurationVar} ${COLLAPSE_EASING}, visibility ${collapseDurationVar} ${COLLAPSE_EASING}`,
+    ...reducedMotion,
+});
+
+export const itemChevronCollapsed = style({
+    opacity: 0,
+    visibility: 'hidden',
+});
+
+// The chevron of an open parent item turns half a turn counterclockwise, the same direction as the chevron
+// of `Accordion` (see `icons/icon-chevron.tsx`), so that it reports the state of its group. It applies to
+// the chevron that points down, which the sidenav uses for a group that opens in place. The double panel
+// keeps the chevron that points right, and never turns it: half a turn would make it point away from the
+// column that it opens.
+export const itemChevronRotated = style({
+    transform: 'rotate(-180deg)',
+});
+
+export const itemChevronVariant = styleVariants(itemColors, (colors) => ({color: colors.chevron}));
+
+// The children of a parent item grow and shrink as one group. A grid row of `0fr` collapses the group
+// without a measured height, which is the pattern that `Accordion` uses (see `accordion.css.ts`).
+export const accordionContainer = style({
+    display: 'grid',
+});
+
+// The group also fades while it folds: the fold clips its rows, and a selected row would otherwise leave
+// at full opacity, with its accent and its background.
+export const accordionTransitionClasses = {
+    enter: style({
+        gridTemplateRows: '0fr',
+        opacity: 0,
+    }),
+    enterActive: style({
+        gridTemplateRows: '1fr',
+        opacity: 1,
+        transition: `grid-template-rows ${contentDurationVar} ${CONTENT_EASING}, opacity ${contentDurationVar} ${CONTENT_EASING}`,
+        ...reducedMotion,
+    }),
+    exit: style({
+        gridTemplateRows: '1fr',
+        opacity: 1,
+    }),
+    exitActive: style({
+        gridTemplateRows: '0fr',
+        opacity: 0,
+        transition: `grid-template-rows ${contentDurationVar} ${CONTENT_EASING}, opacity ${contentDurationVar} ${CONTENT_EASING}`,
+        ...reducedMotion,
+    }),
+};
+
+export const accordion = style({
+    display: 'flex',
+    flexDirection: 'column',
+});
+
+// accordionContainer   display: grid  ← the only grid; its row animates 0fr ↔ 1fr
+// └─ accordion         flex column    ← clips its rows while the track moves
+//    └─ accordionRows  flex column, role="list"
+//       └─ item rows
+// the selection would be clipped (borders) when not animating. this fixes it.
+globalStyle(
+    `:is(${accordionTransitionClasses.enter}, ${accordionTransitionClasses.enterActive}, ${accordionTransitionClasses.exit}, ${accordionTransitionClasses.exitActive}) > ${accordion}`,
+    {overflow: 'hidden'}
+);
+
+// One node carries one role, so the group of the children and the list of their rows are two nodes. This
+// one repeats the column of the group above it, and the rows keep the box that they had.
+export const accordionRows = style({
+    display: 'flex',
+    flexDirection: 'column',
+});
+
+// The rows of a panel list the children at the edge, like a first-level row, so only the accordion
+// rows take the indent.
+globalStyle(`${accordionRows} ${itemRow}`, {
+    paddingLeft: SECOND_LEVEL_INDENT,
+});
+
+// Panel (the dialog panel and the second column) -------------------------------
+
+// The rows of a panel, under the group that names it. It repeats the column of that group, for the
+// same reason as `accordionRows`.
+export const panelRows = style({
+    display: 'flex',
+    flexDirection: 'column',
+});
+
+export const dialogPanel = style({
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: skinVars.colors.backgroundContainer,
+    borderRadius: skinVars.borderRadii.popup,
+    border: `1px solid ${skinVars.colors.border}`,
+    minWidth: DEFAULT_WIDTH,
+    maxHeight: '70vh',
+    overflowY: 'auto',
+    paddingTop: DIALOG_PANEL_PADDING_Y,
+    paddingBottom: DIALOG_PANEL_PADDING_Y,
+    paddingLeft: DIALOG_PANEL_INSET,
+    paddingRight: DIALOG_PANEL_INSET,
+    boxShadow: '0px 4px 12px rgba(0,0,0,0.15)',
+    position: 'relative',
+    zIndex: 1001,
+});
+
+// The inset of the panel plus this padding place the title where a section title stands, at
+// `SECTION_TITLE_INSET` from the edge of the panel, on the rail of the content of the items below it.
+export const dialogPanelTitle = style({
+    paddingBottom: 8,
+    paddingLeft: SECTION_TITLE_INSET - DIALOG_PANEL_INSET,
+    paddingRight: SECTION_TITLE_INSET - DIALOG_PANEL_INSET,
+});
+
+// The second column of the sidenav. It holds the children of the open parent item, spans the whole
+// height of the sidenav, and scrolls on its own. Its horizontal inset (8px) is the same as the items
+// rail of a section, so the children land on the same rail as the items of the main column.
+export const doublePanelColumn = style({
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    // The content hangs from the right edge of the column, so it slides out from under the main column
+    // while the column opens, and slides back under it while the column closes. Anchored to the left edge,
+    // the content stood still and the edge wiped it instead, in one direction only: on opening, the focus
+    // of the first item scrolled the narrow column, which dragged the content by accident.
+    alignItems: 'flex-end',
+    width: sidenavPanelWidthVar,
+    height: '100%',
+    flexShrink: 0,
+    // The column only clips. The content scrolls (see `doublePanelContent`), so a classic scrollbar
+    // takes its room inside the content instead of pushing the content, which hangs from the right edge,
+    // out of the left edge of the column.
+    overflow: 'hidden',
+});
+
+// The column slides out of the main column and slides back into it, with the movement of the rail. Its
+// children keep the width of the open column while it moves, so the text never reflows: the column clips
+// them instead (see the `overflow` above, and `doublePanelContent` below).
+const doublePanelClosed = style({
+    width: 0,
+});
+
+const doublePanelOpening = style({
+    width: sidenavPanelWidthVar,
+    transition: `width ${collapseDurationVar} ${COLLAPSE_EASING}`,
+    ...reducedMotion,
+});
+
+// The first column that a sidenav opens arrives with the item that owns it, so it enters the tree while it
+// is already open. `appear` gives that first column the same movement as every later one.
+export const doublePanelTransitionClasses = {
+    appear: doublePanelClosed,
+    appearActive: doublePanelOpening,
+    enter: doublePanelClosed,
+    enterActive: doublePanelOpening,
+    exit: style({
+        width: sidenavPanelWidthVar,
+    }),
+    exitActive: style({
+        width: 0,
+        transition: `width ${collapseDurationVar} ${COLLAPSE_EASING}`,
+        ...reducedMotion,
+    }),
+};
+
+// The paddings of the column belong to this box, so the column itself can reach a width of zero. Its
+// horizontal inset is the inset of the items rail, so the children of the column land on the same rail as
+// the items of the main column. It scrolls up and down on its own, never sideways.
+export const doublePanelContent = style({
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    width: sidenavPanelWidthVar,
+    height: '100%',
+    flexShrink: 0,
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    paddingTop: 24,
+    paddingBottom: 24,
+    paddingLeft: RAIL_INSET,
+    paddingRight: RAIL_INSET,
+});
+
+// The inset of the column plus this padding place the title where a section title stands, at
+// `SECTION_TITLE_INSET` from the edge of the column. The 16px bottom margin is the title-to-items gap of
+// the spec.
+export const doublePanelTitle = style({
+    padding: `0 ${SECTION_TITLE_INSET - RAIL_INSET}px`,
+    marginBottom: 16,
+});
+
+// Separates the main column from the double panel column. It renders whenever the panel is open, even
+// when the sidenav hides its right divider, because the two columns always need a visible boundary.
+// It is an overlay too (see `verticalDividerOverlay`), so the items of the main column keep the same
+// width when the panel opens.
+export const columnSeparator = styleVariants(dividerColor, (color) => ({
+    '::after': {...verticalDividerOverlay, backgroundColor: color},
+}));