@ashley-shrok/viewmodel-shell 5.1.2 → 6.0.0

package/styles/default.css

@@ -29,6 +29,21 @@
   --vms-error:       #c2453d;
   --vms-error-glow:  rgba(194, 69, 61, 0.10);
   --vms-warning:       #8a630d;
+  /* Warning is the ONE tone with a polarity split. --vms-warning is deliberately
+     DARK on light themes because it doubles as a TEXT/border color (.vms-text--warning,
+     button/badge outline) and warning-colored TEXT on a light surface must be dark to
+     clear WCAG-AA — a bright yellow text on white is unreadable. But a warning FILL has
+     no such constraint: the standard design-system pattern (Bootstrap/Material) is a
+     BRIGHT yellow fill with a DARK foreground. --vms-warning-fill + --vms-on-warning-fill
+     are that pair — used on every SOLID warning fill (toast, primary badge/button, the
+     toned steps marker) so warning actually reads as a yellow that grabs attention on
+     light themes, while staying AA (dark #2a2205 on #e0a823 = 7.37:1). Theme-independent
+     (a solid amber fill reads the same on any page surface); dark themes need no override
+     — their --vms-warning is already #e0a823, so this ALSO fixes the white-on-bright-amber
+     fill that failed AA on dark themes (2.14:1). Tints (section/table/chip) keep the base
+     --vms-warning as their own consistent family. */
+  --vms-warning-fill:    #e0a823;
+  --vms-on-warning-fill: #2a2205;
   --vms-priority-high: #d76410;
   --vms-success:       #2da359;
   --vms-info:          #2277dd;
@@ -473,6 +488,32 @@ body:has(.vms-page--fill) { margin: 0; }
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
+/* Per-tile tone (StatItem.tone) — a toned stat becomes a subtly tinted chip
+   (surface tint + colored border, the SAME color-mix formula as Section tone, so
+   it inherits that surface's already-AA-cleared text contrast) so an unhealthy
+   stat reads at a glance. Only toned items get the chip surface; neutral items
+   stay byte-identical to today's inline stat. --_tone resolves per tone below. */
+.vms-stat-bar__item--tone-danger  { --_tone: var(--vms-error); }
+.vms-stat-bar__item--tone-warning { --_tone: var(--vms-warning); }
+.vms-stat-bar__item--tone-success { --_tone: var(--vms-success); }
+.vms-stat-bar__item--tone-info    { --_tone: var(--vms-info); }
+.vms-stat-bar__item--toned {
+  align-items: center;
+  gap: var(--vms-space-2xs);
+  padding: var(--vms-space-2xs) var(--vms-space-sm);
+  border: 1px solid var(--_tone);
+  border-radius: var(--vms-radius-md);
+  background: color-mix(in srgb, var(--_tone) 14%, var(--vms-surface));
+}
+/* The tint + border carry the status (the Section-tone model); the value + label
+   stay NEUTRAL and readable rather than tone-colored — tone text on its own 14%
+   tint fails WCAG-AA (success bottomed at 2.79:1 across the light themes), while
+   neutral text on the tint clears it exactly as Section tone's neutral text does. */
+.vms-stat-bar__item--toned .vms-stat-bar__value { color: var(--vms-text); }
+/* Label strengthens from muted to full text on a toned chip: muted on the 14%
+   tint bottoms at 4.21:1 (just under the 4.5 AA-text bar), and an emphasized chip
+   reads better with a solid label anyway. Full text on the tint is 11.14:1. */
+.vms-stat-bar__item--toned .vms-stat-bar__label { color: var(--vms-text); }
 
 /* ── Form ── */
 .vms-form { display: flex; flex-direction: column; gap: var(--vms-space-sm); align-items: stretch; }
@@ -574,6 +615,231 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
   overflow: auto;
 }
 
+/* Lookup / reference picker (FieldNode inputType="lookup" / "lookup-multiple",
+   Phase 21) — an editable combobox whose listbox popup floats over the page.
+   Built entirely from the existing .vms-field__* tokens: no new colors, no new
+   custom properties, so every theme recolors it automatically. */
+.vms-field--lookup { position: relative; }
+.vms-field__popup {
+  /* Anchored to .vms-field--lookup's positioning context, floating over what
+     follows so the popup never reflows the form when it opens. */
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  margin-top: var(--vms-space-2xs);
+  max-height: 16rem;
+  overflow-y: auto;
+  background: var(--vms-surface);
+  border: 1px solid var(--vms-border);
+  border-radius: var(--vms-radius);
+  /* A literal rgba, matching the toast overlay's shadow (the house precedent
+     for a floating surface) — there is no --vms-shadow token, and inventing
+     one would mean touching all 12 themes for a drop shadow. */
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
+  color-scheme: var(--vms-color-scheme);
+}
+/* The popup is rendered ALWAYS and hidden when closed (aria-controls must stay
+   valid while hidden). This rule is LOAD-BEARING: the UA's [hidden] default is
+   display:none, but the block above would otherwise win on specificity and the
+   popup would be permanently visible. */
+.vms-field__popup[hidden] { display: none; }
+/* The lookup's aria-live status regions and its assistive hint: available to
+   assistive tech, invisible on screen. Deliberately NOT display:none and NOT
+   visibility:hidden — both REMOVE the element from the accessibility tree, so a
+   live region styled that way is never announced and the hint is never read.
+   This is the standard visually-hidden clip; it must stay clipped-but-rendered. */
+.vms-field__live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.vms-field__option {
+  padding: var(--vms-space-xs) var(--vms-space-md);
+  font-size: var(--vms-text-md);
+  line-height: var(--vms-control-line);
+  color: var(--vms-text);
+  cursor: pointer;
+  /* §7 item 33 (reflow) — option text WRAPS rather than truncating: a
+     candidate is a person's or record's name, not a status word, and at high
+     magnification a truncated option is unreadable. The border delimits a
+     wrapped option so it never reads as two separate suggestions (GOV.UK's 12x
+     tester: "the words just looked like separate suggestions that didn't make
+     much sense"). */
+  overflow-wrap: anywhere;
+  border-bottom: 1px solid var(--vms-border);
+}
+.vms-field__option:last-child { border-bottom: none; }
+.vms-field__option:hover { background: var(--vms-surface-2); }
+/* The active (aria-activedescendant) option. DOM focus stays in the input, so
+   :focus cannot express this — the highlight must be driven off aria-selected,
+   which is the same fact the live region announces. */
+.vms-field__option[aria-selected="true"] {
+  background: var(--vms-accent-glow);
+  color: var(--vms-text);
+}
+
+/* ── lookup chips (Phase 21, LOOK-03; BOTH modes since 21-14 / D2a) ──
+   The selection, rendered OUTSIDE the combobox as chip(s) — for `lookup` AND
+   `lookup-multiple`, from ONE implementation. The only difference between the
+   two is arity (single replaces on pick, multi appends), which lives in
+   browser.ts and has no expression here at all: a chip is a chip.
+
+   🚨 We diverge from SLDS deliberately and it is worth knowing why, because the
+   survey says the opposite: Salesforce renders single-select's selection INSIDE
+   the input and ships no pill element for single at all. 21-13 followed them,
+   and the operator found that model has NOWHERE TO CLICK TO TYPE — the pill was
+   the input, so clicking in just appended to the name. Their model is coherent
+   given clear-then-search; ours is coherent given always-typeable. (There is no
+   `.vms-field--lookup-selected` any more; do not resurrect it.)
+
+   Structure is role=list/listitem + a real <button> (design §7 item 24) — see
+   browser.ts. This is presentation only; nothing here is on the wire.
+
+   ⚠️ CONTRAST: the chip's fg/bg pair is NOT covered by the fixed 13-pair
+   check:aa-contrast gate, so it is hand-measured across the shipped default +
+   all 12 themes: 10.63:1 worst (dark-*), 13.60:1 (light-*), vs a 4.5:1 text bar.
+   Single-select reuses this exact pair rather than inventing a token, so it adds
+   no new pair to measure. Re-measure if --_chip-tone ever stops being
+   --vms-text. */
+.vms-field__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--vms-space-2xs);
+  /* Reset the <ul>. NOTE this is exactly why browser.ts sets role="list"
+     EXPLICITLY: `list-style: none` strips the implicit list/listitem roles in
+     Safari/VoiceOver, so a styled <ul> silently stops being a list — the
+     accessibility regression is caused BY this line and repaired in the
+     renderer. Do not "clean up" that seemingly-redundant role. */
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.vms-field__chip {
+  /* The .vms-badge private-tone technique (default.css, .vms-badge): ONE private
+     custom property holds the working color and the fill, text and border all
+     derive from it, so EVERY THEME RECOLORS AUTOMATICALLY — --vms-text and
+     --vms-surface are theme-owned. Retoning a chip would be one line. */
+  --_chip-tone: var(--vms-text);
+  display: inline-flex;
+  align-items: center;
+  /* Hug content in ANY parent layout. Carried over from .vms-badge's comment
+     (written in 5.1.2 for exactly this failure mode) because the chip hits it
+     IDENTICALLY: a chip is semantically inline, but as a flex item it is
+     BLOCKIFIED (inline-flex → flex) and the chip row's align-items would then
+     stretch it. A definite cross-size opts out of that stretch —
+     align-items:stretch only stretches items whose cross size is `auto`.
+     Deliberately NOT align-self:start, which would top-anchor the chip since a
+     child's align-self beats the parent's align-items. */
+  width: fit-content;
+  max-width: 100%;
+  gap: var(--vms-space-2xs);
+  font-size: var(--vms-text-xs);
+  font-weight: 600;
+  /* Not the badge's `1`: a chip's text WRAPS (below), and line-height:1 makes
+     wrapped lines collide. */
+  line-height: 1.35;
+  /* Tighter on the right — the remove button carries its own hit area. */
+  padding: 0.2em 0.3em 0.2em 0.6em;
+  border-radius: 999px;
+  /* 🚨 DELIBERATELY NOT `white-space: nowrap` — the ONE thing not copied from
+     .vms-badge, and the easiest to reintroduce by "consistency". Design §7 item
+     33: chip text must WRAP WITHOUT TRUNCATION. A badge is a short status word;
+     a chip holds a PERSON'S NAME. GOV.UK's 12x-magnification tester on the
+     truncation failure: "Some larger country names may take over two lines. It
+     wasn't always clear to him that this had happened — the words just looked
+     like separate suggestions that didn't make much sense." The pill border-
+     radius + the surface knockout are what delimit a wrapped chip so it never
+     reads as two. (The popup's options carry the same rule and their own
+     delimiting border — see .vms-field__option.) */
+  overflow-wrap: anywhere;
+  /* The polarity-adaptive knockout — the house technique, used 18x in this file.
+     Mixing TOWARD --vms-surface (never toward white/black) auto-adapts to light
+     AND dark themes with ZERO per-theme deepening.
+     ⚠️ PROVISIONAL MIX RATIO — 12%, not the badge's 16%, and Plan 21-09's
+     hand-check owns the final number. Two reasons it must not simply inherit
+     16%: (1) the fg/bg pair here is a NEW one the fixed 13-pair check:aa-contrast
+     gate does NOT auto-cover; (2) the badge's 16% was tuned for a small badge on
+     a PAGE surface. This is deliberately conservative — the tone is --vms-text
+     (near-maximal contrast against a 12% tint of ITSELF in the surface), not the
+     badge's --vms-text-muted, because a chip carries CONTENT (a name) rather
+     than muted status. The chip's background is opaque, so the field's input
+     backdrop does not enter the contrast pair. */
+  background: color-mix(in srgb, var(--_chip-tone) 12%, var(--vms-surface));
+  color: var(--_chip-tone);
+  border: 1px solid transparent;
+}
+/* §7 item 31 — the two-step Backspace's ARMED chip: the first press highlights
+   the last chip rather than deleting it. This is the VISUAL half only; the
+   announcement is the half that matters (browser.ts), because an arm that were
+   only a CSS class would leave an AT user pressing Backspace, hearing nothing,
+   pressing again, and deleting something they were never told about. Border, not
+   a fill swap, so it cannot disturb the contrast pair above. */
+.vms-field__chip--armed { border-color: var(--_chip-tone); }
+.vms-field__chip-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  /* Never let the button shrink or wrap away from its label — the chip's text
+     wraps; its remove affordance must not. */
+  flex: none;
+  align-self: flex-start;
+  width: 1.4em;
+  height: 1.4em;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  /* Inherit the chip's tone rather than re-deriving it, so a retoned chip keeps
+     a consistent remove button for free. */
+  color: inherit;
+  font-family: inherit;
+  font-size: 1.1em;
+  line-height: 1;
+  cursor: pointer;
+}
+.vms-field__chip-remove:hover {
+  background: color-mix(in srgb, var(--_chip-tone) 22%, transparent);
+}
+/* The chip is INTERACTIVE where the badge is inert, so its remove button needs a
+   visible focus ring: it is a REAL focusable button (§7 item 26 gives the chips a
+   roving tabindex precisely so DOM focus lands here), and it is reachable by
+   keyboard alone. :focus-visible, so a mouse click doesn't ring it.
+
+   🚨 DELIBERATELY --_chip-tone, NOT --vms-accent (which is what
+   .vms-field__input:focus uses, and what this rule used before Plan 21-09's
+   hand-check). Measured, not assumed: --vms-accent clears the 3:1 non-text bar
+   (SC 1.4.11) against --vms-surface on all 13 targets, but only BARELY on
+   light-amber/light-green/light-teal (3.34 / 3.23 / 3.28). The chip's fill is a
+   TINTED surface, and that tint eats the entire remaining margin — the accent
+   ring measures 2.63 / 2.54 / 2.58 against the chip fill on those three themes:
+   a FAILING focus indicator on a keyboard-only affordance.
+
+   The mix ratio is NOT the lever, which is the non-obvious part: the ring still
+   fails at a 4% tint and only reaches 3.10:1 at 2% — a chip with no visible fill
+   at all. No chip worth rendering can rescue the accent here.
+
+   --_chip-tone is the structural fix and needs no per-theme rule: it is the same
+   polarity-adaptive knockout pair as the chip's TEXT (mixing toward
+   --vms-surface), so it inherits that pair's measured headroom — 10.63:1 worst
+   (dark-*), 13.60:1 (light-*), vs a 3:1 bar. It is also what the chip's own
+   private-tone technique already does everywhere else: .vms-field__chip--armed
+   borders with it and this button's `color` inherits it. The accent ring was the
+   outlier, not the convention. Re-measure if --_chip-tone ever stops being
+   --vms-text. */
+.vms-field__chip-remove:focus-visible {
+  outline: 2px solid var(--_chip-tone);
+  outline-offset: 1px;
+}
+
 /* Form-collected checkbox (FieldNode inputType="checkbox") — inline label. */
 .vms-field--checkbox { flex-direction: row; align-items: center; gap: var(--vms-space-xs); }
 .vms-field--checkbox .vms-field__input {
@@ -650,6 +916,16 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
   border-color: var(--_btn-tone);
   color: #fff;
 }
+/* Warning is the polarity exception: a filled warning button uses the bright fill +
+   dark label (white on warning fails AA — 3.2/2.14:1 light/dark; see --vms-warning-fill).
+   Border matches the fill (no rim) — same as every other primary tone, which is the
+   conventional filled-warning look (cf. Bootstrap .btn-warning). The dark label + filled
+   shape identify the control; a dark rim read as out-of-place next to danger/success/info. */
+.vms-button--warning.vms-button--primary {
+  background: var(--vms-warning-fill);
+  border-color: var(--vms-warning-fill);
+  color: var(--vms-on-warning-fill);
+}
 .vms-button--primary:hover { filter: brightness(1.1); }
 .vms-button--secondary {
   background: transparent;
@@ -1103,7 +1379,10 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
    success/info are deepened (color-mix w/ black) so white at 14px also clears
    4.5:1 (their pure tokens sit at 3.2 / 4.4:1). */
 .vms-toast--danger  { background: var(--vms-error);   color: #fff; }
-.vms-toast--warning { background: var(--vms-warning); color: #fff; }
+/* Warning uses the bright fill + dark foreground (see --vms-warning-fill): white on
+   the dark #8a630d was muddy on light and white on the bright #e0a823 fails AA on dark
+   (2.14:1). Dark text on the bright fill is 7.37:1 and reads as an attention-grabbing yellow. */
+.vms-toast--warning { background: var(--vms-warning-fill); color: var(--vms-on-warning-fill); }
 .vms-toast--success { background: color-mix(in srgb, var(--vms-success) 80%, #000); color: #fff; }
 .vms-toast--info    { background: color-mix(in srgb, var(--vms-info) 88%, #000);    color: #fff; }
 /* fade-out applied just before removal. */
@@ -1178,6 +1457,14 @@ select.vms-field__input  { cursor: pointer; padding-right: var(--vms-space-xl);
   border-color: var(--_badge-tone);
   color: #fff;
 }
+/* Warning polarity exception: a filled warning badge uses the bright fill + dark text
+   (white on warning fails AA; see --vms-warning-fill). Border matches the fill (no rim),
+   like every other primary tone. */
+.vms-badge--warning.vms-badge--primary {
+  background: var(--vms-warning-fill);
+  border-color: var(--vms-warning-fill);
+  color: var(--vms-on-warning-fill);
+}
 .vms-badge--secondary {
   background: transparent;
   border-color: var(--_badge-tone);
@@ -1305,6 +1592,52 @@ button.vms-breadcrumb__link {
 }
 .vms-steps__label { color: var(--vms-text); font-weight: 600; }
 .vms-steps__description { color: var(--vms-text-muted); font-size: var(--vms-text-xs); }
+/* Per-step tone (StepItem.tone) — overlays the universal status color onto the
+   marker, ORTHOGONAL to the derived done/current/upcoming treatment: the tone
+   recolors whatever the state already does (filled states fill in the tone;
+   upcoming stays outlined but in the tone), so a failed/blocked stage reads red
+   without losing the reached/not-reached distinction. Two-class selectors
+   outspecify the base state rules. The knockout glyph stays --vms-surface
+   (polarity-adaptive, >=3:1 on the filled tone tokens across all themes — a
+   graphical indicator whose state also rides aria-label + glyph + label text). */
+.vms-steps__step--tone-danger  { --_tone: var(--vms-error); }
+.vms-steps__step--tone-warning { --_tone: var(--vms-warning); }
+.vms-steps__step--tone-success { --_tone: var(--vms-success); }
+.vms-steps__step--tone-info    { --_tone: var(--vms-info); }
+/* Tone recolors the DERIVED treatment: filled states (done/current) fill in the tone;
+   upcoming stays outlined but in the tone — preserving the reached/not-reached read while
+   overlaying status color. Two-class selectors outspecify the base state rules. */
+.vms-steps__step--toned.vms-steps__step--done .vms-steps__marker,
+.vms-steps__step--toned.vms-steps__step--current .vms-steps__marker {
+  background: var(--_tone);
+  border-color: var(--_tone);
+  color: var(--vms-surface);
+}
+.vms-steps__step--toned.vms-steps__step--upcoming .vms-steps__marker {
+  border-color: var(--_tone);
+  color: var(--_tone);
+}
+.vms-steps__step--toned.vms-steps__step--current .vms-steps__marker {
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--_tone) 30%, transparent);
+}
+/* Warning FILLED (done/current): bright fill + dark glyph, no rim (see --vms-warning-fill). */
+.vms-steps__step--tone-warning.vms-steps__step--done .vms-steps__marker,
+.vms-steps__step--tone-warning.vms-steps__step--current .vms-steps__marker {
+  background: var(--vms-warning-fill);
+  border-color: var(--vms-warning-fill);
+  color: var(--vms-on-warning-fill);
+}
+/* Warning UPCOMING (outline): try the BRIGHT amber for the ring + number rather than the
+   dark --vms-warning. Bright amber as a line/digit on white is ~2.14:1 (below the strict
+   bar), so this is a judgment call on visual legibility — the step's state is multi-channel
+   (aria-label + number + position), so color is not its sole carrier. */
+.vms-steps__step--tone-warning.vms-steps__step--upcoming .vms-steps__marker {
+  border-color: var(--vms-warning-fill);
+  color: var(--vms-warning-fill);
+}
+.vms-steps__step--tone-warning.vms-steps__step--current .vms-steps__marker {
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vms-warning-fill) 35%, transparent);
+}
 
 /* Connector — the OUTGOING segment from this marker toward the next (hidden on
    the last step). Colored by the step's own state: accent once the step is done,