efficient-easel 0.105.1 → 1.0.0

package/dist/panel/panel.css

@@ -3,8 +3,9 @@
  *
  * Values come from the shell token layer (`efficient-easel/shell.css`), never from
  * literals: this file is the storefront editor's approved panel design expressed
- * once, so both editors read the same rules. Light only — neither editor has a
- * dark mode.
+ * once, so both editors read the same rules. The token layer resolves to
+ * efficient-shell's tokens, so the panel follows the shell's theme, dark
+ * included (UI-24).
  *
  * Two details are deliberate and were decided by measurement, not taste:
  *   · rows sit 32px apart while a label sits 12px from its own control, so a
@@ -188,13 +189,10 @@
 
    The context lives HERE rather than in a host's own panel rule so the shell is
    self-contained: a host that never declares `container-type` would silently
-   pin the strip to one state with nothing to see and nothing to fail.
-
-   `.es-rail-fit` is the top-bar rail's column (`TopBarRail`), which reads the
-   word-fit rule below: its container is the left panel's own width. */
+   pin the strip to one state with nothing to see and nothing to fail. (The
+   top-bar rail's words are measured by the shell's IconRail since 4.165.0.) */
 .es-tabs-fit,
-.es-segs-fit,
-.es-rail-fit {
+.es-segs-fit {
   container-type: inline-size;
   flex: none;
 }
@@ -249,133 +247,28 @@
   min-width: 0;
 }
 
-/* THE TRACK (card 66138). Lewis, looking at a real settings panel: the tab he
-   is NOT on does not invite a click — it does not even look like a button. He
-   was shown six treatments in `mockups/settings-tab-strip-options.html` and
-   picked B, the segmented control.
-
-   This REPLACES the underline strip, and with it card 8811's accent-tint ground
-   (see `.es-tab.is-active` below). The grey track is the part doing the work
-   Lewis asked for: it is what makes every segment look pressable, where a mark
-   under the chosen tab only ever made the chosen tab louder.
-
-   FULL WIDTH, no side inset. The old strip carried `padding: 0 14px` because
-   underline tabs must start inset from the panel edge. A track is a FILLED row,
-   and every other filled row here — `.es-group-head` at `width: 100%` — runs
-   the full width of the body's content box; a track inset 14px further than the
-   rows beneath it is visibly out of line. It is also worth 28px of room, which
-   is the difference between three segments fitting the shop's default panel and
-   not.
-
-   NOWRAP, unlike the strip it replaces. A segmented control is one row by
-   definition — a second row of track under the first is not a wrapped control,
-   it is two controls. The guarantee that no bucket is ever out of reach is
-   re-made out of different parts: segments that share the leftover space, and
-   the drop rules below. */
+/* THE TRACK AND ITS CHIPS ARE THE SHELL'S (efficient-easel issue 199 step 4, harness
+   UI-24). `SettingsTabs` is the shell's `Tabs` (`pill`), `SettingsSegmented`
+   its `Segmented`: the grey track, the chosen chip filled with the accent (card
+   66138's segmented look, Lewis 2026-10-06's blue), the quiet chips' ink, the
+   focus ring, a count (`CountBadge`) and a chip out of force are the kit's.
+   What stays here is LAYOUT the shell has no prop for:
+
+   FULL WIDTH, ONE ROW. A track is a filled row, and every other filled row
+   here runs the full width of the body's content box; a segmented control is
+   one row by definition, so it never wraps. A SEGMENT TAKES ITS OWN WIDTH, THEN
+   SHARES WHAT IS LEFT (`1 1 auto`, not equal segments: three equal segments
+   need a 267px track against the 281px the shop's default panel gives). */
 .es-tabs,
 .es-segs {
   display: flex;
   flex-wrap: nowrap;
-  gap: var(--es-track-gap);
-  padding: var(--es-track-pad);
-  background: var(--es-track-bg);
-  border-radius: var(--es-row-radius);
-  flex: none;
+  width: 100%;
 }
-
-/* A SEGMENT TAKES ITS OWN WIDTH, THEN SHARES WHAT IS LEFT.
-
-   `1 1 auto` and not `1 1 0`: equal segments were measured and are too
-   expensive. Every equal segment takes the width of the WIDEST label, and
-   "Content" is 85.36px at 12px/600, so three equal segments need a 267px track
-   and four need 355px — against the 281px the shop's default panel gives. With
-   natural widths the track still reaches both edges, and "Style" is not forced
-   to be as wide as "Content" to get there.
-
-   `box-sizing` for the same reason the switch sets it: this file assumes no
-   reset of the host's. */
-.es-tab,
-.es-seg {
-  box-sizing: border-box;
+.es-tabs > [role='tab'],
+.es-segs > button {
   flex: 1 1 auto;
-  border: 0;
-  background: transparent;
-  border-radius: 6px;
-  padding: 4px var(--es-chip-pad-x);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--es-text-secondary);
   white-space: nowrap;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--es-chip-icon-gap);
-  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
-}
-
-/* A quiet segment is READABLE, not faint. It was `--es-muted`, which on the new
-   grey track sits at about 4.3:1 and misses AA; this is about 8.9:1. The track
-   is what says "pressable" now, so the label no longer has to whisper to stay
-   out of the chosen tab's way. */
-.es-tab:hover:not(.is-active),
-.es-seg:hover:not(.is-active) { color: var(--es-text); }
-
-/* Keyboard focus, themed rather than left to the UA. Same ring as the switch,
-   so the panel answers a keyboard the one way. */
-.es-tab:focus-visible,
-.es-seg:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--es-accent-ring);
-}
-
-/* THE CHOSEN CHIP IS BLUE (Lewis, 2026-10-06): 「用蓝色的背景, 不要黑色的了」.
-
-   Said while the shop's hand-built "pick one of 2-3" rungs were merged into
-   this control. It was `--es-text`, near-black, since card 66302; before that a
-   raised white chip (card 66138). Both editors draw every segmented control and
-   the settings tab strip from this one rule, so this is the whole change.
-
-   THE NUMBERS STILL HOLD, which is why the colour could move at all. Card 66302
-   made the chip the ONLY state cue once the words drop at the narrow end, and
-   WCAG 1.4.11 asks 3:1 of it: `--es-accent` on `--es-track-bg` is
-   4.70:1, and the white word on it is 5.17:1 (1.4.3 asks 4.5:1 at 12px).
-
-   ⚠️ THE LIFT STAYS, AND IT IS NOT THE MESSAGE. `--es-raised-shadow` seats the
-   chip on the track; the colour is what tells the states apart, because a
-   shadow cannot be scored and that is how this once sat at 1.10:1 unnoticed.
-   `tests/panel-chip-contrast.test.ts` pins the ratios AND, since the ruling,
-   the colour itself. */
-.es-tab.is-active,
-.es-seg.is-active {
-  background: var(--es-accent);
-  color: var(--es-on-accent);
-  box-shadow: var(--es-raised-shadow);
-  border-radius: 6px;
-}
-
-/* Focused AND chosen. The quiet chip's ring is a translucent accent wash, and
-   laid against a chip that is itself the accent it reads as the chip growing,
-   not as focus. So this ring stands OFF the chip: a 2px gap in the panel
-   colour, then a solid accent ring — the blue chip, a white gap, a blue line. */
-.es-tab.is-active:focus-visible,
-.es-seg.is-active:focus-visible {
-  box-shadow: 0 0 0 2px var(--es-panel), 0 0 0 4px var(--es-accent);
-}
-
-.es-tab-badge {
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border-radius: 999px;
-  background: var(--es-accent);
-  color: var(--es-on-accent);
-  font-size: 10px;
-  font-weight: 700;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
 }
 
 /* The glyph in the chip: 16px of drawing, the same size a field's icon takes,
@@ -408,74 +301,86 @@
 .es-tab-icon svg,
 .es-seg-icon svg { width: var(--es-chip-icon); height: var(--es-chip-icon); display: block; }
 
+/* A tab with a glyph holds its glyph and its word in ONE shell Tooltip (which
+   says the word on hover, where the panel has dropped it). The Tooltip's
+   wrapper stands where the shell's tab put them side by side: the same
+   `gap-1.5`, so the measured thresholds below still hold. A clipped word is
+   out of the flow, so a glyph-only tab keeps no gap. */
+.es-tab-tip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: calc(1.5 * var(--spacing));
+}
+
 /* ── where the word stops fitting ──────────────────────────────────────────── */
 
-/* MEASURED in Chromium, `tests/fixtures/tabs-segmented-fit.html`, against these
- * stylesheets and the shop's four buckets Content / Media / Style / Layout, by
- * EDGE GEOMETRY — the right edge of the last segment against the right content
- * edge of the track. Not `scrollWidth`: a flex button reports a `scrollWidth`
- * equal to its `clientWidth` while its own content is drawn outside it, so it
- * says "fits" about a strip that visibly does not.
+/* RE-MEASURED ON THE SHELL'S PILL (efficient-easel issue 199, part C, 2026-10-10).
+ * The chip is efficient-shell's `Tabs` pill since step 4, wider than the 0.106
+ * chip the old numbers were taken on, so the thresholds were measured again: in
+ * headless Chromium, against the COMPILED shell CSS and these sheets with their
+ * @container tiers taken out, the shop's four buckets Content / Media / Style /
+ * Layout with 16px glyphs, by EDGE GEOMETRY — the right edge of the last tab
+ * against the right content edge of the track (not `scrollWidth`, which says
+ * "fits" about a flex button drawing past itself).
  *
  * Smallest container width with nothing drawn past the track edge:
  *
  *     tabs   words   glyph + active word   glyphs only
- *      2     168px          126px              73px
- *      3     239px          161px             108px
- *      4     320px          196px             143px
+ *      2     197px          151px              92px
+ *      3     280px          195px             136px
+ *      4     375px          239px             180px
  *
- * THE GLYPHS-ONLY COLUMN SAID 120px FOR BOTH 2 AND 3 TABS UNTIL CARD 66248,
- * and it was wrong twice over. `tabs-segmented-fit.html` searched upward from
- * 110px, so it could never have reported anything smaller than 110 whatever the
- * truth was — and 120 is not even that, so a second hand had been on it. The
- * truth is arithmetic and there is nothing to measure: a chip with no word is a
- * glyph in its padding, so the strip is `n × 32px` plus `(n − 1)` gaps plus the
- * track's own padding — 73, 108, 143. The 4-tab cell was right by luck of being
- * above the floor. Re-measured with the search starting at 40px, all three
- * agree with the arithmetic to the pixel; `(d)` now pins them to it, so the
- * cell cannot drift from the sheet again.
+ * The glyphs-only column is arithmetic (`n` chips of a 16px glyph in `px-3`,
+ * `gap-1` apart in a `p-1` track) and the measurement agrees with it to the
+ * pixel, which is what says the method is sound; `tests/panel-layout.test.ts`
+ * (d) pins the arithmetic.
  *
  * The drag band gives containers from 181px (a 220px panel, the minimum) to
- * 281px (a 320px panel, the default — the panel minus 28px of body padding
- * minus the 11px reserved scrollbar gutter). Read against it:
+ * 281px (a 320px panel, the default). Read against it:
  *
- *   · TWO tabs never drop a word. 168px is under the 181px floor, so both words
- *     survive the whole band — and this is the case Lewis is looking at.
- *   · THREE tabs carry their words down to 239px.
- *   · FOUR tabs need 320px, which the band never reaches, so a four-bucket
- *     section is glyph-plus-one-word at the default panel, and below 196px even
- *     that one word stops fitting.
+ *   · TWO tabs now need 197px for both words, so at the narrow end of the band
+ *     the tab not being read loses its word (it never did on the old chip).
+ *   · THREE tabs carry their words down to 280px — the default panel, just —
+ *     then one word down to 195px, then glyphs.
+ *   · FOUR tabs need 375px, which the band never reaches: glyph-plus-one-word
+ *     down to 239px, then glyphs, which fit the 181px floor.
  *
  * WHY THE RULES ARE KEYED ON THE TAB COUNT. With natural widths, whether the
  * words fit is a question about the SUM of the labels, so the answer moves with
  * how many buckets a section has. A width-only rule would have to answer for
  * the worst case — four tabs — and would then strip the word off a TWO-tab
- * strip at the default panel width. That is the exact bug this card exists to
- * remove, so it cannot be the fix for it.
+ * strip at the default panel width.
  *
  * Only `.has-icon` is ever touched. A tab with no glyph has nothing to fall
  * back to, so it keeps its word at every width — a button holding neither word
- * nor glyph is not a narrower segment, it is an empty one. */
+ * nor glyph is not a narrower segment, it is an empty one. A word is clipped,
+ * never `display: none`: the shell's tab takes its name from it. */
+
+/* TWO OR MORE, under 197px: the word on the tab he is not reading goes. */
+@container (width < 197px) {
+  .es-tabs:has([role='tab']:nth-child(2)) [role='tab']:not([aria-selected='true']) .es-tab-word.has-icon { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+}
 
-/* THREE OR MORE, under 240px: the words on the tabs he is not reading go. The
-   NAME does not go with them — it is still on the button as `title` and
-   `aria-label`, in every state. */
-@container (width < 240px) {
-  .es-tabs:has(.es-tab:nth-child(3)) .es-tab.has-icon:not(.is-active) .es-tab-word { display: none; }
+/* THREE OR MORE, under 280px. */
+@container (width < 280px) {
+  .es-tabs:has([role='tab']:nth-child(3)) [role='tab']:not([aria-selected='true']) .es-tab-word.has-icon { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 }
 
-/* FOUR OR MORE: a fourth label is another 78px of track, so the same words stop
-   fitting a long way sooner. */
-@container (width < 320px) {
-  .es-tabs:has(.es-tab:nth-child(4)) .es-tab.has-icon:not(.is-active) .es-tab-word { display: none; }
+/* FOUR OR MORE, under 375px: a fourth label is another ~95px of track. */
+@container (width < 375px) {
+  .es-tabs:has([role='tab']:nth-child(4)) [role='tab']:not([aria-selected='true']) .es-tab-word.has-icon { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 }
 
-/* FOUR OR MORE at the narrow end: the last word goes as well, and the strip is
-   four glyphs on a track. It reads — the track and the chips are what say
-   "these are buttons", which is more than the bare glyphs it replaces ever
-   said. */
-@container (width < 200px) {
-  .es-tabs:has(.es-tab:nth-child(4)) .es-tab.has-icon.is-active .es-tab-word { display: none; }
+/* THREE OR MORE at the narrow end, under 195px: the last word goes as well. */
+@container (width < 195px) {
+  .es-tabs:has([role='tab']:nth-child(3)) [role='tab'][aria-selected='true'] .es-tab-word.has-icon { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
+}
+
+/* FOUR OR MORE, under 239px: the strip is four glyphs on a track. It reads —
+   the track and the chips are what say "these are buttons". */
+@container (width < 239px) {
+  .es-tabs:has([role='tab']:nth-child(4)) [role='tab'][aria-selected='true'] .es-tab-word.has-icon { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 }
 
 /* ── the segmented control: the same chip, a different promise ─────────────── */
@@ -571,16 +476,18 @@
    whether it was given a `fit`, so the arithmetic below is reached by a strip
    that has one and never by a strip that does not. What an unmeasured strip
    does is the strip's own call: a segmented control keeps every word (there is
-   nowhere honest to drop one), a top-bar rail stays icon-only (always fits). */
+   nowhere honest to drop one). */
 .es-segs {
-  --es-fit-chip: calc(2 * var(--es-chip-pad-x) + var(--es-chip-icon));
-  --es-fit-word-gap: var(--es-chip-icon-gap);
-  --es-fit-gap: var(--es-track-gap);
-  --es-fit-ends: var(--es-track-pad);
+  /* The shell's `sm` Segmented, read off Tailwind's spacing step (the host's
+     `--spacing`): a chip pads px-2.5, the track p-1, its chips gap-1, a glyph
+     and its word gap-1.5. The word-fit arithmetic must add what is drawn. */
+  --es-fit-chip: calc(2 * 2.5 * var(--spacing) + var(--es-chip-icon));
+  --es-fit-word-gap: calc(1.5 * var(--spacing));
+  --es-fit-gap: var(--spacing);
+  --es-fit-ends: var(--spacing);
 }
 
-.es-segs.is-measured,
-.es-rail-row.is-measured {
+.es-segs.is-measured {
   --es-fit-strip: calc(2 * var(--es-fit-ends) + (var(--es-fit-count) - 1) * var(--es-fit-gap));
 
   --es-fit-words-from: calc(
@@ -604,8 +511,7 @@
 
    `100cqi` stays a unit until a word USES it, so it is the width of the
    container around that word — the strip's own `-fit` wrapper. */
-.es-segs,
-.es-rail-row.is-measured {
+.es-segs {
   --es-fit-room-all: calc((100cqi - var(--es-fit-words-from, 0px)) * 10000);
   --es-fit-room-chosen: calc((100cqi - var(--es-fit-chosen-from, 0px)) * 10000);
 }
@@ -614,8 +520,7 @@
    switch has to be a length for `max-width` to clamp it. Nothing is lost by
    it: the label is on the button as `title` and `aria-label` in every state, so
    the name a screen reader reads never depended on the span being drawn. */
-.es-seg-word,
-.es-rail-row.is-measured .es-rail-word {
+.es-seg-word {
   overflow: hidden;
   max-width: var(--es-fit-room-all);
 }
@@ -625,8 +530,7 @@
    and the chips are what say "these are buttons"; a track that also still says
    which value is set reads better, and it costs one word. On the rail "chosen"
    is the button whose panel is open. */
-.es-seg.is-active .es-seg-word,
-.es-rail-row.is-measured .es-rail-btn.is-active .es-rail-word { max-width: var(--es-fit-room-chosen); }
+.es-segs > button[aria-pressed='true'] .es-seg-word { max-width: var(--es-fit-room-chosen); }
 
 /* THE GAP GOES WITH THE WORD IT SEPARATES. The chip's `gap` is a flex gap, and
    a flex gap does not care that the word is now zero wide — it would leave 6px
@@ -636,66 +540,21 @@
    untouched and keeps the flex gap, which is right there: its word is
    `display: none`, so the gap goes with the element, and a tab also has a badge
    on the other side of that word for the gap to separate. */
-.es-seg { gap: 0; }
-.es-seg.has-icon .es-seg-word,
-.es-rail-row.is-measured .es-rail-word { margin-left: clamp(0px, var(--es-fit-room-all), var(--es-fit-word-gap)); }
-.es-seg.has-icon.is-active .es-seg-word,
-.es-rail-row.is-measured .es-rail-btn.is-active .es-rail-word { margin-left: clamp(0px, var(--es-fit-room-chosen), var(--es-fit-word-gap)); }
-
-/* ── a segment out of force (card 66303; the RULE is card 66216's) ──────────
-
-   The setting still EXISTS and still shows the merchant's saved answer. Another
-   setting has simply taken the decision away — the Header's "Text colour at the
-   top" under a pinned Background, which cannot be transparent. DIMMED, NEVER
-   HIDDEN: a control that disappears reads as a feature that was removed, and
-   leaves the merchant no way to see what to change to get it back.
-
-   THE STATE IS ON THE BUTTONS, and `SettingsSegmented` renders it as their own
-   `disabled` rather than as a fade a host paints over them. A faded parent
-   leaves every segment focusable and announcing as ENABLED, which is the defect
-   the 2026-08-06 audit and card 66034 closed; it is also why the prop had to
-   come here at all, since nothing outside this component owns those buttons.
-
-   `--es-disabled` is the shell's existing token for exactly this state, already
-   worn by the drill row's quiet glyph. Nothing here is a literal, and nothing
-   here removes anything: the track keeps its border and the pressed chip keeps
-   its lift, so the strip still READS as a strip with an answer in it. */
-.es-seg:disabled { cursor: not-allowed; color: var(--es-disabled); }
-
-/* The chosen one stays the loudest thing on the track. It is still the
-   merchant's answer — a pressed chip faded to the same grey as the ones beside
-   it stops saying which answer that was.
-
-   GREY, NOT BLUE, AND NOT FADED (2026-10-06). The live chip is the accent now,
-   and blue is the colour that says "this is in force" — so an answer out of
-   force drops to `--es-muted`. The arithmetic decided the rest: the blue chip
-   faded to half over the panel is 2.04:1 against its faded track, under the
-   3:1 a state cue needs. `--es-muted` with no fade is 4.39:1 on the track and
-   its white word 4.83:1. That is why the whole strip no longer fades (below):
-   any fade took this chip under 3:1 again.
-
-   ⚠️ THE WORD COLOUR BELONGS TO THE CHIP'S GROUND, NOT TO THE TRACK (card
-   66302): a label written for one ground went unreadable when the ground moved
-   under it. So the ground and the word are declared together, here. */
-.es-seg:disabled.is-active {
-  background: var(--es-muted);
-  color: var(--es-on-accent);
-}
-
-/* And none of them answers the pointer any more: the hover rule above would
-   otherwise keep lighting a segment that cannot be chosen. */
-.es-seg:disabled:hover:not(.is-active) { color: var(--es-disabled); }
-
-/* THE WHOLE CONTROL, when every option went at once. Every button is then
-   `:disabled`, so the quiet words are already `--es-disabled` and the chosen
-   chip is already grey — the strip says "out of force" through them.
-
-   IT USED TO FADE TO 0.5, and that fade is gone on purpose (2026-10-06). An
-   opacity on the track composites the chosen chip with it, and no chip colour
-   the ruling allows survives that above 3:1: blue faded is 2.04:1, the grey
-   above faded is about 2:1. The chip is the one thing a disabled strip must
-   still say clearly, so the fade went rather than the chip. */
-.es-segs[data-disabled] { cursor: not-allowed; }
+.es-segs.is-measured > button { gap: 0; }
+.es-segs.is-measured > button:has(.es-seg-icon) .es-seg-word { margin-left: clamp(0px, var(--es-fit-room-all), var(--es-fit-word-gap)); }
+.es-segs.is-measured > button[aria-pressed='true']:has(.es-seg-icon) .es-seg-word { margin-left: clamp(0px, var(--es-fit-room-chosen), var(--es-fit-word-gap)); }
+
+/* ── the chosen segment ──────────────────────────────────────────────────────
+   The shell's Segmented draws it (efficient-shell 4.164.0): an inset 1px
+   `--ink-faint` ring on the white chip, 3:1 and more on the track in both
+   themes (WCAG 1.4.11; `tests/panel-chip-contrast.test.ts`). It supersedes the
+   accent fill this sheet painted as a SHELL GAP (Lewis, 2026-10-06): under
+   harness UI-24 the shell's design wins, and the gap is closed. */
+
+/* ── a segment out of force (card 66303) ─────────────────────────────────────
+   The chip out of force is the shell's (its own `disabled`, dimmed); the whole
+   control out of force says so on its fit box, for the pointer. */
+.es-segs-fit[data-disabled] { cursor: not-allowed; }
 
 /* ── a group: the soft pill row that folds ─────────────────────────────────── */
 
@@ -734,7 +593,10 @@
   color: var(--es-text);
   background: var(--es-hover);
   border-radius: var(--es-row-radius);
-  padding: 8px 12px;
+  /* Its words start where a tree row's do: the shell's `TreeRow` pads `px-2`,
+     two of the shell's `--spacing` steps, and so does this (the Layers panel
+     drew a heading at 12px over rows at 8px: two text columns). */
+  padding: 8px calc(2 * var(--spacing));
   /* A heading needs more air above it than the settings it heads have between
      them (38px), or it reads as one more row. Floored on `--es-row-gap` so it
      rises with the rest of the panel (card 66203). */
@@ -889,7 +751,8 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
    the part inside a component of its own (it reads a live value through a
    hook) is invisible to SettingsField, and without this its label stayed grey
    beside a Reset — measured on the website's section Width row. */
-.es-field:has(> .es-field-head > .es-default-reset.is-changed) > .es-field-head .es-field-label {
+.es-field:has(> .es-field-head > .es-default-reset.is-changed) > .es-field-head .es-field-label,
+.es-field:has(> .es-field-head > span > .es-default-reset.is-changed) > .es-field-head .es-field-label {
   color: var(--es-accent-text);
 }
 
@@ -950,7 +813,7 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
   margin: 0;
   padding: 0;
   border: 0;
-  border-radius: 6px;
+  border-radius: var(--radius-md);
   background: transparent;
   color: var(--es-muted);
 }
@@ -983,14 +846,18 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
   outline-offset: 1px;
 }
 
-.es-field-name + .es-default-reset { margin-left: auto; }
+/* A pressable part explains itself in the shell's Tooltip, whose wrapper is
+   then the head's item: the rules below place either. */
+.es-field-name + .es-default-reset,
+.es-field-name + span:has(> .es-default-reset) { margin-left: auto; }
 
 /* THE GREY VALUE IS THE "DEFAULT" WORD NOW (option E): a row whose slot is
    empty draws its value grey, and the value takes the text colour once the
    setting is changed. Scoped to rows that carry the part, so a value on a row
    with nothing to reset keeps its colour. */
 .es-field:has(> .es-field-head > span.es-default-reset) .es-field-value { color: var(--es-muted); }
-.es-field-value + .es-default-reset { margin-left: -4px; }
+.es-field-value + .es-default-reset,
+.es-field-value + span:has(> .es-default-reset) { margin-left: -4px; }
 
 /* A boolean row is ONE line (card 8801, Option A). The switch rides the label
    line in the `action` slot, so there is no control row under it — and with no
@@ -1007,73 +874,10 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
 .es-field.is-inline { margin-top: max(var(--es-row-gap), var(--es-rhythm-between-tight)); }
 .es-field.is-inline .es-field-head { margin-bottom: 0; }
 
-/* ── the switch: one yes-or-no shape, both editors ─────────────────────────── */
-
-.es-switch {
-  appearance: none;
-  -webkit-appearance: none;
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  flex: none;
-  position: relative;
-  width: 34px;
-  height: 20px;
-  border-radius: 999px;
-  background: var(--es-toggle-off);
-  cursor: pointer;
-  transition: background 0.15s ease;
-}
-
-/* The knob. `box-sizing` is load-bearing, not tidiness: the locked knob below
-   takes a 1px border, and under content-box that border would grow it to 18px
-   and eat the 2px gap the whole shape is built on. */
-.es-switch::after {
-  content: '';
-  box-sizing: border-box;
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: var(--es-knob);
-  /* The knob has to lift off the track, and the shadow is a plain token on
-     purpose. A softer mix reads slightly better, but if color-mix() ever fails
-     to parse the WHOLE declaration drops and the knob goes flat with no
-     warning — not a risk worth carrying in a leaf both editors render
-     thousands of times for the sake of a 1px shadow. */
-  box-shadow: 0 1px 2px var(--es-input-border);
-  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.3, 1);
-}
-
-/* On is the accent — the same blue as an active tab, so the panel keeps ONE
-   accent. The travel is 14px: 34 track − 16 knob − 2 gap − 2 gap. */
-.es-switch[aria-checked='true'] { background: var(--es-accent); }
-.es-switch[aria-checked='true']::after { transform: translateX(14px); }
-
-.es-switch:hover:not(:disabled) { filter: brightness(0.96); }
-
-.es-switch:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--es-accent-ring);
-}
-
-/* Held down: the knob stretches the way a physical one would.
-
-   ON, it must stretch LEFT. The knob is 16px at translateX(14px), so growing it
-   to 19px in place would put its right edge at 2 + 14 + 19 = 35px inside a 34px
-   track and poke it past the round end. Pulling the travel back to 11px lands
-   the right edge on 32 and keeps the 2px gap on both sides. */
-.es-switch:active:not(:disabled)::after { width: 19px; }
-.es-switch[aria-checked='true']:active:not(:disabled)::after { transform: translateX(11px); }
-
-/* Locked. Still readable as on or off, but flat and grey, and the knob trades
-   its shadow for a hairline so it does not look pressable. */
-.es-switch:disabled { background: var(--es-divider); cursor: not-allowed; }
-.es-switch:disabled[aria-checked='true'] { background: var(--es-input-border); }
-.es-switch:disabled::after { box-shadow: none; border: 1px solid var(--es-divider); }
+/* ── the switch: one yes-or-no shape, both editors ─────────────────────────
+   The shell's `Switch` since efficient-easel issue 199 step 4 (harness UI-24): its
+   track, knob, on colour, focus ring and locked look are the kit's. `.es-switch`
+   stays on its wrapper as a name a host's layout may hold. */
 
 /* ── a drill-in row: name, preview, chevron (card 8819) ────────────────────── */
 
@@ -1215,14 +1019,10 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
 .es-drill-chev::before { content: '\203A'; }
 
 @media (prefers-reduced-motion: reduce) {
-  .es-tab,
-  .es-seg,
   /* `button.` and not `.es-group-head`: the transition it cancels is declared
      on `button.es-group-head`, and a plainer selector would lose to it. */
   button.es-group-head,
-  .es-drill,
-  .es-switch,
-  .es-switch::after { transition: none; }
+  .es-drill { transition: none; }
 }
 
 /* ── SettingsPlacement — the 3×3 position grid ─────────────────────────────
@@ -1246,23 +1046,20 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
   padding: 4px;
   background: var(--es-track-bg);
   border: 1px solid var(--es-input-border);
-  border-radius: 9px;
+  border-radius: var(--radius-lg);
 }
-.es-placement-cell {
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  padding: 0;
+/* Each cell is the shell's IconButton in its Tooltip's wrapper: the wrapper is
+   the grid's item, and the button fills it. The button's own look (hover,
+   focus ring, disabled) is the shell's. */
+.es-placement > span,
+.es-corners > span {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.12s;
 }
-.es-placement-cell:hover { background: var(--es-hover); }
-/* The dot is the whole of the cell's state: a lit cell grows it and paints it
-   the accent. Size and colour move together so the chosen square reads at a
-   glance and still reads for someone who cannot separate the two colours. */
+.es-placement-cell,
+.es-corners-cell {
+  width: 100%;
+  height: 100%;
+}
 .es-placement-dot {
   width: 7px;
   height: 7px;
@@ -1294,9 +1091,11 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
 /* A position the caller has closed. It keeps its square — nine that became
    eight would read as a broken control — and stops answering the pointer; the
    reason is on the button's `title`. */
-.es-placement-cell.is-off { cursor: default; }
-.es-placement-cell.is-off:hover { background: transparent; }
 .es-placement-cell.is-off .es-placement-dot { opacity: 0.22; }
+/* Off with a reason is `aria-disabled` (the keyboard reaches it and hears why),
+   so the pointer is told here what `:disabled` used to tell it. */
+.es-placement-cell.is-off,
+.es-corners-cell.is-off { cursor: not-allowed; }
 /* A cell that draws a GLYPH instead of its dot — the Scrolling Bar's
    `Scroll direction`, where four live cells mean a direction of travel and a
    dot cannot say which way. It follows the cell through every state the dot
@@ -1326,12 +1125,7 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
 }
 .es-placement-cell.is-off .es-placement-icon { opacity: 0.22; }
 /* Keyboard focus is visible, like every other control in this panel. */
-.es-placement-cell:focus-visible {
-  outline: 2px solid var(--es-accent-ring);
-  outline-offset: 1px;
-}
 @media (prefers-reduced-motion: reduce) {
-  .es-placement-cell,
   .es-placement-icon,
   .es-placement-dot { transition: none; }
 }
@@ -1353,7 +1147,7 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
   height: 96px;
   padding: 4px;
   background: var(--es-track-bg);
-  border-radius: 8px;
+  border-radius: var(--radius-lg);
 }
 /* The BOX the four corners belong to. Inset so the cells sit ON its corners
    rather than beside it, dashed so it reads as the outline of the thing being
@@ -1366,23 +1160,6 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
   opacity: 0.45;
   pointer-events: none;
 }
-.es-corners-cell {
-  position: relative;
-  border: none;
-  background: transparent;
-  border-radius: 6px;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.es-corners-cell:hover { background: var(--es-hover); }
-/* THE MARK IS THE ANSWER, drawn rather than labelled. Each cell holds a square
-   whose MATCHING corner is rounded when the corner is on and square when it is
-   off, so the state is carried by SHAPE as well as by fill — which is what
-   keeps it readable for someone who cannot separate the accent from the
-   ground. The per-corner radius is set by the four rules below. */
 .es-corners-mark {
   width: 18px;
   height: 18px;
@@ -1400,21 +1177,15 @@ button.es-group-head:hover { background: var(--es-chip-bg); }
   background: var(--es-accent);
   opacity: 1;
 }
-.es-corners-tl.is-on .es-corners-mark { border-radius: 8px 0 0 0; }
-.es-corners-tr.is-on .es-corners-mark { border-radius: 0 8px 0 0; }
-.es-corners-br.is-on .es-corners-mark { border-radius: 0 0 8px 0; }
-.es-corners-bl.is-on .es-corners-mark { border-radius: 0 0 0 8px; }
+.es-corners-tl.is-on .es-corners-mark { border-radius: var(--radius-lg) 0 0 0; }
+.es-corners-tr.is-on .es-corners-mark { border-radius: 0 var(--radius-lg) 0 0; }
+.es-corners-br.is-on .es-corners-mark { border-radius: 0 0 var(--radius-lg) 0; }
+.es-corners-bl.is-on .es-corners-mark { border-radius: 0 0 0 var(--radius-lg); }
 /* A corner the caller has closed. It keeps its cell — four that became three
    would read as a broken control — and stops answering the pointer; the reason
    is on the button's `title`. */
-.es-corners-cell.is-off { cursor: default; }
-.es-corners-cell.is-off:hover { background: transparent; }
 .es-corners-cell.is-off .es-corners-mark { opacity: 0.22; }
 /* Keyboard focus is visible, like every other control in this panel. */
-.es-corners-cell:focus-visible {
-  outline: 2px solid var(--es-accent-ring);
-  outline-offset: 1px;
-}
 @media (prefers-reduced-motion: reduce) {
   .es-corners-mark { transition: none; }
 }