@cahyo-dimas/freeday 1.11.0 → 1.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.id.md +1 -1
  3. package/README.md +1 -1
  4. package/dist/freeday.bundle.css +10 -5
  5. package/dist/freeday.css +10 -5
  6. package/package.json +1 -1
  7. package/src/components/filterbar.css +5 -0
  8. package/src/components/modal.css +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,30 @@
3
3
  Semua perubahan penting dicatat di sini. Format longgar mengikuti
4
4
  [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
5
5
 
6
+ ## [1.11.2] — 2026-07-28
7
+ ### Fixed
8
+ - **A filter bar docked in a table toolbar no longer loses its alignment (#35).** `.fdy-filterbar`
9
+ (`align-items:flex-end`, for labelled fields) and `.fdy-table-toolbar` (`align-items:center`, for
10
+ bare buttons) are both single-class rules of equal specificity, so composing them on one element
11
+ (`<div class="fdy-table-toolbar fdy-filterbar">`) let whichever came later in the bundle win — the
12
+ toolbar — centring every control and floating the trailing actions ~13px above the inputs beside
13
+ them. Added a `.fdy-table-toolbar.fdy-filterbar` rule (specificity 0,2,0) that settles it toward the
14
+ filterbar's `flex-end`. Additive — only affects elements carrying both classes; standalone toolbars
15
+ and filterbars are untouched. Verified in-browser: the composed bar's controls now share one
16
+ baseline (computed `align-items: flex-end`).
17
+
18
+ ## [1.11.1] — 2026-07-28
19
+ ### Fixed
20
+ - **Tall modals now scroll their body instead of clipping the footer (#34).** `.fdy-modal` had a
21
+ `max-height` + `overflow:hidden` but never established a flex context, so its three children laid out
22
+ as blocks: the body's height was its own content height (nothing for `overflow:auto` to scroll), and
23
+ the dialog's cap clipped whatever stuck out — including `.fdy-modal__footer` and its submit button, on
24
+ a short viewport (a form you could fill but not save). Gave the modal the column-flex treatment the
25
+ sibling `.fdy-drawer` already uses: `display:flex` on `.fdy-modal[open]`, `flex-direction:column` on
26
+ the base, `flex:none` on header/footer, and `flex:1;min-height:0` on the body. Modals that already fit
27
+ are unchanged. Verified in-browser (body scrolls, footer stays inside) including the `.fdy-modal--cfl`
28
+ picker — no regression.
29
+
6
30
  ## [1.11.0] — 2026-07-28
7
31
  Follow-ups from the doc-ai-automation migration (improvement notes #31–#33). Additive / corrective.
8
32
 
package/README.id.md CHANGED
@@ -5,7 +5,7 @@
5
5
  > **Lebih banyak _free day_ buat dev — UI kit-nya sudah siap pakai.**
6
6
 
7
7
  [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
8
- [![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)
8
+ [![Release](https://img.shields.io/badge/release-v1.11.2-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.11.2)
9
9
 
10
10
  UI KIT yang token-driven & framework-agnostic — satu sumber kebenaran untuk warna, tipografi,
11
11
  spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.
package/README.md CHANGED
@@ -5,7 +5,7 @@
5
5
  > **More free days for devs — the UI kit is ready to use.**
6
6
 
7
7
  [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
8
- [![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)
8
+ [![Release](https://img.shields.io/badge/release-v1.11.2-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.11.2)
9
9
 
10
10
  A token-driven, framework-agnostic UI kit — one source of truth for color, typography,
11
11
  spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.
package/dist/freeday.bundle.css CHANGED
@@ -971,6 +971,11 @@ a { color: var(--color-primary); }
971
971
  * --w-grow to absorb the slack; trailing actions align to the controls. Fields are
972
972
  * the standard .fdy-field (label above control); wraps gracefully on narrow screens. */
973
973
  .fdy-filterbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-4);}
974
+ /* Composed with a table toolbar (one element, both classes): the fields decide the alignment.
975
+ * `.fdy-table-toolbar` sets align-items:center (right for bare buttons) at equal specificity, and
976
+ * being later in the bundle it would otherwise win — floating labelled fields' neighbours out of line.
977
+ * This 2-class selector (0,2,0) settles it toward the filterbar's flex-end regardless of source order. */
978
+ .fdy-table-toolbar.fdy-filterbar{align-items:flex-end;}
974
979
  /* Fields are direct children. Drop the standalone field's 22rem cap; default to the
975
980
  * medium column width with no unbounded growth (that's what caused the raggedness). */
976
981
  .fdy-filterbar>.fdy-field{max-width:none;flex:0 0 auto;width:12rem;}
@@ -1083,22 +1088,22 @@ fieldset.fdy-field>legend{padding:0;float:none;}
1083
1088
  .fdy-btn-split__toggle svg{display:block;width:1rem;height:1rem;}
1084
1089
 
1085
1090
  /* Freeday — Modal (native <dialog>) */
1086
- .fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-lift-hover);overflow:hidden;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
1091
+ .fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-lift-hover);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
1087
1092
  .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
1088
1093
  .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
1089
1094
  .fdy-modal--lg{width:min(48rem,calc(100vw - var(--space-8)));}
1090
1095
  .fdy-modal--wide{width:min(60rem,calc(100vw - var(--space-8)));}
1091
1096
  .fdy-modal::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-base) var(--ease-standard),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
1092
- .fdy-modal__header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
1097
+ .fdy-modal__header{flex:none;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
1093
1098
  .fdy-modal__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;}
1094
1099
  .fdy-modal__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}
1095
1100
  .fdy-modal__close:hover{background:var(--color-surface-2);color:var(--color-text);}
1096
- .fdy-modal__body{padding:var(--space-5);overflow:auto;}
1097
- .fdy-modal__footer{display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:var(--color-surface-2);}
1101
+ .fdy-modal__body{flex:1;min-height:0;padding:var(--space-5);overflow:auto;}
1102
+ .fdy-modal__footer{flex:none;display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:var(--color-surface-2);}
1098
1103
  /* Symmetric enter AND exit (fade + rise + subtle scale) on the native <dialog>. @starting-style
1099
1104
  * animates the entry; overlay/display allow-discrete keep it painted through the exit so it
1100
1105
  * animates out on close too. Reduced motion honored by the global duration reset in base.css. */
1101
- .fdy-modal[open]{opacity:1;transform:none;}
1106
+ .fdy-modal[open]{display:flex;opacity:1;transform:none;}
1102
1107
  .fdy-modal[open]::backdrop{opacity:1;}
1103
1108
  @starting-style{
1104
1109
  .fdy-modal[open]{opacity:0;transform:translateY(8px) scale(.98);}
package/dist/freeday.css CHANGED
@@ -626,6 +626,11 @@ a { color: var(--color-primary); }
626
626
  * --w-grow to absorb the slack; trailing actions align to the controls. Fields are
627
627
  * the standard .fdy-field (label above control); wraps gracefully on narrow screens. */
628
628
  .fdy-filterbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-4);}
629
+ /* Composed with a table toolbar (one element, both classes): the fields decide the alignment.
630
+ * `.fdy-table-toolbar` sets align-items:center (right for bare buttons) at equal specificity, and
631
+ * being later in the bundle it would otherwise win — floating labelled fields' neighbours out of line.
632
+ * This 2-class selector (0,2,0) settles it toward the filterbar's flex-end regardless of source order. */
633
+ .fdy-table-toolbar.fdy-filterbar{align-items:flex-end;}
629
634
  /* Fields are direct children. Drop the standalone field's 22rem cap; default to the
630
635
  * medium column width with no unbounded growth (that's what caused the raggedness). */
631
636
  .fdy-filterbar>.fdy-field{max-width:none;flex:0 0 auto;width:12rem;}
@@ -738,22 +743,22 @@ fieldset.fdy-field>legend{padding:0;float:none;}
738
743
  .fdy-btn-split__toggle svg{display:block;width:1rem;height:1rem;}
739
744
 
740
745
  /* Freeday — Modal (native <dialog>) */
741
- .fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-lift-hover);overflow:hidden;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
746
+ .fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-lift-hover);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
742
747
  .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
743
748
  .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
744
749
  .fdy-modal--lg{width:min(48rem,calc(100vw - var(--space-8)));}
745
750
  .fdy-modal--wide{width:min(60rem,calc(100vw - var(--space-8)));}
746
751
  .fdy-modal::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-base) var(--ease-standard),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
747
- .fdy-modal__header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
752
+ .fdy-modal__header{flex:none;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
748
753
  .fdy-modal__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;}
749
754
  .fdy-modal__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}
750
755
  .fdy-modal__close:hover{background:var(--color-surface-2);color:var(--color-text);}
751
- .fdy-modal__body{padding:var(--space-5);overflow:auto;}
752
- .fdy-modal__footer{display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:var(--color-surface-2);}
756
+ .fdy-modal__body{flex:1;min-height:0;padding:var(--space-5);overflow:auto;}
757
+ .fdy-modal__footer{flex:none;display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:var(--color-surface-2);}
753
758
  /* Symmetric enter AND exit (fade + rise + subtle scale) on the native <dialog>. @starting-style
754
759
  * animates the entry; overlay/display allow-discrete keep it painted through the exit so it
755
760
  * animates out on close too. Reduced motion honored by the global duration reset in base.css. */
756
- .fdy-modal[open]{opacity:1;transform:none;}
761
+ .fdy-modal[open]{display:flex;opacity:1;transform:none;}
757
762
  .fdy-modal[open]::backdrop{opacity:1;}
758
763
  @starting-style{
759
764
  .fdy-modal[open]{opacity:0;transform:translateY(8px) scale(.98);}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cahyo-dimas/freeday",
3
- "version": "1.11.0",
3
+ "version": "1.11.2",
4
4
  "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
5
5
  "type": "module",
6
6
  "license": "MIT",
package/src/components/filterbar.css CHANGED
@@ -5,6 +5,11 @@
5
5
  * --w-grow to absorb the slack; trailing actions align to the controls. Fields are
6
6
  * the standard .fdy-field (label above control); wraps gracefully on narrow screens. */
7
7
  .fdy-filterbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-4);}
8
+ /* Composed with a table toolbar (one element, both classes): the fields decide the alignment.
9
+ * `.fdy-table-toolbar` sets align-items:center (right for bare buttons) at equal specificity, and
10
+ * being later in the bundle it would otherwise win — floating labelled fields' neighbours out of line.
11
+ * This 2-class selector (0,2,0) settles it toward the filterbar's flex-end regardless of source order. */
12
+ .fdy-table-toolbar.fdy-filterbar{align-items:flex-end;}
8
13
  /* Fields are direct children. Drop the standalone field's 22rem cap; default to the
9
14
  * medium column width with no unbounded growth (that's what caused the raggedness). */
10
15
  .fdy-filterbar>.fdy-field{max-width:none;flex:0 0 auto;width:12rem;}
package/src/components/modal.css CHANGED
@@ -1,20 +1,20 @@
1
1
  /* Freeday — Modal (native <dialog>) */
2
- .fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-lift-hover);overflow:hidden;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
2
+ .fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-lift-hover);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
3
3
  .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
4
4
  .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
5
5
  .fdy-modal--lg{width:min(48rem,calc(100vw - var(--space-8)));}
6
6
  .fdy-modal--wide{width:min(60rem,calc(100vw - var(--space-8)));}
7
7
  .fdy-modal::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-base) var(--ease-standard),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
8
- .fdy-modal__header{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
8
+ .fdy-modal__header{flex:none;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
9
9
  .fdy-modal__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;}
10
10
  .fdy-modal__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}
11
11
  .fdy-modal__close:hover{background:var(--color-surface-2);color:var(--color-text);}
12
- .fdy-modal__body{padding:var(--space-5);overflow:auto;}
13
- .fdy-modal__footer{display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:var(--color-surface-2);}
12
+ .fdy-modal__body{flex:1;min-height:0;padding:var(--space-5);overflow:auto;}
13
+ .fdy-modal__footer{flex:none;display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:var(--color-surface-2);}
14
14
  /* Symmetric enter AND exit (fade + rise + subtle scale) on the native <dialog>. @starting-style
15
15
  * animates the entry; overlay/display allow-discrete keep it painted through the exit so it
16
16
  * animates out on close too. Reduced motion honored by the global duration reset in base.css. */
17
- .fdy-modal[open]{opacity:1;transform:none;}
17
+ .fdy-modal[open]{display:flex;opacity:1;transform:none;}
18
18
  .fdy-modal[open]::backdrop{opacity:1;}
19
19
  @starting-style{
20
20
  .fdy-modal[open]{opacity:0;transform:translateY(8px) scale(.98);}