@cahyo-dimas/freeday 1.33.0 → 1.35.0

package/src/components/app-shell.css

@@ -21,8 +21,8 @@
 .fdy-app__brand-mark{flex:none;width:1.5rem;height:1.5rem;}
 .fdy-app__brand-mark svg{display:block;width:100%;height:100%;}
 .fdy-app__brand-text{display:flex;flex-direction:column;min-width:0;}
-.fdy-app__brand-title{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-.fdy-app__brand-subtitle{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-app__brand-title{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-text);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-app__brand-subtitle{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-3) var(--space-6);}
 /* Horizontal variant — the SAME nav links laid out as a row, for a top-nav application (one that
  * puts its primary navigation in `.fdy-appbar` / `.fdy-app__topbar` and has no sidebar). Deliberately

package/src/components/cfl.css

@@ -19,7 +19,7 @@
 .fdy-cfl__check input{pointer-events:none;}
 
 /* Empty result state. */
-.fdy-cfl__empty{padding:var(--space-8) var(--space-5);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);}
+.fdy-cfl__empty{padding:var(--space-8) var(--space-5);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);margin:0;}
 .fdy-cfl__empty[hidden]{display:none;}
 
 /* Footer — selection count (multi) sits left, actions right. */

package/src/components/composition.css

@@ -13,7 +13,7 @@
    prose. -subtle is gated at 3.0 on purpose (placeholders, separators, decorative glyphs) and
    measures 4.41 on the page ground — axe reports it as a serious color-contrast failure. Same
    argument, same ink, same 4.41 as .fdy-stat__label in 1.30.0. */
-.fdy-eyebrow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted);}
+.fdy-eyebrow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted);margin:0;}
 .fdy-title-page{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:var(--leading-tight);color:var(--color-text);margin:0;text-wrap:balance;}
 .fdy-title-section{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);color:var(--color-text);margin:0;text-wrap:balance;}
 .fdy-title-card{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--color-text);margin:0;}

package/src/components/datepicker.css

@@ -31,12 +31,9 @@
 .fdy-cal__head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);}
 /* The title is a CONTROL now (#004 §1): it drills to the month grid, so it needs the UA button box
    reset and the same hover/focus treatment as the arrows beside it. */
-.fdy-cal__title{flex:1;appearance:none;border:0;background:transparent;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);text-align:center;font-family:inherit;font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--color-text);text-transform:capitalize;cursor:pointer;}
+.fdy-cal__title{flex:1;appearance:none;border:0;background:transparent;margin:0;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);text-align:center;font-family:inherit;font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--color-text);text-transform:capitalize;cursor:pointer;}
 .fdy-cal__title:hover{background:var(--color-surface-2);}
 .fdy-cal__title:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
-/* Month grid — 3×4 over the same track width as the 7-column day grid, so the panel does not resize
-   when you drill and the pointer does not have to travel. */
-.fdy-cal__grid--months{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
 .fdy-cal__month{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-family:inherit;font-size:var(--text-sm);text-transform:capitalize;cursor:pointer;}
 .fdy-cal__month:hover{background:var(--color-surface-2);}
 .fdy-cal__month:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
@@ -47,6 +44,13 @@
 .fdy-cal__nav:hover{background:var(--color-surface-2);color:var(--color-text);}
 .fdy-cal__nav:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-cal__grid{display:grid;grid-template-columns:repeat(7,2rem);gap:2px;}
+/* Month grid — 3×4 over the same track width as the 7-column day grid, so the panel does not resize
+   when you drill and the pointer does not have to travel.
+
+   AFTER `.fdy-cal__grid`, and that is the whole rule: the element carries both classes, they weigh
+   the same, so source order decides. Declared earlier, the modifier lost to the base it modifies and
+   twelve months rendered seven across — the layout the comment above described, never once applied. */
+.fdy-cal__grid--months{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
 .fdy-cal__dow{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:capitalize;}
 .fdy-cal__day{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-size:var(--text-sm);font-variant-numeric:tabular-nums;cursor:pointer;}
 .fdy-cal__day:hover{background:var(--color-surface-2);}

package/src/components/file-upload.css

@@ -8,7 +8,7 @@
 .fdy-dropzone__icon{color:var(--color-text-subtle);}
 .fdy-dropzone.is-dragover .fdy-dropzone__icon{color:var(--color-primary);}
 .fdy-dropzone__icon svg{display:block;width:2rem;height:2rem;}
-.fdy-dropzone__title{font-weight:var(--weight-medium);color:var(--color-text);}
+.fdy-dropzone__title{font-size:inherit;font-weight:var(--weight-medium);color:var(--color-text);margin:0;}
 .fdy-dropzone__hint{font-size:var(--text-xs);}
 /* Wide (horizontal) layout — icon beside the copy instead of stacked, for full-width
  * sections. Wrap the title + hint in .fdy-dropzone__text. */

package/src/components/list.css

@@ -37,7 +37,7 @@
 .fdy-list__row--button:disabled:hover,.fdy-list__row--button[aria-disabled="true"]:hover,.fdy-list__row--interactive[aria-disabled="true"]:hover{background:none;}
 /* Row internals: a title/meta stack that truncates, and a trailing slot pinned right. */
 .fdy-list__main{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;flex:1;}
-.fdy-list__title{font-weight:var(--weight-medium);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-list__title{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-medium);letter-spacing:normal;color:var(--color-text);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-list__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
 .fdy-list__aside{flex:none;display:flex;align-items:center;gap:var(--space-2);}
 /* Density: rows tighten with the rest of the kit (--space-* mid-range steps under compact). */

package/src/components/states.css

@@ -2,7 +2,7 @@
 .fdy-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-10) var(--space-6);}
 .fdy-state__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--color-text-subtle);}
 .fdy-state__icon svg{width:100%;height:100%;}
-.fdy-state__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);}
+.fdy-state__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0;}
 .fdy-state__text{font-size:var(--text-sm);color:var(--color-text-muted);max-width:24rem;line-height:var(--leading-normal);}
 .fdy-state__actions{margin-top:var(--space-2);display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;}
 .fdy-state--danger .fdy-state__icon{color:var(--color-danger-strong);}

package/src/components/table.css

@@ -37,6 +37,30 @@
 .fdy-table__selcol{width:1px;white-space:nowrap;}
 .fdy-table tbody tr[aria-selected="true"],.fdy-table tbody tr[aria-selected="true"]:hover{background:var(--color-primary-soft);}
 
+/* Frozen header row and/or first column — a rate matrix, a timetable, any grid read
+   against two axes at once.
+
+   This modifier exists because `position:sticky` alone is NOT enough. With
+   `border-collapse:collapse` the shared border belongs to the TABLE, not to either
+   cell, so a frozen cell scrolls out from under its own rule and the frozen column
+   loses the line that separates it from the data. Separate borders put each border
+   back on the cell that sticks. */
+.fdy-table--sticky{border-collapse:separate;border-spacing:0;}
+.fdy-table--sticky th,.fdy-table--sticky td{border-bottom:var(--bw) solid var(--color-border-muted);}
+.fdy-table--sticky thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
+/* The row header freezes sideways over the data cells, so it needs an opaque
+   background of its own — and it takes the BODY surface, not the header one, so a
+   hovered row stays one continuous band across the freeze line. Losing that is
+   losing the only way to track a row across a wide grid. */
+.fdy-table--sticky tbody th{position:sticky;left:0;z-index:1;background:var(--color-surface);border-right:var(--bw) solid var(--color-border);}
+.fdy-table--sticky tbody tr:hover th{background:var(--color-surface-2);}
+/* The corner cell is frozen on both axes, so it has to outrank both. */
+.fdy-table--sticky thead th:first-child{left:0;z-index:3;border-right:var(--bw) solid var(--color-border);}
+
+/* The scrollport a sticky cell sticks to. Both axes scroll here, and the height is a
+   custom property so a page can size it without out-specifying this rule. */
+.fdy-table-scroll--frozen{position:relative;overflow:auto;max-height:var(--fdy-table-frozen-h,30rem);}
+
 /* Data-table shell (toolbar + scroll + footer stay put while the table scrolls) */
 .fdy-datatable{border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);background:var(--color-surface);overflow:hidden;}
 .fdy-table-scroll{position:relative;overflow-x:auto;}
@@ -46,6 +70,18 @@
 .fdy-table-toolbar__count{font-size:var(--text-sm);color:var(--color-text-muted);white-space:nowrap;}
 .fdy-table-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:var(--bw) solid var(--color-border);}
 .fdy-table-footer__info{font-size:var(--text-sm);color:var(--color-text-muted);}
+/* Rows per page. `margin-left:auto` eats the free space, so the size control and the pager travel
+   together on the right while the range stays left — no wrapper element, which is what keeps the
+   footer's DOM byte-identical for the tables that don't offer one (#008). The control is the kit's
+   own `.fdy-combo`, never a native <select>: an OS menu is unthemeable, and on macOS it drops a
+   dark panel into a light page — which is the reason FdyCombo exists at all. Sized to its content:
+   `.fdy-combo` is display:block at max-width 22rem, which in a footer is a bar-wide box for two
+   digits. Its HEIGHT is left alone on purpose — `--control-h`, the same as every other control on
+   the page. It briefly carried 2.25rem to match the pager links beside it, which made the one
+   combobox in a compact app 4px taller than all the others; a pager link is a nav button, and the
+   thing this must agree with is the form controls. */
+.fdy-table-footer__size{display:inline-flex;align-items:center;gap:var(--space-2);margin-left:auto;font-size:var(--text-sm);color:var(--color-text-muted);}
+.fdy-table-footer__size .fdy-combo{width:5.5rem;}
 
 /* Column filter — funnel button injected (enhancer) or rendered (FdyTable) into a filterable <th> */
 .fdy-table__filterwrap{display:inline-flex;align-items:center;vertical-align:middle;}

package/src/components/toast.css

@@ -7,7 +7,7 @@
 .fdy-toast--danger .fdy-toast__accent{background:var(--color-danger);}
 .fdy-toast--info .fdy-toast__accent{background:var(--color-info);}
 .fdy-toast__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-sm);}
-.fdy-toast__title{font-weight:var(--weight-semibold);}
+.fdy-toast__title{font-size:inherit;font-weight:var(--weight-semibold);margin:0;}
 .fdy-toast__text{opacity:.88;line-height:var(--leading-normal);}
 .fdy-toast__close{flex:none;border:0;background:transparent;color:var(--color-inverse-text);opacity:.7;cursor:pointer;font-size:var(--text-lg);line-height:1;padding:0 var(--space-1);border-radius:var(--radius-sm);}
 .fdy-toast__close:hover{opacity:1;}