@cahyo-dimas/freeday 1.11.0 → 1.11.1

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 (7) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.id.md +1 -1
  3. package/README.md +1 -1
  4. package/dist/freeday.bundle.css +5 -5
  5. package/dist/freeday.css +5 -5
  6. package/package.json +1 -1
  7. package/src/components/modal.css +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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.1] — 2026-07-28
7
+ ### Fixed
8
+ - **Tall modals now scroll their body instead of clipping the footer (#34).** `.fdy-modal` had a
9
+ `max-height` + `overflow:hidden` but never established a flex context, so its three children laid out
10
+ as blocks: the body's height was its own content height (nothing for `overflow:auto` to scroll), and
11
+ the dialog's cap clipped whatever stuck out — including `.fdy-modal__footer` and its submit button, on
12
+ a short viewport (a form you could fill but not save). Gave the modal the column-flex treatment the
13
+ sibling `.fdy-drawer` already uses: `display:flex` on `.fdy-modal[open]`, `flex-direction:column` on
14
+ the base, `flex:none` on header/footer, and `flex:1;min-height:0` on the body. Modals that already fit
15
+ are unchanged. Verified in-browser (body scrolls, footer stays inside) including the `.fdy-modal--cfl`
16
+ picker — no regression.
17
+
6
18
  ## [1.11.0] — 2026-07-28
7
19
  Follow-ups from the doc-ai-automation migration (improvement notes #31–#33). Additive / corrective.
8
20
 
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.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.11.1)
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.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.11.1)
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
@@ -1083,22 +1083,22 @@ fieldset.fdy-field>legend{padding:0;float:none;}
1083
1083
  .fdy-btn-split__toggle svg{display:block;width:1rem;height:1rem;}
1084
1084
 
1085
1085
  /* 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;}
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;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
1087
  .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
1088
1088
  .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
1089
1089
  .fdy-modal--lg{width:min(48rem,calc(100vw - var(--space-8)));}
1090
1090
  .fdy-modal--wide{width:min(60rem,calc(100vw - var(--space-8)));}
1091
1091
  .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);}
1092
+ .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
1093
  .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
1094
  .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
1095
  .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);}
1096
+ .fdy-modal__body{flex:1;min-height:0;padding:var(--space-5);overflow:auto;}
1097
+ .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
1098
  /* Symmetric enter AND exit (fade + rise + subtle scale) on the native <dialog>. @starting-style
1099
1099
  * animates the entry; overlay/display allow-discrete keep it painted through the exit so it
1100
1100
  * animates out on close too. Reduced motion honored by the global duration reset in base.css. */
1101
- .fdy-modal[open]{opacity:1;transform:none;}
1101
+ .fdy-modal[open]{display:flex;opacity:1;transform:none;}
1102
1102
  .fdy-modal[open]::backdrop{opacity:1;}
1103
1103
  @starting-style{
1104
1104
  .fdy-modal[open]{opacity:0;transform:translateY(8px) scale(.98);}
package/dist/freeday.css CHANGED
@@ -738,22 +738,22 @@ fieldset.fdy-field>legend{padding:0;float:none;}
738
738
  .fdy-btn-split__toggle svg{display:block;width:1rem;height:1rem;}
739
739
 
740
740
  /* 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;}
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;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
742
  .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
743
743
  .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
744
744
  .fdy-modal--lg{width:min(48rem,calc(100vw - var(--space-8)));}
745
745
  .fdy-modal--wide{width:min(60rem,calc(100vw - var(--space-8)));}
746
746
  .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);}
747
+ .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
748
  .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
749
  .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
750
  .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);}
751
+ .fdy-modal__body{flex:1;min-height:0;padding:var(--space-5);overflow:auto;}
752
+ .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
753
  /* Symmetric enter AND exit (fade + rise + subtle scale) on the native <dialog>. @starting-style
754
754
  * animates the entry; overlay/display allow-discrete keep it painted through the exit so it
755
755
  * animates out on close too. Reduced motion honored by the global duration reset in base.css. */
756
- .fdy-modal[open]{opacity:1;transform:none;}
756
+ .fdy-modal[open]{display:flex;opacity:1;transform:none;}
757
757
  .fdy-modal[open]::backdrop{opacity:1;}
758
758
  @starting-style{
759
759
  .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.1",
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/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);}