@cahyo-dimas/freeday 1.49.0 → 1.51.0

package/CHANGELOG.md

@@ -3,6 +3,84 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.51.0] — 2026-08-21
+### Fixed
+- **A cartesian chart's axis text and dots grew with the container** (#042). `renderCartesian` built
+  a fixed `viewBox="0 0 320 180"` and let `.fdy-chart-xy__plot` stretch it to `width:100%`, so every
+  size the renderer expressed in user units was multiplied by `plotWidth / 320`. `font-size:9px` on
+  a tick is not nine screen pixels at any width but 320px: measured on a real console it rendered
+  13px at a 350px plot and **81px at a 2232px** one, making the chart's smallest, most secondary
+  text the largest type on the page. `r="2.2"` did the same to the dots — 4.8px across at 350px,
+  30.7px at 2232px. The chart now measures `__plot` and sizes the `viewBox` to it in CSS pixels, so
+  one user unit is one pixel and every declared size means what it says at every width; a
+  `ResizeObserver` repaints it when the box changes (a collapsing sidebar moves a plot ~300px at a
+  fixed viewport, so this is the common case, not an edge case). A chart that measures 0 — detached,
+  or inside `display:none` — falls back to the old box and repaints when it is laid out.
+- **A currency y-axis was clipped by a gutter sized for a percent one** (#042). `PL` was a constant
+  38 user units, which was ~4 characters at one scale and something else at every other. It is now
+  derived from the widest formatted tick the axis will actually draw, capped at 35% of the plot.
+### Changed
+- **Axis type is a real CSS size**, set by `--fdy-chart-tick-size` on `.fdy-chart-xy` (default
+  `var(--text-xs)`). `font-size` moved off `.fdy-chart-xy__tick` / `__xlabel` onto
+  `.fdy-chart-xy__plot`, which the SVG text inherits — one computed read gives the renderer the real
+  pixel size it needs for the y-gutter and for the x-label autoskip, so an override flows to the
+  text *and* to the geometry around it. Before this, chart text could not be restyled at all: any
+  value set was multiplied by a scale the consumer could not see or compute.
+  The dot radius went 2.2 → 3 and the bar corner 1.5 → 2, both retuned against a 1:1 scale.
+### Docs
+- **`COMPONENTS.md` claimed a `<table>` fallback that no rendered chart has** (#041). It said every
+  chart is `role="img"` + `aria-label` "with a `<table>` fallback inside the element"; the renderer
+  builds no table and wipes the element on every render path. Worse, `role="img"` makes descendants
+  presentational, so the bar values, ticks and legend the renderer *does* draw are not exposed
+  either — the author's `aria-label` is the entire text alternative, and the docs now say so and ask
+  for one that carries the numbers. The four dead fallback tables in `docs/index.html` and
+  `docs/reference-screen.html`, which no reader has ever reached, are gone with it.
+- **The kit's own chart sizing is written down** (#041): `.fdy-chart-xy__plot` is
+  `aspect-ratio:16/9` + `min-height:8rem`, `.fdy-bars` a fixed `9rem`, `.fdy-sparkline` an
+  inline-block `8rem × 2.25rem` — with the note to override those rather than the chart root, since
+  a root `height` fights `aspect-ratio` instead of setting it.
+### Added — guards
+- **`browser/chart-scale.mjs`** — the axis label box and dot diameter are measured at plot widths of
+  350 / 696 / 1400 / 2232px and must not vary by more than a pixel, must stay smaller than body
+  text, and the `viewBox` must equal the measured plot. A second spec widens a container and asserts
+  the repaint. This class of bug is invisible to a source read: `font-size:9px` and `r="2.2"` look
+  like correct sizes, and the one thing in the plot that *was* protected —
+  `vector-effect:non-scaling-stroke` on the line — is what made the other three look protected too.
+  Only a real layout tells them apart.
+
+## [1.50.0] — 2026-08-20
+### Fixed
+- **A toast raised from inside a modal was painted behind it** (#027). `.fdy-toast-region` carried
+  `z-index: 200`, which can never win: `.fdy-modal` is a native `<dialog>` opened with `showModal()`
+  and therefore lives in the **top layer**, above the whole z-index universe. An error raised by an
+  action taken inside a dialog was dimmed by that dialog's backdrop and mostly hidden under the
+  dialog — so the reader saw a confirmation still asking a question they had already answered, and
+  no reason why. The region is now `popover="manual"` and `freeday-toast.js` calls `showPopover()`
+  as each toast lands (per toast, not once — the top layer is ordered by when you joined, so a
+  dialog opened after the last toast would otherwise sit above it). Guarded: where `showPopover` is
+  unavailable or throws, the region stays exactly what it was.
+- **A checkbox shrank when its label was long** (#027). `.fdy-check` is an inline-flex row and its
+  box declared a width — but a flex item with a width is still shrinkable, so a label that wrapped
+  to three lines squeezed the box from 18px to 13px while leaving it 18px tall. A group of five
+  rendered three different sizes, none of them square. `flex: none` on `.fdy-check input`,
+  `.fdy-radio input`, the `.fdy-switch` track and the standalone `.fdy-checkbox` — all four are
+  flex children somewhere in the kit.
+### Added — guards
+- **`pixelAt(x, y)` in `browser/harness.mjs`** — a 1×1 `Page.captureScreenshot`, decoded in-process.
+  Stacking above a modal cannot be asserted with `elementFromPoint`: a modal dialog makes the rest
+  of the document inert, so a hit test outside it returns the dialog whatever the paint order is,
+  reporting a working fix as broken. The new guard measures the colour actually composited at the
+  toast's centre. It waits for both fade-ins to finish first — a screenshot taken mid-animation
+  returns a blend of the two elements and flakes in both directions.
+- **Selection controls are asserted square and equal** across a group whose labels run one to three
+  lines, so a box that shrank in both axes cannot pass a width-only comparison. All four controls
+  the fix touched are measured, each in the container it actually ships in: the standalone
+  `.fdy-checkbox` inside `.fdy-filter__check` — the flex row all three typed adapters render in a
+  filter popover and a CFL option list — and the switch track against a switch of its own, since it
+  is the one control that is not square. The first version of this guard held the standalone
+  checkbox in a plain block, where it cannot shrink at all, so removing `flex: none` from the one
+  box every adapter puts on screen left it passing.
+
 ## [1.49.0] — 2026-08-20
 ### Added
 - **`FdyTableColumn.labelHidden`** (#026). A column of row CONTROLS — an edit button, a row menu —

package/COMPONENTS.md

@@ -858,7 +858,20 @@ Pure SVG/CSS, no dependency, re-colours with the theme. Needs `freeday-chart.js`
   validated categorical palette `--chart-1`…`--chart-8`.
 - Format: `data-fdy-format="number|percent|currency"`; legend `data-fdy-legend` (`none` to drop);
   axes `data-fdy-axes`
-- A11y: every chart is `role="img"` + `aria-label`, with a `<table>` fallback inside the element.
+- Sizing is already set by the kit — override **these**, never a `height` on the chart root (a
+  root height fights `aspect-ratio` instead of setting it): `.fdy-chart-xy__plot` is `width:100%`
+  + `aspect-ratio:16/9` + `min-height:8rem`; `.fdy-bars` is a fixed `height:9rem`; `.fdy-sparkline`
+  is an inline-block `8rem × 2.25rem`.
+- Axis type: `--fdy-chart-tick-size` (default `var(--text-xs)`) sets the y-tick and x-label size on
+  `.fdy-chart-xy`. It is a real CSS size — a cartesian chart's `viewBox` is measured to its plot, so
+  one user unit is one pixel — and the renderer reads it back to size the y-gutter and to decide how
+  many x-labels fit. Set the token rather than `font-size` on `__tick`/`__xlabel`, or the gutter and
+  the autoskip will still be computed from the old size.
+- A11y: every chart is `role="img"` + an **author-supplied** `aria-label`, and that label is the
+  *entire* text alternative — write one that carries the numbers, not just the shape. `role="img"`
+  makes descendants presentational, so rendered bar values, axis ticks and legends are not exposed
+  either; any `<table>`/text placed inside the element is **pre-render only** and is replaced on
+  render. Good: `aria-label="Monthly posting trend: Posted 62% → 88%, Draft 24% → 16%"`.
 - Internal parts (set by JS, useful for overrides): `.fdy-chart__legend` (+`--row`) `__swatch`
   `__tip`; `.fdy-bars__col` `__bar` `__track` `__label` `__val`; `.fdy-chart-xy__plot` `__grid`
   `__tick` `__xlabel` `__line` `__area` `__bar` `__dot` `__band`; `.fdy-donut__ring` `__seg`
@@ -935,6 +948,13 @@ Every field is optional; it returns the toast element. Classes (rendered for you
 `.fdy-toast-region`, `.fdy-toast` (+`--info` `--success` `--warning` `--danger`) · `__accent`
 `__body` `__title` `__text` `__close`.
 
+**Above modals, and not by z-index.** The region is a `popover` and re-enters the **top layer** as
+each toast lands, because `.fdy-modal` is a native `<dialog>` — see the note under Modal below. If
+a toast of yours is hidden behind something, a bigger `z-index` is not the fix; check whether that
+something is in the top layer too. Where the Popover API is unavailable (before Chrome 114 /
+Safari 17 / Firefox 125) the region falls back to a fixed block at `z-index: 200`, which cannot
+clear an open modal — the message is still announced to a screen reader.
+
 ## Tooltip — `.fdy-tooltip`
 Hover/focus only, never the sole carrier of information. Wrap in `.fdy-tooltip-wrap`; the trigger
 gets `aria-describedby` → the `.fdy-tooltip[role="tooltip"]` `id`.
@@ -1019,7 +1039,13 @@ so the same look serves routed sub-navigation built from plain links — see the
 > **Typed wrapper: `<FdyModal>`** — Vue (`:open` + `@close`) · React (`open` + `onClose`) · Blazor (`@bind-Open`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).
 
 Native `<dialog>`: focus trap, Esc and backdrop come from the browser. Sizes `--sm` `--md` `--lg`
-`--wide`; `--cfl` for the choose-from-list dialog. Parts `__header` `__title` `__body` `__footer`
+`--wide`; `--cfl` for the choose-from-list dialog.
+
+**It is in the TOP LAYER.** `showModal()` paints the dialog above every stacking context on the
+page, so no `z-index` anywhere can put anything over it — only another top-layer element (a
+`popover`, or another modal) can. It also makes the rest of the document inert, which means
+`elementFromPoint` outside the dialog returns the dialog: do not use a hit test to check what is
+painted on top of a modal, because it will tell you the dialog is, even when it visibly is not. Parts `__header` `__title` `__body` `__footer`
 `__close`. The body scrolls; the footer never clips. `aria-labelledby` → the title's `id`;
 `data-close` on any button that should close it.
 

package/README.id.md

@@ -5,7 +5,7 @@
 > **Lebih banyak _free day_ buat dev — UI kit-nya sudah siap pakai.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.34.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.34.0)
+[![Release](https://img.shields.io/badge/release-v1.51.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.51.0)
 
 UI KIT yang token-driven & framework-agnostic — satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs — the UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.34.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.34.0)
+[![Release](https://img.shields.io/badge/release-v1.51.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.51.0)
 
 A token-driven, framework-agnostic UI kit — one source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/dist/freeday-chart.js

@@ -10,7 +10,9 @@
  * (var(--color-<name>)) OR a slot "chart-1".."chart-8" (var(--chart-N)) to pin a series to the
  * validated palette. Both data-fdy-color and data-fdy-colors accept the chart-N form.
  * Cartesian charts (line/area, multi-series/stacked bar) draw themed axes from --chart-grid /
- * --chart-tick and format ticks + tooltips via data-fdy-format (number|percent|currency).
+ * --chart-tick and format ticks + tooltips via data-fdy-format (number|percent|currency). Their
+ * viewBox is sized to the measured plot (1 user unit = 1 CSS pixel) and repainted from a
+ * ResizeObserver, so axis type stays in real pixels and is set in CSS via --fdy-chart-tick-size.
  * Charts are an enhancement — put a table/text fallback inside the element and it will be
  * replaced on render; give the element role="img" + aria-label.
  *
@@ -50,6 +52,18 @@
   function ensureImg(el) { if (!el.hasAttribute('role')) el.setAttribute('role', 'img'); }
   function svgEl(name) { return document.createElementNS(NS, name); }
 
+  // Cartesian charts size their viewBox to the measured plot, so a width change needs a repaint.
+  // Guarded on width alone: a render can change the element's own height (the legend wrapping to a
+  // second row) but never its own width, so this settles instead of looping.
+  var cartesianRO = typeof ResizeObserver === 'function' ? new ResizeObserver(function (entries) {
+    entries.forEach(function (entry) {
+      var target = entry.target;
+      if (!target.isConnected) { cartesianRO.unobserve(target); return; }
+      var w = Math.round(entry.contentRect.width);
+      if (w && w !== target.__fdyChartW) renderChart(target);
+    });
+  }) : null;
+
   // Multi-series model: data-series (JSON) wins; else the data-values single-series shortcut.
   function getSeries(el) {
     var raw = el.getAttribute('data-series');
@@ -194,7 +208,46 @@
     var top = niceCeil(dataMax > base ? dataMax : base + 1);
     if (top <= base) top = base + 1;
 
-    var W = 320, H = 180, PL = 38, PR = 10, PT = 10, PB = 22;
+    // Lay the chrome out first so the plot can be measured, then size the viewBox to it in CSS
+    // pixels: one user unit is one pixel, so font-size / r / stroke-width mean what they say at
+    // every container width. (A fixed 320x180 viewBox stretched by CSS multiplied every declared
+    // size by plotWidth/320 instead — a 9px axis label rendered ~39px on a 1728px viewport.)
+    var legendMode = el.getAttribute('data-fdy-legend') || 'auto';
+    var showLegend = legendMode !== 'none' && (series.length >= 2 || legendMode === 'always');
+    el.classList.add('fdy-chart-xy');
+    el.innerHTML = '';
+    if (showLegend) {
+      var legend = document.createElement('ul');
+      legend.className = 'fdy-chart__legend fdy-chart__legend--row';
+      series.forEach(function (s, si) {
+        var li = document.createElement('li');
+        var sw = document.createElement('span'); sw.className = 'fdy-chart__swatch'; sw.style.background = colorFor(si);
+        li.appendChild(sw);
+        li.appendChild(document.createTextNode(s.label || ('Seri ' + (si + 1))));
+        legend.appendChild(li);
+      });
+      el.appendChild(legend);
+    }
+    var plot = document.createElement('div'); plot.className = 'fdy-chart-xy__plot';
+    el.appendChild(plot);
+
+    // Measured while empty: .fdy-chart-xy__plot carries its own width / aspect-ratio / min-height,
+    // so the box is already final. A detached or display:none chart measures 0 — fall back to the
+    // legacy box and let the ResizeObserver repaint it once it is actually laid out.
+    var box = plot.getBoundingClientRect();
+    var W = Math.round(box.width) || 320, H = Math.round(box.height) || 180;
+    var FS = parseFloat(getComputedStyle(plot).fontSize) || 12;   // axis type size, owned by CSS
+    var charW = FS * 0.6;                                         // mono/body advance is ~0.6em
+
+    // Tick values are known before the gutter is, so size PL to the widest one: a currency axis
+    // needs more room than a percent axis, and a fixed gutter only ever suited one of them.
+    var TICKS = 4;
+    var tickText = [];
+    for (var t0 = 0; t0 <= TICKS; t0++) tickText.push(fmt(base + (top - base) * t0 / TICKS));
+    var widestTick = 0;
+    tickText.forEach(function (t) { widestTick = Math.max(widestTick, t.length * charW); });
+    var PL = Math.min(Math.ceil(widestTick) + 10, Math.round(W * 0.35));
+    var PR = 10, PT = 10, PB = Math.round(FS * 2.2);
     var plotW = W - PL - PR, plotH = H - PT - PB;
     function mapY(v) { return PT + plotH * (1 - (v - base) / (top - base)); }
     var slot = plotW / n;
@@ -206,7 +259,6 @@
     svg.setAttribute('aria-hidden', 'true');
 
     // y gridlines + formatted ticks (bottom line at `base` doubles as the zero baseline).
-    var TICKS = 4;
     for (var k = 0; k <= TICKS; k++) {
       var val = base + (top - base) * k / TICKS;
       var gy = mapY(val);
@@ -216,9 +268,9 @@
       gl.setAttribute('class', 'fdy-chart-xy__grid');
       svg.appendChild(gl);
       var tk = svgEl('text');
-      tk.setAttribute('x', PL - 5); tk.setAttribute('y', (gy + 3).toFixed(1));
+      tk.setAttribute('x', PL - 5); tk.setAttribute('y', (gy + FS * 0.35).toFixed(1));
       tk.setAttribute('text-anchor', 'end'); tk.setAttribute('class', 'fdy-chart-xy__tick');
-      tk.textContent = fmt(val);
+      tk.textContent = tickText[k];
       svg.appendChild(tk);
     }
 
@@ -226,7 +278,6 @@
     // of assuming a fixed 40px slot; keep every step-th plus the last, then drop any kept label that
     // would collide with the one before it — including the forced last one (a fraction-of-a-slot
     // overlap happens when n-1 lands next to the last kept multiple of step, e.g. n=24 at most widths).
-    var charW = 5.4; // ~9px font advance (.fdy-chart-xy__xlabel)
     var widest = 0;
     for (var wi = 0; wi < n; wi++) widest = Math.max(widest, String(labels[wi] || ('#' + (wi + 1))).length * charW);
     var minGap = widest + 8;
@@ -242,7 +293,7 @@
     }
     kept.forEach(function (xk) {
       var xt = svgEl('text');
-      xt.setAttribute('x', xPos(xk).toFixed(1)); xt.setAttribute('y', H - 6);
+      xt.setAttribute('x', xPos(xk).toFixed(1)); xt.setAttribute('y', H - Math.round(FS * 0.7));
       xt.setAttribute('text-anchor', 'middle'); xt.setAttribute('class', 'fdy-chart-xy__xlabel');
       xt.textContent = labels[xk] || ('#' + (xk + 1));
       svg.appendChild(xt);
@@ -268,7 +319,7 @@
           var rect = svgEl('rect');
           rect.setAttribute('x', x.toFixed(1)); rect.setAttribute('width', Math.max(1, barW - 1).toFixed(1));
           rect.setAttribute('y', Math.min(y0, y1).toFixed(1)); rect.setAttribute('height', Math.max(0.5, Math.abs(y1 - y0)).toFixed(1));
-          rect.setAttribute('rx', '1.5'); rect.setAttribute('class', 'fdy-chart-xy__bar');
+          rect.setAttribute('rx', '2'); rect.setAttribute('class', 'fdy-chart-xy__bar');
           rect.style.fill = colorFor(si);
           svg.appendChild(rect);
         });
@@ -296,33 +347,14 @@
         }
         pts.forEach(function (p) {
           var dot = svgEl('circle');
-          dot.setAttribute('cx', p[0].toFixed(1)); dot.setAttribute('cy', p[1].toFixed(1)); dot.setAttribute('r', '2.2');
+          dot.setAttribute('cx', p[0].toFixed(1)); dot.setAttribute('cy', p[1].toFixed(1)); dot.setAttribute('r', '3');
           dot.setAttribute('class', 'fdy-chart-xy__dot'); dot.style.fill = colorFor(si);
           svg.appendChild(dot);
         });
       });
     }
 
-    // Assemble: optional legend on top, plot below, tooltip layer last.
-    var legendMode = el.getAttribute('data-fdy-legend') || 'auto';
-    var showLegend = legendMode !== 'none' && (series.length >= 2 || legendMode === 'always');
-    el.classList.add('fdy-chart-xy');
-    el.innerHTML = '';
-    if (showLegend) {
-      var legend = document.createElement('ul');
-      legend.className = 'fdy-chart__legend fdy-chart__legend--row';
-      series.forEach(function (s, si) {
-        var li = document.createElement('li');
-        var sw = document.createElement('span'); sw.className = 'fdy-chart__swatch'; sw.style.background = colorFor(si);
-        li.appendChild(sw);
-        li.appendChild(document.createTextNode(s.label || ('Seri ' + (si + 1))));
-        legend.appendChild(li);
-      });
-      el.appendChild(legend);
-    }
-    var plot = document.createElement('div'); plot.className = 'fdy-chart-xy__plot';
     plot.appendChild(svg);
-    el.appendChild(plot);
 
     // Hover: one transparent band per category → readout of every series at that x.
     var tip = makeTip(el);
@@ -342,6 +374,8 @@
       band.addEventListener('mouseleave', function () { hideTip(tip); });
       svg.appendChild(band);
     }
+    el.__fdyChartW = W;
+    if (cartesianRO) cartesianRO.observe(el);
     ensureImg(el);
   }
 

package/dist/freeday-toast.js

@@ -28,11 +28,39 @@
       region.className = 'fdy-toast-region';
       region.setAttribute('aria-live', 'polite');
       region.setAttribute('aria-atomic', 'false');
+      /* `manual`, not `auto`: an auto popover light-dismisses on an outside click and closes
+         itself the moment another popover opens. A toast is dismissed by its timer or its own
+         close button, by nobody else. */
+      region.setAttribute('popover', 'manual');
       document.body.appendChild(region);
     }
     return region;
   }
 
+  /* Put the region in the TOP LAYER, above any open <dialog>.
+   *
+   * A modal dialog lives in the top layer, where z-index does not reach — so a toast raised by an
+   * action taken inside a modal was painted behind that modal's backdrop, which is where an error
+   * message is least useful. showPopover() joins the same layer, and membership there is ordered by
+   * when you joined: hide-then-show re-joins at the top, so a toast shown while a dialog is open
+   * lands above it rather than under the dialog that was opened after the last toast.
+   *
+   * Guarded twice on purpose. `showPopover` is absent before Chrome 114 / Safari 17 / Firefox 125,
+   * and the call throws if the element is disconnected or already open — in every one of those
+   * cases the region stays an ordinary fixed block at z-index 200, which is what it has always
+   * been. A notification must never be the thing that throws.
+   */
+  function raise(node) {
+    if (!node || typeof node.showPopover !== 'function') return;
+    try {
+      if (node.matches(':popover-open')) node.hidePopover();
+      node.showPopover();
+    } catch (e) {
+      /* Not reachable through the guards above, but a toast is on the error path itself: if
+         raising it fails the message still has to appear, one layer down. */
+    }
+  }
+
   function dismiss(toast) {
     if (typeof toast === 'string') toast = keyed[toast]; // dismiss by key
     if (!toast || toast.dataset.leaving === '1') return;
@@ -110,6 +138,9 @@
       keyed[opts.key] = node;
     }
     region.appendChild(node);
+    // Raised per toast, not once at startup: a dialog opened AFTER the region joined the top layer
+    // would otherwise sit above it, which is the exact case this fixes.
+    raise(region);
 
     var timeout = opts.timeout == null ? 4000 : opts.timeout;
     if (timeout > 0) setTimeout(function () { dismiss(node); }, timeout);

package/dist/freeday.bundle.css

@@ -972,12 +972,12 @@ a { color: var(--color-primary); }
 /* Cartesian charts (line / area / multi-series & stacked bar) — SVG with themed axes.
  * Axis colour comes from --chart-grid / --chart-tick (both theme-aware); series colours are
  * set inline by the renderer from --chart-1..8, so the whole chart recolours on data-theme. */
-.fdy-chart-xy{position:relative;display:flex;flex-direction:column;gap:var(--space-3);width:100%;}
-.fdy-chart-xy__plot{width:100%;aspect-ratio:16/9;min-height:8rem;}
+.fdy-chart-xy{position:relative;display:flex;flex-direction:column;gap:var(--space-3);width:100%;--fdy-chart-tick-size:var(--text-xs);}
+.fdy-chart-xy__plot{width:100%;aspect-ratio:16/9;min-height:8rem;font-size:var(--fdy-chart-tick-size);}
 .fdy-chart-xy__plot svg{display:block;width:100%;height:100%;overflow:visible;}
 .fdy-chart-xy__grid{stroke:var(--chart-grid);stroke-width:1;shape-rendering:crispEdges;}
-.fdy-chart-xy__tick{fill:var(--chart-tick);font-family:var(--font-mono);font-size:9px;}
-.fdy-chart-xy__xlabel{fill:var(--chart-tick);font-family:var(--font-body);font-size:9px;}
+.fdy-chart-xy__tick{fill:var(--chart-tick);font-family:var(--font-mono);}
+.fdy-chart-xy__xlabel{fill:var(--chart-tick);font-family:var(--font-body);}
 .fdy-chart-xy__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;}
 .fdy-chart-xy__area{stroke:none;opacity:.14;}
 .fdy-chart-xy__dot{stroke:var(--color-surface);stroke-width:1;}
@@ -1579,8 +1579,15 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-rating--sm .fdy-rating__star svg{width:1.1rem;height:1.1rem;}
 
 /* Freeday — Selection controls */
+/* `flex:none` on every box, track and standalone checkbox is load-bearing, not tidiness.
+   `.fdy-check` is an inline-flex row of [box, label], and a flex item with a WIDTH is still
+   shrinkable — so as soon as the label wrapped to a second line the box gave up horizontal space
+   to it and rendered an 18px-tall rectangle 13px wide. Squashed, off-square, and different from
+   every sibling whose label happened to be short: a form of five checkboxes showed three sizes.
+   Nothing in the declarations looked wrong, because the width was never overridden — it was
+   negotiated away. */
 .fdy-check,.fdy-radio,.fdy-switch{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;}
-.fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+.fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-check input{border-radius:var(--radius-sm);}
 .fdy-radio input{border-radius:50%;}
 .fdy-check input::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
@@ -1590,13 +1597,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-check input:focus-visible,.fdy-radio input:focus-visible,.fdy-switch input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-check input:disabled,.fdy-radio input:disabled,.fdy-switch input:disabled{opacity:.5;cursor:not-allowed;}
 .fdy-check:has(input:disabled),.fdy-radio:has(input:disabled),.fdy-switch:has(input:disabled){cursor:not-allowed;}
-.fdy-switch input{appearance:none;-webkit-appearance:none;position:relative;width:var(--control-switch-w);height:var(--control-switch-h);margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background var(--dur-base) var(--ease-standard);}
+.fdy-switch input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:var(--control-switch-w);height:var(--control-switch-h);margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background var(--dur-base) var(--ease-standard);}
 .fdy-switch input::before{content:"";position:absolute;top:2px;left:2px;width:calc(var(--control-switch-h) - 4px);height:calc(var(--control-switch-h) - 4px);border-radius:50%;background:var(--color-switch-thumb);box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease-spring);}
 .fdy-switch input:checked{background:var(--color-primary);}
 .fdy-switch input:checked::before{transform:translateX(calc(var(--control-switch-w) - var(--control-switch-h)));}
 
 /* Standalone checkbox (e.g. table row/select-all) — supports :indeterminate */
-.fdy-checkbox{appearance:none;-webkit-appearance:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+.fdy-checkbox{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-checkbox::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
 .fdy-checkbox:checked,.fdy-checkbox:indeterminate{background:var(--color-primary);border-color:var(--color-primary);}
 .fdy-checkbox:checked::before{transform:scale(1);}
@@ -1869,7 +1876,19 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 @media (prefers-reduced-motion:no-preference){.fdy-timepicker__panel:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 
 /* Freeday — Toast (transient notification) */
-.fdy-toast-region{position:fixed;z-index:200;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);width:min(24rem,calc(100vw - var(--space-8)));pointer-events:none;}
+/* The region is a POPOVER, not merely a high z-index.
+   `.fdy-modal` is a native <dialog> opened with showModal(), which puts it in the TOP LAYER — a
+   layer above the whole z-index universe, so no number here could ever beat it. A toast raised by
+   an action taken inside a modal was painted behind that modal's backdrop: dimmed, unreadable, and
+   most of it under the dialog itself. `freeday-toast.js` calls showPopover() as each toast is
+   added, which puts the region in the top layer too, and last-in wins there.
+   Everything after `pointer-events` is undoing the UA's [popover] defaults — it arrives with
+   inset:0, auto margins, a border, padding, a Canvas background and overflow:auto, none of which a
+   toast stack wants. Where showPopover() is unavailable the element is still an ordinary fixed
+   block at z-index 200, which is exactly what it was before. */
+.fdy-toast-region{position:fixed;z-index:200;inset:auto;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);width:min(24rem,calc(100vw - var(--space-8)));height:auto;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;pointer-events:none;}
+/* A popover gets a ::backdrop as well; a toast must not dim the page behind it. */
+.fdy-toast-region::backdrop{background:transparent;}
 .fdy-toast{pointer-events:auto;display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--color-inverse-surface);color:var(--color-inverse-text);box-shadow:var(--shadow-3);}
 .fdy-toast__accent{flex:none;width:.25rem;align-self:stretch;border-radius:var(--radius-full);background:var(--color-primary);}
 .fdy-toast--success .fdy-toast__accent{background:var(--color-success);}

package/dist/freeday.css

@@ -589,12 +589,12 @@ a { color: var(--color-primary); }
 /* Cartesian charts (line / area / multi-series & stacked bar) — SVG with themed axes.
  * Axis colour comes from --chart-grid / --chart-tick (both theme-aware); series colours are
  * set inline by the renderer from --chart-1..8, so the whole chart recolours on data-theme. */
-.fdy-chart-xy{position:relative;display:flex;flex-direction:column;gap:var(--space-3);width:100%;}
-.fdy-chart-xy__plot{width:100%;aspect-ratio:16/9;min-height:8rem;}
+.fdy-chart-xy{position:relative;display:flex;flex-direction:column;gap:var(--space-3);width:100%;--fdy-chart-tick-size:var(--text-xs);}
+.fdy-chart-xy__plot{width:100%;aspect-ratio:16/9;min-height:8rem;font-size:var(--fdy-chart-tick-size);}
 .fdy-chart-xy__plot svg{display:block;width:100%;height:100%;overflow:visible;}
 .fdy-chart-xy__grid{stroke:var(--chart-grid);stroke-width:1;shape-rendering:crispEdges;}
-.fdy-chart-xy__tick{fill:var(--chart-tick);font-family:var(--font-mono);font-size:9px;}
-.fdy-chart-xy__xlabel{fill:var(--chart-tick);font-family:var(--font-body);font-size:9px;}
+.fdy-chart-xy__tick{fill:var(--chart-tick);font-family:var(--font-mono);}
+.fdy-chart-xy__xlabel{fill:var(--chart-tick);font-family:var(--font-body);}
 .fdy-chart-xy__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;}
 .fdy-chart-xy__area{stroke:none;opacity:.14;}
 .fdy-chart-xy__dot{stroke:var(--color-surface);stroke-width:1;}
@@ -1196,8 +1196,15 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-rating--sm .fdy-rating__star svg{width:1.1rem;height:1.1rem;}
 
 /* Freeday — Selection controls */
+/* `flex:none` on every box, track and standalone checkbox is load-bearing, not tidiness.
+   `.fdy-check` is an inline-flex row of [box, label], and a flex item with a WIDTH is still
+   shrinkable — so as soon as the label wrapped to a second line the box gave up horizontal space
+   to it and rendered an 18px-tall rectangle 13px wide. Squashed, off-square, and different from
+   every sibling whose label happened to be short: a form of five checkboxes showed three sizes.
+   Nothing in the declarations looked wrong, because the width was never overridden — it was
+   negotiated away. */
 .fdy-check,.fdy-radio,.fdy-switch{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;}
-.fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+.fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-check input{border-radius:var(--radius-sm);}
 .fdy-radio input{border-radius:50%;}
 .fdy-check input::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
@@ -1207,13 +1214,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-check input:focus-visible,.fdy-radio input:focus-visible,.fdy-switch input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-check input:disabled,.fdy-radio input:disabled,.fdy-switch input:disabled{opacity:.5;cursor:not-allowed;}
 .fdy-check:has(input:disabled),.fdy-radio:has(input:disabled),.fdy-switch:has(input:disabled){cursor:not-allowed;}
-.fdy-switch input{appearance:none;-webkit-appearance:none;position:relative;width:var(--control-switch-w);height:var(--control-switch-h);margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background var(--dur-base) var(--ease-standard);}
+.fdy-switch input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:var(--control-switch-w);height:var(--control-switch-h);margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background var(--dur-base) var(--ease-standard);}
 .fdy-switch input::before{content:"";position:absolute;top:2px;left:2px;width:calc(var(--control-switch-h) - 4px);height:calc(var(--control-switch-h) - 4px);border-radius:50%;background:var(--color-switch-thumb);box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease-spring);}
 .fdy-switch input:checked{background:var(--color-primary);}
 .fdy-switch input:checked::before{transform:translateX(calc(var(--control-switch-w) - var(--control-switch-h)));}
 
 /* Standalone checkbox (e.g. table row/select-all) — supports :indeterminate */
-.fdy-checkbox{appearance:none;-webkit-appearance:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+.fdy-checkbox{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-checkbox::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
 .fdy-checkbox:checked,.fdy-checkbox:indeterminate{background:var(--color-primary);border-color:var(--color-primary);}
 .fdy-checkbox:checked::before{transform:scale(1);}
@@ -1486,7 +1493,19 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 @media (prefers-reduced-motion:no-preference){.fdy-timepicker__panel:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 
 /* Freeday — Toast (transient notification) */
-.fdy-toast-region{position:fixed;z-index:200;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);width:min(24rem,calc(100vw - var(--space-8)));pointer-events:none;}
+/* The region is a POPOVER, not merely a high z-index.
+   `.fdy-modal` is a native <dialog> opened with showModal(), which puts it in the TOP LAYER — a
+   layer above the whole z-index universe, so no number here could ever beat it. A toast raised by
+   an action taken inside a modal was painted behind that modal's backdrop: dimmed, unreadable, and
+   most of it under the dialog itself. `freeday-toast.js` calls showPopover() as each toast is
+   added, which puts the region in the top layer too, and last-in wins there.
+   Everything after `pointer-events` is undoing the UA's [popover] defaults — it arrives with
+   inset:0, auto margins, a border, padding, a Canvas background and overflow:auto, none of which a
+   toast stack wants. Where showPopover() is unavailable the element is still an ordinary fixed
+   block at z-index 200, which is exactly what it was before. */
+.fdy-toast-region{position:fixed;z-index:200;inset:auto;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);width:min(24rem,calc(100vw - var(--space-8)));height:auto;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;pointer-events:none;}
+/* A popover gets a ::backdrop as well; a toast must not dim the page behind it. */
+.fdy-toast-region::backdrop{background:transparent;}
 .fdy-toast{pointer-events:auto;display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--color-inverse-surface);color:var(--color-inverse-text);box-shadow:var(--shadow-3);}
 .fdy-toast__accent{flex:none;width:.25rem;align-self:stretch;border-radius:var(--radius-full);background:var(--color-primary);}
 .fdy-toast--success .fdy-toast__accent{background:var(--color-success);}

package/dist/freeday.js

@@ -874,7 +874,9 @@
  * (var(--color-<name>)) OR a slot "chart-1".."chart-8" (var(--chart-N)) to pin a series to the
  * validated palette. Both data-fdy-color and data-fdy-colors accept the chart-N form.
  * Cartesian charts (line/area, multi-series/stacked bar) draw themed axes from --chart-grid /
- * --chart-tick and format ticks + tooltips via data-fdy-format (number|percent|currency).
+ * --chart-tick and format ticks + tooltips via data-fdy-format (number|percent|currency). Their
+ * viewBox is sized to the measured plot (1 user unit = 1 CSS pixel) and repainted from a
+ * ResizeObserver, so axis type stays in real pixels and is set in CSS via --fdy-chart-tick-size.
  * Charts are an enhancement — put a table/text fallback inside the element and it will be
  * replaced on render; give the element role="img" + aria-label.
  *
@@ -914,6 +916,18 @@
   function ensureImg(el) { if (!el.hasAttribute('role')) el.setAttribute('role', 'img'); }
   function svgEl(name) { return document.createElementNS(NS, name); }
 
+  // Cartesian charts size their viewBox to the measured plot, so a width change needs a repaint.
+  // Guarded on width alone: a render can change the element's own height (the legend wrapping to a
+  // second row) but never its own width, so this settles instead of looping.
+  var cartesianRO = typeof ResizeObserver === 'function' ? new ResizeObserver(function (entries) {
+    entries.forEach(function (entry) {
+      var target = entry.target;
+      if (!target.isConnected) { cartesianRO.unobserve(target); return; }
+      var w = Math.round(entry.contentRect.width);
+      if (w && w !== target.__fdyChartW) renderChart(target);
+    });
+  }) : null;
+
   // Multi-series model: data-series (JSON) wins; else the data-values single-series shortcut.
   function getSeries(el) {
     var raw = el.getAttribute('data-series');
@@ -1058,7 +1072,46 @@
     var top = niceCeil(dataMax > base ? dataMax : base + 1);
     if (top <= base) top = base + 1;
 
-    var W = 320, H = 180, PL = 38, PR = 10, PT = 10, PB = 22;
+    // Lay the chrome out first so the plot can be measured, then size the viewBox to it in CSS
+    // pixels: one user unit is one pixel, so font-size / r / stroke-width mean what they say at
+    // every container width. (A fixed 320x180 viewBox stretched by CSS multiplied every declared
+    // size by plotWidth/320 instead — a 9px axis label rendered ~39px on a 1728px viewport.)
+    var legendMode = el.getAttribute('data-fdy-legend') || 'auto';
+    var showLegend = legendMode !== 'none' && (series.length >= 2 || legendMode === 'always');
+    el.classList.add('fdy-chart-xy');
+    el.innerHTML = '';
+    if (showLegend) {
+      var legend = document.createElement('ul');
+      legend.className = 'fdy-chart__legend fdy-chart__legend--row';
+      series.forEach(function (s, si) {
+        var li = document.createElement('li');
+        var sw = document.createElement('span'); sw.className = 'fdy-chart__swatch'; sw.style.background = colorFor(si);
+        li.appendChild(sw);
+        li.appendChild(document.createTextNode(s.label || ('Seri ' + (si + 1))));
+        legend.appendChild(li);
+      });
+      el.appendChild(legend);
+    }
+    var plot = document.createElement('div'); plot.className = 'fdy-chart-xy__plot';
+    el.appendChild(plot);
+
+    // Measured while empty: .fdy-chart-xy__plot carries its own width / aspect-ratio / min-height,
+    // so the box is already final. A detached or display:none chart measures 0 — fall back to the
+    // legacy box and let the ResizeObserver repaint it once it is actually laid out.
+    var box = plot.getBoundingClientRect();
+    var W = Math.round(box.width) || 320, H = Math.round(box.height) || 180;
+    var FS = parseFloat(getComputedStyle(plot).fontSize) || 12;   // axis type size, owned by CSS
+    var charW = FS * 0.6;                                         // mono/body advance is ~0.6em
+
+    // Tick values are known before the gutter is, so size PL to the widest one: a currency axis
+    // needs more room than a percent axis, and a fixed gutter only ever suited one of them.
+    var TICKS = 4;
+    var tickText = [];
+    for (var t0 = 0; t0 <= TICKS; t0++) tickText.push(fmt(base + (top - base) * t0 / TICKS));
+    var widestTick = 0;
+    tickText.forEach(function (t) { widestTick = Math.max(widestTick, t.length * charW); });
+    var PL = Math.min(Math.ceil(widestTick) + 10, Math.round(W * 0.35));
+    var PR = 10, PT = 10, PB = Math.round(FS * 2.2);
     var plotW = W - PL - PR, plotH = H - PT - PB;
     function mapY(v) { return PT + plotH * (1 - (v - base) / (top - base)); }
     var slot = plotW / n;
@@ -1070,7 +1123,6 @@
     svg.setAttribute('aria-hidden', 'true');
 
     // y gridlines + formatted ticks (bottom line at `base` doubles as the zero baseline).
-    var TICKS = 4;
     for (var k = 0; k <= TICKS; k++) {
       var val = base + (top - base) * k / TICKS;
       var gy = mapY(val);
@@ -1080,9 +1132,9 @@
       gl.setAttribute('class', 'fdy-chart-xy__grid');
       svg.appendChild(gl);
       var tk = svgEl('text');
-      tk.setAttribute('x', PL - 5); tk.setAttribute('y', (gy + 3).toFixed(1));
+      tk.setAttribute('x', PL - 5); tk.setAttribute('y', (gy + FS * 0.35).toFixed(1));
       tk.setAttribute('text-anchor', 'end'); tk.setAttribute('class', 'fdy-chart-xy__tick');
-      tk.textContent = fmt(val);
+      tk.textContent = tickText[k];
       svg.appendChild(tk);
     }
 
@@ -1090,7 +1142,6 @@
     // of assuming a fixed 40px slot; keep every step-th plus the last, then drop any kept label that
     // would collide with the one before it — including the forced last one (a fraction-of-a-slot
     // overlap happens when n-1 lands next to the last kept multiple of step, e.g. n=24 at most widths).
-    var charW = 5.4; // ~9px font advance (.fdy-chart-xy__xlabel)
     var widest = 0;
     for (var wi = 0; wi < n; wi++) widest = Math.max(widest, String(labels[wi] || ('#' + (wi + 1))).length * charW);
     var minGap = widest + 8;
@@ -1106,7 +1157,7 @@
     }
     kept.forEach(function (xk) {
       var xt = svgEl('text');
-      xt.setAttribute('x', xPos(xk).toFixed(1)); xt.setAttribute('y', H - 6);
+      xt.setAttribute('x', xPos(xk).toFixed(1)); xt.setAttribute('y', H - Math.round(FS * 0.7));
       xt.setAttribute('text-anchor', 'middle'); xt.setAttribute('class', 'fdy-chart-xy__xlabel');
       xt.textContent = labels[xk] || ('#' + (xk + 1));
       svg.appendChild(xt);
@@ -1132,7 +1183,7 @@
           var rect = svgEl('rect');
           rect.setAttribute('x', x.toFixed(1)); rect.setAttribute('width', Math.max(1, barW - 1).toFixed(1));
           rect.setAttribute('y', Math.min(y0, y1).toFixed(1)); rect.setAttribute('height', Math.max(0.5, Math.abs(y1 - y0)).toFixed(1));
-          rect.setAttribute('rx', '1.5'); rect.setAttribute('class', 'fdy-chart-xy__bar');
+          rect.setAttribute('rx', '2'); rect.setAttribute('class', 'fdy-chart-xy__bar');
           rect.style.fill = colorFor(si);
           svg.appendChild(rect);
         });
@@ -1160,33 +1211,14 @@
         }
         pts.forEach(function (p) {
           var dot = svgEl('circle');
-          dot.setAttribute('cx', p[0].toFixed(1)); dot.setAttribute('cy', p[1].toFixed(1)); dot.setAttribute('r', '2.2');
+          dot.setAttribute('cx', p[0].toFixed(1)); dot.setAttribute('cy', p[1].toFixed(1)); dot.setAttribute('r', '3');
           dot.setAttribute('class', 'fdy-chart-xy__dot'); dot.style.fill = colorFor(si);
           svg.appendChild(dot);
         });
       });
     }
 
-    // Assemble: optional legend on top, plot below, tooltip layer last.
-    var legendMode = el.getAttribute('data-fdy-legend') || 'auto';
-    var showLegend = legendMode !== 'none' && (series.length >= 2 || legendMode === 'always');
-    el.classList.add('fdy-chart-xy');
-    el.innerHTML = '';
-    if (showLegend) {
-      var legend = document.createElement('ul');
-      legend.className = 'fdy-chart__legend fdy-chart__legend--row';
-      series.forEach(function (s, si) {
-        var li = document.createElement('li');
-        var sw = document.createElement('span'); sw.className = 'fdy-chart__swatch'; sw.style.background = colorFor(si);
-        li.appendChild(sw);
-        li.appendChild(document.createTextNode(s.label || ('Seri ' + (si + 1))));
-        legend.appendChild(li);
-      });
-      el.appendChild(legend);
-    }
-    var plot = document.createElement('div'); plot.className = 'fdy-chart-xy__plot';
     plot.appendChild(svg);
-    el.appendChild(plot);
 
     // Hover: one transparent band per category → readout of every series at that x.
     var tip = makeTip(el);
@@ -1206,6 +1238,8 @@
       band.addEventListener('mouseleave', function () { hideTip(tip); });
       svg.appendChild(band);
     }
+    el.__fdyChartW = W;
+    if (cartesianRO) cartesianRO.observe(el);
     ensureImg(el);
   }
 
@@ -3929,11 +3963,39 @@
       region.className = 'fdy-toast-region';
       region.setAttribute('aria-live', 'polite');
       region.setAttribute('aria-atomic', 'false');
+      /* `manual`, not `auto`: an auto popover light-dismisses on an outside click and closes
+         itself the moment another popover opens. A toast is dismissed by its timer or its own
+         close button, by nobody else. */
+      region.setAttribute('popover', 'manual');
       document.body.appendChild(region);
     }
     return region;
   }
 
+  /* Put the region in the TOP LAYER, above any open <dialog>.
+   *
+   * A modal dialog lives in the top layer, where z-index does not reach — so a toast raised by an
+   * action taken inside a modal was painted behind that modal's backdrop, which is where an error
+   * message is least useful. showPopover() joins the same layer, and membership there is ordered by
+   * when you joined: hide-then-show re-joins at the top, so a toast shown while a dialog is open
+   * lands above it rather than under the dialog that was opened after the last toast.
+   *
+   * Guarded twice on purpose. `showPopover` is absent before Chrome 114 / Safari 17 / Firefox 125,
+   * and the call throws if the element is disconnected or already open — in every one of those
+   * cases the region stays an ordinary fixed block at z-index 200, which is what it has always
+   * been. A notification must never be the thing that throws.
+   */
+  function raise(node) {
+    if (!node || typeof node.showPopover !== 'function') return;
+    try {
+      if (node.matches(':popover-open')) node.hidePopover();
+      node.showPopover();
+    } catch (e) {
+      /* Not reachable through the guards above, but a toast is on the error path itself: if
+         raising it fails the message still has to appear, one layer down. */
+    }
+  }
+
   function dismiss(toast) {
     if (typeof toast === 'string') toast = keyed[toast]; // dismiss by key
     if (!toast || toast.dataset.leaving === '1') return;
@@ -4011,6 +4073,9 @@
       keyed[opts.key] = node;
     }
     region.appendChild(node);
+    // Raised per toast, not once at startup: a dialog opened AFTER the region joined the top layer
+    // would otherwise sit above it, which is the exact case this fixes.
+    raise(region);
 
     var timeout = opts.timeout == null ? 4000 : opts.timeout;
     if (timeout > 0) setTimeout(function () { dismiss(node); }, timeout);

package/docs/reference-screen.html

@@ -171,11 +171,6 @@
                    data-fdy-format="number"
                    role="img"
                    aria-label="Invoiced versus collected, in millions: invoiced rose from 62 to 88, collected from 54 to 81">
-                <table>
-                  <caption>Invoiced vs collected (millions)</caption>
-                  <tr><th scope="col">Month</th><th scope="col">Invoiced</th><th scope="col">Collected</th></tr>
-                  <tr><td>Jul</td><td>88</td><td>81</td></tr>
-                </table>
               </div>
             </div>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.49.0",
+  "version": "1.51.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -92,7 +92,7 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/cfl-multi.mjs browser/crowding.mjs",
+    "test:browser": "node --test browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/cfl-multi.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs",
     "prepack": "node tokens/build.mjs",
     "version": "node tokens/build.mjs && git add dist",
     "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit"

package/src/components/chart.css

@@ -42,12 +42,12 @@
 /* Cartesian charts (line / area / multi-series & stacked bar) — SVG with themed axes.
  * Axis colour comes from --chart-grid / --chart-tick (both theme-aware); series colours are
  * set inline by the renderer from --chart-1..8, so the whole chart recolours on data-theme. */
-.fdy-chart-xy{position:relative;display:flex;flex-direction:column;gap:var(--space-3);width:100%;}
-.fdy-chart-xy__plot{width:100%;aspect-ratio:16/9;min-height:8rem;}
+.fdy-chart-xy{position:relative;display:flex;flex-direction:column;gap:var(--space-3);width:100%;--fdy-chart-tick-size:var(--text-xs);}
+.fdy-chart-xy__plot{width:100%;aspect-ratio:16/9;min-height:8rem;font-size:var(--fdy-chart-tick-size);}
 .fdy-chart-xy__plot svg{display:block;width:100%;height:100%;overflow:visible;}
 .fdy-chart-xy__grid{stroke:var(--chart-grid);stroke-width:1;shape-rendering:crispEdges;}
-.fdy-chart-xy__tick{fill:var(--chart-tick);font-family:var(--font-mono);font-size:9px;}
-.fdy-chart-xy__xlabel{fill:var(--chart-tick);font-family:var(--font-body);font-size:9px;}
+.fdy-chart-xy__tick{fill:var(--chart-tick);font-family:var(--font-mono);}
+.fdy-chart-xy__xlabel{fill:var(--chart-tick);font-family:var(--font-body);}
 .fdy-chart-xy__line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;}
 .fdy-chart-xy__area{stroke:none;opacity:.14;}
 .fdy-chart-xy__dot{stroke:var(--color-surface);stroke-width:1;}

package/src/components/selection.css

@@ -1,6 +1,13 @@
 /* Freeday — Selection controls */
+/* `flex:none` on every box, track and standalone checkbox is load-bearing, not tidiness.
+   `.fdy-check` is an inline-flex row of [box, label], and a flex item with a WIDTH is still
+   shrinkable — so as soon as the label wrapped to a second line the box gave up horizontal space
+   to it and rendered an 18px-tall rectangle 13px wide. Squashed, off-square, and different from
+   every sibling whose label happened to be short: a form of five checkboxes showed three sizes.
+   Nothing in the declarations looked wrong, because the width was never overridden — it was
+   negotiated away. */
 .fdy-check,.fdy-radio,.fdy-switch{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;}
-.fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+.fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-check input{border-radius:var(--radius-sm);}
 .fdy-radio input{border-radius:50%;}
 .fdy-check input::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
@@ -10,13 +17,13 @@
 .fdy-check input:focus-visible,.fdy-radio input:focus-visible,.fdy-switch input:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-check input:disabled,.fdy-radio input:disabled,.fdy-switch input:disabled{opacity:.5;cursor:not-allowed;}
 .fdy-check:has(input:disabled),.fdy-radio:has(input:disabled),.fdy-switch:has(input:disabled){cursor:not-allowed;}
-.fdy-switch input{appearance:none;-webkit-appearance:none;position:relative;width:var(--control-switch-w);height:var(--control-switch-h);margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background var(--dur-base) var(--ease-standard);}
+.fdy-switch input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:var(--control-switch-w);height:var(--control-switch-h);margin:0;border-radius:var(--radius-full);background:var(--color-control-border);cursor:pointer;transition:background var(--dur-base) var(--ease-standard);}
 .fdy-switch input::before{content:"";position:absolute;top:2px;left:2px;width:calc(var(--control-switch-h) - 4px);height:calc(var(--control-switch-h) - 4px);border-radius:50%;background:var(--color-switch-thumb);box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease-spring);}
 .fdy-switch input:checked{background:var(--color-primary);}
 .fdy-switch input:checked::before{transform:translateX(calc(var(--control-switch-w) - var(--control-switch-h)));}
 
 /* Standalone checkbox (e.g. table row/select-all) — supports :indeterminate */
-.fdy-checkbox{appearance:none;-webkit-appearance:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
+.fdy-checkbox{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-checkbox::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
 .fdy-checkbox:checked,.fdy-checkbox:indeterminate{background:var(--color-primary);border-color:var(--color-primary);}
 .fdy-checkbox:checked::before{transform:scale(1);}

package/src/components/toast.css

@@ -1,5 +1,17 @@
 /* Freeday — Toast (transient notification) */
-.fdy-toast-region{position:fixed;z-index:200;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);width:min(24rem,calc(100vw - var(--space-8)));pointer-events:none;}
+/* The region is a POPOVER, not merely a high z-index.
+   `.fdy-modal` is a native <dialog> opened with showModal(), which puts it in the TOP LAYER — a
+   layer above the whole z-index universe, so no number here could ever beat it. A toast raised by
+   an action taken inside a modal was painted behind that modal's backdrop: dimmed, unreadable, and
+   most of it under the dialog itself. `freeday-toast.js` calls showPopover() as each toast is
+   added, which puts the region in the top layer too, and last-in wins there.
+   Everything after `pointer-events` is undoing the UA's [popover] defaults — it arrives with
+   inset:0, auto margins, a border, padding, a Canvas background and overflow:auto, none of which a
+   toast stack wants. Where showPopover() is unavailable the element is still an ordinary fixed
+   block at z-index 200, which is exactly what it was before. */
+.fdy-toast-region{position:fixed;z-index:200;inset:auto;bottom:var(--space-5);right:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);width:min(24rem,calc(100vw - var(--space-8)));height:auto;max-height:none;margin:0;padding:0;border:0;background:transparent;color:inherit;overflow:visible;pointer-events:none;}
+/* A popover gets a ::backdrop as well; a toast must not dim the page behind it. */
+.fdy-toast-region::backdrop{background:transparent;}
 .fdy-toast{pointer-events:auto;display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--color-inverse-surface);color:var(--color-inverse-text);box-shadow:var(--shadow-3);}
 .fdy-toast__accent{flex:none;width:.25rem;align-self:stretch;border-radius:var(--radius-full);background:var(--color-primary);}
 .fdy-toast--success .fdy-toast__accent{background:var(--color-success);}