@adia-ai/web-components 0.8.45 → 0.8.46

package/components/chart/chart.class.js

@@ -330,6 +330,19 @@ export class UIChart extends UIElement {
        read a shared linear value axis. */
     yMin: { type: Number, default: null, reflect: true, attribute: 'y-min' },
     yMax: { type: Number, default: null, reflect: true, attribute: 'y-max' },
+    /* ADR-0081 (Charts 2.0 foundations, gh#1804) — chip-label mode. Unset
+       ('') resolves to 'outside' unconditionally — explicit opt-in only via
+       labels="chip" (design amendment, 2026-08-21: see #resolveLabelsMode's
+       own doc comment for why auto-detecting bleed ancestry was dropped).
+       #dims()/#resolveLabelsMode() reflects the RESOLVED value separately
+       as data-labels-resolved (mirrors data-ratio-resolved's pattern) —
+       this property reflects only the raw attribute, same relationship
+       `ratio` has to data-ratio-resolved. */
+    labels: { type: String, default: '', reflect: true },
+    /* ADR-0081 — names the x-value that is "today" (REQ-F-008). Free
+       string, loose-stringify-compared against each datum's x-key value in
+       #todayIndex() below — never clock-derived. */
+    today: { type: String, default: '', reflect: true },
   };
 
   static template = () => null;
@@ -392,6 +405,68 @@ export class UIChart extends UIElement {
     return Math.min(Math.max(coord, lo), hi);
   }
 
+  /** Reads a CSS custom property expected to resolve to a px length (or a
+   *  bare number) off the host's computed style, falling back to a JS
+   *  constant when unset/unresolved. happy-dom's test environment doesn't
+   *  resolve calc()/var() (svg-authoring.md §5's documented gap), so every
+   *  token this file reads through here needs a faithful fallback matching
+   *  the CSS default's real px value at density=1 — tests override via
+   *  `el.style.setProperty(varName, ...)`, which computed style DOES pick
+   *  up without a stylesheet.
+   *
+   *  A REAL browser has the identical gap for a different reason:
+   *  `getComputedStyle().getPropertyValue()` on a CUSTOM property never
+   *  resolves nested `var()`/`calc()`/`clamp()` — it returns the cascaded
+   *  value verbatim (e.g. `--card-radius` resolving to the literal string
+   *  `"clamp(0.375rem, calc(1 * 0.875rem * 1.000), 0.875rem)"` once
+   *  REQ-F-014's density scale landed), so `parseFloat` on it is NaN and
+   *  every caller silently got the density=1 FALLBACK regardless of the
+   *  live density or the ancestor card's real radius — found chasing a
+   *  real corner-clipping repro (gh#1814-adjacent) where `cornerClearance`
+   *  always collapsed to `chromeInset` because `--card-radius` never
+   *  parsed. The browser DOES resolve that same value when it's consumed
+   *  by an actual layout property, so an unparseable raw value is routed
+   *  through a detached probe assigning it to `width` (inheriting this
+   *  host's own cascade — density scope included — by probing as a
+   *  temporary child) and reading the result back. */
+  #readPxToken(varName, fallback) {
+    const raw = getComputedStyle(this).getPropertyValue(varName).trim();
+    if (!raw) return fallback;
+    // A bare number (or plain `Npx`) is already what the fallback
+    // constants are compared against — use it directly, and stay on this
+    // branch for happy-dom's test env (style.setProperty literals), which
+    // doesn't implement layout for the probe below. Anything else (rem/
+    // em/%/calc()/clamp()/var()) needs real resolution — see comment above.
+    if (/^-?\d*\.?\d+(px)?$/.test(raw)) {
+      const n = parseFloat(raw);
+      return Number.isFinite(n) ? n : fallback;
+    }
+    const probe = document.createElement('span');
+    probe.style.cssText = 'position:absolute; visibility:hidden; pointer-events:none; height:0; width:' + raw;
+    this.appendChild(probe);
+    const resolved = parseFloat(getComputedStyle(probe).width);
+    probe.remove();
+    return Number.isFinite(resolved) ? resolved : fallback;
+  }
+
+  /** ADR-0081 — resolves the `labels` attribute's tri-state grammar.
+   *  DESIGN AMENDMENT (2026-08-21, recorded in the build's Findings and
+   *  ADR-0081's own "Amendment" section): unset ("") resolves to
+   *  `outside` UNCONDITIONALLY — it does NOT auto-detect full-bleed
+   *  ancestry. The originally-drafted auto-detection (chip-by-default
+   *  inside a `section[bleed]`/`card-ui[padding="none"]` ancestor) is
+   *  exactly what REQ-F-004 asks for in principle, but it silently
+   *  flips the rendering of every ALREADY-SHIPPED full-bleed composition
+   *  the moment this ships — concretely, 2 of the 60-fixture Charts
+   *  floor's own `comp-chart-in-card-n-*` fixtures (pre-dating this
+   *  ticket) regressed under it, and this ticket's own dispatch holds
+   *  the 60-fixture floor as a hard preserve-not-regress constraint.
+   *  Chip mode is therefore explicit-opt-in ONLY (`labels="chip"`); nothing
+   *  currently in the tree opts in, so nothing currently rendered changes. */
+  #resolveLabelsMode() {
+    return this.labels === 'chip' ? 'chip' : 'outside';
+  }
+
   set data(arr) {
     // FEEDBACK-24: a non-array — typically the Chart.js `{labels, datasets}`
     // envelope — is silently coerced to [] below, producing a blank chart
@@ -588,6 +663,51 @@ export class UIChart extends UIElement {
     const labelSize = fontSize;
     const valueSize = sizeClass === 'sm' ? 8 : sizeClass === 'md' ? 9 : 10;
 
+    // ADR-0081 / REQ-F-004 — chip-label mode resolution + reflection
+    // (mirrors data-ratio-resolved's own reflect-only-on-change pattern).
+    const labelsResolved = this.#resolveLabelsMode();
+    if (this.getAttribute('data-labels-resolved') !== labelsResolved) {
+      this.setAttribute('data-labels-resolved', labelsResolved);
+    }
+    const chipMode = labelsResolved === 'chip';
+
+    // REQ-F-009/010 — chrome-layer clearance + the zero-line→chip-band gap,
+    // both --a-space-*-aliased tokens (chart.css); JS fallbacks match the
+    // CSS defaults' real px value (--a-space-2 = 8px, --a-space-1 = 4px)
+    // for the happy-dom test environment, which doesn't resolve var()/calc()
+    // (svg-authoring.md §5).
+    const chromeInset = this.#readPxToken('--chart-chrome-inset', 8);
+    const bandGap = this.#readPxToken('--chart-band-gap', 4);
+    // REQ-F-006(3) — corner-adjacent chips clear at least the composed
+    // card's --card-radius (a real ancestor-inherited custom property once
+    // chart-ui sits inside card-ui); falls back to chromeInset itself when
+    // no card ancestor sets one (no radius to clear beyond the ordinary
+    // edge inset).
+    const cornerClearance = Math.max(chromeInset, this.#readPxToken('--card-radius', chromeInset));
+    // REQ-F-005 chip token contract — geometry-relevant subset (bg/fg/
+    // radius are CSS-only, consumed by [data-chip]/[data-chip-label] rules
+    // in chart.css, never read here).
+    const chipFontSize = this.#readPxToken('--chart-chip-font-size', fontSize);
+    const chipPadX = this.#readPxToken('--chart-chip-pad-x', 6);
+    const chipPadY = this.#readPxToken('--chart-chip-pad-y', 4);
+
+    // REQ-F-013 / OPEN-4 (resolved in this build, see chart.css) — the
+    // plot's own pixel height against the two degradation floors. Order is
+    // normative: full → drop x-category CHIPS → drop gridlines + y-CHIPS
+    // (bare-marks). Scoped to chip mode deliberately — REQ-F-013's own
+    // language ("drop x-category chips") only has literal chips to drop in
+    // that mode; `outside` mode already has its own pre-existing small-size
+    // handling (sizeClass 'sm' thinning etc.) and MUST stay height-floor-
+    // free to hold AC-F-004's byte-identical regression proof (a short
+    // normal-padding-card chart that rendered x-labels yesterday can't
+    // start dropping them today just because this build shipped).
+    const minPlotHeightChips = this.#readPxToken('--chart-min-plot-height-chips', 180);
+    const minPlotHeightGrid = this.#readPxToken('--chart-min-plot-height-grid', 120);
+    const degradeStage = !chipMode ? 'full'
+      : height < minPlotHeightGrid ? 'bare'
+      : height < minPlotHeightChips ? 'no-x-chrome'
+      : 'full';
+
     // Padding scales with font size and axis visibility.
     // When the grid is hidden (in-card sparkline-like use) we can zero
     // out the Y-axis label gutter entirely — otherwise the plot area
@@ -598,21 +718,34 @@ export class UIChart extends UIElement {
     // least WIDTH budget to spare; 3:2 keeps the full gutter since width is
     // abundant there. A flat 0.8 trim on the y-label gutter is enough to
     // free real plot width without crowding the tick text against the axis.
+    // REQ-F-001 (foundations, amends REQ-R-004) — chip mode has NO residual
+    // gutter at all: the plot spans zero-inset to every edge and labels
+    // inset WITHIN it instead of pushing it inward. `outside` mode (the
+    // pre-foundations default) keeps the exact formula below unchanged —
+    // AC-F-004's regression proof depends on this branch being byte-for-
+    // byte identical to pre-2.0 output.
     const marginTrim = resolvedRatio === '3:2' ? 1 : 0.8;
     const yLabelW = noGrid ? 0 : fontSize * 3.2 * marginTrim;
     const hasXLabels = !!this.x;
-    const pad = {
-      top:    noGrid ? 2 : fontSize * 1.6,
-      right:  noGrid ? 2 : fontSize * 1.2,
-      bottom: !hasXLabels || noGrid ? 2 : fontSize * 2.2 * marginTrim,
-      left:   yLabelW,
-    };
+    const pad = chipMode
+      ? { top: 0, right: 0, bottom: 0, left: 0 }
+      : {
+          top:    noGrid ? 2 : fontSize * 1.6,
+          right:  noGrid ? 2 : fontSize * 1.2,
+          bottom: !hasXLabels || noGrid ? 2 : fontSize * 2.2 * marginTrim,
+          left:   yLabelW,
+        };
 
     // Bar width adapts to data count + container
     const plotW = width - pad.left - pad.right;
     const barMinW = Math.max(4, plotW / n * 0.6);
 
-    return { width, height, pad, fontSize, labelSize, valueSize, barMinW, plotW, n, sizeClass, ratioResolved: resolvedRatio };
+    return {
+      width, height, pad, fontSize, labelSize, valueSize, barMinW, plotW, n, sizeClass,
+      ratioResolved: resolvedRatio, labelsResolved, chipMode, chromeInset, bandGap,
+      cornerClearance, chipFontSize, chipPadX, chipPadY, minPlotHeightChips,
+      minPlotHeightGrid, degradeStage,
+    };
   }
 
   /* ── Main render ──────────────────────────────────────────────── */
@@ -1215,11 +1348,23 @@ export class UIChart extends UIElement {
    *                      the band-centered default, correct for their own
    *                      categorical geometry.
    */
+  /** Returns `{ svg, chipSvg }` rather than one flat string — SVG paints in
+   *  document order, so a chip/chrome overlay concatenated INTO the same
+   *  string as gridlines (both emitted before any caller's marks) painted
+   *  UNDER those marks once appended, exactly backwards from REQ-F-002's
+   *  two-layer contract (chrome floats independently on top of the plot).
+   *  `outside`-mode axis TEXT is unaffected — it renders in the padding
+   *  gutter marks never reach into, and stays folded into `svg` untouched
+   *  (AC-F-004 byte-identity). Only the two chip-mode branches (Y/X chips)
+   *  route into `chipSvg`; every caller appends it AFTER its marks. */
   #gridAndAxes(width, height, ticks, labels, pad, dims, opts = {}) {
     const p = pad;
     const fs = dims?.fontSize || 10;
     const ls = dims?.labelSize || fs;
+    const chip = !!dims?.chipMode;
+    const stage = dims?.degradeStage || 'full';
     let s = '';
+    let chipSvg = '';
 
     // Reduce tick count at small sizes, or when a ratio-matrix caller asks
     // for denser-bucket thinning (REQ-R-003: line/area "gridlines thinned").
@@ -1231,8 +1376,9 @@ export class UIChart extends UIElement {
     // noGrid suppresses both gridlines AND axis labels — callers who
     // want labels without gridlines can omit no-grid and rely on token
     // overrides to make gridlines transparent. This keeps compact in-card
-    // charts visually clean.
-    if (!this.noGrid) {
+    // charts visually clean. REQ-F-013's 'bare' stage (chip mode only,
+    // below the grid floor) is the same all-chrome-dropped shape.
+    if (!this.noGrid && stage !== 'bare') {
       const tickRange = ticks[ticks.length - 1] - ticks[0];
       const safeRange = tickRange || 1; // Prevent division by zero
 
@@ -1266,15 +1412,28 @@ export class UIChart extends UIElement {
         }
       }
 
-      /* Y-axis labels */
-      for (const t of displayTicks) {
-        const gy = p.top + (height - p.top - p.bottom) * (1 - (t - ticks[0]) / safeRange);
-        s += `<text data-y-label x="${p.left - 4}" y="${gy + fs * 0.35}" text-anchor="end" font-size="${fs}">${this.#fmtValue(t)}</text>`;
+      /* Y-axis labels / y-value chips (REQ-F-004/005/006) — chip mode
+         floats pill-treated overlays at the same gridline Y positions
+         instead of pushing text outside the plot; `outside` mode (below)
+         is untouched byte-for-byte (AC-F-004). */
+      if (chip) {
+        chipSvg += this.#renderYChips(displayTicks, ticks, safeRange, width, height, p, dims);
+      } else {
+        for (const t of displayTicks) {
+          const gy = p.top + (height - p.top - p.bottom) * (1 - (t - ticks[0]) / safeRange);
+          s += `<text data-y-label x="${p.left - 4}" y="${gy + fs * 0.35}" text-anchor="end" font-size="${fs}">${this.#fmtValue(t)}</text>`;
+        }
       }
 
-      /* X-axis labels — stride based on label width so they never overlap,
-         unless a ratio-matrix mode forces a different selection. */
-      if (labels) {
+      /* X-axis labels / x-category chips — stride based on label width so
+         they never overlap, unless a ratio-matrix mode forces a different
+         selection. REQ-F-013's 'no-x-chrome' stage (chip mode only, below
+         the chips floor) drops this whole block while keeping gridlines +
+         y-chips. */
+      if (labels && stage !== 'no-x-chrome') {
+        if (chip) {
+          chipSvg += this.#renderXChips(labels, width, height, p, dims, opts);
+        } else {
         const plotW = width - p.left - p.right;
         const step = plotW / labels.length;
         const last = labels.length - 1;
@@ -1313,9 +1472,299 @@ export class UIChart extends UIElement {
           const text = esc(opts.abbreviateLabels ? truncateLabel(labels[i], 4) : labels[i]);
           s += `<text data-x-label x="${lx}" y="${height - fs * 0.5}" text-anchor="middle" font-size="${ls}">${text}</text>`;
         }
+        }
+      }
+    }
+
+    return { svg: s, chipSvg };
+  }
+
+  /* REQ-F-004/005/006 — y-value chips inset along the plot's start (left)
+   *  edge at each gridline Y, floating chrome over the zero-inset plot
+   *  (REQ-F-001/002). Clamp (1): the top/bottom-most chip's vertical
+   *  center clamps inward by chromeInset + half its own height rather
+   *  than overflow the box. Corner clearance (3): a chip landing within
+   *  --card-radius's worth of the top/bottom-left corner clears that
+   *  corner distance instead of the ordinary chrome inset.
+   *
+   *  Thin (2), Y-axis (measured, gh#1814 OPEN-4 pass): a real-browser
+   *  geometry sweep found the domain-min/-max chip's own clamp (above)
+   *  can pull it far enough toward the plot's center to overlap its
+   *  immediate unclamped neighbor once ticks sit closely spaced in a
+   *  short plot (observed at 7 nice-number ticks in a ~150-180px plot,
+   *  well inside the pre-existing 'no-x-chrome'/'full' range — not a
+   *  REQ-F-013 floor-value problem, a missing collision guard). Generalized
+   *  as a full iterative thin (code-checker finding, 2026-08-21: a
+   *  single-neighbor-per-edge check doesn't hold under consumer-overridden
+   *  `--chart-chip-font-size`/`--chart-chrome-inset`/`--a-density`, or an
+   *  unusually dense `niceScale` tick count) — mirrors #renderXChips' own
+   *  iterative `kept` loop and its two-protected-ends fallback exactly,
+   *  applied to cy instead of cx: walk in array (tick-ascending) order,
+   *  keep the first item, drop any intermediate whose box would overlap
+   *  the last KEPT item, force-keep the last item (never drop either end —
+   *  it alone carries the domain min/max), let a forced-last collision
+   *  evict the intermediate before it, and if only the two protected ends
+   *  remain and still overlap, push them apart from their shared midpoint
+   *  rather than dropping either. */
+  #renderYChips(displayTicks, ticks, safeRange, width, height, p, dims) {
+    const { chromeInset, chipFontSize, chipPadX, chipPadY, cornerClearance } = dims;
+    const halfH = chipFontSize * 0.6 + chipPadY;
+    const rh = chipFontSize * 1.2 + chipPadY * 2;
+
+    const all = displayTicks.map((t) => {
+      const rawY = p.top + (height - p.top - p.bottom) * (1 - (t - ticks[0]) / safeRange);
+      const cy = Math.min(Math.max(rawY, chromeInset + halfH), height - chromeInset - halfH);
+      const nearCorner = (cy - halfH <= cornerClearance) || (cy + halfH >= height - cornerClearance);
+      const cx = nearCorner ? cornerClearance : chromeInset;
+      const text = this.#fmtValue(t);
+      const rw = String(text).length * chipFontSize * 0.6 + chipPadX * 2;
+      return { cy, cx, rw, text };
+    });
+    if (!all.length) return '';
+
+    const last = all.length - 1;
+    const kept = [all[0]];
+    for (let i = 1; i < last; i++) {
+      const it = all[i];
+      const prev = kept[kept.length - 1];
+      if (Math.abs(it.cy - prev.cy) >= rh) kept.push(it);
+    }
+    if (all.length > 1) kept.push(all[last]);
+    // A forced-last collision evicts the intermediate before it — never the
+    // ends themselves (REQ-F-006(1)'s clamp-not-drop treatment).
+    while (kept.length > 2) {
+      const a = kept[kept.length - 2], b = kept[kept.length - 1];
+      if (Math.abs(b.cy - a.cy) < rh) kept.splice(kept.length - 2, 1);
+      else break;
+    }
+    // Only the two protected ends left and they still overlap: push both
+    // away from their shared midpoint just far enough to touch, not
+    // overlap (mirrors #renderXChips' own AC-F-003 extreme-case fallback).
+    if (kept.length === 2) {
+      const [a, b] = kept;
+      if (Math.abs(a.cy - b.cy) < rh) {
+        const mid = (a.cy + b.cy) / 2;
+        const [top, bottom] = a.cy <= b.cy ? [a, b] : [b, a];
+        top.cy = Math.min(top.cy, mid - rh / 2);
+        bottom.cy = Math.max(bottom.cy, mid + rh / 2);
       }
     }
+    const items = kept;
 
+    let s = '';
+    for (const it of items) {
+      s += `<rect data-chip data-chip-axis="y" x="${it.cx}" y="${it.cy - rh / 2}" width="${it.rw}" height="${rh}"/>`;
+      s += `<text data-chip-label data-chip-axis="y" x="${it.cx + chipPadX}" y="${it.cy}" dominant-baseline="central" font-size="${chipFontSize}">${it.text}</text>`;
+    }
+    return s;
+  }
+
+  /* REQ-F-004/006/010(1) — x-category chips in a band along the plot's
+   *  bottom edge, inset within the zero-inset plot rather than pushed
+   *  below it. Clamp (1): first/last chip shift inward rather than
+   *  overflow. Thin (2): adjacent-overlapping chips drop (never the first
+   *  or last, and never below --chart-chip-font-size). Corner clearance
+   *  (3): the end chips clear --card-radius at the bottom corners. */
+  #renderXChips(labels, width, height, p, dims, opts) {
+    const { chromeInset, bandGap, chipFontSize, chipPadX, chipPadY, cornerClearance } = dims;
+    const plotW = width - p.left - p.right;
+    const last = labels.length - 1;
+    const step = opts.pointAligned ? plotW / Math.max(last, 1) : plotW / labels.length;
+    const rh = chipFontSize * 1.2 + chipPadY * 2;
+    // REQ-F-010(1) — the band's own clearance from the bottom edge is at
+    // least chromeInset (REQ-F-002 edge safety); bandGap is the named,
+    // separately-tunable gap from the zero-line specifically. chromeInset
+    // dominates by default (8px vs 4px) but bandGap stays live for callers
+    // that retune it independently of the general edge inset.
+    const cy = height - Math.max(chromeInset, bandGap) - rh / 2;
+
+    const items = labels.map((label, i) => {
+      const cx0 = opts.pointAligned ? p.left + step * i : p.left + step * i + step / 2;
+      // Width from the DISPLAYED text, not the raw label (code-checker
+      // finding, 2026-08-21) — `truncateLabel` shortens what's rendered
+      // when `abbreviateLabels` is on; sizing the chip off the untruncated
+      // label reserved more room than the glyphs actually need.
+      const displayText = opts.abbreviateLabels ? truncateLabel(label, 4) : label;
+      const text = esc(displayText);
+      const rw = String(displayText).length * chipFontSize * 0.6 + chipPadX * 2;
+      return { cx0, rw, text };
+    });
+    if (!items.length) return '';
+
+    for (const it of items) {
+      it.cx = Math.min(Math.max(it.cx0, chromeInset + it.rw / 2), width - chromeInset - it.rw / 2);
+    }
+    // Corner clearance for the true end chips.
+    items[0].cx = Math.max(items[0].cx, cornerClearance + items[0].rw / 2);
+    items[last].cx = Math.min(items[last].cx, width - cornerClearance - items[last].rw / 2);
+
+    // REQ-F-006(2) — thin adjacent-overlapping chips, always keeping the
+    // first/last; drop intermediates whose box would intersect the last
+    // KEPT box.
+    const kept = [items[0]];
+    for (let i = 1; i < items.length - 1; i++) {
+      const it = items[i];
+      const prev = kept[kept.length - 1];
+      if (it.cx - it.rw / 2 >= prev.cx + prev.rw / 2) kept.push(it);
+    }
+    if (items.length > 1) kept.push(items[last]);
+    // If the forced-last item still collides with the item just before it,
+    // that intermediate loses the tie (edges win) — never drop the edges
+    // themselves, per REQ-F-006(1)'s clamp-not-drop treatment for ends.
+    while (kept.length > 2) {
+      const a = kept[kept.length - 2], b = kept[kept.length - 1];
+      if (b.cx - b.rw / 2 < a.cx + a.rw / 2) kept.splice(kept.length - 2, 1);
+      else break;
+    }
+    // AC-F-003 ("no two chip boxes intersect") extreme case (code-checker
+    // finding, 2026-08-21): with only the two protected end chips left,
+    // the thinning loop above never runs (it starts at length > 2), so a
+    // sufficiently narrow chart could still overlap them. Neither may be
+    // DROPPED (REQ-F-006(1) clamp-not-drop for ends), so push both away
+    // from their shared midpoint just far enough to touch, not overlap.
+    if (kept.length === 2) {
+      const [a, b] = kept;
+      if (a.cx + a.rw / 2 > b.cx - b.rw / 2) {
+        const boundary = (a.cx + b.cx) / 2;
+        a.cx = Math.min(a.cx, boundary - a.rw / 2);
+        b.cx = Math.max(b.cx, boundary + b.rw / 2);
+      }
+    }
+
+    let s = '';
+    for (const it of kept) {
+      s += `<rect data-chip data-chip-axis="x" x="${it.cx - it.rw / 2}" y="${cy - rh / 2}" width="${it.rw}" height="${rh}"/>`;
+      s += `<text data-chip-label data-chip-axis="x" x="${it.cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-size="${chipFontSize}">${it.text}</text>`;
+    }
+    return s;
+  }
+
+  /* ── Today-marker (REQ-F-008, ADR-0081) ──────────────────────────
+   * Resolves which datum (if any) is "today": the first row whose
+   * x-axis value string-equals the `today` attribute
+   * (String(datum[x]) === String(today) — the same loose stringify
+   * #fmtValue()/tip() already use elsewhere), or — the ADR's documented
+   * FALLBACK, not the primary mechanism — a row that already carries a
+   * truthy `today` key of its own. Returns -1 when neither identifies a
+   * datum (additive no-op). Cartesian-only by construction: only the 8
+   * cartesian renderers (bar, line, area, scatter, multi-line,
+   * stacked-bar, grouped-bar, composed — gh#1690's list, restated
+   * verbatim here per its own "cannot drift against a live upstream"
+   * posture) ever call this; every radial/part-to-whole type and
+   * sparkline never do, which is what makes REQ-F-016's N/A a structural
+   * fact rather than a runtime check. */
+  #todayIndex() {
+    const xKey = this.x;
+    const data = this.#data;
+    if (this.today) {
+      for (let i = 0; i < data.length; i++) {
+        if (String(data[i]?.[xKey] ?? '') === String(this.today)) return i;
+      }
+      return -1;
+    }
+    return data.findIndex(d => d && d.today);
+  }
+
+  /* Baseline dot AT the plot's zero-line at the today-datum's X position,
+   * plus a SHORT tick — never a full-height rule (REQ-F-008). In
+   * `outside` label mode the tick descends into the existing label
+   * gutter below the baseline (unchanged visual budget); in `chip` mode
+   * there is no gutter below the baseline (pad is zero-inset, REQ-F-001),
+   * so the tick runs the opposite direction, up into the x-chip band that
+   * floats just above that same edge — same short-tick anatomy, direction
+   * mirrored because the label chrome sits on the other side of the
+   * baseline in that mode. This is a judgment call the SPEC/ADR don't
+   * pin explicitly — see the build's Findings.
+   *
+   * Chip-mode clamp (code-checker finding, 2026-08-21): `baselineY` in
+   * chip mode IS the chart box's bottom edge (pad is zero-inset,
+   * REQ-F-001) — an unclamped dot centered there has its lower half
+   * clipped by a full-bleed card's corner-rounded `overflow: hidden`
+   * (REQ-F-002/AC-F-001's own edge-safety clause; SVG `overflow: visible`
+   * doesn't escape the ANCESTOR card's clip). Clamped inward by the same
+   * `chromeInset` every other chip-mode chrome element already respects,
+   * exactly like `#renderYChips`'s own vertical clamp. `outside` mode is
+   * untouched (chromeInset is unread there, same AC-F-004 byte-identity
+   * this build holds everywhere else). */
+  #todayMarkerVertical(x, baselineY, dims) {
+    const r = dims.sizeClass === 'sm' ? 2.5 : 3.5;
+    const tickLen = Math.max(6, dims.fontSize);
+    const dir = dims.chipMode ? -1 : 1;
+    const cy = dims.chipMode ? baselineY - Math.max(dims.chromeInset ?? 0, r) : baselineY;
+    return `<circle data-today-dot cx="${x}" cy="${cy}" r="${r}"/>` +
+      `<line data-today-tick x1="${x}" y1="${cy}" x2="${x}" y2="${cy + dir * tickLen}"/>`;
+  }
+
+  /* REQ-F-008's own mirror clause — "under an orientation where the
+   * category axis runs vertically" (the 2:3 horizontal-bar/stacked-bar/
+   * grouped-bar rows, REQ-R-003) the anatomy mirrors onto that axis: the
+   * dot sits on the VALUE baseline (pad.left, where every horizontal bar
+   * starts) and the tick runs LEFTWARD into the category-label gutter —
+   * there is no x-label band on this transposed axis to speak of, so this
+   * direction is this build's own judgment call, documented here rather
+   * than left implicit. */
+  #todayMarkerHorizontal(y, baselineX, dims) {
+    const r = dims.sizeClass === 'sm' ? 2.5 : 3.5;
+    const tickLen = Math.max(6, dims.fontSize);
+    return `<circle data-today-dot cx="${baselineX}" cy="${y}" r="${r}"/>` +
+      `<line data-today-tick x1="${baselineX}" y1="${y}" x2="${baselineX - tickLen}" y2="${y}"/>`;
+  }
+
+  /* ── Provisional datum (REQ-F-015/016, ADR-0081 §3) ──────────────
+   * Per-datum `.provisional` truthy flag — NOT a chart-ui attribute.
+   * Uniform across the cartesian list only (gh#1690's list, restated
+   * verbatim, same posture as #todayIndex() above): bar, line, area,
+   * scatter, multi-line, stacked-bar, grouped-bar, composed. Bar-family
+   * treatment (hollow bar, dashed outline) and scatter's hollow-ring dot
+   * are pure CSS ([data-provisional] rules in chart.css) driven by this
+   * one attribute string helper; line/area's dashed-span + faded-area
+   * treatment needs its own geometry (#lineProvisionalOverlay below)
+   * since a single continuous path can't dash just one sub-span of
+   * itself via CSS alone. */
+  #provisionalAttr(datum) {
+    return datum && datum.provisional ? ' data-provisional' : '';
+  }
+
+  /* Finds contiguous runs of provisional-flagged points (by index into
+   * `points`) and returns dashed-line + faded-area overlay SVG for each
+   * run — REQ-F-015's "dashed stroke over the provisional span... area
+   * fill suppressed or faded there". The run includes the immediately
+   * preceding point (when one exists) so the dashed overlay visually
+   * connects to the solid line rather than floating detached. The main
+   * `data-line`/`data-area` paths this pairs with are left fully
+   * unchanged (still drawn for the WHOLE series) — this only adds an
+   * overlay on top, so a fixture with no provisional data renders
+   * byte-identically to before this capability existed. `smoothTFactor`
+   * MUST match the caller's own clamped `this.smooth` (code-checker
+   * finding, 2026-08-21) — the overlay's dashed span sits ON TOP of the
+   * solid line/area path, and every caller smooths that path with the
+   * same clamped `t`; passing 0 here drew the overlay as a straight
+   * chord diverging visibly from a curved line whenever `smooth !== 0`. */
+  #lineProvisionalOverlay(points, data, baselineY, dims, smoothTFactor) {
+    let s = '';
+    let runStart = -1;
+    const flush = (endIdxExclusive) => {
+      if (runStart < 0) return;
+      const from = Math.max(runStart - 1, 0);
+      const runPts = points.slice(from, endIdxExclusive);
+      if (runPts.length >= 2) {
+        // Fade rect emitted BEFORE the dashed path (code-checker finding,
+        // 2026-08-21) so the scrim sits underneath, not on top of, the
+        // dashed stroke it's meant to fade — reversed order previously
+        // painted the scrim over the dash's lower half.
+        const minX = runPts[0].x, maxX = runPts[runPts.length - 1].x;
+        const top = Math.min(...runPts.map(p => p.y));
+        s += `<rect data-area-provisional-fade x="${minX}" y="${top}" width="${Math.max(maxX - minX, 0)}" height="${Math.max(baselineY - top, 0)}"/>`;
+        s += `<path data-line-provisional d="${smoothPath(runPts, smoothTFactor)}"/>`;
+      }
+      runStart = -1;
+    };
+    for (let i = 0; i < points.length; i++) {
+      const flagged = !!(data[i] && data[i].provisional);
+      if (flagged && runStart < 0) runStart = i;
+      else if (!flagged && runStart >= 0) flush(i);
+    }
+    flush(points.length);
     return s;
   }
 
@@ -1337,7 +1786,14 @@ export class UIChart extends UIElement {
     // for the scroll-vs-aggregate reading). Runs before `ticks` is derived
     // so the scale reflects the (possibly aggregated) rendered set, not
     // the full original one.
-    if (dims.ratioResolved === '1:1' && vals.length > BAR_1_1_VISIBLE_CAP) {
+    // ADR-0081/REQ-F-008/015 — today-marker + provisional-datum both key
+    // off the ORIGINAL per-datum index; the "+N more" synthetic tail
+    // bucket aggregateTail may produce below has no single x-value or
+    // provisional flag of its own, so both capabilities are scoped out
+    // when aggregation actually occurred (named here, not silently
+    // dropped — see the build's Findings).
+    const aggregated = dims.ratioResolved === '1:1' && vals.length > BAR_1_1_VISIBLE_CAP;
+    if (aggregated) {
       ({ labels, vals } = aggregateTail(labels, vals, BAR_1_1_VISIBLE_CAP, false));
     }
 
@@ -1351,7 +1807,7 @@ export class UIChart extends UIElement {
     // it, but a full column of height for one row per category. This is a
     // genuine orientation swap, not the same layout rescaled.
     if (dims.ratioResolved === '2:3') {
-      return this.#renderBarHorizontal(dims, labels, vals, ticks, maxVal);
+      return this.#renderBarHorizontal(dims, labels, vals, ticks, maxVal, aggregated ? [] : data);
     }
 
     const { width, height, pad } = dims;
@@ -1364,7 +1820,7 @@ export class UIChart extends UIElement {
     // REQ-R-003 (bar, 1:1 "square"): abbreviate category labels — a square
     // has less width per category than 3:2. The synthetic "+N more" label
     // (already short) truncates harmlessly under the same budget.
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
+    let { svg, chipSvg } = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
       abbreviateLabels: dims.ratioResolved === '1:1',
     });
 
@@ -1378,8 +1834,9 @@ export class UIChart extends UIElement {
       const barH = this.#clampSpan(rawH, plotH);
       const bx = pad.left + barW * i + barGap;
       const by = pad.top + plotH - barH;
+      const provisional = !aggregated ? this.#provisionalAttr(data[i]) : '';
 
-      svg += `<path data-bar${tip({ label: labels[i], value: v })} d="${topRoundedBarPath(bx, by, barInner, barH, this.#resolveRadius())}"/>`;
+      svg += `<path data-bar${provisional}${tip({ label: labels[i], value: v })} d="${topRoundedBarPath(bx, by, barInner, barH, this.#resolveRadius())}"/>`;
 
       if (showValues) {
         svg += `<text data-value x="${bx + barInner / 2}" y="${by - 4}" text-anchor="middle" font-size="${dims.valueSize}">${this.#fmtValue(v)}</text>`;
@@ -1396,6 +1853,14 @@ export class UIChart extends UIElement {
       svg += `<line data-hit${tip({ label: 'Average', value: avg })} x1="${pad.left}" y1="${ay}" x2="${width - pad.right}" y2="${ay}" stroke="transparent" stroke-width="12"/>`;
     }
 
+    if (!aggregated) {
+      const ti = this.#todayIndex();
+      if (ti > -1 && ti < labels.length) {
+        svg += this.#todayMarkerVertical(pad.left + barW * ti + barGap + barInner / 2, pad.top + plotH, dims);
+      }
+    }
+
+    svg += chipSvg;
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
 
@@ -1404,8 +1869,13 @@ export class UIChart extends UIElement {
      render path rather than a transposed reuse of the vertical one — the
      gutter sizing (driven by label WIDTH, not a fixed font multiple), the
      grid direction, and the bar path rounding (right end, not top end) all
-     differ structurally, not just by a coordinate swap. */
-  #renderBarHorizontal(dims, labels, vals, ticks, maxVal) {
+     differ structurally, not just by a coordinate swap. `rows` is the
+     ORIGINAL per-datum objects (empty when the 1:1 aggregate-tail bucket
+     ran — see #renderBar) driving today-marker + provisional lookup;
+     chip-mode label rendering is deliberately NOT mirrored here — this
+     renderer keeps its own always-outside inline axis code unconditionally
+     (named scope-down, see the build's Findings). */
+  #renderBarHorizontal(dims, labels, vals, ticks, maxVal, rows = []) {
     const { width, height } = dims;
     const fs = dims.fontSize;
     const ls = dims.labelSize;
@@ -1445,9 +1915,10 @@ export class UIChart extends UIElement {
       const barW = this.#clampSpan(rawW, plotW);
       const by = pad.top + barH * i + barGap;
       const bx = pad.left;
+      const provisional = this.#provisionalAttr(rows[i]);
 
       svg += `<text data-x-label x="${pad.left - 6}" y="${by + barInner / 2 + fs * 0.35}" text-anchor="end" font-size="${ls}">${esc(labels[i])}</text>`;
-      svg += `<path data-bar${tip({ label: labels[i], value: v })} d="${rightRoundedBarPath(bx, by, barW, barInner, this.#resolveRadius())}"/>`;
+      svg += `<path data-bar${provisional}${tip({ label: labels[i], value: v })} d="${rightRoundedBarPath(bx, by, barW, barInner, this.#resolveRadius())}"/>`;
       if (showValues) {
         svg += `<text data-value x="${bx + barW + 4}" y="${by + barInner / 2 + fs * 0.35}" text-anchor="start" font-size="${dims.valueSize}">${this.#fmtValue(v)}</text>`;
       }
@@ -1461,6 +1932,12 @@ export class UIChart extends UIElement {
       svg += `<line data-hit${tip({ label: 'Average', value: avg })} x1="${ax}" y1="${pad.top}" x2="${ax}" y2="${height - pad.bottom}" stroke="transparent" stroke-width="12"/>`;
     }
 
+    /* REQ-F-008 mirror — see #todayMarkerHorizontal's own doc comment. */
+    const ti = this.#todayIndex();
+    if (ti > -1 && ti < labels.length && rows.length) {
+      svg += this.#todayMarkerHorizontal(pad.top + barH * ti + barGap + barInner / 2, pad.left, dims);
+    }
+
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
 
@@ -1492,7 +1969,7 @@ export class UIChart extends UIElement {
     // density") — two DISTINCT treatments, not one mode reused for both.
     const isArea = this.type === 'area';
     const ratio = dims.ratioResolved;
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
+    let { svg, chipSvg } = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
       thinGrid: ratio !== '3:2',
       vertical: isArea && ratio === '2:3',
       xTickMode: ratio === '2:3' ? 'sparse' : ratio === '1:1' ? 'everyNth' : undefined,
@@ -1514,6 +1991,10 @@ export class UIChart extends UIElement {
     const t = Math.max(0, Math.min(1, this.smooth));
     svg += `<path data-area d="${smoothAreaPath(points, baseline, t)}"/>`;
     svg += `<path data-line d="${smoothPath(points, t)}"/>`;
+    // REQ-F-015 (line/area) — dashed stroke + faded area over any
+    // provisional span; the main paths above are unchanged, this overlay
+    // ADDS on top so a fixture with no provisional data is byte-identical.
+    svg += this.#lineProvisionalOverlay(points, data, baseline, dims, t);
 
     // Density tuning for sm: smaller dots, no value labels.
     const isSm = dims.sizeClass === 'sm';
@@ -1523,8 +2004,9 @@ export class UIChart extends UIElement {
     const showAverage = !this.noAverage && vals.length > 1 && !isSm && !this.noGrid;
 
     points.forEach((p, i) => {
+      const provisional = this.#provisionalAttr(data[i]);
       if (this.#shouldRenderDot(i, points.length)) {
-        svg += `<circle data-dot cx="${p.x}" cy="${p.y}" r="${dotR}"/>`;
+        svg += `<circle data-dot${provisional} cx="${p.x}" cy="${p.y}" r="${dotR}"/>`;
       }
       svg += `<circle data-hit${tip({ label: p.label, value: p.v })} cx="${p.x}" cy="${p.y}" r="${hitR}" fill="transparent"/>`;
       if (showValues) {
@@ -1542,6 +2024,12 @@ export class UIChart extends UIElement {
       svg += `<line data-hit${tip({ label: 'Average', value: avg })} x1="${pad.left}" y1="${ay}" x2="${width - pad.right}" y2="${ay}" stroke="transparent" stroke-width="12"/>`;
     }
 
+    const ti = this.#todayIndex();
+    if (ti > -1 && ti < points.length) {
+      svg += this.#todayMarkerVertical(points[ti].x, baseline, dims);
+    }
+
+    svg += chipSvg;
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
 
@@ -1926,7 +2414,7 @@ export class UIChart extends UIElement {
 
     // REQ-R-003 (scatter, 1:1): "axis labels abbreviated" — same
     // truncation treatment as bar@1:1's own square-container cell.
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
+    let { svg, chipSvg } = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
       abbreviateLabels: ratio === '1:1',
     });
 
@@ -1941,10 +2429,20 @@ export class UIChart extends UIElement {
       const px = pad.left + step * i;
       const rawY = pad.top + plotH - ((maxVal - minVal) ? ((vals[i] - minVal) / (maxVal - minVal)) * plotH : 0);
       const py = this.#clampCoord(rawY, pad.top, pad.top + plotH);
-      svg += `<circle data-dot data-scatter cx="${px}" cy="${py}" r="${dotR}"/>`;
+      // REQ-F-015 (scatter) — hollow ring dot for a provisional datum;
+      // CSS ([data-dot][data-provisional]) swaps the fill for a stroke-only
+      // ring rather than touching this render loop's own geometry.
+      const provisional = this.#provisionalAttr(data[i]);
+      svg += `<circle data-dot data-scatter${provisional} cx="${px}" cy="${py}" r="${dotR}"/>`;
       svg += `<circle data-hit${tip({ label: labels[i], value: vals[i] })} cx="${px}" cy="${py}" r="${hitR}" fill="transparent"/>`;
     }
 
+    const ti = this.#todayIndex();
+    if (ti > -1 && ti < vals.length) {
+      svg += this.#todayMarkerVertical(pad.left + step * ti, pad.top + plotH, dims);
+    }
+
+    svg += chipSvg;
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
 
@@ -2642,7 +3140,7 @@ export class UIChart extends UIElement {
     const barInner = barW * 0.6;
     const barGap = (barW - barInner) / 2;
 
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
+    let { svg, chipSvg } = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
 
     /* Bar series (slot 0) — "primary series only fully rendered" (2:3) is
        this same unconditional render at every ratio; the primary axis
@@ -2654,7 +3152,11 @@ export class UIChart extends UIElement {
         const barH = this.#clampSpan(rawH, plotH);
         const bx = pad.left + barW * i + barGap;
         const by = pad.top + plotH - barH;
-        svg += `<path${this.#seriesFill(0, barKey)}${tip({ label: labels[i], value: v, series: barKey })} d="${topRoundedBarPath(bx, by, barInner, barH, this.#resolveRadius())}"/>`;
+        // REQ-F-015 (composed) — "both treatments on their respective
+        // series": the bar series gets bar-family's hollow/dashed
+        // treatment for a provisional row.
+        const provisional = this.#provisionalAttr(data[i]);
+        svg += `<path${provisional}${this.#seriesFill(0, barKey)}${tip({ label: labels[i], value: v, series: barKey })} d="${topRoundedBarPath(bx, by, barInner, barH, this.#resolveRadius())}"/>`;
       }
     }
 
@@ -2666,7 +3168,14 @@ export class UIChart extends UIElement {
            the same axis, so the line renders as a small self-scaled
            sparkline (own min/max, no shared axis) tucked into the plot's
            top-right corner instead — the same "inset trend" reading a
-           stat-tile's own corner sparkline uses elsewhere in this file. */
+           stat-tile's own corner sparkline uses elsewhere in this file.
+           REQ-F-008/015 — today-marker + the line series' provisional
+           treatment are deliberately NOT mirrored into this inset: it has
+           no shared axis/baseline of its own (self-scaled min/max), the
+           same structural reason REQ-F-016 already treats sparkline as
+           N/A — named scope-down, see the build's Findings. The BAR
+           series above still gets both capabilities unconditionally at
+           every ratio including 2:3. */
         const insetW = plotW * 0.34;
         const insetH = Math.min(plotH * 0.26, insetW * 0.6);
         const insetX = pad.left + plotW - insetW - 2;
@@ -2714,13 +3223,27 @@ export class UIChart extends UIElement {
           ? ` data-slice="1" data-deemphasized-tint style="fill: var(--md-sys-color-neutral-on-surface-variant)"`
           : this.#seriesFill(1, lineKey);
         svg += `<path data-line${lineAttrs} d="${smoothPath(points, t)}"/>`;
-        for (const p of points) {
-          svg += `<circle data-dot${dotAttrs} cx="${p.x}" cy="${p.y}" r="3"/>`;
+        // REQ-F-015 (composed) — "both treatments on their respective
+        // series": the line series gets line/area's own dashed-span
+        // overlay for the same provisional rows the bar series above
+        // renders hollow/dashed for.
+        svg += this.#lineProvisionalOverlay(points, data, pad.top + plotH, dims, t);
+        points.forEach((p, pi) => {
+          const provisional = this.#provisionalAttr(data[pi]);
+          svg += `<circle data-dot${dotAttrs}${provisional} cx="${p.x}" cy="${p.y}" r="3"/>`;
           svg += `<circle data-hit${tip({ label: p.label, value: p.v, series: lineKey })} cx="${p.x}" cy="${p.y}" r="10" fill="transparent"/>`;
-        }
+        });
       }
     }
 
+    // REQ-F-008 — one today-marker per category (not per series), keyed
+    // off the bar series' own coordinate system (unaffected by the 2:3
+    // inset-sparkline branch above, which reuses the same barW/pad).
+    const ti = this.#todayIndex();
+    if (ti > -1 && ti < data.length) {
+      svg += this.#todayMarkerVertical(pad.left + barW * ti + barW / 2, pad.top + plotH, dims);
+    }
+
     this.#legendData = [
       { label: barKey,  key: barKey,  slot: 0 },
       // CodeRabbit (PR #1662) — the 1:1 de-emphasis above swaps the
@@ -2732,6 +3255,7 @@ export class UIChart extends UIElement {
       { label: lineKey, key: lineKey, slot: 1, deemphasized: ratio === '1:1' },
     ];
 
+    svg += chipSvg;
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
 
@@ -2924,7 +3448,7 @@ export class UIChart extends UIElement {
 
     // REQ-R-003 (stacked-bar, 1:1 "square"): abbreviate category labels —
     // same truncation treatment as bar@1:1's own square-container cell.
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
+    let { svg, chipSvg } = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
       abbreviateLabels: ratio === '1:1',
     });
 
@@ -2955,7 +3479,12 @@ export class UIChart extends UIElement {
         const isTop = k === segCount - 1;
         const r = this.#resolveRadius();
 
-        const attrs = `${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })}`;
+        // REQ-F-015 (bar family) — provisional state is a per-ROW flag:
+        // every segment in that category's stack renders the hollow/
+        // dashed treatment together (the whole period is incomplete, not
+        // one series within it).
+        const provisional = this.#provisionalAttr(data[i]);
+        const attrs = `${provisional}${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })}`;
 
         if (isTop) {
           // Top segment (or single segment) — round top corners only.
@@ -2970,6 +3499,12 @@ export class UIChart extends UIElement {
       }
     }
 
+    const ti = this.#todayIndex();
+    if (ti > -1 && ti < data.length) {
+      svg += this.#todayMarkerVertical(pad.left + barW * ti + barW / 2, pad.top + plotH, dims);
+    }
+
+    svg += chipSvg;
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
 
@@ -3030,7 +3565,8 @@ export class UIChart extends UIElement {
         const segW = clampedEnd - bx;
         stackX = clampedEnd;
         const isEnd = k === segCount - 1;
-        const attrs = `${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })}`;
+        const provisional = this.#provisionalAttr(data[i]);
+        const attrs = `${provisional}${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })}`;
 
         if (isEnd) {
           // End segment (or single segment) — round the value-end corners
@@ -3042,6 +3578,12 @@ export class UIChart extends UIElement {
       }
     }
 
+    /* REQ-F-008 mirror — see #todayMarkerHorizontal's own doc comment. */
+    const ti = this.#todayIndex();
+    if (ti > -1 && ti < labels.length) {
+      svg += this.#todayMarkerHorizontal(pad.top + barH * ti + barH / 2, pad.left, dims);
+    }
+
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
 
@@ -3085,11 +3627,14 @@ export class UIChart extends UIElement {
     // before category count drops)": category labels abbreviate first
     // (same treatment as bar/stacked-bar's own 1:1 cells), freeing width
     // for the bars themselves rather than ever dropping a category.
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
+    let { svg, chipSvg } = this.#gridAndAxes(width, height, ticks, labels, pad, dims, {
       abbreviateLabels: ratio === '1:1',
     });
 
     for (let i = 0; i < data.length; i++) {
+      // REQ-F-015 (bar family) — per-row provisional flag applies to every
+      // sub-bar in that category's group together.
+      const provisional = this.#provisionalAttr(data[i]);
       for (let k = 0; k < keys.length; k++) {
         if (this.#isSeriesHidden(keys[k])) continue;
         const v = +(data[i][keys[k]] ?? 0);
@@ -3097,7 +3642,7 @@ export class UIChart extends UIElement {
         const barH = this.#clampSpan(rawH, plotH);
         const bx = pad.left + groupW * i + groupPad + (subBarW + barGap) * k;
         const by = pad.top + plotH - barH;
-        svg += `<path${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })} d="${topRoundedBarPath(bx, by, subBarW, barH, this.#resolveRadius())}"/>`;
+        svg += `<path${provisional}${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })} d="${topRoundedBarPath(bx, by, subBarW, barH, this.#resolveRadius())}"/>`;
 
         if (!this.noValues) {
           svg += `<text data-value x="${bx + subBarW / 2}" y="${by - 4}" text-anchor="middle" font-size="${dims.valueSize}">${this.#fmtValue(v)}</text>`;
@@ -3105,6 +3650,12 @@ export class UIChart extends UIElement {
       }
     }
 
+    const ti = this.#todayIndex();
+    if (ti > -1 && ti < data.length) {
+      svg += this.#todayMarkerVertical(pad.left + groupW * ti + groupW / 2, pad.top + plotH, dims);
+    }
+
+    svg += chipSvg;
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
 
@@ -3149,6 +3700,7 @@ export class UIChart extends UIElement {
 
     for (let i = 0; i < labels.length; i++) {
       const groupY = pad.top + groupH * i;
+      const provisional = this.#provisionalAttr(data[i]);
       svg += `<text data-x-label x="${pad.left - 6}" y="${groupY + groupH / 2 + fs * 0.35}" text-anchor="end" font-size="${ls}">${esc(labels[i])}</text>`;
 
       for (let k = 0; k < keys.length; k++) {
@@ -3157,7 +3709,7 @@ export class UIChart extends UIElement {
         const rawW = (maxVal - minVal) ? ((v - minVal) / (maxVal - minVal)) * plotW : 0;
         const barW = this.#clampSpan(rawW, plotW);
         const by = groupY + groupPad + (subBarH + barGap) * k;
-        svg += `<path${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })} d="${rightRoundedBarPath(pad.left, by, barW, subBarH, this.#resolveRadius())}"/>`;
+        svg += `<path${provisional}${this.#seriesFill(k % 10, keys[k])}${tip({ label: labels[i], value: v, series: keys[k] })} d="${rightRoundedBarPath(pad.left, by, barW, subBarH, this.#resolveRadius())}"/>`;
 
         if (!this.noValues) {
           svg += `<text data-value x="${pad.left + barW + 4}" y="${by + subBarH / 2 + fs * 0.35}" text-anchor="start" font-size="${dims.valueSize}">${this.#fmtValue(v)}</text>`;
@@ -3165,6 +3717,12 @@ export class UIChart extends UIElement {
       }
     }
 
+    /* REQ-F-008 mirror — see #todayMarkerHorizontal's own doc comment. */
+    const ti = this.#todayIndex();
+    if (ti > -1 && ti < labels.length) {
+      svg += this.#todayMarkerHorizontal(pad.top + groupH * ti + groupH / 2, pad.left, dims);
+    }
+
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }
 
@@ -3187,7 +3745,7 @@ export class UIChart extends UIElement {
     const plotW = width - pad.left - pad.right;
     const step = plotW / Math.max(data.length - 1, 1);
 
-    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims, { pointAligned: true });
+    let { svg, chipSvg } = this.#gridAndAxes(width, height, ticks, labels, pad, dims, { pointAligned: true });
 
     // REQ-R-003 (multi-line) — a progressive de-emphasis across the three
     // ratios rather than one fixed identification mechanism:
@@ -3235,12 +3793,17 @@ export class UIChart extends UIElement {
 
       /* Line */
       svg += `<path data-line${this.#seriesStroke(k % 10, keys[k])}${deemphAttr} d="${smoothPath(points, t)}"/>`;
+      // REQ-F-015 (line/area, per-series) — the row-level provisional flag
+      // applies to every series at that x-column; each series draws its
+      // own dashed/faded overlay.
+      svg += this.#lineProvisionalOverlay(points, data, baseline, dims, t);
 
       /* Dots + hit targets. Hit circles deliberately omit data-slice so
          they aren't caught by the circle[data-slice] fill rule in CSS. */
       points.forEach((p, i) => {
+        const provisional = this.#provisionalAttr(data[i]);
         if (this.#shouldRenderDot(i, points.length)) {
-          svg += `<circle data-dot${this.#seriesFill(k % 10, keys[k])}${deemphAttr} cx="${p.x}" cy="${p.y}" r="3"/>`;
+          svg += `<circle data-dot${this.#seriesFill(k % 10, keys[k])}${deemphAttr}${provisional} cx="${p.x}" cy="${p.y}" r="3"/>`;
         }
         svg += `<circle data-hit${tip({ label: p.label, value: p.v, series: keys[k] })} cx="${p.x}" cy="${p.y}" r="10" fill="transparent"/>`;
       });
@@ -3251,8 +3814,15 @@ export class UIChart extends UIElement {
       }
     }
 
+    // REQ-F-008 — one today-marker per category (not per series).
+    const ti = this.#todayIndex();
+    if (ti > -1 && ti < data.length) {
+      svg += this.#todayMarkerVertical(pad.left + step * ti, pad.top + plotH, dims);
+    }
+
     this.#legendData = keys.map((k, i) => ({ label: k, key: k, slot: i % 10 }));
 
+    svg += chipSvg;
     return { svg, viewBox: `0 0 ${width} ${height}` };
   }