@cahyo-dimas/freeday 1.54.0 → 2.1.0

package/src/components/states.css

@@ -1,4 +1,4 @@
-/* Freeday — States (empty / loading / error placeholders) */
+/* Freeday. States (empty / loading / error placeholders) */
 .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%;}

package/src/components/stepper.css

@@ -1,4 +1,4 @@
-/* Freeday — Stepper / Wizard (progress header + optional panels).
+/* Freeday. Stepper / Wizard (progress header + optional panels).
  * Enhanced by freeday-stepper.js for prev/next navigation. */
 .fdy-stepper{display:flex;list-style:none;margin:0;padding:0;}
 .fdy-step{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;}
@@ -8,7 +8,7 @@
 .fdy-step__btn{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:0 var(--space-2);background:none;border:0;font:inherit;color:inherit;cursor:pointer;max-width:100%;}
 .fdy-step__btn:disabled{cursor:default;}
 /* The marker carries the lift itself, NOT `__btn`. The connector above is position:absolute with
-   z-index:0, and a positioned box paints after in-flow inline content in the same stacking context —
+   z-index:0, and a positioned box paints after in-flow inline content in the same stacking context,
    so a marker that is merely inline (an indicator-only stepper with no `__btn`) gets painted THROUGH
    by the connector line. Lifting the part that must always exist makes that assembly impossible;
    `__btn`'s own z-index stays, harmlessly, for the navigable case. */

package/src/components/table.css

@@ -1,5 +1,5 @@
-/* Freeday — Table */
-/* position:relative on every scroller/clipper — it makes the box the containing block for its own
+/* Freeday. Table */
+/* position:relative on every scroller/clipper, it makes the box the containing block for its own
    absolutely positioned content (.fdy-visually-hidden above all), which `overflow` alone does NOT
    clip. Without it a hidden label in a wide table scrolls the whole page. See base.css. */
 .fdy-table-wrap{position:relative;overflow-x:auto;border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);background:var(--color-surface);}
@@ -10,7 +10,7 @@
 .fdy-table tbody tr:last-child td{border-bottom:0;}
 .fdy-table tbody tr{transition:background-color var(--dur-fast) var(--ease-standard);}
 .fdy-table tbody tr:hover{background:var(--color-surface-2);}
-/* Monospace data — ids, codes, IPs, timestamps. Alignment-neutral so it works in any cell
+/* Monospace data, ids, codes, IPs, timestamps. Alignment-neutral so it works in any cell
    or inline (`<span class="fdy-mono">`), not just numeric columns. */
 .fdy-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
 /* Numeric cells are mono + right-aligned. Kept self-contained (not composed from .fdy-mono)
@@ -37,7 +37,7 @@
 .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
+/* 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
@@ -51,12 +51,12 @@
 /* Freezing the HEADER ROW is its own modifier because it needs a vertical
    scrollport (`.fdy-table-scroll--frozen`). A table that only freezes columns
    scrolls with the PAGE, and `top:0` against the page sticks the header under
-   the viewport edge — over the app's own top bar — which is worse than not
+   the viewport edge, over the app's own top bar, which is worse than not
    freezing it. Ask for the axis you actually have. */
 .fdy-table--sticky-head thead th{position:sticky;top:0;z-index:2;border-bottom:var(--bw) solid var(--color-border);}
 
 /* Freezing a COLUMN: put `.fdy-table__freeze` on every cell of it, header
-   included, and give each frozen column its own `--fdy-freeze-left` — 0 for the
+   included, and give each frozen column its own `--fdy-freeze-left`. 0 for the
    first, the summed widths of the frozen columns left of it after that. One
    frozen column needs no variable at all. Mark the last one `--edge` so the
    reader can see where the frozen block ends.
@@ -65,12 +65,12 @@
    widths, which CSS cannot sum, and hard-coding them here would only work for
    tables whose columns are all the same width. */
 .fdy-table--sticky .fdy-table__freeze{position:sticky;left:var(--fdy-freeze-left,0);}
-/* A frozen body cell slides OVER the data, so it must be OPAQUE — otherwise the
+/* A frozen body cell slides OVER the data, so it must be OPAQUE, otherwise the
    cells beneath show through it. A `th` already carries the header tint from the
    base rule, and that tint is usually the whole point: it is what marks a column
    as identity rather than data. So only a `td` is given a surface here. A table
-   that wants its frozen `th` to read as a body row instead — a rate matrix, where
-   a hovered row should band unbroken across the freeze line — says so itself. */
+   that wants its frozen `th` to read as a body row instead, a rate matrix, where
+   a hovered row should band unbroken across the freeze line, says so itself. */
 .fdy-table--sticky tbody .fdy-table__freeze{z-index:1;}
 .fdy-table--sticky tbody td.fdy-table__freeze{background:var(--color-surface);}
 .fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
@@ -93,19 +93,19 @@
 .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
+   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:
+   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
+   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> */
+/* 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;}
 .fdy-table__filterbtn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-left:var(--space-1);padding:0;vertical-align:middle;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-subtle);cursor:pointer;}
 .fdy-table__filterbtn:hover{background:var(--color-surface-3);color:var(--color-text);}
@@ -122,7 +122,7 @@
 .fdy-filter__range .fdy-input{width:6rem;}
 .fdy-filter__foot{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-3);}
 
-/* Bulk-action bar — appears above the table body once rows are selected */
+/* Bulk-action bar, appears above the table body once rows are selected */
 .fdy-table-bulkbar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--color-primary-soft);border-bottom:var(--bw) solid var(--color-border);color:var(--color-primary-strong);font-size:var(--text-sm);}
 .fdy-table-bulkbar[hidden]{display:none;}
 .fdy-table-bulkbar__count{font-weight:var(--weight-semibold);white-space:nowrap;}
@@ -130,7 +130,7 @@
 .fdy-table-bulkbar__actions{display:flex;gap:var(--space-2);}
 
 /* Controls inside a data row. `.fdy-input` and friends are width:100%, which in an auto-layout
-   table means they contribute NO intrinsic width — the column shrinks to whatever the header text
+   table means they contribute NO intrinsic width, the column shrinks to whatever the header text
    needs and the control collapses with it. A NOTE column ends up a box too narrow to read what you
    typed into it. The floor is per-control rather than on the column, because the table does not
    know which of its columns hold controls. */

package/src/components/tabs.css

@@ -1,5 +1,5 @@
-/* Freeday — Tabs (WAI-ARIA APG) */
-/* position:relative — containing block for out-of-flow content in the tabs (see base.css). */
+/* Freeday. Tabs (WAI-ARIA APG) */
+/* position:relative, containing block for out-of-flow content in the tabs (see base.css). */
 .fdy-tabs__list{position:relative;display:flex;gap:var(--space-1);border-bottom:var(--bw) solid var(--color-border);overflow-x:auto;}
 .fdy-tabs__tab{appearance:none;border:0;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-muted);padding:var(--space-3) var(--space-4);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-tabs__tab:hover{color:var(--color-text);}
@@ -7,7 +7,7 @@
 .fdy-tabs__tab:disabled:hover,.fdy-tabs__tab[aria-disabled="true"]:hover{color:var(--color-text-muted);}
 /* `aria-current="page"` is honoured alongside `aria-selected="true"` so the tab look can be used for
    ROUTE-driven sub-navigation (/settings/profile · /settings/billing), where the tabs are real links.
-   A link cannot be `aria-selected` — that is invalid ARIA on an anchor; `aria-current` is the only
+   A link cannot be `aria-selected`, that is invalid ARIA on an anchor; `aria-current` is the only
    correct marker, and it is what a router sets. Use `.fdy-tabs` + `freeday-tabs.js` (roving tabindex,
    a panel per tab) for in-page tabs; use these classes on plain links for routed ones, and
    `.fdy-nav--horizontal` for an application's PRIMARY navigation. */

package/src/components/timeline.css

@@ -1,4 +1,4 @@
-/* Freeday — Timeline (vertical event feed: dot markers on a connector line). Pure CSS. */
+/* Freeday. Timeline (vertical event feed: dot markers on a connector line). Pure CSS. */
 .fdy-timeline{list-style:none;margin:0;padding:0;}
 .fdy-timeline__item{position:relative;padding:0 0 var(--space-5) var(--space-6);border-left:2px solid var(--color-border);}
 .fdy-timeline__item:last-child{border-left-color:transparent;padding-bottom:0;}

package/src/components/timepicker.css

@@ -1,4 +1,4 @@
-/* Freeday — Time picker (input-styled trigger + scrollable time-list popover).
+/* Freeday. Time picker (input-styled trigger + scrollable time-list popover).
  * Built by freeday-timepicker.js from an empty [data-fdy-timepicker] wrapper.
  * Trigger visual mirrors the date picker for a consistent control family. */
 .fdy-timepicker{position:relative;display:inline-block;width:100%;max-width:11rem;}

package/src/components/toast.css

@@ -1,11 +1,11 @@
-/* Freeday — Toast (transient notification) */
+/* Freeday. Toast (transient notification) */
 /* The region is a POPOVER, not merely a high z-index.
-   `.fdy-modal` is a native <dialog> opened with showModal(), which puts it in the TOP LAYER — a
+   `.fdy-modal` is a native <dialog> opened with showModal(), which puts it in the TOP LAYER, a
    layer above the whole z-index universe, so no number here could ever beat it. A toast raised by
    an action taken inside a modal was painted behind that modal's backdrop: dimmed, unreadable, and
    most of it under the dialog itself. `freeday-toast.js` calls showPopover() as each toast is
    added, which puts the region in the top layer too, and last-in wins there.
-   Everything after `pointer-events` is undoing the UA's [popover] defaults — it arrives with
+   Everything after `pointer-events` is undoing the UA's [popover] defaults, it arrives with
    inset:0, auto margins, a border, padding, a Canvas background and overflow:auto, none of which a
    toast stack wants. Where showPopover() is unavailable the element is still an ordinary fixed
    block at z-index 200, which is exactly what it was before. */

package/src/components/tooltip.css

@@ -1,4 +1,4 @@
-/* Freeday — Tooltip (CSS-only, hover/focus) */
+/* Freeday. Tooltip (CSS-only, hover/focus) */
 .fdy-tooltip-wrap{position:relative;display:inline-flex;}
 .fdy-tooltip{position:absolute;bottom:calc(100% + var(--space-2));left:50%;z-index:150;max-width:16rem;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:var(--leading-snug);color:var(--color-inverse-text);background:var(--color-inverse-surface);box-shadow:var(--shadow-2);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(4px);transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);}
 .fdy-tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:.3rem solid transparent;border-top-color:var(--color-inverse-surface);}

package/src/components/tree.css

@@ -1,4 +1,4 @@
-/* Freeday — Tree view (hierarchy via nested native <details>: keyboard-toggle, zero-JS).
+/* Freeday. Tree view (hierarchy via nested native <details>: keyboard-toggle, zero-JS).
  * Branches expand/collapse; leaves are plain rows. Chevron + optional folder/file icons. */
 .fdy-tree{list-style:none;margin:0;padding:0;font-size:var(--text-sm);}
 .fdy-tree ul{list-style:none;margin:0;padding-left:var(--space-4);}
@@ -15,7 +15,7 @@
 /* Disabled row (branch summary or leaf): dimmed, no hover, not interactive. */
 .fdy-tree__leaf[aria-disabled="true"],.fdy-tree__branch[aria-disabled="true"] > summary{opacity:.5;cursor:not-allowed;pointer-events:none;}
 
-/* Checkbox variant — a selectable tree (cascading parent/child via freeday-tree.js).
+/* Checkbox variant, a selectable tree (cascading parent/child via freeday-tree.js).
  * A native <input class="fdy-checkbox"> sits at the start of every row; a partially
  * selected branch shows the native :indeterminate dash. The checkbox stops click
  * propagation, so toggling selection never expands/collapses the branch. */

package/tokens/breakpoints.d.ts

@@ -1,8 +1,8 @@
-// Types for tokens/breakpoints.mjs — the JS-side breakpoint scale in px
+// Types for tokens/breakpoints.mjs: the JS-side breakpoint scale in px
 // (mirrors the sm/md/lg/xl utilities in src/components/breakpoints.css).
 export declare const breakpoints: {
   /** Width at which .fdy-app's sidebar turns from off-canvas drawer into a static column.
-   *  Not part of the sm/md/lg/xl ramp — it mirrors app-shell.css and nothing else. */
+   *  Not part of the sm/md/lg/xl ramp; it mirrors app-shell.css and nothing else. */
   nav: number;
   sm: number;
   md: number;

package/tokens/breakpoints.mjs

@@ -1,11 +1,11 @@
-// Freeday breakpoint scale in px — mirrors src/components/breakpoints.css utilities
+// Freeday breakpoint scale in px, mirrors src/components/breakpoints.css utilities
 // (sm/md/lg/xl). CSS @media can't read custom properties, so this is the JS-side
 // source of the scale for matchMedia / app @media alignment.
 //
 // `nav` is not part of the sm/md/lg/xl ramp: it is the width at which .fdy-app switches the
 // sidebar from an off-canvas drawer (below) to a static column (at and above), hard-wired in
-// src/components/app-shell.css. Anything that has to agree with the shell — a matchMedia guard
+// src/components/app-shell.css. Anything that has to agree with the shell, a matchMedia guard
 // deciding whether the nav toggle sets --nav-open or --nav-collapsed, a utility-framework
-// variant — must use THIS number, not md. Aligning such code to md (960) leaves 721–959px
+// variant, must use THIS number, not md. Aligning such code to md (960) leaves 721–959px
 // broken: the sidebar is already static while the script still thinks it is an overlay.
 export const breakpoints = { nav: 721, sm: 600, md: 960, lg: 1280, xl: 1920 };

package/tokens/tokens.json

@@ -118,7 +118,7 @@
     "tick": { "$value": "{slate.400}", "$dark": "{slate.600}" }
   },
 
-  "_comment_tone": "General categorical palette — the same 8 validated hues as chart, aliased under a chart-neutral name for avatars, chips, tags, legend swatches (theme-follows via chart's own $dark).",
+  "_comment_tone": "General categorical palette: the same 8 validated hues as chart, aliased under a chart-neutral name for avatars, chips, tags, legend swatches (theme-follows via chart's own $dark).",
   "tone": {
     "1": { "$value": "{chart.1}" },
     "2": { "$value": "{chart.2}" },