@godxjp/ui 18.15.3 → 19.0.0

package/dist/styles/layout.css

@@ -4,19 +4,94 @@
  */
 
 @layer components {
+  /* SEPARATOR — a tokenized rule, optionally INTERRUPTED by a label (gh#308).
+   *
+   * Two shapes share one class. WITHOUT a label the element IS the rule, exactly as before: the
+   * `:not([data-labelled])` guard keeps the plain form byte-identical (the `1px` and the `--border`
+   * are now `--separator-rule-{size,color}`, whose defaults are those same values). WITH a label
+   * the root becomes the three-cell grid `rule · label · rule` — `minmax(0, 1fr)` on both halves so
+   * a long ja/vi label clamps the rules instead of overflowing the container, and `auto` on the
+   * label so it is never squeezed to zero. `labelAlign` only re-measures the SHORT half, and it is
+   * a grid TRACK on the inline axis, so start/end swap under `dir="rtl"` with no extra rule.
+   *
+   * `tone` re-points the two colour knobs on the root rather than restating `background`/`color`
+   * per tone, so one declaration paints both shapes and a service override still wins. */
   .ui-separator {
     flex-shrink: 0;
-    background: hsl(var(--border));
   }
 
-  .ui-separator[data-orientation="horizontal"] {
+  .ui-separator:not([data-labelled])[data-orientation="horizontal"] {
     width: 100%;
-    height: 1px;
+    height: var(--separator-rule-size);
+    background: hsl(var(--separator-rule-color, var(--border)));
   }
 
-  .ui-separator[data-orientation="vertical"] {
-    width: 1px;
+  .ui-separator:not([data-labelled])[data-orientation="vertical"] {
+    width: var(--separator-rule-size);
     height: 100%;
+    background: hsl(var(--separator-rule-color, var(--border)));
+  }
+
+  .ui-separator[data-labelled] {
+    display: grid;
+    width: 100%;
+    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+    align-items: center;
+    gap: var(--separator-label-gap, var(--space-3));
+  }
+
+  .ui-separator[data-labelled][data-label-align="start"] {
+    grid-template-columns: var(--separator-label-inset, var(--space-6)) auto minmax(0, 1fr);
+  }
+
+  .ui-separator[data-labelled][data-label-align="end"] {
+    grid-template-columns: minmax(0, 1fr) auto var(--separator-label-inset, var(--space-6));
+  }
+
+  .ui-separator-rule {
+    block-size: var(--separator-rule-size);
+    background: hsl(var(--separator-rule-color, var(--border)));
+  }
+
+  .ui-separator-label {
+    min-inline-size: 0;
+    color: hsl(var(--separator-label-color, var(--muted-foreground)));
+    font-size: var(--separator-label-font-size);
+    font-weight: var(--separator-label-font-weight);
+    line-height: var(--separator-label-line-height);
+    /* A single unbroken token (a URL, a long ja compound) must still wrap rather than push the
+     * grid past its container. */
+    overflow-wrap: anywhere;
+  }
+
+  .ui-separator[data-tone="muted"] {
+    --separator-rule-color: var(--separator-tone-muted-rule-color, var(--border));
+    --separator-label-color: var(--separator-tone-muted-label-color, var(--muted-foreground));
+  }
+
+  .ui-separator[data-tone="primary"] {
+    --separator-rule-color: var(--separator-tone-primary-rule-color, var(--primary));
+    --separator-label-color: var(--separator-tone-primary-label-color, var(--primary));
+  }
+
+  .ui-separator[data-tone="success"] {
+    --separator-rule-color: var(--separator-tone-success-rule-color, var(--success));
+    --separator-label-color: var(--separator-tone-success-label-color, var(--success));
+  }
+
+  .ui-separator[data-tone="warning"] {
+    --separator-rule-color: var(--separator-tone-warning-rule-color, var(--warning));
+    --separator-label-color: var(--separator-tone-warning-label-color, var(--warning));
+  }
+
+  .ui-separator[data-tone="destructive"] {
+    --separator-rule-color: var(--separator-tone-destructive-rule-color, var(--destructive));
+    --separator-label-color: var(--separator-tone-destructive-label-color, var(--destructive));
+  }
+
+  .ui-separator[data-tone="info"] {
+    --separator-rule-color: var(--separator-tone-info-rule-color, var(--info));
+    --separator-label-color: var(--separator-tone-info-label-color, var(--info));
   }
 
   .ui-aspect-ratio {
@@ -291,6 +366,53 @@
     max-block-size: var(--master-detail-master-viewport-standard);
   }
 
+  /* ── ServiceRolePanel (gh#319) ─────────────────────────────────────────────────
+   * MasterDetail above owns every bit of the two-track geometry; what follows is only the role
+   * LIST that sits in the master rail. `.ui-service-role-panel` was a bare hook (class emitted,
+   * no rule anywhere), so all of this used to be Tailwind literals on the component. */
+  .ui-service-role-panel-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--service-role-panel-list-gap);
+    list-style: none;
+  }
+
+  /* One role: the select button plus the optional delete button, as SIBLINGS (never nested
+   * interactive controls). Deliberately NOT `.ui-inline-xs` — that helper wraps, and the icon
+   * button must stay on the row beside the flex-1 select button at every width. */
+  .ui-service-role-panel-row {
+    display: flex;
+    align-items: center;
+    gap: var(--service-role-panel-row-gap);
+  }
+
+  /* ORDERING TRAP (gh#319): this needs the `.ui-service-role-panel` ancestor. The role button is
+   * a real `<Button>`, and `.ui-button--md { padding-block: var(--button-space-block) }` lives in
+   * control.css, which styles/index.css imports AFTER layout.css — same `@layer components`, so
+   * at equal (0,1,0) specificity control.css would win and the row would snap back to the single
+   * control height. (0,2,0) settles it. `h-auto` and `flex-1` stay UTILITIES on the component for
+   * the same reason inverted: they must beat the same rule from a layer that always outranks it. */
+  .ui-service-role-panel .ui-service-role-panel-item {
+    padding-block: var(--service-role-panel-item-padding-block);
+  }
+
+  /* The button's label column. `min-inline-size: 0` is what lets the name and the meta line
+   * truncate instead of forcing the rail wider (the flexbox min-content default). */
+  .ui-service-role-panel-item-body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    min-inline-size: 0;
+    line-height: var(--line-height-tight);
+  }
+
+  .ui-service-role-panel-item-title {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--service-role-panel-item-title-gap);
+    max-inline-size: 100%;
+  }
+
   @container responsive-grid (min-width: 40rem) {
     .ui-responsive-grid {
       grid-template-columns: repeat(var(--responsive-grid-sm, 2), minmax(0, 1fr));
@@ -324,6 +446,17 @@
     grid-template-columns: minmax(0, 1fr);
   }
 
+  /* CLOSED rail — `aside={null}`. The `<aside>` element is gone, so the pane is one full-width
+   * column and there is nothing left for the gap to separate. The wrappers stay mounted (that is
+   * what keeps `children` from remounting), so this attribute is the ONLY thing that changes.
+   * The second attribute is deliberate: it lifts the rule above the `[data-aside-width]` presets
+   * in the container queries below, which sit at equal specificity, so a closed pane stays one
+   * column no matter where those blocks end up in source order. */
+  .ui-split-pane[data-aside="closed"][data-aside-width] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
+  }
+
   .ui-resizable-panel-group {
     display: flex;
     min-height: 0;
@@ -400,18 +533,82 @@
     min-width: 0;
   }
 
+  /* `--page-band-gap` is INTERNAL plumbing, not a theming knob (the same shape as
+   * --master-detail-rail-size above): the ONE resolved number that separates the page's bands,
+   * so the container's `gap` and the toolbar band's negation of it can never disagree. It has to
+   * be a named variable because the number is not always --space-section-active — `ghost` swaps
+   * it for --space-stack-md, while the 720px step and the admin-collection preset swap the
+   * section token underneath it. A toolbar rule that hard-coded
+   * `calc(-1 * var(--space-section-active))` would look correct only because those two tokens
+   * both resolve to 16px today: retune --space-section in a service theme and a ghost page's
+   * band would overlap or float by the difference, silently. Services still retune the SPACING
+   * through --space-section / --space-section-compact, exactly as before. */
   .ui-page-container {
+    --page-band-gap: var(--space-section-active);
+
     display: flex;
     flex-direction: column;
     min-height: 100%;
     padding: var(--space-page-active-y) 0;
-    gap: var(--space-section-active);
+    gap: var(--page-band-gap);
+  }
+
+  /* `headerScale="chrome"` — the top band is CHROME, so it sits ON the frame's edge, not in a
+   * document's top margin. The shorthand above opens every page with --space-page-active-y (24px,
+   * 16px below the 720px step), which is right for a document: a title needs air above it. Chrome
+   * does not. A chat channel head, a mail thread's subject bar, an IDE tab strip are the FRAME —
+   * measured against the design of a consumer chat screen at 1512x805, the design's channel head
+   * occupies y 0..47 while the app's identical-height head started at y 24, pushing the whole top
+   * chrome down and taking those 24px straight off the scroll viewport (design 617px of transcript,
+   * app 587px). The band heights already matched; the page was simply floating.
+   *
+   * This is the SAME question `headerScale` already answers, not a second one: "is the first row a
+   * document title or the surface's own furniture". The type step (see .ui-page-title below) and
+   * the flush edge are two consequences of that one fact, which is why they ride the same
+   * attribute rather than a second prop that every real call site would have to set in lockstep.
+   *
+   * BLOCK-START ONLY, deliberately. `headerScale` names the HEADER, so it may only speak for the
+   * top edge; the bottom belongs to `stickyFooter`, which already zeroes `padding-block-end` for
+   * its own (documented) reason. A longhand, so that contract is untouched and the shorthand above
+   * still owns the default page.
+   *
+   * Chrome is a token, default quiet (rule #44): the inset is `--page-pad-block-start-chrome`,
+   * 0 by default (flush IS the quiet state for chrome), so a service whose design grid wants its
+   * chrome to breathe retunes it once instead of forking the page shell. The specificity (0,2,0)
+   * out-ranks both the base rule and the 720px block — which re-declares the TOKEN, never this
+   * padding — so the mechanism holds identically on both sides of that step. A page that never
+   * passes `headerScale` emits no attribute and is geometrically byte-identical. */
+  .ui-page-container[data-header-scale="chrome"] {
+    padding-block-start: var(--page-pad-block-start-chrome);
+  }
+
+  /* `headerScale="chrome"`, the BAND-HEIGHT consequence of that same fact (gh#331). A document
+   * header is content-height — correctly, a title is as tall as the title is. Chrome is furniture,
+   * and furniture has a band that things centre INTO; without one, the band's vertical centre is a
+   * function of the copy inside it (measured here: 42.02px with an `extra` control, 40.38px
+   * without), so nothing in the page can ever be aligned to it and no service can aim at a number.
+   *
+   * A MIN, not a height: an `lg` control or a wrapped JA/VI channel name must still fit, and
+   * `min-block-size` floors the band without ever clipping it. `justify-content: center` is the
+   * half that makes the floor useful — a taller band with top-packed content is a band with dead
+   * air under it, not a centred one — and it is inert while the knob is `auto`, because a column
+   * whose min IS its content height has nothing to distribute. Both declarations are therefore
+   * byte-identical for every page shipped before this token existed, chrome pages included.
+   *
+   * Scoped to the container attribute (0,2,0), like every other half of the chrome contract, so a
+   * document page never matches and the 720px block (which re-declares tokens, never these
+   * properties) cannot out-rank it. The band-height axis has ONE owner and it is
+   * `--app-shell-bar-height`: see tokens/semantic/layout.css for why the DEFAULT still is not it. */
+  .ui-page-container[data-header-scale="chrome"] .ui-page-header {
+    min-block-size: var(--page-header-min-block-size-chrome);
+    justify-content: center;
   }
 
   /* Horizontal page insets live on the header/body/footer — NOT the container —
    * so the header divider and footer border span the full page width
    * (full-bleed) while their content stays aligned with the body. */
   .ui-page-header,
+  .ui-page-toolbar,
   .ui-page-body,
   .ui-page-footer {
     padding-inline-start: var(--space-page-active-x);
@@ -436,16 +633,21 @@
    * the full compact-gutter surface. The footer is deliberately NOT capped: its border/background
    * is page-level chrome that must span the page when `stickyFooter` pins it. */
   .ui-page-container[data-measure="narrow"] .ui-page-header,
+  .ui-page-container[data-measure="narrow"] .ui-page-toolbar,
   .ui-page-container[data-measure="narrow"] .ui-page-body {
     max-inline-size: var(--page-measure-narrow);
   }
 
   .ui-page-container[data-measure="medium"] .ui-page-header,
+  .ui-page-container[data-measure="medium"] .ui-page-toolbar,
   .ui-page-container[data-measure="medium"] .ui-page-body {
     max-inline-size: var(--page-measure-medium);
   }
 
-  /* flush = full-bleed body (DataTable); header/footer keep their inset. */
+  /* flush = full-bleed body AND toolbar band (DataTable, a full-width filter strip);
+   * header/footer keep their inset. `PageContainer.Inset` re-applies the page gutter to any
+   * padded strip inside either one, so a toolbar's own content can still align with the title. */
+  .ui-page-container--flush .ui-page-toolbar,
   .ui-page-container--flush .ui-page-body {
     padding-inline-start: 0;
     padding-inline-end: 0;
@@ -457,21 +659,64 @@
     padding-inline-end: var(--space-page-active-x);
   }
 
+  /* `ghost` is the quiet chrome WEIGHT: no header rule, no header bottom pad. The two halves are
+   * NOT the same kind of decision, and the border half used to get it wrong.
+   *
+   * Hard-setting `none` here threw away an EXPLICIT `--page-header-divider` as well as the
+   * nothing it was meant to block — so a service could opt the page chrome into a rule and a
+   * ghost page would still refuse to draw it. Measured against the design of a consumer chat
+   * screen: the design carries TWO horizontal rules in the top chrome (channel head at y=47, work
+   * band at y=88) and the app rendered ONE (y=133) — the missing y=47 is this line eating the
+   * divider the service had already turned on. It is the identical bug that was fixed on
+   * `.ui-page-toolbar` below, and it takes the identical cure: re-declare the property from the
+   * SAME knob with a `none` fallback. Nothing inherits in, the opt-in passes through, and the
+   * default (`--page-header-divider: none`) is byte-identical to the hard-set version.
+   *
+   * `padding-bottom: 0` is untouched — THAT is the real quiet half of ghost, it answers "how loud
+   * is the chrome", not "did the service ask for a rule", and no token mediates it. */
   .ui-page-container--ghost .ui-page-header {
-    border-bottom: none;
+    border-bottom: var(--page-header-divider, none);
     padding-bottom: 0;
   }
 
+  /* The band's half of the same contract, and it must stay in step with the header rule above:
+   * neither one lets a divider INHERIT in, and both let an explicit opt-in through — otherwise a
+   * ghost page would draw a rule under the band that the header itself refuses to draw, or vice
+   * versa.
+   *
+   * Inherited, and only inherited. An earlier version hard-set `none` here, which also threw away
+   * an EXPLICIT `--page-toolbar-divider` — so a service could paint the band (ghost deliberately
+   * leaves the ground alone) but could never rule it, and the two knobs disagreed about who ghost
+   * outranks. A chat shell is the case that exposed it: a quiet header, and a workflow band that
+   * has to read as a separate surface from the transcript below it. Re-declaring the property with
+   * a `none` fallback keeps the original guarantee (nothing inherits in) while letting the opt-in
+   * through, which is what the paragraph above always meant. */
+  .ui-page-container--ghost .ui-page-toolbar {
+    border-block-end: var(--page-toolbar-divider, none);
+  }
+
   .ui-page-container--ghost {
-    gap: var(--space-stack-md);
+    --page-band-gap: var(--space-stack-md);
   }
 
   .ui-page-container--sticky-footer {
     min-height: 100%;
+
+    /* The container's own block-end padding must NOT stay under a sticky
+     * footer. A sticky box cannot travel into its containing block's padding
+     * area, so `bottom: 0` resolves that much ABOVE the true bottom edge —
+     * the footer floats short of the fold and page content scrolls through
+     * the gap behind it. Measured in Chromium at the 24px page padding: the
+     * footer pinned at 837px inside an 861px scroller.
+     *
+     * The space itself is still wanted, so it moves onto the body, which is
+     * what needs breathing room above the footer anyway. */
+    padding-block-end: 0;
   }
 
   .ui-page-container--sticky-footer .ui-page-body {
     flex: 1;
+    padding-block-end: var(--space-page-active-y);
   }
 
   .ui-page-container--sticky-footer .ui-page-footer {
@@ -518,6 +763,53 @@
     background-image: var(--gradient-hero);
   }
 
+  /* `toolbar` — the FIXED chrome band between the page header and the body: a filter strip, a
+   * status bar, a channel workflow rail. There was no slot for it before, so a page either put
+   * the strip inside the body (where `fill` scrolls it away) or hand-laid `position: sticky` at
+   * the call site — the exact "never hand-lay page chrome" the system forbids.
+   *
+   * `flex: none` is the whole contract: under `fill` the BODY is the scroll viewport (see
+   * .ui-page-container--fill below), so the band is a plain flex item OUTSIDE the scroller and
+   * cannot be squeezed by it. Sticky could not give that — sticky keeps content flowing
+   * BENEATH the pinned box, which is the half-sliced row a hand-rolled strip always shows.
+   *
+   * Chrome is a token, default quiet (rule #44): the band draws NO rule of its own, and its
+   * bottom rule falls back — at the CALL SITE, never bound at :root — to whatever the page
+   * header's divider is, so a service opting into `--page-header-divider` gets a consistent
+   * page chrome in ONE declaration and can still silence just this band with
+   * `--page-toolbar-divider: none`.
+   *
+   * The GROUND is a knob too, defaulting to `transparent` so the band looks exactly as it did
+   * before the token existed. Without it the only way to lift the band off the page ground was a
+   * `bg-card` utility at the call site — hand-laid page chrome, which is what this whole slot
+   * exists to abolish, and which cannot be re-themed per tenant. It is the `background`
+   * shorthand, not `background-color`, so a service may equally hand it a gradient.
+   *
+   * The NEGATIVE block margins are what make it read as chrome rather than as a third section.
+   * The container is a flex column with a `--page-band-gap` between every band, which is right
+   * for a document page (header / body / footer are three separate blocks) and wrong here: a
+   * band that carries a ground and a bottom rule and then FLOATS between two 16px voids divides
+   * nothing — measured on a 1512×805 chat page, 24/69 header · 85/134 band · 150/685 body, i.e.
+   * 32px of dead air wrapped around the one element whose job is to be attached. Chrome sits
+   * between the header and the scrolling body; chrome is flush. Cancelling the gap from the band
+   * itself keeps that in ONE declaration, leaves the container's rhythm intact for every page
+   * that passes no `toolbar`, and keeps `--page-toolbar-pad-block` as what it always was: the
+   * band's own INSIDE, the only place it is allowed to breathe. */
+  .ui-page-toolbar {
+    flex: none;
+    margin-block: calc(-1 * var(--page-band-gap));
+    padding-block: var(--page-toolbar-pad-block);
+    background: var(--page-toolbar-background);
+    border-block-end: var(--page-toolbar-divider, var(--page-header-divider));
+  }
+
+  /* The band is never the FIRST child — the header always renders — but it CAN be the last one
+   * (a page given a `toolbar` and no `children`). There is no gap under a last flex item to
+   * cancel, so the negation would eat the container's own bottom padding instead. */
+  .ui-page-toolbar:last-child {
+    margin-block-end: 0;
+  }
+
   .ui-page-header-row {
     display: flex;
     flex-direction: column;
@@ -525,6 +817,16 @@
     gap: var(--space-stack-sm);
   }
 
+  /* The title/subtitle column is the SHRINKABLE side of the header row (gh#300): a flex item's
+   * automatic minimum size is its content, so without this the heading refuses to shrink and the
+   * whole overflow is charged to `extra`. The component used to carry it as a bare `min-w-0`
+   * utility, which meant the >=640px arrangement depended on a Tailwind class while the compact
+   * arrangement below declared it in CSS — the same property owned in two places (gh#319).
+   * Unconditional, so both arrangements read one rule. */
+  .ui-page-header-heading {
+    min-inline-size: 0;
+  }
+
   .ui-page-header-extra {
     display: flex;
     flex-wrap: wrap;
@@ -563,6 +865,20 @@
     overflow-wrap: anywhere;
   }
 
+  /* `headerScale="chrome"` — the page's top row is CHROME (a chat channel, a mail thread, an IDE
+   * tab), not a document title, so the `<h1>` takes the body type step. The ELEMENT is untouched:
+   * still an `<h1>`, still the page's one level-1 heading, because the screen-reader outline is
+   * what a page is navigated by — only the type step moves, and only through a token.
+   *
+   * The compound selector's specificity (0,2,0) is load-bearing, not decoration: the 720px block
+   * below re-declares `.ui-page-title` (0,1,0) at the COMPACT DOCUMENT step, which is h2 (18px) —
+   * BIGGER than this. Without out-ranking it, a chrome header would swell on a phone, i.e. exactly
+   * where the height matters most. The responsive step itself is untouched and still governs every
+   * document-scaled page. */
+  .ui-page-container[data-header-scale="chrome"] .ui-page-title {
+    font-size: var(--page-title-font-size-chrome);
+  }
+
   /* Compact viewports use a responsive type step, not compact density: body/control text and
    * touch targets remain readable while page chrome stops competing with primary actions. A
    * single Flex action group must wrap even when the consumer omitted `wrap`, because clipping
@@ -644,6 +960,25 @@
       min-inline-size: 0;
       justify-content: flex-end;
     }
+
+    /* `headerScale="chrome"`, second consequence of the SAME fact. The row's `align-items:
+     * flex-start` above is right for a DOCUMENT: a `Save`/`Publish` group belongs on the first
+     * line of a tall `<h1>`, not floating beside its second line. A chrome band has no tall
+     * heading to align to — it is one bar, and its actions sit on the bar's middle. Measured
+     * against the reference chat screen the difference was 8.65px: the header row is 45.3px, the
+     * icon buttons 28px, so top-packing put their centres at y=14 while the title block's centre
+     * sat at y=22.65. That gap is what reads, correctly, as "the icons are not centred".
+     *
+     * `align-self` on the EXTRA box, not `align-items` on the row: the heading keeps the stretch
+     * it has today (nothing about the title's own alignment is in question), and the two axes stay
+     * independent. Scoped INSIDE the 640px block on purpose — below it the row is a COLUMN, where
+     * the cross axis is horizontal and this same declaration would centre `extra` sideways and
+     * release its full-width stretch. `headerLayout="responsive-inline"` runs its own row
+     * arrangement under 640px and keeps its own flex-start; that arrangement exists to hold ONE
+     * compact control beside a wrapping title band, which is the document case again. */
+    .ui-page-container[data-header-scale="chrome"] .ui-page-header-extra {
+      align-self: center;
+    }
   }
 
   .ui-page-subtitle {
@@ -652,6 +987,24 @@
     margin-top: var(--space-1);
   }
 
+  /* `headerScale="chrome"`, third consequence of the SAME fact: if the top row is chrome, the line
+   * under it is a caption ON that chrome (a channel purpose, a mail preview), not a document's
+   * standfirst. The document step is --font-size-base — the identical step the chrome TITLE takes —
+   * so a chrome header was shipping a title and its subtitle at one size, which is not a hierarchy.
+   * Same size is also not the expensive half: the step drives the LINE BOX (14px × 1.7 = 23.8px vs
+   * 11px × 1.7 = 18.9px), and a band that exists to give the transcript room was spending 5px of it
+   * on a caption. Type only — no line-height, no colour, no weight: `--line-height-body` still owns
+   * the rhythm so a wrapped JA/VI purpose line stays readable at the smaller step.
+   *
+   * The specificity is load-bearing exactly as it is on the title above: the 720px block declares
+   * `.ui-page-header .ui-page-subtitle` (0,2,0) — already compounded, unlike the bare `.ui-page-title`
+   * — so this rule out-ranks it only because the container attribute makes it (0,3,0). Without that
+   * the compact step would win below 720px and a chrome subtitle would step UP to 14px on a phone,
+   * i.e. exactly where the band's height is worth the most. */
+  .ui-page-container[data-header-scale="chrome"] .ui-page-subtitle {
+    font-size: var(--page-subtitle-font-size-chrome);
+  }
+
   /* `headerLoading` placeholders — the real `<h1>`/`<p>` wearing the shared `.ui-skeleton-block`
    * skin, so the pending band occupies the same rhythm the settled band will. `max-inline-size:
    * 100%` keeps them inside a 390px column; the block size replaces the line box the (sr-only)
@@ -680,18 +1033,46 @@
   /* fill = body grows to fill the remaining shell height (full-height DataTable,
    * split-pane, or a chat surface whose message list scrolls and whose composer
    * is pinned to the bottom via `footer` + `stickyFooter`). */
+  /* `fill` means the body OCCUPIES the remaining height — so when its content is
+   * taller, the content scrolls INSIDE it. The container therefore flexes to the
+   * region rather than growing past it, and the body owns the scroll.
+   *
+   * This is what makes a chat surface behave: header and footer are plain flex
+   * items at the two ends, outside the scroller, so transcript content can never
+   * travel underneath them. Sticky bands cannot give that — sticky keeps the
+   * content flowing beneath the pinned box, which is exactly the half-sliced
+   * message line the chat page was showing. */
+  .ui-page-container--fill {
+    flex: 1;
+    min-height: 0;
+  }
+
   .ui-page-container--fill .ui-page-body {
     flex: 1;
     min-height: 0;
+    overflow-y: auto;
   }
 
+  /* The THIRD chrome band, and until now the only one whose rule was not a knob. The header reads
+   * --page-header-divider and the toolbar reads --page-toolbar-divider, but this line was a
+   * hard-copied literal, so a page could not turn it off at all. Measured on a consumer chat
+   * screen: the composer lives in this slot and is itself a bordered Card, so the full-width rule
+   * landed straight above it as a SECOND line — a pixel diff against the design caught a 100%-wide
+   * rule at y=701 that the design does not have.
+   *
+   * Unlike the other two, the default here is a rule rather than silence, and that is deliberate:
+   * `footer` is the shared slot a form's Save/Cancel bar lands in, where the line separating the
+   * actions from the content is the behaviour every existing page already depends on. The literal
+   * simply moves into the fallback, so `--page-footer-divider` unset is byte-identical to what
+   * this rule drew before, and `--page-footer-divider: none` is the opt-OUT the chat composer
+   * needed. */
   .ui-page-footer {
     display: flex;
     flex-direction: column-reverse;
     align-items: stretch;
     gap: var(--space-inline-sm);
     padding-top: var(--space-stack-md);
-    border-top: 1px solid hsl(var(--border));
+    border-top: var(--page-footer-divider, 1px solid hsl(var(--border)));
   }
 
   .ui-page-footer > * {
@@ -770,8 +1151,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 3rem;
-    height: 3rem;
+    inline-size: var(--empty-state-icon-size);
+    block-size: var(--empty-state-icon-size);
     border-radius: var(--radius-pill);
     /* Medallion fill + glyph colour read their knobs, defaulting to the LIVE --muted /
      * --muted-foreground roles at the call site (re-resolves under a scoped theme). */
@@ -779,6 +1160,11 @@
     color: var(--empty-state-icon-foreground, hsl(var(--muted-foreground)));
   }
 
+  .ui-empty-state-icon svg {
+    inline-size: var(--empty-state-icon-glyph-size);
+    block-size: var(--empty-state-icon-glyph-size);
+  }
+
   /* tone — set the medallion foreground + tint from the matching role token, so a consumer never
    * hand-rolls a `.ui-success-state` class. `muted` (default) keeps the neutral role fallback. */
   .ui-empty-state[data-tone="success"] {
@@ -884,18 +1270,31 @@
     color: hsl(var(--muted-foreground));
   }
 
+  /* The button GROWS with its label instead of being a rigid square. `width: var(--control-height)`
+   * capped every control at one control-height, so a five-figure page number spilled out of its
+   * own box (measured: `12345678` wanted 59.3px of text inside a 30px content box; `1043` cleared
+   * a 32px box by 0.3px and clipped outright at the consumer's 29px density). Ant Design, MUI and
+   * shadcn all size the same way — a min-width for the rhythm, padding for the overflow — so the
+   * one- and two-digit buttons keep the square look while longer ones widen. Height stays pinned so
+   * the row never changes rhythm. */
   .ui-pagination-link {
     display: inline-flex;
-    width: var(--control-height);
+    min-width: var(--control-height);
     height: var(--control-height);
     align-items: center;
     justify-content: center;
+    padding-inline: var(--pagination-page-padding-x);
     border-radius: var(--radius-sm);
     border: 1px solid hsl(var(--border));
     color: hsl(var(--foreground));
     text-decoration: none;
   }
 
+  /* Keyboard focus: drawn by the single-source rule in styles/focus-ring.css
+   * (`.ui-pagination-link` is in its shadow-form list). Before that, focus here was
+   * left to the browser, which paints its OWN ring — measured
+   * `outline: rgb(0, 95, 204) auto 1px`, a blue belonging to no theme. */
+
   .ui-pagination-link[data-active="true"] {
     border-color: hsl(var(--ring) / 0.5);
     background: hsl(var(--primary));
@@ -1214,11 +1613,6 @@
     background: hsl(var(--legal-document-toc-active-background, var(--accent)) / 0.6);
   }
 
-  .ui-legal-document-toc-link:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
-  }
-
   /* Active entry: colour + a leading marker + a heavier weight, so the state survives a
    * monochrome / high-contrast rendering (never colour-only, WCAG 1.4.1). The anchor also
    * carries `aria-current="location"`. */
@@ -1250,11 +1644,6 @@
 
   /* The section is `tabIndex={-1}` and receives focus when its contents anchor is
    * activated, so the focus ring must be VISIBLE (WCAG 2.4.7 / 2.4.11). */
-  .ui-legal-document-section:focus-visible {
-    outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color, var(--ring)));
-    outline-offset: var(--space-1);
-  }
-
   .ui-legal-document-footer {
     display: flex;
     flex-wrap: wrap;