@cahyo-dimas/freeday 1.8.0 → 1.10.0

package/CHANGELOG.md

@@ -3,6 +3,54 @@
 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.
+
+### Fixed
+- **`FdyTable` now accepts `interface`-typed rows.** The row generic was constrained to
+  `Record<string, unknown>`, to which a TypeScript `interface` is never assignable (interfaces get no
+  implicit index signature) — so a normally-typed DTO array failed to compile and `FdyTable` was
+  effectively unusable in a strict-TS app. Widened the bound to `object` in both adapters; the row type
+  now **infers** correctly (`cell-*` slots / `renderCell` are properly typed) and no cast is pushed
+  onto consumers. The component never indexes rows directly — all access goes through the
+  already-unconstrained core, which is unchanged.
+
+### Added
+- **`FdyTable` row activation (opt-in).** `rowActivatable` makes rows focusable and emits
+  `row-activate` (Vue) / calls `onRowActivate` (React) on click, or Enter/Space while the row itself is
+  focused — a control inside a cell keeps its own event (the `target !== currentTarget` guard). Adds a
+  `rowClass(row)` hook for per-row state (e.g. a selected row) and a `.fdy-table__row--activatable`
+  class (pointer + `:focus-visible` ring; hover tint is already inherited from the base row rule).
+  Replaces the hand-rolled `<tr tabindex="0" @click @keydown>` + duplicated row CSS consumers were
+  each re-writing.
+
 ## [1.8.0] — 2026-07-28
 Release **1.8 — framework-safe data table, modal/drawer wrappers, and a monospace utility**.
 Non-breaking, purely additive. No existing selector, markup, or enhancer changed.

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.8.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.8.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.8.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.8.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,
@@ -29,7 +29,7 @@ import { FdyTableFilter } from './FdyTableFilter';
 //     `onSortChange` / `onFiltersChange` / `onPageChange` for the caller to feed back into its query.
 // Column filters (text/enum/number/date) apply live; in server mode, debounce the callback if needed.
 
-export interface FdyTableProps<Row extends Record<string, unknown>> {
+export interface FdyTableProps<Row extends object> {
   columns: ReadonlyArray<FdyTableColumn<Row>>;
   rows: ReadonlyArray<Row>;
   rowKey: (row: Row) => string | number;
@@ -51,9 +51,19 @@ export interface FdyTableProps<Row extends Record<string, unknown>> {
   renderCell?: (column: FdyTableColumn<Row>, row: Row, value: unknown) => ReactNode;
   toolbar?: ReactNode;
   empty?: ReactNode;
+  /** Opt in to row activation: rows become focusable and call `onRowActivate` on click/Enter/Space. */
+  rowActivatable?: boolean;
+  /** Per-row class hook, e.g. to mark a selected row. */
+  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 Record<string, unknown>>(props: FdyTableProps<Row>): JSX.Element {
+export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Element {
   const serverPaged: boolean = props.page != null;
   const sortControlled: boolean = serverPaged || props.sort !== undefined;
   const filtersControlled: boolean = serverPaged || props.filters !== undefined;
@@ -143,6 +153,24 @@ export function FdyTable<Row extends Record<string, unknown>>(props: FdyTablePro
   function alignStyle(col: FdyTableColumn<Row>): CSSProperties | undefined {
     return col.align !== undefined ? { textAlign: col.align } : undefined;
   }
+  function rowClassName(row: Row): string | undefined {
+    const cls: string = [props.rowClass?.(row), props.rowActivatable === true ? 'fdy-table__row--activatable' : undefined]
+      .filter(Boolean)
+      .join(' ');
+    return cls === '' ? undefined : cls;
+  }
+  // Enter/Space activate only when the row itself is focused — a control inside a cell keeps its own
+  // event (the `event.target !== event.currentTarget` guard). Click relies on inner controls calling
+  // stopPropagation, matching the pattern consumers hand-roll today.
+  function onRowKeydown(e: React.KeyboardEvent<HTMLTableRowElement>, row: Row): void {
+    if (props.rowActivatable !== true || e.target !== e.currentTarget) return;
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    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));
@@ -192,11 +220,26 @@ export function FdyTable<Row extends Record<string, unknown>>(props: FdyTablePro
               </tr>
             ) : (
               displayRows.map((row: Row): JSX.Element => (
-                <tr key={props.rowKey(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

@@ -1,4 +1,4 @@
-<script setup lang="ts" generic="Row extends Record<string, unknown>">
+<script setup lang="ts" generic="Row extends object">
 import { computed, ref, watch, type ComputedRef, type Ref } from 'vue';
 import {
   cellValue,
@@ -44,12 +44,20 @@ const props = defineProps<{
   loading?: boolean;
   emptyText?: string;
   ariaLabel?: string;
+  /** Opt in to row activation: rows become focusable and emit `row-activate` on click/Enter/Space. */
+  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<{
   'update:sort': [sort: FdySortState | null];
   'update:filters': [filters: FdyFilterMap];
   'update:page': [page: FdyPageState];
+  /** A row was activated (click, or Enter/Space while the row itself is focused). */
+  'row-activate': [row: Row];
 }>();
 
 const internalSort: Ref<FdySortState | null> = ref(null);
@@ -162,6 +170,25 @@ function cellClass(col: FdyTableColumn<Row>): string | undefined {
 function alignStyle(col: FdyTableColumn<Row>): Record<string, string> | undefined {
   return col.align !== undefined ? { textAlign: col.align } : undefined;
 }
+
+function rowClasses(row: Row): Array<string | undefined> {
+  return [props.rowClass?.(row), props.rowActivatable === true ? 'fdy-table__row--activatable' : undefined];
+}
+function onRowClick(row: Row): void {
+  if (props.rowActivatable === true) emit('row-activate', row);
+}
+// Enter/Space activate only when the row itself is focused — a control inside a cell keeps its own
+// event (the `event.target !== event.currentTarget` guard). Click relies on inner controls calling
+// stopPropagation, matching the pattern consumers hand-roll today.
+function onRowKeydown(e: KeyboardEvent, row: Row): void {
+  if (props.rowActivatable !== true || e.target !== e.currentTarget) return;
+  if (e.key !== 'Enter' && e.key !== ' ') return;
+  e.preventDefault();
+  emit('row-activate', row);
+}
+function isExpanded(row: Row): boolean {
+  return props.expandedKeys?.includes(props.rowKey(row)) === true;
+}
 </script>
 
 <template>
@@ -202,11 +229,24 @@ function alignStyle(col: FdyTableColumn<Row>): Record<string, string> | undefine
               <slot name="empty">{{ emptyText ?? 'No data' }}</slot>
             </td>
           </tr>
-          <tr v-for="row in displayRows" v-else :key="rowKey(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);}
@@ -1219,6 +1228,12 @@ a { color: var(--color-primary); }
 .fdy-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
 /* Loading / empty state cell (FdyTable spans it across all columns). */
 .fdy-table__state{text-align:center;color:var(--color-text-muted);padding:var(--space-6) var(--space-4);}
+/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint already
+   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);}
@@ -874,6 +883,12 @@ a { color: var(--color-primary); }
 .fdy-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
 /* Loading / empty state cell (FdyTable spans it across all columns). */
 .fdy-table__state{text-align:center;color:var(--color-text-muted);padding:var(--space-6) var(--space-4);}
+/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint already
+   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.8.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

@@ -15,6 +15,12 @@
 .fdy-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
 /* Loading / empty state cell (FdyTable spans it across all columns). */
 .fdy-table__state{text-align:center;color:var(--color-text-muted);padding:var(--space-6) var(--space-4);}
+/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint already
+   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;