@cahyo-dimas/freeday 1.53.0 → 2.0.0

package/adapters/react/components/FdyModal.tsx

@@ -3,7 +3,7 @@ import { useEffect, useId, useRef } from 'react';
 
 // A controlled React wrapper over freeday's `.fdy-modal` native <dialog> (src/components/modal.css).
 // React port of adapters/vue/components/FdyModal.vue: reconciles the reactive `open` boolean with a
-// DOM element whose open/close is a method call — showModal()/close() guarded against the
+// DOM element whose open/close is a method call, showModal()/close() guarded against the
 // already-open/closed cases (showModal() on an open dialog throws), onCancel + preventDefault so Esc
 // routes through app state instead of closing the DOM behind its back, and backdrop-click detection
 // via `event.target === dialogEl`. Native <dialog> already gives the focus trap, focus restore,
@@ -44,7 +44,7 @@ export function FdyModal(props: FdyModalProps): JSX.Element {
         if (dismissible) props.onClose();
       }}
       onClick={(e): void => {
-        // The ::backdrop is not a separate element — target === the dialog box means a backdrop click.
+        // The ::backdrop is not a separate element, target === the dialog box means a backdrop click.
         if (dismissible && e.target === dialogRef.current) props.onClose();
       }}
     >

package/adapters/react/components/FdyTable.tsx

@@ -45,14 +45,14 @@ export interface FdyTableProps<Row extends object> {
   /** Client-side page size when `page` is absent; 0/undefined = render all rows (no pager). */
   pageSize?: number;
   /**
-   * Controlled client-side page index (0-based). Provide it — with `pageSize`, without `page` — to
+   * Controlled client-side page index (0-based). Provide it, with `pageSize`, without `page`, to
    * own the page while the table keeps doing filter/sort/paginate. This is what lets an EXTERNAL
    * pager drive the table: a responsive screen that hides `.fdy-datatable` below `md` and renders a
    * card list from `onProcess` can render one pager for both breakpoints and point it here.
    * Omit for the internal index (unchanged default).
    */
   /** Withhold the table's own footer (pager + range) so the screen can render one. Server mode had
-   *  no way to do this: the app owns the page there ANYWAY, and was still handed a second control —
+   *  no way to do this: the app owns the page there ANYWAY, and was still handed a second control,
    *  a responsive list that shows a table at one breakpoint and cards at another ended up with the
    *  kit's pager stacked under its own. Client mode's counterpart is `pageIndex`. Default true. */
   pager?: boolean;
@@ -61,13 +61,13 @@ export interface FdyTableProps<Row extends object> {
    * (unchanged default). Every back office has one, and a table that renders two thirds of its own
    * footer forces the app to rebuild all three to add the last (#008).
    *
-   * Server mode reports the pick through `onPageChange` — same callback as a page click, with a new
+   * Server mode reports the pick through `onPageChange`, same callback as a page click, with a new
    * `size`. Client mode keeps it internally and also calls `onPageSizeChange`, so the control works
    * with nothing wired and can still be persisted.
    */
   pageSizes?: readonly number[];
   /** Client mode with `pageSizes`: the reader picked a new rows-per-page. The table has already
-   *  applied it — this is for a caller that wants to persist the choice. */
+   *  applied it, this is for a caller that wants to persist the choice. */
   onPageSizeChange?: (size: number) => void;
   pageIndex?: number;
   /** Client mode with `pageIndex` provided: the table asks for a new 0-based index (pager click, a
@@ -86,7 +86,7 @@ export interface FdyTableProps<Row extends object> {
   rowClass?: (row: Row) => string | undefined;
   /** A row was activated (click, or Enter/Space while the row itself is focused). */
   onRowActivate?: (row: Row) => void;
-  /** Called with the processed page of rows (after filter/sort/paginate) plus the total row count —
+  /** Called with the processed page of rows (after filter/sort/paginate) plus the total row count,
    *  in BOTH modes, whenever they change. Lets a consumer render the SAME processed set elsewhere
    *  (a `< md` card list, a "selected" summary, export-to-CSV) without re-deriving the pipeline. */
   onProcess?: (result: { rows: Row[]; total: number }) => void;
@@ -105,7 +105,7 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
   const [internalFilters, setInternalFilters] = useState<FdyFilterMap>({});
   const [internalPageIndex, setInternalPageIndex] = useState<number>(0);
   /* Client-mode rows-per-page. `pageSize` is a plain prop with no callback, so a footer control that
-   * only reported would do nothing in the app that wired nothing — the table applies the pick itself
+   * only reported would do nothing in the app that wired nothing, the table applies the pick itself
    * and reports it. `prevPageSize` is React's adjust-state-during-render idiom: an explicit change to
    * the prop wins back, because the parent said something newer. */
   const [internalPageSize, setInternalPageSize] = useState<number | null>(null);
@@ -238,7 +238,7 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
       .join(' ');
     return cls === '' ? undefined : cls;
   }
-  // Enter/Space activate only when the row itself is focused — a control inside a cell keeps its own
+  // Enter/Space activate only when the row itself is focused, a control inside a cell keeps its own
   // event (the `event.target !== event.currentTarget` guard). Click relies on inner controls calling
   // stopPropagation, matching the pattern consumers hand-roll today.
   function onRowKeydown(e: React.KeyboardEvent<HTMLTableRowElement>, row: Row): void {

package/adapters/react/components/FdyTableFilter.tsx

@@ -7,7 +7,7 @@ import type { FdyColumnFilter, FdyColumnFilterType } from '../../core/table-mode
 // Internal to FdyTable: one column's header funnel button + its type-aware filter popover
 // (text / enum / number / date) over freeday's `.fdy-table__filterbtn` + `.fdy-filter*` classes.
 // React port of adapters/vue/components/FdyTableFilter.vue. Reuses usePopover so the panel escapes
-// the table's `overflow:hidden` via the top layer. Purely controlled — renders the current
+// the table's `overflow:hidden` via the top layer. Purely controlled, renders the current
 // `filter`, emits the next one (or null to clear); the parent owns where it goes. Not exported.
 
 export interface FdyTableFilterProps {

package/adapters/react/components/FdyTableFooter.tsx

@@ -8,19 +8,19 @@ import { FdyCombo } from './FdyCombo';
  * 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
+ * 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, `onPageChange` out — the same contract as the table's server mode.
+ * It owns nothing. `page` in, `onPageChange` out, the same contract as the table's server mode.
  */
 export interface FdyTableFooterProps {
   /** The page being shown. `size` drives the range AND the rows-per-page control's value. */
   page: FdyPageState;
   onPageChange?: (page: FdyPageState) => void;
   /**
-   * Offer a rows-per-page control. Omit for none — the footer is then range + pager, exactly as
+   * Offer a rows-per-page control. Omit for none; the footer is then range + pager, exactly as
    * before. Picking a size calls `onPageChange` with the new `size` and the index that still holds
    * the row you were looking at.
    */
@@ -29,7 +29,7 @@ export interface FdyTableFooterProps {
 
 export function FdyTableFooter(props: FdyTableFooterProps): JSX.Element | null {
   const { index, size, total } = props.page;
-  /* The combo is labelled by the visible word beside it — a <label htmlFor> cannot reach inside a
+  /* The combo is labelled by the visible word beside it, a <label htmlFor> cannot reach inside a
    * component, and an aria-label would leave that word attached to nothing. */
   const sizeLabelId: string = useId();
 
@@ -41,7 +41,7 @@ export function FdyTableFooter(props: FdyTableFooterProps): JSX.Element | null {
 
   const hasPager: boolean = size > 0 && totalPages > 1;
   const sizes: readonly number[] = props.pageSizes ?? [];
-  /* One page and no size control means there is nothing here to say — the table has always withheld
+  /* 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. */
   if (!hasPager && sizes.length === 0) return null;
 

package/adapters/react/index.d.ts

@@ -36,11 +36,12 @@ export { FdyCascade, type FdyCascadeProps, type CascadeNode } from './components
 export { FdyCfl, type FdyCflProps, type CflColumn, type CflPage } from './components/FdyCfl';
 export { FdyChart, type FdyChartProps, type FdyChartSeries } from './components/FdyChart';
 export { FdyTable, type FdyTableProps } from './components/FdyTable';
-/** The table's own footer, standalone — for a responsive list whose table is hidden at some
+/** The table's own footer, standalone, for a responsive list whose table is hidden at some
  *  breakpoints and so cannot host it. */
 export { FdyTableFooter, type FdyTableFooterProps } from './components/FdyTableFooter';
 export { FdyModal, type FdyModalProps } from './components/FdyModal';
 export { FdyDrawer, type FdyDrawerProps } from './components/FdyDrawer';
+export { FdyAppShell, type FdyAppShellProps } from './components/FdyAppShell';
 
 /** Controlled data-table types (shared, framework-agnostic core). */
 export type {

package/adapters/react/index.js

@@ -11,3 +11,4 @@ export { FdyTable } from './components/FdyTable.tsx';
 export { FdyTableFooter } from './components/FdyTableFooter.tsx';
 export { FdyModal } from './components/FdyModal.tsx';
 export { FdyDrawer } from './components/FdyDrawer.tsx';
+export { FdyAppShell } from './components/FdyAppShell.tsx';

package/adapters/react/useFreeday.js

@@ -1,4 +1,4 @@
-/* Freeday — React adapter (thin). The enhancers stay the source of truth; this
+/* Freeday. React adapter (thin). The enhancers stay the source of truth; this
  * hook re-runs every registered window.Freeday*.initAll() over a subtree after
  * React commits, so [data-fdy-*] markup rendered by React gets enhanced (and
  * re-enhanced after updates). Enhancers are idempotent, so the repeated calls
@@ -9,12 +9,12 @@
  *   useFreeday(root);            // scopes init to this component's subtree
  *   // <div ref={root}> ...[data-fdy-*] markup... </div>
  *
- * The ref may also sit ON the widget itself — <div ref={root} data-fdy-menu> — which is what you
+ * The ref may also sit ON the widget itself, <div ref={root} data-fdy-menu>, which is what you
  * write when the component's root element IS the widget. initAll() matches its own root as
  * well as descendants, so both shapes work. (Before 1.23.0 only the wrapping shape did, and
  * the other failed silently: querySelectorAll never matches its root.)
  *
- * Events are native bubbling CustomEvents — add listeners on the root (they
+ * Events are native bubbling CustomEvents, add listeners on the root (they
  * bubble) and read event.detail. See index.d.ts for the detail types.
  */
 import { useEffect, useCallback } from 'react';

package/adapters/vue/components/FdyAppShell.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch, type ComputedRef, type Ref } from 'vue';
+import {
+  NAV_QUERY,
+  applyShellState,
+  focusPanel,
+  restoreFocus,
+  trapTab,
+} from '../../core/app-shell.js';
+
+// A Vue wrapper over freeday's `.fdy-app` shell (src/components/app-shell.css) that ships the
+// behaviour the CSS cannot: Escape, backdrop, focus into the panel and back, `inert`, and a Tab
+// trap. The DOM work lives in adapters/core/app-shell.js so this component, its React twin and the
+// Blazor bridge cannot drift into three different focus traps.
+//
+// ONE model: `navOpen` means "the nav is visible to the reader". The two state classes are the
+// kit's business, above the nav breakpoint a hidden nav is `--nav-collapsed`, below it a visible
+// nav is `--nav-open`, so an app never reasons about the viewport to answer a question about its
+// own UI.
+//
+// Leave `navOpen` unbound and the component keeps its own: visible on a wide viewport, hidden on a
+// narrow one, which is the right default and one an app cannot express in a single initial value.
+// Bind it (`v-model:navOpen`) when the app wants to drive it, a menu item, a persisted preference.
+
+const props = withDefaults(defineProps<{
+  navOpen?: boolean;
+  title?: string;
+  toggleLabel?: string;
+}>(), { navOpen: undefined, title: '', toggleLabel: 'Toggle navigation' });
+
+const emit = defineEmits<{
+  'update:navOpen': [boolean];
+}>();
+
+const root: Ref<HTMLElement | null> = ref(null);
+const overlay: Ref<boolean> = ref(false);
+const uncontrolled: Ref<boolean> = ref(true);
+const restoreTo: Ref<Element | null> = ref(null);
+let media: MediaQueryList | null = null;
+/* Set while a viewport change is driving the state, so the watcher below reconciles `inert` and the
+   classes but leaves FOCUS alone: a resize is not a reader asking to go somewhere. */
+let fromResize: boolean = false;
+
+const navVisible: ComputedRef<boolean> = computed((): boolean =>
+  props.navOpen === undefined ? uncontrolled.value : props.navOpen,
+);
+
+const shellClass: ComputedRef<string> = computed((): string => {
+  if (overlay.value) return navVisible.value ? 'fdy-app fdy-app--nav-open' : 'fdy-app';
+  return navVisible.value ? 'fdy-app' : 'fdy-app fdy-app--nav-collapsed';
+});
+
+function setVisible(next: boolean): void {
+  uncontrolled.value = next;
+  emit('update:navOpen', next);
+}
+
+/* Focus is moved AFTER the class change has been rendered, or the panel is still off-canvas and
+   the browser refuses to focus what it cannot lay out. */
+watch([navVisible, overlay], ([visible, isOverlay]: [boolean, boolean]): void => {
+  const el: HTMLElement | null = root.value;
+  if (el === null) return;
+  applyShellState(el, { navVisible: visible, overlay: isOverlay });
+  if (fromResize) {
+    fromResize = false;
+    return;
+  }
+  if (!isOverlay) return;
+  if (visible) restoreTo.value = focusPanel(el);
+  else restoreFocus(el, restoreTo.value);
+}, { flush: 'post' });
+
+function onToggle(): void {
+  setVisible(!navVisible.value);
+}
+
+function onBackdrop(): void {
+  if (overlay.value && navVisible.value) setVisible(false);
+}
+
+/* Following a link in an overlay nav means "take me there", the panel must not stay over the page
+   it was just asked for. On a wide viewport the nav is a column and clicking it changes nothing. */
+function onSidebarClick(e: MouseEvent): void {
+  if (!overlay.value || !navVisible.value) return;
+  const target: HTMLElement | null = e.target as HTMLElement | null;
+  if (target !== null && target.closest('.fdy-nav__item') !== null) setVisible(false);
+}
+
+function onKeydown(e: KeyboardEvent): void {
+  const el: HTMLElement | null = root.value;
+  if (el === null || !overlay.value || !navVisible.value) return;
+  if (e.key === 'Escape') {
+    e.preventDefault();
+    setVisible(false);
+    return;
+  }
+  trapTab(el, e);
+}
+
+/* Both directions matter, and they are not symmetrical.
+   Narrowing with the nav visible would drop an overlay panel over a page nobody asked to leave, so
+   the nav is hidden. Widening is harmless, a visible nav simply becomes the column again, and the
+   watcher clears the `inert` the overlay had put on the content. */
+function onMediaChange(): void {
+  const nowOverlay: boolean = media !== null && !media.matches;
+  if (nowOverlay === overlay.value) return;
+  fromResize = true;
+  overlay.value = nowOverlay;
+  if (nowOverlay && navVisible.value) setVisible(false);
+}
+
+onMounted((): void => {
+  media = window.matchMedia(NAV_QUERY);
+  overlay.value = !media.matches;
+  uncontrolled.value = media.matches;
+  media.addEventListener('change', onMediaChange);
+  document.addEventListener('keydown', onKeydown);
+  const el: HTMLElement | null = root.value;
+  if (el !== null) applyShellState(el, { navVisible: navVisible.value, overlay: overlay.value });
+});
+
+onBeforeUnmount((): void => {
+  if (media !== null) media.removeEventListener('change', onMediaChange);
+  document.removeEventListener('keydown', onKeydown);
+});
+</script>
+
+<template>
+  <div ref="root" :class="shellClass">
+    <slot name="skip" />
+
+    <aside class="fdy-app__sidebar" @click="onSidebarClick">
+      <slot name="brand" />
+      <slot name="nav" />
+    </aside>
+
+    <div class="fdy-app__content">
+      <header class="fdy-app__topbar">
+        <button
+          class="fdy-app__navtoggle"
+          type="button"
+          :aria-label="toggleLabel"
+          @click="onToggle"
+        ><slot name="toggle-icon">&#9776;</slot></button>
+
+        <h1 class="fdy-app__title">
+          <slot name="title">{{ title }}</slot>
+        </h1>
+
+        <slot name="topbar" />
+      </header>
+
+      <main class="fdy-app__main">
+        <slot />
+      </main>
+    </div>
+
+    <div class="fdy-app__backdrop" @click="onBackdrop" />
+  </div>
+</template>

package/adapters/vue/components/FdyAutocomplete.vue

@@ -3,7 +3,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch, type
 import { usePopover } from '../usePopover';
 
 // A controlled Vue port of freeday's autocomplete (src/freeday-autocomplete.js +
-// autocomplete.css): a WAI-ARIA APG *editable* combobox — a text input filters a listbox of
+// autocomplete.css): a WAI-ARIA APG *editable* combobox, a text input filters a listbox of
 // options as you type; picking one fills the input. A real `v-model` in place of the enhancer's
 // DOM mutation, so Vue owns the input. Filtering mirrors the enhancer exactly (case-insensitive
 // substring on the trimmed query); pass server-filtered `options` and it stays a no-op re-filter.

package/adapters/vue/components/FdyCascade.vue

@@ -25,7 +25,7 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch, type
 import { usePopover } from '../usePopover';
 
 // A controlled Vue port of freeday's cascade select (src/freeday-cascade.js + cascade.css):
-// a hierarchical drill-down picker showing one level at a time — branches drill in, a back
+// a hierarchical drill-down picker showing one level at a time, branches drill in, a back
 // control ascends, a leaf selects and the value is the leaf's value (the display is the full
 // path). The enhancer's data model is a hidden nested <ul>; here it is a typed tree, which is
 // what a framework app actually has. A real `v-model` in place of the DOM mutation.

package/adapters/vue/components/FdyCfl.vue

@@ -9,7 +9,7 @@ import { computed, nextTick, onBeforeUnmount, ref, useId, type ComputedRef, type
 // that: a real `v-model:Row|null` over a native <dialog> whose rows come from an async
 // `fetchPage(query, page)`. It re-implements the enhancer's open/close + search + dense
 // sticky-header results + single-commit-on-click + keyboard, and adds the pieces a server
-// picker needs — loading/empty/error states, retry, pagination, an out-of-order guard, and
+// picker needs, loading/empty/error states, retry, pagination, an out-of-order guard, and
 // an optional in-memory cache. The enhancer is NOT mounted here (it would fight Vue's DOM).
 
 interface CflColumn {
@@ -23,7 +23,7 @@ interface CflPage {
 }
 
 const props = defineProps<{
-  /** Single: `Row | null`. With `multiple`, an array — `Row[] | null`, where null and [] both mean
+  /** Single: `Row | null`. With `multiple`, an array, `Row[] | null`, where null and [] both mean
    *  nothing picked. The enhancer has had `data-fdy-cfl-multiple` all along; this is the typed
    *  wrappers catching up (#019). */
   modelValue: Row | Row[] | null;
@@ -31,7 +31,7 @@ const props = defineProps<{
   columns: ReadonlyArray<CflColumn>;
   display: (row: Row) => string;
   rowKey: (row: Row) => string;
-  /** Advisory only — the caller's `fetchPage` owns paging; kept for API documentation. */
+  /** Advisory only, the caller's `fetchPage` owns paging; kept for API documentation. */
   pageSize?: number;
   /** The dialog's heading. Default 'Choose data', matching the Blazor adapter's `Title`. */
   title?: string;
@@ -108,7 +108,7 @@ const showClear: ComputedRef<boolean> = computed(
 );
 const clearLabelText: ComputedRef<string> = computed((): string => props.clearLabel ?? 'Clear selection');
 const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
-/* `display()` takes one row, so in multi the field states HOW MANY — naming one of six would be a
+/* `display()` takes one row, so in multi the field states HOW MANY, naming one of six would be a
    lie, and naming all six does not fit a control that is 22rem wide. */
 const currentRows: ComputedRef<Row[]> = computed((): Row[] =>
   Array.isArray(props.modelValue) ? props.modelValue : props.modelValue !== null ? [props.modelValue as Row] : [],
@@ -119,7 +119,7 @@ const displayValue: ComputedRef<string> = computed((): string => {
   return props.modelValue !== null ? props.display(props.modelValue as Row) : '';
 });
 // The results <table> (owner of `resultsId`) only renders in the rows branch, so gate the
-// search input's aria refs on rows existing — otherwise they'd dangle during loading/empty/error.
+// search input's aria refs on rows existing, otherwise they'd dangle during loading/empty/error.
 const hasRows: ComputedRef<boolean> = computed((): boolean => rows.value.length > 0);
 const controlsId: ComputedRef<string | undefined> = computed((): string | undefined =>
   hasRows.value ? resultsId : undefined,
@@ -156,7 +156,7 @@ async function loadPage(targetPage: number, append: boolean): Promise<void> {
   try {
     const cached: CflPage | undefined = cache.get(key);
     const res: CflPage = cached ?? (await props.fetchPage(q, targetPage));
-    if (token !== reqToken) return; // stale — a newer request has started
+    if (token !== reqToken) return; // stale, a newer request has started
     if (cached === undefined) cache.set(key, res);
     const copy: Row[] = res.rows.slice(); // never mutate the caller's array
     rows.value = append ? rows.value.concat(copy) : copy;
@@ -220,7 +220,7 @@ function togglePick(row: Row): void {
   else picked.value = picked.value.filter((_: Row, i: number): boolean => i !== at);
 }
 
-/* A click means "tick this" in multi and "this is my answer" in single — the whole difference. */
+/* A click means "tick this" in multi and "this is my answer" in single, the whole difference. */
 function onRowClick(row: Row): void {
   if (props.multiple === true) togglePick(row);
   else commit(row);
@@ -238,7 +238,7 @@ function commit(row: Row | null): void {
   closeDialog();
 }
 
-/* Unsetting is not "picking nothing" — it must not open or close the dialog, and it must leave focus
+/* Unsetting is not "picking nothing", it must not open or close the dialog, and it must leave focus
    on a control that still exists, so focus returns to the trigger beside it. */
 function clearValue(): void {
   picked.value = [];

package/adapters/vue/components/FdyChart.vue

@@ -4,7 +4,7 @@ import { computed, onBeforeUnmount, onMounted, ref, watch, nextTick, type Comput
 // A Vue-native wrapper over freeday's zero-dependency chart renderer (freeday-chart.js).
 // Unlike the input components, charts are not form controls, so re-implementing them in Vue
 // would only duplicate the SVG maths. Instead this thin wrapper binds the renderer's data-*
-// API reactively and re-invokes window.FreedayChart.update() whenever the data changes — giving
+// API reactively and re-invokes window.FreedayChart.update() whenever the data changes, giving
 // reactive, typed charts (a drop-in replacement for hand-rolled Chart.js wrappers) with no
 // external dependency. Because the renderer paints with CSS var()/--chart-* tokens, charts also
 // recolour on data-theme change for free. Requires the freeday enhancers (dist/freeday.js) to be
@@ -16,7 +16,7 @@ interface FdyChartSeries {
   role?: string;
 }
 
-// Note: no `ariaLabel` prop — pass `aria-label` (and any other native attribute) directly; it
+// Note: no `ariaLabel` prop, pass `aria-label` (and any other native attribute) directly; it
 // falls through onto the root element. `role="img"` is set below. Give every chart an aria-label.
 const props = defineProps<{
   type: 'line' | 'area' | 'bar' | 'sparkline' | 'donut';

package/adapters/vue/components/FdyCombo.vue

@@ -220,7 +220,7 @@ onBeforeUnmount((): void => {
     <ul :id="listboxId" ref="listboxEl" class="fdy-combo__listbox" role="listbox" popover="manual" :hidden="!open">
       <!-- @mousedown.prevent keeps focus on the button: the option <li> isn't focusable, so a plain
            mousedown moves focus out of the combo, fires @focusout, and closes the list before the click
-           lands — mouse-select would silently do nothing. Same pattern as FdyDatepicker/FdyAutocomplete. -->
+           lands, mouse-select would silently do nothing. Same pattern as FdyDatepicker/FdyAutocomplete. -->
       <li
         v-for="(opt, i) in options"
         :id="optionId(i)"

package/adapters/vue/components/FdyDateRange.vue

@@ -13,7 +13,7 @@ import FdyDatepicker from './FdyDatepicker.vue';
 // two linked FdyDatepickers where the end can't precede the start (start.max = end, end.min =
 // start). A real `v-model:DateRangeValue` that composes the single-date picker rather than
 // re-implementing the calendar. The vanilla enhancer's cross-calendar `.in-range` day shading is
-// not reproduced (each picker is independent) — the min/max linkage is what keeps the range valid.
+// not reproduced (each picker is independent), the min/max linkage is what keeps the range valid.
 
 const props = defineProps<{
   modelValue: DateRangeValue;
@@ -21,7 +21,7 @@ const props = defineProps<{
   max?: string;
   locale?: string;
   disabled?: boolean;
-  /** Locked/view mode for both pickers — focusable, values shown, but can't be opened or changed. */
+  /** Locked/view mode for both pickers, focusable, values shown, but can't be opened or changed. */
   readonly?: boolean;
   invalid?: boolean;
   describedby?: string;

package/adapters/vue/components/FdyDatepicker.vue

@@ -39,7 +39,7 @@ const props = defineProps<{
   ariaLabelledby?: string;
   /** Show a clear (×) button in the trigger when a date is set, so an optional date can be unset. Emits `''` via update:modelValue + change. Off by default. */
   clearable?: boolean;
-  /** aria-label for the previous-month nav button. Default 'Previous month' — override for non-English UIs (month/weekday names already follow `locale`). */
+  /** aria-label for the previous-month nav button. Default 'Previous month', override for non-English UIs (month/weekday names already follow `locale`). */
   prevMonthLabel?: string;
   /** aria-label for the next-month nav button. Default 'Next month'. */
   nextMonthLabel?: string;
@@ -145,7 +145,7 @@ const effectiveFocusDate: ComputedRef<Date> = computed((): Date => {
   return new Date(view.value.getFullYear(), view.value.getMonth(), Math.min(f.getDate(), daysInMonth));
 });
 
-/* 'days' | 'months' — the calendar drills one level up instead of growing furniture beside the title.
+/* 'days' | 'months', the calendar drills one level up instead of growing furniture beside the title.
    Before this the only pointer route to another month was one click per month: August 2026 to March
    2022 is fifty-three of them, and the Shift+PageUp jump had no affordance at all. */
 const mode: Ref<'days' | 'months' | 'years'> = ref('days');
@@ -212,7 +212,7 @@ interface YearCell {
   focusable: boolean;
 }
 
-/** A year is unreachable only when EVERY month in it falls outside min/max — the same rule
+/** A year is unreachable only when EVERY month in it falls outside min/max, the same rule
  *  isMonthDisabled applies one level down, and for the same reason. */
 function isYearDisabled(year: number): boolean {
   if (minDate.value !== null && startOfDay(new Date(year, 11, 31)).getTime() < startOfDay(minDate.value).getTime()) return true;
@@ -411,7 +411,7 @@ function pick(d: Date): void {
   closePanel(true);
 }
 
-// Clear (reset to empty). Emits '' — parseISO('') is null, so the placeholder shows again.
+// Clear (reset to empty). Emits '', parseISO('') is null, so the placeholder shows again.
 function clearValue(): void {
   emit('update:modelValue', '');
   emit('change', '');
@@ -496,7 +496,7 @@ function onDocPointerDown(e: MouseEvent): void {
 }
 
 // Close when focus leaves the control entirely (e.g. Shift+Tab off the trigger).
-/* A null relatedTarget means focus fell to <body> — which is what happens when the element the
+/* A null relatedTarget means focus fell to <body>, which is what happens when the element the
  * user just pressed is REMOVED by the click it triggered (drilling into the month grid replaces
  * the grid, and with it the cell that had focus). That is not focus leaving the control, and
  * closing on it made the panel vanish mid-navigation. A pointer that really lands outside is

package/adapters/vue/components/FdyDrawer.vue

@@ -2,15 +2,15 @@
 import { computed, onMounted, useId, watch, type ComputedRef, type Ref, ref } from 'vue';
 
 // A controlled Vue wrapper over freeday's `.fdy-drawer` native <dialog> side panel
-// (src/components/drawer.css). Same controlled contract and glue as FdyModal — showModal()/close()
+// (src/components/drawer.css). Same controlled contract and glue as FdyModal, showModal()/close()
 // guarded, @cancel.prevent so Esc routes through app state, backdrop-click via `event.target ===
-// dialogEl` — applied to a drawer that anchors left (default) or right. Native <dialog> supplies the
+// dialogEl`, applied to a drawer that anchors left (default) or right. Native <dialog> supplies the
 // focus trap, focus restore, top-layer stacking and inert background; `dismissible` (default true)
 // gates Esc + backdrop dismissal.
 
 // dismissible MUST go through withDefaults: Vue's boolean-cast gives an omitted Boolean prop
 // `false`, not `undefined`, so a bare `props.dismissible !== false` would make an un-annotated
-// drawer non-dismissible (no Esc, no backdrop, no close button) — the opposite of the default.
+// drawer non-dismissible (no Esc, no backdrop, no close button), the opposite of the default.
 const props = withDefaults(defineProps<{
   open: boolean;
   title: string;

package/adapters/vue/components/FdyModal.vue

@@ -8,11 +8,11 @@ import { computed, onMounted, useId, watch, type ComputedRef, type Ref, ref } fr
 // (showModal() on an open dialog throws), @cancel.prevent so Esc routes through app state instead of
 // closing the DOM behind its back, and backdrop-click detection via `event.target === dialogEl`.
 // Native <dialog> already provides the focus trap, focus restore, top-layer stacking and inert
-// background — the wrapper only avoids breaking them. `dismissible` (default true) gates Esc + backdrop.
+// background, the wrapper only avoids breaking them. `dismissible` (default true) gates Esc + backdrop.
 
 // dismissible MUST go through withDefaults: Vue's boolean-cast gives an omitted Boolean prop
 // `false`, not `undefined`, so a bare `props.dismissible !== false` would make an un-annotated
-// modal non-dismissible (no Esc, no backdrop, no close button) — the opposite of the default.
+// modal non-dismissible (no Esc, no backdrop, no close button), the opposite of the default.
 const props = withDefaults(defineProps<{
   open: boolean;
   title: string;
@@ -46,7 +46,7 @@ onMounted((): void => sync(props.open));
 function onCancel(): void {
   if (dismissible.value) emit('close');
 }
-// The ::backdrop is not a separate element — a click whose target is the dialog box itself (not its
+// The ::backdrop is not a separate element, a click whose target is the dialog box itself (not its
 // content) is a backdrop click.
 function onClick(e: MouseEvent): void {
   if (dismissible.value && e.target === dialogEl.value) emit('close');

package/adapters/vue/components/FdyTable.vue

@@ -45,14 +45,14 @@ const props = withDefaults(defineProps<{
   /** Client-side page size when `page` is absent; 0/undefined = render all rows (no pager). */
   pageSize?: number;
   /**
-   * Controlled client-side page index (0-based). Provide it — with `pageSize`, without `page` — to
+   * Controlled client-side page index (0-based). Provide it, with `pageSize`, without `page`, to
    * own the page while the table keeps doing filter/sort/paginate. This is what lets an EXTERNAL
    * pager drive the table: a responsive screen that hides `.fdy-datatable` below `md` and renders a
    * card list from the `process` event can render one pager for both breakpoints and point it here.
    * Omit for the internal index (unchanged default).
    */
   /** Withhold the table's own footer (pager + range) so the screen can render one. Server mode had
-   *  no way to do this: the app owns the page there ANYWAY, and was still handed a second control —
+   *  no way to do this: the app owns the page there ANYWAY, and was still handed a second control,
    *  a responsive list that shows a table at one breakpoint and cards at another ended up with the
    *  kit's pager stacked under its own. Client mode's counterpart is `pageIndex`. Default true. */
   pager?: boolean;
@@ -61,7 +61,7 @@ const props = withDefaults(defineProps<{
    * (unchanged default). Every back office has one, and a table that renders two thirds of its own
    * footer forces the app to rebuild all three to add the last (#008).
    *
-   * Server mode reports the pick through `update:page` — same event as a page click, with a new
+   * Server mode reports the pick through `update:page`, same event as a page click, with a new
    * `size`. Client mode keeps it internally and also emits `update:pageSize`, so the control works
    * with nothing wired and can still be persisted.
    */
@@ -86,11 +86,11 @@ const emit = defineEmits<{
    *  a reset to 0 after sort/filter, or a clamp when filtering shrank the set). */
   'update:pageIndex': [index: number];
   /** Client mode with `pageSizes`: the reader picked a new rows-per-page. The table has already
-   *  applied it — this is for a caller that wants to persist the choice. */
+   *  applied it, this is for a caller that wants to persist the choice. */
   'update:pageSize': [size: number];
   /** A row was activated (click, or Enter/Space while the row itself is focused). */
   'row-activate': [row: Row];
-  /** The processed page of rows (after filter/sort/paginate) plus the total row count — fires in
+  /** The processed page of rows (after filter/sort/paginate) plus the total row count, fires in
    *  BOTH modes whenever they change. Lets a consumer render the SAME processed set elsewhere
    *  (a `< md` card list, a "selected" summary, export-to-CSV) without re-deriving the pipeline. */
   'process': [result: { rows: Row[]; total: number }];
@@ -100,7 +100,7 @@ const internalSort: Ref<FdySortState | null> = ref(null);
 const internalFilters: Ref<FdyFilterMap> = ref({});
 const internalPageIndex: Ref<number> = ref(0);
 /* Client-mode rows-per-page. `pageSize` is a plain prop with no event, so a footer control that only
- * emitted would do nothing in the app that wired nothing — the table applies the pick itself and
+ * emitted would do nothing in the app that wired nothing, the table applies the pick itself and
  * reports it. An explicit change to the prop wins back: the parent said something newer. */
 const internalPageSize: Ref<number | null> = ref(null);
 watch((): number | undefined => props.pageSize, (): void => { internalPageSize.value = null; });
@@ -250,7 +250,7 @@ function rowClasses(row: Row): Array<string | undefined> {
 function onRowClick(row: Row): void {
   if (props.rowActivatable === true) emit('row-activate', row);
 }
-// Enter/Space activate only when the row itself is focused — a control inside a cell keeps its own
+// Enter/Space activate only when the row itself is focused, a control inside a cell keeps its own
 // event (the `event.target !== event.currentTarget` guard). Click relies on inner controls calling
 // stopPropagation, matching the pattern consumers hand-roll today.
 function onRowKeydown(e: KeyboardEvent, row: Row): void {

package/adapters/vue/components/FdyTableFilter.vue

@@ -7,7 +7,7 @@ import type { FdyColumnFilter, FdyColumnFilterType } from '../../core/table-mode
 // Internal to FdyTable: one column's header funnel button + its type-aware filter popover
 // (text / enum / number / date) over freeday's `.fdy-table__filterbtn` + `.fdy-filter*` classes.
 // Reuses usePopover so the panel escapes the table's `overflow:hidden` via the top layer. Purely
-// controlled — it renders the current `filter` and emits the next one (or null to clear); the
+// controlled, it renders the current `filter` and emits the next one (or null to clear); the
 // parent owns where that goes (client state or an `update:filters` emit). Not exported.
 
 const props = defineProps<{