@cahyo-dimas/freeday 3.4.0 → 3.6.0

package/dist/freeday-search.js

@@ -0,0 +1,77 @@
+/* Freeday, list search enhancer (optional, zero-dependency). Note #061.
+ * Turns an .fdy-input-group into a search box that searches while the reader pauses, at once on
+ * Enter, and has a clear button. All three paths end in ONE bubbling event on the group,
+ * "fdy-search" {term}, so an app listens once instead of wiring keyup, a timer and a click.
+ *
+ * Markup (the group, not a new block; the clear button is yours, so is its aria-label):
+ *   <div class="fdy-input-group" data-fdy-search [data-fdy-search-delay="400"]>
+ *     <span class="fdy-input-group__addon fdy-input-group__addon--icon">…svg…</span>
+ *     <input class="fdy-input" type="text" aria-label="Search orders">
+ *     <button type="button" class="fdy-input-group__btn" data-fdy-search-clear aria-label="Clear search">×</button>
+ *   </div>
+ *
+ * type="text", not "search": WebKit's own × is unthemed and fires no Enter, which is what made
+ * clearing a field leave the old rows on screen until somebody pressed Enter on an empty box.
+ * The clear button is hidden while the box is empty. Clearing writes through the native value
+ * setter and fires a native `input`, so v-model, a React onChange and Blazor @bind all follow.
+ * `term` is trimmed; "" means "show everything again". Exposes window.FreedaySearch.
+ */
+(function () {
+  'use strict';
+
+  var DEFAULT_DELAY = 400;
+  var nativeValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
+
+  function initSearch(root) {
+    if (root.dataset.fdySearchReady === '1') return;
+    var input = root.querySelector('input');
+    if (!input) return;
+    root.dataset.fdySearchReady = '1';
+    var clearBtn = root.querySelector('[data-fdy-search-clear]');
+    var delayAttr = parseInt(root.getAttribute('data-fdy-search-delay'), 10);
+    var delay = isNaN(delayAttr) ? DEFAULT_DELAY : delayAttr;
+    var timer = null;
+
+    function cancel() { if (timer !== null) { clearTimeout(timer); timer = null; } }
+    function emit() {
+      cancel();
+      root.dispatchEvent(new CustomEvent('fdy-search', { bubbles: true, detail: { term: input.value.trim() } }));
+    }
+    function syncClear() { if (clearBtn) clearBtn.hidden = input.value === ''; }
+
+    input.addEventListener('input', function () {
+      syncClear();
+      cancel();
+      timer = setTimeout(emit, delay);
+    });
+    input.addEventListener('keydown', function (e) {
+      if (e.key !== 'Enter') return;
+      e.preventDefault(); // inside a <form>, Enter would submit it as well
+      emit();
+    });
+    if (clearBtn) {
+      clearBtn.addEventListener('click', function () {
+        nativeValue.call(input, '');
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+        emit(); // at once, and it cancels the pause the input event just started
+        input.focus();
+      });
+    }
+    syncClear();
+  }
+
+  function initAll(context) {
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-search]')) initSearch(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-search]'), initSearch);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedaySearch = { init: initSearch, initAll: initAll };
+})();

package/dist/freeday.bundle.css

@@ -1151,6 +1151,8 @@ a { color: var(--color-primary); }
 .fdy-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--text-xs);}
 .fdy-avatar--sm{width:2rem;height:2rem;font-size:var(--text-xs);}
 .fdy-avatar--lg{width:3.5rem;height:3.5rem;font-size:var(--text-lg);}
+/* Square: a mark that is not a person (a company logo, a card's icon chip, #070). */
+.fdy-avatar--square{border-radius:var(--radius-md);}
 .fdy-avatar-group{display:inline-flex;}
 .fdy-avatar-group .fdy-avatar{border:2px solid var(--color-surface);margin-left:calc(var(--space-2)*-1);}
 .fdy-avatar-group .fdy-avatar:first-child{margin-left:0;}
@@ -1290,8 +1292,14 @@ a { color: var(--color-primary); }
 
 /* Freeday. Responsive display utilities (pairs with freeday-breakpoint.js).
  * Breakpoint scale (min-width, px): sm 600 · md 960 · lg 1280 · xl 1920.
+ * Two further widths exist and are NOT ramp steps: `nav` (app-shell.css, off-canvas drawer vs
+ * static sidebar) and `filterbar` (filterbar.css, the width its fields stack at). Both are named
+ * in tokens/breakpoints.mjs; a rule that has to fire with one of them aligns to it, not to the
+ * nearest ramp step, which is a band of broken widths in both directions.
  * NOTE: media-query breakpoints must be literal. CSS can't read custom properties
- * inside @media, so these px are structural, not stray magic numbers. */
+ * inside @media, so these px are structural, not stray magic numbers. An app that runs PostCSS
+ * need not retype them: `@cahyo-dimas/freeday/media` declares every width above as a
+ * @custom-media, so it can write `@media (--fdy-below-sm)` and never drift (#058 §2). */
 .fdy-hidden{display:none !important;}
 
 /* hide-below-X, hidden when the viewport is narrower than X (content shows at X and up) */
@@ -1481,6 +1489,13 @@ a { color: var(--color-primary); }
    absolutely positioned dismiss button back into the flow. Do not merge these two rules. */
 :where(:is(.fdy-card,.fdy-list__row):has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch)){position:relative;}
 .fdy-card__body{padding:var(--space-5);}
+/* Header band (#070): an identity mark, the title, and the card's way out pinned right. Beside the
+   title the action sits in one place on every card; under the content it moved each time the
+   content grew. Outside __body's padding, so its rule spans the card edge to edge. The mark is an
+   .fdy-avatar (--sm --square --tone-N), so its tints are the ones the contrast gate already covers. */
+.fdy-card__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
+.fdy-card__head .fdy-card__title{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-card__action{flex:none;display:inline-flex;align-items:center;gap:var(--space-2);}
 .fdy-card__title{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 0 var(--space-1);}
 .fdy-card__desc{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:var(--leading-normal);}
 .fdy-card__footer{padding:var(--space-3) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2));display:flex;gap:var(--space-2);justify-content:flex-end;}
@@ -1863,6 +1878,42 @@ a { color: var(--color-primary); }
 .fdy-text-success{color:var(--color-success-strong);}
 .fdy-text-warning{color:var(--color-warning-strong);}
 .fdy-text-danger{color:var(--color-danger-strong);}
+/* Document columns (#065): a form or record page with an optional identity rail on the left
+ * (__lead) and a summary rail on the right (__aside). The widths follow which rails are PRESENT,
+ * so the layout is decided once here and not again by every screen:
+ *   __main alone            one column
+ *   __main + __aside        8 / 4         (from md)
+ *   __lead + __main         3 / 9         (from md)
+ *   all three               3 / 6 / 3     (from lg; between md and lg both rails share the left)
+ * Stacked, the summary rail comes FIRST: last, it sits under every section, and its button with it.
+ * From md each rail is sticky and scrolls on its own, so the total and the status stay answerable
+ * while the main column scrolls with the page, and a rail taller than the screen never hangs its
+ * end off it. Screen only: a printed page is not held to a window. */
+.fdy-page__columns{--_fdy-rail-top:var(--fdy-page-sticky-top,var(--space-4));display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:start;}
+/* Under the shell the sticky topbar is in the way; --fdy-page-sticky-top overrides either default. */
+.fdy-app .fdy-page__columns{--_fdy-rail-top:var(--fdy-page-sticky-top,calc(var(--space-16) + var(--space-4)));}
+.fdy-page__columns > *{min-width:0;}
+@media (max-width:959.98px){.fdy-page__aside{order:-1;}}
+@media (min-width:960px){
+  .fdy-page__columns:has(> .fdy-page__aside){grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
+  .fdy-page__columns:has(> .fdy-page__lead){grid-template-columns:minmax(0,1fr) minmax(0,3fr);}
+  /* Both rails, two columns: they stack on the left while __main spans both rows on the right. */
+  .fdy-page__columns:has(> .fdy-page__lead):has(> .fdy-page__aside) > .fdy-page__main{grid-row:span 2;}
+}
+@media (min-width:1280px){
+  .fdy-page__columns:has(> .fdy-page__lead):has(> .fdy-page__aside){grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);}
+  .fdy-page__columns:has(> .fdy-page__lead):has(> .fdy-page__aside) > .fdy-page__main{grid-row:auto;}
+}
+/* The padding, taken back by the margin, is room for a focus ring at a card's edge: a scrolling box
+   clips whatever draws outside it. */
+@media screen and (min-width:960px){
+  .fdy-page__lead,.fdy-page__aside{position:sticky;top:var(--_fdy-rail-top);max-height:calc(100dvh - var(--_fdy-rail-top) - var(--space-4));overflow-y:auto;overscroll-behavior:contain;padding:var(--space-1);margin:calc(var(--space-1) * -1);}
+}
+/* Two sticky rails in ONE column would slide over each other: between md and lg, with both rails
+   present, they scroll with the page instead. */
+@media screen and (min-width:960px) and (max-width:1279.98px){
+  .fdy-page__columns:has(> .fdy-page__lead):has(> .fdy-page__aside) > :is(.fdy-page__lead,.fdy-page__aside){position:static;max-height:none;overflow:visible;}
+}
 
 /* Freeday. Date picker (input-styled trigger + calendar popover).
  * Built by freeday-datepicker.js from an empty [data-fdy-datepicker] wrapper. */
@@ -1958,9 +2009,19 @@ a { color: var(--color-primary); }
 /* 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);}
+/* overflow-wrap: an email, an order code or a 13-digit phone number is one unbreakable token, and
+   without it the value prints over whatever sits beside it (#066). */
+.fdy-dl dd{margin:0;min-width:0;color:var(--color-text);font-size:var(--text-sm);font-weight:var(--weight-medium);overflow-wrap:anywhere;}
 .fdy-dl--rows{grid-template-columns:1fr;gap:var(--space-1);}
 .fdy-dl--rows dt{margin-top:var(--space-2);}
+/* Facts grid (#066): each pair a <div> (allowed inside <dl>), caption above value, as many columns
+   as the list's OWN width holds, never more than three. Sized by the element rather than the
+   window, so a grid in a narrow side rail stays one column with no modifier: a window breakpoint
+   gave a rail two columns of about 110px. min(100%, …) keeps a single column from overflowing a
+   rail narrower than the column floor. */
+.fdy-dl--grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(var(--fdy-dl-col-min,14rem),calc((100% - 2 * var(--space-6)) / 3))),1fr));gap:var(--space-5) var(--space-6);}
+.fdy-dl--grid > div{min-width:0;}
+.fdy-dl--grid dd{margin-top:var(--space-1);}
 
 /* Freeday. Divider */
 .fdy-divider{border:0;border-top:var(--bw) solid var(--color-border);margin:var(--space-4) 0;}
@@ -2077,7 +2138,14 @@ a { color: var(--color-primary); }
 /* 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. */
+/* Stack on narrow screens so nothing overflows the row.
+ * 640 is deliberately not a ramp step (sm is 600): it is a real phone-landscape width, and moving
+ * it now would reflow every filter bar in every consuming app. So it is NAMED instead — `filterbar`
+ * in tokens/breakpoints.mjs, `--fdy-filterbar-stacked` in the media sheet — because an app rule
+ * that must fire with the stack (releasing a --w-grow field's max-width, say) has to match this
+ * exact condition, and aligning it to sm from the docs alone leaves 600–640px half-stacked: the
+ * fields are already full width while the app still caps the growing one. Raised from
+ * IDU_AI_DOC_SAPB1_CLIENT and IDU_AI_DOC_SAAS (#058 §1). */
 @media (max-width:640px){
   .fdy-filterbar>.fdy-field,.fdy-filterbar>.fdy-field--w-sm,.fdy-filterbar>.fdy-field--w-lg,.fdy-filterbar>.fdy-field--w-xl,.fdy-filterbar>.fdy-field--w-2xl,.fdy-filterbar>.fdy-field--w-grow{width:100%;flex:1 1 100%;}
   .fdy-filterbar__actions{width:100%;margin-left:0;}
@@ -2345,6 +2413,12 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-switch input::before{content:"";position:absolute;top:2px;left:2px;width:calc(var(--control-switch-h) - 4px);height:calc(var(--control-switch-h) - 4px);border-radius:50%;background:var(--color-switch-thumb);box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease-spring);}
 .fdy-switch input:checked{background:var(--color-primary);}
 .fdy-switch input:checked::before{transform:translateX(calc(var(--control-switch-w) - var(--control-switch-h)));}
+/* State hint (#068): one line saying what the CURRENT state means, never "on means X, off means Y",
+   which leaves the reader to work out which half applies. The control's aria-describedby points at
+   the .fdy-help WRAPPING both lines: a hidden child of a referenced node is skipped, so a screen
+   reader hears only the line on screen. Point it at the two children and both are read. */
+.fdy-field:has(:is(.fdy-switch,.fdy-check) input:checked) [data-fdy-when="off"],
+.fdy-field:not(:has(:is(.fdy-switch,.fdy-check) input:checked)) [data-fdy-when="on"]{display:none;}
 
 /* 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);}
@@ -2396,6 +2470,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-state__text{font-size:var(--text-sm);color:var(--color-text-muted);max-width:24rem;line-height:var(--leading-normal);}
 .fdy-state__actions{margin-top:var(--space-2);display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;}
 .fdy-state--danger .fdy-state__icon{color:var(--color-danger-strong);}
+/* Compact (#069): the same state inside a small card, one line of icon and text instead of a
+   page-sized block. Danger matters most here: a widget that renders zero for a failed request
+   reads as "nothing to do", the opposite of what happened. */
+.fdy-state--compact{flex-direction:row;align-items:flex-start;text-align:left;gap:var(--space-2);padding:var(--space-2) 0;}
+.fdy-state--compact .fdy-state__icon{width:1rem;height:1rem;flex:none;}
+.fdy-state--compact .fdy-state__text{font-size:var(--text-xs);max-width:none;}
+.fdy-state--compact .fdy-state__actions{margin:0 0 0 auto;}
 
 /* Freeday. Stepper / Wizard (progress header + optional panels).
  * Enhanced by freeday-stepper.js for prev/next navigation. */
@@ -2452,8 +2533,17 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    itself, for the same reason: hover paints the full step, so the two must not be the same colour.
    Exposed as a Tier-3 token through the var() FALLBACK, never as a declaration — a custom property
    set here would outrank a host's own :root override. */
-.fdy-table--striped tbody tr:nth-child(even){background:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));}
-.fdy-table tbody tr:hover{background:var(--color-surface-2);}
+/* The resting colour is also published as --_fdy-row-rest, so a row that must not answer the
+   pointer can hover back to exactly what it was (see --hover-actionable). */
+.fdy-table--striped tbody tr:nth-child(even){--_fdy-row-rest:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));background:var(--_fdy-row-rest);}
+.fdy-table tbody tr:hover{background:var(--_fdy-row-hover,var(--color-surface-2));}
+/* Opt-in (#064): only a row that DOES something answers the pointer. A tint on a row with no click
+   handler promises a target that is not there: people click the row, nothing happens, and the
+   button they had to aim at was elsewhere in it. Striping, not hover, is what keeps the eye on a
+   line. The inert row's hover resolves to its own resting colour, so a stripe survives it; a frozen
+   cell falls back to its opaque surface, because it scrolls over its neighbours. */
+.fdy-table--hover-actionable tbody tr:not(.fdy-table__row--activatable){--_fdy-row-hover:var(--_fdy-row-rest,transparent);}
+.fdy-table--hover-actionable tbody tr:not(.fdy-table__row--activatable) td.fdy-table__freeze{--_fdy-row-hover:var(--_fdy-row-rest,var(--color-surface));}
 /* 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;}
@@ -2462,8 +2552,8 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
 /* Loading / empty state cell (FdyTable spans it across all columns). */
 .fdy-table__state{text-align:center;color:var(--color-text-muted);padding:var(--space-6) var(--space-4);}
-/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint already
-   comes from the base `.fdy-table tbody tr:hover` rule, so this only adds the affordance + focus. */
+/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint comes from
+   the base `.fdy-table tbody tr:hover` rule, which --hover-actionable keeps for these rows only. */
 .fdy-table__row--activatable{cursor:pointer;}
 .fdy-table__row--activatable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
 /* Expandable detail row (FdyTable row-detail slot): a muted panel under its row, no hover tint. */
@@ -2523,7 +2613,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    (0,4,3) and beat the hover rule below. At (0,3,3) it ties, and the later rule wins, so a hovered
    row still bands unbroken across the freeze line. */
 .fdy-table--striped tbody tr:nth-child(even) td.fdy-table__freeze{background:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));}
-.fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
+.fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--_fdy-row-hover,var(--color-surface-2));}
 /* A frozen header cell is stuck on both axes wherever the head is frozen too, so
    it has to outrank both. */
 .fdy-table--sticky thead .fdy-table__freeze{z-index:3;}

package/dist/freeday.css

@@ -273,6 +273,8 @@ a { color: var(--color-primary); }
 .fdy-avatar--xs{width:1.5rem;height:1.5rem;font-size:var(--text-xs);}
 .fdy-avatar--sm{width:2rem;height:2rem;font-size:var(--text-xs);}
 .fdy-avatar--lg{width:3.5rem;height:3.5rem;font-size:var(--text-lg);}
+/* Square: a mark that is not a person (a company logo, a card's icon chip, #070). */
+.fdy-avatar--square{border-radius:var(--radius-md);}
 .fdy-avatar-group{display:inline-flex;}
 .fdy-avatar-group .fdy-avatar{border:2px solid var(--color-surface);margin-left:calc(var(--space-2)*-1);}
 .fdy-avatar-group .fdy-avatar:first-child{margin-left:0;}
@@ -412,8 +414,14 @@ a { color: var(--color-primary); }
 
 /* Freeday. Responsive display utilities (pairs with freeday-breakpoint.js).
  * Breakpoint scale (min-width, px): sm 600 · md 960 · lg 1280 · xl 1920.
+ * Two further widths exist and are NOT ramp steps: `nav` (app-shell.css, off-canvas drawer vs
+ * static sidebar) and `filterbar` (filterbar.css, the width its fields stack at). Both are named
+ * in tokens/breakpoints.mjs; a rule that has to fire with one of them aligns to it, not to the
+ * nearest ramp step, which is a band of broken widths in both directions.
  * NOTE: media-query breakpoints must be literal. CSS can't read custom properties
- * inside @media, so these px are structural, not stray magic numbers. */
+ * inside @media, so these px are structural, not stray magic numbers. An app that runs PostCSS
+ * need not retype them: `@cahyo-dimas/freeday/media` declares every width above as a
+ * @custom-media, so it can write `@media (--fdy-below-sm)` and never drift (#058 §2). */
 .fdy-hidden{display:none !important;}
 
 /* hide-below-X, hidden when the viewport is narrower than X (content shows at X and up) */
@@ -603,6 +611,13 @@ a { color: var(--color-primary); }
    absolutely positioned dismiss button back into the flow. Do not merge these two rules. */
 :where(:is(.fdy-card,.fdy-list__row):has(.fdy-btn--stretch) :is(a[href],button,input,select,textarea,[tabindex]):not(.fdy-btn--stretch)){position:relative;}
 .fdy-card__body{padding:var(--space-5);}
+/* Header band (#070): an identity mark, the title, and the card's way out pinned right. Beside the
+   title the action sits in one place on every card; under the content it moved each time the
+   content grew. Outside __body's padding, so its rule spans the card edge to edge. The mark is an
+   .fdy-avatar (--sm --square --tone-N), so its tints are the ones the contrast gate already covers. */
+.fdy-card__head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
+.fdy-card__head .fdy-card__title{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-card__action{flex:none;display:inline-flex;align-items:center;gap:var(--space-2);}
 .fdy-card__title{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 0 var(--space-1);}
 .fdy-card__desc{font-size:var(--text-sm);color:var(--color-text-muted);margin:0;line-height:var(--leading-normal);}
 .fdy-card__footer{padding:var(--space-3) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:linear-gradient(180deg,var(--color-surface),var(--color-surface-2));display:flex;gap:var(--space-2);justify-content:flex-end;}
@@ -985,6 +1000,42 @@ a { color: var(--color-primary); }
 .fdy-text-success{color:var(--color-success-strong);}
 .fdy-text-warning{color:var(--color-warning-strong);}
 .fdy-text-danger{color:var(--color-danger-strong);}
+/* Document columns (#065): a form or record page with an optional identity rail on the left
+ * (__lead) and a summary rail on the right (__aside). The widths follow which rails are PRESENT,
+ * so the layout is decided once here and not again by every screen:
+ *   __main alone            one column
+ *   __main + __aside        8 / 4         (from md)
+ *   __lead + __main         3 / 9         (from md)
+ *   all three               3 / 6 / 3     (from lg; between md and lg both rails share the left)
+ * Stacked, the summary rail comes FIRST: last, it sits under every section, and its button with it.
+ * From md each rail is sticky and scrolls on its own, so the total and the status stay answerable
+ * while the main column scrolls with the page, and a rail taller than the screen never hangs its
+ * end off it. Screen only: a printed page is not held to a window. */
+.fdy-page__columns{--_fdy-rail-top:var(--fdy-page-sticky-top,var(--space-4));display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);align-items:start;}
+/* Under the shell the sticky topbar is in the way; --fdy-page-sticky-top overrides either default. */
+.fdy-app .fdy-page__columns{--_fdy-rail-top:var(--fdy-page-sticky-top,calc(var(--space-16) + var(--space-4)));}
+.fdy-page__columns > *{min-width:0;}
+@media (max-width:959.98px){.fdy-page__aside{order:-1;}}
+@media (min-width:960px){
+  .fdy-page__columns:has(> .fdy-page__aside){grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
+  .fdy-page__columns:has(> .fdy-page__lead){grid-template-columns:minmax(0,1fr) minmax(0,3fr);}
+  /* Both rails, two columns: they stack on the left while __main spans both rows on the right. */
+  .fdy-page__columns:has(> .fdy-page__lead):has(> .fdy-page__aside) > .fdy-page__main{grid-row:span 2;}
+}
+@media (min-width:1280px){
+  .fdy-page__columns:has(> .fdy-page__lead):has(> .fdy-page__aside){grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);}
+  .fdy-page__columns:has(> .fdy-page__lead):has(> .fdy-page__aside) > .fdy-page__main{grid-row:auto;}
+}
+/* The padding, taken back by the margin, is room for a focus ring at a card's edge: a scrolling box
+   clips whatever draws outside it. */
+@media screen and (min-width:960px){
+  .fdy-page__lead,.fdy-page__aside{position:sticky;top:var(--_fdy-rail-top);max-height:calc(100dvh - var(--_fdy-rail-top) - var(--space-4));overflow-y:auto;overscroll-behavior:contain;padding:var(--space-1);margin:calc(var(--space-1) * -1);}
+}
+/* Two sticky rails in ONE column would slide over each other: between md and lg, with both rails
+   present, they scroll with the page instead. */
+@media screen and (min-width:960px) and (max-width:1279.98px){
+  .fdy-page__columns:has(> .fdy-page__lead):has(> .fdy-page__aside) > :is(.fdy-page__lead,.fdy-page__aside){position:static;max-height:none;overflow:visible;}
+}
 
 /* Freeday. Date picker (input-styled trigger + calendar popover).
  * Built by freeday-datepicker.js from an empty [data-fdy-datepicker] wrapper. */
@@ -1080,9 +1131,19 @@ a { color: var(--color-primary); }
 /* 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);}
+/* overflow-wrap: an email, an order code or a 13-digit phone number is one unbreakable token, and
+   without it the value prints over whatever sits beside it (#066). */
+.fdy-dl dd{margin:0;min-width:0;color:var(--color-text);font-size:var(--text-sm);font-weight:var(--weight-medium);overflow-wrap:anywhere;}
 .fdy-dl--rows{grid-template-columns:1fr;gap:var(--space-1);}
 .fdy-dl--rows dt{margin-top:var(--space-2);}
+/* Facts grid (#066): each pair a <div> (allowed inside <dl>), caption above value, as many columns
+   as the list's OWN width holds, never more than three. Sized by the element rather than the
+   window, so a grid in a narrow side rail stays one column with no modifier: a window breakpoint
+   gave a rail two columns of about 110px. min(100%, …) keeps a single column from overflowing a
+   rail narrower than the column floor. */
+.fdy-dl--grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,max(var(--fdy-dl-col-min,14rem),calc((100% - 2 * var(--space-6)) / 3))),1fr));gap:var(--space-5) var(--space-6);}
+.fdy-dl--grid > div{min-width:0;}
+.fdy-dl--grid dd{margin-top:var(--space-1);}
 
 /* Freeday. Divider */
 .fdy-divider{border:0;border-top:var(--bw) solid var(--color-border);margin:var(--space-4) 0;}
@@ -1199,7 +1260,14 @@ a { color: var(--color-primary); }
 /* 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. */
+/* Stack on narrow screens so nothing overflows the row.
+ * 640 is deliberately not a ramp step (sm is 600): it is a real phone-landscape width, and moving
+ * it now would reflow every filter bar in every consuming app. So it is NAMED instead — `filterbar`
+ * in tokens/breakpoints.mjs, `--fdy-filterbar-stacked` in the media sheet — because an app rule
+ * that must fire with the stack (releasing a --w-grow field's max-width, say) has to match this
+ * exact condition, and aligning it to sm from the docs alone leaves 600–640px half-stacked: the
+ * fields are already full width while the app still caps the growing one. Raised from
+ * IDU_AI_DOC_SAPB1_CLIENT and IDU_AI_DOC_SAAS (#058 §1). */
 @media (max-width:640px){
   .fdy-filterbar>.fdy-field,.fdy-filterbar>.fdy-field--w-sm,.fdy-filterbar>.fdy-field--w-lg,.fdy-filterbar>.fdy-field--w-xl,.fdy-filterbar>.fdy-field--w-2xl,.fdy-filterbar>.fdy-field--w-grow{width:100%;flex:1 1 100%;}
   .fdy-filterbar__actions{width:100%;margin-left:0;}
@@ -1467,6 +1535,12 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-switch input::before{content:"";position:absolute;top:2px;left:2px;width:calc(var(--control-switch-h) - 4px);height:calc(var(--control-switch-h) - 4px);border-radius:50%;background:var(--color-switch-thumb);box-shadow:var(--shadow-1);transition:transform var(--dur-base) var(--ease-spring);}
 .fdy-switch input:checked{background:var(--color-primary);}
 .fdy-switch input:checked::before{transform:translateX(calc(var(--control-switch-w) - var(--control-switch-h)));}
+/* State hint (#068): one line saying what the CURRENT state means, never "on means X, off means Y",
+   which leaves the reader to work out which half applies. The control's aria-describedby points at
+   the .fdy-help WRAPPING both lines: a hidden child of a referenced node is skipped, so a screen
+   reader hears only the line on screen. Point it at the two children and both are read. */
+.fdy-field:has(:is(.fdy-switch,.fdy-check) input:checked) [data-fdy-when="off"],
+.fdy-field:not(:has(:is(.fdy-switch,.fdy-check) input:checked)) [data-fdy-when="on"]{display:none;}
 
 /* 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);}
@@ -1518,6 +1592,13 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-state__text{font-size:var(--text-sm);color:var(--color-text-muted);max-width:24rem;line-height:var(--leading-normal);}
 .fdy-state__actions{margin-top:var(--space-2);display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;}
 .fdy-state--danger .fdy-state__icon{color:var(--color-danger-strong);}
+/* Compact (#069): the same state inside a small card, one line of icon and text instead of a
+   page-sized block. Danger matters most here: a widget that renders zero for a failed request
+   reads as "nothing to do", the opposite of what happened. */
+.fdy-state--compact{flex-direction:row;align-items:flex-start;text-align:left;gap:var(--space-2);padding:var(--space-2) 0;}
+.fdy-state--compact .fdy-state__icon{width:1rem;height:1rem;flex:none;}
+.fdy-state--compact .fdy-state__text{font-size:var(--text-xs);max-width:none;}
+.fdy-state--compact .fdy-state__actions{margin:0 0 0 auto;}
 
 /* Freeday. Stepper / Wizard (progress header + optional panels).
  * Enhanced by freeday-stepper.js for prev/next navigation. */
@@ -1574,8 +1655,17 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    itself, for the same reason: hover paints the full step, so the two must not be the same colour.
    Exposed as a Tier-3 token through the var() FALLBACK, never as a declaration — a custom property
    set here would outrank a host's own :root override. */
-.fdy-table--striped tbody tr:nth-child(even){background:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));}
-.fdy-table tbody tr:hover{background:var(--color-surface-2);}
+/* The resting colour is also published as --_fdy-row-rest, so a row that must not answer the
+   pointer can hover back to exactly what it was (see --hover-actionable). */
+.fdy-table--striped tbody tr:nth-child(even){--_fdy-row-rest:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));background:var(--_fdy-row-rest);}
+.fdy-table tbody tr:hover{background:var(--_fdy-row-hover,var(--color-surface-2));}
+/* Opt-in (#064): only a row that DOES something answers the pointer. A tint on a row with no click
+   handler promises a target that is not there: people click the row, nothing happens, and the
+   button they had to aim at was elsewhere in it. Striping, not hover, is what keeps the eye on a
+   line. The inert row's hover resolves to its own resting colour, so a stripe survives it; a frozen
+   cell falls back to its opaque surface, because it scrolls over its neighbours. */
+.fdy-table--hover-actionable tbody tr:not(.fdy-table__row--activatable){--_fdy-row-hover:var(--_fdy-row-rest,transparent);}
+.fdy-table--hover-actionable tbody tr:not(.fdy-table__row--activatable) td.fdy-table__freeze{--_fdy-row-hover:var(--_fdy-row-rest,var(--color-surface));}
 /* 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;}
@@ -1584,8 +1674,8 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
 /* Loading / empty state cell (FdyTable spans it across all columns). */
 .fdy-table__state{text-align:center;color:var(--color-text-muted);padding:var(--space-6) var(--space-4);}
-/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint already
-   comes from the base `.fdy-table tbody tr:hover` rule, so this only adds the affordance + focus. */
+/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint comes from
+   the base `.fdy-table tbody tr:hover` rule, which --hover-actionable keeps for these rows only. */
 .fdy-table__row--activatable{cursor:pointer;}
 .fdy-table__row--activatable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
 /* Expandable detail row (FdyTable row-detail slot): a muted panel under its row, no hover tint. */
@@ -1645,7 +1735,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    (0,4,3) and beat the hover rule below. At (0,3,3) it ties, and the later rule wins, so a hovered
    row still bands unbroken across the freeze line. */
 .fdy-table--striped tbody tr:nth-child(even) td.fdy-table__freeze{background:var(--fdy-table-stripe,color-mix(in srgb,var(--color-surface-2) 55%,var(--color-surface)));}
-.fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--color-surface-2);}
+.fdy-table--sticky tbody tr:hover td.fdy-table__freeze{background:var(--_fdy-row-hover,var(--color-surface-2));}
 /* A frozen header cell is stuck on both axes wherever the head is frozen too, so
    it has to outrank both. */
 .fdy-table--sticky thead .fdy-table__freeze{z-index:3;}

package/dist/freeday.d.ts

@@ -1,6 +1,6 @@
 // Type surface for the root side-effect import `@cahyo-dimas/freeday`, which loads every
-// enhancer and registers the `window.Freeday` global. Authored from src/freeday-toast.js
-// Keep it in sync with that file. (The per-component window.Freeday<Name> enhancer namespaces are
+// enhancer and registers the `window.Freeday` global. Authored from src/freeday-toast.js and
+// src/freeday-confirm.js. Keep it in sync with those files. (The per-component window.Freeday<Name> enhancer namespaces are
 // intentionally not typed here; no consumer reconstructs those.)
 
 export interface FreedayToastOptions {
@@ -15,11 +15,26 @@ export interface FreedayToastOptions {
   key?: string;
 }
 
+export interface FreedayConfirmOptions {
+  title?: string;
+  message?: string;
+  /** Findings shown as a list under the message. */
+  details?: string[];
+  /** Accept label. Default 'Confirm'; name the action instead ('Delete order'). */
+  acceptText?: string;
+  /** Reject label. Default 'Cancel'. */
+  rejectText?: string;
+  /** The accept button's variant. Default 'primary'. */
+  tone?: 'primary' | 'danger';
+}
+
 export interface FreedayGlobal {
   /** Show a transient toast in a live region (created on first use). Returns the toast element. */
   toast(opts?: FreedayToastOptions): HTMLElement;
   /** Dismiss a toast early: pass the element returned by toast(), or a key string. */
   dismiss(target: HTMLElement | string): void;
+  /** Ask a yes/no question in a modal. true on accept; false on reject, Escape or a backdrop click. */
+  confirm(opts?: FreedayConfirmOptions): Promise<boolean>;
 }
 
 declare global {