@cahyo-dimas/freeday 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 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.

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.10.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.10.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.10.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.10.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/dist/freeday-chart.js

@@ -380,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);}
@@ -984,8 +984,15 @@ a { color: var(--color-primary); }
 .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-2xl,.fdy-filterbar>.fdy-field--w-grow{width:100%;flex:1 1 100%;}

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);}
@@ -639,8 +639,15 @@ a { color: var(--color-primary); }
 .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-2xl,.fdy-filterbar>.fdy-field--w-grow{width:100%;flex:1 1 100%;}

package/dist/freeday.js

@@ -1153,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.10.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/filterbar.css

@@ -18,8 +18,15 @@
 .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-2xl,.fdy-filterbar>.fdy-field--w-grow{width:100%;flex:1 1 100%;}

package/src/freeday-chart.js

@@ -380,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);
   }