@cahyo-dimas/freeday 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.10.0] — 2026-07-28
+Follow-ups from the doc-ai-automation migration (improvement notes #27–#30). Additive / corrective;
+no breaking changes.
+
+### Fixed
+- **`<fieldset class="fdy-field">` no longer leaks native browser chrome (#27).** The kit shipped no
+  `fieldset` reset, so a grouped field (a radio/checkbox group with a `<legend>`) showed the UA groove
+  border, extra padding, and `min-inline-size:min-content` — the last of which also blocked the
+  filterbar column widths from shrinking it. Added a scoped `fieldset.fdy-field` reset so it lays out
+  identically to the `<div>` form.
+- **Chart x-axis: the last label no longer collides with its neighbour (#29).** `freeday-chart.js`
+  force-drew the final label with no spacing check, so on a dense axis (e.g. 24 hourly points) the
+  last two labels fused. It now estimates the widest label instead of assuming a fixed 40px slot, and
+  drops the penultimate label when the forced-last one would overlap it. Visual only; sparse axes
+  render identically.
+
+### Added
+- **`FdyTable` expandable detail rows (#30).** A `row-detail` slot (Vue) / `renderRowDetail` prop
+  (React) renders a full-width row beneath any expanded row, driven by a **controlled** `expandedKeys`
+  (matches the sort/filter/page contract; pairs with `row-activate` as the toggle). Adds a
+  `.fdy-table__detailrow` class (muted panel, no hover tint). Removes the last interaction that kept a
+  table hand-rolled.
+- **`.fdy-field--w-2xl` (25rem) filterbar column (#28).** Wide enough for a two-picker date range, so
+  it need not burn the single `--w-grow` slot. The date-range pickers also gained a `min-width` (7rem)
+  so a squeezed range compresses and wraps instead of clipping the date (was `min-width:0`).
+
 ## [1.9.0] — 2026-07-28
 Follow-ups to 1.8.0's `FdyTable` (improvement notes #25/#26). Additive — the #25 change **widens** a
 generic bound, so every call site that compiled before still compiles.

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.9.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.9.0)
+[![Release](https://img.shields.io/badge/release-v1.10.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.10.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.9.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.9.0)
+[![Release](https://img.shields.io/badge/release-v1.10.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.10.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/adapters/react/components/FdyTable.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, JSX, ReactNode } from 'react';
-import { useEffect, useMemo, useState } from 'react';
+import { Fragment, useEffect, useMemo, useState } from 'react';
 import {
   cellValue,
   cellText,
@@ -57,6 +57,10 @@ export interface FdyTableProps<Row extends object> {
   rowClass?: (row: Row) => string | undefined;
   /** A row was activated (click, or Enter/Space while the row itself is focused). */
   onRowActivate?: (row: Row) => void;
+  /** Controlled: row keys whose detail is shown as a full-width row beneath them. */
+  expandedKeys?: ReadonlyArray<string | number>;
+  /** Renders the expandable detail row for an expanded row (React equivalent of Vue's `row-detail` slot). */
+  renderRowDetail?: (row: Row) => ReactNode;
 }
 
 export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Element {
@@ -164,6 +168,9 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
     e.preventDefault();
     props.onRowActivate?.(row);
   }
+  function isExpanded(row: Row): boolean {
+    return props.expandedKeys?.includes(props.rowKey(row)) === true;
+  }
   function renderCellContent(col: FdyTableColumn<Row>, row: Row): ReactNode {
     if (props.renderCell !== undefined) {
       const custom: ReactNode = props.renderCell(col, row, cellValue(row, col));
@@ -213,19 +220,26 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
               </tr>
             ) : (
               displayRows.map((row: Row): JSX.Element => (
-                <tr
-                  key={props.rowKey(row)}
-                  className={rowClassName(row)}
-                  tabIndex={props.rowActivatable ? 0 : undefined}
-                  onClick={(): void => {
-                    if (props.rowActivatable === true) props.onRowActivate?.(row);
-                  }}
-                  onKeyDown={(e): void => onRowKeydown(e, row)}
-                >
-                  {props.columns.map((col: FdyTableColumn<Row>): JSX.Element => (
-                    <td key={col.key} className={cellClass(col)} style={alignStyle(col)}>{renderCellContent(col, row)}</td>
-                  ))}
-                </tr>
+                <Fragment key={props.rowKey(row)}>
+                  <tr
+                    className={rowClassName(row)}
+                    tabIndex={props.rowActivatable ? 0 : undefined}
+                    aria-expanded={props.renderRowDetail !== undefined ? (isExpanded(row) ? 'true' : 'false') : undefined}
+                    onClick={(): void => {
+                      if (props.rowActivatable === true) props.onRowActivate?.(row);
+                    }}
+                    onKeyDown={(e): void => onRowKeydown(e, row)}
+                  >
+                    {props.columns.map((col: FdyTableColumn<Row>): JSX.Element => (
+                      <td key={col.key} className={cellClass(col)} style={alignStyle(col)}>{renderCellContent(col, row)}</td>
+                    ))}
+                  </tr>
+                  {props.renderRowDetail !== undefined && isExpanded(row) && (
+                    <tr className="fdy-table__detailrow">
+                      <td colSpan={colCount}>{props.renderRowDetail(row)}</td>
+                    </tr>
+                  )}
+                </Fragment>
               ))
             )}
           </tbody>

package/adapters/vue/components/FdyTable.vue

@@ -48,6 +48,8 @@ const props = defineProps<{
   rowActivatable?: boolean;
   /** Per-row class hook, e.g. to mark a selected row. */
   rowClass?: (row: Row) => string | undefined;
+  /** Controlled: row keys whose `row-detail` slot is shown as a full-width row beneath them. */
+  expandedKeys?: ReadonlyArray<string | number>;
 }>();
 
 const emit = defineEmits<{
@@ -184,6 +186,9 @@ function onRowKeydown(e: KeyboardEvent, row: Row): void {
   e.preventDefault();
   emit('row-activate', row);
 }
+function isExpanded(row: Row): boolean {
+  return props.expandedKeys?.includes(props.rowKey(row)) === true;
+}
 </script>
 
 <template>
@@ -224,19 +229,24 @@ function onRowKeydown(e: KeyboardEvent, row: Row): void {
               <slot name="empty">{{ emptyText ?? 'No data' }}</slot>
             </td>
           </tr>
-          <tr
-            v-for="row in displayRows"
-            v-else
-            :key="rowKey(row)"
-            :class="rowClasses(row)"
-            :tabindex="rowActivatable ? 0 : undefined"
-            @click="onRowClick(row)"
-            @keydown="onRowKeydown($event, row)"
-          >
-            <td v-for="col in columns" :key="col.key" :class="cellClass(col)" :style="alignStyle(col)">
-              <slot :name="`cell-${col.key}`" :row="row" :value="cellValue(row, col)">{{ cellText(row, col) }}</slot>
-            </td>
-          </tr>
+          <template v-else>
+            <template v-for="row in displayRows" :key="rowKey(row)">
+              <tr
+                :class="rowClasses(row)"
+                :tabindex="rowActivatable ? 0 : undefined"
+                :aria-expanded="$slots['row-detail'] ? (isExpanded(row) ? 'true' : 'false') : undefined"
+                @click="onRowClick(row)"
+                @keydown="onRowKeydown($event, row)"
+              >
+                <td v-for="col in columns" :key="col.key" :class="cellClass(col)" :style="alignStyle(col)">
+                  <slot :name="`cell-${col.key}`" :row="row" :value="cellValue(row, col)">{{ cellText(row, col) }}</slot>
+                </td>
+              </tr>
+              <tr v-if="$slots['row-detail'] && isExpanded(row)" class="fdy-table__detailrow">
+                <td :colspan="columns.length"><slot name="row-detail" :row="row" /></td>
+              </tr>
+            </template>
+          </template>
         </tbody>
       </table>
     </div>

package/dist/freeday-chart.js

@@ -213,17 +213,31 @@
       svg.appendChild(tk);
     }
 
-    // x category labels with autoskip.
-    var maxTicks = Math.max(2, Math.floor(plotW / 40)), step = Math.ceil(n / maxTicks);
+    // x category labels with autoskip. Labels are author-supplied, so estimate the widest one instead
+    // 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;
+    var maxTicks = Math.max(2, Math.floor(plotW / minGap)), step = Math.ceil(n / maxTicks);
+    var xPos = function (i) { return (type === 'bar') ? xCenter(i) : xLine(i); };
+    var kept = [];
     for (var xi = 0; xi < n; xi++) {
-      if (xi % step !== 0 && xi !== n - 1) continue;
-      var lx = (type === 'bar') ? xCenter(xi) : xLine(xi);
+      if (xi % step === 0 || xi === n - 1) kept.push(xi);
+    }
+    // The last label is worth forcing, but not on top of its neighbour — drop the penultimate one.
+    if (kept.length >= 2 && xPos(kept[kept.length - 1]) - xPos(kept[kept.length - 2]) < minGap) {
+      kept.splice(kept.length - 2, 1);
+    }
+    kept.forEach(function (xk) {
       var xt = svgEl('text');
-      xt.setAttribute('x', lx.toFixed(1)); xt.setAttribute('y', H - 6);
+      xt.setAttribute('x', xPos(xk).toFixed(1)); xt.setAttribute('y', H - 6);
       xt.setAttribute('text-anchor', 'middle'); xt.setAttribute('class', 'fdy-chart-xy__xlabel');
-      xt.textContent = labels[xi] || ('#' + (xi + 1));
+      xt.textContent = labels[xk] || ('#' + (xk + 1));
       svg.appendChild(xt);
-    }
+    });
 
     if (type === 'bar') {
       var S = series.length;

package/dist/freeday.bundle.css

@@ -875,7 +875,9 @@ a { color: var(--color-primary); }
 /* Responsive: each picker may shrink (min-width:0) & wrap so the range never overflows a
    narrow row/phone; inline-flex still hugs to ~23rem at wider widths (look unchanged). */
 .fdy-daterange{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);}
-.fdy-daterange .fdy-datepicker{flex:0 1 11rem;min-width:0;}
+/* Each picker shrinks from an 11rem basis but not below ~7rem — enough for "dd/mm/yyyy" + the icon,
+   so a squeezed range compresses gracefully (and wraps) instead of clipping the date. */
+.fdy-daterange .fdy-datepicker{flex:0 1 11rem;min-width:7rem;}
 .fdy-daterange__sep{flex:none;color:var(--color-text-subtle);}
 
 @media (prefers-reduced-motion:no-preference){.fdy-datepicker__panel:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
@@ -978,13 +980,15 @@ a { color: var(--color-primary); }
 .fdy-filterbar>.fdy-field--w-sm{width:9rem;}
 .fdy-filterbar>.fdy-field--w-lg{width:15rem;}
 .fdy-filterbar>.fdy-field--w-xl{width:18rem;}
+/* Wide enough for a two-picker date range (~25rem) so it need not burn the single --w-grow slot. */
+.fdy-filterbar>.fdy-field--w-2xl{width:25rem;}
 /* One growing field (usually the search) absorbs the remaining width. */
 .fdy-filterbar>.fdy-field--w-grow{flex:1 1 16rem;width:auto;min-width:12rem;}
 /* Trailing actions (buttons) pushed to the end, aligned with the controls' baseline. */
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
 /* Stack on narrow screens so nothing overflows the row. */
 @media (max-width:640px){
-  .fdy-filterbar>.fdy-field,.fdy-filterbar>.fdy-field--w-sm,.fdy-filterbar>.fdy-field--w-lg,.fdy-filterbar>.fdy-field--w-xl,.fdy-filterbar>.fdy-field--w-grow{width:100%;flex:1 1 100%;}
+  .fdy-filterbar>.fdy-field,.fdy-filterbar>.fdy-field--w-sm,.fdy-filterbar>.fdy-field--w-lg,.fdy-filterbar>.fdy-field--w-xl,.fdy-filterbar>.fdy-field--w-2xl,.fdy-filterbar>.fdy-field--w-grow{width:100%;flex:1 1 100%;}
   .fdy-filterbar__actions{width:100%;margin-left:0;}
 }
 
@@ -1022,6 +1026,11 @@ a { color: var(--color-primary); }
 
 /* Freeday — Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
+/* A grouped field is legitimately a <fieldset> (it needs a <legend>) — e.g. a radio/checkbox group.
+   Neutralise the UA groove border / padding / min-inline-size so it lays out identically to the
+   <div> form (min-inline-size:min-content would otherwise block the filterbar column widths). */
+fieldset.fdy-field{border:0;margin:0;padding:0;min-inline-size:0;}
+fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);}
 .fdy-input,.fdy-textarea{width:100%;height:var(--control-h);padding:0 var(--space-3);font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-input::placeholder,.fdy-textarea::placeholder{color:var(--color-text-subtle);}
@@ -1223,6 +1232,8 @@ a { color: var(--color-primary); }
    comes from the base `.fdy-table tbody tr:hover` rule, so this only adds the affordance + focus. */
 .fdy-table__row--activatable{cursor:pointer;}
 .fdy-table__row--activatable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
+/* Expandable detail row (FdyTable row-detail slot): a muted panel under its row, no hover tint. */
+.fdy-table__detailrow>td,.fdy-table__detailrow:hover>td{background:var(--color-surface-2);}
 .fdy-table th[aria-sort]{cursor:pointer;}
 .fdy-table th[aria-sort="ascending"]::after{content:" ↑";color:var(--color-primary);}
 .fdy-table th[aria-sort="descending"]::after{content:" ↓";color:var(--color-primary);}

package/dist/freeday.css

@@ -530,7 +530,9 @@ a { color: var(--color-primary); }
 /* Responsive: each picker may shrink (min-width:0) & wrap so the range never overflows a
    narrow row/phone; inline-flex still hugs to ~23rem at wider widths (look unchanged). */
 .fdy-daterange{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);}
-.fdy-daterange .fdy-datepicker{flex:0 1 11rem;min-width:0;}
+/* Each picker shrinks from an 11rem basis but not below ~7rem — enough for "dd/mm/yyyy" + the icon,
+   so a squeezed range compresses gracefully (and wraps) instead of clipping the date. */
+.fdy-daterange .fdy-datepicker{flex:0 1 11rem;min-width:7rem;}
 .fdy-daterange__sep{flex:none;color:var(--color-text-subtle);}
 
 @media (prefers-reduced-motion:no-preference){.fdy-datepicker__panel:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
@@ -633,13 +635,15 @@ a { color: var(--color-primary); }
 .fdy-filterbar>.fdy-field--w-sm{width:9rem;}
 .fdy-filterbar>.fdy-field--w-lg{width:15rem;}
 .fdy-filterbar>.fdy-field--w-xl{width:18rem;}
+/* Wide enough for a two-picker date range (~25rem) so it need not burn the single --w-grow slot. */
+.fdy-filterbar>.fdy-field--w-2xl{width:25rem;}
 /* One growing field (usually the search) absorbs the remaining width. */
 .fdy-filterbar>.fdy-field--w-grow{flex:1 1 16rem;width:auto;min-width:12rem;}
 /* Trailing actions (buttons) pushed to the end, aligned with the controls' baseline. */
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
 /* Stack on narrow screens so nothing overflows the row. */
 @media (max-width:640px){
-  .fdy-filterbar>.fdy-field,.fdy-filterbar>.fdy-field--w-sm,.fdy-filterbar>.fdy-field--w-lg,.fdy-filterbar>.fdy-field--w-xl,.fdy-filterbar>.fdy-field--w-grow{width:100%;flex:1 1 100%;}
+  .fdy-filterbar>.fdy-field,.fdy-filterbar>.fdy-field--w-sm,.fdy-filterbar>.fdy-field--w-lg,.fdy-filterbar>.fdy-field--w-xl,.fdy-filterbar>.fdy-field--w-2xl,.fdy-filterbar>.fdy-field--w-grow{width:100%;flex:1 1 100%;}
   .fdy-filterbar__actions{width:100%;margin-left:0;}
 }
 
@@ -677,6 +681,11 @@ a { color: var(--color-primary); }
 
 /* Freeday — Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
+/* A grouped field is legitimately a <fieldset> (it needs a <legend>) — e.g. a radio/checkbox group.
+   Neutralise the UA groove border / padding / min-inline-size so it lays out identically to the
+   <div> form (min-inline-size:min-content would otherwise block the filterbar column widths). */
+fieldset.fdy-field{border:0;margin:0;padding:0;min-inline-size:0;}
+fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);}
 .fdy-input,.fdy-textarea{width:100%;height:var(--control-h);padding:0 var(--space-3);font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-input::placeholder,.fdy-textarea::placeholder{color:var(--color-text-subtle);}
@@ -878,6 +887,8 @@ a { color: var(--color-primary); }
    comes from the base `.fdy-table tbody tr:hover` rule, so this only adds the affordance + focus. */
 .fdy-table__row--activatable{cursor:pointer;}
 .fdy-table__row--activatable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
+/* Expandable detail row (FdyTable row-detail slot): a muted panel under its row, no hover tint. */
+.fdy-table__detailrow>td,.fdy-table__detailrow:hover>td{background:var(--color-surface-2);}
 .fdy-table th[aria-sort]{cursor:pointer;}
 .fdy-table th[aria-sort="ascending"]::after{content:" ↑";color:var(--color-primary);}
 .fdy-table th[aria-sort="descending"]::after{content:" ↓";color:var(--color-primary);}

package/dist/freeday.js

@@ -986,17 +986,31 @@
       svg.appendChild(tk);
     }
 
-    // x category labels with autoskip.
-    var maxTicks = Math.max(2, Math.floor(plotW / 40)), step = Math.ceil(n / maxTicks);
+    // x category labels with autoskip. Labels are author-supplied, so estimate the widest one instead
+    // 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;
+    var maxTicks = Math.max(2, Math.floor(plotW / minGap)), step = Math.ceil(n / maxTicks);
+    var xPos = function (i) { return (type === 'bar') ? xCenter(i) : xLine(i); };
+    var kept = [];
     for (var xi = 0; xi < n; xi++) {
-      if (xi % step !== 0 && xi !== n - 1) continue;
-      var lx = (type === 'bar') ? xCenter(xi) : xLine(xi);
+      if (xi % step === 0 || xi === n - 1) kept.push(xi);
+    }
+    // The last label is worth forcing, but not on top of its neighbour — drop the penultimate one.
+    if (kept.length >= 2 && xPos(kept[kept.length - 1]) - xPos(kept[kept.length - 2]) < minGap) {
+      kept.splice(kept.length - 2, 1);
+    }
+    kept.forEach(function (xk) {
       var xt = svgEl('text');
-      xt.setAttribute('x', lx.toFixed(1)); xt.setAttribute('y', H - 6);
+      xt.setAttribute('x', xPos(xk).toFixed(1)); xt.setAttribute('y', H - 6);
       xt.setAttribute('text-anchor', 'middle'); xt.setAttribute('class', 'fdy-chart-xy__xlabel');
-      xt.textContent = labels[xi] || ('#' + (xi + 1));
+      xt.textContent = labels[xk] || ('#' + (xk + 1));
       svg.appendChild(xt);
-    }
+    });
 
     if (type === 'bar') {
       var S = series.length;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",

package/src/components/datepicker.css

@@ -38,7 +38,9 @@
 /* Responsive: each picker may shrink (min-width:0) & wrap so the range never overflows a
    narrow row/phone; inline-flex still hugs to ~23rem at wider widths (look unchanged). */
 .fdy-daterange{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);}
-.fdy-daterange .fdy-datepicker{flex:0 1 11rem;min-width:0;}
+/* Each picker shrinks from an 11rem basis but not below ~7rem — enough for "dd/mm/yyyy" + the icon,
+   so a squeezed range compresses gracefully (and wraps) instead of clipping the date. */
+.fdy-daterange .fdy-datepicker{flex:0 1 11rem;min-width:7rem;}
 .fdy-daterange__sep{flex:none;color:var(--color-text-subtle);}
 
 @media (prefers-reduced-motion:no-preference){.fdy-datepicker__panel:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}

package/src/components/filterbar.css

@@ -14,12 +14,14 @@
 .fdy-filterbar>.fdy-field--w-sm{width:9rem;}
 .fdy-filterbar>.fdy-field--w-lg{width:15rem;}
 .fdy-filterbar>.fdy-field--w-xl{width:18rem;}
+/* Wide enough for a two-picker date range (~25rem) so it need not burn the single --w-grow slot. */
+.fdy-filterbar>.fdy-field--w-2xl{width:25rem;}
 /* One growing field (usually the search) absorbs the remaining width. */
 .fdy-filterbar>.fdy-field--w-grow{flex:1 1 16rem;width:auto;min-width:12rem;}
 /* Trailing actions (buttons) pushed to the end, aligned with the controls' baseline. */
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
 /* Stack on narrow screens so nothing overflows the row. */
 @media (max-width:640px){
-  .fdy-filterbar>.fdy-field,.fdy-filterbar>.fdy-field--w-sm,.fdy-filterbar>.fdy-field--w-lg,.fdy-filterbar>.fdy-field--w-xl,.fdy-filterbar>.fdy-field--w-grow{width:100%;flex:1 1 100%;}
+  .fdy-filterbar>.fdy-field,.fdy-filterbar>.fdy-field--w-sm,.fdy-filterbar>.fdy-field--w-lg,.fdy-filterbar>.fdy-field--w-xl,.fdy-filterbar>.fdy-field--w-2xl,.fdy-filterbar>.fdy-field--w-grow{width:100%;flex:1 1 100%;}
   .fdy-filterbar__actions{width:100%;margin-left:0;}
 }

package/src/components/input.css

@@ -1,5 +1,10 @@
 /* Freeday — Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
+/* A grouped field is legitimately a <fieldset> (it needs a <legend>) — e.g. a radio/checkbox group.
+   Neutralise the UA groove border / padding / min-inline-size so it lays out identically to the
+   <div> form (min-inline-size:min-content would otherwise block the filterbar column widths). */
+fieldset.fdy-field{border:0;margin:0;padding:0;min-inline-size:0;}
+fieldset.fdy-field>legend{padding:0;float:none;}
 .fdy-label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);}
 .fdy-input,.fdy-textarea{width:100%;height:var(--control-h);padding:0 var(--space-3);font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-input::placeholder,.fdy-textarea::placeholder{color:var(--color-text-subtle);}

package/src/components/table.css

@@ -19,6 +19,8 @@
    comes from the base `.fdy-table tbody tr:hover` rule, so this only adds the affordance + focus. */
 .fdy-table__row--activatable{cursor:pointer;}
 .fdy-table__row--activatable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
+/* Expandable detail row (FdyTable row-detail slot): a muted panel under its row, no hover tint. */
+.fdy-table__detailrow>td,.fdy-table__detailrow:hover>td{background:var(--color-surface-2);}
 .fdy-table th[aria-sort]{cursor:pointer;}
 .fdy-table th[aria-sort="ascending"]::after{content:" ↑";color:var(--color-primary);}
 .fdy-table th[aria-sort="descending"]::after{content:" ↓";color:var(--color-primary);}

package/src/freeday-chart.js

@@ -213,17 +213,31 @@
       svg.appendChild(tk);
     }
 
-    // x category labels with autoskip.
-    var maxTicks = Math.max(2, Math.floor(plotW / 40)), step = Math.ceil(n / maxTicks);
+    // x category labels with autoskip. Labels are author-supplied, so estimate the widest one instead
+    // 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;
+    var maxTicks = Math.max(2, Math.floor(plotW / minGap)), step = Math.ceil(n / maxTicks);
+    var xPos = function (i) { return (type === 'bar') ? xCenter(i) : xLine(i); };
+    var kept = [];
     for (var xi = 0; xi < n; xi++) {
-      if (xi % step !== 0 && xi !== n - 1) continue;
-      var lx = (type === 'bar') ? xCenter(xi) : xLine(xi);
+      if (xi % step === 0 || xi === n - 1) kept.push(xi);
+    }
+    // The last label is worth forcing, but not on top of its neighbour — drop the penultimate one.
+    if (kept.length >= 2 && xPos(kept[kept.length - 1]) - xPos(kept[kept.length - 2]) < minGap) {
+      kept.splice(kept.length - 2, 1);
+    }
+    kept.forEach(function (xk) {
       var xt = svgEl('text');
-      xt.setAttribute('x', lx.toFixed(1)); xt.setAttribute('y', H - 6);
+      xt.setAttribute('x', xPos(xk).toFixed(1)); xt.setAttribute('y', H - 6);
       xt.setAttribute('text-anchor', 'middle'); xt.setAttribute('class', 'fdy-chart-xy__xlabel');
-      xt.textContent = labels[xi] || ('#' + (xi + 1));
+      xt.textContent = labels[xk] || ('#' + (xk + 1));
       svg.appendChild(xt);
-    }
+    });
 
     if (type === 'bar') {
       var S = series.length;