@cahyo-dimas/freeday 1.32.1 → 1.34.0

package/adapters/vue/components/FdyTableFooter.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed, useId, type ComputedRef } from 'vue';
+import { pageWindow, pageIndexForSize } from '../../core/table-model.js';
+import type { FdyPageState } from '../../core/table-model';
+import FdyCombo from './FdyCombo.vue';
+
+/*
+ * The band under a table: what you are looking at, how much of it you see, where you are.
+ *
+ * `FdyTable` renders this itself, so most screens never import it. It is exported for the one shape
+ * that cannot use the table's own — a RESPONSIVE list, where a `.fdy-datatable` at `lg` and a
+ * `.fdy-list` below it are two renderings of ONE page of rows. A footer inside the table is inside
+ * the half that is hidden on a phone, so those screens need to render it once, outside both
+ * (improvement notes #005 and #008, from IDU_EMATE_APPL_WEB).
+ *
+ * It owns nothing. `page` in, `update:page` out — the same contract as the table's server mode, so a
+ * screen already wired for that switches by moving the prop.
+ */
+const props = defineProps<{
+  /** The page being shown. `size` drives the range AND the rows-per-page control's value. */
+  page: FdyPageState;
+  /**
+   * Offer a rows-per-page control. Omit for none — the footer is then range + pager, exactly as
+   * before. Picking a size emits `update:page` carrying the new `size` and the index that still
+   * holds the row you were looking at.
+   */
+  pageSizes?: readonly number[];
+}>();
+
+const emit = defineEmits<{ 'update:page': [page: FdyPageState] }>();
+
+/* The combo is labelled by the visible word beside it — a `<label for>` cannot reach inside a
+ * component, and an aria-label would leave that word unattached to anything. */
+const sizeLabelId: string = `fdy-rows-${useId()}`;
+
+const totalPages: ComputedRef<number> = computed((): number =>
+  props.page.size > 0 ? Math.max(1, Math.ceil(props.page.total / props.page.size)) : 1,
+);
+const currentPage1: ComputedRef<number> = computed((): number => props.page.index + 1);
+const rangeFrom: ComputedRef<number> = computed((): number =>
+  props.page.total === 0 ? 0 : props.page.index * props.page.size + 1,
+);
+const rangeTo: ComputedRef<number> = computed((): number =>
+  Math.min(props.page.total, (props.page.index + 1) * props.page.size),
+);
+const pages: ComputedRef<Array<number | 'ellipsis'>> = computed((): Array<number | 'ellipsis'> =>
+  pageWindow(currentPage1.value, totalPages.value),
+);
+
+const hasPager: ComputedRef<boolean> = computed((): boolean => props.page.size > 0 && totalPages.value > 1);
+const sizes: ComputedRef<readonly number[]> = computed((): readonly number[] => props.pageSizes ?? []);
+/* Just the number. The control sits beside a label reading "Rows", so "20 per page" states the same
+ * fact twice and truncates doing it. */
+const sizeOptions: ComputedRef<Array<{ value: string; label: string }>> = computed(() =>
+  sizes.value.map((size: number) => ({ value: String(size), label: String(size) })),
+);
+/* One page and no size control means there is nothing here to say — the table has always withheld
+ * the whole band in that case, and this is where that decision now lives. */
+const visible: ComputedRef<boolean> = computed((): boolean => hasPager.value || sizes.value.length > 0);
+
+function goTo(page1: number): void {
+  const clamped: number = Math.min(Math.max(1, page1), totalPages.value);
+  emit('update:page', { index: clamped - 1, size: props.page.size, total: props.page.total });
+}
+
+function onSize(value: string): void {
+  const size: number = Number(value);
+  if (!Number.isFinite(size) || size <= 0 || size === props.page.size) return;
+  emit('update:page', {
+    index: pageIndexForSize(props.page.index, props.page.size, size),
+    size,
+    total: props.page.total,
+  });
+}
+</script>
+
+<template>
+  <div v-if="visible" class="fdy-table-footer">
+    <span class="fdy-table-footer__info">Showing {{ rangeFrom }}–{{ rangeTo }} of {{ page.total }}</span>
+
+    <div v-if="sizes.length > 0" class="fdy-table-footer__size">
+      <span :id="sizeLabelId">Rows</span>
+      <!-- The kit's own listbox, not a native <select>: an OS menu is unthemeable, and on macOS it
+           drops a dark panel into a light page. FdyCombo's own header says exactly that. -->
+      <FdyCombo
+        :model-value="String(page.size)"
+        :options="sizeOptions"
+        :aria-labelledby="sizeLabelId"
+        @update:model-value="onSize"
+      />
+    </div>
+
+    <nav v-if="hasPager" aria-label="Pagination">
+      <ul class="fdy-pagination__list">
+        <li>
+          <button
+            type="button"
+            class="fdy-pagination__link"
+            aria-label="Previous page"
+            :disabled="currentPage1 === 1"
+            @click="goTo(currentPage1 - 1)"
+          >‹</button>
+        </li>
+        <li v-for="(p, i) in pages" :key="typeof p === 'number' ? p : `gap-${i}`">
+          <span v-if="p === 'ellipsis'" class="fdy-pagination__ellipsis">…</span>
+          <span v-else-if="p === currentPage1" class="fdy-pagination__link" aria-current="page">{{ p }}</span>
+          <button v-else type="button" class="fdy-pagination__link" :aria-label="`Go to page ${p}`" @click="goTo(p)">{{ p }}</button>
+        </li>
+        <li>
+          <button
+            type="button"
+            class="fdy-pagination__link"
+            aria-label="Next page"
+            :disabled="currentPage1 === totalPages"
+            @click="goTo(currentPage1 + 1)"
+          >›</button>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>

package/adapters/vue/index.d.ts

@@ -12,6 +12,19 @@ export interface UseFreedayReturn {
  */
 export declare function useFreeday(rootRef?: Ref<HTMLElement | null>): UseFreedayReturn;
 
+/**
+ * Anchor a dropdown panel to its trigger in the top layer, so it escapes any ancestor overflow clip
+ * — `.fdy-card` is `overflow:hidden`, so a panel positioned inside one is otherwise cut at the card's
+ * edge. The panel element must carry `popover="manual"`. This is the plumbing every kit dropdown
+ * uses; it is exported so a control the kit does not ship can behave like one that it does, instead
+ * of each app re-implementing it from the description.
+ */
+export declare function usePopover(
+  panelRef: Ref<HTMLElement | null>,
+  triggerRef: Ref<HTMLElement | null>,
+  open: Ref<boolean>,
+): void;
+
 export { default as FdyCombo } from './components/FdyCombo.vue';
 export { default as FdyDatepicker } from './components/FdyDatepicker.vue';
 export { default as FdyDateRange } from './components/FdyDateRange.vue';
@@ -22,6 +35,9 @@ export type { CascadeNode } from './components/FdyCascade.vue';
 export { default as FdyCfl } from './components/FdyCfl.vue';
 export { default as FdyChart } from './components/FdyChart.vue';
 export { default as FdyTable } from './components/FdyTable.vue';
+/** The table's own footer, standalone — for a responsive list whose table is hidden at some
+ *  breakpoints and so cannot host it. */
+export { default as FdyTableFooter } from './components/FdyTableFooter.vue';
 export { default as FdyModal } from './components/FdyModal.vue';
 export { default as FdyDrawer } from './components/FdyDrawer.vue';
 

package/adapters/vue/index.js

@@ -1,4 +1,5 @@
 export { useFreeday } from './useFreeday.js';
+export { usePopover } from './usePopover.ts';
 export { default as FdyCombo } from './components/FdyCombo.vue';
 export { default as FdyDatepicker } from './components/FdyDatepicker.vue';
 export { default as FdyDateRange } from './components/FdyDateRange.vue';
@@ -7,5 +8,6 @@ export { default as FdyCascade } from './components/FdyCascade.vue';
 export { default as FdyCfl } from './components/FdyCfl.vue';
 export { default as FdyChart } from './components/FdyChart.vue';
 export { default as FdyTable } from './components/FdyTable.vue';
+export { default as FdyTableFooter } from './components/FdyTableFooter.vue';
 export { default as FdyModal } from './components/FdyModal.vue';
 export { default as FdyDrawer } from './components/FdyDrawer.vue';

package/dist/freeday-table.js

@@ -8,7 +8,8 @@
  * a `<table class="fdy-table">` whose sortable headers hold
  * `<button class="fdy-table__sortbtn" data-fdy-sort[="number"]>`, optional
  * selection checkboxes (`[data-fdy-select-all]`, `[data-fdy-row-select]`), and a
- * `.fdy-table-footer` (with `[data-fdy-table-info]`, `[data-fdy-table-pagination]`).
+ * `.fdy-table-footer` (with `[data-fdy-table-info]`, `[data-fdy-table-pagination]`, and an
+ * optional `<select data-fdy-table-page-size>` whose options are row counts).
  * Numeric columns should give each cell a `data-sort-value`.
  *
  * Column filters: mark a header `<th data-fdy-filter="text|enum|number">` and a funnel
@@ -44,6 +45,7 @@
     var countEl = root.querySelector('[data-fdy-table-count]');
     var infoEl = root.querySelector('[data-fdy-table-info]');
     var pagerEl = root.querySelector('[data-fdy-table-pagination]');
+    var pageSizeEl = root.querySelector('[data-fdy-table-page-size]');
     var selectAll = root.querySelector('[data-fdy-select-all]');
     var pageSize = parseInt(root.getAttribute('data-page-size'), 10) || 0; // 0 = no pagination
 
@@ -440,6 +442,27 @@
       updateBulk();
     });
 
+    /* Rows per page. The select is app-authored markup (its options ARE the offer), so this only
+     * wires it: adopt whatever it currently shows, and on a change keep the reader on the row they
+     * were looking at rather than sending them back to page 1. */
+    if (pageSizeEl) {
+      var chosen = parseInt(pageSizeEl.value, 10);
+      if (chosen > 0) pageSize = chosen;
+      var onPageSize = function (e) {
+        var raw = (e && e.detail && e.detail.value != null) ? e.detail.value : pageSizeEl.value;
+        var next = parseInt(raw, 10);
+        if (!(next > 0) || next === pageSize) return;
+        var firstRow = (page - 1) * pageSize;
+        pageSize = next;
+        page = Math.floor(firstRow / next) + 1;
+        render();
+      };
+      /* Both kinds: a native <select> fires `change`, and `.fdy-combo` (freeday-select.js) fires
+       * `fdy-change` with the value in `detail`. A raw page may use either. */
+      pageSizeEl.addEventListener('change', onPageSize);
+      pageSizeEl.addEventListener('fdy-change', onPageSize);
+    }
+
     if (bulkClear) bulkClear.addEventListener('click', clearSelection);
 
     // Dismiss an open filter popover on outside click or Escape.

package/dist/freeday.bundle.css

@@ -446,7 +446,7 @@ a { color: var(--color-primary); }
 .fdy-alert__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin-top:.05rem;}
 .fdy-alert__icon svg{width:100%;height:100%;}
 .fdy-alert__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);}
-.fdy-alert__title{font-weight:var(--weight-semibold);color:var(--color-text);}
+.fdy-alert__title{font-size:inherit;font-weight:var(--weight-semibold);color:var(--color-text);margin:0;}
 .fdy-alert__text{color:var(--color-text);line-height:var(--leading-normal);}
 .fdy-alert__close{flex:none;align-self:flex-start;border:0;background:transparent;color:var(--color-text-muted);cursor:pointer;font-size:var(--text-lg);line-height:1;padding:0 var(--space-1);border-radius:var(--radius-sm);}
 .fdy-alert__close:hover{color:var(--color-text);}
@@ -483,8 +483,8 @@ a { color: var(--color-primary); }
 .fdy-app__brand-mark{flex:none;width:1.5rem;height:1.5rem;}
 .fdy-app__brand-mark svg{display:block;width:100%;height:100%;}
 .fdy-app__brand-text{display:flex;flex-direction:column;min-width:0;}
-.fdy-app__brand-title{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-.fdy-app__brand-subtitle{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-app__brand-title{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-text);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-app__brand-subtitle{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-3) var(--space-6);}
 /* Horizontal variant — the SAME nav links laid out as a row, for a top-nav application (one that
  * puts its primary navigation in `.fdy-appbar` / `.fdy-app__topbar` and has no sidebar). Deliberately
@@ -510,7 +510,11 @@ a { color: var(--color-primary); }
 /* Collapsible section: <details class="fdy-nav__group"><summary class="fdy-nav__grouplabel"> */
 .fdy-nav__group{margin:0;}
 .fdy-nav__group + .fdy-nav__group,.fdy-nav__item + .fdy-nav__group{border-top:var(--bw) solid var(--color-border-muted);margin-top:var(--space-1);padding-top:var(--space-1);}
-.fdy-nav__grouplabel{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-3) var(--space-1);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:var(--weight-semibold);color:var(--color-text-subtle);}
+/* Prose, and a control name: this is the <summary> of a nav group, at --text-xs uppercase. It is
+   the second class found spending the decorative ink on type (after .fdy-eyebrow) — and it was
+   already brightening to --color-text-muted on hover, which is the rule admitting its resting
+   state was too faint to read. */
+.fdy-nav__grouplabel{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-3) var(--space-1);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
 .fdy-nav__grouplabel::-webkit-details-marker{display:none;}
 .fdy-nav__grouplabel:hover{color:var(--color-text-muted);}
 .fdy-nav__grouplabel:focus-visible{outline:none;border-radius:var(--radius-sm);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
@@ -702,9 +706,20 @@ a { color: var(--color-primary); }
 .fdy-btn--ghost:hover{transform:none;background:var(--color-primary-soft);border-color:var(--color-primary-border);box-shadow:var(--shadow-1);}
 .fdy-btn--ghost:active{transform:translateY(1px);}
 
+/* --danger used to be the SOLID treatment and nothing else, so `fdy-btn--ghost fdy-btn--danger` —
+   which every reader parses as "quiet destructive" — rendered a second SOLID button beside Save.
+   That is a hierarchy defect, not a cosmetic one: the base class is already the one primary per
+   screen. `.fdy-menu__item--danger` has always modelled the quiet form (red text, not a red block);
+   the pairing rules below bring it to the button. They are more specific than this one and come
+   after it, so this rule needs no :not() guard of its own — one mechanism, not two. */
 .fdy-btn--danger{background:linear-gradient(180deg,var(--color-danger-btn),color-mix(in srgb,#000 12%,var(--color-danger-btn)));color:var(--color-on-danger);box-shadow:0 2px 9px -1px color-mix(in srgb,var(--color-danger-btn) 46%,transparent),inset 0 1px 0 rgba(255,255,255,.22);}
 .fdy-btn--danger:hover{transform:translateY(-1px);box-shadow:0 6px 18px -2px color-mix(in srgb,var(--color-danger-btn) 54%,transparent),inset 0 1px 0 rgba(255,255,255,.22);}
 .fdy-btn--danger:active{transform:translateY(1px);}
+/* Quiet destructive: the variant keeps its own ground and only the ink turns. */
+.fdy-btn--ghost.fdy-btn--danger{background:transparent;color:var(--color-danger-strong);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent);box-shadow:none;}
+.fdy-btn--ghost.fdy-btn--danger:hover{background:var(--color-danger-soft);border-color:var(--color-danger);color:var(--color-danger-strong);}
+.fdy-btn--text.fdy-btn--danger{background:none;color:var(--color-danger-strong);border-color:transparent;box-shadow:none;}
+.fdy-btn--text.fdy-btn--danger:hover{background:var(--color-danger-soft);color:var(--color-danger-strong);}
 .fdy-btn--danger[aria-pressed="true"]{background:linear-gradient(180deg,color-mix(in srgb,#000 14%,var(--color-danger-btn)),var(--color-danger-btn));box-shadow:inset 0 2px 6px color-mix(in srgb,#000 24%,transparent);}
 
 .fdy-btn--sm{height:calc(var(--control-h) - var(--space-2));padding:0 var(--space-3);font-size:var(--text-xs);border-radius:var(--radius-sm);}
@@ -886,7 +901,7 @@ a { color: var(--color-primary); }
 .fdy-cfl__check input{pointer-events:none;}
 
 /* Empty result state. */
-.fdy-cfl__empty{padding:var(--space-8) var(--space-5);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);}
+.fdy-cfl__empty{padding:var(--space-8) var(--space-5);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);margin:0;}
 .fdy-cfl__empty[hidden]{display:none;}
 
 /* Footer — selection count (multi) sits left, actions right. */
@@ -1032,7 +1047,11 @@ a { color: var(--color-primary); }
 /* ---- Type roles (three title levels + supporting text) -------------------------------------
  * One role per level of hierarchy. Reach for these instead of re-using .fdy-card__title for a
  * page title (the mistake that collapses three levels into one grey mush). */
-.fdy-eyebrow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-subtle);}
+/* --color-text-muted, not -subtle: an eyebrow is a small label naming the thing below it, i.e.
+   prose. -subtle is gated at 3.0 on purpose (placeholders, separators, decorative glyphs) and
+   measures 4.41 on the page ground — axe reports it as a serious color-contrast failure. Same
+   argument, same ink, same 4.41 as .fdy-stat__label in 1.30.0. */
+.fdy-eyebrow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted);margin:0;}
 .fdy-title-page{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:var(--leading-tight);color:var(--color-text);margin:0;text-wrap:balance;}
 .fdy-title-section{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);color:var(--color-text);margin:0;text-wrap:balance;}
 .fdy-title-card{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--color-text);margin:0;}
@@ -1123,12 +1142,9 @@ a { color: var(--color-primary); }
 .fdy-cal__head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);}
 /* The title is a CONTROL now (#004 §1): it drills to the month grid, so it needs the UA button box
    reset and the same hover/focus treatment as the arrows beside it. */
-.fdy-cal__title{flex:1;appearance:none;border:0;background:transparent;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);text-align:center;font-family:inherit;font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--color-text);text-transform:capitalize;cursor:pointer;}
+.fdy-cal__title{flex:1;appearance:none;border:0;background:transparent;margin:0;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);text-align:center;font-family:inherit;font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--color-text);text-transform:capitalize;cursor:pointer;}
 .fdy-cal__title:hover{background:var(--color-surface-2);}
 .fdy-cal__title:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
-/* Month grid — 3×4 over the same track width as the 7-column day grid, so the panel does not resize
-   when you drill and the pointer does not have to travel. */
-.fdy-cal__grid--months{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
 .fdy-cal__month{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-family:inherit;font-size:var(--text-sm);text-transform:capitalize;cursor:pointer;}
 .fdy-cal__month:hover{background:var(--color-surface-2);}
 .fdy-cal__month:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
@@ -1139,6 +1155,13 @@ a { color: var(--color-primary); }
 .fdy-cal__nav:hover{background:var(--color-surface-2);color:var(--color-text);}
 .fdy-cal__nav:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-cal__grid{display:grid;grid-template-columns:repeat(7,2rem);gap:2px;}
+/* Month grid — 3×4 over the same track width as the 7-column day grid, so the panel does not resize
+   when you drill and the pointer does not have to travel.
+
+   AFTER `.fdy-cal__grid`, and that is the whole rule: the element carries both classes, they weigh
+   the same, so source order decides. Declared earlier, the modifier lost to the base it modifies and
+   twelve months rendered seven across — the layout the comment above described, never once applied. */
+.fdy-cal__grid--months{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
 .fdy-cal__dow{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:capitalize;}
 .fdy-cal__day{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-size:var(--text-sm);font-variant-numeric:tabular-nums;cursor:pointer;}
 .fdy-cal__day:hover{background:var(--color-surface-2);}
@@ -1219,7 +1242,7 @@ a { color: var(--color-primary); }
 .fdy-dropzone__icon{color:var(--color-text-subtle);}
 .fdy-dropzone.is-dragover .fdy-dropzone__icon{color:var(--color-primary);}
 .fdy-dropzone__icon svg{display:block;width:2rem;height:2rem;}
-.fdy-dropzone__title{font-weight:var(--weight-medium);color:var(--color-text);}
+.fdy-dropzone__title{font-size:inherit;font-weight:var(--weight-medium);color:var(--color-text);margin:0;}
 .fdy-dropzone__hint{font-size:var(--text-xs);}
 /* Wide (horizontal) layout — icon beside the copy instead of stacked, for full-width
  * sections. Wrap the title + hint in .fdy-dropzone__text. */
@@ -1406,7 +1429,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-list__row--button:disabled:hover,.fdy-list__row--button[aria-disabled="true"]:hover,.fdy-list__row--interactive[aria-disabled="true"]:hover{background:none;}
 /* Row internals: a title/meta stack that truncates, and a trailing slot pinned right. */
 .fdy-list__main{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;flex:1;}
-.fdy-list__title{font-weight:var(--weight-medium);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-list__title{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-medium);letter-spacing:normal;color:var(--color-text);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-list__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
 .fdy-list__aside{flex:none;display:flex;align-items:center;gap:var(--space-2);}
 /* Density: rows tighten with the rest of the kit (--space-* mid-range steps under compact). */
@@ -1563,7 +1586,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-10) var(--space-6);}
 .fdy-state__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--color-text-subtle);}
 .fdy-state__icon svg{width:100%;height:100%;}
-.fdy-state__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);}
+.fdy-state__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0;}
 .fdy-state__text{font-size:var(--text-sm);color:var(--color-text-muted);max-width:24rem;line-height:var(--leading-normal);}
 .fdy-state__actions{margin-top:var(--space-2);display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;}
 .fdy-state--danger .fdy-state__icon{color:var(--color-danger-strong);}
@@ -1643,6 +1666,18 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table-toolbar__count{font-size:var(--text-sm);color:var(--color-text-muted);white-space:nowrap;}
 .fdy-table-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:var(--bw) solid var(--color-border);}
 .fdy-table-footer__info{font-size:var(--text-sm);color:var(--color-text-muted);}
+/* Rows per page. `margin-left:auto` eats the free space, so the size control and the pager travel
+   together on the right while the range stays left — no wrapper element, which is what keeps the
+   footer's DOM byte-identical for the tables that don't offer one (#008). The control is the kit's
+   own `.fdy-combo`, never a native <select>: an OS menu is unthemeable, and on macOS it drops a
+   dark panel into a light page — which is the reason FdyCombo exists at all. Sized to its content:
+   `.fdy-combo` is display:block at max-width 22rem, which in a footer is a bar-wide box for two
+   digits. Its HEIGHT is left alone on purpose — `--control-h`, the same as every other control on
+   the page. It briefly carried 2.25rem to match the pager links beside it, which made the one
+   combobox in a compact app 4px taller than all the others; a pager link is a nav button, and the
+   thing this must agree with is the form controls. */
+.fdy-table-footer__size{display:inline-flex;align-items:center;gap:var(--space-2);margin-left:auto;font-size:var(--text-sm);color:var(--color-text-muted);}
+.fdy-table-footer__size .fdy-combo{width:5.5rem;}
 
 /* Column filter — funnel button injected (enhancer) or rendered (FdyTable) into a filterable <th> */
 .fdy-table__filterwrap{display:inline-flex;align-items:center;vertical-align:middle;}
@@ -1734,7 +1769,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-toast--danger .fdy-toast__accent{background:var(--color-danger);}
 .fdy-toast--info .fdy-toast__accent{background:var(--color-info);}
 .fdy-toast__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-sm);}
-.fdy-toast__title{font-weight:var(--weight-semibold);}
+.fdy-toast__title{font-size:inherit;font-weight:var(--weight-semibold);margin:0;}
 .fdy-toast__text{opacity:.88;line-height:var(--leading-normal);}
 .fdy-toast__close{flex:none;border:0;background:transparent;color:var(--color-inverse-text);opacity:.7;cursor:pointer;font-size:var(--text-lg);line-height:1;padding:0 var(--space-1);border-radius:var(--radius-sm);}
 .fdy-toast__close:hover{opacity:1;}

package/dist/freeday.css

@@ -63,7 +63,7 @@ a { color: var(--color-primary); }
 .fdy-alert__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;margin-top:.05rem;}
 .fdy-alert__icon svg{width:100%;height:100%;}
 .fdy-alert__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);}
-.fdy-alert__title{font-weight:var(--weight-semibold);color:var(--color-text);}
+.fdy-alert__title{font-size:inherit;font-weight:var(--weight-semibold);color:var(--color-text);margin:0;}
 .fdy-alert__text{color:var(--color-text);line-height:var(--leading-normal);}
 .fdy-alert__close{flex:none;align-self:flex-start;border:0;background:transparent;color:var(--color-text-muted);cursor:pointer;font-size:var(--text-lg);line-height:1;padding:0 var(--space-1);border-radius:var(--radius-sm);}
 .fdy-alert__close:hover{color:var(--color-text);}
@@ -100,8 +100,8 @@ a { color: var(--color-primary); }
 .fdy-app__brand-mark{flex:none;width:1.5rem;height:1.5rem;}
 .fdy-app__brand-mark svg{display:block;width:100%;height:100%;}
 .fdy-app__brand-text{display:flex;flex-direction:column;min-width:0;}
-.fdy-app__brand-title{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
-.fdy-app__brand-subtitle{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-app__brand-title{display:block;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--color-text);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-app__brand-subtitle{display:block;font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--color-text-muted);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-nav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-3) var(--space-6);}
 /* Horizontal variant — the SAME nav links laid out as a row, for a top-nav application (one that
  * puts its primary navigation in `.fdy-appbar` / `.fdy-app__topbar` and has no sidebar). Deliberately
@@ -127,7 +127,11 @@ a { color: var(--color-primary); }
 /* Collapsible section: <details class="fdy-nav__group"><summary class="fdy-nav__grouplabel"> */
 .fdy-nav__group{margin:0;}
 .fdy-nav__group + .fdy-nav__group,.fdy-nav__item + .fdy-nav__group{border-top:var(--bw) solid var(--color-border-muted);margin-top:var(--space-1);padding-top:var(--space-1);}
-.fdy-nav__grouplabel{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-3) var(--space-1);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:var(--weight-semibold);color:var(--color-text-subtle);}
+/* Prose, and a control name: this is the <summary> of a nav group, at --text-xs uppercase. It is
+   the second class found spending the decorative ink on type (after .fdy-eyebrow) — and it was
+   already brightening to --color-text-muted on hover, which is the rule admitting its resting
+   state was too faint to read. */
+.fdy-nav__grouplabel{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-3) var(--space-1);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:var(--tracking-wide);font-weight:var(--weight-semibold);color:var(--color-text-muted);}
 .fdy-nav__grouplabel::-webkit-details-marker{display:none;}
 .fdy-nav__grouplabel:hover{color:var(--color-text-muted);}
 .fdy-nav__grouplabel:focus-visible{outline:none;border-radius:var(--radius-sm);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 45%,transparent);}
@@ -319,9 +323,20 @@ a { color: var(--color-primary); }
 .fdy-btn--ghost:hover{transform:none;background:var(--color-primary-soft);border-color:var(--color-primary-border);box-shadow:var(--shadow-1);}
 .fdy-btn--ghost:active{transform:translateY(1px);}
 
+/* --danger used to be the SOLID treatment and nothing else, so `fdy-btn--ghost fdy-btn--danger` —
+   which every reader parses as "quiet destructive" — rendered a second SOLID button beside Save.
+   That is a hierarchy defect, not a cosmetic one: the base class is already the one primary per
+   screen. `.fdy-menu__item--danger` has always modelled the quiet form (red text, not a red block);
+   the pairing rules below bring it to the button. They are more specific than this one and come
+   after it, so this rule needs no :not() guard of its own — one mechanism, not two. */
 .fdy-btn--danger{background:linear-gradient(180deg,var(--color-danger-btn),color-mix(in srgb,#000 12%,var(--color-danger-btn)));color:var(--color-on-danger);box-shadow:0 2px 9px -1px color-mix(in srgb,var(--color-danger-btn) 46%,transparent),inset 0 1px 0 rgba(255,255,255,.22);}
 .fdy-btn--danger:hover{transform:translateY(-1px);box-shadow:0 6px 18px -2px color-mix(in srgb,var(--color-danger-btn) 54%,transparent),inset 0 1px 0 rgba(255,255,255,.22);}
 .fdy-btn--danger:active{transform:translateY(1px);}
+/* Quiet destructive: the variant keeps its own ground and only the ink turns. */
+.fdy-btn--ghost.fdy-btn--danger{background:transparent;color:var(--color-danger-strong);border-color:color-mix(in srgb,var(--color-danger) 40%,transparent);box-shadow:none;}
+.fdy-btn--ghost.fdy-btn--danger:hover{background:var(--color-danger-soft);border-color:var(--color-danger);color:var(--color-danger-strong);}
+.fdy-btn--text.fdy-btn--danger{background:none;color:var(--color-danger-strong);border-color:transparent;box-shadow:none;}
+.fdy-btn--text.fdy-btn--danger:hover{background:var(--color-danger-soft);color:var(--color-danger-strong);}
 .fdy-btn--danger[aria-pressed="true"]{background:linear-gradient(180deg,color-mix(in srgb,#000 14%,var(--color-danger-btn)),var(--color-danger-btn));box-shadow:inset 0 2px 6px color-mix(in srgb,#000 24%,transparent);}
 
 .fdy-btn--sm{height:calc(var(--control-h) - var(--space-2));padding:0 var(--space-3);font-size:var(--text-xs);border-radius:var(--radius-sm);}
@@ -503,7 +518,7 @@ a { color: var(--color-primary); }
 .fdy-cfl__check input{pointer-events:none;}
 
 /* Empty result state. */
-.fdy-cfl__empty{padding:var(--space-8) var(--space-5);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);}
+.fdy-cfl__empty{padding:var(--space-8) var(--space-5);text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);margin:0;}
 .fdy-cfl__empty[hidden]{display:none;}
 
 /* Footer — selection count (multi) sits left, actions right. */
@@ -649,7 +664,11 @@ a { color: var(--color-primary); }
 /* ---- Type roles (three title levels + supporting text) -------------------------------------
  * One role per level of hierarchy. Reach for these instead of re-using .fdy-card__title for a
  * page title (the mistake that collapses three levels into one grey mush). */
-.fdy-eyebrow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-subtle);}
+/* --color-text-muted, not -subtle: an eyebrow is a small label naming the thing below it, i.e.
+   prose. -subtle is gated at 3.0 on purpose (placeholders, separators, decorative glyphs) and
+   measures 4.41 on the page ground — axe reports it as a serious color-contrast failure. Same
+   argument, same ink, same 4.41 as .fdy-stat__label in 1.30.0. */
+.fdy-eyebrow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-muted);margin:0;}
 .fdy-title-page{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tighter);line-height:var(--leading-tight);color:var(--color-text);margin:0;text-wrap:balance;}
 .fdy-title-section{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);line-height:var(--leading-snug);color:var(--color-text);margin:0;text-wrap:balance;}
 .fdy-title-card{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-tight);color:var(--color-text);margin:0;}
@@ -740,12 +759,9 @@ a { color: var(--color-primary); }
 .fdy-cal__head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);}
 /* The title is a CONTROL now (#004 §1): it drills to the month grid, so it needs the UA button box
    reset and the same hover/focus treatment as the arrows beside it. */
-.fdy-cal__title{flex:1;appearance:none;border:0;background:transparent;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);text-align:center;font-family:inherit;font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--color-text);text-transform:capitalize;cursor:pointer;}
+.fdy-cal__title{flex:1;appearance:none;border:0;background:transparent;margin:0;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);text-align:center;font-family:inherit;font-weight:var(--weight-semibold);font-size:var(--text-sm);color:var(--color-text);text-transform:capitalize;cursor:pointer;}
 .fdy-cal__title:hover{background:var(--color-surface-2);}
 .fdy-cal__title:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
-/* Month grid — 3×4 over the same track width as the 7-column day grid, so the panel does not resize
-   when you drill and the pointer does not have to travel. */
-.fdy-cal__grid--months{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
 .fdy-cal__month{display:inline-flex;align-items:center;justify-content:center;height:2.25rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-family:inherit;font-size:var(--text-sm);text-transform:capitalize;cursor:pointer;}
 .fdy-cal__month:hover{background:var(--color-surface-2);}
 .fdy-cal__month:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
@@ -756,6 +772,13 @@ a { color: var(--color-primary); }
 .fdy-cal__nav:hover{background:var(--color-surface-2);color:var(--color-text);}
 .fdy-cal__nav:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 26%,transparent);}
 .fdy-cal__grid{display:grid;grid-template-columns:repeat(7,2rem);gap:2px;}
+/* Month grid — 3×4 over the same track width as the 7-column day grid, so the panel does not resize
+   when you drill and the pointer does not have to travel.
+
+   AFTER `.fdy-cal__grid`, and that is the whole rule: the element carries both classes, they weigh
+   the same, so source order decides. Declared earlier, the modifier lost to the base it modifies and
+   twelve months rendered seven across — the layout the comment above described, never once applied. */
+.fdy-cal__grid--months{grid-template-columns:repeat(3,1fr);gap:var(--space-1);}
 .fdy-cal__dow{display:flex;align-items:center;justify-content:center;height:1.75rem;font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-muted);text-transform:capitalize;}
 .fdy-cal__day{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font-size:var(--text-sm);font-variant-numeric:tabular-nums;cursor:pointer;}
 .fdy-cal__day:hover{background:var(--color-surface-2);}
@@ -836,7 +859,7 @@ a { color: var(--color-primary); }
 .fdy-dropzone__icon{color:var(--color-text-subtle);}
 .fdy-dropzone.is-dragover .fdy-dropzone__icon{color:var(--color-primary);}
 .fdy-dropzone__icon svg{display:block;width:2rem;height:2rem;}
-.fdy-dropzone__title{font-weight:var(--weight-medium);color:var(--color-text);}
+.fdy-dropzone__title{font-size:inherit;font-weight:var(--weight-medium);color:var(--color-text);margin:0;}
 .fdy-dropzone__hint{font-size:var(--text-xs);}
 /* Wide (horizontal) layout — icon beside the copy instead of stacked, for full-width
  * sections. Wrap the title + hint in .fdy-dropzone__text. */
@@ -1023,7 +1046,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-list__row--button:disabled:hover,.fdy-list__row--button[aria-disabled="true"]:hover,.fdy-list__row--interactive[aria-disabled="true"]:hover{background:none;}
 /* Row internals: a title/meta stack that truncates, and a trailing slot pinned right. */
 .fdy-list__main{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;flex:1;}
-.fdy-list__title{font-weight:var(--weight-medium);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-list__title{font-family:var(--font-body);font-size:var(--text-base);font-weight:var(--weight-medium);letter-spacing:normal;color:var(--color-text);margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .fdy-list__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
 .fdy-list__aside{flex:none;display:flex;align-items:center;gap:var(--space-2);}
 /* Density: rows tighten with the rest of the kit (--space-* mid-range steps under compact). */
@@ -1180,7 +1203,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-10) var(--space-6);}
 .fdy-state__icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;color:var(--color-text-subtle);}
 .fdy-state__icon svg{width:100%;height:100%;}
-.fdy-state__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);}
+.fdy-state__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0;}
 .fdy-state__text{font-size:var(--text-sm);color:var(--color-text-muted);max-width:24rem;line-height:var(--leading-normal);}
 .fdy-state__actions{margin-top:var(--space-2);display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;}
 .fdy-state--danger .fdy-state__icon{color:var(--color-danger-strong);}
@@ -1260,6 +1283,18 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-table-toolbar__count{font-size:var(--text-sm);color:var(--color-text-muted);white-space:nowrap;}
 .fdy-table-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-3) var(--space-4);border-top:var(--bw) solid var(--color-border);}
 .fdy-table-footer__info{font-size:var(--text-sm);color:var(--color-text-muted);}
+/* Rows per page. `margin-left:auto` eats the free space, so the size control and the pager travel
+   together on the right while the range stays left — no wrapper element, which is what keeps the
+   footer's DOM byte-identical for the tables that don't offer one (#008). The control is the kit's
+   own `.fdy-combo`, never a native <select>: an OS menu is unthemeable, and on macOS it drops a
+   dark panel into a light page — which is the reason FdyCombo exists at all. Sized to its content:
+   `.fdy-combo` is display:block at max-width 22rem, which in a footer is a bar-wide box for two
+   digits. Its HEIGHT is left alone on purpose — `--control-h`, the same as every other control on
+   the page. It briefly carried 2.25rem to match the pager links beside it, which made the one
+   combobox in a compact app 4px taller than all the others; a pager link is a nav button, and the
+   thing this must agree with is the form controls. */
+.fdy-table-footer__size{display:inline-flex;align-items:center;gap:var(--space-2);margin-left:auto;font-size:var(--text-sm);color:var(--color-text-muted);}
+.fdy-table-footer__size .fdy-combo{width:5.5rem;}
 
 /* Column filter — funnel button injected (enhancer) or rendered (FdyTable) into a filterable <th> */
 .fdy-table__filterwrap{display:inline-flex;align-items:center;vertical-align:middle;}
@@ -1351,7 +1386,7 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-toast--danger .fdy-toast__accent{background:var(--color-danger);}
 .fdy-toast--info .fdy-toast__accent{background:var(--color-info);}
 .fdy-toast__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-sm);}
-.fdy-toast__title{font-weight:var(--weight-semibold);}
+.fdy-toast__title{font-size:inherit;font-weight:var(--weight-semibold);margin:0;}
 .fdy-toast__text{opacity:.88;line-height:var(--leading-normal);}
 .fdy-toast__close{flex:none;border:0;background:transparent;color:var(--color-inverse-text);opacity:.7;cursor:pointer;font-size:var(--text-lg);line-height:1;padding:0 var(--space-1);border-radius:var(--radius-sm);}
 .fdy-toast__close:hover{opacity:1;}

package/dist/freeday.js

@@ -2871,7 +2871,8 @@
  * a `<table class="fdy-table">` whose sortable headers hold
  * `<button class="fdy-table__sortbtn" data-fdy-sort[="number"]>`, optional
  * selection checkboxes (`[data-fdy-select-all]`, `[data-fdy-row-select]`), and a
- * `.fdy-table-footer` (with `[data-fdy-table-info]`, `[data-fdy-table-pagination]`).
+ * `.fdy-table-footer` (with `[data-fdy-table-info]`, `[data-fdy-table-pagination]`, and an
+ * optional `<select data-fdy-table-page-size>` whose options are row counts).
  * Numeric columns should give each cell a `data-sort-value`.
  *
  * Column filters: mark a header `<th data-fdy-filter="text|enum|number">` and a funnel
@@ -2907,6 +2908,7 @@
     var countEl = root.querySelector('[data-fdy-table-count]');
     var infoEl = root.querySelector('[data-fdy-table-info]');
     var pagerEl = root.querySelector('[data-fdy-table-pagination]');
+    var pageSizeEl = root.querySelector('[data-fdy-table-page-size]');
     var selectAll = root.querySelector('[data-fdy-select-all]');
     var pageSize = parseInt(root.getAttribute('data-page-size'), 10) || 0; // 0 = no pagination
 
@@ -3303,6 +3305,27 @@
       updateBulk();
     });
 
+    /* Rows per page. The select is app-authored markup (its options ARE the offer), so this only
+     * wires it: adopt whatever it currently shows, and on a change keep the reader on the row they
+     * were looking at rather than sending them back to page 1. */
+    if (pageSizeEl) {
+      var chosen = parseInt(pageSizeEl.value, 10);
+      if (chosen > 0) pageSize = chosen;
+      var onPageSize = function (e) {
+        var raw = (e && e.detail && e.detail.value != null) ? e.detail.value : pageSizeEl.value;
+        var next = parseInt(raw, 10);
+        if (!(next > 0) || next === pageSize) return;
+        var firstRow = (page - 1) * pageSize;
+        pageSize = next;
+        page = Math.floor(firstRow / next) + 1;
+        render();
+      };
+      /* Both kinds: a native <select> fires `change`, and `.fdy-combo` (freeday-select.js) fires
+       * `fdy-change` with the value in `detail`. A raw page may use either. */
+      pageSizeEl.addEventListener('change', onPageSize);
+      pageSizeEl.addEventListener('fdy-change', onPageSize);
+    }
+
     if (bulkClear) bulkClear.addEventListener('click', clearSelection);
 
     // Dismiss an open filter popover on outside click or Escape.

package/docs/agent-onboarding.md

@@ -122,6 +122,8 @@ Recent additions most likely to replace something an app hand-rolled (all detail
 | `.fdy-text-warning` / `-danger` / `-success` | a caption class on a line that should stand out |
 | `.fdy-icon` | your own `width:1em;height:1em` rule, once per project |
 | `data-density="comfortable"` | restating the default spacing tokens on a wrapper |
+| `pageSizes` on `FdyTable` | a rows-per-page control bolted above the table, away from the pager |
+| `FdyTableFooter` | rebuilding the range + pager to add a size control, on a responsive list |
 | the calendar's month grid (press the title) | clicking "previous month" thirty times |
 
 ## 3. Starting a new screen

package/docs/getting-started.md

@@ -184,7 +184,7 @@ live docs also have a copy button per component.
 ```bash
 npm i @cahyo-dimas/freeday
 ```
-Lands in `package.json` as `"@cahyo-dimas/freeday": "^1.32.1"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^1.34.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`)

package/docs/integrations.md

@@ -319,3 +319,17 @@ web-based add-ons (Service Layer + .NET), Freeday + enhancers over JS interop wo
 *Library recommendations reflect what's common and stable as of 2026; choose based on your
 project's license and bundle-size budget. Freeday locks you into none of them — everything is
 optional and replaceable.*
+
+## Building a control the kit does not ship
+
+Use the `app-` prefix for its classes, and reuse the kit's plumbing rather than re-deriving it:
+
+```ts
+import { usePopover } from '@cahyo-dimas/freeday/vue';   // or '/react'
+usePopover(panelRef, triggerRef, open);                  // panel needs popover="manual"
+```
+
+This is what every kit dropdown uses to escape an ancestor's overflow clip — `.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.