@cahyo-dimas/freeday 1.50.0 → 1.51.1

package/CHANGELOG.md

@@ -3,6 +3,78 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.51.1] — 2026-08-24
+### Docs
+- **`COMPONENTS.md` never said whether two overlays may be open at once** (#046). Modal and Drawer
+  were documented in isolation, so "can a confirm modal open over an open drawer?" had no answer in
+  the file — and the built CSS does not answer it either: the only overlay `z-index` in the bundle
+  belongs to the toast region. Both entries now state the rule, because both components are
+  `<dialog>` opened with `showModal()` and therefore enter the **top layer**, where paint order is
+  the order they were opened: the later modal is above the drawer with no `z-index` from either,
+  Escape closes the topmost first (so cancelling returns to the still-open drawer), and closing them
+  out of order leaves the survivor painted and dismissible.
+- **The one caveat is the browser's, and it is now written down**: open each overlay from the
+  gesture that asked for it. A `showModal()` with no user activation — from a timer, or after an
+  `await` that outlived the click — has its close watcher GROUPED with the dialog below it, and a
+  single Escape then closes both. Measured, not assumed: two untrusted `.click()` opens, one Escape,
+  both dialogs shut.
+### Added — guards
+- `browser/overlay-stack.mjs` (3 tests) proves that paragraph instead of restating it — the #041
+  lesson applied to a documentation change. Paint order is asserted in **pixels** at the overlap of
+  the two, because a modal dialog makes the rest of the document inert and `elementFromPoint` will
+  name the dialog whatever is really on top; the overlays are opened with **trusted** clicks, or the
+  close-watcher grouping above would fail the Escape assertion for a reason that is not the kit's.
+- **`pressKey` in the browser harness sent every key but Tab with virtual-key code 0** — delivered
+  to the page, but not acted on by the browser: Escape reached a `keydown` listener yet never closed
+  a native `<dialog>`. A dismissal guard written with it would have passed for the wrong reason and
+  reported a broken kit as fine. It now carries the real `windowsVirtualKeyCode` /
+  `nativeVirtualKeyCode` for the keys the suite presses.
+
+## [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

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`
@@ -1036,6 +1049,18 @@ painted on top of a modal, because it will tell you the dialog is, even when it
 `__close`. The body scrolls; the footer never clips. `aria-labelledby` → the title's `id`;
 `data-close` on any button that should close it.
 
+**Stacking two overlays is supported.** Modal and drawer are both `<dialog>` opened with
+`showModal()`, so both enter the top layer and paint in the order they were opened — a confirm
+modal opened from inside an open drawer paints **above** it, and neither needs a `z-index` for
+that. Escape closes the topmost first, so cancelling returns to the still-open drawer; a second
+Escape then closes the drawer. Closing them out of order is fine too: closing the drawer while the
+modal is up leaves the modal open, painted and dismissible.
+
+One caveat, and it is the browser's rather than the kit's: **open each overlay from the gesture
+that asked for it.** A `showModal()` that runs with no user activation — from a timer, or after an
+`await` that outlived the click — has its close watcher grouped with the dialog below it, and then
+a single Escape closes both at once instead of the topmost only.
+
 ## Drawer — `.fdy-drawer`
 > **Typed wrapper: `<FdyDrawer>`** — 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).
 
@@ -1043,6 +1068,11 @@ Temporary side panel on native `<dialog>` — left by default, `--right` to flip
 `__title` `__body` `__footer` `__close`. Open it from any
 `<button data-fdy-drawer="<dialog id>">`. Needs `freeday-drawer.js`.
 
+Opened with `showModal()`, so it is in the **top layer** on the same terms as the modal — including
+opening a modal over an open drawer, which is supported and described under
+[Modal → *Stacking two overlays*](#modal--fdy-modal). It slides in on `transform` and never animates
+opacity: wait on its position, not on `opacity`, if you need to know when it has arrived.
+
 ## Accordion — `.fdy-accordion`
 Native `<details>`, zero JS: `.fdy-accordion__item` on each `<details>`, content in
 `.fdy-accordion__panel`, the trigger is the `<summary>`.

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.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.51.1)
 
 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.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.51.1)
 
 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.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;}

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;}

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);
   }
 

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.50.0",
+  "version": "1.51.1",
   "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 browser/over-dialog.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 browser/overlay-stack.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;}