` — exactly what toast.md's Code Example shows — rendered a transparent circle with a currentColor glyph, and every consumer patched it inline. .alert already ships the equivalent (`.alert- svg { color: … }`); these are its missing counterpart. Accent uses --color-accent-a10, the 10%-alpha accent tint, which is the same recipe --color--bg-subtle uses for the status tones. */ .toast-success .toast-icon { background: var(--color-success-bg-subtle); color: var(--color-success); } .toast-error .toast-icon { background: var(--color-error-bg-subtle); color: var(--color-error); } .toast-warning .toast-icon { background: var(--color-warning-bg-subtle); color: var(--color-warning); } .toast-info .toast-icon { background: var(--color-info-bg-subtle); color: var(--color-info); } .toast-accent .toast-icon { background: var(--color-accent-a10); color: var(--color-accent-400); } .toast-title { font-size: var(--text-xs); font-weight: var(--font-weight-bold); color: var(--color-foreground); } .toast-body { font-size: var(--text-xs); color: var(--color-foreground-subtle); } /* ===== SNACKBAR ===== Floating transient notification. Distinct from .toast (which is a static layout chip). Container positions the stack; individual .snackbar slides in when .open is applied, slides out when removed. Auto-dismiss timing is a consumer concern (JS); CSS only covers entrance/exit transitions. */ .snackbar-container { position: fixed; bottom: var(--snackbar-container-offset); right: var(--snackbar-container-offset); z-index: var(--snackbar-z-index); display: flex; flex-direction: column; gap: var(--snackbar-container-gap); pointer-events: none; } .snackbar-container-center { right: auto; left: 50%; transform: translateX(-50%); align-items: center; } .snackbar { pointer-events: auto; min-width: 280px; max-width: var(--snackbar-width); background: var(--snackbar-bg); border: 1px solid var(--snackbar-border); border-radius: var(--snackbar-radius); box-shadow: var(--snackbar-shadow); padding: var(--snackbar-padding-y) var(--snackbar-padding-x); display: flex; align-items: flex-start; gap: var(--snackbar-gap); opacity: 0; transform: translateX(110%); transition: opacity var(--duration-normal) var(--easing-spring), transform var(--duration-normal) var(--easing-spring); } .snackbar.open { opacity: 1; transform: translateX(0); } .snackbar-container-center .snackbar { transform: translateY(110%); } .snackbar-container-center .snackbar.open { transform: translateY(0); } .snackbar-success { border-left: var(--snackbar-stripe-width) solid var(--color-success); } .snackbar-error { border-left: var(--snackbar-stripe-width) solid var(--color-error); } .snackbar-warning { border-left: var(--snackbar-stripe-width) solid var(--color-warning); } .snackbar-info { border-left: var(--snackbar-stripe-width) solid var(--color-info); } .snackbar-accent { border-left: var(--snackbar-stripe-width) solid var(--color-accent-400); } /* Tone tints the icon disc, mirroring .toast- .toast-icon and .alert- svg. Without these the tone stops at the left stripe and the icon circle renders transparent, forcing every consumer to hand-write the tint inline (as snackbar.md's example did). Accent uses --color-accent-a10, the 10%-alpha accent tint, matching the --color--bg-subtle recipe. */ .snackbar-success .snackbar-icon { background: var(--color-success-bg-subtle); color: var(--color-success); } .snackbar-error .snackbar-icon { background: var(--color-error-bg-subtle); color: var(--color-error); } .snackbar-warning .snackbar-icon { background: var(--color-warning-bg-subtle); color: var(--color-warning); } .snackbar-info .snackbar-icon { background: var(--color-info-bg-subtle); color: var(--color-info); } .snackbar-accent .snackbar-icon { background: var(--color-accent-a10); color: var(--color-accent-400); } .snackbar-icon { flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; } .snackbar-icon svg { width: 14px; height: 14px; } .snackbar-content { flex: 1; min-width: 0; } .snackbar-title { font-size: var(--text-sm); font-weight: var(--font-weight-bold); color: var(--color-foreground); } .snackbar-body { font-size: var(--text-sm); color: var(--color-foreground-subtle); margin-top: 2px; } .snackbar-action { background: transparent; border: none; color: var(--color-accent-300); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); cursor: pointer; padding: 0; margin-top: var(--spacing-2); } .snackbar-action:hover { color: var(--color-accent-400); } .snackbar-dismiss { flex-shrink: 0; background: transparent; border: none; color: var(--color-foreground-subtle); cursor: pointer; padding: 2px; border-radius: var(--radius-sm); transition: color var(--duration-fast); } .snackbar-dismiss:hover { color: var(--color-foreground); } .snackbar-dismiss svg { width: 16px; height: 16px; } /* ===== TABLE ===== */ .table-wrap { border: 1px solid var(--color-border-subtle); border-radius: var(--table-radius); overflow: hidden; overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table thead { background: var(--table-header-bg); } .table th { text-align: left; padding: var(--table-cell-padding-y) var(--table-cell-padding-x); font-size: var(--table-header-font-size); font-weight: var(--font-weight-semibold); color: var(--color-foreground-disabled); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--color-border-subtle); } .table td { padding: var(--table-cell-padding-y) var(--table-cell-padding-x); } .table tbody tr { border-top: 1px solid var(--color-border-subtle); transition: background var(--duration-fast); } .table tbody tr:first-child { border-top: none; } .table tbody tr:hover { background: var(--color-accent-a04); } /* Frozen first column — opt in on the table, mark the cell to pin. NN/g treats locking the left column as inseparable from horizontal scroll, not an enhancement: without it, swiping right to read a wide row loses the label that says which row you're reading. We shipped the scroll without it. No breakpoint on purpose. Pinning is useful on a wide desktop table too, and an opt-in class can't surprise anyone — every existing table is untouched until it asks. It also avoids a new media width the guard would reject. Two things this exists to solve once instead of eight times badly: 1. The pinned cell needs its OWN opaque background. Cells paint above the row and thead backgrounds, so a transparent pinned cell shows the scrolling columns straight through itself. The background has to know what surface the table sits on, which the framework cannot: hence a fallback-only hook, NOT a declared token. Declaring --table-pinned-bg at :root would bake in :root's value and beat any override an ancestor set. 2. .table tbody tr:hover paints its tint on the ROW, which the pinned cell's opaque background then covers — the pinned column stays cold while the rest of the row lights up. The tint has to be recomposited over the same base, which is why the hover rule below repeats the color-mix rather than reusing --color-accent-a04 (that's 4% over *transparent*). border-collapse: collapse keeps sticky borders intact — verified in Chrome against the shipped .table, so no forced switch to `separate`. */ .table-pin-first .table-cell-pin { position: sticky; left: 0; z-index: 1; background: var(--table-pinned-bg, var(--color-bg-base)); /* Not border-right: under border-collapse the neighbour's border can win the conflict resolution and the pinned edge disappears. A shadow always draws. */ box-shadow: 1px 0 0 var(--color-border-subtle); } .table-pin-first thead .table-cell-pin { z-index: 2; background: var(--table-header-bg); } .table-pin-first tbody tr:hover .table-cell-pin { background: color-mix(in srgb, var(--color-accent-400) 4%, var(--table-pinned-bg, var(--color-bg-base))); } /* Scroll affordance — NN/g: the need to scroll must be *clearly indicated* ("don't use dots alone"). Goes ON the wrap; no extra element. The hard part isn't drawing an edge, it's knowing whether there IS more to the right — CSS can't ask "does this overflow?". The answer is background-attachment, which has known it since 2012: - the SHADOW layer is `scroll`: pinned to the element's own right edge. - the COVER layer is `local`: pinned to the CONTENT's right edge, so it travels with the scroll and parks exactly over the shadow once you reach the end. Order matters — cover is listed first, so it paints above the shadow. That falls out correctly in all three states with no JS and no measurement: more to the right -> content's right edge is off-screen, cover with it, shadow shows scrolled to the end -> the two right edges coincide, cover hides the shadow nothing to scroll -> they ALWAYS coincide, so the shadow never appears at all That last line is the whole reason this isn't a fade-out animation. A scroll-driven fade handles the scroll-end case but not the no-overflow one: a ScrollTimeline whose source has no scrollable overflow is INACTIVE, the effect never applies, and a table that fits keeps a permanent gradient claiming there's more. The affordance would lie in exactly the case it has nothing to say. Backgrounds paint behind cell content, so this reads as a shadow at the edge rather than a fade of the text — which is the affordance NN/g asks for anyway, and what every shipped data table does. --table-pinned-bg does double duty: the cover has to match the surface the table sits on, same as the pinned cell. The shadow is mixed from --color-foreground, not from black. Black on a near-black surface is invisible — the edge has to go LIGHTER on dark and DARKER on light, which is exactly what the foreground does for free, in both themes, with no light/ override. The mix is written here rather than declared as a :root token on purpose. A custom property substitutes its var()s at the scope it is DECLARED, so a :root-level color-mix would bake in :root's foreground and keep painting a light scrim inside a data-theme="light" island. Declared on the element, it resolves against that element's foreground. Same trap that nearly shipped on --heatmap-ramp-color. */ .table-scroll-hint { background: linear-gradient(to left, var(--table-pinned-bg, var(--color-bg-base)), var(--table-pinned-bg, var(--color-bg-base))) right center / var(--table-scroll-hint-width, 40px) 100% no-repeat local, linear-gradient(to left, var(--table-scroll-hint-shadow, color-mix(in srgb, var(--color-foreground) 16%, transparent)), transparent) right center / var(--table-scroll-hint-width, 40px) 100% no-repeat scroll; } /* Expandable rows — the visible row is a summary; the row under it is the rest of the record. Master-detail: right when the job is "read one record", wrong when it's "compare rows" (you can't see two expanded records side by side). The detail row belongs to the record above it, not to the table as a peer row: - no border-top, so it reads as continuous with its summary rather than as the next row down. - no hover tint. It isn't a row you act on, and .table tbody tr:hover would only half-apply anyway — the cell's own background paints over the row's, exactly like the pinned cell above. Its cell drops the top padding because the summary row already supplied it. Unlike card view, this needs no data-label trick: the consumer writes the

, so the label is real markup at the call site instead of a duplicate of a that CSS is not allowed to read. */ .table tbody tr.table-row-detail { border-top: none; background: transparent; } .table tbody tr.table-row-detail:hover { background: transparent; } .table-row-detail > td { padding-top: 0; background: var(--table-detail-bg, var(--color-bg-elevated-1)); } .table-detail-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-2) var(--spacing-4); font-size: var(--text-sm); } .table-detail-list dt { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--color-foreground-disabled); text-transform: uppercase; letter-spacing: 0.05em; } .table-detail-list dd { margin: 0; color: var(--color-foreground-secondary); } /* Chevron rotation, mirroring .sidebar-group-trigger — the state lives on aria-expanded, so the affordance and the announcement can never disagree. */ .table-row-toggle svg { transition: transform var(--duration-fast); } .table-row-toggle[aria-expanded="true"] svg { transform: rotate(90deg); } /* Card view — every row becomes a stacked card. Read the whole comment before reaching for this; it is the only pattern here that is not free. Right for: a short, read-one-at-a-time record set. Wrong for: comparison (nothing lines up), and anything past a few dozen rows — you get one record per screenful and no way to scan. Every record table in the consuming apps is already past that, which is why the frozen column above, not this, is the answer to nfd. TWO things the call site must supply, and neither can be done from CSS: 1. data-label on every . CSS cannot read a 's text from a — there is no selector for "my column's header". React's Table.Cell takes a `label` prop and writes this for you; vanilla writes it by hand, and it silently drifts the day someone renames a column. 2. ARIA roles. Changing `display` has historically dropped a table's implicit semantics in browsers, which would leave a screen reader announcing "Marcus Vane Green 18 71%" as one undifferentiated run with no column names. React's `cards` prop stamps role="table"/"rowgroup"/"row"/"cell" for you. We restore them unconditionally rather than testing for it: a redundant role is a no-op, a missing one is silent and invisible, and the two failure modes are not remotely symmetric. If you are on plain HTML and that markup burden isn't worth it — render cards. `.card` ships already and owes you no attributes. This class exists for the one-markup-two-renderings case, and nothing else. */ .table-cards, .table-cards thead, .table-cards tbody, .table-cards tr, .table-cards th, .table-cards td { display: block; } .table-cards thead { display: none; } .table-cards tbody { display: flex; flex-direction: column; gap: var(--spacing-3); } .table-cards tbody tr { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--table-cards-bg, var(--color-bg-elevated-1)); padding: var(--spacing-2) 0; } /* .table tbody tr:first-child kills the top border so the header's own bottom border can separate the first row. There is no header here — put it back. */ .table-cards tbody tr:first-child { border-top: 1px solid var(--color-border-subtle); } /* Same trap as the pinned cell: .table tbody tr:hover paints --color-accent-a04, which is 4% over TRANSPARENT. Left alone it would replace the card's opaque surface with a tint and the card would dissolve on hover. Recomposite instead. */ .table-cards tbody tr:hover { background: color-mix(in srgb, var(--color-accent-400) 4%, var(--table-cards-bg, var(--color-bg-elevated-1))); } .table-cards td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-4); } .table-cards td::before { content: attr(data-label); flex: 0 0 auto; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--color-foreground-disabled); text-transform: uppercase; letter-spacing: 0.05em; } /* An unlabelled cell is the card's title, not a broken row — no empty ::before. */ .table-cards td:not([data-label])::before, .table-cards td[data-label=""]::before { display: none; } .table-cards .table-cell-title { display: block; font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--color-foreground); border-bottom: 1px solid var(--color-border-subtle); padding-bottom: var(--spacing-3); } /* ===== MODAL ===== */ .modal-backdrop { position: fixed; inset: 0; background: var(--modal-backdrop); backdrop-filter: blur(var(--modal-blur)); display: flex; align-items: center; justify-content: center; z-index: var(--z-modal); } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: var(--z-modal-content); display: flex; flex-direction: column; background: var(--modal-bg); border: 1px solid var(--modal-border); border-radius: var(--modal-radius); overflow: hidden; box-shadow: var(--shadow-lg); max-width: 90vw; /* dvh, not vh: vh measures the LARGE viewport — the page as if a mobile address bar were retracted — so a 90vh modal is taller than the visible area whenever that bar is showing. The overflow lands off-screen above and below, and an open modal locks page scroll, so it cannot be reached: the header's close button can sit under the browser chrome (#115). dvh tracks the live viewport. The vh line stays as a fallback for engines without dvh, where the old behavior is still the best available. */ max-height: 90vh; max-height: 90dvh; } .modal-description { flex-shrink: 0; padding: 0 var(--spacing-6) var(--spacing-3); margin: 0; color: var(--color-foreground-subtle); font-size: var(--text-sm); line-height: var(--font-line-height-loose); } .modal-sm { width: 360px; } .modal-md { width: 500px; } .modal-lg { width: 680px; } .modal-stripe { flex-shrink: 0; height: var(--modal-stripe-height); background: linear-gradient(90deg, var(--color-accent-500), transparent); } .modal-header { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-2); padding: var(--spacing-4) var(--spacing-6); border-bottom: 1px solid var(--color-border-subtle); } .modal-title { font-size: var(--text-lg); font-weight: var(--font-weight-extrabold); color: var(--color-foreground); letter-spacing: var(--font-letter-spacing-tight); margin: 0; } /* When DialogDescription is nested inside DialogHeader (the React Dialog composition pattern), force it to a new line below the title via flex-basis: 100%, and strip its standalone padding since the header already provides horizontal padding. Mirrors the .card-header pattern documented in specs/components/card.md. */ .modal-header .modal-description { flex-basis: 100%; padding: 0; margin: 0; } .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* Stop a touch scroll that reaches the end of the body from chaining to the page behind the modal (#115). */ overscroll-behavior: contain; padding: var(--spacing-6); } .modal-footer { display: flex; flex-shrink: 0; justify-content: flex-end; gap: var(--spacing-3); padding: var(--spacing-4) var(--spacing-6); border-top: 1px solid var(--color-border-subtle); } /* ===== FOCUS MODE ===== Regional immersive view — fills its parent container (NOT viewport). Not a dialog: surrounding app stays visible & interactive. See specs/components/focus-mode.md for the full rationale (ARIA APG). */ .focus-mode-host { position: relative; } .focus-mode { position: absolute; inset: 0; z-index: var(--z-focus-mode); display: flex; flex-direction: column; background: var(--color-bg-base); view-transition-name: focus-mode; } .focus-mode-header, .focus-mode-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-3) var(--spacing-6); } .focus-mode-header { border-bottom: 1px solid var(--color-border-subtle); } .focus-mode-footer { border-top: 1px solid var(--color-border-subtle); } .focus-mode-title { font-size: var(--text-base); font-weight: var(--font-weight-semibold); color: var(--color-foreground); margin: 0; } .focus-mode-body { flex: 1; min-height: 0; padding: var(--spacing-4) var(--spacing-6); overflow-y: auto; } .focus-mode-footer-left, .focus-mode-footer-right { display: flex; align-items: center; gap: var(--spacing-2); } .focus-mode-exit { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); border-radius: var(--radius-md); font-size: var(--text-base); font-weight: var(--font-weight-medium); color: var(--color-foreground-muted); background: transparent; border: 0; cursor: pointer; transition: color var(--duration-fast), background var(--duration-fast); } .focus-mode-exit:hover { color: var(--color-foreground-secondary); background: var(--color-accent-a08); } .focus-mode-exit:focus-visible { outline: 0; box-shadow: var(--shadow-accent-focus); } /* Tinted dividers — mirror .card[data-tint] convention, same 15% mix. */ .focus-mode-host[data-tint] .focus-mode-header, .focus-mode[data-tint] .focus-mode-header { border-bottom-color: color-mix(in srgb, var(--color-tint-500) 15%, transparent); } .focus-mode-host[data-tint] .focus-mode-footer, .focus-mode[data-tint] .focus-mode-footer { border-top-color: color-mix(in srgb, var(--color-tint-500) 15%, transparent); } /* ===== TOOLTIP ===== */ .tooltip { background: var(--tooltip-bg); border: 1px solid var(--tooltip-border); border-top: var(--tooltip-stripe-height) solid var(--color-accent-400); border-radius: var(--tooltip-radius); padding: 0.5rem 0.875rem; font-size: var(--tooltip-font-size); color: var(--color-foreground-secondary); box-shadow: var(--shadow-md); white-space: nowrap; z-index: var(--z-floating); } /* ===== DROPDOWN ===== */ .dropdown { background: var(--dropdown-bg); border: 1px solid var(--dropdown-border); border-radius: var(--dropdown-radius); padding: 6px; box-shadow: var(--shadow-md); overflow: hidden; z-index: var(--z-floating); } /* Leading-icon row is the default: the documented markup is a flat ` Edit`, so the icon must sit next to its label (the gap supplies the spacing). This used to be `space-between`, which is only correct when the item has a *second* child to push to the far edge — it pinned the icon left and the label right for every item the spec actually documents (#97). Trailing affordances (a ⌘E shortcut, a selected-state checkmark) opt in via .dropdown-item-trailing below. */ .dropdown-item { display: flex; align-items: center; justify-content: flex-start; gap: var(--spacing-3); width: 100%; padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x); border-radius: var(--dropdown-item-radius); font-size: var(--text-sm); color: var(--color-foreground-secondary); background: none; border: none; cursor: pointer; transition: background var(--duration-fast); text-align: left; } .dropdown-item:hover, .dropdown-item-active { background: var(--color-accent-a08); } .dropdown-item-active { color: var(--color-foreground); } .dropdown-item-danger { color: var(--color-crimson-300); } .dropdown-item-danger:hover { background: color-mix(in srgb, var(--color-error) 8%, transparent); } .dropdown-item svg { width: 16px; height: 16px; flex-shrink: 0; } /* Trailing affordance — a keyboard shortcut (.kbd) or a selected-state checkmark, pushed to the item's far edge. Positioning lives here, in the parent context, rather than on .kbd itself — the same doctrine `.search-pill .kbd` follows, so .kbd stays reusable wherever it appears. */ .dropdown-item-trailing { margin-left: auto; } /* Group label — a section heading inside the menu (#101). DropdownMenu.Label used to hand-roll this in Tailwind utilities (px-2 py-1 text-xs uppercase opacity-60), which bypassed the token system AND — worse — meant no .dropdown-label class shipped at all, leaving vanilla (PHP/Python) consumers no supported way to render a group label. Now a real class: uppercase micro-label, muted via a foreground token (not raw opacity), its horizontal padding matched to the item's so the label aligns with the rows below it. */ .dropdown-label { padding: var(--spacing-1) var(--dropdown-item-padding-x); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-foreground-subtle); } .dropdown-divider { height: 1px; background: var(--color-border-subtle); margin: 6px var(--spacing-3); } /* ===== POPOVER ===== Trigger-anchored floating panel for arbitrary interactive content (forms, search + checkbox lists) — the interactive sibling of .dropdown (menu items) and .tooltip (non-interactive). Reuses the --dropdown-* family but --shadow-lg so it reads as sitting above menus. */ .popover { background: var(--dropdown-bg); border: 1px solid var(--dropdown-border); border-radius: var(--dropdown-radius); padding: var(--spacing-3); box-shadow: var(--shadow-lg); z-index: var(--z-floating); } /* ===== SCROLL AREA ===== Bounded scroll region with a Diannara-styled scrollbar. The browser does the scrolling; only the bar's appearance is ours — themed via ::-webkit-scrollbar (Chromium, Safari) and scrollbar-width / scrollbar-color (Firefox). Same approach as .side-panel-body and .list-sidebar-list, at the larger 10px track ScrollArea wants because here the bar is meant to be seen and grabbed. Because scrolling is native, .scroll-area needs no JS and works in every consumption stack — including plain HTML, where the previous Radix-backed version could not scroll at all. `max-height` also works, which it did not before (see #146). Sizing: give the root a definite height, a max-height, or `flex: 1` inside a bounded flex column. Any of the three bounds the box, which is all a scroll context needs. */ .scroll-area { overflow: auto; overscroll-behavior: contain; /* Firefox */ scrollbar-width: thin; scrollbar-color: transparent transparent; } .scroll-area[data-orientation="vertical"] { overflow-x: hidden; overflow-y: auto; } .scroll-area[data-orientation="horizontal"] { overflow-x: auto; overflow-y: hidden; } .scroll-area[data-orientation="both"] { overflow: auto; } .scroll-area::-webkit-scrollbar { width: 10px; height: 10px; } .scroll-area::-webkit-scrollbar-track, .scroll-area::-webkit-scrollbar-corner { background: transparent; } /* The transparent border inset by background-clip keeps the visible thumb slim inside the wider track, so the grab target stays a comfortable 10px while the bar reads as 6px. */ .scroll-area::-webkit-scrollbar-thumb { background: transparent; border: 2px solid transparent; background-clip: content-box; border-radius: var(--radius-full); transition: background var(--duration-fast); } /* Default is quiet — the bar appears on pointer intent, and on focus so keyboard scrolling isn't silent. */ .scroll-area:hover, .scroll-area:focus-within { scrollbar-color: var(--color-neutral-800) transparent; } .scroll-area:hover::-webkit-scrollbar-thumb, .scroll-area:focus-within::-webkit-scrollbar-thumb { background: var(--color-neutral-800); background-clip: content-box; } .scroll-area::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-900); background-clip: content-box; } /* Always visible — for modal-internal regions and long config panels where the user needs to know there's more. */ .scroll-area[data-reveal="always"] { scrollbar-color: var(--color-neutral-800) transparent; } .scroll-area[data-reveal="always"]::-webkit-scrollbar-thumb { background: var(--color-neutral-800); background-clip: content-box; } .scroll-area[data-reveal="always"]::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-900); background-clip: content-box; } /* ===== AVATAR ===== */ /* Fill and ink both route through custom properties (#173). They used to be asymmetric: `background` was reachable from an inline style, `color` was hard-wired to --color-on-accent. That asymmetry is not a small thing — it invites a consumer to recolour the circle and then gives them no way to recolour what sits on it, so the white ink follows a fill it was never chosen for. Dojo Tracker shipped a neutral surface gradient under white initials that measured 1.00:1 in light theme, on 21 of 51 records. These two properties are the MECHANISM, not the consumer-facing answer. Reaching --avatar-fg only makes a correct override possible; it still lets one get set without the other, which lands in the same place (verified in Chrome: --avatar-bg alone, light theme, 1.00:1 — the original bug through the new door). So the two classes below own the pairing instead: .avatar-neutral for "no data yet", .avatar-color for a fill that IS data. */ .avatar { border-radius: var(--avatar-radius); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); color: var(--avatar-fg, var(--color-on-accent)); flex-shrink: 0; position: relative; /* anchor for AvatarBadge */ overflow: visible; /* let badges escape the circle */ background: var(--avatar-bg, linear-gradient(135deg, var(--color-accent-500), var(--color-accent-300))); vertical-align: middle; /* Size flows through --avatar-size rather than each size class setting width directly, so a group can size its whole stack at once (.avatar-group-sm) while an individual child that declares its own size still wins — a custom property set ON an element always beats one inherited from its parent, so this needs no specificity juggling and no !important. Falls back to md, matching the React component's defaultVariants, so a bare

in hand-written HTML renders the size React gives you instead of collapsing to zero. */ width: var(--avatar-size, var(--avatar-size-md)); height: var(--avatar-size, var(--avatar-size-md)); font-size: var(--avatar-font-size, 15px); } /* Square avatar (#96). Avatar is the only component in the system that is not a rounded rectangle — everything else is 8px or 12px. A tenant's brand mark is a rounded square, so it gets one. The circle stays the default, and stays right for PEOPLE, which is what circles are for. .avatar-image / .avatar-fallback use border-radius: inherit, so the image and the initials both clip to these corners automatically. */ .avatar-square { border-radius: var(--avatar-radius-square); } /* Neutral tone (#173) — the "no data yet" avatar: no photo, no tenant colour, no rank to derive one from. Both halves come off the theme ramp, so it flips with light/dark instead of pinning ink that only works over accent. Measured 15.43:1 dark, 17.17:1 light. Deliberately the same surface as .avatar-group-count: the "+3" overflow bubble and a rankless person are the same neutral circle, and only the emphasis of what sits on them differs. A consumer reaching for a hand-rolled neutral gradient wants this instead — that hand-rolled version is what shipped the contrast defect. */ .avatar-neutral { --avatar-bg: var(--color-neutral-300); --avatar-fg: var(--color-foreground); } /* Arbitrary user-colour avatar (#173) — a tenant's brand colour, a belt rank, a team colour. DATA from a database, not a tone from the closed vocabulary, which is the same distinction .chip-color draws (#111, #112) — and Dojo Tracker's belt colour is literally the case that produced it, so this is Avatar catching up to a pattern the system already has rather than a new idea. The fill is --avatar-color; the ink is DERIVED from that fill's own OKLCH lightness with the same step function .chip-color uses: lightness below the ~0.62 threshold → white text, above → black, the ×1000 making it a hard switch and chroma/hue 0 making it a pure grey. No app-side luminance math, and plain-HTML consumers get it too (style="--avatar-color: #7c3aed"). Deriving it is the point. A consumer cannot get the contrast wrong by omission, which is the failure mode #173 actually reported — the app HAD picked a fill and simply had no way to say what should sit on it. Limitation, shared with .chip-color and measured rather than assumed: a black-or-white step is weakest at its own flip point. Worst case over the grey ramp is #858585 at 3.69:1, where black would have scored 5.69:1 — the 0.62 threshold flips slightly late. Retuning it moves three components at once and belongs in its own ticket; matching the shipped formula is the right call here, because two thresholds would render the same hex differently on a chip and on the avatar next to it. An explicit --avatar-fg set on the element still wins over this (inline beats a class-level declaration), so the escape hatch survives for a fill whose derived ink is right but not wanted. */ .avatar-color { --avatar-bg: var(--avatar-color, var(--color-neutral-500)); --avatar-fg: oklch(from var(--avatar-color, var(--color-neutral-500)) clamp(0, (0.62 - l) * 1000, 1) 0 0); /* Hairline ring so the fill has an EDGE against the surface. Without it a white or near-white `color` on a light surface loses its shape entirely and the initials float unattached — the derived ink is behaving correctly in exactly that case (white fill, dark ink), so the step function cannot help. This is a different axis from the known mid-grey ink issue (#178). Drawn unconditionally whenever `color` is in use, not only for fills close to the surface luminance. Conditional would mean an avatar's silhouette appearing and disappearing according to user data — belt colour, tenant brand — which is the inconsistency pillar 2 exists to prevent. Against a dark fill the hairline is simply not perceptible, so it costs nothing. inset box-shadow, not a border: the avatar's width/height are the token size, and a border would either shrink the content box or push the whole circle 2px wider. Layout is untouched here. */ box-shadow: inset 0 0 0 1px var(--color-border-default); } .avatar-xs { --avatar-size: var(--avatar-size-xs); --avatar-font-size: 10px; } .avatar-sm { --avatar-size: var(--avatar-size-sm); --avatar-font-size: 12px; } .avatar-md { --avatar-size: var(--avatar-size-md); --avatar-font-size: 15px; } .avatar-lg { --avatar-size: var(--avatar-size-lg); --avatar-font-size: 20px; } .avatar-xl { --avatar-size: var(--avatar-size-xl); --avatar-font-size: 26px; } /* Inner image + fallback (Radix Avatar sub-elements). The image and fallback both fill the avatar circle and clip to its radius. Radix mounts only one at a time — image when loaded, fallback otherwise. */ .avatar-image, .avatar-fallback { width: 100%; height: 100%; border-radius: inherit; display: flex; align-items: center; justify-content: center; } .avatar-image { object-fit: cover; } .avatar-fallback { text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; } /* Avatar group — overlapping stack with optional "+N" overflow count. Each child gets a ring matching the page surface so circles read as separate even when they overlap. Z-index descends left-to-right so the leftmost circle is on top, which reads as "first speaker / first member" in story scene displays. */ .avatar-group { display: inline-flex; align-items: center; } .avatar-group > * + * { margin-left: calc(-1 * var(--spacing-2)); } .avatar-group > * { box-shadow: 0 0 0 2px var(--color-bg-base); } .avatar-group > :nth-child(1) { z-index: 8; } .avatar-group > :nth-child(2) { z-index: 7; } .avatar-group > :nth-child(3) { z-index: 6; } .avatar-group > :nth-child(4) { z-index: 5; } .avatar-group > :nth-child(5) { z-index: 4; } .avatar-group > :nth-child(6) { z-index: 3; } .avatar-group > :nth-child(7) { z-index: 2; } .avatar-group > :nth-child(8) { z-index: 1; } /* Size the whole stack from the container. These classes shipped as no-ops — avatar.md called them "only meaningful as a typed hint" — which meant silently did nothing and every child had to repeat the size itself. Setting --avatar-size here inherits down to each .avatar (including .avatar-group-count, which composes .avatar), while any child that declares its own size class still overrides it. */ .avatar-group-xs { --avatar-size: var(--avatar-size-xs); --avatar-font-size: 10px; } .avatar-group-sm { --avatar-size: var(--avatar-size-sm); --avatar-font-size: 12px; } .avatar-group-md { --avatar-size: var(--avatar-size-md); --avatar-font-size: 15px; } .avatar-group-lg { --avatar-size: var(--avatar-size-lg); --avatar-font-size: 20px; } .avatar-group-xl { --avatar-size: var(--avatar-size-xl); --avatar-font-size: 26px; } /* Overflow count bubble — neutral background, muted text, same circle as a regular avatar so the stack reads as one continuous row. */ .avatar-group-count { --avatar-bg: var(--color-neutral-300); --avatar-fg: var(--color-foreground-muted); font-weight: var(--font-weight-semibold); } /* Status / notification pip — anchored bottom-right of the parent avatar, scales with parent size, ringed against the page surface for a "cutout" look. Hidden on xs (too small to render legibly). */ .avatar-badge { position: absolute; bottom: 0; right: 0; box-sizing: content-box; border-radius: var(--radius-full); background: var(--color-accent-500); color: var(--color-on-accent); font-size: 9px; font-weight: var(--font-weight-bold); line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--color-bg-base); min-width: 10px; min-height: 10px; padding: 0 3px; } /* Size-matched dot dimensions when used as a status indicator (empty body) */ .avatar-xs .avatar-badge { display: none; } .avatar-sm .avatar-badge { min-width: 8px; min-height: 8px; font-size: 8px; } .avatar-md .avatar-badge { min-width: 10px; min-height: 10px; font-size: 9px; } .avatar-lg .avatar-badge { min-width: 12px; min-height: 12px; font-size: 10px; } .avatar-xl .avatar-badge { min-width: 14px; min-height: 14px; font-size: 11px; } /* Status presets */ .avatar-badge-online { background: var(--color-success); } .avatar-badge-away { background: var(--color-warning); } .avatar-badge-busy { background: var(--color-error); } .avatar-badge-offline { background: var(--color-foreground-ghost); } /* ===== CHIP ===== */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: var(--chip-padding-y) var(--chip-padding-x); border-radius: var(--chip-radius); font-size: var(--chip-font-size); font-weight: var(--font-weight-medium); } .chip-accent { background: var(--color-accent-a15); color: var(--color-accent-300); } .chip-neutral { background: var(--color-neutral-350); color: var(--color-foreground-muted); } /* Arbitrary user-colour chip (#112) — a belt/group hex from the DB, not a tone. The fill is `--chip-color`; the FOREGROUND is derived from the fill's own OKLCH lightness with relative-colour syntax, so black text lands on pale fills and white on dark ones with zero app-side luminance math — and plain-HTML/PHP consumers get it too (`style="--chip-color:#f97316"`). The step function: lightness L below the ~0.62 threshold → white text (fg L=1), above → black (fg L=0); the ×1000 makes it a hard switch, chroma/hue 0 make it a pure grey. */ .chip-color { background: var(--chip-color, var(--color-neutral-500)); color: oklch(from var(--chip-color, var(--color-neutral-500)) clamp(0, (0.62 - l) * 1000, 1) 0 0); /* Same edge-against-the-surface fix as .avatar-color (#178). This path shares the ink derivation with Avatar and shared its blind spot: a white or near-white user colour on a light surface left the pill with no boundary. inset, not a border — .chip declares none, so a real border would add 2px to every coloured chip and break alignment in a row of mixed chips. */ box-shadow: inset 0 0 0 1px var(--color-border-default); } /* Tint: a low-alpha fill with the full colour as border + text — for lighter-weight uses (a filter toggle) where a solid pill would be too loud. */ .chip-color-tint { background: color-mix(in srgb, var(--chip-color, var(--color-neutral-500)) 12%, transparent); border: 1px solid var(--chip-color, var(--color-neutral-500)); color: var(--chip-color, var(--color-neutral-500)); } .chip-close { width: var(--chip-close-size); height: var(--chip-close-size); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; background: none; color: inherit; } .chip-close:hover { background: var(--color-accent-a25); } .chip-close svg { width: 12px; height: 12px; } /* Chip Input (Tag Editor) — bordered container that holds chips alongside a plain inline text input. Floating label sits at top-left when present. Per specs/components/chips.md. Powers . */ .chip-input-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; background: var(--color-bg-elevated-1); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--spacing-2) var(--spacing-3); min-height: 48px; cursor: text; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); } .chip-input-wrap:focus-within { border-color: var(--color-accent-400); box-shadow: var(--shadow-accent-focus); } .chip-input-label { flex-basis: 100%; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); color: var(--color-accent-300); letter-spacing: 0.3px; margin-bottom: 2px; } .chip-inline-input { border: none; background: transparent; outline: none; font-size: var(--text-sm); color: var(--color-foreground); min-width: 80px; flex: 1 1 auto; padding: 0; } .chip-inline-input::placeholder { color: var(--color-foreground-ghost); } /* ===== INPUT ===== */ .input { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--input-radius); padding: var(--spacing-3) var(--spacing-4); font-size: var(--input-font-size); color: var(--color-foreground); outline: none; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); } .input:focus { border-color: var(--color-accent-400); box-shadow: 0 0 0 3px var(--color-accent-a15); } .input::placeholder { color: var(--color-foreground-disabled); } /* Floating label variant — use with the .input-float wrapper. Markup order is INPUT then LABEL (the label is a following sibling), and the input MUST carry placeholder=" " (a single space): the raised state keys off :not(:placeholder-shown), which is only false when the field has a value OR a non-empty placeholder. A real placeholder would sit under the resting label and defeat it, so the space is the whole trick — React's supplies it. Two states, not one. The old rule shipped ONLY the raised position (label pinned up forever), so the label was a static caption and never floated (#123). */ .input-float { position: relative; } /* Room at the top for the raised label to land without overlapping the value. */ .input-float .input { padding-top: var(--spacing-6); padding-bottom: var(--spacing-2); } /* Resting: the label sits over the value like a placeholder — same size as the input text, vertically centred, muted. */ .input-float label { position: absolute; left: calc(var(--spacing-4) + 1px); /* input border (1px) + padding-left, so it aligns with the value */ top: 50%; transform: translateY(-50%); font-size: var(--input-label-size-rest); font-weight: var(--font-weight-medium); color: var(--color-foreground-disabled); pointer-events: none; /* Specific props, not `all` — `all` would also transition layout and colour in ways that stutter, and the old rule transitioned to nothing anyway. */ transition: top var(--duration-fast), transform var(--duration-fast), font-size var(--duration-fast), color var(--duration-fast); } /* A textarea is multi-line, so its resting label belongs at the FIRST line, not the vertical centre a single-line input uses — centred, it would float in the middle of a tall box. :has() tests the control on the wrapper because the label is a following sibling and can't look back at the control directly. Raised position is shared. */ .input-float:has(textarea.input) label { top: var(--spacing-6); transform: none; } /* Raised: on focus, or whenever the field has a value. */ .input-float .input:focus + label, .input-float .input:not(:placeholder-shown) + label { top: var(--spacing-2); transform: translateY(0); font-size: var(--input-label-size-float); } /* Focus tints the raised label accent; a filled-but-blurred field leaves it muted. */ .input-float .input:focus + label { color: var(--color-accent-400); } /* Error mirrors the input's own invalid styling onto the label (spec: label turns crimson). Keyed off aria-invalid so the affordance and the a11y state agree. */ .input-float .input[aria-invalid="true"] + label { color: var(--color-error); } /* ===== FIELD ===== The wrapper React's renders: label, control, and a message region carrying a hint, an error, or both. Lives here rather than as Tailwind utilities on the component so the plain-HTML stack gets the same field, and so the spacing comes off the scale instead of an arbitrary step. */ .field { display: flex; flex-direction: column; gap: var(--spacing-2); } .field-label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-foreground); } /* Two columns: a reserved icon track and a text column. The track is an EXPLICIT width, not `auto` — an auto track collapses to zero when the row has no icon, which would land a lone hint 8px from the edge instead of 24px and quietly break the alignment this grid exists to create. */ .field-messages { display: grid; grid-template-columns: var(--field-message-icon-size) 1fr; column-gap: var(--spacing-2); row-gap: var(--spacing-1); align-items: start; } /* Both marks: sized by the container per specs/icons.md, coloured by the row they sit in via currentColor. Never sized or coloured at the call site. */ .field-message-icon { grid-column: 1; width: var(--field-message-icon-size); height: calc(var(--text-xs) * var(--font-line-height-snug)); display: flex; align-items: center; flex-shrink: 0; } .field-message-icon svg { width: var(--field-message-icon-size); height: var(--field-message-icon-size); } .field-error { grid-column: 2; font-size: var(--text-xs); line-height: var(--font-line-height-snug); font-weight: var(--font-weight-medium); color: var(--color-error-text); } .field-hint { grid-column: 2; font-size: var(--text-xs); line-height: var(--font-line-height-snug); color: var(--color-foreground-muted); } /* Paired with an error, the hint recedes — dimmer, same size. It never shrinks: --text-xs is the 14px floor and subordination is carried by colour, by the mark it does NOT have, and by sitting second. */ .field-hint-paired { color: var(--color-foreground-subtle); } /* The control's own invalid affordance, so the field reads as wrong before the message is read. Keyed off aria-invalid so state and appearance can't diverge. */ .field .input[aria-invalid="true"], .input-float .input[aria-invalid="true"] { border-color: var(--color-error); } /* The float wrapper is position:relative, not a flex column — it can't own the gap the way .field does, so the message region spaces itself there. */ .input-float > .field-messages { margin-top: var(--spacing-2); } /* ===== APP SHELL ===== The frame that holds a rail beside the page it navigates. Sidebar always shipped as a complete rail and nothing in the system ever placed it, so every consumer hand-wrote this same row — and specs/components/navigation.md claimed the rail "composes as a full app shell with no hand-applied CSS classes", which was not true (#184). Position only, matching the doctrine .sidebar-footer already follows: it owns arrangement, never the look of what sits inside it. No padding here — page inset is genuinely the consumer's call per specs/responsive.md, and baking one in would make every app fight it. */ .app-shell { display: flex; /* row and nowrap are the flex defaults and are still written out, because they ARE the contract rather than incidental styling — and because a guard can only assert a property that is present. Checking merely for the absence of `flex-wrap: wrap` let `flex-direction: column` through, which puts the page BELOW the rail: the same bug from the other axis. nowrap is also why Cluster cannot be used here. It wraps by design — correct for a row of controls, fatal for a shell, since below ~1024px the content column drops below the rail. The rail's own narrow-width behaviour is a drawer, a different mechanism entirely. */ flex-direction: row; flex-wrap: nowrap; min-height: 100dvh; } /* The rail keeps its width. Flex items shrink by default, so without this a wide main squeezes the rail narrower than --sidebar-width instead of scrolling itself. */ .app-shell > .sidebar { flex-shrink: 0; } .app-main { flex: 1; /* The trap this component exists to own. A flex item's default min-width is auto, meaning it refuses to shrink below its content's intrinsic width — so ONE wide table anywhere on the page pushes the entire shell sideways and the whole layout scrolls horizontally, rail included. With min-width: 0 the column shrinks and the table scrolls inside its own box, which is what everybody actually wants and almost nobody writes. */ min-width: 0; } /* ===== SIDEBAR ===== */ .sidebar { width: var(--sidebar-width); background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); overflow-y: auto; padding: var(--spacing-3); /* Column layout is what lets .sidebar-footer pin to the bottom via margin-top:auto. The collapsed, icon-only, and (desktop) drawer states were already flex columns — the default rail was the odd one out. */ display: flex; flex-direction: column; } .sidebar-app-header { display: flex; align-items: center; gap: var(--sidebar-app-header-gap); padding-bottom: var(--sidebar-app-header-padding-bottom); margin-bottom: var(--sidebar-app-header-margin-bottom); border-bottom: 1px solid var(--color-border-subtle); } .sidebar-app-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--sidebar-app-mark-size); height: var(--sidebar-app-mark-size); border-radius: var(--radius-md); color: var(--color-accent-400); background: transparent; border: 0; padding: 0; cursor: inherit; } .sidebar-app-mark svg { width: 100%; height: 100%; } .sidebar-app-name, .sidebar-app-name-plain { font-family: var(--font-family-display); font-size: var(--text-xl); font-weight: var(--font-weight-extrabold); letter-spacing: var(--font-letter-spacing-tight); line-height: 1; } .sidebar-app-name { background: linear-gradient(135deg, var(--color-accent-300), var(--color-accent-600)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .sidebar-app-name-plain { color: var(--color-foreground); } .sidebar-collapsed .sidebar-app-name, .sidebar-collapsed .sidebar-app-name-plain, .sidebar-icon-only .sidebar-app-name, .sidebar-icon-only .sidebar-app-name-plain { display: none; } /* ===== SIDEBAR IDENTITY (#96) ===== The TENANT's identity — avatar, name, account type — in a card at the top of the rail. Distinct from .sidebar-app-header / -mark / -name (#93), which is the APP's fixed wordmark: this one is data, and it differs per user and per business. Both may exist; an app picks whichever its design calls for. */ .sidebar-identity { display: flex; align-items: center; gap: var(--sidebar-identity-gap); padding: var(--sidebar-identity-padding-y) var(--sidebar-identity-padding-x); margin-bottom: var(--sidebar-identity-margin-bottom); background: var(--sidebar-identity-bg); border: 1px solid var(--sidebar-identity-border); border-radius: var(--sidebar-identity-radius); /* Rendered as a link/button via asChild, it must not look like one. */ color: inherit; text-decoration: none; width: 100%; text-align: left; } /* min-width: 0 is THE rule that makes the name ellipse. A flex item defaults to min-width: auto — it refuses to shrink below its content — so without this the name pushes the card wider instead of truncating, and text-overflow never fires no matter how it is declared below. */ .sidebar-identity-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .sidebar-identity-name { font-size: var(--sidebar-identity-name-font-size); font-weight: var(--font-weight-semibold); color: var(--color-foreground); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-identity-meta { font-size: var(--sidebar-identity-meta-font-size); color: var(--color-foreground-subtle); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Collapsed / icon-only: the avatar survives, the text does not — the same treatment .sidebar-app-name already gets. The card sheds its chrome so a lone avatar doesn't sit in a box inside a 64px rail. */ .sidebar-collapsed .sidebar-identity-text, .sidebar-icon-only .sidebar-identity-text { display: none; } .sidebar-collapsed .sidebar-identity, .sidebar-icon-only .sidebar-identity { justify-content: center; padding: 0; background: none; border: 0; } /* Bottom-pinned region — the mirror of .sidebar-app-header. margin-top:auto consumes the rail's free space, so the footer sits on the bottom edge when the nav is short and follows the content when it overflows. Its border-top doubles as the divider, so no top margin is needed. POSITION ONLY. It pins, divides, and refuses to shrink; it has no opinion about how its children arrange. It used to: `flex-direction: row` (the flex default) plus align-items:center and a gap, authored for the avatar + name + role strip named in navigation.md's "User area (bottom)". That was one composition's layout written into the container, and it made every other composition impossible — a rail with two bottom-pinned ACTIONS and no avatar (Settings + Log out) got them side by side, splitting a 231px content box, and "Log out" wrapped to a second line at 58px against the 37px of every other row in the rail (#171, measured in bka-study-guide at 256px). The row direction was also redundant. .sidebar-identity — the class that actually holds that strip, and what the guide has always composed in here — is its own flex row with its own align-items, gap and width:100%. It never needed the footer's direction; it brings its own. So: column, matching the rail above it. A footer holding one .sidebar-identity renders identically (a single full-width child has no row to sit in), and a footer holding nav rows now stacks them flush like the nav rows above, which is what they are. No gap, for the same reason .sidebar itself sets none — footer rows and nav rows are the same kind of thing and must not read as two detached buttons. That retired --sidebar-footer-gap; see MIGRATION.md. Anything other than a stack composes a layout primitive inside it: .cluster for a row of icons or actions, .stack[data-gap] for deliberate vertical spacing. The footer does not need to know, which is the point. */ .sidebar-footer { display: flex; flex-direction: column; align-items: stretch; margin-top: auto; padding-top: var(--sidebar-footer-padding-top); border-top: 1px solid var(--color-border-subtle); /* Never let a long nav squeeze the footer's own height away. */ flex-shrink: 0; } /* Collapsed rails have no horizontal padding and centre their children, so the footer spans the full width and centres its content — matching how .sidebar-app-name disappears and the mark stays. Centring is align-items now, not justify-content: in a column those axes swap, and justify-content would centre the children vertically in a box that is exactly their height — a no-op that silently left narrow rails uncentred. */ .sidebar-collapsed .sidebar-footer, .sidebar-icon-only .sidebar-footer { width: 100%; align-items: center; } .sidebar-item { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--sidebar-item-padding-y) var(--sidebar-item-padding-x); border-radius: var(--sidebar-item-radius); font-size: var(--sidebar-item-font-size); font-weight: var(--font-weight-medium); color: var(--color-foreground-subtle); text-decoration: none; cursor: pointer; position: relative; transition: color var(--duration-fast), background var(--duration-fast); /* Neutralise the

–