@cahyo-dimas/freeday 1.11.1 → 1.12.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.12.0] — 2026-07-29
+### Added
+- **Chart colour overrides can now name a categorical palette slot (#36).** `data-fdy-colors` (and the
+  `<FdyChart colors>` prop) previously resolved every name through the semantic tier
+  (`var(--color-<name>)`), so an override could only reach `primary`/`info`/`accent`/… — never the
+  validated categorical palette `--chart-1..8`. An app that needs stable *per-category* colours (rather
+  than per-array-index) had to override, and overriding then dropped each series onto the nearest
+  semantic hue — e.g. a three-way split landing on three neighbouring blues: contrast-passing but
+  unreadable as a comparison. `colorVar` now maps a name of the form `chart-1`..`chart-8` to
+  `var(--chart-N)`, so an override can pin a series to the validated palette
+  (`colors={['chart-1','chart-2','chart-3']}`). Backward compatible — no semantic token name starts
+  with `chart-`, so semantic overrides are unchanged; the single-series `data-fdy-color` / `color`
+  accepts the `chart-N` form too. Verified in-browser: explicit `chart-1..3` now render the exact
+  fixed-order palette (blue/orange/green) and equal the default, while `success,warning,danger` still
+  resolve to their semantic tokens. (`--chart-1..8` are public tokens in `dist/freeday.tokens.css`, so
+  matching swatches/bars elsewhere can reference `var(--chart-N)` directly — no adapter export needed.)
+
+## [1.11.2] — 2026-07-28
+### Fixed
+- **A filter bar docked in a table toolbar no longer loses its alignment (#35).** `.fdy-filterbar`
+  (`align-items:flex-end`, for labelled fields) and `.fdy-table-toolbar` (`align-items:center`, for
+  bare buttons) are both single-class rules of equal specificity, so composing them on one element
+  (`<div class="fdy-table-toolbar fdy-filterbar">`) let whichever came later in the bundle win — the
+  toolbar — centring every control and floating the trailing actions ~13px above the inputs beside
+  them. Added a `.fdy-table-toolbar.fdy-filterbar` rule (specificity 0,2,0) that settles it toward the
+  filterbar's `flex-end`. Additive — only affects elements carrying both classes; standalone toolbars
+  and filterbars are untouched. Verified in-browser: the composed bar's controls now share one
+  baseline (computed `align-items: flex-end`).
+
 ## [1.11.1] — 2026-07-28
 ### Fixed
 - **Tall modals now scroll their body instead of clipping the footer (#34).** `.fdy-modal` had a

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.11.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.11.1)
+[![Release](https://img.shields.io/badge/release-v1.12.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.12.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.11.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.11.1)
+[![Release](https://img.shields.io/badge/release-v1.12.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.12.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/FdyChart.tsx

@@ -14,6 +14,11 @@ export interface FdyChartProps {
   format?: 'number' | 'percent' | 'currency';
   stacked?: boolean;
   legend?: 'auto' | 'always' | 'none';
+  /**
+   * Per-series colour override. Each entry is a semantic token name (primary/accent/success/
+   * warning/danger/info) OR a categorical slot 'chart-1'..'chart-8' to pin a series to the
+   * validated palette. Omit to use the default fixed-order chart palette.
+   */
   colors?: ReadonlyArray<string>;
   color?: string;
   center?: string | number;

package/adapters/vue/components/FdyChart.vue

@@ -26,6 +26,11 @@ const props = defineProps<{
   format?: 'number' | 'percent' | 'currency';
   stacked?: boolean;
   legend?: 'auto' | 'always' | 'none';
+  /**
+   * Per-series colour override. Each entry is a semantic token name (primary/accent/success/
+   * warning/danger/info) OR a categorical slot 'chart-1'..'chart-8' to pin a series to the
+   * validated palette. Omit to use the default fixed-order chart palette.
+   */
   colors?: ReadonlyArray<string>;
   color?: string;
   center?: string | number;

package/dist/freeday-chart.js

@@ -6,7 +6,9 @@
  * Single-series colour (sparkline / simple bar / single line) via data-fdy-color references a
  * semantic token by name (primary, accent, success, warning, danger, info). Multi-series
  * defaults draw from the validated categorical --chart-1..8 palette in fixed order (never
- * cycled, 8-series cap); pass data-fdy-colors to override with semantic names instead.
+ * cycled, 8-series cap); pass data-fdy-colors to override — a name is a semantic token
+ * (var(--color-<name>)) OR a slot "chart-1".."chart-8" (var(--chart-N)) to pin a series to the
+ * validated palette. Both data-fdy-color and data-fdy-colors accept the chart-N form.
  * Cartesian charts (line/area, multi-series/stacked bar) draw themed axes from --chart-grid /
  * --chart-tick and format ticks + tooltips via data-fdy-format (number|percent|currency).
  * Charts are an enhancement — put a table/text fallback inside the element and it will be
@@ -28,7 +30,14 @@
   // Categorical chart palette: 8 validated fixed-order slots (--chart-1..8). Series index i
   // (0-based) -> slot i+1; series beyond the 8-slot cap reuse --chart-8 (never cycled).
   function chartSlotVar(i) { return 'var(--chart-' + (i < 8 ? i + 1 : 8) + ')'; }
-  function colorVar(name) { return 'var(--color-' + (name || 'primary') + ')'; }
+  // Resolve a colour name to a CSS var(). A semantic name (primary/accent/success/warning/
+  // danger/info) reaches --color-<name>; a slot name "chart-1".."chart-8" reaches the validated
+  // categorical token --chart-N instead, so a data-fdy-colors override can pin a series to the
+  // palette (stable per category) rather than being forced onto the nearest semantic hue.
+  function colorVar(name) {
+    name = name || 'primary';
+    return name.indexOf('chart-') === 0 ? 'var(--' + name + ')' : 'var(--color-' + name + ')';
+  }
 
   function nums(el, attr) {
     var v = el.getAttribute(attr);

package/dist/freeday.bundle.css

@@ -971,6 +971,11 @@ a { color: var(--color-primary); }
  * --w-grow to absorb the slack; trailing actions align to the controls. Fields are
  * the standard .fdy-field (label above control); wraps gracefully on narrow screens. */
 .fdy-filterbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-4);}
+/* Composed with a table toolbar (one element, both classes): the fields decide the alignment.
+ * `.fdy-table-toolbar` sets align-items:center (right for bare buttons) at equal specificity, and
+ * being later in the bundle it would otherwise win — floating labelled fields' neighbours out of line.
+ * This 2-class selector (0,2,0) settles it toward the filterbar's flex-end regardless of source order. */
+.fdy-table-toolbar.fdy-filterbar{align-items:flex-end;}
 /* Fields are direct children. Drop the standalone field's 22rem cap; default to the
  * medium column width with no unbounded growth (that's what caused the raggedness). */
 .fdy-filterbar>.fdy-field{max-width:none;flex:0 0 auto;width:12rem;}

package/dist/freeday.css

@@ -626,6 +626,11 @@ a { color: var(--color-primary); }
  * --w-grow to absorb the slack; trailing actions align to the controls. Fields are
  * the standard .fdy-field (label above control); wraps gracefully on narrow screens. */
 .fdy-filterbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-4);}
+/* Composed with a table toolbar (one element, both classes): the fields decide the alignment.
+ * `.fdy-table-toolbar` sets align-items:center (right for bare buttons) at equal specificity, and
+ * being later in the bundle it would otherwise win — floating labelled fields' neighbours out of line.
+ * This 2-class selector (0,2,0) settles it toward the filterbar's flex-end regardless of source order. */
+.fdy-table-toolbar.fdy-filterbar{align-items:flex-end;}
 /* Fields are direct children. Drop the standalone field's 22rem cap; default to the
  * medium column width with no unbounded growth (that's what caused the raggedness). */
 .fdy-filterbar>.fdy-field{max-width:none;flex:0 0 auto;width:12rem;}

package/dist/freeday.js

@@ -779,7 +779,9 @@
  * Single-series colour (sparkline / simple bar / single line) via data-fdy-color references a
  * semantic token by name (primary, accent, success, warning, danger, info). Multi-series
  * defaults draw from the validated categorical --chart-1..8 palette in fixed order (never
- * cycled, 8-series cap); pass data-fdy-colors to override with semantic names instead.
+ * cycled, 8-series cap); pass data-fdy-colors to override — a name is a semantic token
+ * (var(--color-<name>)) OR a slot "chart-1".."chart-8" (var(--chart-N)) to pin a series to the
+ * validated palette. Both data-fdy-color and data-fdy-colors accept the chart-N form.
  * Cartesian charts (line/area, multi-series/stacked bar) draw themed axes from --chart-grid /
  * --chart-tick and format ticks + tooltips via data-fdy-format (number|percent|currency).
  * Charts are an enhancement — put a table/text fallback inside the element and it will be
@@ -801,7 +803,14 @@
   // Categorical chart palette: 8 validated fixed-order slots (--chart-1..8). Series index i
   // (0-based) -> slot i+1; series beyond the 8-slot cap reuse --chart-8 (never cycled).
   function chartSlotVar(i) { return 'var(--chart-' + (i < 8 ? i + 1 : 8) + ')'; }
-  function colorVar(name) { return 'var(--color-' + (name || 'primary') + ')'; }
+  // Resolve a colour name to a CSS var(). A semantic name (primary/accent/success/warning/
+  // danger/info) reaches --color-<name>; a slot name "chart-1".."chart-8" reaches the validated
+  // categorical token --chart-N instead, so a data-fdy-colors override can pin a series to the
+  // palette (stable per category) rather than being forced onto the nearest semantic hue.
+  function colorVar(name) {
+    name = name || 'primary';
+    return name.indexOf('chart-') === 0 ? 'var(--' + name + ')' : 'var(--color-' + name + ')';
+  }
 
   function nums(el, attr) {
     var v = el.getAttribute(attr);

package/package.json

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

package/src/components/filterbar.css

@@ -5,6 +5,11 @@
  * --w-grow to absorb the slack; trailing actions align to the controls. Fields are
  * the standard .fdy-field (label above control); wraps gracefully on narrow screens. */
 .fdy-filterbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-4);}
+/* Composed with a table toolbar (one element, both classes): the fields decide the alignment.
+ * `.fdy-table-toolbar` sets align-items:center (right for bare buttons) at equal specificity, and
+ * being later in the bundle it would otherwise win — floating labelled fields' neighbours out of line.
+ * This 2-class selector (0,2,0) settles it toward the filterbar's flex-end regardless of source order. */
+.fdy-table-toolbar.fdy-filterbar{align-items:flex-end;}
 /* Fields are direct children. Drop the standalone field's 22rem cap; default to the
  * medium column width with no unbounded growth (that's what caused the raggedness). */
 .fdy-filterbar>.fdy-field{max-width:none;flex:0 0 auto;width:12rem;}

package/src/freeday-chart.js

@@ -6,7 +6,9 @@
  * Single-series colour (sparkline / simple bar / single line) via data-fdy-color references a
  * semantic token by name (primary, accent, success, warning, danger, info). Multi-series
  * defaults draw from the validated categorical --chart-1..8 palette in fixed order (never
- * cycled, 8-series cap); pass data-fdy-colors to override with semantic names instead.
+ * cycled, 8-series cap); pass data-fdy-colors to override — a name is a semantic token
+ * (var(--color-<name>)) OR a slot "chart-1".."chart-8" (var(--chart-N)) to pin a series to the
+ * validated palette. Both data-fdy-color and data-fdy-colors accept the chart-N form.
  * Cartesian charts (line/area, multi-series/stacked bar) draw themed axes from --chart-grid /
  * --chart-tick and format ticks + tooltips via data-fdy-format (number|percent|currency).
  * Charts are an enhancement — put a table/text fallback inside the element and it will be
@@ -28,7 +30,14 @@
   // Categorical chart palette: 8 validated fixed-order slots (--chart-1..8). Series index i
   // (0-based) -> slot i+1; series beyond the 8-slot cap reuse --chart-8 (never cycled).
   function chartSlotVar(i) { return 'var(--chart-' + (i < 8 ? i + 1 : 8) + ')'; }
-  function colorVar(name) { return 'var(--color-' + (name || 'primary') + ')'; }
+  // Resolve a colour name to a CSS var(). A semantic name (primary/accent/success/warning/
+  // danger/info) reaches --color-<name>; a slot name "chart-1".."chart-8" reaches the validated
+  // categorical token --chart-N instead, so a data-fdy-colors override can pin a series to the
+  // palette (stable per category) rather than being forced onto the nearest semantic hue.
+  function colorVar(name) {
+    name = name || 'primary';
+    return name.indexOf('chart-') === 0 ? 'var(--' + name + ')' : 'var(--color-' + name + ')';
+  }
 
   function nums(el, attr) {
     var v = el.getAttribute(attr);