@adia-ai/web-components 0.8.45 → 0.8.46

package/components/table-footer/table-footer.class.js

@@ -0,0 +1,391 @@
+/**
+ * Non-side-effect class export for `<table-footer-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/table-footer`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <table-footer-ui for="tests" page="2" page-size="10" range-total="128"></table-footer-ui>
+ *
+ * Companion / footer bar for a sibling table-ui (gh#1807, spec-table-structural-system,
+ * ADR-0080). Renders two regions on one wrapping flex row: a "Showing X–Y of N"
+ * range label (inline-start) and a composed `<pagination-ui>` (inline-end).
+ * The pager itself is never re-implemented — table-footer-ui owns only the
+ * derivation math (pages / range window) and the range label's text + a11y.
+ *
+ * [for] resolution mirrors table-toolbar-ui/chart-legend-ui — the footer
+ * resolves an element by id, then wires state via events. When [for] is
+ * absent, falls back to the first table-ui sibling under the same parent.
+ *
+ * Derivation model, not explicit endpoints (REQ-F-002) — attributes are
+ * `page` / `page-size` / `range-total`; everything else (total pages, the
+ * range window) derives:
+ *   pages       = max(1, ceil(range-total / page-size))
+ *   range-start = (page − 1) × page-size + 1
+ *   range-end   = min(page × page-size, range-total)
+ *
+ * Degradation (REQ-S):
+ *   - range-total ABSENT            → indeterminate/loading: both regions hidden.
+ *   - range-total EXPLICIT "0"      → pager hidden; [slot="empty"] renders in
+ *                                      the range region if supplied, else hides.
+ *   - page-size ABSENT or "0"       → count-only label ("128 items"), no pager
+ *                                      (REQ-S-005 — the ordinary DEFAULT state,
+ *                                      since page-size defaults to 0).
+ *   - derived pages ≤ 1             → pager hidden, range label still renders.
+ *
+ * Target derivation (REQ-W-006, amended 0.2.0/ADR-0082) — a two-branch
+ * ladder when range-total is unset, per-attribute:
+ *   1. the target's own [range-total] attribute, when present — table-
+ *      authoritative SERVER mode (REQ-D-003, gh#1754). The identity rule:
+ *      the footer's range-total derives from the table's range-total, never
+ *      the table's filteredCount. Takes precedence over branch 2 even when
+ *      the target's [paginate] is also > 0 (server mode has a real page
+ *      size, it just isn't the source of the row total).
+ *   2. otherwise, when the resolved target has [paginate] > 0, CLIENT mode
+ *      (the original 0.1.0 behavior): page-size derives from
+ *      `target.paginate`, range-total from `target.filteredCount` (a
+ *      read-only getter on table-ui — search+filter applied,
+ *      pre-pagination).
+ * `page-size` derives from `target.paginate` in EITHER branch above. `page`
+ * has no live read on the target (no public getter for its private page
+ * state); the default (1) is correct at bind time for a freshly-connected
+ * table, and any later internal page move resyncs via the target's `page`
+ * event (below). Explicit attributes always win over derivation,
+ * per-attribute. Widened staleness edge: a programmatic `.data` swap — or a
+ * `range-total` update on the target without a page move — emits no event
+ * either.
+ *
+ * State flow — events-only interaction contract (ADR-0079, extended by
+ * ADR-0080 to a second sender). The footer never writes a property or calls
+ * a method on the bound table directly:
+ *   pager click  → `footer-page` { page } (1-based; bubbles, composed),
+ *                  dispatched directly at the resolved [for] target.
+ *                  table.class.js listens for it in connected()/disconnected()
+ *                  and applies it only when [paginate] > 0 (clamped; a
+ *                  non-numeric/NaN detail is a no-op; server-mode is a
+ *                  documented no-op).
+ *   pager click  → the footer's own bubbling `page-change` { page }
+ *                  notification (fires in both modes — the server-mode
+ *                  fetch hook).
+ *   table → footer (read direction, REQ-W-004) — the footer listens on the
+ *                  resolved target for its `page` notification to resync an
+ *                  internally-caused move (a search reset to page 1, an
+ *                  internal pager click with [no-pager] unset). Basing
+ *                  translation (gh#1808, SPEC O-1): table.class.js dispatches
+ *                  `page` with its internal 0-based index, and table.yaml
+ *                  documents it as such — this listener translates that
+ *                  0-based detail to this footer's own 1-based `page`. The
+ *                  footer's own surfaces (`page` attribute, `footer-page`,
+ *                  `page-change`) are all 1-based, always.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UITableFooter extends UIElement {
+  static properties = {
+    for:        { type: String, default: '',   reflect: true },
+    page:       { type: Number, default: 1,    reflect: true },
+    pageSize:   { type: Number, default: 0,    reflect: true, attribute: 'page-size' },
+    rangeTotal: { type: Number, default: 0,    reflect: true, attribute: 'range-total' },
+    // Pass-throughs to the composed pagination-ui (REQ-F-002) — the
+    // defaults below deliberately mirror pagination-ui's own defaults, so
+    // an unset pass-through is a no-op mirror, not a silent override.
+    siblings:   { type: Number, default: 1,    reflect: true },
+    size:       { type: String, default: 'md', reflect: true },
+  };
+
+  static template = () => null;
+
+  #target = null;
+
+  // ── Lifecycle ────────────────────────────────────────────────────────────
+
+  connected() {
+    this.#stamp();
+  }
+
+  render() {
+    // [for] / page / page-size / range-total / siblings / size changes come
+    // through here (the framework's own reactive effect calls render()
+    // once right after connected(), then again on every tracked-property
+    // change).
+    this.#resolveTarget();
+    this.#draw();
+  }
+
+  disconnected() {
+    this.#detachTarget();
+  }
+
+  // ADR-0076 REQ-E-001's own gotcha, ported verbatim (table-toolbar.class.js) —
+  // rangeTotal's default is already 0, so setting range-total="0" from an
+  // unset start parses to the SAME Number(0); the base class's property
+  // setter's Object.is short-circuit swallows the signal write, and render()
+  // never re-runs from the reactive effect alone. This is fundamentally an
+  // ATTRIBUTE-PRESENCE concern (REQ-S-001 vs REQ-S-002), not a coerced-value
+  // one, so it needs the raw attribute callback, not the signal diff.
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+    if (name === 'range-total') this.#draw();
+  }
+
+  // ── DOM stamp ────────────────────────────────────────────────────────────
+
+  #stamp() {
+    if (this.querySelector(':scope > [data-row]')) return;
+
+    const row = document.createElement('div');
+    row.setAttribute('data-row', '');
+
+    // REQ-X-002 — the range region announces page navigation without
+    // stealing focus; the `empty` slot's content (REQ-F-004) renders inside
+    // this SAME region, so a 0-result transition announces too.
+    const range = document.createElement('div');
+    range.setAttribute('data-range', '');
+    range.setAttribute('aria-live', 'polite');
+    range.setAttribute('aria-atomic', 'true');
+
+    const rangeText = document.createElement('span');
+    rangeText.setAttribute('data-range-text', '');
+    range.appendChild(rangeText);
+
+    // Empty-state slot (REQ-F-004) — real insertion point (ADR-0067), same
+    // move-pre-existing-children pattern as table-toolbar-ui's own [slot="empty"].
+    const rangeEmpty = document.createElement('div');
+    rangeEmpty.setAttribute('data-range-empty', '');
+    rangeEmpty.hidden = true;
+    for (const node of [...this.children]) {
+      if (node === row) continue;
+      if (node.getAttribute?.('slot') === 'empty') {
+        rangeEmpty.appendChild(node);
+      }
+    }
+    range.appendChild(rangeEmpty);
+
+    // Pager region (REQ-F-003) — composes <pagination-ui> per ADR-0027
+    // (listed in table-footer.yaml's `composes:`, never auto-imported).
+    const pagerWrap = document.createElement('div');
+    pagerWrap.setAttribute('data-pager', '');
+
+    const pag = document.createElement('pagination-ui');
+    pag.setAttribute('data-footer-pager', '');
+    pag.addEventListener('page-change', this.#onPagerChange);
+    pagerWrap.appendChild(pag);
+
+    row.appendChild(range);
+    row.appendChild(pagerWrap);
+    this.appendChild(row);
+  }
+
+  // ── Pager interaction (footer → table, REQ-W-001/003) ───────────────────
+
+  #onPagerChange = (e) => {
+    // The composed pagination-ui's own `page-change` also bubbles (it sets
+    // `bubbles: true`) — stop it here so an ancestor listening generically
+    // for `page-change` never receives BOTH the raw inner event and the
+    // footer's own re-dispatch of the same name below (code-checker
+    // finding, 2026-08-21).
+    e.stopPropagation();
+    const page = Number(e.detail?.page);
+    if (!Number.isFinite(page)) return;
+    // REQ-D-002 (CodeRabbit review, PR #1811): server-mode (an explicit
+    // [range-total]) never optimistically advances `this.page` — the
+    // consumer's write-back after a successful fetch is the state
+    // authority, so a failed fetch never needs an undo. Client-mode DOES
+    // advance immediately for a responsive pager; REQ-W-004's #onTargetPage
+    // resync listener then confirms/corrects it from the table's own
+    // `page` echo once the move actually lands.
+    if (!this.hasAttribute('range-total')) {
+      this.page = page;
+    }
+    if (this.#target) {
+      this.#target.dispatchEvent(new CustomEvent('footer-page', {
+        bubbles: true,
+        composed: true,
+        detail: { page },
+      }));
+    }
+    // REQ-W-003 — the footer's own consumer-facing notification, a
+    // distinct name from the inbound `footer-page` command, fires in both
+    // client- and server-mode (the server-mode fetch hook, REQ-D-002).
+    // Fires even with no resolved target (REQ-S-004 — a footer can drive a
+    // non-table surface).
+    this.dispatchEvent(new CustomEvent('page-change', {
+      bubbles: true,
+      detail: { page },
+    }));
+  };
+
+  // ── Target resolution (mirrors table-toolbar-ui's [for] pattern) ────────
+
+  #resolveTarget() {
+    const next = this.#findTarget();
+    if (next === this.#target) return;
+    this.#detachTarget();
+    if (!next) return;
+    this.#target = next;
+    next.addEventListener('page', this.#onTargetPage);
+    next.addEventListener('filter-change', this.#onTargetRefresh);
+    next.addEventListener('sort', this.#onTargetRefresh);
+  }
+
+  #findTarget() {
+    if (this.for) {
+      const root = this.getRootNode?.();
+      const byId = root?.getElementById?.(this.for) || document.getElementById(this.for);
+      if (byId && byId.tagName?.toLowerCase() === 'table-ui') return byId;
+      return null;
+    }
+    // Fallback — first sibling table-ui in the same parent (a direct
+    // child, never a deeper descendant — a "sibling" is a peer, not
+    // anything nested arbitrarily deep inside another peer's own subtree).
+    const parent = this.parentElement;
+    if (!parent) return null;
+    return parent.querySelector(':scope > table-ui') || null;
+  }
+
+  #detachTarget() {
+    if (this.#target) {
+      this.#target.removeEventListener('page', this.#onTargetPage);
+      this.#target.removeEventListener('filter-change', this.#onTargetRefresh);
+      this.#target.removeEventListener('sort', this.#onTargetRefresh);
+    }
+    this.#target = null;
+  }
+
+  // ── Read direction (table → footer, REQ-W-004) ──────────────────────────
+
+  #onTargetPage = (e) => {
+    const raw = Number(e.detail?.page);
+    if (!Number.isFinite(raw)) return;
+    // Basing translation (gh#1808, SPEC O-1) — see the class-doc comment
+    // above. table-ui's `page` event detail is 0-based by contract
+    // (table.yaml); this footer's own surfaces are all 1-based.
+    this.page = raw + 1;
+  };
+
+  #onTargetRefresh = () => {
+    // filter-change / sort don't move the target's own private page state,
+    // but they DO change the filtered row count a client-mode derivation
+    // (REQ-W-006) reads — re-derive and redraw without touching `page`.
+    this.#draw();
+  };
+
+  // ── Render ───────────────────────────────────────────────────────────────
+
+  #draw() {
+    const row = this.querySelector(':scope > [data-row]');
+    if (!row) return;
+
+    const rangeEl = row.querySelector(':scope > [data-range]');
+    const rangeText = rangeEl?.querySelector(':scope > [data-range-text]');
+    const rangeEmpty = rangeEl?.querySelector(':scope > [data-range-empty]');
+    const pagerWrap = row.querySelector(':scope > [data-pager]');
+    const pag = pagerWrap?.querySelector(':scope > pagination-ui');
+
+    const target = this.#target;
+    // gh#1754/ADR-0082 REQ-W-006 (amended 0.2.0) — the derivation ladder
+    // gains a server branch. targetServer (branch 2) takes precedence over
+    // the filteredCount fallback (branch 3) even when the target's
+    // [paginate] is also > 0 — a table-authoritative server-mode table
+    // (REQ-D-003) still has paginate > 0, so clientMode is narrowed to
+    // exclude it (the identity rule: the footer's range-total derives from
+    // the table's range-total, never its loaded-page filteredCount).
+    const targetServer = !!target && target.hasAttribute('range-total');
+    const clientMode = !!target && !targetServer && Number(target.paginate) > 0;
+
+    // REQ-F-002 — explicit attributes always win over derivation,
+    // per-attribute (not all-or-nothing).
+    const hasRangeTotal = this.hasAttribute('range-total');
+    const hasPageSize = this.hasAttribute('page-size');
+
+    const totalKnown = hasRangeTotal || targetServer || clientMode;
+    // gh#1754/ADR-0082 REQ-D-003 (CodeRabbit, PR #1828) — a raw `Number(x)
+    // || 0` accepts negative and non-finite author-set values verbatim
+    // (both are truthy), which can drive the range text negative/infinite
+    // (e.g. "Showing 1–-5 of -5"). Clamped to a finite, non-negative
+    // integer for both the local attribute and the server-mode target's.
+    const safeRangeTotal = (raw) => {
+      const n = Number(raw);
+      return Number.isFinite(n) && n > 0 ? Math.trunc(n) : 0;
+    };
+    const rangeTotal = hasRangeTotal
+      ? safeRangeTotal(this.rangeTotal)
+      : targetServer
+        ? safeRangeTotal(target.rangeTotal)
+        : (clientMode ? (Number(target.filteredCount) || 0) : 0);
+    // page-size still derives from target.paginate in EITHER derived mode
+    // (server or client) — unchanged behavior, just widened to cover the
+    // targetServer branch too (a server-mode target's paginate is its
+    // page-size, same as a client-mode target's).
+    const pageSize = hasPageSize
+      ? (Number(this.pageSize) || 0)
+      : ((targetServer || clientMode) ? (Number(target.paginate) || 0) : (Number(this.pageSize) || 0));
+
+    if (!rangeEl) return;
+
+    if (!totalKnown) {
+      // REQ-S-001 — indeterminate (loading). Absence means "not yet known",
+      // never "zero" — the hasAttribute discipline above prevents any
+      // empty-state flash while data fetches (AC-006).
+      rangeEl.hidden = true;
+      if (pagerWrap) pagerWrap.hidden = true;
+      return;
+    }
+
+    rangeEl.hidden = false;
+
+    if (rangeTotal === 0) {
+      // REQ-S-002 — confirmed-empty. The empty slot always wins over the
+      // range text whenever range-total is confirmed zero, mutually
+      // exclusive with the normal-range branch below.
+      const hasEmptyContent = !!rangeEmpty && rangeEmpty.childNodes.length > 0;
+      if (rangeText) rangeText.hidden = true;
+      if (rangeEmpty) rangeEmpty.hidden = !hasEmptyContent;
+      if (pagerWrap) pagerWrap.hidden = true;
+      return;
+    }
+
+    if (rangeEmpty) rangeEmpty.hidden = true;
+
+    if (pageSize <= 0) {
+      // REQ-S-005 — unknown page size, the ORDINARY default state
+      // (page-size defaults to 0). Count-only label; never the undefined
+      // "Showing 1–0 of N" math an unbounded pager would otherwise need.
+      if (rangeText) {
+        rangeText.hidden = false;
+        rangeText.textContent = `${rangeTotal} items`;
+      }
+      if (pagerWrap) pagerWrap.hidden = true;
+      return;
+    }
+
+    const pages = Math.max(1, Math.ceil(rangeTotal / pageSize));
+    const page = Math.max(1, Math.min(Number(this.page) || 1, pages));
+    const start = (page - 1) * pageSize + 1;
+    const end = Math.min(page * pageSize, rangeTotal);
+
+    if (rangeText) {
+      rangeText.hidden = false;
+      rangeText.textContent = `Showing ${start}–${end} of ${rangeTotal}`;
+    }
+
+    if (pagerWrap) {
+      // REQ-S-003 — a single page is still information, just no pager.
+      pagerWrap.hidden = pages <= 1;
+    }
+    if (pag) {
+      pag.setAttribute('page', String(page));
+      pag.setAttribute('total', String(pages));
+      pag.setAttribute('siblings', String(Math.max(0, Number(this.siblings) || 0)));
+      pag.setAttribute('size', this.size || 'md');
+    }
+  }
+}

package/components/table-footer/table-footer.css

@@ -0,0 +1,64 @@
+@scope (table-footer-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --table-footer-gap: var(--a-space-3);
+    --table-footer-py:  var(--a-space-2);
+    --table-footer-px:  0;
+
+    /* ── Range label ("Showing X–Y of N" / "N items") ── */
+    --table-footer-summary-fg:   var(--md-sys-color-neutral-on-surface-variant);
+    --table-footer-summary-size: var(--a-ui-size);
+  }
+
+  /* ═══════ Base ═══════ */
+
+  :scope {
+    box-sizing: border-box;
+    display: block;
+    color: var(--md-sys-color-neutral-on-surface);
+  }
+
+  [data-row] {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--table-footer-gap);
+    padding: var(--table-footer-py) var(--table-footer-px);
+    min-width: 0;
+  }
+
+  /* ═══════ Range label ═══════ */
+
+  [data-range] {
+    flex: 0 0 auto;
+  }
+
+  [data-range][hidden] { display: none; }
+
+  [data-range-text] {
+    font-size: var(--table-footer-summary-size);
+    color: var(--table-footer-summary-fg);
+    line-height: var(--a-font-leading-snug);
+  }
+
+  [data-range-text][hidden] { display: none; }
+
+  /* ═══════ Empty-state slot ═══════ (REQ-F-004 — renders in [data-range]'s
+     own position, alongside [data-range-text]; only one of the two is ever
+     visible at a time, per #draw(). Plain author-supplied markup — no
+     forced typography here, unlike [data-range-text] above, which styles
+     OUR OWN generated text. */
+
+  [data-range-empty][hidden] { display: none; }
+
+  /* ═══════ Pager region ═══════ */
+
+  [data-pager] {
+    flex: 0 0 auto;
+    margin-inline-start: auto;
+  }
+
+  [data-pager][hidden] { display: none; }
+}

package/components/table-footer/table-footer.d.ts

@@ -0,0 +1,39 @@
+/**
+ * `<table-footer-ui>` — Footer / companion bar for a sibling table-ui (gh#1807, ADR-0080) — a "Showing X–Y of N" range label paired with a composed pagination-ui. Derivation-model API: set `page` / `page-size` / `range-total` and the footer derives total pages and the range window itself, so it never drifts out of sync with its own pager. Wired to the target table via a [for] id-ref and CustomEvents only (ADR-0079/ADR-0080) — the footer never writes a property or calls a method on the bound table. Drop below (or inside a card-ui footer alongside) any table-ui to add the standard data-grid pager + range summary without re-implementing pagination-ui's ellipsis truncation, keyboard handling, or ARIA.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/table-footer
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export type TableFooterFooterPageEvent = CustomEvent<unknown>;
+export type TableFooterPageChangeEvent = CustomEvent<unknown>;
+
+export class UITableFooter extends UIElement {
+  /** id-ref of the table-ui to control. Falls back to the first sibling table-ui within the same parent when omitted. */
+  for: string;
+  /** Current page, 1-based. Explicit attributes always win over derivation (per-attribute, not all-or-nothing) — see page-size/range-total. */
+  page: number;
+  /** Rows per page. Default 0 (unknown) is the ORDINARY default state, not an exotic edge case: with page-size absent/0 and range-total present, the range label renders in count-only form ("128 items") and the pager does not render — the derivation math (pages = range-total / page-size) is undefined without a page size. In a client-mode composition (the resolved target has [paginate] > 0) and this attribute is unset, the footer derives page-size from the target's own [paginate] value. */
+  pageSize: number;
+  /** Total ROWS across all pages. Absent (the default) means "not yet known" (loading) — never "zero"; both the range label and the pager stay hidden until this is set. Explicit range-total="0" is the confirmed-empty state (pager hidden; the `empty` slot renders in the range label's position when supplied). Named identically to table-toolbar-ui's [range-total] and table-ui's own [range-total] (gh#1754, ADR-0082) and deliberately NOT `total` (pagination-ui's `total` is total PAGES — the ADR-0063 B5 collision rule). When this attribute is unset, the footer derives it from the resolved target via a two-branch ladder (REQ-W-006, amended 0.2.0/ADR-0082): (1) the target's own [range-total] attribute, when present — the table-authoritative SERVER mode (gh#1754 Shape 1's second lawful composition); the identity rule: the footer's range-total derives from the table's range-total, never the table's filteredCount, and this branch wins even when the target's [paginate] is also > 0; (2) otherwise, when the target has [paginate] > 0, CLIENT mode: the target's filtered row count (search + column filters applied, before pagination). Refreshes on the target's `page` / `filter-change` / `sort` events in either branch. Widened named staleness edge: a programmatic `.data` swap on the target — or a `range-total` update on the target without an accompanying page move — emits no event; either re-set this footer's own attributes after such a change, or accept staleness until the target's next event. */
+  rangeTotal: number;
+  /** Passed through to the composed pagination-ui's own [siblings] (page-number window size on each side of the current page). */
+  siblings: number;
+  /** Passed through to the composed pagination-ui's own [size] (sm | md | lg, the universal size system). */
+  size: string;
+
+  addEventListener(type: 'footer-page', listener: (ev: TableFooterFooterPageEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'page-change', listener: (ev: TableFooterPageChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITableFooter, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+}

package/components/table-footer/table-footer.examples.md

@@ -0,0 +1,46 @@
+# table-footer — Examples
+
+## Wiring
+
+```html
+<card-ui>
+  <section bleed>
+    <table-ui id="tests" paginate="10" no-pager>…</table-ui>
+  </section>
+  <footer divider>
+    <table-footer-ui for="tests"></table-footer-ui>
+  </footer>
+</card-ui>
+```
+
+## Rendered demos
+
+```html
+<col-ui gap="0">
+  <table-ui id="demo-footer-server" raw>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Metabolic panel — A. Chen</td>
+          <td>
+            <tag-ui variant="success">Complete</tag-ui>
+          </td>
+        </tr>
+        <tr>
+          <td>Metabolic panel — J. Park</td>
+          <td>
+            <tag-ui variant="warning">Pending</tag-ui>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </table-ui>
+  <table-footer-ui for="demo-footer-server" page="2" page-size="10" range-total="128"></table-footer-ui>
+</col-ui>
+```

package/components/table-footer/table-footer.js

@@ -0,0 +1,17 @@
+/**
+ * `<table-footer-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UITableFooter } from '@adia-ai/web-components/components/table-footer/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UITableFooter } from './table-footer.class.js';
+
+defineIfFree('table-footer-ui', UITableFooter);
+
+export { UITableFooter };