@cahyo-dimas/freeday 3.4.0 → 3.6.0

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs. The UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v3.4.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.4.0)
+[![Release](https://img.shields.io/badge/release-v3.6.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.6.0)
 
 A token-driven, framework-agnostic UI kit. One source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.
@@ -61,7 +61,7 @@ npm i @cahyo-dimas/freeday
 ```js
 import '@cahyo-dimas/freeday/css';   // tokens + components (single file)
 import '@cahyo-dimas/freeday';       // all JS enhancers (auto-init [data-fdy-*])
-// granular if needed: '@cahyo-dimas/freeday/tokens' · '@cahyo-dimas/freeday/css/components' · '@cahyo-dimas/freeday/enhancers/<name>'
+// granular if needed: '@cahyo-dimas/freeday/tokens' · '@cahyo-dimas/freeday/css/components' · '@cahyo-dimas/freeday/enhancers/<name>' · '@cahyo-dimas/freeday/media' (@custom-media breakpoints)
 ```
 Set the theme on your app root: `<html data-theme="light" data-density="comfortable">`. `dist/` is
 committed and published, so install needs **no build step**; minification is left to the consumer's
@@ -154,9 +154,13 @@ of scrolling.
   to shrink or grow when `data-density` changes.
 - (roadmap) `data-style` for alternative visual variants.
 - The breakpoint scale (`sm`/`md`/`lg`/`xl` = 600/960/1280/1920px, matching the
-  `src/components/breakpoints.css` utilities) is also available in JS: `import { breakpoints } from
-  '@cahyo-dimas/freeday/breakpoints'`. Use it to keep your app's `matchMedia`/`@media` on the same
-  scale as Freeday's.
+  `src/components/breakpoints.css` utilities) is available to your app in both languages: `import
+  { breakpoints } from '@cahyo-dimas/freeday/breakpoints'` for JS (`matchMedia`, utility variants),
+  and `@import '@cahyo-dimas/freeday/media'` for CSS, which declares each one as a `@custom-media`
+  so a rule reads `@media (--fdy-below-sm)` instead of a retyped literal (needs PostCSS; opt-in).
+  The object also carries the two widths that are **not** ramp steps and must not be rounded to one:
+  `nav` (721, the shell's drawer↔sidebar switch) and `filterbar` (640, where `.fdy-filterbar`
+  stacks). See [`COMPONENTS.md`](COMPONENTS.md) for what each governs.
 
 ## Framework integration (SPA)
 > **Full library map:** [`docs/integrations.md`](docs/integrations.md). Each area (forms/validation,

package/adapters/blazor/FdyDateRange.razor.cs

@@ -13,6 +13,9 @@ public partial class FdyDateRange
     [Parameter] public string? To { get; set; }
     [Parameter] public EventCallback<string?> ToChanged { get; set; }
 
+    /// <summary>Both ends chosen, or both cleared: the only states worth reloading a list for (#063).</summary>
+    [Parameter] public EventCallback<SettledRange> Settled { get; set; }
+
     [Parameter] public string? AriaLabel { get; set; }
     [Parameter] public string? FromPlaceholder { get; set; }
     [Parameter] public string? ToPlaceholder { get; set; }
@@ -44,6 +47,10 @@ public partial class FdyDateRange
             To = detail.Value;
             await ToChanged.InvokeAsync(detail.Value);
         }
+        if (string.IsNullOrEmpty(From) == string.IsNullOrEmpty(To))
+        {
+            await Settled.InvokeAsync(new SettledRange(From, To));
+        }
     }
 
     protected override async ValueTask CleanupAsync()
@@ -55,4 +62,7 @@ public partial class FdyDateRange
     }
 
     public sealed record RangeDetail(string? Value, string? Role);
+
+    /// <summary>The range as it stands when it settles; both empty means "no period".</summary>
+    public sealed record SettledRange(string? From, string? To);
 }

package/adapters/blazor/FdyTable.razor

@@ -30,7 +30,7 @@
     }
 
     <div class="fdy-table-scroll">
-        <table class="fdy-table @(Striped ? "fdy-table--striped" : null)" aria-label="@AriaLabel">
+        <table class="fdy-table @(Striped ? "fdy-table--striped" : null) @(HoverActionable ? "fdy-table--hover-actionable" : null)" aria-label="@AriaLabel">
             <thead>
                 <tr>
                     @if (Selectable)
@@ -77,7 +77,11 @@
                 {
                     <tr>
                         <td colspan="@ColSpan" class="fdy-table__state">
-                            @if (EmptyContent is not null)
+                            @if (EmptyTemplate is not null)
+                            {
+                                @EmptyTemplate(new FdyTableEmptyContext(Filtered, ClearFiltersAsync))
+                            }
+                            else if (EmptyContent is not null)
                             {
                                 @EmptyContent
                             }

package/adapters/blazor/FdyTable.razor.cs

@@ -71,6 +71,9 @@ public partial class FdyTable<TRow>
     [Parameter] public string LoadingText { get; set; } = "Loading…";
     [Parameter] public string EmptyText { get; set; } = "No data";
     [Parameter] public RenderFragment? EmptyContent { get; set; }
+    /// <summary>The empty state, told whether the column filters emptied the table and how to clear
+    /// them (#069). Wins over <see cref="EmptyContent"/> when both are set.</summary>
+    [Parameter] public RenderFragment<FdyTableEmptyContext>? EmptyTemplate { get; set; }
     [Parameter] public string? AriaLabel { get; set; }
 
     /// <summary>Opt in to row activation: rows become focusable and raise <see cref="RowActivate"/>.</summary>
@@ -90,6 +93,9 @@ public partial class FdyTable<TRow>
     /// <summary>Zebra-stripe the body rows.</summary>
     [Parameter] public bool Striped { get; set; }
 
+    /// <summary>Hover only the rows that do something (<c>RowActivatable</c>); inert rows keep their colour.</summary>
+    [Parameter] public bool HoverActionable { get; set; }
+
     /// <summary>Render the checkbox column and the bulk bar.</summary>
     [Parameter] public bool Selectable { get; set; }
 
@@ -234,6 +240,21 @@ public partial class FdyTable<TRow>
         }
     }
 
+    private bool Filtered => EffectiveFilters.Values.Any(TableModel.IsFilterActive);
+
+    private async Task ClearFiltersAsync()
+    {
+        if (FiltersControlled)
+        {
+            await FiltersChanged.InvokeAsync(new Dictionary<string, FdyColumnFilter>());
+        }
+        else
+        {
+            _internalFilters = new();
+            await SetClientPageAsync(0);
+        }
+    }
+
     private async Task OnFilterChange(FdyTableColumn<TRow> col, FdyColumnFilter? filter)
     {
         Dictionary<string, FdyColumnFilter> next = new(EffectiveFilters);

package/adapters/blazor/TableTypes.cs

@@ -21,6 +21,10 @@ public sealed record FdySortState(string Key, FdySortDir Dir);
 /// <see cref="FdyTable{TRow}.Page"/> switches the table into server mode.</summary>
 public sealed record FdyPageState(int Index, int Size, int Total);
 
+/// <summary>What <c>EmptyTemplate</c> is told (#069): whether an active column filter emptied the
+/// table, and how to clear every filter.</summary>
+public sealed record FdyTableEmptyContext(bool Filtered, Func<Task> ClearFilters);
+
 /// <summary>The processed page of rows (after filter/sort/paginate) plus the total row count, as
 /// raised by <see cref="FdyTable{TRow}.Process"/>. Lets a consumer render the same processed set
 /// somewhere else, a card list below the <c>md</c> breakpoint, a summary, an export, without

package/adapters/react/components/FdyDateRange.tsx

@@ -15,6 +15,8 @@ export interface DateRangeValue {
 export interface FdyDateRangeProps {
   value: DateRangeValue;
   onChange: (value: DateRangeValue) => void;
+  /** Both ends chosen, or both cleared: the only states worth reloading a list for (#063). */
+  onSettled?: (value: DateRangeValue) => void;
   min?: string;
   max?: string;
   locale?: string;
@@ -30,8 +32,12 @@ export interface FdyDateRangeProps {
 }
 
 export function FdyDateRange(props: FdyDateRangeProps): JSX.Element {
-  const onStart = (start: string): void => props.onChange({ start, end: props.value.end });
-  const onEnd = (end: string): void => props.onChange({ start: props.value.start, end });
+  const commit = (next: DateRangeValue): void => {
+    props.onChange(next);
+    if (!next.start === !next.end) props.onSettled?.(next);
+  };
+  const onStart = (start: string): void => commit({ start, end: props.value.end });
+  const onEnd = (end: string): void => commit({ start: props.value.start, end });
 
   return (
     <div

package/adapters/react/components/FdyTable.tsx

@@ -5,6 +5,7 @@ import {
   cellText,
   distinctValues,
   filterRows,
+  isFilterActive,
   sortRows,
   paginate,
 } from '../../core/table-model.js';
@@ -29,6 +30,14 @@ import { FdyTableFooter } from './FdyTableFooter';
 //     `onSortChange` / `onFiltersChange` / `onPageChange` for the caller to feed back into its query.
 // Column filters (text/enum/number/date) apply live; in server mode, debounce the callback if needed.
 
+/** What the `empty` render function is told (#069). */
+export interface FdyTableEmptyContext {
+  /** An active column filter is what emptied the table. */
+  filtered: boolean;
+  /** Clears every column filter, through `onFiltersChange` when the filters are controlled. */
+  clearFilters: () => void;
+}
+
 export interface FdyTableProps<Row extends object> {
   columns: ReadonlyArray<FdyTableColumn<Row>>;
   rows: ReadonlyArray<Row>;
@@ -79,7 +88,9 @@ export interface FdyTableProps<Row extends object> {
   /** Custom cell renderer; return undefined for a column to use the default text. */
   renderCell?: (column: FdyTableColumn<Row>, row: Row, value: unknown) => ReactNode;
   toolbar?: ReactNode;
-  empty?: ReactNode;
+  /** The empty state. As a function it is told whether the column filters are what emptied the
+   *  table, and how to clear them: "no match" wants a Clear button, "nothing yet" a Create one. */
+  empty?: ReactNode | ((ctx: FdyTableEmptyContext) => ReactNode);
   /** Opt in to row activation: rows become focusable and call `onRowActivate` on click/Enter/Space. */
   rowActivatable?: boolean;
   /** Per-row class hook, e.g. to mark a selected row. */
@@ -96,6 +107,8 @@ export interface FdyTableProps<Row extends object> {
   renderRowDetail?: (row: Row) => ReactNode;
   /** Zebra-stripe the body rows. */
   striped?: boolean;
+  /** Hover only the rows that do something (`rowActivatable`); inert rows keep their colour. */
+  hoverActionable?: boolean;
   /** Render the checkbox column and the bulk bar. */
   selectable?: boolean;
   /** Controlled selection, as `rowKey` values. Provide to own it; omit for internal (the column
@@ -213,6 +226,14 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
       setClientPage(0);
     }
   }
+  const filtered: boolean = Object.values(effectiveFilters).some((f: FdyColumnFilter): boolean => isFilterActive(f));
+  function clearFilters(): void {
+    if (filtersControlled) props.onFiltersChange?.({});
+    else {
+      setInternalFilters({});
+      setClientPage(0);
+    }
+  }
   function onFilterChange(col: FdyTableColumn<Row>, filter: FdyColumnFilter | null): void {
     const nextMap: FdyFilterMap = { ...effectiveFilters };
     if (filter === null) delete nextMap[col.key];
@@ -352,7 +373,7 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
 
       <div className="fdy-table-scroll">
         <table
-          className={props.striped === true ? 'fdy-table fdy-table--striped' : 'fdy-table'}
+          className={['fdy-table', props.striped === true ? 'fdy-table--striped' : '', props.hoverActionable === true ? 'fdy-table--hover-actionable' : ''].filter(Boolean).join(' ')}
           aria-label={props.ariaLabel}
         >
           <thead>
@@ -402,7 +423,7 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
               </tr>
             ) : displayRows.length === 0 ? (
               <tr>
-                <td colSpan={colCount} className="fdy-table__state">{props.empty ?? props.emptyText ?? 'No data'}</td>
+                <td colSpan={colCount} className="fdy-table__state">{typeof props.empty === 'function' ? props.empty({ filtered, clearFilters }) : (props.empty ?? props.emptyText ?? 'No data')}</td>
               </tr>
             ) : (
               displayRows.map((row: Row): JSX.Element => (

package/adapters/react/index.d.ts

@@ -38,7 +38,7 @@ export { FdyCfl, type FdyCflProps, type FdyCflHandle, type CflColumn, type CflPa
  *  on the array only a `multiple` field emits. */
 export { singleRow } from '../core/cfl-value';
 export { FdyChart, type FdyChartProps, type FdyChartSeries } from './components/FdyChart';
-export { FdyTable, type FdyTableProps } from './components/FdyTable';
+export { FdyTable, type FdyTableProps, type FdyTableEmptyContext } from './components/FdyTable';
 /** The table's own footer, standalone, for a responsive list whose table is hidden at some
  *  breakpoints and so cannot host it. */
 export { FdyTableFooter, type FdyTableFooterProps } from './components/FdyTableFooter';

package/adapters/vue/components/FdyDateRange.vue

@@ -34,20 +34,26 @@ const props = defineProps<{
 const emit = defineEmits<{
   'update:modelValue': [value: DateRangeValue];
   change: [value: DateRangeValue];
+  /** Both ends chosen, or both cleared: the only states worth reloading a list for (#063). */
+  settled: [value: DateRangeValue];
 }>();
 
 const startMax: ComputedRef<string | undefined> = computed((): string | undefined => props.modelValue.end ?? props.max);
 const endMin: ComputedRef<string | undefined> = computed((): string | undefined => props.modelValue.start ?? props.min);
 
-function setStart(start: string): void {
-  const next: DateRangeValue = { start, end: props.modelValue.end };
+function isSettled(range: DateRangeValue): boolean {
+  return !range.start === !range.end;
+}
+function commit(next: DateRangeValue): void {
   emit('update:modelValue', next);
   emit('change', next);
+  if (isSettled(next)) emit('settled', next);
+}
+function setStart(start: string): void {
+  commit({ start, end: props.modelValue.end });
 }
 function setEnd(end: string): void {
-  const next: DateRangeValue = { start: props.modelValue.start, end };
-  emit('update:modelValue', next);
-  emit('change', next);
+  commit({ start: props.modelValue.start, end });
 }
 </script>
 

package/adapters/vue/components/FdyTable.vue

@@ -5,6 +5,7 @@ import {
   cellText,
   distinctValues,
   filterRows,
+  isFilterActive,
   sortRows,
   paginate,
 } from '../../core/table-model.js';
@@ -78,6 +79,8 @@ const props = withDefaults(defineProps<{
   expandedKeys?: ReadonlyArray<string | number>;
   /** Zebra-stripe the body rows. */
   striped?: boolean;
+  /** Hover only the rows that do something (`rowActivatable`); inert rows keep their colour. */
+  hoverActionable?: boolean;
   /** Render the checkbox column and the bulk bar. */
   selectable?: boolean;
   /** Controlled selection, as `rowKey` values. Provide to own it; omit for internal (the column
@@ -222,6 +225,19 @@ function onSort(col: FdyTableColumn<Row>): void {
     setClientPage(0);
   }
 }
+/* "Nothing matches these filters" and "nothing here yet" are different news (#069): the first wants
+   a Clear button, the second a Create one. The table owns its column filters, so it is the one
+   that knows which it is; the `empty` slot receives both. */
+const filtered: ComputedRef<boolean> = computed((): boolean =>
+  Object.values(effectiveFilters.value).some((f: FdyColumnFilter): boolean => isFilterActive(f)),
+);
+function clearFilters(): void {
+  if (filtersControlled.value) emit('update:filters', {});
+  else {
+    internalFilters.value = {};
+    setClientPage(0);
+  }
+}
 function onFilterChange(col: FdyTableColumn<Row>, filter: FdyColumnFilter | null): void {
   const nextMap: FdyFilterMap = { ...effectiveFilters.value };
   if (filter === null) delete nextMap[col.key];
@@ -367,7 +383,7 @@ const colSpan: ComputedRef<number> = computed((): number =>
     </div>
 
     <div class="fdy-table-scroll">
-      <table class="fdy-table" :class="{ 'fdy-table--striped': striped }" :aria-label="ariaLabel">
+      <table class="fdy-table" :class="{ 'fdy-table--striped': striped, 'fdy-table--hover-actionable': hoverActionable }" :aria-label="ariaLabel">
         <thead>
           <tr>
             <th v-if="selectable" class="fdy-table__selcol" scope="col">
@@ -406,7 +422,7 @@ const colSpan: ComputedRef<number> = computed((): number =>
           </tr>
           <tr v-else-if="displayRows.length === 0">
             <td :colspan="colSpan" class="fdy-table__state">
-              <slot name="empty">{{ emptyText ?? 'No data' }}</slot>
+              <slot name="empty" :filtered="filtered" :clear-filters="clearFilters">{{ emptyText ?? 'No data' }}</slot>
             </td>
           </tr>
           <template v-else>

package/dist/freeday-confirm.js

@@ -0,0 +1,101 @@
+/* Freeday, confirm API (optional, zero-dependency). Note #060.
+ * Freeday.confirm({ title, message, details, acceptText, rejectText, tone }) opens a .fdy-modal
+ * and resolves a Promise<boolean>: true on accept; false on reject, Escape or a backdrop click.
+ *   details:  string[] shown as a list under the message, for a confirm that has to NAME its
+ *             findings ("these three fields will be refused") instead of folding them into one
+ *             long sentence
+ *   tone:     'primary' (default) | 'danger', the accept button's variant
+ *
+ * One dialog, one answer: every way out resolves the same Promise, and a Promise settles once, so
+ * a caller never hears "no" after "yes" (a framework dialog that reports reject and then hide, or
+ * hide after accept, does exactly that). Text is set with textContent, never parsed as HTML.
+ * Focus starts on the reject button: Enter on a dialog that just opened must not delete anything.
+ * The dialog is removed when it closes; the native <dialog> returns focus to where it was.
+ * Buttons carry data-fdy-confirm-accept / data-fdy-confirm-reject, stable hooks for tests, because
+ * an accept labelled "Delete" collides by accessible name with every row's own Delete button.
+ */
+(function () {
+  'use strict';
+
+  /* User-facing strings, English by default. Per call, acceptText / rejectText override them; a
+   * label that names the action ("Delete order") is better than either default. */
+  var TEXT = {
+    accept: 'Confirm',
+    reject: 'Cancel'
+  };
+
+  var seq = 0;
+
+  function el(tag, className, text) {
+    var node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text != null) node.textContent = text;
+    return node;
+  }
+
+  function confirm(opts) {
+    opts = opts || {};
+    return new Promise(function (resolve) {
+      seq += 1;
+      var titleId = 'fdy-confirm-title-' + seq;
+      var dialog = el('dialog', 'fdy-modal fdy-modal--sm');
+      dialog.setAttribute('aria-labelledby', titleId);
+      dialog.setAttribute('data-fdy-confirm', '');
+
+      var header = el('header', 'fdy-modal__header');
+      var title = el('h2', 'fdy-modal__title', opts.title || '');
+      title.id = titleId;
+      header.appendChild(title);
+
+      var body = el('div', 'fdy-modal__body');
+      if (opts.message) {
+        var message = el('p', null, opts.message);
+        message.id = titleId + '-desc';
+        dialog.setAttribute('aria-describedby', message.id);
+        body.appendChild(message);
+      }
+      var details = Array.isArray(opts.details) ? opts.details : [];
+      if (details.length > 0) {
+        var list = el('ul');
+        details.forEach(function (line) { list.appendChild(el('li', null, line)); });
+        body.appendChild(list);
+      }
+
+      var footer = el('footer', 'fdy-modal__footer');
+      var reject = el('button', 'fdy-btn fdy-btn--ghost', opts.rejectText || TEXT.reject);
+      reject.type = 'button';
+      reject.setAttribute('data-fdy-confirm-reject', '');
+      var accept = el('button', opts.tone === 'danger' ? 'fdy-btn fdy-btn--danger' : 'fdy-btn', opts.acceptText || TEXT.accept);
+      accept.type = 'button';
+      accept.setAttribute('data-fdy-confirm-accept', '');
+      footer.appendChild(reject);
+      footer.appendChild(accept);
+
+      dialog.appendChild(header);
+      dialog.appendChild(body);
+      dialog.appendChild(footer);
+
+      function settle(answer) {
+        resolve(answer);
+        if (dialog.open) dialog.close();
+      }
+
+      accept.addEventListener('click', function () { settle(true); });
+      reject.addEventListener('click', function () { settle(false); });
+      // Escape fires `cancel` then `close`; a backdrop click lands on the <dialog> itself, since its
+      // children fill the box edge to edge. Both mean "no".
+      dialog.addEventListener('close', function () {
+        settle(false);
+        if (dialog.parentNode) dialog.parentNode.removeChild(dialog);
+      });
+      dialog.addEventListener('click', function (e) { if (e.target === dialog) settle(false); });
+
+      document.body.appendChild(dialog);
+      dialog.showModal();
+      reject.focus();
+    });
+  }
+
+  window.Freeday = window.Freeday || {};
+  window.Freeday.confirm = confirm;
+})();

package/dist/freeday-copy.js

@@ -0,0 +1,58 @@
+/* Freeday, copy-to-clipboard enhancer (optional, zero-dependency). Note #062.
+ * A button carrying data-fdy-copy="<value>" copies that value and says so with a toast. For
+ * reference values a reader takes elsewhere: an external document number, an event ID.
+ *
+ *   <dd><span class="fdy-mono">INV-2026-00042</span>
+ *     <button type="button" class="fdy-btn fdy-btn--ghost fdy-btn--icon fdy-btn--sm"
+ *             data-fdy-copy="INV-2026-00042" aria-label="Copy invoice number">…svg…</button></dd>
+ *
+ * The value is the attribute, not a lookup of some neighbour's text: a framework writes it from
+ * the same variable as the visible text, and a row of a table needs no ids to find its own cell.
+ * One delegated listener on the document, so buttons rendered later need no hydration.
+ *
+ * The Clipboard API exists only in a secure context. Over plain http writeText is missing, and a
+ * copy that silently did nothing is the failure this refuses: the reader is told to copy by hand.
+ * Emits bubbling "fdy-copy" {value, ok} on the button. A click inside a clickable table row still
+ * reaches the row's own handler; stop it there if the row should not open. Exposes window.FreedayCopy.
+ */
+(function () {
+  'use strict';
+
+  /* User-facing strings, English by default and overridable per button with data-fdy-text-<key>,
+   * like every other enhancer's. */
+  var TEXT = {
+    copied: 'Copied.',
+    failed: 'Could not copy. Select the text and copy it manually.'
+  };
+  function textOf(el, key) {
+    var custom = el.getAttribute('data-fdy-text-' + key);
+    return custom != null && custom !== '' ? custom : TEXT[key];
+  }
+
+  function report(btn, value, ok) {
+    if (window.Freeday && typeof window.Freeday.toast === 'function') {
+      window.Freeday.toast(ok
+        ? { variant: 'success', message: textOf(btn, 'copied'), key: 'fdy-copy' }
+        : { variant: 'danger', message: textOf(btn, 'failed'), key: 'fdy-copy', timeout: 0 });
+    }
+    btn.dispatchEvent(new CustomEvent('fdy-copy', { bubbles: true, detail: { value: value, ok: ok } }));
+  }
+
+  function copy(btn) {
+    var value = btn.getAttribute('data-fdy-copy') || '';
+    if (value === '') return;
+    var clip = navigator.clipboard;
+    if (!clip || typeof clip.writeText !== 'function') { report(btn, value, false); return; }
+    clip.writeText(value).then(
+      function () { report(btn, value, true); },
+      function () { report(btn, value, false); }
+    );
+  }
+
+  document.addEventListener('click', function (e) {
+    var btn = e.target.closest && e.target.closest('[data-fdy-copy]');
+    if (btn && !btn.disabled) copy(btn);
+  });
+
+  window.FreedayCopy = { copy: copy };
+})();

package/dist/freeday-datepicker.js

@@ -603,15 +603,30 @@
       fromApi.setRange(f, t);     // start stays free, picking a later start clears the end below
       toApi.setRange(f, t);
     }
+    /* An end the new start overtook is cleared, and the clear is ANNOUNCED like a pick: a binding
+     * that only hears picks (Blazor's To) otherwise keeps the end the range no longer has. */
+    function clearEnd(el, api) {
+      api.clear();
+      el.dispatchEvent(new CustomEvent('fdy-datepicker-change', { bubbles: true, detail: { value: '' } }));
+    }
+    /* "Settled" = both ends chosen, or both empty: the only states worth a reload (#063). A pick of
+     * the first end, or a start that overtook the end, is half a range. */
+    function settle() {
+      var f = fromApi.getValue(), t = toApi.getValue();
+      if ((f === '') !== (t === '')) return;
+      root.dispatchEvent(new CustomEvent('fdy-daterange-settled', { bubbles: true, detail: { from: f, to: t } }));
+    }
     fromEl.addEventListener('fdy-datepicker-change', function () {
       var f = fromApi.getValue(), t = toApi.getValue();
-      if (f && t && t < f) toApi.clear();
+      if (f && t && t < f) clearEnd(toEl, toApi);
       sync();
+      settle();
     });
     toEl.addEventListener('fdy-datepicker-change', function () {
       var f = fromApi.getValue(), t = toApi.getValue();
-      if (f && t && t < f) fromApi.clear();
+      if (f && t && t < f) clearEnd(fromEl, fromApi);
       sync();
+      settle();
     });
     sync();
   }

package/dist/freeday-form.js

@@ -13,7 +13,7 @@
  *   data-fdy-msg-min | -max | -step | -mismatch, then generic data-fdy-msg.
  * Cross-field match (e.g. confirm password): data-fdy-match="#otherId".
  *
- * Timing: validates on submit (blocks + focuses the first invalid control); after
+ * Timing: validates on submit (blocks, reveals + focuses the first invalid control); after
  * the first submit attempt each field re-validates on input/blur so errors clear
  * live. Add data-fdy-eager to validate on blur from the start.
  *
@@ -126,6 +126,34 @@
     }
   }
 
+  /* focus() on a control that is not rendered does nothing and reports nothing: the field turns red
+   * where nobody can see it, and the submit reads as a dead button (#059). So whatever hides the
+   * control is undone first, each through that component's own control, so its state agrees with
+   * what is shown:
+   *   closed <details>        opened (accordion, tree, nav group)
+   *   hidden [role=tabpanel]  its tab is clicked; freeday-tabs selects on click
+   *   hidden .fdy-step-panel  its step button is clicked. A step not yet reached has a disabled
+   *                           button, so this only ever goes BACK and never skips a step guard.
+   * Anything else that hides it belongs to the app, and is left alone. */
+  function reveal(el) {
+    for (var node = el.parentElement; node; node = node.parentElement) {
+      if (node.localName === 'details' && !node.open) {
+        node.open = true;
+      } else if (node.hidden && node.getAttribute('role') === 'tabpanel' && node.id) {
+        var tab = Array.prototype.filter.call(document.querySelectorAll('[role="tab"]'), function (t) {
+          return t.getAttribute('aria-controls') === node.id;
+        })[0];
+        if (tab) tab.click();
+      } else if (node.hidden && node.classList.contains('fdy-step-panel')) {
+        var stepper = node.closest('[data-fdy-stepper]');
+        if (!stepper) continue;
+        var index = Array.prototype.indexOf.call(stepper.querySelectorAll('.fdy-step-panel'), node);
+        var btn = stepper.querySelectorAll('.fdy-step__btn')[index];
+        if (btn && !btn.disabled) btn.click();
+      }
+    }
+  }
+
   function initForm(form) {
     if (form.dataset.fdyFormReady === '1') return;
     form.dataset.fdyFormReady = '1';
@@ -160,6 +188,7 @@
       });
       if (invalid.length) {
         e.preventDefault();
+        reveal(invalid[0]);
         invalid[0].focus();
         form.dispatchEvent(new CustomEvent('fdy-form-invalid', { bubbles: true, detail: { invalid: invalid } }));
       } else {