@cahyo-dimas/freeday 1.53.0 → 2.0.0

package/src/components/combo.css

@@ -1,11 +1,11 @@
-/* Freeday — Combobox (custom styled select, WAI-ARIA APG select-only) */
+/* Freeday. Combobox (custom styled select, WAI-ARIA APG select-only) */
 .fdy-combo{position:relative;display:block;max-width:22rem;}
 .fdy-combo__button{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;height:var(--control-h);padding:0 var(--space-3);text-align:left;cursor:pointer;font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-combo__button:hover{border-color:var(--color-text-muted);}
 .fdy-combo__button:focus-visible{outline:none;border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-combo__button.is-open{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-combo__button:disabled,.fdy-combo__button[aria-disabled="true"]{opacity:.5;cursor:not-allowed;}
-/* Read-only: stays focusable & shows its value at full contrast but can't open — muted surface,
+/* Read-only: stays focusable & shows its value at full contrast but can't open, muted surface,
    softened border, default cursor, no focus-ring escalation (matches input[readonly], #39). */
 .fdy-combo__button[aria-readonly="true"]{background:var(--color-surface-2);border-color:var(--color-border);cursor:default;}
 .fdy-combo__button[aria-readonly="true"]:hover{border-color:var(--color-border);}
@@ -29,7 +29,7 @@
 .fdy-combo__option.is-highlighted[aria-selected="true"]{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-primary) 55%,transparent);}
 /* The tick is CSS, not content (#004 §2). Inside role="option" it joined the option's ACCESSIBLE
    NAME, so the selected option announced "✓August" while every other announced "August": the state
-   was read twice — once as aria-selected, once as decoration — and a test asking for an option by
+   was read twice, once as aria-selected, once as decoration, and a test asking for an option by
    its own label stopped matching the one that was selected. The `/ ""` is alt text: the glyph is
    painted, the accessibility tree gets nothing. Same reasoning as .fdy-label--required (1.29.0).
    The empty box still reserves its width, so labels stay aligned whether selected or not. */

package/src/components/composition.css

@@ -1,8 +1,8 @@
-/* Freeday — Page composition & type roles.
+/* Freeday. Page composition & type roles.
  *
  * The kit stops at the component; these primitives encode *how a page is assembled* so screens
  * built by different people cohere. They carry the usage doctrine (see USAGE.md) in markup: a
- * named type role gets used, a doc gets skimmed. Everything here is token-driven layout — no new
+ * named type role gets used, a doc gets skimmed. Everything here is token-driven layout, no new
  * colours, no new shadows. Pair with .fdy-app (the shell) and the components inside.
  */
 
@@ -11,7 +11,7 @@
  * page title (the mistake that collapses three levels into one grey mush). */
 /* --color-text-muted, not -subtle: an eyebrow is a small label naming the thing below it, i.e.
    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
+   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);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;}
@@ -45,19 +45,19 @@
 .fdy-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--space-5);}
 .fdy-stat{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;}
 /* --color-text-muted, not -subtle: this is a LABEL, i.e. text, and -subtle is deliberately gated at
-   3.0 (placeholders, dividers, decorative glyphs). On surface-2 -subtle measures 4.41 — under AA
+   3.0 (placeholders, dividers, decorative glyphs). On surface-2 -subtle measures 4.41, under AA
    for text, and a stat label is often the only thing naming the number above it. */
 .fdy-stat__label{font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted);}
 .fdy-stat__value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:1;color:var(--color-text);font-variant-numeric:tabular-nums;}
 .fdy-stat__value small{font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
 .fdy-stat__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);}
-/* A stat value is display type sized for a COUNT — "1,284" — and a back office puts money in it.
+/* A stat value is display type sized for a COUNT, "1,284", and a back office puts money in it.
    "IDR 300,000.00" needs 224px at --text-3xl and the grid's own track is 11rem, so it wrapped
    between the currency and the number: two lines of 31px where the design says one. Measured, not
    guessed (#020).
    The value shrinks only when its own column is too narrow to hold it, so a wide dashboard keeps
    exactly the type it has today. Scoped to a stat INSIDE .fdy-stats, where the width comes from the
-   grid track — `container-type:inline-size` on a standalone .fdy-stat would stop it sizing to its
+   grid track, `container-type:inline-size` on a standalone .fdy-stat would stop it sizing to its
    own content. The unconditional rule above stays as the fallback wherever @container is missing. */
 @supports (container-type:inline-size){
   .fdy-stats>.fdy-stat{container-type:inline-size;}
@@ -70,7 +70,7 @@
 /* Icon box (#001 §4). The kit ships no icons on purpose, but every icon slot it DOES ship
    (.fdy-btn__icon, .fdy-nav__icon, .fdy-state__icon) assumes something sensible inside, so a
    standalone icon had no contract and every app invented one. 1em keeps the glyph matched to the
-   text beside it at every scale — bring your own paths, use our box. Works on the <svg> itself or
+   text beside it at every scale, bring your own paths, use our box. Works on the <svg> itself or
    on a wrapper around it. */
 .fdy-icon{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-0.125em;}
 .fdy-icon>svg{display:block;width:100%;height:100%;}

package/src/components/datepicker.css

@@ -1,10 +1,10 @@
-/* Freeday — Date picker (input-styled trigger + calendar popover).
+/* Freeday. Date picker (input-styled trigger + calendar popover).
  * Built by freeday-datepicker.js from an empty [data-fdy-datepicker] wrapper. */
 .fdy-datepicker{position:relative;display:inline-block;width:100%;max-width:14rem;}
 /* Inside a labelled field, a picker fills the field like every other control.
    The 14rem/11rem caps above suit a picker standing on its own; in a form grid
-   they leave the date box visibly short of the combo beside it — 224px against
-   319px in a two-column layout — and the row reads as ragged. The field's own
+   they leave the date box visibly short of the combo beside it. 224px against
+   319px in a two-column layout, and the row reads as ragged. The field's own
    max-width is what should govern there. */
 .fdy-field>.fdy-datepicker,.fdy-field>.fdy-timepicker,.fdy-field>.fdy-daterange{max-width:none;}
 .fdy-datepicker__trigger{display:inline-flex;align-items:center;gap:var(--space-2);width:100%;height:var(--control-h);padding:0 var(--space-3);text-align:left;cursor:pointer;font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
@@ -50,12 +50,12 @@
 .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
+/* 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. */
+   twelve months rendered seven across, the layout the comment above described, never once applied. */
 .fdy-cal__grid--months,.fdy-cal__grid--years{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;}
@@ -73,7 +73,7 @@
 /* Responsive: each picker may shrink (min-width:0) & wrap so the range never overflows a
    narrow row/phone; inline-flex still hugs to ~23rem at wider widths (look unchanged). */
 .fdy-daterange{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);}
-/* Each picker shrinks from an 11rem basis but not below ~7rem — enough for "dd/mm/yyyy" + the icon,
+/* Each picker shrinks from an 11rem basis but not below ~7rem, enough for "dd/mm/yyyy" + the icon,
    so a squeezed range compresses gracefully (and wraps) instead of clipping the date. */
 .fdy-daterange .fdy-datepicker{flex:0 1 11rem;min-width:7rem;}
 .fdy-daterange__sep{flex:none;color:var(--color-text-subtle);}

package/src/components/datetimepicker.css

@@ -1,4 +1,4 @@
-/* Freeday — Datetime picker (composed: date picker + time picker → one value).
+/* Freeday. Datetime picker (composed: date picker + time picker → one value).
  * A thin composer (freeday-datetime.js) links a child [data-fdy-datepicker] and
  * [data-fdy-timepicker] and emits a single combined event. Icon variants come from
  * the child pickers (data-fdy-no-icon / <template data-fdy-icon>). */

package/src/components/description-list.css

@@ -1,4 +1,4 @@
-/* Freeday — Description list (key-value detail view) */
+/* Freeday. Description list (key-value detail view) */
 .fdy-dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-5);margin:0;}
 .fdy-dl dt{color:var(--color-text-muted);font-size:var(--text-sm);}
 .fdy-dl dd{margin:0;color:var(--color-text);font-size:var(--text-sm);font-weight:var(--weight-medium);}

package/src/components/divider.css

@@ -1,3 +1,3 @@
-/* Freeday — Divider */
+/* Freeday. Divider */
 .fdy-divider{border:0;border-top:var(--bw) solid var(--color-border);margin:var(--space-4) 0;}
 .fdy-divider--vertical{border-top:0;border-left:var(--bw) solid var(--color-border);margin:0 var(--space-4);align-self:stretch;}

package/src/components/drawer.css

@@ -1,4 +1,4 @@
-/* Freeday — Drawer (temporary side panel on native <dialog>: focus-trap / Esc /
+/* Freeday. Drawer (temporary side panel on native <dialog>: focus-trap / Esc /
  * backdrop / return-focus are free). Anchors left (default) or right.
  * Enhanced by freeday-drawer.js (open trigger + backdrop-click close). */
 /* display is gated behind [open] so the native <dialog> stays hidden until opened.

package/src/components/file-upload.css

@@ -1,4 +1,4 @@
-/* Freeday — File upload (drop target + explicit per-file states).
+/* Freeday. File upload (drop target + explicit per-file states).
  * Enhanced by freeday-upload.js; states: idle · drag-over · uploading · done · error. */
 .fdy-dropzone{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-6);text-align:center;border:2px dashed var(--color-control-border);border-radius:var(--radius-lg);background:var(--color-surface-2);color:var(--color-text-muted);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);}
 .fdy-dropzone:hover{border-color:var(--color-text-muted);}
@@ -10,17 +10,17 @@
 .fdy-dropzone__icon svg{display:block;width:2rem;height:2rem;}
 .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
+/* Wide (horizontal) layout, icon beside the copy instead of stacked, for full-width
  * sections. Wrap the title + hint in .fdy-dropzone__text. */
 .fdy-dropzone--row{flex-direction:row;align-items:center;justify-content:center;text-align:left;gap:var(--space-4);}
 .fdy-dropzone__text{display:flex;flex-direction:column;gap:var(--space-1);}
 
 /* File rows (list of added/uploaded/rejected files) */
-/* Symmetric on purpose. The list carried margin-top and nothing below, so whatever follows it —
-   an "Add files" button, in every upload UI there is — sat flush against the last row: measured
+/* Symmetric on purpose. The list carried margin-top and nothing below, so whatever follows it,
+   an "Add files" button, in every upload UI there is, sat flush against the last row: measured
    0px. A block that claims space on one side only is not spacing, it is a lean. */
 .fdy-filelist{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);margin-bottom:var(--space-3);}
-/* Nothing after it, nothing to separate from — so the room is not spent. */
+/* Nothing after it, nothing to separate from, so the room is not spent. */
 .fdy-filelist:last-child{margin-bottom:0;}
 /* Side-by-side rows on wide screens (reflow to one column when narrow). */
 .fdy-filelist--grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));}

package/src/components/filterbar.css

@@ -1,4 +1,4 @@
-/* Freeday — Filter bar (a consistent row of filters: search + selects + actions).
+/* Freeday. Filter bar (a consistent row of filters: search + selects + actions).
  * Solves the "ragged filter row": apps improvised flex rows with ad-hoc
  * flex/min-width, so grow fields ballooned while selects stayed tiny and no two
  * screens matched. Here every field snaps to a shared width rhythm; one field may
@@ -7,7 +7,7 @@
 .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.
+ * 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
@@ -15,7 +15,7 @@
 .fdy-filterbar>.fdy-field{max-width:none;flex:0 0 auto;width:12rem;}
 /* Controls fill their field's column (drop the standalone input-group/combo caps). */
 .fdy-filterbar>.fdy-field .fdy-input-group,.fdy-filterbar>.fdy-field .fdy-combo{max-width:none;width:100%;}
-/* Column-width rhythm — pick one per field so bars across the app line up. */
+/* Column-width rhythm, pick one per field so bars across the app line up. */
 .fdy-filterbar>.fdy-field--w-sm{width:9rem;}
 .fdy-filterbar>.fdy-field--w-lg{width:15rem;}
 .fdy-filterbar>.fdy-field--w-xl{width:18rem;}
@@ -25,11 +25,11 @@
 .fdy-filterbar>.fdy-field--w-grow{flex:1 1 16rem;width:auto;min-width:12rem;}
 /* Trailing actions (buttons) pushed to the end, aligned with the controls' baseline.
  * Wrap note: a wrapped bar breaks flex lines on each item's *flex-basis* (the grow field's
- * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width — so the grow basis,
+ * `flex:1 1 16rem` reserves 16rem for line-breaking), NOT its rendered width, so the grow basis,
  * not the visible width, decides the wrap point. Margins can't keep the actions off a lonely wrapped
  * row; to avoid stranded actions, tune the --w-grow basis or drop a field so the bar fits one row. */
-/* A control that carries NO label of its own — a checkbox, a switch, a lone
-   button — in a bar whose `align-items:flex-end` exists to line up LABELLED
+/* A control that carries NO label of its own, a checkbox, a switch, a lone
+   button, in a bar whose `align-items:flex-end` exists to line up LABELLED
    fields. Flex-end puts such a control's bottom on the inputs' bottom, so a
    20px checkbox sits well below the 32px input's centre line and reads as
    dropped. Giving it the height of a control lands its box exactly where an
@@ -37,7 +37,7 @@
    line. Raised from IDU_EMATE_APPL_WEB (#014). */
 .fdy-filterbar>.fdy-check,.fdy-filterbar>.fdy-radio,.fdy-filterbar>.fdy-switch,.fdy-filterbar>.fdy-btn{min-height:var(--control-h);}
 .fdy-filterbar__actions{display:flex;align-items:center;gap:var(--space-2);margin-left:auto;}
-/* Opt-in: sit the actions inline right after the last field instead of at the far edge — so when the
+/* Opt-in: sit the actions inline right after the last field instead of at the far edge, so when the
  * bar wraps they read as attached to the filters rather than shoved to the right of a lonely row. */
 .fdy-filterbar--actions-inline .fdy-filterbar__actions{margin-left:0;}
 /* Stack on narrow screens so nothing overflows the row. */

package/src/components/form-grid.css

@@ -1,8 +1,8 @@
-/* Freeday — Form grid (document/header fields laid out in aligned columns).
+/* Freeday. Form grid (document/header fields laid out in aligned columns).
  * The two-dimensional counterpart to the single-column .fdy-field stack and the
  * one-row .fdy-filterbar: related fields sit in columns that reflow to one on narrow
  * screens. Fields are the standard .fdy-field; a field with --full spans the whole row
- * (e.g. an address or note). Zero JS — pure layout over .fdy-field. */
+ * (e.g. an address or note). Zero JS, pure layout over .fdy-field. */
 .fdy-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--space-4) var(--space-5);}
 .fdy-form-grid>.fdy-field{max-width:none;}
 .fdy-form-grid>.fdy-field--full{grid-column:1/-1;}

package/src/components/input-group.css

@@ -1,4 +1,4 @@
-/* Freeday — Input group (prefix/suffix addons, e.g. Rp / % / icon) */
+/* Freeday. Input group (prefix/suffix addons, e.g. Rp / % / icon) */
 .fdy-input-group{display:flex;align-items:stretch;height:var(--control-h);max-width:22rem;background:var(--color-surface);border:1.5px solid var(--color-control-border);border-radius:var(--radius-md);box-shadow:inset 0 1px 2px rgba(16,14,30,.06);overflow:hidden;transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 .fdy-input-group:hover{border-color:var(--color-text-muted);}
 .fdy-input-group:focus-within{border-color:var(--color-primary);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
@@ -11,23 +11,23 @@
 .fdy-input-group .fdy-input:focus{box-shadow:none;}
 .fdy-input-group__addon{display:inline-flex;align-items:center;padding:0 var(--space-3);background:var(--color-surface-2);color:var(--color-text-muted);font-size:var(--text-sm);white-space:nowrap;border-right:var(--bw) solid var(--color-border);}
 .fdy-input-group__addon:last-child{border-right:0;border-left:var(--bw) solid var(--color-border);}
-/* Borderless leading icon (e.g. search magnifier) — self-contained like __btn so it
+/* Borderless leading icon (e.g. search magnifier), self-contained like __btn so it
    centers standalone (no base .fdy-input-group__addon required). */
 .fdy-input-group__addon--icon{display:inline-flex;align-items:center;background:transparent;border:0;padding:0 0 0 var(--space-3);color:var(--color-text-subtle);}
 .fdy-input-group__addon--icon svg{display:block;width:1rem;height:1rem;}
-/* The leading icon already provides the left inset — don't let the input add its full left padding on top. */
+/* The leading icon already provides the left inset, don't let the input add its full left padding on top. */
 .fdy-input-group__addon--icon + .fdy-input{padding-left:var(--space-2);}
-/* Trailing action button (e.g. choose-from-list magnifier) — a real, focusable control. */
+/* Trailing action button (e.g. choose-from-list magnifier), a real, focusable control. */
 .fdy-input-group__btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--control-h);align-self:stretch;border:0;border-left:var(--bw) solid var(--color-border);background:var(--color-surface-2);color:var(--color-text-muted);cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard);}
 .fdy-input-group__btn:hover{background:var(--color-surface-3);color:var(--color-text);}
 .fdy-input-group__btn:focus-visible{outline:none;color:var(--color-text);box-shadow:inset 0 0 0 2px var(--color-primary);}
 .fdy-input-group__btn svg{display:block;width:1.1rem;height:1.1rem;}
 /* Leading action button (the "−" of a number stepper): the divider belongs on the other side. */
 .fdy-input-group__btn:first-child{border-left:0;border-right:var(--bw) solid var(--color-border);}
-/* At a bound, or on a disabled/read-only field, the button must look as inert as it acts — same dim
+/* At a bound, or on a disabled/read-only field, the button must look as inert as it acts, same dim
    + not-allowed as .fdy-input:disabled. :hover still matches a disabled button, so it is withdrawn. */
 .fdy-input-group__btn:disabled{opacity:.5;cursor:not-allowed;}
 .fdy-input-group__btn:disabled:hover{background:var(--color-surface-2);color:var(--color-text-muted);}
-/* Error state must win over the neutralizing rules above — promote to the wrapper. */
+/* Error state must win over the neutralizing rules above, promote to the wrapper. */
 .fdy-input-group:has(.fdy-input--error),.fdy-input-group:has(.fdy-combo--error),.fdy-input-group:has([aria-invalid="true"]){border-color:var(--color-danger);}
 .fdy-input-group:has(.fdy-input--error):focus-within,.fdy-input-group:has(.fdy-combo--error):focus-within,.fdy-input-group:has([aria-invalid="true"]):focus-within{border-color:var(--color-danger);box-shadow:inset 0 1px 2px rgba(16,14,30,.04),0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}

package/src/components/input.css

@@ -1,10 +1,10 @@
-/* Freeday — Field & Input */
+/* Freeday. Field & Input */
 .fdy-field{display:flex;flex-direction:column;gap:var(--space-2);max-width:22rem;}
-/* A grouped field is legitimately a <fieldset> (it needs a <legend>) — e.g. a radio/checkbox group.
+/* A grouped field is legitimately a <fieldset> (it needs a <legend>), e.g. a radio/checkbox group.
    Neutralise the UA groove border / padding / min-inline-size so it lays out identically to the
    <div> form (min-inline-size:min-content would otherwise block the filterbar column widths). */
 fieldset.fdy-field{border:0;margin:0;padding:0;min-inline-size:0;}
-/* The rendered legend is laid out outside the fieldset's flex flow, so `gap` never reaches it —
+/* The rendered legend is laid out outside the fieldset's flex flow, so `gap` never reaches it,
    measured 0px between legend and first control. This is the spacing contract a grouped field
    needs; it matches .fdy-field's own gap so the group reads as one rhythm. */
 fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
@@ -22,17 +22,17 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-input[readonly]:hover,.fdy-textarea[readonly]:hover{border-color:var(--color-border);}
 .fdy-input[readonly]:focus-visible,.fdy-textarea[readonly]:focus-visible{border-color:var(--color-border-strong);box-shadow:none;}
 /* Numbers (#44): the user agent draws its own spin buttons inside the field, in OS widget colours no
-   theme reaches — on a dark surface they read as a light-grey artefact glued to a themed field, and
+   theme reaches, on a dark surface they read as a light-grey artefact glued to a themed field, and
    it is the only unthemed control on the page. Removed so .fdy-input looks the same whatever its
    type. `appearance:textfield` is the Firefox half, the pseudo-element the Blink/WebKit half; both
-   are needed. This trades away the mouse-only increment — arrow keys on a focused number input still
+   are needed. This trades away the mouse-only increment, arrow keys on a focused number input still
    work, and [data-fdy-number] gives the affordance back on the kit's terms. */
 .fdy-input[type="number"]{appearance:textfield;-webkit-appearance:textfield;}
 .fdy-input[type="number"]::-webkit-outer-spin-button,.fdy-input[type="number"]::-webkit-inner-spin-button{appearance:none;-webkit-appearance:none;margin:0;}
 .fdy-input--error,.fdy-input[aria-invalid="true"],.fdy-textarea[aria-invalid="true"]{border-color:var(--color-danger);}
 .fdy-input--error:focus,.fdy-input[aria-invalid="true"]:focus,.fdy-textarea[aria-invalid="true"]:focus{border-color:var(--color-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-danger) 26%,transparent);}
 /* Required marker. The control already carries `required`, so the asterisk is decoration: the
-   `/ ""` is CSS alt text — the glyph is painted but exposes NOTHING to the accessibility tree, so a
+   `/ ""` is CSS alt text, the glyph is painted but exposes NOTHING to the accessibility tree, so a
    screen reader does not read "star" after every label. That is stricter than a <span> an app has to
    remember to mark aria-hidden, and it cannot be forgotten. */
 .fdy-label--required::after{content:"*" / "";margin-left:var(--space-1);color:var(--color-danger);}

package/src/components/kbd.css

@@ -1,2 +1,2 @@
-/* Freeday — Keyboard key */
+/* Freeday. Keyboard key */
 .fdy-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text);background:var(--color-surface-2);border:var(--bw) solid var(--color-border-strong);border-bottom-width:2px;border-radius:var(--radius-sm);}

package/src/components/list.css

@@ -1,17 +1,17 @@
-/* Freeday — List: the FLAT row container.
+/* Freeday. List: the FLAT row container.
  *
  * USAGE.md §3 puts list rows among the surfaces that should be flat, but until now the only
- * container the kit shipped was .fdy-card — which carries --shadow-lift (a real 34px lift). A
+ * container the kit shipped was .fdy-card, which carries --shadow-lift (a real 34px lift). A
  * responsive table that becomes a list below `md` therefore had to choose between a stack of
  * shadowed cards (against the doctrine) or a hand-built box, which needs a colour and so escapes
  * the token system. This is that missing container: one flat surface, hairline dividers, no shadow.
  *
  * Not to be confused with .fdy-list-reset (base.css), which only strips UA bullets/indent.
  * Works on <ul>/<ol> (list-style is reset here) or on plain <div>s. */
-/* position:relative — containing block for out-of-flow row content (see base.css). */
+/* position:relative, containing block for out-of-flow row content (see base.css). */
 .fdy-list{position:relative;list-style:none;margin:0;padding:0;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;}
 /* A row that hosts a stretched target has to be the anchor itself (#008 §1). Without this the
-   overlay resolves against .fdy-list — which IS positioned — so EVERY row's target covers the whole
+   overlay resolves against .fdy-list, which IS positioned, so EVERY row's target covers the whole
    list and the last one in the DOM wins: measured, a click on row one opens row two, under row one's
    name, which looks exactly like working software. Opt-in via :has(), so a row that doesn't use the
    pattern is untouched and nothing an app absolutely positions inside a plain row starts resolving
@@ -20,7 +20,7 @@
 .fdy-list__row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);min-width:0;}
 /* Divider between rows. Two shapes are supported and both are load-bearing: rows as direct children
  * of the list, and rows wrapped in <li> (the semantic shape, where the ADJACENT siblings are the
- * <li>s — a bare `.fdy-list__row + .fdy-list__row` silently matches nothing there). */
+ * <li>s, a bare `.fdy-list__row + .fdy-list__row` silently matches nothing there). */
 .fdy-list__row + .fdy-list__row,
 .fdy-list > * + * > .fdy-list__row{border-top:var(--bw) solid var(--color-border-muted);}
 /* A row that is itself the control: render it as <button>/<a> and the UA box is reset without
@@ -29,7 +29,7 @@
 .fdy-list__row--button:hover,.fdy-list__row--interactive:hover{background:var(--color-surface-2);}
 .fdy-list__row--button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary);}
 .fdy-list__row--interactive{cursor:pointer;}
-/* Disabled row. The reset above adopts the UA button box, but not its disabled state — so a row
+/* Disabled row. The reset above adopts the UA button box, but not its disabled state, so a row
    disabled mid-flight (a redirect in progress, say) kept lighting up and kept a pointer cursor:
    a control answering the pointer while refusing input. Same contract as every other disabled
    control in the kit (dim + not-allowed), hover withdrawn, both the native and the aria- form. */

package/src/components/menu.css

@@ -1,4 +1,4 @@
-/* Freeday — Menu (action popup) + Split button. Enhanced by freeday-menu.js. */
+/* Freeday. Menu (action popup) + Split button. Enhanced by freeday-menu.js. */
 .fdy-menu-wrap{position:relative;display:inline-flex;}
 .fdy-menu{position:absolute;top:calc(100% + var(--space-1));left:0;z-index:130;min-width:11rem;margin:0;padding:var(--space-1);list-style:none;background:var(--color-surface);color:var(--color-text);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);}
 .fdy-menu[hidden]{display:none;}
@@ -6,7 +6,7 @@
 .fdy-menu__item{display:flex;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);border:0;background:transparent;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:var(--text-sm);color:var(--color-text);text-align:left;cursor:pointer;white-space:nowrap;}
 .fdy-menu__item:hover,.fdy-menu__item.is-highlighted{background:var(--color-surface-3);}
 /* Focus is not hover. The enhancer moves real DOM focus (freeday-menu.js `.focus()`), so this is
-   the only thing a keyboard user has to go on — with the hover fill alone, arrowing through the
+   the only thing a keyboard user has to go on, with the hover fill alone, arrowing through the
    menu is invisible. Same ring as .fdy-nav__item, which got this right. Reported twice. */
 .fdy-menu__item:focus-visible{outline:none;background:var(--color-surface-3);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
 .fdy-menu__item:disabled{opacity:.5;cursor:not-allowed;background:transparent;}
@@ -15,7 +15,7 @@
 .fdy-menu__sep{height:0;margin:var(--space-1) 0;border:0;border-top:var(--bw) solid var(--color-border-muted);}
 @media (prefers-reduced-motion:no-preference){.fdy-menu:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 
-/* Split button — main action + attached menu toggle (caret) */
+/* Split button, main action + attached menu toggle (caret) */
 .fdy-btn-split{position:relative;display:inline-flex;border-radius:var(--radius-md);transition:transform var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);}
 /* One control: the two halves must stay coplanar. Neutralize each segment's own
    lift + drop-shadow (they would misalign the seam / glow a single half); the

package/src/components/modal.css

@@ -1,4 +1,4 @@
-/* Freeday — Modal (native <dialog>) */
+/* Freeday. Modal (native <dialog>) */
 .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;}
 .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
 .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}

package/src/components/pagination.css

@@ -1,4 +1,4 @@
-/* Freeday — Pagination */
+/* Freeday. Pagination */
 .fdy-pagination__list{display:flex;align-items:center;gap:var(--space-1);list-style:none;margin:0;padding:0;}
 .fdy-pagination__link{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 var(--space-2);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text);background:transparent;border:var(--bw) solid transparent;text-decoration:none;cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-pagination__link:hover{background:var(--color-surface-2);border-color:var(--color-border);}

package/src/components/progress.css

@@ -1,4 +1,4 @@
-/* Freeday — Progress */
+/* Freeday. Progress */
 .fdy-progress{height:.5rem;border-radius:var(--radius-full);background:var(--color-surface-3);overflow:hidden;}
 .fdy-progress__bar{height:100%;border-radius:inherit;background:var(--color-primary);transition:width var(--dur-base) var(--ease-standard);}
 .fdy-progress--indeterminate{position:relative;}

package/src/components/rating.css

@@ -1,4 +1,4 @@
-/* Freeday — Rating (star rating). Interactive = native radio group (arrow keys, form-assoc);
+/* Freeday. Rating (star rating). Interactive = native radio group (arrow keys, form-assoc);
  * filled vs empty differ by fill-vs-outline (not colour alone). Enhanced by freeday-rating.js. */
 .fdy-rating{display:inline-flex;gap:var(--space-1);}
 .fdy-rating__star{display:inline-flex;line-height:0;cursor:pointer;}
@@ -11,6 +11,6 @@
 .fdy-rating--disabled .fdy-rating__star{cursor:not-allowed;}
 .fdy-rating--disabled .fdy-rating__star svg{opacity:.5;}
 /* Invalid: tint the (outline) empty stars danger so a required-but-empty rating reads as an error,
-   paired with a help/error message — never colour alone. */
+   paired with a help/error message, never colour alone. */
 .fdy-rating--error .fdy-rating__star svg{stroke:var(--color-danger);}
 .fdy-rating--sm .fdy-rating__star svg{width:1.1rem;height:1.1rem;}

package/src/components/selection.css

@@ -1,10 +1,10 @@
-/* Freeday — Selection controls */
+/* Freeday. Selection controls */
 /* `flex:none` on every box, track and standalone checkbox is load-bearing, not tidiness.
    `.fdy-check` is an inline-flex row of [box, label], and a flex item with a WIDTH is still
-   shrinkable — so as soon as the label wrapped to a second line the box gave up horizontal space
+   shrinkable, so as soon as the label wrapped to a second line the box gave up horizontal space
    to it and rendered an 18px-tall rectangle 13px wide. Squashed, off-square, and different from
    every sibling whose label happened to be short: a form of five checkboxes showed three sizes.
-   Nothing in the declarations looked wrong, because the width was never overridden — it was
+   Nothing in the declarations looked wrong, because the width was never overridden, it was
    negotiated away. */
 .fdy-check,.fdy-radio,.fdy-switch{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;}
 .fdy-check input,.fdy-radio input{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
@@ -22,7 +22,7 @@
 .fdy-switch input:checked{background:var(--color-primary);}
 .fdy-switch input:checked::before{transform:translateX(calc(var(--control-switch-w) - var(--control-switch-h)));}
 
-/* Standalone checkbox (e.g. table row/select-all) — supports :indeterminate */
+/* Standalone checkbox (e.g. table row/select-all), supports :indeterminate */
 .fdy-checkbox{appearance:none;-webkit-appearance:none;flex:none;width:var(--control-box);height:var(--control-box);margin:0;border:1.5px solid var(--color-control-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:inset 0 1px 2px var(--color-shadow-inset);cursor:pointer;display:grid;place-content:center;transition:background var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);}
 .fdy-checkbox::before{content:"";width:.62rem;height:.62rem;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring);box-shadow:inset 1rem 1rem var(--color-on-primary);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);}
 .fdy-checkbox:checked,.fdy-checkbox:indeterminate{background:var(--color-primary);border-color:var(--color-primary);}

package/src/components/skeleton.css

@@ -1,4 +1,4 @@
-/* Freeday — Skeleton */
+/* Freeday. Skeleton */
 .fdy-skeleton{display:block;border-radius:var(--radius-sm);background:var(--color-surface-3);background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--color-surface) 60%,transparent),transparent);background-size:200% 100%;background-repeat:no-repeat;animation:fdy-skeleton 1.4s ease-in-out infinite;}
 .fdy-skeleton--text{height:.8rem;margin:.3rem 0;}
 .fdy-skeleton--title{height:1.2rem;width:40%;}

package/src/components/slider.css

@@ -1,4 +1,4 @@
-/* Freeday — Slider (native <input type="range"> themed via accent-color: keeps native
+/* Freeday. Slider (native <input type="range"> themed via accent-color: keeps native
  * keyboard + ARIA, filled track and thumb come free). Optional value output + scale.
  * freeday-slider.js just mirrors the value into an <output for="…">. */
 .fdy-slider{width:100%;max-width:22rem;height:1.5rem;accent-color:var(--color-primary);cursor:pointer;}

package/src/components/spinner.css

@@ -1,4 +1,4 @@
-/* Freeday — Spinner */
+/* Freeday. Spinner */
 .fdy-spinner{display:inline-block;width:1.5rem;height:1.5rem;border:2.5px solid var(--color-border-strong);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:fdy-spin .7s linear infinite;}
 .fdy-spinner--sm{width:1rem;height:1rem;border-width:2px;}
 .fdy-spinner--lg{width:2.5rem;height:2.5rem;border-width:3px;}

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. */