@cahyo-dimas/freeday 1.9.0 → 1.11.0

package/CHANGELOG.md

@@ -3,6 +3,55 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.11.0] — 2026-07-28
+Follow-ups from the doc-ai-automation migration (improvement notes #31–#33). Additive / corrective.
+
+### Fixed
+- **Badges no longer wrap and break the pill (#31).** `.fdy-badge` had `line-height:1` but no
+  `white-space`, so a two-word label (e.g. "Needs review") wrapped and collided with the pill padding,
+  turning the capsule into a cramped lozenge. Added `white-space:nowrap` — matching the sibling
+  `.fdy-badge-ov`, which already had it. A too-narrow badge now overflows its column (which
+  `.fdy-table-scroll` already handles) instead of wrapping.
+- **Donut chart honours `legend="none"` (#33).** `freeday-chart.js` read `data-fdy-legend` only in the
+  cartesian renderer; the donut appended its legend unconditionally, so `<FdyChart type="donut"
+  legend="none">` still printed the built-in legend even when the caller supplied its own. Gated the
+  donut legend on the same attribute (`auto` still shows it — a donut is unreadable without labels).
+
+### Added
+- **`.fdy-filterbar--actions-inline` modifier (#32).** Opt-in: sits the trailing actions inline after
+  the last field instead of at the far edge, so a wrapped bar reads as attached to its filters. Also
+  **documented** the filterbar's wrap behaviour: a wrapped bar breaks flex lines on each item's
+  *flex-basis* (the grow field's `flex:1 1 16rem` reserves 16rem), not its rendered width — so the
+  grow basis decides the wrap point; to avoid stranded actions, tune the `--w-grow` basis or drop a
+  field. (The note's margin-swap proposal to un-strand the actions was **tested in-browser and does not
+  work** — margins don't change flex line-breaking — so only the modifier + docs were taken.)
+
+## [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.11.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.11.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.11.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.11.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;
@@ -366,7 +380,10 @@
       li.appendChild(document.createTextNode((labels[i] || ('#' + (i + 1))) + ' — ' + Math.round((v / total) * 100) + '%'));
       legend.appendChild(li);
     });
-    el.appendChild(ring); el.appendChild(legend);
+    el.appendChild(ring);
+    // Honour data-fdy-legend for the donut too — a caller may supply its own richer legend. 'auto'
+    // keeps today's behaviour (a donut is unreadable without labels, so it shows); 'none' suppresses it.
+    if ((el.getAttribute('data-fdy-legend') || 'auto') !== 'none') el.appendChild(legend);
     ensureImg(el);
   }
 

package/dist/freeday.bundle.css

@@ -526,7 +526,7 @@ a { color: var(--color-primary); }
 .fdy-avatar-group .fdy-avatar:first-child{margin-left:0;}
 
 /* Freeday — Badge */
-.fdy-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;padding:.35em .7em;border-radius:var(--radius-full);color:var(--color-primary-strong);background:var(--color-primary-soft);border:var(--bw) solid color-mix(in srgb,var(--color-primary) 22%,transparent);box-shadow:0 1px 1.5px rgba(16,14,30,.05);}
+.fdy-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;padding:.35em .7em;border-radius:var(--radius-full);color:var(--color-primary-strong);background:var(--color-primary-soft);border:var(--bw) solid color-mix(in srgb,var(--color-primary) 22%,transparent);box-shadow:0 1px 1.5px rgba(16,14,30,.05);}
 .fdy-badge--success{color:var(--color-success-strong);background:var(--color-success-soft);border-color:color-mix(in srgb,var(--color-success) 26%,transparent);}
 .fdy-badge--warning{color:var(--color-warning-strong);background:var(--color-warning-soft);border-color:color-mix(in srgb,var(--color-warning) 26%,transparent);}
 .fdy-badge--danger{color:var(--color-danger-strong);background:var(--color-danger-soft);border-color:color-mix(in srgb,var(--color-danger) 26%,transparent);}
@@ -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,22 @@ 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. */
+/* Trailing actions (buttons) pushed to the end, aligned with the controls' baseline.
+ * Wrap note: a wrapped bar breaks flex lines on each item's *flex-basis* (the grow field's
+ * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width — so the grow basis,
+ * not the visible width, decides the wrap point. Margins can't keep the actions off a lonely wrapped
+ * row; to avoid stranded actions, tune the --w-grow basis or drop a field so the bar fits one row. */
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
+/* Opt-in: sit the actions inline right after the last field instead of at the far edge — so when the
+ * bar wraps they read as attached to the filters rather than shoved to the right of a lonely row. */
+.fdy-filterbar--actions-inline .fdy-filterbar__actions{margin-left:0;}
 /* 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 +1033,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 +1239,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

@@ -181,7 +181,7 @@ a { color: var(--color-primary); }
 .fdy-avatar-group .fdy-avatar:first-child{margin-left:0;}
 
 /* Freeday — Badge */
-.fdy-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;padding:.35em .7em;border-radius:var(--radius-full);color:var(--color-primary-strong);background:var(--color-primary-soft);border:var(--bw) solid color-mix(in srgb,var(--color-primary) 22%,transparent);box-shadow:0 1px 1.5px rgba(16,14,30,.05);}
+.fdy-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;padding:.35em .7em;border-radius:var(--radius-full);color:var(--color-primary-strong);background:var(--color-primary-soft);border:var(--bw) solid color-mix(in srgb,var(--color-primary) 22%,transparent);box-shadow:0 1px 1.5px rgba(16,14,30,.05);}
 .fdy-badge--success{color:var(--color-success-strong);background:var(--color-success-soft);border-color:color-mix(in srgb,var(--color-success) 26%,transparent);}
 .fdy-badge--warning{color:var(--color-warning-strong);background:var(--color-warning-soft);border-color:color-mix(in srgb,var(--color-warning) 26%,transparent);}
 .fdy-badge--danger{color:var(--color-danger-strong);background:var(--color-danger-soft);border-color:color-mix(in srgb,var(--color-danger) 26%,transparent);}
@@ -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,22 @@ 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. */
+/* Trailing actions (buttons) pushed to the end, aligned with the controls' baseline.
+ * Wrap note: a wrapped bar breaks flex lines on each item's *flex-basis* (the grow field's
+ * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width — so the grow basis,
+ * not the visible width, decides the wrap point. Margins can't keep the actions off a lonely wrapped
+ * row; to avoid stranded actions, tune the --w-grow basis or drop a field so the bar fits one row. */
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
+/* Opt-in: sit the actions inline right after the last field instead of at the far edge — so when the
+ * bar wraps they read as attached to the filters rather than shoved to the right of a lonely row. */
+.fdy-filterbar--actions-inline .fdy-filterbar__actions{margin-left:0;}
 /* 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 +688,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 +894,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;
@@ -1139,7 +1153,10 @@
       li.appendChild(document.createTextNode((labels[i] || ('#' + (i + 1))) + ' — ' + Math.round((v / total) * 100) + '%'));
       legend.appendChild(li);
     });
-    el.appendChild(ring); el.appendChild(legend);
+    el.appendChild(ring);
+    // Honour data-fdy-legend for the donut too — a caller may supply its own richer legend. 'auto'
+    // keeps today's behaviour (a donut is unreadable without labels, so it shows); 'none' suppresses it.
+    if ((el.getAttribute('data-fdy-legend') || 'auto') !== 'none') el.appendChild(legend);
     ensureImg(el);
   }
 

package/package.json

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

package/src/components/badge.css

@@ -1,5 +1,5 @@
 /* Freeday — Badge */
-.fdy-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;padding:.35em .7em;border-radius:var(--radius-full);color:var(--color-primary-strong);background:var(--color-primary-soft);border:var(--bw) solid color-mix(in srgb,var(--color-primary) 22%,transparent);box-shadow:0 1px 1.5px rgba(16,14,30,.05);}
+.fdy-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;padding:.35em .7em;border-radius:var(--radius-full);color:var(--color-primary-strong);background:var(--color-primary-soft);border:var(--bw) solid color-mix(in srgb,var(--color-primary) 22%,transparent);box-shadow:0 1px 1.5px rgba(16,14,30,.05);}
 .fdy-badge--success{color:var(--color-success-strong);background:var(--color-success-soft);border-color:color-mix(in srgb,var(--color-success) 26%,transparent);}
 .fdy-badge--warning{color:var(--color-warning-strong);background:var(--color-warning-soft);border-color:color-mix(in srgb,var(--color-warning) 26%,transparent);}
 .fdy-badge--danger{color:var(--color-danger-strong);background:var(--color-danger-soft);border-color:color-mix(in srgb,var(--color-danger) 26%,transparent);}

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,21 @@
 .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. */
+/* Trailing actions (buttons) pushed to the end, aligned with the controls' baseline.
+ * Wrap note: a wrapped bar breaks flex lines on each item's *flex-basis* (the grow field's
+ * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width — so the grow basis,
+ * not the visible width, decides the wrap point. Margins can't keep the actions off a lonely wrapped
+ * row; to avoid stranded actions, tune the --w-grow basis or drop a field so the bar fits one row. */
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
+/* Opt-in: sit the actions inline right after the last field instead of at the far edge — so when the
+ * bar wraps they read as attached to the filters rather than shoved to the right of a lonely row. */
+.fdy-filterbar--actions-inline .fdy-filterbar__actions{margin-left:0;}
 /* 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;
@@ -366,7 +380,10 @@
       li.appendChild(document.createTextNode((labels[i] || ('#' + (i + 1))) + ' — ' + Math.round((v / total) * 100) + '%'));
       legend.appendChild(li);
     });
-    el.appendChild(ring); el.appendChild(legend);
+    el.appendChild(ring);
+    // Honour data-fdy-legend for the donut too — a caller may supply its own richer legend. 'auto'
+    // keeps today's behaviour (a donut is unreadable without labels, so it shows); 'none' suppresses it.
+    if ((el.getAttribute('data-fdy-legend') || 'auto') !== 'none') el.appendChild(legend);
     ensureImg(el);
   }