editor-shell 0.22.0 → 0.24.0

package/dist/{chunk-EZKBKK3E.js → chunk-VEXTYAMU.js}

@@ -22,7 +22,7 @@ var shellTokens = {
   previewBg: "#f3f4f6",
   /** `--es-panel` — raised cards / panels. */
   panel: "#ffffff",
-  /** `--es-raised` — active seg / chip. */
+  /** `--es-raised` — a lifted surface. NOT the active chip since card 66302. */
   raised: "#ffffff",
   /** `--es-topbar-bg`. */
   topbarBg: "#ffffff",
@@ -205,5 +205,5 @@ var puckAzureRamp = {
 };
 
 export { puckAzureRamp, shellCssVars, shellTokens };
-//# sourceMappingURL=chunk-EZKBKK3E.js.map
-//# sourceMappingURL=chunk-EZKBKK3E.js.map
+//# sourceMappingURL=chunk-VEXTYAMU.js.map
+//# sourceMappingURL=chunk-VEXTYAMU.js.map

package/dist/chunk-VEXTYAMU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shell/tokens.ts"],"names":[],"mappings":"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","file":"chunk-VEXTYAMU.js","sourcesContent":["/**\n * Editor SHELL design tokens — the ONE source both editors' chrome converge on.\n *\n * Where `rail/tokens.ts` owns the slim icon-rail, this owns the rest of the\n * editor chrome theme: accent, surfaces, fields, text, lines, chips, named\n * chrome literals, danger/warning/success, radii, gap, shadows and font. Every\n * value bar one is taken verbatim from the storefront editor's `--sf-*` block\n * (`efficient-shop/components/storefront-editor.css`), the visual reference the\n * campaign designer (`--cd-*`) and the storefront's own TS mirror (`tk`) had\n * each re-copied. After card 66024 they all resolve to these values instead.\n * The one exception is `success`, which that block has no counterpart for; see\n * its own note below.\n *\n * Exposed BOTH ways, per the same value (mirrors the rail):\n *   - `shellTokens` — this JS object, for code that needs the numbers/colours\n *     (e.g. the storefront's `floating-editor/tokens.ts` inline-style mirror);\n *   - `shell.css` — the stylesheet, which declares the identical values as CSS\n *     custom properties on `.es-editor` (names listed in `shellCssVars`).\n *\n * Numeric fields are pixel magnitudes (unitless) so they compose in code; the\n * CSS applies the `px`. Both editing surfaces are LIGHT only (no dark mode), so\n * there is a single palette here — no dark counterpart.\n */\nexport const shellTokens = {\n  // ── Accent (react-os-shell blue) ──────────────────────────────────────────\n  /** `--es-accent` — blue-600. */\n  accent: '#2563eb',\n  /** `--es-accent-tint` — blue-50. */\n  accentTint: '#eff6ff',\n  /** `--es-accent-tint-strong` — blue-100. */\n  accentTintStrong: '#dbeafe',\n  /** `--es-accent-text` — blue-700. */\n  accentText: '#1d4ed8',\n  /** `--es-accent-ring` — focus ring wash. */\n  accentRing: 'rgba(37, 99, 235, 0.25)',\n  /** `--es-accent-shadow` — accent button shadow. */\n  accentShadow: 'rgba(37, 99, 235, 0.35)',\n  /** `--es-on-accent` — text/icon over the solid accent. */\n  onAccent: '#ffffff',\n\n  // ── Surfaces (cool gray ramp) ─────────────────────────────────────────────\n  /** `--es-app-bg` — gray-50, sunken canvas. */\n  appBg: '#f9fafb',\n  /** `--es-preview-bg` — gray-100, preview well. */\n  previewBg: '#f3f4f6',\n  /** `--es-panel` — raised cards / panels. */\n  panel: '#ffffff',\n  /** `--es-raised` — a lifted surface. NOT the active chip since card 66302. */\n  raised: '#ffffff',\n  /** `--es-topbar-bg`. */\n  topbarBg: '#ffffff',\n  /** `--es-frame-bg` — device \"paper\" behind the preview iframe. */\n  frameBg: '#ffffff',\n  /** `--es-hover` — gray-100 row / icon hover. */\n  hover: '#f3f4f6',\n  /** `--es-hatch` — 45° upload-slot texture. */\n  hatch: 'rgba(0, 0, 0, 0.018)',\n  /** `--es-addcard-veil` — add-section card hover wash. */\n  addcardVeil: 'rgba(248, 249, 250, 0.66)',\n\n  // ── Fields ────────────────────────────────────────────────────────────────\n  /** `--es-field-bg`. */\n  fieldBg: '#ffffff',\n  /** `--es-track-bg` — gray-100 segmented / search track. */\n  trackBg: '#f3f4f6',\n  /** `--es-input-border` — gray-300. */\n  inputBorder: '#d1d5db',\n  /** `--es-field-text` — gray-800. */\n  fieldText: '#1f2937',\n  /** `--es-field-placeholder` — gray-400. */\n  fieldPlaceholder: '#9ca3af',\n  /** `--es-knob` — toggle knob. */\n  knob: '#ffffff',\n\n  // ── Text ────────────────────────────────────────────────────────────────\n  /** `--es-text` — gray-900. */\n  text: '#111827',\n  /** `--es-text-strong` — gray-950 active labels. */\n  textStrong: '#030712',\n  /** `--es-text-secondary` — gray-700. */\n  textSecondary: '#374151',\n  /** `--es-muted` — gray-500. */\n  muted: '#6b7280',\n  /** `--es-icon` — gray-500 icon buttons. */\n  icon: '#6b7280',\n  /** `--es-disabled` — gray-400 disabled / faint glyphs. */\n  disabled: '#9ca3af',\n\n  // ── Lines / chips / buttons ──────────────────────────────────────────────\n  /** `--es-divider` — gray-200. */\n  divider: '#e5e7eb',\n  /** `--es-line` — gray-200 hairlines. */\n  line: '#e5e7eb',\n  /** `--es-btn-border` — gray-300. */\n  btnBorder: '#d1d5db',\n  /** `--es-btn-text` — gray-700. */\n  btnText: '#374151',\n  /** `--es-chip-bg` — gray-100. */\n  chipBg: '#f3f4f6',\n  /** `--es-chip-fg` — gray-500. */\n  chipFg: '#6b7280',\n\n  // ── Named chrome literals ─────────────────────────────────────────────────\n  /** `--es-brand-square` — gray-900 wordmark square. */\n  brandSquare: '#111827',\n  /** `--es-device-border` — gray-200 tablet/mobile frame. */\n  deviceBorder: '#e5e7eb',\n  /** `--es-toast-bg` — gray-900 dark chip / seam pill. */\n  toastBg: '#111827',\n  /** `--es-toggle-off` — gray-300 toggle track. */\n  toggleOff: '#d1d5db',\n  /** `--es-scrollbar` — gray-300. */\n  scrollbar: '#d1d5db',\n  /** `--es-scrollbar-hover` — gray-400. */\n  scrollbarHover: '#9ca3af',\n\n  // ── Danger / warning / success (shell red / amber / green) ────────────────\n  /** `--es-danger` — red-600. */\n  danger: '#dc2626',\n  /** `--es-danger-strong` — red-700. */\n  dangerStrong: '#b91c1c',\n  /** `--es-danger-tint` — red-50. */\n  dangerTint: '#fef2f2',\n  /** `--es-warning` — amber-700. */\n  warning: '#b45309',\n  /** `--es-preview-tint` — amber-100 \"Preview\" pill. */\n  previewTint: '#fef3c7',\n  /**\n   * `--es-success` — green-700. THE ONE VALUE HERE WITH NO `--sf-*` BEHIND IT:\n   * the storefront editor's block has a red and an amber and no green, and card\n   * 8802.g needs one for a green tick. So it is picked to sit with the block\n   * rather than invented next to it — the same Tailwind ramp every other colour\n   * in this file comes from, at the 700 step `--es-warning` already sits on.\n   * 700 and not 600 for the reason amber went there: it is the darkest step\n   * still plainly the hue, and it clears WCAG AA (5.0:1) on the shell's white\n   * panels, so a tick may carry a label without needing a second token.\n   */\n  success: '#15803d',\n\n  // ── Radii / shape / gap ───────────────────────────────────────────────────\n  /** `--es-panel-radius`. */\n  panelRadius: 12,\n  /** `--es-row-radius`. */\n  rowRadius: 8,\n  /** `--es-field-radius`. */\n  fieldRadius: 6,\n  /** `--es-panel-gap` — inter-pane gutter + outer frame padding, ONE token. */\n  panelGap: 10,\n\n  // ── Shadows ───────────────────────────────────────────────────────────────\n  /** `--es-panel-shadow`. */\n  panelShadow: '0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)',\n  /** `--es-topbar-shadow`. */\n  topbarShadow: '0 1px 3px rgba(0, 0, 0, 0.06)',\n  /**\n   * `--es-raised-shadow` — what a small surface sitting ON another one casts:\n   * the chip in the settings tab strip's track (card 66138). Tighter and darker\n   * than `panelShadow`, which is a whole panel floating over the app; this one\n   * has to read across 3px of track without looking like a second panel.\n   */\n  raisedShadow: '0 1px 2px rgba(16, 24, 40, 0.1)',\n\n  // ── Type ──────────────────────────────────────────────────────────────────\n  /** `--es-font` — system sans stack (also fed to `--puck-font-family`). */\n  font: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif',\n} as const;\n\nexport type ShellTokens = typeof shellTokens;\n\n/**\n * The CSS custom-property name behind each `shellTokens` key. `shell.css` sets\n * these on `.es-editor`; override any of them on (or above) the editor root to\n * re-theme without shipping new CSS. The `shell-tokens.test.ts` parity gate\n * proves this map, `shellTokens` and `shell.css` never drift apart.\n */\nexport const shellCssVars: Record<keyof ShellTokens, string> = {\n  accent: '--es-accent',\n  accentTint: '--es-accent-tint',\n  accentTintStrong: '--es-accent-tint-strong',\n  accentText: '--es-accent-text',\n  accentRing: '--es-accent-ring',\n  accentShadow: '--es-accent-shadow',\n  onAccent: '--es-on-accent',\n  appBg: '--es-app-bg',\n  previewBg: '--es-preview-bg',\n  panel: '--es-panel',\n  raised: '--es-raised',\n  topbarBg: '--es-topbar-bg',\n  frameBg: '--es-frame-bg',\n  hover: '--es-hover',\n  hatch: '--es-hatch',\n  addcardVeil: '--es-addcard-veil',\n  fieldBg: '--es-field-bg',\n  trackBg: '--es-track-bg',\n  inputBorder: '--es-input-border',\n  fieldText: '--es-field-text',\n  fieldPlaceholder: '--es-field-placeholder',\n  knob: '--es-knob',\n  text: '--es-text',\n  textStrong: '--es-text-strong',\n  textSecondary: '--es-text-secondary',\n  muted: '--es-muted',\n  icon: '--es-icon',\n  disabled: '--es-disabled',\n  divider: '--es-divider',\n  line: '--es-line',\n  btnBorder: '--es-btn-border',\n  btnText: '--es-btn-text',\n  chipBg: '--es-chip-bg',\n  chipFg: '--es-chip-fg',\n  brandSquare: '--es-brand-square',\n  deviceBorder: '--es-device-border',\n  toastBg: '--es-toast-bg',\n  toggleOff: '--es-toggle-off',\n  scrollbar: '--es-scrollbar',\n  scrollbarHover: '--es-scrollbar-hover',\n  danger: '--es-danger',\n  dangerStrong: '--es-danger-strong',\n  dangerTint: '--es-danger-tint',\n  warning: '--es-warning',\n  previewTint: '--es-preview-tint',\n  success: '--es-success',\n  panelRadius: '--es-panel-radius',\n  rowRadius: '--es-row-radius',\n  fieldRadius: '--es-field-radius',\n  panelGap: '--es-panel-gap',\n  panelShadow: '--es-panel-shadow',\n  topbarShadow: '--es-topbar-shadow',\n  raisedShadow: '--es-raised-shadow',\n  font: '--es-font',\n};\n\n/**\n * Puck's own accent ramp + font, re-tinted to the shell blue. Puck reads these\n * fixed variable names (`--puck-color-azure-NN`, `--puck-font-family`) directly,\n * so they are NOT part of the `--es-*` set — but they had been copied verbatim\n * into BOTH editors' CSS, so `shell.css` now declares them once on `.es-editor`.\n * Kept here as the JS record so the parity gate can prove `shell.css` matches.\n */\nexport const puckAzureRamp: Record<string, string> = {\n  '--puck-color-azure-01': '#172554',\n  '--puck-color-azure-02': '#1e3a8a',\n  '--puck-color-azure-03': '#1d4ed8',\n  '--puck-color-azure-04': '#2563eb',\n  '--puck-color-azure-05': '#3b82f6',\n  '--puck-color-azure-06': '#60a5fa',\n  '--puck-color-azure-07': '#93c5fd',\n  '--puck-color-azure-08': '#bfdbfe',\n  '--puck-color-azure-09': '#dbeafe',\n  '--puck-color-azure-10': '#eff6ff',\n  '--puck-color-azure-11': '#f5f9ff',\n  '--puck-color-azure-12': '#fafcff',\n};\n"]}

package/dist/index.js

@@ -1,5 +1,5 @@
 export { EditorRail, EditorRailButton, railCssVars, railTokens } from './chunk-HYOACICE.js';
 export { AddIcon, LayersIcon, MediaIcon, PageIcon as PagesIcon, SitemapIcon, StylesIcon } from './chunk-V7JPZX2L.js';
-export { puckAzureRamp, shellCssVars, shellTokens } from './chunk-EZKBKK3E.js';
+export { puckAzureRamp, shellCssVars, shellTokens } from './chunk-VEXTYAMU.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/panel/index.d.ts

@@ -97,16 +97,116 @@ interface SettingsSegmentedFit {
      */
     widestLabelPx: number;
 }
-/** One option in a segmented control. */
-interface SettingsSegmentedOption {
-    /** The VALUE this option writes, as `value` and `onChange` name it. */
-    id: string;
+/**
+ * WHAT AN OPTION IS CALLED, and the one rule that governs it: EVERY option has a
+ * name, and the name is a string (card 66303).
+ *
+ * `label` is spent three ways — the visible mark, `title`, and `aria-label` — so
+ * it cannot simply be widened to a `ReactNode` and left there: a node reaches
+ * the two attributes as `[object Object]`, which is a tooltip that says nothing
+ * and a screen reader that says worse. Nor can it be split into `icon` + `label`
+ * and the word left to fall away at a threshold: both spans render, so a strip
+ * whose mark IS its label would draw the mark AND the word beside it.
+ *
+ * So the two cases are told apart in the type, and each carries its own name:
+ *
+ *   a WORDED option  `{ label: 'Left' }` — the word is the name. `title` is
+ *                    optional and almost never given; this is every option that
+ *                    exists today and none of them changes.
+ *   a DRAWN option   `{ label: <AlignGlyph/>, title: 'Left' }` — the mark cannot
+ *                    be read aloud, so `title` is REQUIRED and is the name.
+ *
+ * The part panel's Alignment row is the case that forced it: three alignments
+ * have no honest three-letter word between them, so the label is the rule
+ * itself. Case is the same shape one step milder — Aa / AA / aa are letterforms,
+ * not the words Normal / Uppercase / Lowercase that name them. Passing `title`
+ * beside a WORDED label is allowed and overrides the word, which is what a
+ * strip whose words are abbreviations wants.
+ *
+ * ── NO CONSUMER TODAY, AND CARRIED ON PURPOSE ────────────────────────────────
+ *
+ * Written down so the next reader does not find this unused and tidy it away.
+ * The rows above stopped needing it while this was being built: card 66246
+ * (`efficient-shop` 151afa212, merged 2026-08-31) moved the part panel's three
+ * tables onto `icon` + a real word — `{ id: "left", label: "Left", icon:
+ * <AlignLeftIcon/> }` — on the owner's ruling that an option says its name AND
+ * draws its glyph. Every `label` in the shop is now a string, and this arm has
+ * no caller anywhere. That is measured on merged main, not on a pending PR.
+ *
+ * It stays because it is the shape THE PACKAGE NEXT DOOR ALREADY USES.
+ * `react-os-shell` ships its own `Segmented`, and its `SegmentedOption` has
+ * carried `label: ReactNode` all along. Identical at the two copies installed on
+ * this desk — 4.63.0 under `editor-shell`, 4.67.0 under `efficient-shop`:
+ *
+ *     interface SegmentedOption<T extends string = string> {
+ *       value: T; label: ReactNode; icon?: ReactNode; disabled?: boolean;
+ *     }
+ *
+ * A shared control that refuses a shape its sibling accepts is a fork one level
+ * down, which is the fault this whole family of cards exists to stop. Matching
+ * it costs nothing while nothing calls it.
+ *
+ * ── WHERE THE TWO SHELLS CONVERGE, AND WHERE THEY DO NOT ─────────────────────
+ *
+ * Read this before repeating "the two shells are converged", because it is only
+ * true of three fields out of four, and the fourth is the one a caller touches
+ * most:
+ *
+ *                     react-os-shell          editor-shell
+ *     the label       label: ReactNode        label: ReactNode     converged
+ *     the glyph       icon?: ReactNode        icon?: ReactNode     converged
+ *     out of force    disabled?: boolean      disabled?: boolean   converged
+ *     ─────────────────────────────────────────────────────────────────────────
+ *     the VALUE       value: T                id: V                NOT converged
+ *                     T extends string        V unconstrained
+ *
+ * BOTH halves of that last row are deliberate.
+ *
+ * `id` and not `value`, because this field has been called `id` since the type
+ * existed and renaming it would move something for every caller already using
+ * it — which is the one thing card 66303 was not allowed to do.
+ *
+ * `V` UNCONSTRAINED and not `T extends string`, because the shop stores a
+ * choice as a boolean: `reverse` at `efficient-shop/lib/puck/config.tsx:6747` is
+ * `false` = image left and `true` = image right on every published page across
+ * every tenant. `T extends string` cannot hold it, and giving that row the house
+ * strip by storing "left"/"right" would be a migration of live customer data
+ * rather than a control change. So on the value type this package is the WIDER
+ * of the two, not the poorer — the opposite of the direction the rest of this
+ * note runs.
+ *
+ * ── AND WHERE WE DELIBERATELY GO FURTHER ─────────────────────────────────────
+ *
+ * That sibling declaration has NO name field beside its node label. A drawing
+ * that cannot name itself is exactly the defect the 2026-08-06 audit closed on
+ * the shop's strip, so the `title` here is REQUIRED — a guarantee, not a
+ * feature. The union makes a nameless drawing unconstructable rather than a
+ * documented risk; the sibling's shape permits one.
+ *
+ * One more thing that declaration settles, recorded because it was argued: its
+ * `disabled` is PER OPTION and it has no strip-level one at all. That is the
+ * independent support for the per-option field on
+ * `SettingsSegmentedOptionBase` — the sibling has shipped exactly that.
+ */
+type SettingsSegmentedLabel = {
+    label: string;
+    title?: string;
+} | {
+    label: ReactNode;
+    title: string;
+};
+interface SettingsSegmentedOptionBase<V = string> {
     /**
-     * What the option is CALLED — and its name at every width, exactly as a tab's
-     * label is. It rides on the button as `title` and `aria-label` in every
-     * state, so a strip reduced to glyphs still names all of its options.
+     * The VALUE this option writes, as `value` and `onChange` name it.
+     *
+     * `V` and not `string` since card 66303. A weight is a NUMBER — the storefront
+     * part panel's row is `[400, 500, 600, 700]` — and "Image side" is a BOOLEAN
+     * on every published page across every tenant, so giving those rows the house
+     * strip by storing "left"/"right" would be a migration of live customer data
+     * rather than a control change. `V` defaults to `string`, so every existing
+     * declaration means exactly what it did.
      */
-    label: string;
+    id: V;
     /**
      * A 16px glyph from `editor-shell/icons`, so the option can spend less width
      * than its word needs when the panel is dragged narrow.
@@ -115,9 +215,38 @@ interface SettingsSegmentedOption {
      * has nothing to fall back to, so it keeps its word at every width. Pass
      * glyphs for ALL the options or none of them — half words and half glyphs
      * reads as a rendering fault, not as a decision.
+     *
+     * NOT the same thing as a DRAWN label. An `icon` is a glyph BESIDE the word,
+     * and the word is what it falls back from; a drawn label replaces the word
+     * altogether and is named by its `title`. An option wanting the second one
+     * puts the mark in `label`, not here.
      */
     icon?: ReactNode;
+    /**
+     * This choice exists but cannot be taken right now.
+     *
+     * Renders the button's own `disabled`, not a fade over it, and that is the
+     * whole point of it living here: this component owns the `<button>`, so a host
+     * dimming a parent instead leaves every segment focusable and announcing as
+     * ENABLED — the exact defect the 2026-08-06 audit and card 66034 closed.
+     *
+     * Dimmed, NEVER hidden, and the pressed segment still reads as pressed: the
+     * merchant's saved answer is still their answer, it simply is not in force.
+     * Defaults absent, so nothing an existing caller renders moves.
+     *
+     * NO CONSUMER TODAY, and it is carried on purpose rather than by oversight —
+     * so the next reader does not find it unused and tidy it away. The case it is
+     * for is one row away: card 66246 draws Weight as four letterform glyphs, and
+     * a merchant's typeface may only carry two real weights (measured there —
+     * Helvetica, Georgia, Verdana and Impact render Regular and Medium as the same
+     * letter, and Semibold and Bold as the same letter). That is a choice the
+     * strip CAN offer and the font cannot honour, which is this field and not the
+     * strip-level one beside it.
+     */
+    disabled?: boolean;
 }
+/** One option in a segmented control. */
+type SettingsSegmentedOption<V = string> = SettingsSegmentedOptionBase<V> & SettingsSegmentedLabel;
 /**
  * A SEGMENTED CONTROL — the tab strip's chip, with the other promise.
  *
@@ -135,11 +264,24 @@ interface SettingsSegmentedOption {
  * plain tab-stopped buttons would promise a keyboard that is not there, which
  * is the same defect as `role="tab"` over no panel.
  */
-interface SettingsSegmentedProps {
-    options: SettingsSegmentedOption[];
-    /** The `id` of the option currently set. */
-    value: string;
-    onChange: (next: string) => void;
+interface SettingsSegmentedProps<V = string> {
+    /**
+     * `readonly` so a panel may declare its option table `as const` and keep the
+     * literal value types — which is how every one of them is already written.
+     * A widening only: a mutable array still binds.
+     */
+    options: readonly SettingsSegmentedOption<V>[];
+    /**
+     * The `id` of the option currently set.
+     *
+     * A value matching NO option presses nothing, and that is a state a caller
+     * relies on rather than an edge: the part panel hands `""` when the selection
+     * is mixed across several parts. The match is an EQUALITY and never a
+     * truthiness test — `false` is a real answer ("image left"), and `value ||
+     * fallback` collapses it into the other one.
+     */
+    value: V;
+    onChange: (next: V) => void;
     /**
      * What the group is called — "Weight", "Alignment". Required: a group of
      * pressed buttons with no name is a set a screen reader cannot introduce.
@@ -152,6 +294,22 @@ interface SettingsSegmentedProps {
      * this too, or the glyphs have nothing to fall back at.
      */
     fit?: SettingsSegmentedFit;
+    /**
+     * The whole strip exists but cannot apply right now, because another setting
+     * has taken the decision away — the Header's "Text colour at the top" under a
+     * pinned Background (card 66216).
+     *
+     * Every segment goes out of force AND the track says so, so the control goes
+     * quiet as one thing rather than as three identically faded chips. Per-option
+     * `disabled` is the other half of this: use that for a choice the strip cannot
+     * offer, and this for a strip the panel cannot offer.
+     *
+     * 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. Defaults false, so every existing caller renders byte for byte as it
+     * did.
+     */
+    disabled?: boolean;
     className?: string;
 }
 interface SettingsGroupProps {
@@ -406,8 +564,26 @@ declare function SettingsTabs({ items, activeId, onSelect, ariaLabel, className,
  *
  * Without `fit` nothing drops — an unmeasured strip keeps every word at every
  * width, which is exactly what a strip with no glyphs already does.
+ *
+ * ── WHAT CARD 66303 WIDENED, AND WHY IT HAD TO BE HERE ───────────────────────
+ *
+ * `efficient-shop` draws its own `Segmented` beside this one and could not stop:
+ * four things twelve live call sites need were missing here. Generic `V`
+ * (weights are numbers, "image side" is a boolean on every published page), a
+ * DRAWN label with its own `title`, and `disabled` — on one option or on the
+ * strip.
+ *
+ * The last two could not have been bridged by a wrapper the shop writes, which
+ * is the reason they are props and not a consumer's problem. This component
+ * renders the `<button>`s, so nothing outside it can disable them; dimming a
+ * parent instead leaves them focusable and announcing as ENABLED, which is the
+ * regression the 2026-08-06 audit and card 66034 closed. And `label` is spent as
+ * `title` and `aria-label` as well as the visible mark, so a node in it reaches
+ * both attributes as `[object Object]` — while splitting it into `icon` +
+ * `label` renders BOTH spans, and Alignment would draw the rule and the word
+ * "Left" beside it.
  */
-declare function SettingsSegmented({ options, value, onChange, ariaLabel, fit, className, }: SettingsSegmentedProps): react.JSX.Element;
+declare function SettingsSegmented<V = string>({ options, value, onChange, ariaLabel, fit, disabled, className, }: SettingsSegmentedProps<V>): react.JSX.Element;
 
 /**
  * A group of settings under a soft pill row that folds with − / +.

package/dist/panel/index.js

@@ -53,6 +53,7 @@ function SettingsSegmented({
   onChange,
   ariaLabel,
   fit,
+  disabled = false,
   className
 }) {
   const measured = fit && {
@@ -68,18 +69,22 @@ function SettingsSegmented({
       {
         role: "group",
         "aria-label": ariaLabel,
+        "data-disabled": disabled || void 0,
         className: `es-segs${measured ? " is-measured" : ""}${className ? ` ${className}` : ""}`,
         style: measured,
         children: options.map((option) => {
           const pressed = option.id === value;
+          const name = option.title ?? (typeof option.label === "string" ? option.label : void 0);
+          const off = disabled || option.disabled === true;
           const cls = `es-seg${option.icon ? " has-icon" : ""}${pressed ? " is-active" : ""}`;
           return /* @__PURE__ */ jsxs(
             "button",
             {
               type: "button",
-              title: option.label,
-              "aria-label": option.label,
+              title: name,
+              "aria-label": name,
               "aria-pressed": pressed,
+              disabled: off,
               className: cls,
               onClick: () => onChange(option.id),
               children: [
@@ -87,7 +92,7 @@ function SettingsSegmented({
                 /* @__PURE__ */ jsx("span", { className: "es-seg-word", children: option.label })
               ]
             },
-            option.id
+            String(option.id)
           );
         })
       }

package/dist/panel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/panel/SettingsTabs.tsx","../../src/panel/SettingsSegmented.tsx","../../src/panel/SettingsGroup.tsx","../../src/panel/SettingsGroupHead.tsx","../../src/panel/SettingsSwitch.tsx","../../src/panel/SettingsField.tsx","../../src/panel/SettingsDrill.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"index.js","sourcesContent":["import type { SettingsTabsProps } from './types';\n\n/**\n * The tab strip under the panel head.\n *\n * It replaces the old stack of fold headers a merchant had to open and hunt\n * through: the buckets a section actually has become tabs, in one fixed order,\n * so the panel keeps the same shape on every section. A section shows only the\n * tabs it has — pass three items and three tabs render.\n *\n * Controlled: the host decides `activeId`. No hooks, no browser globals.\n *\n * A tab can be WIRED to what it shows (`panelId` / `htmlId` on the item). That\n * is not decoration: `role=\"tab\"` promises a panel, and a tab strip that names\n * none announces \"tab, 1 of 4, selected\" over nothing. The shell cannot supply\n * those ids — only the host knows the element the settings land in — but until\n * card 8802.d it could not ACCEPT them either, so no host could fix it. A tab\n * with nothing to point at renders no attribute at all; an empty\n * `aria-controls` is worse than a missing one, because it names an element\n * that does not exist instead of admitting there is none.\n *\n * A SEGMENTED CONTROL (card 66138). The strip is a grey track and the chosen\n * bucket is a raised white chip on it. Lewis, looking at a real panel: the tab\n * he is NOT on does not invite a click — it does not even look like a button.\n * The track is the answer to that, because it makes every segment look\n * pressable, where a mark under the chosen tab only ever made the chosen tab\n * louder. It replaces the underline strip and card 8811's tint ground; see the\n * long note on `.es-tab.is-active` in `panel.css`.\n *\n * A segment takes the width its OWN label needs and shares what is left over,\n * rather than every segment taking the width of the widest label. Equal\n * segments were measured and cost too much: three of them need a 267px track\n * and four need 355px, against the 281px the shop's default panel gives.\n *\n * THE WORD DROPS WHERE IT STOPS FITTING. Natural widths fit two and three\n * buckets across the whole panel-drag band; they do not fit four, where the\n * last segment ends 39px past the panel edge. So given an `icon`, a segment can\n * spend less width instead of more — the word goes and the glyph stays.\n *\n * Where that happens depends on HOW MANY buckets a section has, because with\n * natural widths the question is about the sum of the labels:\n *\n *   two buckets     both words, at every width the panel drags to.\n *   three buckets   words down to 240px, then glyph plus the chosen word.\n *   four buckets    glyph plus the chosen word under 320px; glyphs under 200px.\n *\n * Which state is a CSS decision, taken against the PANEL's width — see the\n * `@container` blocks in `panel.css`, and the wrapper below that gives them\n * something to measure. React cannot know the answer at render time, and it\n * does not need to: BOTH parts are always in the markup, and CSS shows the one\n * that fits. The word is only ever hidden, never dropped, and the label rides\n * along as `title` and `aria-label` on every tab in every state, so the glyph\n * never has to speak for the tab.\n *\n * A tab with no icon is untouched at every width — it has nothing to fall back\n * to, so it keeps its word.\n */\nexport function SettingsTabs({\n  items,\n  activeId,\n  onSelect,\n  ariaLabel = 'Settings',\n  className,\n}: SettingsTabsProps) {\n  return (\n    // The container context is the SHELL's, not a host's to remember. A panel\n    // that forgot to declare one would silently pin the strip to one tier.\n    <div className=\"es-tabs-fit\">\n      <div\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        aria-orientation=\"horizontal\"\n        className={className ? `es-tabs ${className}` : 'es-tabs'}\n      >\n        {items.map((item) => {\n          const active = item.id === activeId;\n          const cls = `es-tab${item.icon ? ' has-icon' : ''}${active ? ' is-active' : ''}`;\n          return (\n            <button\n              key={item.id}\n              type=\"button\"\n              role=\"tab\"\n              id={item.htmlId}\n              title={item.label}\n              aria-label={item.label}\n              aria-selected={active}\n              aria-controls={item.panelId}\n              className={cls}\n              onClick={() => onSelect(item.id)}\n            >\n              {item.icon ? (\n                <span className=\"es-tab-icon\" aria-hidden=\"true\">\n                  {item.icon}\n                </span>\n              ) : null}\n              <span className=\"es-tab-word\">{item.label}</span>\n              {typeof item.badge === 'number' && item.badge > 0 ? (\n                <span className=\"es-tab-badge\">{item.badge}</span>\n              ) : null}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n","import type { CSSProperties } from 'react';\nimport type { SettingsSegmentedProps } from './types';\n\n/**\n * A segmented control: one row of chips, one of them pressed.\n *\n * THE SAME CHIP AS `SettingsTabs`, AND A DIFFERENT PROMISE. Everything a\n * merchant sees is shared — the grey track, the raised white chip for the one\n * he is on, the glyph drawn at every width, the word that drops where it stops\n * fitting. `panel.css` dresses both from one rule, so there is no second copy\n * of the chip grammar to drift.\n *\n * What differs is what the control SAYS it does. `SettingsTabs` is a tablist\n * and `role=\"tab\"` promises that pressing a chip switches a panel. These chips\n * switch nothing: they write a value and the panel stays where it is. So this\n * is a group of pressed buttons, and its marker is `aria-pressed` — which is\n * also what the storefront's own `Segmented` has carried since the 2026-08-06\n * audit, so the two editors keep saying the same thing about the same control.\n *\n * That distinction is not decoration. Reach for `SettingsTabs` on a Weight row\n * and a control that is correct today starts announcing \"tab, 1 of 4, selected\"\n * over a panel that is not there — three times in one part panel. It is the\n * same split the package already made between `SettingsGroup` and\n * `SettingsGroupHead`: same pill, different promise, two components.\n *\n * Controlled: the host owns `value`. No hooks, no browser globals.\n *\n * ── WHERE THE WORD DROPS, AND WHY THE STRIP HAS TO SAY ───────────────────────\n *\n * The tab strip's tiers are keyed on how many tabs there are, which works\n * because the shell knows those four words. It cannot work here. Measured\n * (`tests/fixtures/segmented-fit.html`), Case — Normal / Uppercase / Lowercase\n * — needs 296px for its words and Alignment — Left / Centre / Right — needs\n * 221px. Both are three-option rows, and the panel drags between 181px and\n * 281px, so a single three-option threshold is visibly wrong for one of them.\n * Whether the words fit is a question about the SUM of the labels; the count is\n * only a stand-in, and it stops standing in the moment a second strip arrives.\n *\n * So the strip carries its own measurement. `fit` is the width of its WORDS,\n * nothing else — the chip's padding, glyph and gaps are the shell's, named on\n * the panel root, and `panel.css` adds them. Those three custom properties\n * below are that measurement and the count, handed to the stylesheet, which\n * compares them against the panel's live width in `calc()`. A container query\n * could not: its condition takes a literal length, so it cannot ask a question\n * whose answer is different for every strip.\n *\n * Without `fit` nothing drops — an unmeasured strip keeps every word at every\n * width, which is exactly what a strip with no glyphs already does.\n */\nexport function SettingsSegmented({\n  options,\n  value,\n  onChange,\n  ariaLabel,\n  fit,\n  className,\n}: SettingsSegmentedProps) {\n  // The measurement, handed to the stylesheet. `is-measured` is what the sheet\n  // scopes the threshold arithmetic to, so a strip that declared nothing falls\n  // back to no threshold at all rather than to a computed one over zeroes.\n  const measured: CSSProperties | undefined = fit && {\n    ['--es-seg-count' as string]: options.length,\n    ['--es-seg-labels' as string]: `${fit.labelsPx}px`,\n    ['--es-seg-widest' as string]: `${fit.widestLabelPx}px`,\n  };\n\n  return (\n    // The container context is the SHELL's, not a host's to remember — a panel\n    // that forgot to declare one would silently pin the strip to one state.\n    <div className=\"es-segs-fit\">\n      <div\n        role=\"group\"\n        aria-label={ariaLabel}\n        className={`es-segs${measured ? ' is-measured' : ''}${className ? ` ${className}` : ''}`}\n        style={measured}\n      >\n        {options.map((option) => {\n          const pressed = option.id === value;\n          const cls = `es-seg${option.icon ? ' has-icon' : ''}${pressed ? ' is-active' : ''}`;\n          return (\n            <button\n              key={option.id}\n              type=\"button\"\n              title={option.label}\n              aria-label={option.label}\n              aria-pressed={pressed}\n              className={cls}\n              onClick={() => onChange(option.id)}\n            >\n              {option.icon ? (\n                <span className=\"es-seg-icon\" aria-hidden=\"true\">\n                  {option.icon}\n                </span>\n              ) : null}\n              <span className=\"es-seg-word\">{option.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n","import type { SettingsGroupProps } from './types';\n\n/**\n * A group of settings under a soft pill row that folds with − / +.\n *\n * The sign is drawn by `panel.css` from `aria-expanded`, so the open state has\n * exactly one home (the attribute assistive tech already reads) instead of a\n * second copy in the markup.\n *\n * `count` is the reason a fold here is safe: a folded group that holds changes\n * still says so on its pill, so nothing a merchant changed can hide.\n */\nexport function SettingsGroup({\n  title,\n  open,\n  onToggle,\n  count,\n  id,\n  children,\n  className,\n}: SettingsGroupProps) {\n  const bodyId = id ? `${id}-body` : undefined;\n  return (\n    <div className={className ? `es-group ${className}` : 'es-group'}>\n      <button\n        type=\"button\"\n        id={id}\n        aria-expanded={open}\n        aria-controls={bodyId}\n        className=\"es-group-head\"\n        onClick={() => onToggle(!open)}\n      >\n        {title}\n        {typeof count === 'number' && count > 0 ? (\n          <span className=\"es-group-count\">{count}</span>\n        ) : null}\n        <span className=\"es-group-sign\" aria-hidden=\"true\" />\n      </button>\n      <div id={bodyId} className=\"es-group-body\" hidden={!open}>\n        {children}\n      </div>\n    </div>\n  );\n}\n","import type { SettingsGroupHeadProps } from './types';\n\n/**\n * A group heading with NO group under it — the pill on its own.\n *\n * It exists because Puck lays the inspector out as a FLAT sibling list: a field\n * renders next to the heading above it, never inside it, so nothing here can\n * wrap the rows that follow. Heading a run of settings is therefore a job for a\n * component that heads and nothing else.\n *\n * `SettingsGroup` cannot do that job. It always renders its body div, and its\n * pill is always a <button> carrying `aria-expanded`, `aria-controls` and the\n * − / + sign. Used header-only it would draw a control that claims to expand\n * something, does nothing when clicked, and tells a screen reader the same lie.\n * A component that folds and a component that titles are two different things,\n * and this is the one that titles.\n *\n * So it is a HEADING, not a control: a real <h3> (the level is the host's, since\n * only the host knows the page outline around it) with no role bolted on, no\n * expanded state, no sign, no body. In a flat list the heading list is the only\n * structure a screen reader has left to navigate by, which is the whole reason\n * this renders a heading element rather than a styled <div>.\n *\n * It wears `.es-group-head` — the same pill as a real group's — so a section\n * that folds and a section that does not read as the same panel. `panel.css`\n * scopes the cursor and the hover tint to `button.es-group-head`, so the\n * heading does not offer a press it cannot honour.\n *\n * NO `count`. A folded group needs one because a fold can hide a change; a\n * heading folds nothing, so nothing can hide behind it.\n */\nexport function SettingsGroupHead({\n  title,\n  level = 3,\n  id,\n  className,\n}: SettingsGroupHeadProps) {\n  const Tag = `h${level}` as const;\n  return (\n    <Tag id={id} className={className ? `es-group-head ${className}` : 'es-group-head'}>\n      {title}\n    </Tag>\n  );\n}\n","import type { SettingsSwitchProps } from './types';\n\n/**\n * The yes-or-no control — ONE shape, both editors (card 8801).\n *\n * Point 5 of the approved settings design says one switch style everywhere.\n * Before this, the storefront editor drew a tick box and the campaign designer\n * drew a green switch, so a merchant met two shapes for the same question and\n * had to learn the control twice. Both now import this file, which is the only\n * thing that stops them drifting apart again.\n *\n * It is a real <button>, and that is the whole keyboard story: a button is\n * activated by Space and by Enter in every browser, and that activation IS a\n * click — so the one `onClick` below serves mouse and keyboard alike. A div\n * wearing `role=\"switch\"` would need a key handler of our own. Do not add one.\n * `type=\"button\"` keeps it from submitting a form it happens to sit in.\n *\n * It cannot exist without a NAME. `SettingsSwitchProps` demands `ariaLabel` or\n * `ariaLabelledBy` and forbids both at once, so an unnamed switch — which a\n * screen reader reads out as \"switch, on\" and nothing more — is a compile error\n * instead of something a docstring asks you to remember.\n *\n * ONE-WAY DEPENDENCY. `SettingsField` imports this module so it can recognise a\n * switch in its `action` slot and hand it the field's label as a name. This\n * module must NEVER import `SettingsField` back — that would close a cycle\n * between two siblings in the same folder. It imports `./types` and nothing\n * else, and `tests/settings-switch.test.tsx` (o) keeps it that way.\n *\n * CONTROLLED and hook-free like the other three: `checked` comes from the host\n * and the switch only ever ASKS to be flipped. That is what keeps this module a\n * directive-free leaf a Next-16 server component can import.\n */\nexport function SettingsSwitch({\n  checked,\n  onChange,\n  disabled,\n  id,\n  ariaLabel,\n  ariaLabelledBy,\n  className,\n}: SettingsSwitchProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      id={id}\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      disabled={disabled}\n      className={className ? `es-switch ${className}` : 'es-switch'}\n      onClick={() => onChange(!checked)}\n    />\n  );\n}\n","import { cloneElement, isValidElement } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { SettingsSwitch } from './SettingsSwitch';\nimport type { SettingsFieldProps } from './types';\n\n/**\n * Does this slot hold a control?\n *\n * The rule is ELEMENT-OR-NOTHING, deliberately not a list of falsy values: a\n * list rots, and the next odd value nobody thought of walks straight through.\n * `{flag && <Slider/>}` yields `false`, `{count && <Slider/>}` yields `0` when\n * the count is zero — and React RENDERS that zero, a stray 0 sitting in the\n * panel where a control belongs. A bare string or number in a control slot is a\n * caller mistake in every case any of us can name.\n *\n * Arrays are walked rather than trusted: `Array.isArray([])` is true, so an\n * empty array — or one holding only `false` and `null`, which is what a list of\n * conditional controls collapses to — would otherwise draw the empty row this\n * check exists to prevent.\n */\nfunction hasControlIn(slot: ReactNode): boolean {\n  if (Array.isArray(slot)) return slot.some(hasControlIn);\n  return isValidElement(slot);\n}\n\n/** What a switch is named by. Read off an unknown element, so it stays loose. */\ninterface SwitchName {\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n}\n\n/**\n * Give a switch in the `action` slot the field's own label as its name.\n *\n * A switch carries no text, and `htmlFor` cannot bridge a <label> to a\n * <button>, so in a boolean row nothing connects the visible label to the\n * control unless something does it explicitly. Doing it HERE means the common\n * case is right with the caller saying nothing: the accessible name and the\n * visible name are the same string and cannot drift apart.\n *\n * It only ever fills a gap. A switch that names itself keeps its own name, and\n * anything that is not a switch — a reset dot, a badge — is left alone, since\n * labelling those with the field's name would be worse than not labelling them.\n */\nfunction nameSwitch(action: ReactNode, label: string, labelId?: string): ReactNode {\n  if (!isValidElement(action) || action.type !== SettingsSwitch) return action;\n\n  const named = action.props as SwitchName;\n  if (named.ariaLabel || named.ariaLabelledBy) return action;\n\n  return cloneElement(\n    action as ReactElement<SwitchName>,\n    labelId ? { ariaLabelledBy: labelId } : { ariaLabel: label },\n  );\n}\n\n/**\n * One setting: a label row, then its control.\n *\n * The row is stacked rather than side-by-side so the control gets the panel's\n * full width — a 308px panel cannot afford a label column AND a usable slider.\n * The label reads small and quiet; the VALUE sits at the end of the same line in\n * the text colour, which is what a merchant scans for. That contrast is the\n * point: before this, label and value looked alike and the panel read as noise.\n *\n * `hint` is where a clause-long explanation goes. A label is a name, never a\n * sentence.\n *\n * A BOOLEAN row is the one exception to \"control on its own line\" (card 8801,\n * Option A, approved). A switch is small and it is the whole control, so it\n * rides the label line in the `action` slot and the row costs one line instead\n * of two — which is what lets a 308px panel show four settings where it used to\n * show three. That is the only reason `children` is optional: a field with no\n * children draws no control row, and its label line IS the row.\n *\n * A field with no children AND no action has no control on either slot. That is\n * a mistake at the call site, so it renders NOTHING — an empty row would hide\n * the mistake behind 20px of blank panel.\n */\nexport function SettingsField({\n  label,\n  labelId,\n  icon,\n  value,\n  hint,\n  changed,\n  htmlFor,\n  action,\n  children,\n  className,\n}: SettingsFieldProps) {\n  const hasControl = hasControlIn(children);\n  const hasAction = hasControlIn(action);\n  if (!hasControl && !hasAction) return null;\n\n  const classes = ['es-field'];\n  if (!hasControl) classes.push('is-inline');\n  if (changed) classes.push('is-changed');\n  if (className) classes.push(className);\n\n  const labelBody = (\n    <>\n      {icon ? (\n        <span className=\"es-field-icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className=\"es-field-label\" id={labelId}>\n        {label}\n      </span>\n    </>\n  );\n\n  return (\n    <div className={classes.join(' ')}>\n      <div className=\"es-field-head\">\n        {htmlFor ? (\n          <label className=\"es-field-name\" htmlFor={htmlFor}>\n            {labelBody}\n          </label>\n        ) : (\n          <span className=\"es-field-name\">{labelBody}</span>\n        )}\n        {value !== undefined && value !== null ? (\n          <span className=\"es-field-value\">{value}</span>\n        ) : null}\n        {hasAction ? nameSwitch(action, label, labelId) : null}\n      </div>\n      {hasControl ? <div className=\"es-field-ctl\">{children}</div> : null}\n      {hint ? <p className=\"es-field-hint\">{hint}</p> : null}\n    </div>\n  );\n}\n","import type { SettingsDrillProps } from './types';\n\n/**\n * A DRILL-IN ROW — a name, a one-line preview, and a chevron (card 8819).\n *\n * The storefront editor's text editing becomes a panel drill-down: the section\n * screen no longer holds a text box for every part; it LISTS the parts as these\n * rows, and pressing one takes the inspector down a level to that part's own\n * editor. A part the eye hid — or one that never draws on the page at all, like\n * a `Slide name` — has no words on the canvas to click, so this list is the only\n * way back to it. That is why the list exists, and why the row is the shell's,\n * not the shop's: the campaign designer draws the same list.\n *\n * IT IS ONE BUTTON, not a control beside some text. The name and the preview are\n * the button's own content, so they ARE its accessible name — a chevron floating\n * next to unlabelled text would be a press a screen reader could not describe.\n * The chevron is `aria-hidden` (pure direction); the status slot is NOT, because\n * its meaning is the host's to name — it passes an icon carrying its own label\n * (a `title`, a visually-hidden word), and hiding the slot would bury that.\n *\n * CONTROLLED and hook-free like the other four primitives: it owns no open state.\n * Pressing it calls `onOpen`, and the host decides what drilling down means —\n * which keeps this a directive-free leaf a Next-16 server component can import.\n */\nexport function SettingsDrill({\n  name,\n  preview,\n  offPage,\n  status,\n  onOpen,\n  id,\n  className,\n}: SettingsDrillProps) {\n  const hasPreview = preview !== undefined && preview !== null;\n  return (\n    <button\n      type=\"button\"\n      id={id}\n      className={className ? `es-drill ${className}` : 'es-drill'}\n      onClick={onOpen}\n    >\n      <span className=\"es-drill-text\">\n        <span className=\"es-drill-name\">{name}</span>\n        {hasPreview ? (\n          <span className={offPage ? 'es-drill-preview is-offpage' : 'es-drill-preview'}>\n            {preview}\n          </span>\n        ) : null}\n      </span>\n      {status ? <span className=\"es-drill-status\">{status}</span> : null}\n      <span className=\"es-drill-chev\" aria-hidden=\"true\" />\n    </button>\n  );\n}\n"]}
+{"version":3,"sources":["../../src/panel/SettingsTabs.tsx","../../src/panel/SettingsSegmented.tsx","../../src/panel/SettingsGroup.tsx","../../src/panel/SettingsGroupHead.tsx","../../src/panel/SettingsSwitch.tsx","../../src/panel/SettingsField.tsx","../../src/panel/SettingsDrill.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"index.js","sourcesContent":["import type { SettingsTabsProps } from './types';\n\n/**\n * The tab strip under the panel head.\n *\n * It replaces the old stack of fold headers a merchant had to open and hunt\n * through: the buckets a section actually has become tabs, in one fixed order,\n * so the panel keeps the same shape on every section. A section shows only the\n * tabs it has — pass three items and three tabs render.\n *\n * Controlled: the host decides `activeId`. No hooks, no browser globals.\n *\n * A tab can be WIRED to what it shows (`panelId` / `htmlId` on the item). That\n * is not decoration: `role=\"tab\"` promises a panel, and a tab strip that names\n * none announces \"tab, 1 of 4, selected\" over nothing. The shell cannot supply\n * those ids — only the host knows the element the settings land in — but until\n * card 8802.d it could not ACCEPT them either, so no host could fix it. A tab\n * with nothing to point at renders no attribute at all; an empty\n * `aria-controls` is worse than a missing one, because it names an element\n * that does not exist instead of admitting there is none.\n *\n * A SEGMENTED CONTROL (card 66138). The strip is a grey track and the chosen\n * bucket is a raised white chip on it. Lewis, looking at a real panel: the tab\n * he is NOT on does not invite a click — it does not even look like a button.\n * The track is the answer to that, because it makes every segment look\n * pressable, where a mark under the chosen tab only ever made the chosen tab\n * louder. It replaces the underline strip and card 8811's tint ground; see the\n * long note on `.es-tab.is-active` in `panel.css`.\n *\n * A segment takes the width its OWN label needs and shares what is left over,\n * rather than every segment taking the width of the widest label. Equal\n * segments were measured and cost too much: three of them need a 267px track\n * and four need 355px, against the 281px the shop's default panel gives.\n *\n * THE WORD DROPS WHERE IT STOPS FITTING. Natural widths fit two and three\n * buckets across the whole panel-drag band; they do not fit four, where the\n * last segment ends 39px past the panel edge. So given an `icon`, a segment can\n * spend less width instead of more — the word goes and the glyph stays.\n *\n * Where that happens depends on HOW MANY buckets a section has, because with\n * natural widths the question is about the sum of the labels:\n *\n *   two buckets     both words, at every width the panel drags to.\n *   three buckets   words down to 240px, then glyph plus the chosen word.\n *   four buckets    glyph plus the chosen word under 320px; glyphs under 200px.\n *\n * Which state is a CSS decision, taken against the PANEL's width — see the\n * `@container` blocks in `panel.css`, and the wrapper below that gives them\n * something to measure. React cannot know the answer at render time, and it\n * does not need to: BOTH parts are always in the markup, and CSS shows the one\n * that fits. The word is only ever hidden, never dropped, and the label rides\n * along as `title` and `aria-label` on every tab in every state, so the glyph\n * never has to speak for the tab.\n *\n * A tab with no icon is untouched at every width — it has nothing to fall back\n * to, so it keeps its word.\n */\nexport function SettingsTabs({\n  items,\n  activeId,\n  onSelect,\n  ariaLabel = 'Settings',\n  className,\n}: SettingsTabsProps) {\n  return (\n    // The container context is the SHELL's, not a host's to remember. A panel\n    // that forgot to declare one would silently pin the strip to one tier.\n    <div className=\"es-tabs-fit\">\n      <div\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        aria-orientation=\"horizontal\"\n        className={className ? `es-tabs ${className}` : 'es-tabs'}\n      >\n        {items.map((item) => {\n          const active = item.id === activeId;\n          const cls = `es-tab${item.icon ? ' has-icon' : ''}${active ? ' is-active' : ''}`;\n          return (\n            <button\n              key={item.id}\n              type=\"button\"\n              role=\"tab\"\n              id={item.htmlId}\n              title={item.label}\n              aria-label={item.label}\n              aria-selected={active}\n              aria-controls={item.panelId}\n              className={cls}\n              onClick={() => onSelect(item.id)}\n            >\n              {item.icon ? (\n                <span className=\"es-tab-icon\" aria-hidden=\"true\">\n                  {item.icon}\n                </span>\n              ) : null}\n              <span className=\"es-tab-word\">{item.label}</span>\n              {typeof item.badge === 'number' && item.badge > 0 ? (\n                <span className=\"es-tab-badge\">{item.badge}</span>\n              ) : null}\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n","import type { CSSProperties } from 'react';\nimport type { SettingsSegmentedProps } from './types';\n\n/**\n * A segmented control: one row of chips, one of them pressed.\n *\n * THE SAME CHIP AS `SettingsTabs`, AND A DIFFERENT PROMISE. Everything a\n * merchant sees is shared — the grey track, the raised white chip for the one\n * he is on, the glyph drawn at every width, the word that drops where it stops\n * fitting. `panel.css` dresses both from one rule, so there is no second copy\n * of the chip grammar to drift.\n *\n * What differs is what the control SAYS it does. `SettingsTabs` is a tablist\n * and `role=\"tab\"` promises that pressing a chip switches a panel. These chips\n * switch nothing: they write a value and the panel stays where it is. So this\n * is a group of pressed buttons, and its marker is `aria-pressed` — which is\n * also what the storefront's own `Segmented` has carried since the 2026-08-06\n * audit, so the two editors keep saying the same thing about the same control.\n *\n * That distinction is not decoration. Reach for `SettingsTabs` on a Weight row\n * and a control that is correct today starts announcing \"tab, 1 of 4, selected\"\n * over a panel that is not there — three times in one part panel. It is the\n * same split the package already made between `SettingsGroup` and\n * `SettingsGroupHead`: same pill, different promise, two components.\n *\n * Controlled: the host owns `value`. No hooks, no browser globals.\n *\n * ── WHERE THE WORD DROPS, AND WHY THE STRIP HAS TO SAY ───────────────────────\n *\n * The tab strip's tiers are keyed on how many tabs there are, which works\n * because the shell knows those four words. It cannot work here. Measured\n * (`tests/fixtures/segmented-fit.html`), Case — Normal / Uppercase / Lowercase\n * — needs 296px for its words and Alignment — Left / Centre / Right — needs\n * 221px. Both are three-option rows, and the panel drags between 181px and\n * 281px, so a single three-option threshold is visibly wrong for one of them.\n * Whether the words fit is a question about the SUM of the labels; the count is\n * only a stand-in, and it stops standing in the moment a second strip arrives.\n *\n * So the strip carries its own measurement. `fit` is the width of its WORDS,\n * nothing else — the chip's padding, glyph and gaps are the shell's, named on\n * the panel root, and `panel.css` adds them. Those three custom properties\n * below are that measurement and the count, handed to the stylesheet, which\n * compares them against the panel's live width in `calc()`. A container query\n * could not: its condition takes a literal length, so it cannot ask a question\n * whose answer is different for every strip.\n *\n * Without `fit` nothing drops — an unmeasured strip keeps every word at every\n * width, which is exactly what a strip with no glyphs already does.\n *\n * ── WHAT CARD 66303 WIDENED, AND WHY IT HAD TO BE HERE ───────────────────────\n *\n * `efficient-shop` draws its own `Segmented` beside this one and could not stop:\n * four things twelve live call sites need were missing here. Generic `V`\n * (weights are numbers, \"image side\" is a boolean on every published page), a\n * DRAWN label with its own `title`, and `disabled` — on one option or on the\n * strip.\n *\n * The last two could not have been bridged by a wrapper the shop writes, which\n * is the reason they are props and not a consumer's problem. This component\n * renders the `<button>`s, so nothing outside it can disable them; dimming a\n * parent instead leaves them focusable and announcing as ENABLED, which is the\n * regression the 2026-08-06 audit and card 66034 closed. And `label` is spent as\n * `title` and `aria-label` as well as the visible mark, so a node in it reaches\n * both attributes as `[object Object]` — while splitting it into `icon` +\n * `label` renders BOTH spans, and Alignment would draw the rule and the word\n * \"Left\" beside it.\n */\nexport function SettingsSegmented<V = string>({\n  options,\n  value,\n  onChange,\n  ariaLabel,\n  fit,\n  disabled = false,\n  className,\n}: SettingsSegmentedProps<V>) {\n  // The measurement, handed to the stylesheet. `is-measured` is what the sheet\n  // scopes the threshold arithmetic to, so a strip that declared nothing falls\n  // back to no threshold at all rather than to a computed one over zeroes.\n  const measured: CSSProperties | undefined = fit && {\n    ['--es-seg-count' as string]: options.length,\n    ['--es-seg-labels' as string]: `${fit.labelsPx}px`,\n    ['--es-seg-widest' as string]: `${fit.widestLabelPx}px`,\n  };\n\n  return (\n    // The container context is the SHELL's, not a host's to remember — a panel\n    // that forgot to declare one would silently pin the strip to one state.\n    <div className=\"es-segs-fit\">\n      <div\n        role=\"group\"\n        aria-label={ariaLabel}\n        // A state ATTRIBUTE rather than a second class, so the class string the\n        // strip has always rendered is untouched and the sheet's one statement\n        // about a whole control out of force has somewhere of its own to hang.\n        data-disabled={disabled || undefined}\n        className={`es-segs${measured ? ' is-measured' : ''}${className ? ` ${className}` : ''}`}\n        style={measured}\n      >\n        {options.map((option) => {\n          // AN EQUALITY, never a truthiness test. `false` is a real answer —\n          // \"image left\" is stored as `false` on every published page across\n          // every tenant — and a value matching nothing presses nothing, which\n          // is the mixed selection the part panel hands in as `\"\"`.\n          const pressed = option.id === value;\n          // THE NAME, and every option has one. A drawn label has no word to be\n          // read aloud, so its `title` is required and is the name; a worded one\n          // is named by its word unless it says otherwise. The narrowing is what\n          // keeps a node out of the two attributes it would land in as\n          // `[object Object]`.\n          const name = option.title ?? (typeof option.label === 'string' ? option.label : undefined);\n          const off = disabled || option.disabled === true;\n          const cls = `es-seg${option.icon ? ' has-icon' : ''}${pressed ? ' is-active' : ''}`;\n          return (\n            <button\n              // Stringified because `V` is whatever the options declare — a\n              // weight is a number. For the string strips that shipped before\n              // this, the key is the one they already had.\n              key={String(option.id)}\n              type=\"button\"\n              title={name}\n              aria-label={name}\n              aria-pressed={pressed}\n              // The button's OWN disabled, so it leaves the tab order and\n              // announces the state itself. React renders nothing for `false`,\n              // so a strip in force is unchanged.\n              disabled={off}\n              className={cls}\n              onClick={() => onChange(option.id)}\n            >\n              {option.icon ? (\n                <span className=\"es-seg-icon\" aria-hidden=\"true\">\n                  {option.icon}\n                </span>\n              ) : null}\n              {/* The label, drawn as given. A worded one is the word; a drawn\n                  one is the mark itself, in the SAME slot rather than beside it\n                  — which is why a mark belongs in `label` and not in `icon`. */}\n              <span className=\"es-seg-word\">{option.label}</span>\n            </button>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n","import type { SettingsGroupProps } from './types';\n\n/**\n * A group of settings under a soft pill row that folds with − / +.\n *\n * The sign is drawn by `panel.css` from `aria-expanded`, so the open state has\n * exactly one home (the attribute assistive tech already reads) instead of a\n * second copy in the markup.\n *\n * `count` is the reason a fold here is safe: a folded group that holds changes\n * still says so on its pill, so nothing a merchant changed can hide.\n */\nexport function SettingsGroup({\n  title,\n  open,\n  onToggle,\n  count,\n  id,\n  children,\n  className,\n}: SettingsGroupProps) {\n  const bodyId = id ? `${id}-body` : undefined;\n  return (\n    <div className={className ? `es-group ${className}` : 'es-group'}>\n      <button\n        type=\"button\"\n        id={id}\n        aria-expanded={open}\n        aria-controls={bodyId}\n        className=\"es-group-head\"\n        onClick={() => onToggle(!open)}\n      >\n        {title}\n        {typeof count === 'number' && count > 0 ? (\n          <span className=\"es-group-count\">{count}</span>\n        ) : null}\n        <span className=\"es-group-sign\" aria-hidden=\"true\" />\n      </button>\n      <div id={bodyId} className=\"es-group-body\" hidden={!open}>\n        {children}\n      </div>\n    </div>\n  );\n}\n","import type { SettingsGroupHeadProps } from './types';\n\n/**\n * A group heading with NO group under it — the pill on its own.\n *\n * It exists because Puck lays the inspector out as a FLAT sibling list: a field\n * renders next to the heading above it, never inside it, so nothing here can\n * wrap the rows that follow. Heading a run of settings is therefore a job for a\n * component that heads and nothing else.\n *\n * `SettingsGroup` cannot do that job. It always renders its body div, and its\n * pill is always a <button> carrying `aria-expanded`, `aria-controls` and the\n * − / + sign. Used header-only it would draw a control that claims to expand\n * something, does nothing when clicked, and tells a screen reader the same lie.\n * A component that folds and a component that titles are two different things,\n * and this is the one that titles.\n *\n * So it is a HEADING, not a control: a real <h3> (the level is the host's, since\n * only the host knows the page outline around it) with no role bolted on, no\n * expanded state, no sign, no body. In a flat list the heading list is the only\n * structure a screen reader has left to navigate by, which is the whole reason\n * this renders a heading element rather than a styled <div>.\n *\n * It wears `.es-group-head` — the same pill as a real group's — so a section\n * that folds and a section that does not read as the same panel. `panel.css`\n * scopes the cursor and the hover tint to `button.es-group-head`, so the\n * heading does not offer a press it cannot honour.\n *\n * NO `count`. A folded group needs one because a fold can hide a change; a\n * heading folds nothing, so nothing can hide behind it.\n */\nexport function SettingsGroupHead({\n  title,\n  level = 3,\n  id,\n  className,\n}: SettingsGroupHeadProps) {\n  const Tag = `h${level}` as const;\n  return (\n    <Tag id={id} className={className ? `es-group-head ${className}` : 'es-group-head'}>\n      {title}\n    </Tag>\n  );\n}\n","import type { SettingsSwitchProps } from './types';\n\n/**\n * The yes-or-no control — ONE shape, both editors (card 8801).\n *\n * Point 5 of the approved settings design says one switch style everywhere.\n * Before this, the storefront editor drew a tick box and the campaign designer\n * drew a green switch, so a merchant met two shapes for the same question and\n * had to learn the control twice. Both now import this file, which is the only\n * thing that stops them drifting apart again.\n *\n * It is a real <button>, and that is the whole keyboard story: a button is\n * activated by Space and by Enter in every browser, and that activation IS a\n * click — so the one `onClick` below serves mouse and keyboard alike. A div\n * wearing `role=\"switch\"` would need a key handler of our own. Do not add one.\n * `type=\"button\"` keeps it from submitting a form it happens to sit in.\n *\n * It cannot exist without a NAME. `SettingsSwitchProps` demands `ariaLabel` or\n * `ariaLabelledBy` and forbids both at once, so an unnamed switch — which a\n * screen reader reads out as \"switch, on\" and nothing more — is a compile error\n * instead of something a docstring asks you to remember.\n *\n * ONE-WAY DEPENDENCY. `SettingsField` imports this module so it can recognise a\n * switch in its `action` slot and hand it the field's label as a name. This\n * module must NEVER import `SettingsField` back — that would close a cycle\n * between two siblings in the same folder. It imports `./types` and nothing\n * else, and `tests/settings-switch.test.tsx` (o) keeps it that way.\n *\n * CONTROLLED and hook-free like the other three: `checked` comes from the host\n * and the switch only ever ASKS to be flipped. That is what keeps this module a\n * directive-free leaf a Next-16 server component can import.\n */\nexport function SettingsSwitch({\n  checked,\n  onChange,\n  disabled,\n  id,\n  ariaLabel,\n  ariaLabelledBy,\n  className,\n}: SettingsSwitchProps) {\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      id={id}\n      aria-checked={checked}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      disabled={disabled}\n      className={className ? `es-switch ${className}` : 'es-switch'}\n      onClick={() => onChange(!checked)}\n    />\n  );\n}\n","import { cloneElement, isValidElement } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\n\nimport { SettingsSwitch } from './SettingsSwitch';\nimport type { SettingsFieldProps } from './types';\n\n/**\n * Does this slot hold a control?\n *\n * The rule is ELEMENT-OR-NOTHING, deliberately not a list of falsy values: a\n * list rots, and the next odd value nobody thought of walks straight through.\n * `{flag && <Slider/>}` yields `false`, `{count && <Slider/>}` yields `0` when\n * the count is zero — and React RENDERS that zero, a stray 0 sitting in the\n * panel where a control belongs. A bare string or number in a control slot is a\n * caller mistake in every case any of us can name.\n *\n * Arrays are walked rather than trusted: `Array.isArray([])` is true, so an\n * empty array — or one holding only `false` and `null`, which is what a list of\n * conditional controls collapses to — would otherwise draw the empty row this\n * check exists to prevent.\n */\nfunction hasControlIn(slot: ReactNode): boolean {\n  if (Array.isArray(slot)) return slot.some(hasControlIn);\n  return isValidElement(slot);\n}\n\n/** What a switch is named by. Read off an unknown element, so it stays loose. */\ninterface SwitchName {\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n}\n\n/**\n * Give a switch in the `action` slot the field's own label as its name.\n *\n * A switch carries no text, and `htmlFor` cannot bridge a <label> to a\n * <button>, so in a boolean row nothing connects the visible label to the\n * control unless something does it explicitly. Doing it HERE means the common\n * case is right with the caller saying nothing: the accessible name and the\n * visible name are the same string and cannot drift apart.\n *\n * It only ever fills a gap. A switch that names itself keeps its own name, and\n * anything that is not a switch — a reset dot, a badge — is left alone, since\n * labelling those with the field's name would be worse than not labelling them.\n */\nfunction nameSwitch(action: ReactNode, label: string, labelId?: string): ReactNode {\n  if (!isValidElement(action) || action.type !== SettingsSwitch) return action;\n\n  const named = action.props as SwitchName;\n  if (named.ariaLabel || named.ariaLabelledBy) return action;\n\n  return cloneElement(\n    action as ReactElement<SwitchName>,\n    labelId ? { ariaLabelledBy: labelId } : { ariaLabel: label },\n  );\n}\n\n/**\n * One setting: a label row, then its control.\n *\n * The row is stacked rather than side-by-side so the control gets the panel's\n * full width — a 308px panel cannot afford a label column AND a usable slider.\n * The label reads small and quiet; the VALUE sits at the end of the same line in\n * the text colour, which is what a merchant scans for. That contrast is the\n * point: before this, label and value looked alike and the panel read as noise.\n *\n * `hint` is where a clause-long explanation goes. A label is a name, never a\n * sentence.\n *\n * A BOOLEAN row is the one exception to \"control on its own line\" (card 8801,\n * Option A, approved). A switch is small and it is the whole control, so it\n * rides the label line in the `action` slot and the row costs one line instead\n * of two — which is what lets a 308px panel show four settings where it used to\n * show three. That is the only reason `children` is optional: a field with no\n * children draws no control row, and its label line IS the row.\n *\n * A field with no children AND no action has no control on either slot. That is\n * a mistake at the call site, so it renders NOTHING — an empty row would hide\n * the mistake behind 20px of blank panel.\n */\nexport function SettingsField({\n  label,\n  labelId,\n  icon,\n  value,\n  hint,\n  changed,\n  htmlFor,\n  action,\n  children,\n  className,\n}: SettingsFieldProps) {\n  const hasControl = hasControlIn(children);\n  const hasAction = hasControlIn(action);\n  if (!hasControl && !hasAction) return null;\n\n  const classes = ['es-field'];\n  if (!hasControl) classes.push('is-inline');\n  if (changed) classes.push('is-changed');\n  if (className) classes.push(className);\n\n  const labelBody = (\n    <>\n      {icon ? (\n        <span className=\"es-field-icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className=\"es-field-label\" id={labelId}>\n        {label}\n      </span>\n    </>\n  );\n\n  return (\n    <div className={classes.join(' ')}>\n      <div className=\"es-field-head\">\n        {htmlFor ? (\n          <label className=\"es-field-name\" htmlFor={htmlFor}>\n            {labelBody}\n          </label>\n        ) : (\n          <span className=\"es-field-name\">{labelBody}</span>\n        )}\n        {value !== undefined && value !== null ? (\n          <span className=\"es-field-value\">{value}</span>\n        ) : null}\n        {hasAction ? nameSwitch(action, label, labelId) : null}\n      </div>\n      {hasControl ? <div className=\"es-field-ctl\">{children}</div> : null}\n      {hint ? <p className=\"es-field-hint\">{hint}</p> : null}\n    </div>\n  );\n}\n","import type { SettingsDrillProps } from './types';\n\n/**\n * A DRILL-IN ROW — a name, a one-line preview, and a chevron (card 8819).\n *\n * The storefront editor's text editing becomes a panel drill-down: the section\n * screen no longer holds a text box for every part; it LISTS the parts as these\n * rows, and pressing one takes the inspector down a level to that part's own\n * editor. A part the eye hid — or one that never draws on the page at all, like\n * a `Slide name` — has no words on the canvas to click, so this list is the only\n * way back to it. That is why the list exists, and why the row is the shell's,\n * not the shop's: the campaign designer draws the same list.\n *\n * IT IS ONE BUTTON, not a control beside some text. The name and the preview are\n * the button's own content, so they ARE its accessible name — a chevron floating\n * next to unlabelled text would be a press a screen reader could not describe.\n * The chevron is `aria-hidden` (pure direction); the status slot is NOT, because\n * its meaning is the host's to name — it passes an icon carrying its own label\n * (a `title`, a visually-hidden word), and hiding the slot would bury that.\n *\n * CONTROLLED and hook-free like the other four primitives: it owns no open state.\n * Pressing it calls `onOpen`, and the host decides what drilling down means —\n * which keeps this a directive-free leaf a Next-16 server component can import.\n */\nexport function SettingsDrill({\n  name,\n  preview,\n  offPage,\n  status,\n  onOpen,\n  id,\n  className,\n}: SettingsDrillProps) {\n  const hasPreview = preview !== undefined && preview !== null;\n  return (\n    <button\n      type=\"button\"\n      id={id}\n      className={className ? `es-drill ${className}` : 'es-drill'}\n      onClick={onOpen}\n    >\n      <span className=\"es-drill-text\">\n        <span className=\"es-drill-name\">{name}</span>\n        {hasPreview ? (\n          <span className={offPage ? 'es-drill-preview is-offpage' : 'es-drill-preview'}>\n            {preview}\n          </span>\n        ) : null}\n      </span>\n      {status ? <span className=\"es-drill-status\">{status}</span> : null}\n      <span className=\"es-drill-chev\" aria-hidden=\"true\" />\n    </button>\n  );\n}\n"]}

package/dist/panel/panel.css

@@ -254,28 +254,52 @@
   box-shadow: 0 0 0 3px var(--es-accent-ring);
 }
 
-/* THE CHOSEN TAB IS A RAISED CHIP — AND THIS REPLACES CARD 8811.
-
-   8811 gave the chosen tab a filled ground, `--es-accent-tint` rounded at the
-   top only, because colour alone stopped being enough once the strip could
-   reduce a tab to a 16px glyph. Lewis picked the softest of three weights he
-   was shown, and the rule carried a note asking the next reader not to tidy it
-   away for looking almost absent in the stylesheet. That note did its job — it
-   is why this replacement is written down instead of silent.
-
-   What changed is the QUESTION. 8811 marked the chosen tab; Lewis's complaint
-   here is about the other one, which a tint under the chosen tab cannot reach.
-   The segmented control answers it the other way round: the track makes every
-   segment look pressable, the chip says which one he is on. Both marks survive
-   at every width, which is the property 8811 was buying.
-
-   So the tint goes, the top-only corners go, and the 2px accent rule goes with
-   them. The chip is told apart by ELEVATION now — a lit rule under a raised
-   chip is a second answer to a question that already has one. */
+/* THE CHOSEN CHIP IS THE DARKEST THING IN THE ROW (card 66302).
+
+   IT WAS A RAISED WHITE CHIP, AND THAT WAS NOT A MISTAKE. Card 66138 put white
+   on the grey track with a soft lift, and Lewis picked that look himself from
+   six treatments. He picked it BY EYE, AT A WIDTH WHERE THE WORDS WERE STILL
+   THERE — which is the whole reason this is a revision and not a correction.
+
+   WHAT CHANGED IS THE CONDITION, TWICE.
+
+   First the words went. A four-tab strip is already wordless below 200px, and
+   the panel's drag band bottoms out at 181px, so that state is live in the
+   editor today; card 66246 then made the shop's Weight row show one word of
+   four at the DEFAULT panel and none at the narrow end. A chip that used to sit
+   beside a word became the only thing saying which option is set.
+
+   Then the second mark went, and nobody noticed. Card 66248 moved the strip
+   into this package and the quiet label darkened from the muted grey to
+   `--es-text-secondary`. That darkening is right on its own terms — it is card
+   66138's AA fix, 4.39:1 to 9.37:1 on the track — but it also cut the
+   chosen-vs-quiet GLYPH contrast from 3.67:1 to 1.72:1. The strip lost the one
+   state cue that was already above 3:1, and the change was described as
+   cosmetic when it merged.
+
+   So the raised white chip was left carrying the whole message alone, at
+   1.10:1 against its own track, where WCAG 1.4.11 asks 3:1 of anything
+   identifying a control's STATE.
+
+   WHY DARK AND NOT A RING. Four treatments were drawn and measured for Lewis;
+   two of the routes were closed by arithmetic before he saw them (darkening the
+   track drops the quiet label to 3.40:1 and fails AA; pushing the glyph delta
+   only reaches 3:1 by putting that label back where 66138 moved it FROM). Of
+   what was left, this is the one that survives the DISABLED state:
+   `.es-segs[data-disabled]` fades the strip to 0.5 over the panel, and a ring
+   at 4.39:1 composites down to 1.89:1 while this holds 3.24:1. A cue that only
+   works while the control is live is a cue with a hole in it.
+
+   ⚠️ THE LIFT STAYS, AND IT IS NO LONGER THE MESSAGE. `--es-raised-shadow`
+   still seats the chip on the track. What it must not go back to being is the
+   thing telling the two states apart — a shadow is not a colour, so no
+   contrast ratio can score it, and that is exactly how this got to 1.10:1
+   without any guard noticing. `tests/panel-chip-contrast.test.ts` pins the
+   RATIO and not this colour, so a better answer is free to replace it. */
 .es-tab.is-active,
 .es-seg.is-active {
-  background: var(--es-raised);
-  color: var(--es-text);
+  background: var(--es-text);
+  color: var(--es-on-accent);
   box-shadow: var(--es-raised-shadow);
   border-radius: 6px;
 }
@@ -530,6 +554,51 @@
 .es-seg.has-icon .es-seg-word { margin-left: clamp(0px, var(--es-seg-room-all), var(--es-chip-icon-gap)); }
 .es-seg.has-icon.is-active .es-seg-word { margin-left: clamp(0px, var(--es-seg-room-chosen), var(--es-chip-icon-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.
+
+   ⚠️ THIS COLOUR BELONGS TO THE CHIP'S GROUND, NOT TO THE TRACK (card 66302).
+   It was `--es-text-secondary`, which was right while the chip was white:
+   10.31:1 on it. The moment the chip went dark that same rule drew
+   `--es-text-secondary` on `--es-text` — 1.72:1, an unreadable label on a
+   control that had just been made MORE visible. Nothing about the rule changed; what it sat on moved underneath
+   it. So it reads `--es-on-accent` for the same reason the enabled chip does,
+   and the strip says which option is out of force through the track's fade and
+   its quiet siblings rather than by dimming the one word still worth reading. */
+.es-seg:disabled.is-active { 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 — one statement instead of
+   three identically faded chips. The track is the part that says "these buttons
+   are one control", so it is the right place to say the control is not in force.
+   A single option out of force leaves the track alone, because the strip still
+   is. */
+.es-segs[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+
 /* ── a group: the soft pill row that folds ─────────────────────────────────── */
 
 /* WAS 6px, AND THE 6 NEVER APPLIED (card 66203). `.es-group` is a plain div, so

package/dist/shell/index.d.ts

@@ -42,7 +42,7 @@ declare const shellTokens: {
     readonly previewBg: "#f3f4f6";
     /** `--es-panel` — raised cards / panels. */
     readonly panel: "#ffffff";
-    /** `--es-raised` — active seg / chip. */
+    /** `--es-raised` — a lifted surface. NOT the active chip since card 66302. */
     readonly raised: "#ffffff";
     /** `--es-topbar-bg`. */
     readonly topbarBg: "#ffffff";

package/dist/shell/index.js

@@ -1,3 +1,3 @@
-export { puckAzureRamp, shellCssVars, shellTokens } from '../chunk-EZKBKK3E.js';
+export { puckAzureRamp, shellCssVars, shellTokens } from '../chunk-VEXTYAMU.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "editor-shell",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "Shared editor-chrome primitives for the EFFICIENT editors: EditorRail (a Next-16-safe left icon-rail leaf), the shell token layer, and GoldTextInput — type in place and watch the markup formatting appear as you type.",
   "license": "MIT",
   "author": "Lewis Liu",

package/dist/chunk-EZKBKK3E.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/shell/tokens.ts"],"names":[],"mappings":"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","file":"chunk-EZKBKK3E.js","sourcesContent":["/**\n * Editor SHELL design tokens — the ONE source both editors' chrome converge on.\n *\n * Where `rail/tokens.ts` owns the slim icon-rail, this owns the rest of the\n * editor chrome theme: accent, surfaces, fields, text, lines, chips, named\n * chrome literals, danger/warning/success, radii, gap, shadows and font. Every\n * value bar one is taken verbatim from the storefront editor's `--sf-*` block\n * (`efficient-shop/components/storefront-editor.css`), the visual reference the\n * campaign designer (`--cd-*`) and the storefront's own TS mirror (`tk`) had\n * each re-copied. After card 66024 they all resolve to these values instead.\n * The one exception is `success`, which that block has no counterpart for; see\n * its own note below.\n *\n * Exposed BOTH ways, per the same value (mirrors the rail):\n *   - `shellTokens` — this JS object, for code that needs the numbers/colours\n *     (e.g. the storefront's `floating-editor/tokens.ts` inline-style mirror);\n *   - `shell.css` — the stylesheet, which declares the identical values as CSS\n *     custom properties on `.es-editor` (names listed in `shellCssVars`).\n *\n * Numeric fields are pixel magnitudes (unitless) so they compose in code; the\n * CSS applies the `px`. Both editing surfaces are LIGHT only (no dark mode), so\n * there is a single palette here — no dark counterpart.\n */\nexport const shellTokens = {\n  // ── Accent (react-os-shell blue) ──────────────────────────────────────────\n  /** `--es-accent` — blue-600. */\n  accent: '#2563eb',\n  /** `--es-accent-tint` — blue-50. */\n  accentTint: '#eff6ff',\n  /** `--es-accent-tint-strong` — blue-100. */\n  accentTintStrong: '#dbeafe',\n  /** `--es-accent-text` — blue-700. */\n  accentText: '#1d4ed8',\n  /** `--es-accent-ring` — focus ring wash. */\n  accentRing: 'rgba(37, 99, 235, 0.25)',\n  /** `--es-accent-shadow` — accent button shadow. */\n  accentShadow: 'rgba(37, 99, 235, 0.35)',\n  /** `--es-on-accent` — text/icon over the solid accent. */\n  onAccent: '#ffffff',\n\n  // ── Surfaces (cool gray ramp) ─────────────────────────────────────────────\n  /** `--es-app-bg` — gray-50, sunken canvas. */\n  appBg: '#f9fafb',\n  /** `--es-preview-bg` — gray-100, preview well. */\n  previewBg: '#f3f4f6',\n  /** `--es-panel` — raised cards / panels. */\n  panel: '#ffffff',\n  /** `--es-raised` — active seg / chip. */\n  raised: '#ffffff',\n  /** `--es-topbar-bg`. */\n  topbarBg: '#ffffff',\n  /** `--es-frame-bg` — device \"paper\" behind the preview iframe. */\n  frameBg: '#ffffff',\n  /** `--es-hover` — gray-100 row / icon hover. */\n  hover: '#f3f4f6',\n  /** `--es-hatch` — 45° upload-slot texture. */\n  hatch: 'rgba(0, 0, 0, 0.018)',\n  /** `--es-addcard-veil` — add-section card hover wash. */\n  addcardVeil: 'rgba(248, 249, 250, 0.66)',\n\n  // ── Fields ────────────────────────────────────────────────────────────────\n  /** `--es-field-bg`. */\n  fieldBg: '#ffffff',\n  /** `--es-track-bg` — gray-100 segmented / search track. */\n  trackBg: '#f3f4f6',\n  /** `--es-input-border` — gray-300. */\n  inputBorder: '#d1d5db',\n  /** `--es-field-text` — gray-800. */\n  fieldText: '#1f2937',\n  /** `--es-field-placeholder` — gray-400. */\n  fieldPlaceholder: '#9ca3af',\n  /** `--es-knob` — toggle knob. */\n  knob: '#ffffff',\n\n  // ── Text ────────────────────────────────────────────────────────────────\n  /** `--es-text` — gray-900. */\n  text: '#111827',\n  /** `--es-text-strong` — gray-950 active labels. */\n  textStrong: '#030712',\n  /** `--es-text-secondary` — gray-700. */\n  textSecondary: '#374151',\n  /** `--es-muted` — gray-500. */\n  muted: '#6b7280',\n  /** `--es-icon` — gray-500 icon buttons. */\n  icon: '#6b7280',\n  /** `--es-disabled` — gray-400 disabled / faint glyphs. */\n  disabled: '#9ca3af',\n\n  // ── Lines / chips / buttons ──────────────────────────────────────────────\n  /** `--es-divider` — gray-200. */\n  divider: '#e5e7eb',\n  /** `--es-line` — gray-200 hairlines. */\n  line: '#e5e7eb',\n  /** `--es-btn-border` — gray-300. */\n  btnBorder: '#d1d5db',\n  /** `--es-btn-text` — gray-700. */\n  btnText: '#374151',\n  /** `--es-chip-bg` — gray-100. */\n  chipBg: '#f3f4f6',\n  /** `--es-chip-fg` — gray-500. */\n  chipFg: '#6b7280',\n\n  // ── Named chrome literals ─────────────────────────────────────────────────\n  /** `--es-brand-square` — gray-900 wordmark square. */\n  brandSquare: '#111827',\n  /** `--es-device-border` — gray-200 tablet/mobile frame. */\n  deviceBorder: '#e5e7eb',\n  /** `--es-toast-bg` — gray-900 dark chip / seam pill. */\n  toastBg: '#111827',\n  /** `--es-toggle-off` — gray-300 toggle track. */\n  toggleOff: '#d1d5db',\n  /** `--es-scrollbar` — gray-300. */\n  scrollbar: '#d1d5db',\n  /** `--es-scrollbar-hover` — gray-400. */\n  scrollbarHover: '#9ca3af',\n\n  // ── Danger / warning / success (shell red / amber / green) ────────────────\n  /** `--es-danger` — red-600. */\n  danger: '#dc2626',\n  /** `--es-danger-strong` — red-700. */\n  dangerStrong: '#b91c1c',\n  /** `--es-danger-tint` — red-50. */\n  dangerTint: '#fef2f2',\n  /** `--es-warning` — amber-700. */\n  warning: '#b45309',\n  /** `--es-preview-tint` — amber-100 \"Preview\" pill. */\n  previewTint: '#fef3c7',\n  /**\n   * `--es-success` — green-700. THE ONE VALUE HERE WITH NO `--sf-*` BEHIND IT:\n   * the storefront editor's block has a red and an amber and no green, and card\n   * 8802.g needs one for a green tick. So it is picked to sit with the block\n   * rather than invented next to it — the same Tailwind ramp every other colour\n   * in this file comes from, at the 700 step `--es-warning` already sits on.\n   * 700 and not 600 for the reason amber went there: it is the darkest step\n   * still plainly the hue, and it clears WCAG AA (5.0:1) on the shell's white\n   * panels, so a tick may carry a label without needing a second token.\n   */\n  success: '#15803d',\n\n  // ── Radii / shape / gap ───────────────────────────────────────────────────\n  /** `--es-panel-radius`. */\n  panelRadius: 12,\n  /** `--es-row-radius`. */\n  rowRadius: 8,\n  /** `--es-field-radius`. */\n  fieldRadius: 6,\n  /** `--es-panel-gap` — inter-pane gutter + outer frame padding, ONE token. */\n  panelGap: 10,\n\n  // ── Shadows ───────────────────────────────────────────────────────────────\n  /** `--es-panel-shadow`. */\n  panelShadow: '0 1px 2px rgba(0, 0, 0, 0.05), 0 10px 30px rgba(0, 0, 0, 0.06)',\n  /** `--es-topbar-shadow`. */\n  topbarShadow: '0 1px 3px rgba(0, 0, 0, 0.06)',\n  /**\n   * `--es-raised-shadow` — what a small surface sitting ON another one casts:\n   * the chip in the settings tab strip's track (card 66138). Tighter and darker\n   * than `panelShadow`, which is a whole panel floating over the app; this one\n   * has to read across 3px of track without looking like a second panel.\n   */\n  raisedShadow: '0 1px 2px rgba(16, 24, 40, 0.1)',\n\n  // ── Type ──────────────────────────────────────────────────────────────────\n  /** `--es-font` — system sans stack (also fed to `--puck-font-family`). */\n  font: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif',\n} as const;\n\nexport type ShellTokens = typeof shellTokens;\n\n/**\n * The CSS custom-property name behind each `shellTokens` key. `shell.css` sets\n * these on `.es-editor`; override any of them on (or above) the editor root to\n * re-theme without shipping new CSS. The `shell-tokens.test.ts` parity gate\n * proves this map, `shellTokens` and `shell.css` never drift apart.\n */\nexport const shellCssVars: Record<keyof ShellTokens, string> = {\n  accent: '--es-accent',\n  accentTint: '--es-accent-tint',\n  accentTintStrong: '--es-accent-tint-strong',\n  accentText: '--es-accent-text',\n  accentRing: '--es-accent-ring',\n  accentShadow: '--es-accent-shadow',\n  onAccent: '--es-on-accent',\n  appBg: '--es-app-bg',\n  previewBg: '--es-preview-bg',\n  panel: '--es-panel',\n  raised: '--es-raised',\n  topbarBg: '--es-topbar-bg',\n  frameBg: '--es-frame-bg',\n  hover: '--es-hover',\n  hatch: '--es-hatch',\n  addcardVeil: '--es-addcard-veil',\n  fieldBg: '--es-field-bg',\n  trackBg: '--es-track-bg',\n  inputBorder: '--es-input-border',\n  fieldText: '--es-field-text',\n  fieldPlaceholder: '--es-field-placeholder',\n  knob: '--es-knob',\n  text: '--es-text',\n  textStrong: '--es-text-strong',\n  textSecondary: '--es-text-secondary',\n  muted: '--es-muted',\n  icon: '--es-icon',\n  disabled: '--es-disabled',\n  divider: '--es-divider',\n  line: '--es-line',\n  btnBorder: '--es-btn-border',\n  btnText: '--es-btn-text',\n  chipBg: '--es-chip-bg',\n  chipFg: '--es-chip-fg',\n  brandSquare: '--es-brand-square',\n  deviceBorder: '--es-device-border',\n  toastBg: '--es-toast-bg',\n  toggleOff: '--es-toggle-off',\n  scrollbar: '--es-scrollbar',\n  scrollbarHover: '--es-scrollbar-hover',\n  danger: '--es-danger',\n  dangerStrong: '--es-danger-strong',\n  dangerTint: '--es-danger-tint',\n  warning: '--es-warning',\n  previewTint: '--es-preview-tint',\n  success: '--es-success',\n  panelRadius: '--es-panel-radius',\n  rowRadius: '--es-row-radius',\n  fieldRadius: '--es-field-radius',\n  panelGap: '--es-panel-gap',\n  panelShadow: '--es-panel-shadow',\n  topbarShadow: '--es-topbar-shadow',\n  raisedShadow: '--es-raised-shadow',\n  font: '--es-font',\n};\n\n/**\n * Puck's own accent ramp + font, re-tinted to the shell blue. Puck reads these\n * fixed variable names (`--puck-color-azure-NN`, `--puck-font-family`) directly,\n * so they are NOT part of the `--es-*` set — but they had been copied verbatim\n * into BOTH editors' CSS, so `shell.css` now declares them once on `.es-editor`.\n * Kept here as the JS record so the parity gate can prove `shell.css` matches.\n */\nexport const puckAzureRamp: Record<string, string> = {\n  '--puck-color-azure-01': '#172554',\n  '--puck-color-azure-02': '#1e3a8a',\n  '--puck-color-azure-03': '#1d4ed8',\n  '--puck-color-azure-04': '#2563eb',\n  '--puck-color-azure-05': '#3b82f6',\n  '--puck-color-azure-06': '#60a5fa',\n  '--puck-color-azure-07': '#93c5fd',\n  '--puck-color-azure-08': '#bfdbfe',\n  '--puck-color-azure-09': '#dbeafe',\n  '--puck-color-azure-10': '#eff6ff',\n  '--puck-color-azure-11': '#f5f9ff',\n  '--puck-color-azure-12': '#fafcff',\n};\n"]}