@cahyo-dimas/freeday 3.8.0 → 3.9.0

package/dist/freeday-table.js

@@ -14,7 +14,10 @@
  *
  * Column filters: mark a header `<th data-fdy-filter="text|enum|number">` and a funnel
  * button is injected; text filters by contains, enum by a value checklist, number by a
- * min/max range. All active column filters AND the global search must pass (logical AND).
+ * min/max range. All active column filters AND the global search must pass (logical AND). The
+ * panel is anchored to its funnel by freeday-popover.js, as in every other enhancer with a
+ * dropdown, so load that file too (dist/freeday.js already has it); without it the panel still
+ * opens, at whatever position its stylesheet leaves it.
  *
  * Bulk actions: an optional `[data-fdy-table-bulk]` bar (hidden by default) with a
  * `[data-fdy-table-bulk-count]` label and a `[data-fdy-table-bulk-clear]` button shows
@@ -244,6 +247,8 @@
     function closePopover(returnFocus) {
       if (!openPopover) return;
       var btn = openPopover._trigger;
+      // Out of the top layer first, which also drops the reposition listeners attach() added.
+      if (openPopover._pop) openPopover._pop.hide();
       openPopover.remove();
       openPopover = null;
       window.removeEventListener('scroll', closeOnScroll, true);
@@ -365,11 +370,65 @@
       foot.appendChild(reset); foot.appendChild(done);
       pop.appendChild(foot);
 
-      document.body.appendChild(pop);
+      /* Positioned by freeday-popover.js, like every other enhancer with a dropdown. This used to
+       * be a fourth copy of that arithmetic, and the copies had drifted: it kept an 8px margin
+       * where the kit's gap is 4, measured against window.innerWidth (which counts a classic
+       * scrollbar the layout no longer has, so the clamp parked the panel under it), aligned the
+       * left edges only, and never reached the top layer. The typed FdyTableFilter asks for
+       * `align:'end'`, so a funnel in the rightmost column opened differently depending on which
+       * path rendered the table, and the two paths are supposed to be interchangeable.
+       *   align 'end': the funnel is a 24px button in a column header and the panel is 14rem, so
+       * lining up their LEFT edges aims the panel at nothing anybody can see, and in the rightmost
+       * column it ran past the page. place() still clamps both sides, so the first column is safe.
+       *   matchWidth false: `.fdy-filter` asks the stylesheet for min-width:14rem, and a floor
+       * taken from a 24px funnel is an inline style that outranks it.
+       * In the top layer the panel is a child of the <th>, where FdyTableFilter renders it, rather
+       * than of <body>. The top layer is what escapes an ancestor's overflow clip now, so the
+       * <body> trick has nothing left to do, and it cost something real: everything outside an open
+       * modal <dialog> is inert, so a filter panel on <body> painted a form that refused focus and
+       * every click for any table inside a modal. */
+      /* WHERE it comes to rest depends on whether the top layer is available, and the degraded path
+       * is not an edge case: `supported` is read once when freeday-popover.js loads, the Popover API
+       * landed in Chrome 114 / Safari 17 / Firefox 125, and the README promises Chrome 105 /
+       * Safari 15.4 / Firefox 121. Chrome 105..113, Safari 15.4 and 16, and Firefox 121..124 are all
+       * inside what the kit supports and all of them come through here.
+       *
+       * In the top layer the parent decides nothing about paint order, so the panel stays in the
+       * <th> and the modal fix above holds. Without it the <th> is a CAGE:
+       * `.fdy-table--sticky-head thead th` is `position:sticky; z-index:2`, and a positioned box
+       * with a z-index is a stacking context, so the panel's own 130 is sorted inside that 2 and
+       * every page overlay from 3 up paints over it. Measured on a phone: 224x49px of the panel,
+       * its Reset and Close buttons, under `.fdy-bottomnav`'s z-index 50, and the hit test at that
+       * point returned the bar. Raising the 130 cannot reach it, a number raised inside a stacking
+       * context never leaves that context; and the context has to exist, the 2 is what keeps a
+       * sticky header above the z-index:1 frozen body cells scrolling under it. So the panel is what
+       * moves.
+       *
+       * It moves to `root`, the element that carries `data-fdy-table`, and not to <body>. `root` is
+       * documented as `.fdy-datatable`: no position, no z-index, no transform, so no stacking
+       * context and no containing block for a fixed box, which is all the panel needs. And it is
+       * INSIDE whatever dialog the table is in, so the inert fault that sent the panel here in the
+       * first place cannot come back, with no `closest('dialog')` special case to get wrong.
+       *
+       * Re-parenting alone would trade one fault for another, so it comes with place(). A fixed box
+       * with auto offsets takes its STATIC position, and in a sticky cell inside a scrolled
+       * scrollport that spot is nowhere in particular: measured 99px below the funnel it belongs to,
+       * with the panel's foot 12px off the bottom of a 740px screen, and at the end of the datatable
+       * once it is parented to `root`. place() is the kit's one copy of that arithmetic and it needs
+       * nothing from the Popover API, it only writes inline coordinates. The panel closes on any
+       * scroll (closeOnScroll, below), so a fixed panel that does not follow the page is not a
+       * second fault.
+       *
+       * Where the helper is absent ENTIRELY nothing moves: there would be nothing to place the panel
+       * with, and the static position inside the <th> at least lands near its own funnel. */
+      var popover = window.FreedayPopover || null;
+      var degraded = popover !== null && popover.supported !== true;
+      var opts = { matchWidth: false, align: 'end' };
+      (degraded ? root : btn.parentNode).appendChild(pop);
       pop._trigger = btn;
-      var rect = btn.getBoundingClientRect();
-      pop.style.top = (rect.bottom + 4) + 'px';
-      pop.style.left = Math.max(8, Math.min(rect.left, window.innerWidth - pop.offsetWidth - 8)) + 'px';
+      pop._pop = popover === null ? null : popover.attach(pop, btn, opts);
+      if (pop._pop) pop._pop.show();
+      if (degraded) popover.place(pop, btn, opts);
       openPopover = pop;
       window.addEventListener('scroll', closeOnScroll, true);
       window.addEventListener('resize', closeOnScroll);

package/dist/freeday.bundle.css

@@ -2998,8 +2998,25 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table__filterbtn.is-active{color:var(--color-primary-strong);}
 .fdy-table__filterbtn svg{width:.85rem;height:.85rem;}
 
-/* Filter popover (position:fixed, appended to <body> so overflow can't clip it) */
-.fdy-filter{position:fixed;z-index:130;min-width:14rem;max-width:18rem;padding:var(--space-3);background:var(--color-surface);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);text-transform:none;letter-spacing:normal;font-weight:var(--weight-regular);color:var(--color-text);}
+/* Filter popover. `position:fixed` because the panel is positioned by freeday-popover.js (and by
+   usePopover on the typed path) with inline viewport coordinates, in the top layer, which is what
+   escapes a card's or a scroll container's clip; the panel itself is a child of its own <th> on
+   both paths, so an open modal <dialog> does not make it inert. It is the one kit panel that is
+   fixed rather than absolute, and that is load-bearing: #079 cannot reach a panel which never
+   resolves a `top:calc(100% + …)` against the viewport, which browser/filter-parity.mjs measures.
+   `min-width` is the panel's own, so neither path may floor it to the width of a 24px funnel.
+
+   The typography block is a RESET of what the panel inherits from that <th>, and it has to name
+   every inherited property the header rule sets, not the ones that looked worst. A header is
+   uppercase, tracked, semibold, muted, 12px and `white-space:nowrap`; a numeric column adds mono
+   and, on the typed path, an inline `text-align:right` that no ancestor rule could outrank anyway.
+   None of that belongs on a panel of labels and inputs, and the four it reset from the start were
+   the four that SHOWED: an 18rem cap hides a nowrap panel's damage, because the box stays 18rem
+   wide while the text runs out of the list, which then scrolls sideways to reach a value nobody
+   can read. `font-size` and `font-family` reach only the text that declares neither, the range
+   separator and the title, which is exactly why they went unnoticed. Measured as geometry in
+   browser/filter-wrap.mjs rather than asserted as declarations. */
+.fdy-filter{position:fixed;z-index:130;min-width:14rem;max-width:18rem;padding:var(--space-3);background:var(--color-surface);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);text-align:left;white-space:normal;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-regular);text-transform:none;letter-spacing:normal;color:var(--color-text);}
 .fdy-filter__title{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);margin-bottom:var(--space-2);}
 .fdy-filter__list{display:flex;flex-direction:column;gap:var(--space-1);max-height:12rem;overflow:auto;}
 .fdy-filter__check{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;}

package/dist/freeday.css

@@ -1821,8 +1821,25 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table__filterbtn.is-active{color:var(--color-primary-strong);}
 .fdy-table__filterbtn svg{width:.85rem;height:.85rem;}
 
-/* Filter popover (position:fixed, appended to <body> so overflow can't clip it) */
-.fdy-filter{position:fixed;z-index:130;min-width:14rem;max-width:18rem;padding:var(--space-3);background:var(--color-surface);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);text-transform:none;letter-spacing:normal;font-weight:var(--weight-regular);color:var(--color-text);}
+/* Filter popover. `position:fixed` because the panel is positioned by freeday-popover.js (and by
+   usePopover on the typed path) with inline viewport coordinates, in the top layer, which is what
+   escapes a card's or a scroll container's clip; the panel itself is a child of its own <th> on
+   both paths, so an open modal <dialog> does not make it inert. It is the one kit panel that is
+   fixed rather than absolute, and that is load-bearing: #079 cannot reach a panel which never
+   resolves a `top:calc(100% + …)` against the viewport, which browser/filter-parity.mjs measures.
+   `min-width` is the panel's own, so neither path may floor it to the width of a 24px funnel.
+
+   The typography block is a RESET of what the panel inherits from that <th>, and it has to name
+   every inherited property the header rule sets, not the ones that looked worst. A header is
+   uppercase, tracked, semibold, muted, 12px and `white-space:nowrap`; a numeric column adds mono
+   and, on the typed path, an inline `text-align:right` that no ancestor rule could outrank anyway.
+   None of that belongs on a panel of labels and inputs, and the four it reset from the start were
+   the four that SHOWED: an 18rem cap hides a nowrap panel's damage, because the box stays 18rem
+   wide while the text runs out of the list, which then scrolls sideways to reach a value nobody
+   can read. `font-size` and `font-family` reach only the text that declares neither, the range
+   separator and the title, which is exactly why they went unnoticed. Measured as geometry in
+   browser/filter-wrap.mjs rather than asserted as declarations. */
+.fdy-filter{position:fixed;z-index:130;min-width:14rem;max-width:18rem;padding:var(--space-3);background:var(--color-surface);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);text-align:left;white-space:normal;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-regular);text-transform:none;letter-spacing:normal;color:var(--color-text);}
 .fdy-filter__title{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);margin-bottom:var(--space-2);}
 .fdy-filter__list{display:flex;flex-direction:column;gap:var(--space-1);max-height:12rem;overflow:auto;}
 .fdy-filter__check{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;}

package/dist/freeday.js

@@ -4208,7 +4208,10 @@
  *
  * Column filters: mark a header `<th data-fdy-filter="text|enum|number">` and a funnel
  * button is injected; text filters by contains, enum by a value checklist, number by a
- * min/max range. All active column filters AND the global search must pass (logical AND).
+ * min/max range. All active column filters AND the global search must pass (logical AND). The
+ * panel is anchored to its funnel by freeday-popover.js, as in every other enhancer with a
+ * dropdown, so load that file too (dist/freeday.js already has it); without it the panel still
+ * opens, at whatever position its stylesheet leaves it.
  *
  * Bulk actions: an optional `[data-fdy-table-bulk]` bar (hidden by default) with a
  * `[data-fdy-table-bulk-count]` label and a `[data-fdy-table-bulk-clear]` button shows
@@ -4438,6 +4441,8 @@
     function closePopover(returnFocus) {
       if (!openPopover) return;
       var btn = openPopover._trigger;
+      // Out of the top layer first, which also drops the reposition listeners attach() added.
+      if (openPopover._pop) openPopover._pop.hide();
       openPopover.remove();
       openPopover = null;
       window.removeEventListener('scroll', closeOnScroll, true);
@@ -4559,11 +4564,65 @@
       foot.appendChild(reset); foot.appendChild(done);
       pop.appendChild(foot);
 
-      document.body.appendChild(pop);
+      /* Positioned by freeday-popover.js, like every other enhancer with a dropdown. This used to
+       * be a fourth copy of that arithmetic, and the copies had drifted: it kept an 8px margin
+       * where the kit's gap is 4, measured against window.innerWidth (which counts a classic
+       * scrollbar the layout no longer has, so the clamp parked the panel under it), aligned the
+       * left edges only, and never reached the top layer. The typed FdyTableFilter asks for
+       * `align:'end'`, so a funnel in the rightmost column opened differently depending on which
+       * path rendered the table, and the two paths are supposed to be interchangeable.
+       *   align 'end': the funnel is a 24px button in a column header and the panel is 14rem, so
+       * lining up their LEFT edges aims the panel at nothing anybody can see, and in the rightmost
+       * column it ran past the page. place() still clamps both sides, so the first column is safe.
+       *   matchWidth false: `.fdy-filter` asks the stylesheet for min-width:14rem, and a floor
+       * taken from a 24px funnel is an inline style that outranks it.
+       * In the top layer the panel is a child of the <th>, where FdyTableFilter renders it, rather
+       * than of <body>. The top layer is what escapes an ancestor's overflow clip now, so the
+       * <body> trick has nothing left to do, and it cost something real: everything outside an open
+       * modal <dialog> is inert, so a filter panel on <body> painted a form that refused focus and
+       * every click for any table inside a modal. */
+      /* WHERE it comes to rest depends on whether the top layer is available, and the degraded path
+       * is not an edge case: `supported` is read once when freeday-popover.js loads, the Popover API
+       * landed in Chrome 114 / Safari 17 / Firefox 125, and the README promises Chrome 105 /
+       * Safari 15.4 / Firefox 121. Chrome 105..113, Safari 15.4 and 16, and Firefox 121..124 are all
+       * inside what the kit supports and all of them come through here.
+       *
+       * In the top layer the parent decides nothing about paint order, so the panel stays in the
+       * <th> and the modal fix above holds. Without it the <th> is a CAGE:
+       * `.fdy-table--sticky-head thead th` is `position:sticky; z-index:2`, and a positioned box
+       * with a z-index is a stacking context, so the panel's own 130 is sorted inside that 2 and
+       * every page overlay from 3 up paints over it. Measured on a phone: 224x49px of the panel,
+       * its Reset and Close buttons, under `.fdy-bottomnav`'s z-index 50, and the hit test at that
+       * point returned the bar. Raising the 130 cannot reach it, a number raised inside a stacking
+       * context never leaves that context; and the context has to exist, the 2 is what keeps a
+       * sticky header above the z-index:1 frozen body cells scrolling under it. So the panel is what
+       * moves.
+       *
+       * It moves to `root`, the element that carries `data-fdy-table`, and not to <body>. `root` is
+       * documented as `.fdy-datatable`: no position, no z-index, no transform, so no stacking
+       * context and no containing block for a fixed box, which is all the panel needs. And it is
+       * INSIDE whatever dialog the table is in, so the inert fault that sent the panel here in the
+       * first place cannot come back, with no `closest('dialog')` special case to get wrong.
+       *
+       * Re-parenting alone would trade one fault for another, so it comes with place(). A fixed box
+       * with auto offsets takes its STATIC position, and in a sticky cell inside a scrolled
+       * scrollport that spot is nowhere in particular: measured 99px below the funnel it belongs to,
+       * with the panel's foot 12px off the bottom of a 740px screen, and at the end of the datatable
+       * once it is parented to `root`. place() is the kit's one copy of that arithmetic and it needs
+       * nothing from the Popover API, it only writes inline coordinates. The panel closes on any
+       * scroll (closeOnScroll, below), so a fixed panel that does not follow the page is not a
+       * second fault.
+       *
+       * Where the helper is absent ENTIRELY nothing moves: there would be nothing to place the panel
+       * with, and the static position inside the <th> at least lands near its own funnel. */
+      var popover = window.FreedayPopover || null;
+      var degraded = popover !== null && popover.supported !== true;
+      var opts = { matchWidth: false, align: 'end' };
+      (degraded ? root : btn.parentNode).appendChild(pop);
       pop._trigger = btn;
-      var rect = btn.getBoundingClientRect();
-      pop.style.top = (rect.bottom + 4) + 'px';
-      pop.style.left = Math.max(8, Math.min(rect.left, window.innerWidth - pop.offsetWidth - 8)) + 'px';
+      pop._pop = popover === null ? null : popover.attach(pop, btn, opts);
+      if (pop._pop) pop._pop.show();
+      if (degraded) popover.place(pop, btn, opts);
       openPopover = pop;
       window.addEventListener('scroll', closeOnScroll, true);
       window.addEventListener('resize', closeOnScroll);

package/docs/agent-onboarding.md

@@ -33,9 +33,9 @@ and the code looks correct and fails later.**
 | Blazor (net8.0) | `@using Freeday.Blazor` (RCL) | `@bind-Value` |
 | Static HTML, Svelte, server-rendered templates… | no wrapper: raw markup + the enhancer script | `fdy-*` DOM events |
 
-The eleven: **FdyCombo · FdyDatepicker · FdyDateRange · FdyAutocomplete · FdyCascade · FdyCfl ·
-FdyChart · FdyTable · FdyModal · FdyDrawer · FdyAppShell**. In Vue/React/Blazor, **never hand-write the raw
-markup + enhancer for these eleven.** The raw path *appears* to work: the enhancer auto-initialises
+The twelve: **FdyCombo · FdyDatepicker · FdyMonthpicker · FdyDateRange · FdyAutocomplete ·
+FdyCascade · FdyCfl · FdyChart · FdyTable · FdyModal · FdyDrawer · FdyAppShell**. In
+Vue/React/Blazor, **never hand-write the raw markup + enhancer for these twelve.** The raw path *appears* to work: the enhancer auto-initialises
 once on `DOMContentLoaded` and the first render is correct. Then it fails quietly: DOM your framework
 renders later is never hydrated, and the widget's state lives in the DOM instead of in your
 framework's state.

package/docs/getting-started.md

@@ -21,9 +21,9 @@ Freeday = **CSS** (semantic tokens + `fdy-*` classes) + **zero-dependency JS enh
    the enhancer owns the widget's DOM. You **listen for `fdy-*` events** (all bubbling
    `CustomEvent`s, data in `event.detail`) → store them in your framework state. Event/API contract
    table: [`integrations.md` §Event & API contract](integrations.md).
-   **On Vue, React or Blazor this is not the path to take for eleven of the components.** `FdyCombo`,
-   `FdyDatepicker`, `FdyDateRange`, `FdyAutocomplete`, `FdyCascade`, `FdyCfl`, `FdyChart`,
-   `FdyTable`, `FdyModal`, `FdyDrawer`, `FdyAppShell` ship typed wrappers that own the state properly (Vue and
+   **On Vue, React or Blazor this is not the path to take for twelve of the components.** `FdyCombo`,
+   `FdyDatepicker`, `FdyMonthpicker`, `FdyDateRange`, `FdyAutocomplete`, `FdyCascade`, `FdyCfl`,
+   `FdyChart`, `FdyTable`, `FdyModal`, `FdyDrawer`, `FdyAppShell` ship typed wrappers that own the state properly (Vue and
    React re-implement the interaction natively; Blazor wraps the enhancer over interop). Use them;
    the raw path is for the components without a wrapper, and for stacks without an adapter.
 3. **Hydrate dynamic DOM.** Enhancers auto-init once on `DOMContentLoaded`. DOM an SPA renders
@@ -191,7 +191,7 @@ live docs also have a copy button per component.
 ```bash
 npm i @cahyo-dimas/freeday
 ```
-Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.8.0"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.9.0"` (public npm package). `dist/` is
 committed and published → no build step; `npm ci` runs without auth.
 
 ### 2. Import the CSS + enhancers **once** in your entry (`src/main.ts`)
@@ -444,9 +444,9 @@ kit's CSS/enhancers), then bind:
 <FdyChart Type="donut" Values="_byCity" Labels="_cityLabels" AriaLabel="Revenue by city" />
 <FdyDrawer @bind-Open="_drawerOpen" Title="Detail" Side="right">…</FdyDrawer>
 ```
-Eleven components at parity with the Vue/React adapters: **`FdyModal`** · **`FdyDrawer`** (`@bind-Open`,
+Twelve components at parity with the Vue/React adapters: **`FdyModal`** · **`FdyDrawer`** (`@bind-Open`,
 `Title`, `Size`/`Side`, `Dismissible`) · **`FdyCombo<TValue>`** · **`FdyDatepicker`** ·
-**`FdyAutocomplete`** · **`FdyCascade`** · **`FdyDateRange`** (`@bind-From`/`@bind-To`) ·
+**`FdyMonthpicker`** (`@bind-Value` as `yyyy-MM`) · **`FdyAutocomplete`** · **`FdyCascade`** · **`FdyDateRange`** (`@bind-From`/`@bind-To`) ·
 **`FdyCfl<TRow>`** (async `LoadPage`) · **`FdyChart`** · **`FdyTable<TRow>`** (client sort/filter/page,
 or controlled `Sort`/`Filters`/`Page` for a server-paged table; `RowActivatable`, `RowDetail`) ·
 **`FdyAppShell`** (`@bind-NavOpen`). Each

package/docs/integrations.md

@@ -153,8 +153,9 @@ function Panel(): JSX.Element {
 }
 ```
 > **Controlled alternative (parity with Vue's `v-model`):** `@cahyo-dimas/freeday/react` also exports
-> the typed components `FdyCombo` / `FdyDatepicker` / `FdyDateRange` / `FdyAutocomplete` /
-> `FdyCascade` / `FdyCfl` / `FdyChart` / `FdyTable` / `FdyModal` / `FdyDrawer` / `FdyAppShell`, with plain
+> the typed components `FdyCombo` / `FdyDatepicker` / `FdyMonthpicker` / `FdyDateRange` /
+> `FdyAutocomplete` / `FdyCascade` / `FdyCfl` / `FdyChart` / `FdyTable` / `FdyModal` / `FdyDrawer` /
+> `FdyAppShell`, with plain
 > `value`/`onChange` (props in, events out), no `data-fdy-*` + manual event listener:
 > ```tsx
 > import { FdyCombo } from '@cahyo-dimas/freeday/react';
@@ -199,8 +200,8 @@ document.addEventListener('fdy-form-invalid', (e) =>
 
 > **Native components (parity with Vue's `v-model` / React's `value`/`onChange`):** the
 > **`Freeday.Blazor`** RCL (net8.0, `adapters/blazor/`) ships the typed components `FdyCombo<TValue>` /
-> `FdyDatepicker` / `FdyDateRange` / `FdyAutocomplete` / `FdyCascade` / `FdyCfl<TRow>` / `FdyChart` /
-> `FdyTable<TRow>` / `FdyModal` / `FdyDrawer` / `FdyAppShell` with `@bind`, no `@ref` / manual `initAll` / `[JSInvokable]`:
+> `FdyDatepicker` / `FdyMonthpicker` / `FdyDateRange` / `FdyAutocomplete` / `FdyCascade` /
+> `FdyCfl<TRow>` / `FdyChart` / `FdyTable<TRow>` / `FdyModal` / `FdyDrawer` / `FdyAppShell` with `@bind`, no `@ref` / manual `initAll` / `[JSInvokable]`:
 > ```razor
 > @using Freeday.Blazor
 > <FdyCombo TValue="string" @bind-Value="_status" Options="_statusOptions" AriaLabelledby="lbl-status" />
@@ -327,9 +328,26 @@ Use the `app-` prefix for its classes, and reuse the kit's plumbing rather than
 ```ts
 import { usePopover } from '@cahyo-dimas/freeday/vue';   // or '/react'
 usePopover(panelRef, triggerRef, open);                  // panel needs popover="manual"
+usePopover(panelRef, triggerRef, open, 'end');           // right edges together, for a panel
+                                                         // wider than a trigger in a gutter
+usePopover(panelRef, triggerRef, open, 'end', false);    // and let the panel keep its own width
 ```
 
 This is what every kit dropdown uses to escape an ancestor's overflow clip, because `.fdy-card` is
 `overflow:hidden`, so a panel positioned inside one is otherwise cut at the card's edge. It is
 exported so a control you build behaves like one the kit ships, and improves when the kit's
 positioning does.
+
+The fourth argument is the alignment, `'start'` (the default, left edges together) or `'end'`
+(right edges together). Reach for `'end'` when the panel is much wider than its trigger and the
+trigger sits near the right of something, an icon in a page gutter or a funnel in a table
+header. The panel is kept inside the viewport on both sides either way, so `'end'` beside the
+left edge slides right rather than off the screen.
+
+The fifth is `matchWidth`, and it defaults to `true`: the panel is floored to its trigger's width,
+which is what makes a listbox look like part of the control it drops out of. Pass `false` when your
+panel has a width of its own in CSS, because the floor is written as an inline style and an inline
+style outranks your rule. The kit's own funnel panel is the case that needs it, a 14rem form hanging
+off a 24px icon; `FdyTableFilter` passes `false` and the nine other typed dropdowns pass nothing.
+Both arguments are plain values rather than an options object, so the React port can list them among
+an effect's dependencies and you never have to memoise anything.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "Freeday: token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -96,7 +96,7 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test --test-concurrency=3 browser/color-mix.mjs browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/field-width.mjs browser/cfl-multi.mjs browser/cfl-dialog-only.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs browser/bottom-nav.mjs browser/picker-states.mjs browser/tabs-strip.mjs browser/tabs-vertical.mjs browser/menu-align.mjs browser/cfl-narrow.mjs browser/form-reveal.mjs browser/confirm-search-copy.mjs browser/daterange-settled.mjs browser/display-parts.mjs browser/table-empty.mjs browser/table-footer-text.mjs browser/month-mode.mjs browser/page-columns.mjs browser/table-hover.mjs browser/harness-contract.mjs",
+    "test:browser": "node --test --test-concurrency=3 browser/color-mix.mjs browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/field-width.mjs browser/cfl-multi.mjs browser/cfl-dialog-only.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs browser/bottom-nav.mjs browser/picker-states.mjs browser/tabs-strip.mjs browser/tabs-vertical.mjs browser/menu-align.mjs browser/cfl-narrow.mjs browser/form-reveal.mjs browser/confirm-search-copy.mjs browser/daterange-settled.mjs browser/display-parts.mjs browser/table-empty.mjs browser/table-footer-text.mjs browser/month-mode.mjs browser/monthpicker.mjs browser/page-columns.mjs browser/table-hover.mjs browser/typed-popover.mjs browser/filter-parity.mjs browser/filter-wrap.mjs browser/filter-stack.mjs browser/harness-contract.mjs",
     "prepack": "node tokens/build.mjs",
     "version": "node tokens/build.mjs && git add dist",
     "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit",

package/src/components/table.css

@@ -140,8 +140,25 @@
 .fdy-table__filterbtn.is-active{color:var(--color-primary-strong);}
 .fdy-table__filterbtn svg{width:.85rem;height:.85rem;}
 
-/* Filter popover (position:fixed, appended to <body> so overflow can't clip it) */
-.fdy-filter{position:fixed;z-index:130;min-width:14rem;max-width:18rem;padding:var(--space-3);background:var(--color-surface);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);text-transform:none;letter-spacing:normal;font-weight:var(--weight-regular);color:var(--color-text);}
+/* Filter popover. `position:fixed` because the panel is positioned by freeday-popover.js (and by
+   usePopover on the typed path) with inline viewport coordinates, in the top layer, which is what
+   escapes a card's or a scroll container's clip; the panel itself is a child of its own <th> on
+   both paths, so an open modal <dialog> does not make it inert. It is the one kit panel that is
+   fixed rather than absolute, and that is load-bearing: #079 cannot reach a panel which never
+   resolves a `top:calc(100% + …)` against the viewport, which browser/filter-parity.mjs measures.
+   `min-width` is the panel's own, so neither path may floor it to the width of a 24px funnel.
+
+   The typography block is a RESET of what the panel inherits from that <th>, and it has to name
+   every inherited property the header rule sets, not the ones that looked worst. A header is
+   uppercase, tracked, semibold, muted, 12px and `white-space:nowrap`; a numeric column adds mono
+   and, on the typed path, an inline `text-align:right` that no ancestor rule could outrank anyway.
+   None of that belongs on a panel of labels and inputs, and the four it reset from the start were
+   the four that SHOWED: an 18rem cap hides a nowrap panel's damage, because the box stays 18rem
+   wide while the text runs out of the list, which then scrolls sideways to reach a value nobody
+   can read. `font-size` and `font-family` reach only the text that declares neither, the range
+   separator and the title, which is exactly why they went unnoticed. Measured as geometry in
+   browser/filter-wrap.mjs rather than asserted as declarations. */
+.fdy-filter{position:fixed;z-index:130;min-width:14rem;max-width:18rem;padding:var(--space-3);background:var(--color-surface);border:var(--bw) solid var(--color-border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);text-align:left;white-space:normal;font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-regular);text-transform:none;letter-spacing:normal;color:var(--color-text);}
 .fdy-filter__title{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-wide);margin-bottom:var(--space-2);}
 .fdy-filter__list{display:flex;flex-direction:column;gap:var(--space-1);max-height:12rem;overflow:auto;}
 .fdy-filter__check{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text);cursor:pointer;}