@cahyo-dimas/freeday 3.7.0 → 3.9.0

package/adapters/vue/usePopover.ts

@@ -3,26 +3,58 @@ import { watch, onBeforeUnmount, type Ref } from 'vue';
 // Vue equivalent of the vanilla freeday-popover.js helper. Lifts a dropdown panel into the top
 // layer via the native Popover API so it escapes any ancestor overflow clip (a card, a scroll
 // container), then positions it `fixed` against its trigger (flip above when there's no room
-// below; match the trigger width). The panel stays in the component's DOM, so focus / outside-
-// click / ARIA are untouched. Degrades to the panel's own [hidden]/absolute CSS where the
-// Popover API is unavailable. Drive it with the component's existing `open` ref.
+// below; match the trigger width; line either edge up with the trigger's). The panel stays in
+// the component's DOM, so focus / outside-click / ARIA are untouched. Degrades to the panel's own
+// [hidden]/absolute CSS where the Popover API is unavailable. Drive it with the component's
+// existing `open` ref.
 
 interface PopoverElement extends HTMLElement {
   showPopover(): void;
   hidePopover(): void;
 }
 
+/**
+ * Which of the panel's edges lines up with the trigger's. `'start'` (the default everywhere it is
+ * omitted) puts the panel's LEFT edge on the trigger's left edge, right for an input-shaped
+ * dropdown. `'end'` puts its RIGHT edge on the trigger's right edge, which is what a panel much
+ * wider than its trigger needs when the trigger sits in a right-hand gutter or a table header.
+ * Same two names as the raw path's `place()`, so one concept does not grow a second vocabulary.
+ */
+export type FdyPopoverAlign = 'start' | 'end';
+
 const GAP = 4; // ~ --space-1
 const supported: boolean =
   typeof HTMLElement !== 'undefined'
   && typeof (HTMLElement.prototype as Partial<PopoverElement>).showPopover === 'function';
 
-function place(panel: HTMLElement, trigger: HTMLElement): void {
-  const r: DOMRect = trigger.getBoundingClientRect();
+function place(
+  panel: HTMLElement,
+  trigger: HTMLElement,
+  align: FdyPopoverAlign | undefined,
+  matchWidth: boolean | undefined,
+): void {
+  /* Take the panel out of the flow BEFORE measuring anything. Until this runs the panel is still
+   * `position:absolute` with `top:calc(100% + …)` from its component's stylesheet, an author rule
+   * outranks the popover UA style, and in the top layer that `100%` resolves against the viewport.
+   * So a panel that has just been shown sits one viewport height down the page and drags the
+   * document's scrollable overflow with it. Where scrollbars take layout space (every Windows and
+   * Linux browser; macOS overlay scrollbars hide it) the document gains a classic scrollbar for the
+   * duration, documentElement.clientWidth drops by its width, and the page relays out that much
+   * narrower. A trigger rect read in that instant belongs to a layout the next three lines undo:
+   * measured 741 instead of 756 for a combo in a 24px gutter, a scrollbar's width to the left. */
   panel.style.position = 'fixed';
   panel.style.margin = '0';
   panel.style.inset = 'auto';
-  panel.style.minWidth = `${r.width}px`;
+  const r: DOMRect = trigger.getBoundingClientRect();
+  /* The trigger's width as a FLOOR, and `matchWidth !== false` rather than a truthiness test, the
+     same spelling the raw `place()` uses. It is what keeps the four input-shaped panels looking
+     like one control with its list hanging off it, and it is not cosmetic: `.fdy-combo__listbox`,
+     `.fdy-autocomplete__listbox` and `.fdy-cascade__panel` are `min-width:100%`, and once the panel
+     is `fixed` in the top layer that 100% is the VIEWPORT, so without this line a 220px combo opens
+     a 1000px listbox. A panel whose stylesheet asks for a width of its own opts out instead:
+     `.fdy-filter` wants `min-width:14rem` and hangs off a 24px funnel, and an inline floor of 24px
+     outranks the rule, which left the typed filter panel 206px wide against the 224 it asked for. */
+  if (matchWidth !== false) panel.style.minWidth = `${r.width}px`;
   const ph: number = panel.offsetHeight;
   const pw: number = panel.offsetWidth;
   const vw: number = document.documentElement.clientWidth;
@@ -30,8 +62,13 @@ function place(panel: HTMLElement, trigger: HTMLElement): void {
   const below: number = vh - r.bottom - GAP;
   const above: number = r.top - GAP;
   const top: number = ph <= below || below >= above ? r.bottom + GAP : Math.max(GAP, r.top - GAP - ph);
-  let left: number = r.left;
-  if (left + pw > vw - GAP) left = Math.max(GAP, vw - GAP - pw);
+  let left: number = align === 'end' ? r.right - pw : r.left;
+  /* Clamped on BOTH sides, and that is not belt-and-braces: the first line keeps a start-aligned
+     panel on screen, the second keeps an end-aligned one on screen when the panel is wider than the
+     room to the left of its trigger. Keeping only one of them trades an overflow on one edge for an
+     overflow on the other. */
+  if (left + pw > vw - GAP) left = vw - GAP - pw;
+  if (left < GAP) left = GAP;
   panel.style.top = `${Math.round(top)}px`;
   panel.style.left = `${Math.round(left)}px`;
 }
@@ -39,16 +76,22 @@ function place(panel: HTMLElement, trigger: HTMLElement): void {
 /**
  * Anchor a dropdown `panelRef` to `triggerRef` in the top layer while `open` is true.
  * The panel element must carry `popover="manual"` in the template (ignored where unsupported).
+ * `align` and `matchWidth` are captured once, at setup; omitting them means `'start'` and `true`,
+ * which is what nine of the kit's ten typed dropdowns want. Both are plain values and not an
+ * options object, so the React port can list them in an effect's dependencies without a caller
+ * having to memoise anything, and the two ports keep one signature.
  */
 export function usePopover(
   panelRef: Ref<HTMLElement | null>,
   triggerRef: Ref<HTMLElement | null>,
   open: Ref<boolean>,
+  align?: FdyPopoverAlign,
+  matchWidth?: boolean,
 ): void {
   function reposition(): void {
     const panel: PopoverElement | null = panelRef.value as PopoverElement | null;
     const trigger: HTMLElement | null = triggerRef.value;
-    if (supported && panel !== null && trigger !== null && panel.matches(':popover-open')) place(panel, trigger);
+    if (supported && panel !== null && trigger !== null && panel.matches(':popover-open')) place(panel, trigger, align, matchWidth);
   }
 
   watch(
@@ -59,7 +102,7 @@ export function usePopover(
       if (!supported || panel === null || trigger === null) return;
       if (isOpen) {
         if (!panel.matches(':popover-open')) panel.showPopover();
-        place(panel, trigger);
+        place(panel, trigger, align, matchWidth);
         window.addEventListener('scroll', reposition, true);
         window.addEventListener('resize', reposition);
       } else {

package/dist/freeday-datepicker.js

@@ -11,6 +11,8 @@
  *               <div data-fdy-datepicker data-role="to" data-placeholder="To"></div>
  *             </div>
  *    The range links the two: the end can never precede the start (out-of-range days disable).
+ *  - Month:  <div data-fdy-datepicker data-mode="month" data-value="2026-10"></div>
+ *    The calendar opens ON the month grid and stops there; the value is "YYYY-MM".
  *
  * Emits a bubbling "fdy-datepicker-change" CustomEvent on the wrapper: detail {value, date}.
  * Keyboard in the grid: ←/→ ±1 day, ↑/↓ ±1 week, Home/End week edge, PageUp/Down ±month,
@@ -39,6 +41,11 @@
   var TEXT = {
     label: 'Date',
     placeholder: 'Choose a date',
+    /* The month mode's own pair. Reusing `label` and `placeholder` would name a month field "Date"
+       and ask the reader to "Choose a date" on a control that cannot express a day, so every caller
+       would have to pass both attributes to undo a default that was simply wrong for the mode. */
+    labelMonth: 'Month',
+    placeholderMonth: 'Choose a month',
     prevMonth: 'Previous month',
     nextMonth: 'Next month',
     prevYear: 'Previous year',
@@ -69,6 +76,7 @@
   function uid(p) { uidSeq += 1; return p + '-' + uidSeq; }
   function pad(n) { return n < 10 ? '0' + n : '' + n; }
   function toISO(d) { return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); }
+  function toISOMonth(d) { return d.getFullYear() + '-' + pad(d.getMonth() + 1); }
   function parseISO(s) {
     if (!s) return null;
     var p = String(s).split('-');
@@ -76,6 +84,17 @@
     var d = new Date(Number(p[0]), Number(p[1]) - 1, Number(p[2]));
     return isNaN(d.getTime()) ? null : d;
   }
+  /* Month mode reads BOTH shapes, and the day it drops is the point: a bound of "2026-03" lands on
+     March 1st, and monthDisabled then compares a whole month against it correctly at either end,
+     so an app can pass the same strings it stores. A full date still works for a host that keeps
+     its bounds in one format across a form. */
+  function parseISOMonth(s) {
+    if (!s) return null;
+    var p = String(s).split('-');
+    if (p.length < 2) return null;
+    var d = new Date(Number(p[0]), Number(p[1]) - 1, p.length > 2 ? Number(p[2]) : 1);
+    return isNaN(d.getTime()) ? null : d;
+  }
   function startOfDay(d) { return new Date(d.getFullYear(), d.getMonth(), d.getDate()); }
   function sameDay(a, b) { return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
   function addDays(d, n) { var x = new Date(d); x.setDate(x.getDate() + n); return x; }
@@ -102,11 +121,16 @@
     wrap.dataset.fdyDpReady = '1';
     wrap.classList.add('fdy-datepicker');
 
-    var placeholder = wrap.getAttribute('data-placeholder') || textOf(wrap, 'placeholder');
-    var label = wrap.getAttribute('data-label') || textOf(wrap, 'label');
-    var selected = parseISO(wrap.getAttribute('data-value'));
-    var minDate = parseISO(wrap.getAttribute('data-min'));
-    var maxDate = parseISO(wrap.getAttribute('data-max'));
+    /* `data-mode="month"` makes the month grid the DESTINATION rather than a waypoint: the panel
+       opens on it, Enter and a click commit from it, the day grid is never built, and the value is
+       "YYYY-MM". Anything else, including the attribute's absence, is the day picker unchanged. */
+    var monthOnly = wrap.getAttribute('data-mode') === 'month';
+    var parseVal = monthOnly ? parseISOMonth : parseISO;
+    var placeholder = wrap.getAttribute('data-placeholder') || textOf(wrap, monthOnly ? 'placeholderMonth' : 'placeholder');
+    var label = wrap.getAttribute('data-label') || textOf(wrap, monthOnly ? 'labelMonth' : 'label');
+    var selected = parseVal(wrap.getAttribute('data-value'));
+    var minDate = parseVal(wrap.getAttribute('data-min'));
+    var maxDate = parseVal(wrap.getAttribute('data-max'));
     var rangeStart = null, rangeEnd = null; // for in-range shading
     var view = startOfDay(selected || new Date());
     view = new Date(view.getFullYear(), view.getMonth(), 1);
@@ -116,7 +140,7 @@
        August 2026 to March 2022 is fifty-three of them. Shift+PageUp already jumped a year, but a
        shortcut nobody can see is not an affordance, the repo's own test helper clicked "previous
        month" twenty-four times to reach a date two years back. */
-    var mode = 'days';
+    var mode = monthOnly ? 'months' : 'days';
     var focusMonth = null;
     var focusYear = null;
 
@@ -152,7 +176,10 @@
 
     function updateDisplay() {
       if (selected) {
-        valueSpan.textContent = valueFmt.format(selected);
+        /* Through the same `Intl` formatter the month CELLS and the day grid's title already use,
+           which is the whole reason this mode exists: <input type="month"> names the month in the
+           browser's language, this names it in the page's. */
+        valueSpan.textContent = (monthOnly ? monthNameFmt : valueFmt).format(selected);
         valueSpan.classList.remove('fdy-datepicker__value--placeholder');
       } else {
         valueSpan.textContent = placeholder;
@@ -196,6 +223,10 @@
     }
 
     function render() {
+      /* The floor of the drill, stated once here rather than at every caller that could lower it:
+         in month mode there is no level below months, so the day grid is unreachable by
+         construction instead of by every path remembering not to ask for it. */
+      if (monthOnly && mode === 'days') mode = 'months';
       if (mode === 'years') { renderYears(); return; }
       if (mode === 'months') { renderMonths(); return; }
       panel.innerHTML = '';
@@ -300,7 +331,7 @@
         }
         if (monthDisabled(year, m)) btn.disabled = true;
         btn.tabIndex = m === focusMonth ? 0 : -1;
-        btn.addEventListener('click', (function (mm) { return function () { openMonth(mm); }; })(m));
+        btn.addEventListener('click', (function (mm) { return function () { chooseMonth(mm); }; })(m));
         grid.appendChild(btn);
       }
       grid.addEventListener('keydown', onMonthKey);
@@ -414,6 +445,28 @@
       if (cell) cell.focus();
     }
 
+    /* What a month cell DOES, decided in one place for the click handler and the Enter key alike.
+       In day mode a month is a step on the way down; in month mode it is the answer. */
+    function chooseMonth(m) {
+      if (monthOnly) pickMonth(m);
+      else openMonth(m);
+    }
+
+    function pickMonth(m) {
+      var year = view.getFullYear();
+      if (monthDisabled(year, m)) return;
+      selected = new Date(year, m, 1);
+      focusMonth = m;
+      focusDate = selected;
+      updateDisplay();
+      /* The same event name, so a host already listening keeps listening, and `date` is still a
+         real Date (the first of the month) rather than a second shape to parse. */
+      wrap.dispatchEvent(new CustomEvent('fdy-datepicker-change', {
+        bubbles: true, detail: { value: toISOMonth(selected), date: new Date(selected) }
+      }));
+      close(true);
+    }
+
     /* Picking a month is navigation, not selection: it drops back to the day grid with the roving
        cell clamped into the new month, so nothing is committed until a DAY is chosen. */
     function openMonth(m) {
@@ -445,7 +498,7 @@
         case 'PageUp': moveMonthFocus(focusMonth, -1); break;
         case 'PageDown': moveMonthFocus(focusMonth, 1); break;
         case 'Enter':
-        case ' ': openMonth(focusMonth); break;
+        case ' ': chooseMonth(focusMonth); break;
         case 'Escape': close(true); break;
         default: handled = false;
       }
@@ -539,14 +592,15 @@
     function open() {
       if (stateDisabled || stateReadonly) return;
       if (!panel.hidden) return;
-      mode = 'days';
+      mode = monthOnly ? 'months' : 'days';
       focusDate = selected || focusDate || new Date();
       view = new Date(focusDate.getFullYear(), focusDate.getMonth(), 1);
+      if (monthOnly) focusMonth = view.getMonth();
       var p = popCtl(); if (p) p.show(); else panel.hidden = false;
       trigger.setAttribute('aria-expanded', 'true');
       trigger.classList.add('is-open');
       render();
-      focusFocusDate();
+      if (monthOnly) focusMonthCell(); else focusFocusDate();
       document.addEventListener('click', onDocClick, true);
     }
 
@@ -572,10 +626,10 @@
     var api = {
       wrap: wrap,
       setState: setState,
-      getValue: function () { return selected ? toISO(selected) : ''; },
+      getValue: function () { return selected ? (monthOnly ? toISOMonth(selected) : toISO(selected)) : ''; },
       clear: function () { selected = null; updateDisplay(); if (!panel.hidden) render(); },
-      setMin: function (iso) { minDate = parseISO(iso); if (!panel.hidden) render(); },
-      setMax: function (iso) { maxDate = parseISO(iso); if (!panel.hidden) render(); },
+      setMin: function (iso) { minDate = parseVal(iso); if (!panel.hidden) render(); },
+      setMax: function (iso) { maxDate = parseVal(iso); if (!panel.hidden) render(); },
       setRange: function (fromIso, toIso) {
         rangeStart = parseISO(fromIso);
         rangeEnd = parseISO(toIso);

package/dist/freeday-menu.js

@@ -36,7 +36,21 @@
       its[(index + its.length) % its.length].focus();
     }
     var _pop = null;
-    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(menu, trigger, { matchWidth: false }); return _pop; }
+    /* `.fdy-menu--end` is the kit's existing spelling for "align this menu to the right", and the
+       stylesheet has always honoured it (left:auto;right:0). The popover path replaces that with
+       inline `fixed` coordinates, so without this line the class was silently dropped the moment
+       the menu went into the top layer: an account menu in a page gutter overshot its avatar and
+       ran to 4px off the screen edge. Reported from an app that patched it with a `translate`
+       hack keyed to the kit's own GAP. */
+    function popCtl() {
+      if (_pop === null && window.FreedayPopover) {
+        _pop = window.FreedayPopover.attach(menu, trigger, {
+          matchWidth: false,
+          align: menu.classList.contains('fdy-menu--end') ? 'end' : 'start'
+        });
+      }
+      return _pop;
+    }
     function open(index) {
       var p = popCtl(); if (p) p.show(); else menu.hidden = false;
       trigger.setAttribute('aria-expanded', 'true');

package/dist/freeday-popover.js

@@ -8,7 +8,8 @@
  * Used by the select/combo, datepicker, timepicker, cascade, autocomplete and menu enhancers;
  * the freeday/vue adapter ships an equivalent `usePopover` composable.
  *
- * attach(panel, trigger) -> { show(), hide() }. show()/hide() also toggle the panel's [hidden]
+ * attach(panel, trigger, opts) -> { show(), hide() }, where opts is { matchWidth, align } and
+ * both are described on place() below. show()/hide() also toggle the panel's [hidden]
  * attribute so callers keep using `!panel.hidden` for open-state and the `:not([hidden])`
  * entrance animation still fires. On browsers without the Popover API it degrades to that
  * [hidden] toggle over the panel's existing absolute-positioned CSS (clipped, but functional).
@@ -21,35 +22,56 @@
     && typeof HTMLElement.prototype.showPopover === 'function';
 
   // Position `panel` (already shown, so it has a measurable box) against `trigger`'s rect.
-  // matchWidth (default true) floors the panel to the trigger width, right for input-shaped
-  // dropdowns (combo/cascade/date/time), skipped for menus that keep their own min-width.
-  function place(panel, trigger, matchWidth) {
-    var r = trigger.getBoundingClientRect();
+  // opts is the object attach() takes, and both keys are optional:
+  //   matchWidth  (default true) floors the panel to the trigger width, right for input-shaped
+  //               dropdowns (combo/cascade/date/time), skipped for menus that keep their own min-width.
+  //   align       'start' (default) lines the panel's LEFT edge up with the trigger's left edge;
+  //               'end' lines its RIGHT edge up with the trigger's right edge, which is what a
+  //               control parked in a right-hand gutter needs. The panel is kept inside the
+  //               viewport either way, so 'end' near the left edge slides right instead of
+  //               hanging off it. freeday-menu.js reads it off `.fdy-menu--end`.
+  function place(panel, trigger, opts) {
+    var o = opts || {};
+    /* Take the panel out of the flow BEFORE measuring anything, because until this runs the panel
+     * is still `position:absolute` with `top:calc(100% + …)` from its component's stylesheet. An
+     * author rule outranks the popover UA style, and in the top layer that `100%` resolves against
+     * the viewport, so a panel that has just been shown sits one viewport height down the page and
+     * drags the document's scrollable overflow with it. Where scrollbars take layout space (every
+     * Windows and Linux browser; macOS overlay scrollbars hide it completely) the document gains a
+     * classic scrollbar for the duration, documentElement.clientWidth drops by its width, and the
+     * page relays out 15px narrower. A trigger rect read in that instant is a rect from a layout
+     * that is about to be undone by the next three lines: measured 961 instead of 976 for an avatar
+     * in a 24px gutter, so the menu landed a scrollbar's width to the left of it. */
     panel.style.position = 'fixed';
     panel.style.margin = '0';
     panel.style.inset = 'auto';                 // clear the UA popover centering
-    if (matchWidth !== false) panel.style.minWidth = r.width + 'px'; // at least as wide as the trigger
+    var r = trigger.getBoundingClientRect();
+    if (o.matchWidth !== false) panel.style.minWidth = r.width + 'px'; // at least as wide as the trigger
     var ph = panel.offsetHeight, pw = panel.offsetWidth;
     var vw = document.documentElement.clientWidth, vh = document.documentElement.clientHeight;
     var below = vh - r.bottom - GAP, above = r.top - GAP;
     // Prefer below; flip above only when it doesn't fit below and above has more room.
     var top = (ph <= below || below >= above) ? (r.bottom + GAP) : Math.max(GAP, r.top - GAP - ph);
-    var left = r.left;
-    if (left + pw > vw - GAP) left = Math.max(GAP, vw - GAP - pw); // keep within the viewport
+    var left = (o.align === 'end') ? (r.right - pw) : r.left;
+    /* Clamped on BOTH sides, and that is not belt-and-braces: the first line is what keeps a
+       start-aligned panel on screen, the second is what keeps an end-aligned one on screen when
+       the panel is wider than the room to the left of its trigger. Keeping only one of them
+       trades an overflow on one edge for an overflow on the other. */
+    if (left + pw > vw - GAP) left = vw - GAP - pw;
+    if (left < GAP) left = GAP;
     panel.style.top = Math.round(top) + 'px';
     panel.style.left = Math.round(left) + 'px';
   }
 
   function attach(panel, trigger, opts) {
-    var matchWidth = !(opts && opts.matchWidth === false);
     if (supported) panel.setAttribute('popover', 'manual');
-    function reposition() { if (supported && panel.matches(':popover-open')) place(panel, trigger, matchWidth); }
+    function reposition() { if (supported && panel.matches(':popover-open')) place(panel, trigger, opts); }
     return {
       show: function () {
         panel.hidden = false;
         if (supported) {
           if (!panel.matches(':popover-open')) panel.showPopover();
-          place(panel, trigger, matchWidth);
+          place(panel, trigger, opts);
           window.addEventListener('scroll', reposition, true); // capture: any scrolling ancestor
           window.addEventListener('resize', reposition);
         }

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-tabs.js

@@ -4,6 +4,12 @@
  * Markup: a [data-fdy-tabs] with a [role="tablist"] of
  * <button role="tab" aria-controls="PANEL" aria-selected> and matching
  * <div role="tabpanel" id="PANEL" aria-labelledby="TAB" [hidden]>.
+ *
+ * The arrow AXIS comes from the tablist's `aria-orientation`: `vertical` answers to Up and
+ * Down, anything else to Left and Right. One axis per tablist, which is what APG maps, and the
+ * other pair is left entirely alone rather than bound as a second axis: Left and Right over a
+ * column of tabs belong to whatever else is on the page, and a widget that preventDefaults a key
+ * it has no meaning for has taken it from the page silently. Home/End answer on both.
  */
 (function () {
   'use strict';
@@ -14,6 +20,19 @@
     if (tabs.length === 0) return;
     root.dataset.fdyTabsReady = '1';
 
+    /* The look follows `.fdy-tabs--vertical`, the behaviour follows `aria-orientation`, and this
+       makes the second agree with the first so an app states the axis once. The attribute always
+       wins when it is there: it is what an assistive technology announces, so nothing here may
+       overwrite one an author wrote. */
+    var list = root.querySelector('[role="tablist"]');
+    if (list !== null && list.getAttribute('aria-orientation') === null
+        && root.classList.contains('fdy-tabs--vertical')) {
+      list.setAttribute('aria-orientation', 'vertical');
+    }
+    var vertical = list !== null && list.getAttribute('aria-orientation') === 'vertical';
+    var NEXT_KEY = vertical ? 'ArrowDown' : 'ArrowRight';
+    var PREV_KEY = vertical ? 'ArrowUp' : 'ArrowLeft';
+
     function panelFor(tab) {
       var id = tab.getAttribute('aria-controls');
       return id ? document.getElementById(id) : null;
@@ -33,9 +52,9 @@
       tab.addEventListener('click', function () { select(tab, false); });
       tab.addEventListener('keydown', function (e) {
         switch (e.key) {
-          case 'ArrowRight':
+          case NEXT_KEY:
             e.preventDefault(); select(tabs[(i + 1) % tabs.length], true); break;
-          case 'ArrowLeft':
+          case PREV_KEY:
             e.preventDefault(); select(tabs[(i - 1 + tabs.length) % tabs.length], true); break;
           case 'Home':
             e.preventDefault(); select(tabs[0], true); break;

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;}
@@ -3056,6 +3073,37 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 /* Reveal the newly-shown panel on tab switch (fade + rise), reduced-motion gated. */
 @media (prefers-reduced-motion:no-preference){.fdy-tabs__panel:not([hidden]){animation:fdy-combo-in var(--dur-base) var(--ease-standard);}}
 
+/* VERTICAL VARIANT: the same tabs turned down the page, list on the leading side, panel beside it.
+ *
+ * Two markers, one each, and they are not interchangeable. The CLASS decides the look, because a
+ * stylesheet cannot reach a parent from a child and the two-column box belongs to `.fdy-tabs`
+ * itself. The ATTRIBUTE `aria-orientation="vertical"` on the tablist decides the keyboard, because
+ * that is the thing an assistive technology announces and APG requires it on a vertical tablist
+ * anyway. `freeday-tabs.js` writes the attribute when only the class is present, so an app states
+ * the axis once and the two can never disagree.
+ *
+ * Selection is a SOFT FILL here, not a leading edge bar. Sideways, the marker is an underline under
+ * the tab it belongs to; turned 90 degrees that line lands between two tabs and points at the wrong
+ * one. The kit already has an answer for "one item in a vertical list is where you are" and spends
+ * it in four places (`.fdy-nav__item[aria-current]`, the combo, cascade and autocomplete options):
+ * `--color-primary-soft` behind `--color-primary-strong`. Both are precomputed tone tokens, so this
+ * needs no color-mix() and no alpha of its own.
+ *
+ * What it deliberately does NOT do: pick a column width (set `--fdy-tabs-list-w`, default `auto`),
+ * and collapse to one column on a narrow screen. Whether these tabs are a whole page, a card or a
+ * drawer is the page's knowledge, not the component's, so the breakpoint is the page's to write. */
+.fdy-tabs--vertical{display:flex;align-items:flex-start;gap:var(--space-5);}
+/* `overflow:visible` on both axes, because the base strip scrolls sideways: a scroll container
+   clips to its padding box, and a column has no sideways overflow to scroll, only a focus ring to
+   lose. `box-shadow:none` drops the strip's own bottom line with it. */
+.fdy-tabs--vertical .fdy-tabs__list{flex:none;flex-direction:column;width:var(--fdy-tabs-list-w,auto);overflow:visible;box-shadow:none;}
+/* `white-space:normal` and `text-align:start` are corrections, not taste: a tab in a column of
+   fixed width that may not wrap will overflow it, and a button centres its label by default. */
+.fdy-tabs--vertical .fdy-tabs__tab{border-bottom:0;border-radius:var(--radius-md);text-align:start;white-space:normal;}
+.fdy-tabs--vertical .fdy-tabs__tab:focus-visible{border-radius:var(--radius-md);}
+.fdy-tabs--vertical .fdy-tabs__tab[aria-selected="true"],.fdy-tabs--vertical .fdy-tabs__tab[aria-current="page"]{background:var(--color-primary-soft);color:var(--color-primary-strong);font-weight:var(--weight-semibold);}
+.fdy-tabs--vertical .fdy-tabs__panel{flex:1;min-width:0;padding:0;}
+
 /* Freeday. Timeline (vertical event feed: dot markers on a connector line). Pure CSS. */
 .fdy-timeline{list-style:none;margin:0;padding:0;}
 .fdy-timeline__item{position:relative;padding:0 0 var(--space-5) var(--space-6);border-left:2px solid var(--color-border);}