@cahyo-dimas/freeday 1.17.0 → 1.20.0

package/dist/freeday.bundle.css

@@ -166,6 +166,14 @@
   --chart-8: #e34948;
   --chart-grid: var(--slate-200);
   --chart-tick: var(--slate-400);
+  --tone-1: var(--chart-1);
+  --tone-2: var(--chart-2);
+  --tone-3: var(--chart-3);
+  --tone-4: var(--chart-4);
+  --tone-5: var(--chart-5);
+  --tone-6: var(--chart-6);
+  --tone-7: var(--chart-7);
+  --tone-8: var(--chart-8);
   --focus-ring: var(--azure-600);
   --focus-ring-width: 2px;
 }
@@ -339,7 +347,15 @@
   --chart-tick: var(--slate-400);
   --focus-ring: var(--azure-600);
 }
-:root[data-density="compact"] {
+/* Density is deliberately NOT scoped to :root. These are custom properties, so they inherit —
+ * putting the attribute on any ancestor (a route wrapper, one section) densifies just that
+ * subtree, which is how density is actually decided: per screen, not per app. The root still
+ * matches, so setting data-density on the html element keeps working exactly as before. */
+[data-density="compact"] {
+  --space-3: 0.625rem;
+  --space-4: 0.75rem;
+  --space-5: 1rem;
+  --space-6: 1.25rem;
   --control-h: 2rem;
 }
 
@@ -534,14 +550,14 @@ a { color: var(--color-primary); }
  * test/contrast.test.mjs). Use to disambiguate same-initial avatars (e.g. many "PT …" names):
  * hash a stable 1..8 index off the FULL name in your app, then apply .fdy-avatar--tone-<n>. */
 .fdy-avatar--tone-1,.fdy-avatar--tone-2,.fdy-avatar--tone-3,.fdy-avatar--tone-4,.fdy-avatar--tone-5,.fdy-avatar--tone-6,.fdy-avatar--tone-7,.fdy-avatar--tone-8{background:color-mix(in srgb,var(--_fdy-avatar-tone) 18%,var(--color-surface));color:color-mix(in srgb,var(--_fdy-avatar-tone) 50%,var(--color-text));}
-.fdy-avatar--tone-1{--_fdy-avatar-tone:var(--chart-1);}
-.fdy-avatar--tone-2{--_fdy-avatar-tone:var(--chart-2);}
-.fdy-avatar--tone-3{--_fdy-avatar-tone:var(--chart-3);}
-.fdy-avatar--tone-4{--_fdy-avatar-tone:var(--chart-4);}
-.fdy-avatar--tone-5{--_fdy-avatar-tone:var(--chart-5);}
-.fdy-avatar--tone-6{--_fdy-avatar-tone:var(--chart-6);}
-.fdy-avatar--tone-7{--_fdy-avatar-tone:var(--chart-7);}
-.fdy-avatar--tone-8{--_fdy-avatar-tone:var(--chart-8);}
+.fdy-avatar--tone-1{--_fdy-avatar-tone:var(--tone-1);}
+.fdy-avatar--tone-2{--_fdy-avatar-tone:var(--tone-2);}
+.fdy-avatar--tone-3{--_fdy-avatar-tone:var(--tone-3);}
+.fdy-avatar--tone-4{--_fdy-avatar-tone:var(--tone-4);}
+.fdy-avatar--tone-5{--_fdy-avatar-tone:var(--tone-5);}
+.fdy-avatar--tone-6{--_fdy-avatar-tone:var(--tone-6);}
+.fdy-avatar--tone-7{--_fdy-avatar-tone:var(--tone-7);}
+.fdy-avatar--tone-8{--_fdy-avatar-tone:var(--tone-8);}
 
 /* Freeday — Badge */
 .fdy-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;padding:.35em .7em;border-radius:var(--radius-full);color:var(--color-primary-strong);background:var(--color-primary-soft);border:var(--bw) solid color-mix(in srgb,var(--color-primary) 22%,transparent);box-shadow:0 1px 1.5px rgba(16,14,30,.05);}
@@ -661,6 +677,9 @@ a { color: var(--color-primary); }
 .fdy-card--elevated{box-shadow:var(--shadow-lift-hover);}
 .fdy-card--interactive{cursor:pointer;}
 .fdy-card--interactive:hover{box-shadow:var(--shadow-lift-hover);transform:translateY(-3px);}
+/* The global reduced-motion reset kills the ANIMATION; drop the -3px shift too so the card
+ * doesn't jump. The shadow still communicates the affordance. */
+@media (prefers-reduced-motion:reduce){.fdy-card--interactive:hover{transform:none;}}
 /* When the whole card IS the control — a real <button> so the row is keyboard-reachable and
  * announced — reset the UA button box. Note: it does NOT reset background/border, because
  * .fdy-card already sets its own surface + border (resetting them here would strip the card). */
@@ -816,6 +835,18 @@ a { color: var(--color-primary); }
 /* Freeday — Chip (tag / removable filter) */
 .fdy-chip{display:inline-flex;align-items:center;gap:var(--space-2);height:1.75rem;padding:0 var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text);background:var(--color-surface-3);border:var(--bw) solid var(--color-border);}
 .fdy-chip--primary{color:var(--color-primary-strong);background:var(--color-primary-soft);border-color:color-mix(in srgb,var(--color-primary) 22%,transparent);}
+/* Categorical tone chips — non-semantic category tags / legend swatches, from the general
+ * --tone-1..8 palette. Same validated AA formula as .fdy-avatar--tone-* (text >=4.5:1 both themes,
+ * gated by test/contrast.test.mjs). */
+.fdy-chip--tone-1,.fdy-chip--tone-2,.fdy-chip--tone-3,.fdy-chip--tone-4,.fdy-chip--tone-5,.fdy-chip--tone-6,.fdy-chip--tone-7,.fdy-chip--tone-8{background:color-mix(in srgb,var(--_fdy-chip-tone) 18%,var(--color-surface));color:color-mix(in srgb,var(--_fdy-chip-tone) 50%,var(--color-text));border-color:color-mix(in srgb,var(--_fdy-chip-tone) 30%,var(--color-border));}
+.fdy-chip--tone-1{--_fdy-chip-tone:var(--tone-1);}
+.fdy-chip--tone-2{--_fdy-chip-tone:var(--tone-2);}
+.fdy-chip--tone-3{--_fdy-chip-tone:var(--tone-3);}
+.fdy-chip--tone-4{--_fdy-chip-tone:var(--tone-4);}
+.fdy-chip--tone-5{--_fdy-chip-tone:var(--tone-5);}
+.fdy-chip--tone-6{--_fdy-chip-tone:var(--tone-6);}
+.fdy-chip--tone-7{--_fdy-chip-tone:var(--tone-7);}
+.fdy-chip--tone-8{--_fdy-chip-tone:var(--tone-8);}
 .fdy-chip__remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin-right:calc(var(--space-1)*-1);border:0;padding:0;border-radius:var(--radius-full);background:transparent;color:currentColor;opacity:.6;cursor:pointer;font-size:var(--text-sm);line-height:1;}
 .fdy-chip__remove:hover{opacity:1;background:color-mix(in srgb,currentColor 16%,transparent);}
 .fdy-chip__remove:focus-visible{outline:none;opacity:1;box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
@@ -865,6 +896,56 @@ a { color: var(--color-primary); }
 @media (prefers-reduced-motion:no-preference){.fdy-combo__listbox:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 @keyframes fdy-combo-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
 
+/* 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
+ * colours, no new shadows. Pair with .fdy-app (the shell) and the components inside.
+ */
+
+/* ---- Type roles (three title levels + supporting text) -------------------------------------
+ * One role per level of hierarchy. Reach for these instead of re-using .fdy-card__title for a
+ * page title (the mistake that collapses three levels into one grey mush). */
+.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-subtle);}
+.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;}
+.fdy-text-muted{color:var(--color-text-muted);}
+.fdy-text-subtle{color:var(--color-text-subtle);}
+.fdy-text-caption{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;}
+
+/* ---- Page: the vertical stack of sections, with the section rhythm between them ------------- */
+.fdy-page{display:flex;flex-direction:column;gap:var(--space-8);}
+
+/* ---- Page header: eyebrow + title + description on the left, primary action(s) on the right -- */
+.fdy-page__header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;}
+.fdy-page__heading{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;}
+.fdy-page__desc{font-size:var(--text-base);color:var(--color-text-muted);margin:0;max-width:62ch;line-height:var(--leading-normal);}
+.fdy-page__actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
+
+/* ---- Page section: a heading (+ optional toolbar) and its body, with the intra-group rhythm --- */
+.fdy-page-section{display:flex;flex-direction:column;gap:var(--space-4);}
+.fdy-page-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;}
+
+/* ---- Toolbar: a horizontal control row (search + actions), wraps cleanly ---------------------- */
+.fdy-toolbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
+.fdy-toolbar__spacer{flex:1;}
+.fdy-toolbar__search{max-width:18rem;flex:1 1 12rem;}
+
+/* ---- Stat tile: a KPI metric that is deliberately NOT a card, so a KPI strip doesn't become an
+ * identical-white-card grid. Flat by default; wrap the .fdy-stats grid in one card if you want a
+ * single boxed strip, or use .fdy-stats--boxed for shared surface + dividers. */
+.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;}
+.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-subtle);}
+.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);}
+.fdy-stats--boxed{background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);gap:0;}
+.fdy-stats--boxed .fdy-stat{padding:var(--space-5);border-right:var(--bw) solid var(--color-border-muted);}
+.fdy-stats--boxed .fdy-stat:last-child{border-right:0;}
+
 /* 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;}
@@ -1107,6 +1188,36 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 /* 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);}
 
+/* 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
+ * 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. */
+.fdy-list{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;}
+.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). */
+.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
+ * touching the list surface (same contract as .fdy-card--button). */
+.fdy-list__row--button{width:100%;text-align:inherit;color:inherit;font:inherit;background:none;border:0;appearance:none;-webkit-appearance:none;cursor:pointer;}
+.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;}
+/* 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__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). */
+
 /* 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);}

package/dist/freeday.css

@@ -189,14 +189,14 @@ a { color: var(--color-primary); }
  * test/contrast.test.mjs). Use to disambiguate same-initial avatars (e.g. many "PT …" names):
  * hash a stable 1..8 index off the FULL name in your app, then apply .fdy-avatar--tone-<n>. */
 .fdy-avatar--tone-1,.fdy-avatar--tone-2,.fdy-avatar--tone-3,.fdy-avatar--tone-4,.fdy-avatar--tone-5,.fdy-avatar--tone-6,.fdy-avatar--tone-7,.fdy-avatar--tone-8{background:color-mix(in srgb,var(--_fdy-avatar-tone) 18%,var(--color-surface));color:color-mix(in srgb,var(--_fdy-avatar-tone) 50%,var(--color-text));}
-.fdy-avatar--tone-1{--_fdy-avatar-tone:var(--chart-1);}
-.fdy-avatar--tone-2{--_fdy-avatar-tone:var(--chart-2);}
-.fdy-avatar--tone-3{--_fdy-avatar-tone:var(--chart-3);}
-.fdy-avatar--tone-4{--_fdy-avatar-tone:var(--chart-4);}
-.fdy-avatar--tone-5{--_fdy-avatar-tone:var(--chart-5);}
-.fdy-avatar--tone-6{--_fdy-avatar-tone:var(--chart-6);}
-.fdy-avatar--tone-7{--_fdy-avatar-tone:var(--chart-7);}
-.fdy-avatar--tone-8{--_fdy-avatar-tone:var(--chart-8);}
+.fdy-avatar--tone-1{--_fdy-avatar-tone:var(--tone-1);}
+.fdy-avatar--tone-2{--_fdy-avatar-tone:var(--tone-2);}
+.fdy-avatar--tone-3{--_fdy-avatar-tone:var(--tone-3);}
+.fdy-avatar--tone-4{--_fdy-avatar-tone:var(--tone-4);}
+.fdy-avatar--tone-5{--_fdy-avatar-tone:var(--tone-5);}
+.fdy-avatar--tone-6{--_fdy-avatar-tone:var(--tone-6);}
+.fdy-avatar--tone-7{--_fdy-avatar-tone:var(--tone-7);}
+.fdy-avatar--tone-8{--_fdy-avatar-tone:var(--tone-8);}
 
 /* Freeday — Badge */
 .fdy-badge{display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);line-height:1;white-space:nowrap;padding:.35em .7em;border-radius:var(--radius-full);color:var(--color-primary-strong);background:var(--color-primary-soft);border:var(--bw) solid color-mix(in srgb,var(--color-primary) 22%,transparent);box-shadow:0 1px 1.5px rgba(16,14,30,.05);}
@@ -316,6 +316,9 @@ a { color: var(--color-primary); }
 .fdy-card--elevated{box-shadow:var(--shadow-lift-hover);}
 .fdy-card--interactive{cursor:pointer;}
 .fdy-card--interactive:hover{box-shadow:var(--shadow-lift-hover);transform:translateY(-3px);}
+/* The global reduced-motion reset kills the ANIMATION; drop the -3px shift too so the card
+ * doesn't jump. The shadow still communicates the affordance. */
+@media (prefers-reduced-motion:reduce){.fdy-card--interactive:hover{transform:none;}}
 /* When the whole card IS the control — a real <button> so the row is keyboard-reachable and
  * announced — reset the UA button box. Note: it does NOT reset background/border, because
  * .fdy-card already sets its own surface + border (resetting them here would strip the card). */
@@ -471,6 +474,18 @@ a { color: var(--color-primary); }
 /* Freeday — Chip (tag / removable filter) */
 .fdy-chip{display:inline-flex;align-items:center;gap:var(--space-2);height:1.75rem;padding:0 var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--color-text);background:var(--color-surface-3);border:var(--bw) solid var(--color-border);}
 .fdy-chip--primary{color:var(--color-primary-strong);background:var(--color-primary-soft);border-color:color-mix(in srgb,var(--color-primary) 22%,transparent);}
+/* Categorical tone chips — non-semantic category tags / legend swatches, from the general
+ * --tone-1..8 palette. Same validated AA formula as .fdy-avatar--tone-* (text >=4.5:1 both themes,
+ * gated by test/contrast.test.mjs). */
+.fdy-chip--tone-1,.fdy-chip--tone-2,.fdy-chip--tone-3,.fdy-chip--tone-4,.fdy-chip--tone-5,.fdy-chip--tone-6,.fdy-chip--tone-7,.fdy-chip--tone-8{background:color-mix(in srgb,var(--_fdy-chip-tone) 18%,var(--color-surface));color:color-mix(in srgb,var(--_fdy-chip-tone) 50%,var(--color-text));border-color:color-mix(in srgb,var(--_fdy-chip-tone) 30%,var(--color-border));}
+.fdy-chip--tone-1{--_fdy-chip-tone:var(--tone-1);}
+.fdy-chip--tone-2{--_fdy-chip-tone:var(--tone-2);}
+.fdy-chip--tone-3{--_fdy-chip-tone:var(--tone-3);}
+.fdy-chip--tone-4{--_fdy-chip-tone:var(--tone-4);}
+.fdy-chip--tone-5{--_fdy-chip-tone:var(--tone-5);}
+.fdy-chip--tone-6{--_fdy-chip-tone:var(--tone-6);}
+.fdy-chip--tone-7{--_fdy-chip-tone:var(--tone-7);}
+.fdy-chip--tone-8{--_fdy-chip-tone:var(--tone-8);}
 .fdy-chip__remove{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin-right:calc(var(--space-1)*-1);border:0;padding:0;border-radius:var(--radius-full);background:transparent;color:currentColor;opacity:.6;cursor:pointer;font-size:var(--text-sm);line-height:1;}
 .fdy-chip__remove:hover{opacity:1;background:color-mix(in srgb,currentColor 16%,transparent);}
 .fdy-chip__remove:focus-visible{outline:none;opacity:1;box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
@@ -520,6 +535,56 @@ a { color: var(--color-primary); }
 @media (prefers-reduced-motion:no-preference){.fdy-combo__listbox:not([hidden]){animation:fdy-combo-in var(--dur-fast) var(--ease-standard);}}
 @keyframes fdy-combo-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
 
+/* 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
+ * colours, no new shadows. Pair with .fdy-app (the shell) and the components inside.
+ */
+
+/* ---- Type roles (three title levels + supporting text) -------------------------------------
+ * One role per level of hierarchy. Reach for these instead of re-using .fdy-card__title for a
+ * page title (the mistake that collapses three levels into one grey mush). */
+.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-subtle);}
+.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;}
+.fdy-text-muted{color:var(--color-text-muted);}
+.fdy-text-subtle{color:var(--color-text-subtle);}
+.fdy-text-caption{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;}
+
+/* ---- Page: the vertical stack of sections, with the section rhythm between them ------------- */
+.fdy-page{display:flex;flex-direction:column;gap:var(--space-8);}
+
+/* ---- Page header: eyebrow + title + description on the left, primary action(s) on the right -- */
+.fdy-page__header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;}
+.fdy-page__heading{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;}
+.fdy-page__desc{font-size:var(--text-base);color:var(--color-text-muted);margin:0;max-width:62ch;line-height:var(--leading-normal);}
+.fdy-page__actions{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
+
+/* ---- Page section: a heading (+ optional toolbar) and its body, with the intra-group rhythm --- */
+.fdy-page-section{display:flex;flex-direction:column;gap:var(--space-4);}
+.fdy-page-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;}
+
+/* ---- Toolbar: a horizontal control row (search + actions), wraps cleanly ---------------------- */
+.fdy-toolbar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;}
+.fdy-toolbar__spacer{flex:1;}
+.fdy-toolbar__search{max-width:18rem;flex:1 1 12rem;}
+
+/* ---- Stat tile: a KPI metric that is deliberately NOT a card, so a KPI strip doesn't become an
+ * identical-white-card grid. Flat by default; wrap the .fdy-stats grid in one card if you want a
+ * single boxed strip, or use .fdy-stats--boxed for shared surface + dividers. */
+.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;}
+.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-subtle);}
+.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);}
+.fdy-stats--boxed{background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);gap:0;}
+.fdy-stats--boxed .fdy-stat{padding:var(--space-5);border-right:var(--bw) solid var(--color-border-muted);}
+.fdy-stats--boxed .fdy-stat:last-child{border-right:0;}
+
 /* 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;}
@@ -762,6 +827,36 @@ fieldset.fdy-field>legend{padding:0;float:none;}
 /* 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);}
 
+/* 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
+ * 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. */
+.fdy-list{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;}
+.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). */
+.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
+ * touching the list surface (same contract as .fdy-card--button). */
+.fdy-list__row--button{width:100%;text-align:inherit;color:inherit;font:inherit;background:none;border:0;appearance:none;-webkit-appearance:none;cursor:pointer;}
+.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;}
+/* 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__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). */
+
 /* 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);}

package/dist/freeday.tokens.css

@@ -165,6 +165,14 @@
   --chart-8: #e34948;
   --chart-grid: var(--slate-200);
   --chart-tick: var(--slate-400);
+  --tone-1: var(--chart-1);
+  --tone-2: var(--chart-2);
+  --tone-3: var(--chart-3);
+  --tone-4: var(--chart-4);
+  --tone-5: var(--chart-5);
+  --tone-6: var(--chart-6);
+  --tone-7: var(--chart-7);
+  --tone-8: var(--chart-8);
   --focus-ring: var(--azure-600);
   --focus-ring-width: 2px;
 }
@@ -338,6 +346,14 @@
   --chart-tick: var(--slate-400);
   --focus-ring: var(--azure-600);
 }
-:root[data-density="compact"] {
+/* Density is deliberately NOT scoped to :root. These are custom properties, so they inherit —
+ * putting the attribute on any ancestor (a route wrapper, one section) densifies just that
+ * subtree, which is how density is actually decided: per screen, not per app. The root still
+ * matches, so setting data-density on the html element keeps working exactly as before. */
+[data-density="compact"] {
+  --space-3: 0.625rem;
+  --space-4: 0.75rem;
+  --space-5: 1rem;
+  --space-6: 1.25rem;
   --control-h: 2rem;
 }

package/docs/agent-onboarding.md

@@ -0,0 +1,151 @@
+# Freeday — AI agent onboarding
+
+For **a coding agent working in a project that consumes Freeday** (Claude Code, Codex, Cursor,
+Copilot…). No model has Freeday in its training data, so an agent that is merely told "use Freeday"
+will invent class names or silently fall back to Bootstrap/Tailwind conventions. This file is the
+fix: paste the block below into the consuming project's agent instruction file, once.
+
+> Working on **the kit itself**, not a consuming app? That's [`../CLAUDE.md`](../CLAUDE.md) — this
+> file is about *using* the published package.
+
+---
+
+## 1. Paste this into your project's agent instructions
+
+Into `CLAUDE.md` (Claude Code) / `AGENTS.md` (Codex, others) / `.github/copilot-instructions.md` at
+the **root of the consuming project**:
+
+```markdown
+## UI: Freeday design system (@cahyo-dimas/freeday)
+
+All UI in this project is built from Freeday. It is a **token-driven CSS kit + zero-dependency JS
+enhancers**, not a component framework — components are plain markup with `fdy-*` classes.
+
+**Before writing or editing any markup/CSS, read these (they ship inside the package):**
+- `node_modules/@cahyo-dimas/freeday/COMPONENTS.md` — every class that exists, with minimal markup
+  skeletons, enhancer hooks and the a11y contract per component. **The class list is closed:
+  if a class is not in that file, it does not exist — do not invent one.**
+- `node_modules/@cahyo-dimas/freeday/USAGE.md` — the doctrine: which token/role/shadow to use when.
+- `node_modules/@cahyo-dimas/freeday/docs/reference-screen.html` — one complete screen, assembled
+  the intended way. Copy this structure for a new screen.
+
+**Non-negotiables:**
+1. No raw hex or px in app CSS. Use tokens: `var(--color-primary)`, `var(--space-4)` (4px scale),
+   `var(--radius-md)`, `var(--shadow-1)`, `var(--dur-2)`.
+2. Components only touch semantic tokens (`--color-*`) — never the primitive ramp (`--azure-600`).
+3. `.fdy-btn` is already the primary action (there is no `--primary`). One per screen; everything
+   else is `--ghost` or `--text`.
+4. Three title roles only: `.fdy-title-page` (one `<h1>`) / `.fdy-title-section` / `.fdy-title-card`.
+   Never reuse a card title as a page title.
+5. Assemble from the frame down: `.fdy-app` → `.fdy-page` → `.fdy-page-section` → components.
+6. Form errors: `aria-invalid="true"` + `aria-describedby` → a `.fdy-help.fdy-help--error`.
+   Icon-only buttons need `aria-label`. Status is never colour-only.
+7. Interactive components need their enhancer script loaded (see the table in COMPONENTS.md);
+   in an SPA, re-hydrate dynamic DOM (`useFreeday` in Vue/React does this).
+8. Freeday owns components + tokens, **not layout**. Grids/stacks/one-off gaps come from our own
+   layout layer — build its theme on `var(--space-N)` so both systems stay in step.
+```
+
+Adjust the paths if the package lives somewhere else (a workspace, a vendored copy, `wwwroot/` for
+Blazor). Then verify the agent can actually read those files — an agent that can't open
+`node_modules` will keep guessing.
+
+## 2. What ships in the package
+
+| File | What it answers |
+|---|---|
+| `COMPONENTS.md` | The complete class surface — what exists, its modifiers, minimal markup, a11y. |
+| `USAGE.md` | The doctrine — which token/role/shadow/emphasis to use when. |
+| `docs/getting-started.md` | Install + import + theme, per stack (Static HTML · Vue · React · Blazor). |
+| `docs/integrations.md` | How to bridge third-party libraries (validation, charts, dates, i18n…). |
+| `docs/reference-screen.html` | A full screen assembled from the shell down. Open it in a browser. |
+| `docs/agent-onboarding.md` | This file. |
+| `dist/` | Built CSS + enhancers. **`freeday.bundle.css` = tokens + components** (what `@cahyo-dimas/freeday/css` resolves to); `freeday.css` is components **only**, `freeday.tokens.css` tokens only — linking `freeday.css` alone leaves every `var(--…)` unresolved. Plus `freeday-*.js` and the `.d.ts` files. |
+| `src/components/*.css` | The authoritative source for every class, when a doc is ambiguous. |
+| `tokens/tokens.json` | Every token in W3C DTCG format — machine-readable. |
+| `adapters/vue` · `adapters/react` · `adapters/blazor` | Typed wrappers, 10 components each. |
+
+The live docs (with an interactive playground) are at
+<https://cahyo-dimas.github.io/freeday-ui-kit/>, and the repo — including three complete example
+apps under `examples/` (Vue, React, Blazor) that are **not** in the npm tarball — is at
+<https://github.com/cahyo-dimas/freeday-ui-kit>.
+
+## 3. Starting a new screen
+
+The order matters; skipping to components is what produces flat, identical-card screens.
+
+0. **Pick the screen shape first.** Which archetype is this — dashboard, master-detail, kanban,
+   wizard, POS…? The repo's
+   [`reference/README.md`](https://github.com/cahyo-dimas/freeday-ui-kit/blob/main/reference/README.md)
+   maps 15 archetypes to the exact primitives that compose each one, and says plainly which shapes
+   the kit has **no** component for (kanban columns, calendar month grid, chat bubbles, canvas) so
+   you build the frame instead of inventing a class. Not in the npm package — read it on GitHub.
+1. **Shell** — is `.fdy-app` already in place (usually once, in the app layout)? If not, copy it
+   from `docs/getting-started.md` §The app shell.
+2. **Theme** — `data-theme="light|dark"` + `data-density="comfortable|compact"` on `<html>`, set
+   once at the root. Use `compact` for table-heavy back-office screens.
+3. **Fonts** — the package ships **no** `@font-face`. Load Sora / IBM Plex Sans / JetBrains Mono
+   yourself, or override `--font-display`/`--font-body`/`--font-mono`. Skipping this reads as
+   "unfinished design", not "missing dependency".
+4. **Page frame** — `.fdy-page` + `.fdy-page__header` (eyebrow + `.fdy-title-page` + desc on the
+   left, **one** primary action on the right).
+5. **Sections** — one `.fdy-page-section` per region, each with a `.fdy-title-section`.
+6. **Components** — from `COMPONENTS.md`, inside the sections.
+7. **Verify** — the checklist in §5.
+
+## 4. Migrating an existing UI to Freeday
+
+Migration is a **class-and-structure swap**, not a rewrite. Keep the app's DOM semantics; replace
+the styling layer. Rough equivalents — always confirm the target class in `COMPONENTS.md`, and note
+that Freeday deliberately has **no** layout/spacing utilities, so grid/flex/margin classes stay with
+your own layout layer:
+
+| Coming from | Freeday |
+|---|---|
+| `btn btn-primary` / `MudButton Variant=Filled` | `fdy-btn` |
+| `btn btn-secondary` / `btn-outline-*` | `fdy-btn fdy-btn--ghost` |
+| `btn btn-danger` | `fdy-btn fdy-btn--danger` |
+| `btn btn-link` | `fdy-btn fdy-btn--text` |
+| `btn-sm` / `btn-lg` | `fdy-btn--sm` / `fdy-btn--lg` |
+| `form-control` / `MudTextField` | `fdy-field` + `fdy-label` + `fdy-input` |
+| `form-select` / `<select>` / `MudSelect` | `fdy-combo` + `data-fdy-combo` (+ `freeday-select.js`) |
+| `invalid-feedback` / `is-invalid` | `aria-invalid="true"` + `fdy-help fdy-help--error` |
+| `input-group` / `input-group-text` | `fdy-input-group` + `__addon` / `__btn` |
+| `form-check` / `form-switch` | `fdy-check` / `fdy-radio` / `fdy-switch` |
+| `card` / `card-body` / `card-title` | `fdy-card` / `__body` / `__title` |
+| `table table-striped` / `MudTable` | `fdy-table` in `fdy-table-wrap`; interactive → `fdy-datatable` |
+| `badge bg-success` / `MudChip` (status) | `fdy-badge fdy-badge--success` |
+| `alert alert-danger` | `fdy-alert fdy-alert--danger` + `role="alert"` |
+| `modal` / `MudDialog` | `<dialog class="fdy-modal">` (native — drop the JS backdrop plumbing) |
+| `offcanvas` / `MudDrawer` | `<dialog class="fdy-drawer">` + `data-fdy-drawer` |
+| `nav nav-tabs` | `fdy-tabs` + `data-fdy-tabs` |
+| `breadcrumb` / `pagination` | `fdy-breadcrumb` / `fdy-pagination` (same `<nav><ol>` structure) |
+| `spinner-border` / `progress` | `fdy-spinner` / `fdy-progress` + `__bar` |
+| `toast` container + JS | `Freeday.toast({…})` — imperative, no markup to author |
+| `text-muted` | `fdy-text-muted` |
+| `d-none` / `visually-hidden` | `fdy-hidden` / `fdy-visually-hidden` |
+| `container` / `row` / `col-*` / `mb-3` / `gap-2` | **stays yours** — Freeday ships no layout utilities |
+
+Order of work that avoids a half-migrated mess:
+
+1. Load Freeday's CSS and **turn off the old framework's reset/preflight** — `base.css` is the
+   reset now. Two resets fighting is the usual source of "everything looks slightly off".
+2. Shell + theme attributes first, so tokens resolve everywhere.
+3. Then screen by screen: page frame → sections → controls. Convert a whole screen at a time;
+   half-converted screens can't be reviewed visually.
+4. Delete the old framework's CSS only when no screen references it, then grep for leftover class
+   prefixes.
+5. Replace hand-rolled modal/drawer/dropdown JS with the native-`<dialog>` components and the
+   enhancers — that is usually where the most code disappears.
+
+## 5. Verification checklist (before claiming a screen is done)
+
+- Every `fdy-*` class used appears in `COMPONENTS.md`. Grep the diff for `fdy-` and check.
+- No raw hex/rgb/px in the diff's CSS. Grep for `#` and `px`.
+- Exactly one `.fdy-btn` without a variant modifier on the screen; one `.fdy-title-page`.
+- Toggle `data-theme="dark"` on `<html>` — nothing becomes unreadable, no hard-coded white/black.
+- Toggle `data-density="compact"` — the layout still holds.
+- Keyboard: Tab reaches every control, focus is always visible, Esc closes overlays.
+- Form errors carry `aria-invalid` + a linked message; icon-only buttons have `aria-label`.
+- The interactive components on the screen have their enhancer loaded, and SPA-rendered DOM is
+  re-hydrated.