@cahyo-dimas/freeday 2.1.0 → 3.0.0

package/adapters/react/components/FdyTable.tsx

@@ -94,6 +94,27 @@ export interface FdyTableProps<Row extends object> {
   expandedKeys?: ReadonlyArray<string | number>;
   /** Renders the expandable detail row for an expanded row (React equivalent of Vue's `row-detail` slot). */
   renderRowDetail?: (row: Row) => ReactNode;
+  /** Zebra-stripe the body rows. */
+  striped?: boolean;
+  /** Render the checkbox column and the bulk bar. */
+  selectable?: boolean;
+  /** Controlled selection, as `rowKey` values. Provide to own it; omit for internal (the column
+   *  still works with nothing wired). */
+  selectedKeys?: ReadonlyArray<string | number>;
+  /** Selection changed, as `rowKey` values. Vue emits `update:selectedKeys`. */
+  onSelectedKeysChange?: (keys: Array<string | number>) => void;
+  /** Bulk-bar count, `{n}` substituted. Default `{n} selected`. */
+  selectedText?: string;
+  /** Bulk-bar clear button. Default `Clear`. */
+  clearSelectionText?: string;
+  /** Accessible name of the header checkbox. Default `Select all rows on this page`. */
+  selectAllLabel?: string;
+  /** Accessible name of each row checkbox. Default `Select row`. */
+  selectRowLabel?: string;
+  /** Accessible name of the bulk bar region. Default `Bulk actions`. */
+  bulkLabel?: string;
+  /** Bulk-bar actions (React equivalent of Vue's `bulk-actions` slot). */
+  bulkActions?: ReactNode;
 }
 
 export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Element {
@@ -103,6 +124,7 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
 
   const [internalSort, setInternalSort] = useState<FdySortState | null>(null);
   const [internalFilters, setInternalFilters] = useState<FdyFilterMap>({});
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState<Array<string | number>>([]);
   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
@@ -258,16 +280,99 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
     return cellText(row, col);
   }
 
-  const colCount: number = props.columns.length;
+  /* Selection is keyed by `rowKey`, exactly as `expandedKeys` is, and for the same reason: a key
+   * survives the re-fetch that replaces every row object, an object identity does not. Controlled
+   * when `selectedKeys` is provided, internal otherwise, so the column works with nothing wired. */
+  const selectionControlled: boolean = props.selectedKeys !== undefined;
+  const effectiveSelectedKeys: ReadonlyArray<string | number> = selectionControlled
+    ? (props.selectedKeys as ReadonlyArray<string | number>)
+    : internalSelectedKeys;
+  const selectedCount: number = effectiveSelectedKeys.length;
+  /* The select-all box acts on the CURRENT PAGE, not on every filtered row: a header checkbox that
+   * silently selects rows the reader cannot see is how bulk deletes go wrong. Keys picked on other
+   * pages are preserved rather than dropped, so paging away and back does not lose them. */
+  const pageKeys: Array<string | number> = displayRows.map((row: Row): string | number => props.rowKey(row));
+  const allPageSelected: boolean =
+    pageKeys.length > 0 && pageKeys.every((k: string | number): boolean => effectiveSelectedKeys.includes(k));
+  const somePageSelected: boolean =
+    !allPageSelected && pageKeys.some((k: string | number): boolean => effectiveSelectedKeys.includes(k));
+
+  function setSelection(keys: Array<string | number>): void {
+    if (!selectionControlled) setInternalSelectedKeys(keys);
+    props.onSelectedKeysChange?.(keys);
+  }
+  function isSelected(row: Row): boolean {
+    return effectiveSelectedKeys.includes(props.rowKey(row));
+  }
+  function toggleRow(row: Row, checked: boolean): void {
+    const key: string | number = props.rowKey(row);
+    const next: Array<string | number> = effectiveSelectedKeys.filter((k: string | number): boolean => k !== key);
+    if (checked) next.push(key);
+    setSelection(next);
+  }
+  function toggleAllOnPage(checked: boolean): void {
+    const onPage: Set<string | number> = new Set(pageKeys);
+    const offPage: Array<string | number> = effectiveSelectedKeys.filter(
+      (k: string | number): boolean => !onPage.has(k),
+    );
+    setSelection(checked ? offPage.concat(pageKeys) : offPage);
+  }
+  function clearSelection(): void {
+    setSelection([]);
+  }
+  function selectedLabel(n: number): string {
+    return (props.selectedText ?? '{n} selected').replace('{n}', String(n));
+  }
+
+  /* The checkbox column widens every full-width row (loading, empty, row detail) by one. Deriving it
+   * once is what keeps a later column change from leaving one of the three behind. */
+  const colCount: number = props.columns.length + (props.selectable === true ? 1 : 0);
 
   return (
     <div className="fdy-datatable">
       {props.toolbar !== undefined && <div className="fdy-table-toolbar">{props.toolbar}</div>}
 
+      {props.selectable === true && (
+        <div
+          className="fdy-table-bulkbar"
+          hidden={selectedCount === 0}
+          role="region"
+          aria-label={props.bulkLabel ?? 'Bulk actions'}
+        >
+          <span className="fdy-table-bulkbar__count" aria-live="polite">{selectedLabel(selectedCount)}</span>
+          <span className="fdy-table-bulkbar__spacer" />
+          <div className="fdy-table-bulkbar__actions">
+            {props.bulkActions}
+            <button type="button" className="fdy-btn fdy-btn--ghost fdy-btn--sm" onClick={clearSelection}>
+              {props.clearSelectionText ?? 'Clear'}
+            </button>
+          </div>
+        </div>
+      )}
+
       <div className="fdy-table-scroll">
-        <table className="fdy-table" aria-label={props.ariaLabel}>
+        <table
+          className={props.striped === true ? 'fdy-table fdy-table--striped' : 'fdy-table'}
+          aria-label={props.ariaLabel}
+        >
           <thead>
             <tr>
+              {props.selectable === true && (
+                <th className="fdy-table__selcol" scope="col">
+                  <input
+                    type="checkbox"
+                    className="fdy-checkbox"
+                    data-fdy-select-all
+                    checked={allPageSelected}
+                    ref={(el: HTMLInputElement | null): void => {
+                      // `indeterminate` is a DOM property with no attribute, so JSX cannot set it.
+                      if (el !== null) el.indeterminate = somePageSelected;
+                    }}
+                    aria-label={props.selectAllLabel ?? 'Select all rows on this page'}
+                    onChange={(e): void => toggleAllOnPage(e.target.checked)}
+                  />
+                </th>
+              )}
               {props.columns.map((col: FdyTableColumn<Row>): JSX.Element => (
                 <th key={col.key} scope="col" style={alignStyle(col)} aria-sort={ariaSortOf(col)}>
                   {col.sortable ? (
@@ -306,11 +411,27 @@ export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Ele
                     className={rowClassName(row)}
                     tabIndex={props.rowActivatable ? 0 : undefined}
                     aria-expanded={props.renderRowDetail !== undefined ? (isExpanded(row) ? 'true' : 'false') : undefined}
+                    aria-selected={props.selectable === true ? (isSelected(row) ? 'true' : 'false') : undefined}
                     onClick={(): void => {
                       if (props.rowActivatable === true) props.onRowActivate?.(row);
                     }}
                     onKeyDown={(e): void => onRowKeydown(e, row)}
                   >
+                    {props.selectable === true && (
+                      <td className="fdy-table__selcol">
+                        {/* stopPropagation: without it, ticking a checkbox in an activatable row also
+                            fires onRowActivate, so selecting a row would navigate away from it. */}
+                        <input
+                          type="checkbox"
+                          className="fdy-checkbox"
+                          data-fdy-row-select
+                          checked={isSelected(row)}
+                          aria-label={props.selectRowLabel ?? 'Select row'}
+                          onClick={(e): void => e.stopPropagation()}
+                          onChange={(e): void => toggleRow(row, e.target.checked)}
+                        />
+                      </td>
+                    )}
                     {props.columns.map((col: FdyTableColumn<Row>): JSX.Element => (
                       <td key={col.key} className={cellClass(col)} style={alignStyle(col)}>{renderCellContent(col, row)}</td>
                     ))}

package/adapters/vue/components/FdyAppShell.vue

@@ -26,14 +26,24 @@ const props = withDefaults(defineProps<{
   navOpen?: boolean;
   title?: string;
   toggleLabel?: string;
-}>(), { navOpen: undefined, title: '', toggleLabel: 'Toggle navigation' });
+  /**
+   * How a VISIBLE nav sits on a wide viewport: `push` (default) makes it a column that displaces
+   * the content, `overlay` floats it over the page with a backdrop. Below the nav breakpoint it is
+   * ignored — the nav is off-canvas there by definition, so there is nothing to choose.
+   */
+  navMode?: 'push' | 'overlay';
+}>(), { navOpen: undefined, title: '', toggleLabel: 'Toggle navigation', navMode: 'push' });
 
 const emit = defineEmits<{
   'update:navOpen': [boolean];
 }>();
 
 const root: Ref<HTMLElement | null> = ref(null);
-const overlay: Ref<boolean> = ref(false);
+/* The viewport half of the answer, kept separate from `overlay` now that a prop can also decide it:
+   a mode switch and a resize both change whether the nav floats, and only one of them is a viewport
+   event. */
+const wide: Ref<boolean> = ref(true);
+const overlay: ComputedRef<boolean> = computed((): boolean => !wide.value || props.navMode === 'overlay');
 const uncontrolled: Ref<boolean> = ref(true);
 const restoreTo: Ref<Element | null> = ref(null);
 let media: MediaQueryList | null = null;
@@ -46,8 +56,12 @@ const navVisible: ComputedRef<boolean> = computed((): boolean =>
 );
 
 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';
+  /* `--nav-overlay` rides on the MODE, not on the viewport: below the breakpoint the stylesheet's
+     own media query already makes the nav off-canvas, so the class would be redundant there, and
+     carrying it anyway is what lets one class answer "is this shell in overlay mode?" at any width. */
+  const mode: string = props.navMode === 'overlay' ? ' fdy-app--nav-overlay' : '';
+  if (overlay.value) return `fdy-app${mode}${navVisible.value ? ' fdy-app--nav-open' : ''}`;
+  return `fdy-app${mode}${navVisible.value ? '' : ' fdy-app--nav-collapsed'}`;
 });
 
 function setVisible(next: boolean): void {
@@ -102,17 +116,33 @@ function onKeydown(e: KeyboardEvent): void {
    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);
+  const nowWide: boolean = media !== null && media.matches;
+  if (nowWide === wide.value) return;
+  const wasOverlay: boolean = overlay.value;
+  const nextOverlay: boolean = !nowWide || props.navMode === 'overlay';
+  /* Only when the watcher will actually fire. In overlay MODE, crossing the breakpoint changes
+     neither `overlay` nor `navVisible`, so nothing re-runs — and a flag left standing here would
+     silently swallow the focus move of the next real toggle. */
+  if (nextOverlay !== wasOverlay) fromResize = true;
+  wide.value = nowWide;
+  if (nextOverlay && !wasOverlay && navVisible.value) setVisible(false);
 }
 
+/* Switching mode is not a reader asking to go somewhere either, so focus stays put. Turning overlay
+   ON over a visible column would drop a panel across a page nobody asked to leave, so it closes;
+   turning it OFF leaves visibility alone, because `navOpen` is the reader's answer and a mode change
+   is not a reason to overrule it. */
+watch((): 'push' | 'overlay' => props.navMode, (mode: 'push' | 'overlay'): void => {
+  fromResize = true;
+  if (mode === 'overlay' && wide.value && navVisible.value) setVisible(false);
+});
+
 onMounted((): void => {
   media = window.matchMedia(NAV_QUERY);
-  overlay.value = !media.matches;
-  uncontrolled.value = media.matches;
+  wide.value = media.matches;
+  /* An overlay nav starts CLOSED even on a wide screen: it covers the page, so opening it unasked
+     is the same intrusion it would be on a phone. A pushing column starts open. */
+  uncontrolled.value = media.matches && props.navMode !== 'overlay';
   media.addEventListener('change', onMediaChange);
   document.addEventListener('keydown', onKeydown);
   const el: HTMLElement | null = root.value;

package/adapters/vue/components/FdyDrawer.vue

@@ -16,6 +16,9 @@ const props = withDefaults(defineProps<{
   title: string;
   side?: 'left' | 'right';
   dismissible?: boolean;
+  /** aria-label for the × button. Default 'Close'. Blazor has had `CloseLabel` since it
+   *  shipped; these two hard-coded the string, so a non-English app could not rename it. */
+  closeLabel?: string;
 }>(), { dismissible: true });
 
 const emit = defineEmits<{
@@ -58,7 +61,7 @@ function onClick(e: MouseEvent): void {
       <h3 :id="titleId" class="fdy-drawer__title">
         <slot name="title">{{ title }}</slot>
       </h3>
-      <button v-if="dismissible" class="fdy-drawer__close" type="button" aria-label="Close" @click="$emit('close')">&times;</button>
+      <button v-if="dismissible" class="fdy-drawer__close" type="button" :aria-label="closeLabel ?? 'Close'" @click="$emit('close')">&times;</button>
     </div>
 
     <div class="fdy-drawer__body">

package/adapters/vue/components/FdyModal.vue

@@ -18,6 +18,9 @@ const props = withDefaults(defineProps<{
   title: string;
   size?: 'sm' | 'md' | 'lg' | 'wide';
   dismissible?: boolean;
+  /** aria-label for the × button. Default 'Close'. Blazor has had `CloseLabel` since it
+   *  shipped; these two hard-coded the string, so a non-English app could not rename it. */
+  closeLabel?: string;
 }>(), { dismissible: true });
 
 const emit = defineEmits<{
@@ -65,7 +68,7 @@ function onClick(e: MouseEvent): void {
       <h3 :id="titleId" class="fdy-modal__title">
         <slot name="title">{{ title }}</slot>
       </h3>
-      <button v-if="dismissible" class="fdy-modal__close" type="button" aria-label="Close" @click="$emit('close')">&times;</button>
+      <button v-if="dismissible" class="fdy-modal__close" type="button" :aria-label="closeLabel ?? 'Close'" @click="$emit('close')">&times;</button>
     </div>
 
     <div class="fdy-modal__body">

package/adapters/vue/components/FdyTable.vue

@@ -76,6 +76,23 @@ const props = withDefaults(defineProps<{
   rowClass?: (row: Row) => string | undefined;
   /** Controlled: row keys whose `row-detail` slot is shown as a full-width row beneath them. */
   expandedKeys?: ReadonlyArray<string | number>;
+  /** Zebra-stripe the body rows. */
+  striped?: boolean;
+  /** Render the checkbox column and the bulk bar. */
+  selectable?: boolean;
+  /** Controlled selection, as `rowKey` values. Provide to own it; omit for internal (the column
+   *  still works with nothing wired). */
+  selectedKeys?: ReadonlyArray<string | number>;
+  /** Bulk-bar count, `{n}` substituted. Default `{n} selected`. */
+  selectedText?: string;
+  /** Bulk-bar clear button. Default `Clear`. */
+  clearSelectionText?: string;
+  /** Accessible name of the header checkbox. Default `Select all rows on this page`. */
+  selectAllLabel?: string;
+  /** Accessible name of each row checkbox. Default `Select row`. */
+  selectRowLabel?: string;
+  /** Accessible name of the bulk bar region. Default `Bulk actions`. */
+  bulkLabel?: string;
 }>(), { pager: true });
 
 const emit = defineEmits<{
@@ -90,6 +107,9 @@ const emit = defineEmits<{
   'update:pageSize': [size: number];
   /** A row was activated (click, or Enter/Space while the row itself is focused). */
   'row-activate': [row: Row];
+  /** Selection changed, as `rowKey` values. Fires in both modes, so a screen can watch the
+   *  selection without owning it. */
+  'update:selectedKeys': [keys: Array<string | number>];
   /** 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. */
@@ -262,6 +282,65 @@ function onRowKeydown(e: KeyboardEvent, row: Row): void {
 function isExpanded(row: Row): boolean {
   return props.expandedKeys?.includes(props.rowKey(row)) === true;
 }
+
+/* Selection is keyed by `rowKey`, exactly as `expandedKeys` is, and for the same reason: a key
+ * survives the re-fetch that replaces every row object, an object identity does not. Controlled when
+ * `selectedKeys` is provided, internal otherwise, so the column works with nothing wired. */
+const internalSelectedKeys: Ref<Array<string | number>> = ref([]);
+const selectionControlled: ComputedRef<boolean> = computed((): boolean => props.selectedKeys !== undefined);
+const effectiveSelectedKeys: ComputedRef<ReadonlyArray<string | number>> = computed(
+  (): ReadonlyArray<string | number> =>
+    selectionControlled.value ? (props.selectedKeys as ReadonlyArray<string | number>) : internalSelectedKeys.value,
+);
+const selectedCount: ComputedRef<number> = computed((): number => effectiveSelectedKeys.value.length);
+/* The select-all box acts on the CURRENT PAGE, not on every filtered row: a header checkbox that
+ * silently selects rows the reader cannot see is how bulk deletes go wrong. Keys picked on other
+ * pages are preserved rather than dropped, so paging away and back does not lose them. */
+const pageKeys: ComputedRef<Array<string | number>> = computed((): Array<string | number> =>
+  displayRows.value.map((row: Row): string | number => props.rowKey(row)),
+);
+const allPageSelected: ComputedRef<boolean> = computed((): boolean =>
+  pageKeys.value.length > 0 && pageKeys.value.every((k: string | number): boolean => effectiveSelectedKeys.value.includes(k)),
+);
+const somePageSelected: ComputedRef<boolean> = computed((): boolean =>
+  !allPageSelected.value && pageKeys.value.some((k: string | number): boolean => effectiveSelectedKeys.value.includes(k)),
+);
+
+/* Always emits, controlled or not — the same call the `update:pageSize` control makes, and for the
+ * same reason: a screen that only wants to WATCH the selection (a summary line, an export button)
+ * should not have to take ownership of it to hear about it. */
+function setSelection(keys: Array<string | number>): void {
+  if (!selectionControlled.value) internalSelectedKeys.value = keys;
+  emit('update:selectedKeys', keys);
+}
+function isSelected(row: Row): boolean {
+  return effectiveSelectedKeys.value.includes(props.rowKey(row));
+}
+function toggleRow(row: Row, checked: boolean): void {
+  const key: string | number = props.rowKey(row);
+  const next: Array<string | number> = effectiveSelectedKeys.value.filter((k: string | number): boolean => k !== key);
+  if (checked) next.push(key);
+  setSelection(next);
+}
+function toggleAllOnPage(checked: boolean): void {
+  const onPage: Set<string | number> = new Set(pageKeys.value);
+  const offPage: Array<string | number> = effectiveSelectedKeys.value.filter(
+    (k: string | number): boolean => !onPage.has(k),
+  );
+  setSelection(checked ? offPage.concat(pageKeys.value) : offPage);
+}
+function clearSelection(): void {
+  setSelection([]);
+}
+function selectedLabel(n: number): string {
+  return (props.selectedText ?? '{n} selected').replace('{n}', String(n));
+}
+
+/* The checkbox column widens every full-width row (loading, empty, row detail) by one. Deriving it
+ * once is what keeps a later column change from leaving one of the three behind. */
+const colSpan: ComputedRef<number> = computed((): number =>
+  props.columns.length + (props.selectable === true ? 1 : 0),
+);
 </script>
 
 <template>
@@ -270,10 +349,38 @@ function isExpanded(row: Row): boolean {
       <slot name="toolbar" />
     </div>
 
+    <div
+      v-if="selectable"
+      class="fdy-table-bulkbar"
+      :hidden="selectedCount === 0"
+      role="region"
+      :aria-label="bulkLabel ?? 'Bulk actions'"
+    >
+      <span class="fdy-table-bulkbar__count" aria-live="polite">{{ selectedLabel(selectedCount) }}</span>
+      <span class="fdy-table-bulkbar__spacer"></span>
+      <div class="fdy-table-bulkbar__actions">
+        <slot name="bulk-actions" :keys="effectiveSelectedKeys" :clear="clearSelection" />
+        <button type="button" class="fdy-btn fdy-btn--ghost fdy-btn--sm" @click="clearSelection">
+          {{ clearSelectionText ?? 'Clear' }}
+        </button>
+      </div>
+    </div>
+
     <div class="fdy-table-scroll">
-      <table class="fdy-table" :aria-label="ariaLabel">
+      <table class="fdy-table" :class="{ 'fdy-table--striped': striped }" :aria-label="ariaLabel">
         <thead>
           <tr>
+            <th v-if="selectable" class="fdy-table__selcol" scope="col">
+              <input
+                type="checkbox"
+                class="fdy-checkbox"
+                data-fdy-select-all
+                :checked="allPageSelected"
+                :indeterminate.prop="somePageSelected"
+                :aria-label="selectAllLabel ?? 'Select all rows on this page'"
+                @change="toggleAllOnPage(($event.target as HTMLInputElement).checked)"
+              >
+            </th>
             <th v-for="col in columns" :key="col.key" scope="col" :style="alignStyle(col)" :aria-sort="ariaSortOf(col)">
               <button
                 v-if="col.sortable"
@@ -295,10 +402,10 @@ function isExpanded(row: Row): boolean {
         </thead>
         <tbody>
           <tr v-if="loading">
-            <td :colspan="columns.length" class="fdy-table__state" role="status">Loading…</td>
+            <td :colspan="colSpan" class="fdy-table__state" role="status">Loading…</td>
           </tr>
           <tr v-else-if="displayRows.length === 0">
-            <td :colspan="columns.length" class="fdy-table__state">
+            <td :colspan="colSpan" class="fdy-table__state">
               <slot name="empty">{{ emptyText ?? 'No data' }}</slot>
             </td>
           </tr>
@@ -308,15 +415,29 @@ function isExpanded(row: Row): boolean {
                 :class="rowClasses(row)"
                 :tabindex="rowActivatable ? 0 : undefined"
                 :aria-expanded="$slots['row-detail'] ? (isExpanded(row) ? 'true' : 'false') : undefined"
+                :aria-selected="selectable ? (isSelected(row) ? 'true' : 'false') : undefined"
                 @click="onRowClick(row)"
                 @keydown="onRowKeydown($event, row)"
               >
+                <td v-if="selectable" class="fdy-table__selcol">
+                  <!-- `.stop`: without it, ticking a checkbox in an activatable row also fires
+                       `row-activate`, so selecting a row would navigate away from it. -->
+                  <input
+                    type="checkbox"
+                    class="fdy-checkbox"
+                    data-fdy-row-select
+                    :checked="isSelected(row)"
+                    :aria-label="selectRowLabel ?? 'Select row'"
+                    @click.stop
+                    @change="toggleRow(row, ($event.target as HTMLInputElement).checked)"
+                  >
+                </td>
                 <td v-for="col in columns" :key="col.key" :class="cellClass(col)" :style="alignStyle(col)">
                   <slot :name="`cell-${col.key}`" :row="row" :value="cellValue(row, col)">{{ cellText(row, col) }}</slot>
                 </td>
               </tr>
               <tr v-if="$slots['row-detail'] && isExpanded(row)" class="fdy-table__detailrow">
-                <td :colspan="columns.length"><slot name="row-detail" :row="row" /></td>
+                <td :colspan="colSpan"><slot name="row-detail" :row="row" /></td>
               </tr>
             </template>
           </template>

package/dist/freeday-app-shell.js

@@ -60,7 +60,13 @@
 
     function isOverlayOpen() { return app.classList.contains('fdy-app--nav-open'); }
     function isCollapsed() { return app.classList.contains('fdy-app--nav-collapsed'); }
-    function navVisible() { return mqWide.matches ? !isCollapsed() : isOverlayOpen(); }
+    /* Whether the nav FLOATS. Two ways to be true, and only one of them is the viewport: below the
+       breakpoint it is off-canvas by definition, and above it `--nav-overlay` says the app chose to
+       float a nav that could have been a column. Everything downstream — which class means visible,
+       what the toggle does, whether the content goes inert — asks this instead of the media query,
+       so overlay mode reuses the drawer's whole code path rather than growing a second one. */
+    function isOverlayMode() { return !mqWide.matches || app.classList.contains('fdy-app--nav-overlay'); }
+    function navVisible() { return isOverlayMode() ? isOverlayOpen() : !isCollapsed(); }
 
     /* aria-expanded answers "is the nav showing?" in BOTH modes, the two state classes are the
        kit's business, not the reader's. */
@@ -68,7 +74,7 @@
       var visible = navVisible();
       toggle.setAttribute('aria-expanded', String(visible));
       setInert(sidebar, !visible);
-      setInert(content, !mqWide.matches && visible);
+      setInert(content, isOverlayMode() && visible);
       /* Announce only real changes. The first sync() runs at init to describe the state the markup
          arrived in, which is not something a host asked for and must not look like one. */
       if (lastVisible !== null && visible !== lastVisible) {
@@ -106,7 +112,7 @@
     }
 
     toggle.addEventListener('click', function () {
-      if (mqWide.matches) {
+      if (!isOverlayMode()) {
         app.classList.toggle('fdy-app--nav-collapsed');
         sync();
       } else if (isOverlayOpen()) {
@@ -154,7 +160,10 @@
        content inert forever: the panel becomes a static column again, and the page it is covering
        can no longer be clicked or read. */
     mqWide.addEventListener('change', function () {
-      if (mqWide.matches && isOverlayOpen()) close(false);
+      /* Only when the panel stops floating. In overlay MODE it floats at every width, so widening
+         must leave an open panel exactly as it is — closing it there would be the shell overruling
+         a reader who never asked for anything. */
+      if (mqWide.matches && !isOverlayMode() && isOverlayOpen()) close(false);
       else sync();
     });
 
@@ -164,9 +173,14 @@
        own state needs to drive this without reaching for the class names the kit reserves. */
     app._fdyAppShell = {
       isVisible: navVisible,
+      /* Re-read the DOM and reconcile `inert` + `aria-expanded`. Needed when something OUTSIDE the
+         enhancer changes what the state classes mean — switching `--nav-overlay` on or off does
+         exactly that, because it moves the answer to "is the nav visible?" from `--nav-collapsed`
+         to `--nav-open`. Without this a mode switch leaves a visible sidebar marked inert. */
+      refresh: sync,
       setVisible: function (visible) {
         if (visible === navVisible()) return;
-        if (mqWide.matches) {
+        if (!isOverlayMode()) {
           app.classList.toggle('fdy-app--nav-collapsed', !visible);
           sync();
         } else if (visible) {
@@ -203,5 +217,9 @@
     isVisible: function (root) {
       return !!(root && root._fdyAppShell && root._fdyAppShell.isVisible());
     },
+    /* Call after changing `--nav-overlay` from outside; see the note on the handle above. */
+    refresh: function (root) {
+      if (root && root._fdyAppShell) root._fdyAppShell.refresh();
+    },
   };
 })();

package/dist/freeday-autocomplete.js

@@ -40,6 +40,9 @@
     var _pop = null;
     function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(listbox, input); return _pop; }
     function open() {
+      /* The input carries these natively; a disabled one fires nothing, but a READONLY one still
+         takes focus and clicks, and the list used to open over a field nobody can edit. */
+      if (input.readOnly || input.disabled) return;
       if (!listbox.hidden) return;
       var p = popCtl(); if (p) p.show(); else listbox.hidden = false;
       input.setAttribute('aria-expanded', 'true');
@@ -134,5 +137,18 @@
     initAll();
   }
 
-  window.FreedayAutocomplete = { init: initAutocomplete, initAll: initAll };
+  /* Same contract as the combo's: the states live on the input natively, and a host that stops
+     re-rendering after hydration needs a way to change them afterwards. */
+  function setState(root, state) {
+    var input = root ? root.querySelector('input') : null;
+    if (!input || !state) return;
+    if (state.disabled != null) input.disabled = !!state.disabled;
+    if (state.readonly != null) input.readOnly = !!state.readonly;
+    if (state.invalid != null) {
+      if (state.invalid) input.setAttribute('aria-invalid', 'true');
+      else input.removeAttribute('aria-invalid');
+    }
+  }
+
+  window.FreedayAutocomplete = { init: initAutocomplete, initAll: initAll, setState: setState };
 })();