@at-flux/astroflare 1.0.6 → 1.0.7

package/README.md

@@ -50,6 +50,7 @@ import { forms } from "@at-flux/astroflare/core";
 - `FilterPills.astro` — Tag-colored filter chips with an `all` option and active-state styling
 - `Pager.astro` — Pagination UI primitive for both browser-only and link-driven query pagination
 - `CollectionQuery.astro` — Unified collection filtering/pagination component (client mode by default; URL-driven server mode with `useServer`)
+- `CollectionFooterControls.astro` — Server-only row: optional `summary` slot, `Pager`, and page-size `<form>` (same query contract as `CollectionQuery` server mode)
 
 #### Component props reference
 
@@ -68,6 +69,7 @@ import { forms } from "@at-flux/astroflare/core";
 - `Pager.astro`: `pageCount`, `activePage`, `items`, `class`
 - `CollectionQuery.astro`: `useServer`, `pathname`, `query`, `totalPages`, `currentPage`, `filters`, `maxPageButtons`, `filtersClass`, `pagerClass`, `perPage`, `class`
   - when `useServer` is `true`, `pathname`, `query`, `totalPages`, and `currentPage` are required
+- `CollectionFooterControls.astro`: `pathname`, `query`, `totalPages`, `currentPage`, `sizeOptions`, `maxPageButtons`, `class` — slot `summary` for “Showing X–Y of Z” text
 
 ### Server Islands Pattern
 
@@ -122,7 +124,8 @@ Use named slots to replace the default filter/pager rendering:
 
 - `getTagPalette(tag, options?)` — Deterministic, readable tag color assignment with optional explicit overrides
 - `formatDisplayDate(date, config?)` — Consistent card/detail date formatting with locale override support
-- `parseCollectionQuery(searchParams, options?)` + `paginateCollection(list, query)` + `buildCollectionHref(path, query, overrides?)` + `buildPageSequence(total, current, max?)` + `matchesCollectionFilters(values, filters)` — URL-driven filtering and pagination helpers (`filters` query param supports stringified JSON for multi-filter payloads)
+- `parseCollectionQuery` + `paginateCollection` + `buildCollectionHref` + `buildPageSequence` + `matchesCollectionFilters` + `formatCollectionRangeLabel` + `resolveIslandSearchString` — URL-driven filtering and pagination (`filters` as stringified JSON). `resolveIslandSearchString` is for server islands (pass the page’s search from the page; fall back to `Referer`). `formatCollectionRangeLabel` is for “Showing result N of T” / “Showing results a–b of T” footers.
+- `astroflare-link-local` is **shipped in this package**; run it from any project that depends on `@at-flux/astroflare` (it walks up to the nearest `package.json` that lists the dep). `status` shows whether a local overlay is active. See **Local checkout** below.
 
 ## Usage
 

package/dist/core.cjs

@@ -77,21 +77,25 @@ const formatDisplayDate = (date, config = {}) => {
 };
 //#endregion
 //#region src/collection-query.ts
+const normalizeFilterToken = (value) => value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").replace(/_+/g, "_");
+const parseFilterValueList = (value) => (value ?? "").split(",").map(normalizeFilterToken).filter(Boolean).filter((token, index, list) => list.indexOf(token) === index);
+const formatFilterValueListLabel = (value) => parseFilterValueList(value).map((token) => token.replace(/_/g, " ").toUpperCase()).join(" + ");
 const toInt = (value, fallback) => {
 	const parsed = Number.parseInt(value ?? "", 10);
 	return Number.isFinite(parsed) ? parsed : fallback;
 };
 const parseCollectionQuery = (searchParams, options = {}) => {
 	const { defaultPage = 1, defaultSize = 12, maxSize = 100 } = options;
-	const page = Math.max(1, toInt(searchParams.get("page"), defaultPage));
 	const size = Math.min(maxSize, Math.max(1, toInt(searchParams.get("size"), defaultSize)));
-	const fallbackOffset = (page - 1) * size;
-	const offset = Math.max(0, toInt(searchParams.get("offset"), fallbackOffset));
+	const pageParam = Math.max(1, toInt(searchParams.get("page"), defaultPage));
+	const rawOffset = searchParams.has("offset") ? Math.max(0, toInt(searchParams.get("offset"), 0)) : (pageParam - 1) * size;
+	const page = Math.max(1, Math.floor(rawOffset / size) + 1);
+	const offset = (page - 1) * size;
 	const rawFilters = searchParams.get("filters");
 	let filters = {};
 	if (rawFilters) try {
 		const parsed = JSON.parse(rawFilters);
-		filters = Object.fromEntries(Object.entries(parsed).filter(([, value]) => typeof value === "string").map(([key, value]) => [key, String(value)]));
+		filters = Object.fromEntries(Object.entries(parsed).filter(([, value]) => typeof value === "string").map(([key, value]) => [key, parseFilterValueList(String(value)).join(",")]));
 	} catch {
 		filters = {};
 	}
@@ -120,17 +124,22 @@ const buildCollectionHref = (pathname, query, overrides = {}) => {
 		...query,
 		...overrides
 	};
-	const normalizedOffset = (next.page - 1) * next.size;
+	const offsetFromPage = (next.page - 1) * next.size;
 	const params = new URLSearchParams({
 		page: String(next.page),
 		size: String(next.size),
-		offset: String(next.offset ?? normalizedOffset)
+		offset: String(offsetFromPage)
 	});
-	if (Object.keys(next.filters ?? {}).length > 0) params.set("filters", JSON.stringify(next.filters));
+	if (Object.keys(next.filters ?? {}).length > 0) {
+		const normalizedFilters = Object.fromEntries(Object.entries(next.filters).map(([key, value]) => [key, parseFilterValueList(value).join(",")]));
+		params.set("filters", JSON.stringify(normalizedFilters));
+	}
 	return `${pathname}?${params.toString()}`;
 };
 const matchesCollectionFilters = (values, filters) => Object.entries(filters).every(([key, value]) => {
-	return (values[key] ?? []).includes(value);
+	const expected = parseFilterValueList(value);
+	const candidates = (values[key] ?? []).map(normalizeFilterToken);
+	return expected.every((token) => candidates.includes(token));
 });
 const buildPageSequence = (totalPages, currentPage, maxButtons = 7) => {
 	if (totalPages <= maxButtons) return Array.from({ length: totalPages }, (_, index) => index + 1);
@@ -145,11 +154,36 @@ const buildPageSequence = (totalPages, currentPage, maxButtons = 7) => {
 	sequence.push(totalPages);
 	return sequence;
 };
+/**
+* For Astro server islands: the serialized `search` prop is usually set from the
+* page request, but the island subrequest may omit it. When empty, use the
+* `Referer` request header so `parseCollectionQuery` still matches the main document URL.
+*/
+/** "Showing …" for collection footers: avoids "3—3" when one item; uses en dash for ranges. */
+const formatCollectionRangeLabel = (slice) => {
+	if (slice.totalItems === 0) return "Showing 0 of 0";
+	const a = slice.start + 1;
+	const b = slice.end;
+	if (a === b) return `Showing result ${a} of ${slice.totalItems}`;
+	return `Showing results ${a}–${b} of ${slice.totalItems}`;
+};
+const resolveIslandSearchString = (searchFromProps, request) => {
+	if (searchFromProps) return searchFromProps;
+	const referer = request.headers.get("referer") ?? "";
+	if (!referer) return "";
+	try {
+		return new URL(referer).search;
+	} catch {
+		return "";
+	}
+};
 //#endregion
 exports.buildCollectionHref = buildCollectionHref;
 exports.buildPageSequence = buildPageSequence;
 exports.composeEmailAddress = require_forms.composeEmailAddress;
+exports.formatCollectionRangeLabel = formatCollectionRangeLabel;
 exports.formatDisplayDate = formatDisplayDate;
+exports.formatFilterValueListLabel = formatFilterValueListLabel;
 Object.defineProperty(exports, "forms", {
 	enumerable: true,
 	get: function() {
@@ -160,7 +194,10 @@ exports.generateFormResultHtml = require_forms.generateFormResultHtml;
 exports.generateFormSectionHtml = require_forms.generateFormSectionHtml;
 exports.getTagPalette = getTagPalette;
 exports.matchesCollectionFilters = matchesCollectionFilters;
+exports.normalizeFilterToken = normalizeFilterToken;
 exports.paginateCollection = paginateCollection;
 exports.parseCollectionQuery = parseCollectionQuery;
+exports.parseFilterValueList = parseFilterValueList;
 exports.renderEmailTemplate = require_forms.renderEmailTemplate;
+exports.resolveIslandSearchString = resolveIslandSearchString;
 exports.sendEmail = require_forms.sendEmail;

package/dist/core.d.cts

@@ -50,10 +50,21 @@ interface PaginationSlice<T> {
   start: number;
   end: number;
 }
+declare const normalizeFilterToken: (value: string) => string;
+declare const parseFilterValueList: (value: string | undefined) => string[];
+declare const formatFilterValueListLabel: (value: string | undefined) => string;
 declare const parseCollectionQuery: (searchParams: URLSearchParams, options?: CollectionQueryOptions) => CollectionQueryState;
 declare const paginateCollection: <T>(list: T[], query: CollectionQueryState) => PaginationSlice<T>;
 declare const buildCollectionHref: (pathname: string, query: CollectionQueryState, overrides?: Partial<CollectionQueryState>) => string;
 declare const matchesCollectionFilters: (values: Record<string, string[]>, filters: Record<string, string>) => boolean;
 declare const buildPageSequence: (totalPages: number, currentPage: number, maxButtons?: number) => Array<number | "\u2026">;
+/**
+ * For Astro server islands: the serialized `search` prop is usually set from the
+ * page request, but the island subrequest may omit it. When empty, use the
+ * `Referer` request header so `parseCollectionQuery` still matches the main document URL.
+ */
+/** "Showing …" for collection footers: avoids "3—3" when one item; uses en dash for ranges. */
+declare const formatCollectionRangeLabel: (slice: Pick<PaginationSlice<unknown>, "start" | "end" | "totalItems">) => string;
+declare const resolveIslandSearchString: (searchFromProps: string | undefined, request: Request) => string;
 //#endregion
-export { CollectionQueryOptions, CollectionQueryState, DateFormatOptions, EmailPayload, FormSection, PaginationSlice, ResendConfig, TagColorOptions, TagPalette, buildCollectionHref, buildPageSequence, composeEmailAddress, formatDisplayDate, index_d_exports as forms, generateFormResultHtml, generateFormSectionHtml, getTagPalette, matchesCollectionFilters, paginateCollection, parseCollectionQuery, renderEmailTemplate, sendEmail };
+export { CollectionQueryOptions, CollectionQueryState, DateFormatOptions, EmailPayload, FormSection, PaginationSlice, ResendConfig, TagColorOptions, TagPalette, buildCollectionHref, buildPageSequence, composeEmailAddress, formatCollectionRangeLabel, formatDisplayDate, formatFilterValueListLabel, index_d_exports as forms, generateFormResultHtml, generateFormSectionHtml, getTagPalette, matchesCollectionFilters, normalizeFilterToken, paginateCollection, parseCollectionQuery, parseFilterValueList, renderEmailTemplate, resolveIslandSearchString, sendEmail };

package/dist/core.d.ts

@@ -50,10 +50,21 @@ interface PaginationSlice<T> {
   start: number;
   end: number;
 }
+declare const normalizeFilterToken: (value: string) => string;
+declare const parseFilterValueList: (value: string | undefined) => string[];
+declare const formatFilterValueListLabel: (value: string | undefined) => string;
 declare const parseCollectionQuery: (searchParams: URLSearchParams, options?: CollectionQueryOptions) => CollectionQueryState;
 declare const paginateCollection: <T>(list: T[], query: CollectionQueryState) => PaginationSlice<T>;
 declare const buildCollectionHref: (pathname: string, query: CollectionQueryState, overrides?: Partial<CollectionQueryState>) => string;
 declare const matchesCollectionFilters: (values: Record<string, string[]>, filters: Record<string, string>) => boolean;
 declare const buildPageSequence: (totalPages: number, currentPage: number, maxButtons?: number) => Array<number | "\u2026">;
+/**
+ * For Astro server islands: the serialized `search` prop is usually set from the
+ * page request, but the island subrequest may omit it. When empty, use the
+ * `Referer` request header so `parseCollectionQuery` still matches the main document URL.
+ */
+/** "Showing …" for collection footers: avoids "3—3" when one item; uses en dash for ranges. */
+declare const formatCollectionRangeLabel: (slice: Pick<PaginationSlice<unknown>, "start" | "end" | "totalItems">) => string;
+declare const resolveIslandSearchString: (searchFromProps: string | undefined, request: Request) => string;
 //#endregion
-export { CollectionQueryOptions, CollectionQueryState, DateFormatOptions, EmailPayload, FormSection, PaginationSlice, ResendConfig, TagColorOptions, TagPalette, buildCollectionHref, buildPageSequence, composeEmailAddress, formatDisplayDate, index_d_exports as forms, generateFormResultHtml, generateFormSectionHtml, getTagPalette, matchesCollectionFilters, paginateCollection, parseCollectionQuery, renderEmailTemplate, sendEmail };
+export { CollectionQueryOptions, CollectionQueryState, DateFormatOptions, EmailPayload, FormSection, PaginationSlice, ResendConfig, TagColorOptions, TagPalette, buildCollectionHref, buildPageSequence, composeEmailAddress, formatCollectionRangeLabel, formatDisplayDate, formatFilterValueListLabel, index_d_exports as forms, generateFormResultHtml, generateFormSectionHtml, getTagPalette, matchesCollectionFilters, normalizeFilterToken, paginateCollection, parseCollectionQuery, parseFilterValueList, renderEmailTemplate, resolveIslandSearchString, sendEmail };

package/dist/core.js

@@ -76,21 +76,25 @@ const formatDisplayDate = (date, config = {}) => {
 };
 //#endregion
 //#region src/collection-query.ts
+const normalizeFilterToken = (value) => value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").replace(/_+/g, "_");
+const parseFilterValueList = (value) => (value ?? "").split(",").map(normalizeFilterToken).filter(Boolean).filter((token, index, list) => list.indexOf(token) === index);
+const formatFilterValueListLabel = (value) => parseFilterValueList(value).map((token) => token.replace(/_/g, " ").toUpperCase()).join(" + ");
 const toInt = (value, fallback) => {
 	const parsed = Number.parseInt(value ?? "", 10);
 	return Number.isFinite(parsed) ? parsed : fallback;
 };
 const parseCollectionQuery = (searchParams, options = {}) => {
 	const { defaultPage = 1, defaultSize = 12, maxSize = 100 } = options;
-	const page = Math.max(1, toInt(searchParams.get("page"), defaultPage));
 	const size = Math.min(maxSize, Math.max(1, toInt(searchParams.get("size"), defaultSize)));
-	const fallbackOffset = (page - 1) * size;
-	const offset = Math.max(0, toInt(searchParams.get("offset"), fallbackOffset));
+	const pageParam = Math.max(1, toInt(searchParams.get("page"), defaultPage));
+	const rawOffset = searchParams.has("offset") ? Math.max(0, toInt(searchParams.get("offset"), 0)) : (pageParam - 1) * size;
+	const page = Math.max(1, Math.floor(rawOffset / size) + 1);
+	const offset = (page - 1) * size;
 	const rawFilters = searchParams.get("filters");
 	let filters = {};
 	if (rawFilters) try {
 		const parsed = JSON.parse(rawFilters);
-		filters = Object.fromEntries(Object.entries(parsed).filter(([, value]) => typeof value === "string").map(([key, value]) => [key, String(value)]));
+		filters = Object.fromEntries(Object.entries(parsed).filter(([, value]) => typeof value === "string").map(([key, value]) => [key, parseFilterValueList(String(value)).join(",")]));
 	} catch {
 		filters = {};
 	}
@@ -119,17 +123,22 @@ const buildCollectionHref = (pathname, query, overrides = {}) => {
 		...query,
 		...overrides
 	};
-	const normalizedOffset = (next.page - 1) * next.size;
+	const offsetFromPage = (next.page - 1) * next.size;
 	const params = new URLSearchParams({
 		page: String(next.page),
 		size: String(next.size),
-		offset: String(next.offset ?? normalizedOffset)
+		offset: String(offsetFromPage)
 	});
-	if (Object.keys(next.filters ?? {}).length > 0) params.set("filters", JSON.stringify(next.filters));
+	if (Object.keys(next.filters ?? {}).length > 0) {
+		const normalizedFilters = Object.fromEntries(Object.entries(next.filters).map(([key, value]) => [key, parseFilterValueList(value).join(",")]));
+		params.set("filters", JSON.stringify(normalizedFilters));
+	}
 	return `${pathname}?${params.toString()}`;
 };
 const matchesCollectionFilters = (values, filters) => Object.entries(filters).every(([key, value]) => {
-	return (values[key] ?? []).includes(value);
+	const expected = parseFilterValueList(value);
+	const candidates = (values[key] ?? []).map(normalizeFilterToken);
+	return expected.every((token) => candidates.includes(token));
 });
 const buildPageSequence = (totalPages, currentPage, maxButtons = 7) => {
 	if (totalPages <= maxButtons) return Array.from({ length: totalPages }, (_, index) => index + 1);
@@ -144,5 +153,28 @@ const buildPageSequence = (totalPages, currentPage, maxButtons = 7) => {
 	sequence.push(totalPages);
 	return sequence;
 };
+/**
+* For Astro server islands: the serialized `search` prop is usually set from the
+* page request, but the island subrequest may omit it. When empty, use the
+* `Referer` request header so `parseCollectionQuery` still matches the main document URL.
+*/
+/** "Showing …" for collection footers: avoids "3—3" when one item; uses en dash for ranges. */
+const formatCollectionRangeLabel = (slice) => {
+	if (slice.totalItems === 0) return "Showing 0 of 0";
+	const a = slice.start + 1;
+	const b = slice.end;
+	if (a === b) return `Showing result ${a} of ${slice.totalItems}`;
+	return `Showing results ${a}–${b} of ${slice.totalItems}`;
+};
+const resolveIslandSearchString = (searchFromProps, request) => {
+	if (searchFromProps) return searchFromProps;
+	const referer = request.headers.get("referer") ?? "";
+	if (!referer) return "";
+	try {
+		return new URL(referer).search;
+	} catch {
+		return "";
+	}
+};
 //#endregion
-export { buildCollectionHref, buildPageSequence, composeEmailAddress, formatDisplayDate, forms_exports as forms, generateFormResultHtml, generateFormSectionHtml, getTagPalette, matchesCollectionFilters, paginateCollection, parseCollectionQuery, renderEmailTemplate, sendEmail };
+export { buildCollectionHref, buildPageSequence, composeEmailAddress, formatCollectionRangeLabel, formatDisplayDate, formatFilterValueListLabel, forms_exports as forms, generateFormResultHtml, generateFormSectionHtml, getTagPalette, matchesCollectionFilters, normalizeFilterToken, paginateCollection, parseCollectionQuery, parseFilterValueList, renderEmailTemplate, resolveIslandSearchString, sendEmail };

package/dist/index.cjs

@@ -4,7 +4,9 @@ const require_core = require("./core.cjs");
 exports.buildCollectionHref = require_core.buildCollectionHref;
 exports.buildPageSequence = require_core.buildPageSequence;
 exports.composeEmailAddress = require_forms.composeEmailAddress;
+exports.formatCollectionRangeLabel = require_core.formatCollectionRangeLabel;
 exports.formatDisplayDate = require_core.formatDisplayDate;
+exports.formatFilterValueListLabel = require_core.formatFilterValueListLabel;
 Object.defineProperty(exports, "forms", {
 	enumerable: true,
 	get: function() {
@@ -15,7 +17,10 @@ exports.generateFormResultHtml = require_forms.generateFormResultHtml;
 exports.generateFormSectionHtml = require_forms.generateFormSectionHtml;
 exports.getTagPalette = require_core.getTagPalette;
 exports.matchesCollectionFilters = require_core.matchesCollectionFilters;
+exports.normalizeFilterToken = require_core.normalizeFilterToken;
 exports.paginateCollection = require_core.paginateCollection;
 exports.parseCollectionQuery = require_core.parseCollectionQuery;
+exports.parseFilterValueList = require_core.parseFilterValueList;
 exports.renderEmailTemplate = require_forms.renderEmailTemplate;
+exports.resolveIslandSearchString = require_core.resolveIslandSearchString;
 exports.sendEmail = require_forms.sendEmail;

package/dist/index.d.cts

@@ -1,3 +1,3 @@
 import { a as generateFormResultHtml, c as renderEmailTemplate, i as composeEmailAddress, l as sendEmail, n as FormSection, o as generateFormSectionHtml, r as ResendConfig, s as index_d_exports, t as EmailPayload } from "./index-CcH_yXr-.cjs";
-import { CollectionQueryOptions, CollectionQueryState, DateFormatOptions, PaginationSlice, TagColorOptions, TagPalette, buildCollectionHref, buildPageSequence, formatDisplayDate, getTagPalette, matchesCollectionFilters, paginateCollection, parseCollectionQuery } from "./core.cjs";
-export { CollectionQueryOptions, CollectionQueryState, DateFormatOptions, EmailPayload, FormSection, PaginationSlice, ResendConfig, TagColorOptions, TagPalette, buildCollectionHref, buildPageSequence, composeEmailAddress, formatDisplayDate, index_d_exports as forms, generateFormResultHtml, generateFormSectionHtml, getTagPalette, matchesCollectionFilters, paginateCollection, parseCollectionQuery, renderEmailTemplate, sendEmail };
+import { CollectionQueryOptions, CollectionQueryState, DateFormatOptions, PaginationSlice, TagColorOptions, TagPalette, buildCollectionHref, buildPageSequence, formatCollectionRangeLabel, formatDisplayDate, formatFilterValueListLabel, getTagPalette, matchesCollectionFilters, normalizeFilterToken, paginateCollection, parseCollectionQuery, parseFilterValueList, resolveIslandSearchString } from "./core.cjs";
+export { CollectionQueryOptions, CollectionQueryState, DateFormatOptions, EmailPayload, FormSection, PaginationSlice, ResendConfig, TagColorOptions, TagPalette, buildCollectionHref, buildPageSequence, composeEmailAddress, formatCollectionRangeLabel, formatDisplayDate, formatFilterValueListLabel, index_d_exports as forms, generateFormResultHtml, generateFormSectionHtml, getTagPalette, matchesCollectionFilters, normalizeFilterToken, paginateCollection, parseCollectionQuery, parseFilterValueList, renderEmailTemplate, resolveIslandSearchString, sendEmail };

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 import { a as generateFormResultHtml, c as renderEmailTemplate, i as composeEmailAddress, l as sendEmail, n as FormSection, o as generateFormSectionHtml, r as ResendConfig, s as index_d_exports, t as EmailPayload } from "./index-Bk-K9aDQ.js";
-import { CollectionQueryOptions, CollectionQueryState, DateFormatOptions, PaginationSlice, TagColorOptions, TagPalette, buildCollectionHref, buildPageSequence, formatDisplayDate, getTagPalette, matchesCollectionFilters, paginateCollection, parseCollectionQuery } from "./core.js";
-export { CollectionQueryOptions, CollectionQueryState, DateFormatOptions, EmailPayload, FormSection, PaginationSlice, ResendConfig, TagColorOptions, TagPalette, buildCollectionHref, buildPageSequence, composeEmailAddress, formatDisplayDate, index_d_exports as forms, generateFormResultHtml, generateFormSectionHtml, getTagPalette, matchesCollectionFilters, paginateCollection, parseCollectionQuery, renderEmailTemplate, sendEmail };
+import { CollectionQueryOptions, CollectionQueryState, DateFormatOptions, PaginationSlice, TagColorOptions, TagPalette, buildCollectionHref, buildPageSequence, formatCollectionRangeLabel, formatDisplayDate, formatFilterValueListLabel, getTagPalette, matchesCollectionFilters, normalizeFilterToken, paginateCollection, parseCollectionQuery, parseFilterValueList, resolveIslandSearchString } from "./core.js";
+export { CollectionQueryOptions, CollectionQueryState, DateFormatOptions, EmailPayload, FormSection, PaginationSlice, ResendConfig, TagColorOptions, TagPalette, buildCollectionHref, buildPageSequence, composeEmailAddress, formatCollectionRangeLabel, formatDisplayDate, formatFilterValueListLabel, index_d_exports as forms, generateFormResultHtml, generateFormSectionHtml, getTagPalette, matchesCollectionFilters, normalizeFilterToken, paginateCollection, parseCollectionQuery, parseFilterValueList, renderEmailTemplate, resolveIslandSearchString, sendEmail };

package/dist/index.js

@@ -1,3 +1,3 @@
 import { composeEmailAddress, generateFormResultHtml, generateFormSectionHtml, renderEmailTemplate, sendEmail, t as forms_exports } from "./forms/index.js";
-import { buildCollectionHref, buildPageSequence, formatDisplayDate, getTagPalette, matchesCollectionFilters, paginateCollection, parseCollectionQuery } from "./core.js";
-export { buildCollectionHref, buildPageSequence, composeEmailAddress, formatDisplayDate, forms_exports as forms, generateFormResultHtml, generateFormSectionHtml, getTagPalette, matchesCollectionFilters, paginateCollection, parseCollectionQuery, renderEmailTemplate, sendEmail };
+import { buildCollectionHref, buildPageSequence, formatCollectionRangeLabel, formatDisplayDate, formatFilterValueListLabel, getTagPalette, matchesCollectionFilters, normalizeFilterToken, paginateCollection, parseCollectionQuery, parseFilterValueList, resolveIslandSearchString } from "./core.js";
+export { buildCollectionHref, buildPageSequence, composeEmailAddress, formatCollectionRangeLabel, formatDisplayDate, formatFilterValueListLabel, forms_exports as forms, generateFormResultHtml, generateFormSectionHtml, getTagPalette, matchesCollectionFilters, normalizeFilterToken, paginateCollection, parseCollectionQuery, parseFilterValueList, renderEmailTemplate, resolveIslandSearchString, sendEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@at-flux/astroflare",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "type": "module",
   "description": "Reusable headless components, styles, and utilities for Astro + Tailwind v4 + Cloudflare projects",
   "author": "atflux <dev@atflux.uk>",

package/scripts/link-local.mjs

@@ -4,7 +4,8 @@
  * Does not change package.json or the lockfile — run `pnpm install` first so the
  * registry version is recorded, then this replaces only the on-disk resolution.
  */
-import { existsSync, mkdirSync, readFileSync, rmSync, symlinkSync, writeFileSync } from 'node:fs';
+import { existsSync, mkdirSync, readFileSync, readlinkSync, rmSync, symlinkSync, writeFileSync } from 'node:fs';
+import { lstatSync } from 'node:fs';
 import { dirname, isAbsolute, join, resolve } from 'node:path';
 import { spawnSync } from 'node:child_process';
 import { platform } from 'node:os';
@@ -126,7 +127,9 @@ function cmdStatus(projectRoot) {
     console.log(`  marker: ${marker}`);
     console.log(`  local:  ${data.localPath}`);
     if (existsSync(target)) {
-      console.log(`  node_modules: ${target}`);
+      const st = lstatSync(target);
+      const link = st.isSymbolicLink() ? ` → ${readlinkSync(target)}` : " (not a symlink — registry or copy)";
+      console.log(`  node_modules: ${target}${link}`);
     }
   } catch {
     console.log('astroflare-link-local: marker present but invalid');
@@ -154,6 +157,9 @@ if (argv[0] === 'help' || argv[0] === '-h' || argv[0] === '--help') {
   astroflare-link-local unlink --no-install
   astroflare-link-local status
 
+Shipped with @at-flux/astroflare: run from the app that depends on the package (not only from the monorepo
+that builds astroflare). Walks up directories until it finds a package.json that depends on @at-flux/astroflare.
+
 Symlinks node_modules/@at-flux/astroflare → local checkout. Does not edit package.json or lockfile.`);
   process.exit(0);
 }

package/src/collection-query.ts

@@ -19,6 +19,26 @@ export interface PaginationSlice<T> {
   end: number;
 }
 
+export const normalizeFilterToken = (value: string): string =>
+  value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "_")
+    .replace(/^_+|_+$/g, "")
+    .replace(/_+/g, "_");
+
+export const parseFilterValueList = (value: string | undefined): string[] =>
+  (value ?? "")
+    .split(",")
+    .map(normalizeFilterToken)
+    .filter(Boolean)
+    .filter((token, index, list) => list.indexOf(token) === index);
+
+export const formatFilterValueListLabel = (value: string | undefined): string =>
+  parseFilterValueList(value)
+    .map((token) => token.replace(/_/g, " ").toUpperCase())
+    .join(" + ");
+
 const toInt = (value: string | null, fallback: number): number => {
   const parsed = Number.parseInt(value ?? "", 10);
   return Number.isFinite(parsed) ? parsed : fallback;
@@ -30,13 +50,19 @@ export const parseCollectionQuery = (
 ): CollectionQueryState => {
   const { defaultPage = 1, defaultSize = 12, maxSize = 100 } = options;
 
-  const page = Math.max(1, toInt(searchParams.get("page"), defaultPage));
   const size = Math.min(
     maxSize,
     Math.max(1, toInt(searchParams.get("size"), defaultSize)),
   );
-  const fallbackOffset = (page - 1) * size;
-  const offset = Math.max(0, toInt(searchParams.get("offset"), fallbackOffset));
+  const pageParam = Math.max(1, toInt(searchParams.get("page"), defaultPage));
+  const hasOffset = searchParams.has("offset");
+  const rawOffset = hasOffset
+    ? Math.max(0, toInt(searchParams.get("offset"), 0))
+    : (pageParam - 1) * size;
+  // Offset (which window of the list) is authoritative. Fixes ?page=2&size=2&offset=0
+  // where 0 is valid but is not a multiple of size for page 2, and 0 is not "missing".
+  const page = Math.max(1, Math.floor(rawOffset / size) + 1);
+  const offset = (page - 1) * size;
   const rawFilters = searchParams.get("filters");
   let filters: Record<string, string> = {};
   if (rawFilters) {
@@ -45,7 +71,7 @@ export const parseCollectionQuery = (
       filters = Object.fromEntries(
         Object.entries(parsed)
           .filter(([, value]) => typeof value === "string")
-          .map(([key, value]) => [key, String(value)]),
+          .map(([key, value]) => [key, parseFilterValueList(String(value)).join(",")]),
       );
     } catch {
       filters = {};
@@ -86,14 +112,21 @@ export const buildCollectionHref = (
     ...query,
     ...overrides,
   };
-  const normalizedOffset = (next.page - 1) * next.size;
+  const offsetFromPage = (next.page - 1) * next.size;
   const params = new URLSearchParams({
     page: String(next.page),
     size: String(next.size),
-    offset: String(next.offset ?? normalizedOffset),
+    /* Always follow page+size. Stale offset:0 is valid but must not break page 2+ links (0 is not nullish for ??) */
+    offset: String(offsetFromPage),
   });
   if (Object.keys(next.filters ?? {}).length > 0) {
-    params.set("filters", JSON.stringify(next.filters));
+    const normalizedFilters = Object.fromEntries(
+      Object.entries(next.filters).map(([key, value]) => [
+        key,
+        parseFilterValueList(value).join(","),
+      ]),
+    );
+    params.set("filters", JSON.stringify(normalizedFilters));
   }
   return `${pathname}?${params.toString()}`;
 };
@@ -103,8 +136,9 @@ export const matchesCollectionFilters = (
   filters: Record<string, string>,
 ): boolean =>
   Object.entries(filters).every(([key, value]) => {
-    const candidates = values[key] ?? [];
-    return candidates.includes(value);
+    const expected = parseFilterValueList(value);
+    const candidates = (values[key] ?? []).map(normalizeFilterToken);
+    return expected.every((token) => candidates.includes(token));
   });
 
 export const buildPageSequence = (
@@ -128,3 +162,39 @@ export const buildPageSequence = (
   sequence.push(totalPages);
   return sequence;
 };
+
+/**
+ * For Astro server islands: the serialized `search` prop is usually set from the
+ * page request, but the island subrequest may omit it. When empty, use the
+ * `Referer` request header so `parseCollectionQuery` still matches the main document URL.
+ */
+/** "Showing …" for collection footers: avoids "3—3" when one item; uses en dash for ranges. */
+export const formatCollectionRangeLabel = (slice: Pick<PaginationSlice<unknown>, "start" | "end" | "totalItems">): string => {
+  if (slice.totalItems === 0) {
+    return "Showing 0 of 0";
+  }
+  const a = slice.start + 1;
+  const b = slice.end;
+  if (a === b) {
+    return `Showing result ${a} of ${slice.totalItems}`;
+  }
+  return `Showing results ${a}–${b} of ${slice.totalItems}`;
+};
+
+export const resolveIslandSearchString = (
+  searchFromProps: string | undefined,
+  request: Request,
+): string => {
+  if (searchFromProps) {
+    return searchFromProps;
+  }
+  const referer = request.headers.get("referer") ?? "";
+  if (!referer) {
+    return "";
+  }
+  try {
+    return new URL(referer).search;
+  } catch {
+    return "";
+  }
+};

package/src/components/CollectionFooterControls.astro

@@ -0,0 +1,84 @@
+---
+/**
+ * Server-rendered row: result summary, link-driven Pager, and page-size form.
+ * Pairs with CollectionQuery filter pills when filters use URL query state.
+ */
+import Pager from "./Pager.astro";
+import { buildCollectionHref, buildPageSequence, type CollectionQueryState } from "../collection-query";
+
+interface Props {
+  pathname: string;
+  query: CollectionQueryState;
+  totalPages: number;
+  currentPage: number;
+  sizeOptions?: number[];
+  maxPageButtons?: number;
+  class?: string;
+}
+
+const {
+  pathname,
+  query,
+  totalPages,
+  currentPage,
+  sizeOptions = [4, 2, 8, 12, 16],
+  maxPageButtons = 7,
+  class: className = "",
+} = Astro.props;
+
+const activeFilters = query.filters ?? {};
+const pagerItems = buildPageSequence(totalPages, currentPage, maxPageButtons).map((item) =>
+  item === "…"
+    ? { ellipsis: true as const }
+    : {
+        page: item,
+        href: buildCollectionHref(pathname, query, { page: item, offset: (item - 1) * query.size }),
+        active: item === currentPage,
+        disabled: totalPages <= 1 || item === currentPage,
+      },
+);
+const sanitizedSizeOptions = Array.from(
+  new Set([query.size, ...sizeOptions].filter((value) => Number.isFinite(value) && value > 0)),
+).sort((a, b) => a - b);
+---
+
+<div class:list={["af-collection-footer grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-center", className]}>
+  <div class="af-collection-summary text-sm text-light-text-subtle dark:text-dark-text-subtle">
+    <slot name="summary" />
+  </div>
+  <Pager items={pagerItems} class="md:col-start-2 md:justify-center" />
+  <form method="get" action={pathname} data-astro-reload class="md:col-start-3 md:justify-self-end">
+    <input type="hidden" name="page" value="1" />
+    <input type="hidden" name="offset" value="0" />
+    {Object.keys(activeFilters).length > 0 && (
+      <input type="hidden" name="filters" value={JSON.stringify(activeFilters)} />
+    )}
+    <label class="af-page-size-label inline-flex items-center gap-2 text-xs uppercase tracking-[0.08em] text-light-text-subtle dark:text-dark-text-subtle">
+      <span>Page size</span>
+      <select
+        name="size"
+        class="select-none rounded-full border border-light-border bg-light-surface px-3 py-1.5 text-xs text-light-text-body dark:border-dark-border dark:bg-dark-surface dark:text-dark-text-body"
+        onchange="this.form?.submit()"
+      >
+        {sanitizedSizeOptions.map((size) => (
+          <option value={String(size)} selected={size === query.size}>
+            {size}
+          </option>
+        ))}
+      </select>
+    </label>
+  </form>
+</div>
+
+<style is:global>
+  .af-collection-summary,
+  .af-page-size-label {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  .af-page-size-label select,
+  .af-page-size-label option {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+</style>

package/src/components/CollectionQuery.astro

@@ -1,7 +1,12 @@
 ---
 import FilterPills from "./FilterPills.astro";
 import Pager from "./Pager.astro";
-import { buildCollectionHref, buildPageSequence } from "../collection-query";
+import {
+  buildCollectionHref,
+  buildPageSequence,
+  normalizeFilterToken,
+  parseFilterValueList,
+} from "../collection-query";
 import type { CollectionQueryProps, CollectionQueryServerProps } from "./collection-query-props";
 type Props = CollectionQueryProps;
 
@@ -27,14 +32,43 @@ const totalPages = serverProps?.totalPages ?? 1;
 const currentPage = serverProps?.currentPage ?? 1;
 
 const activeFilters = query.filters ?? {};
+const normalize = (value: string): string => value.trim().toLowerCase();
+const maxTagFilters = 5;
+const activeTagTokens = parseFilterValueList(activeFilters.tag);
 const allHref = buildCollectionHref(pathname, query, { filters: {}, page: 1, offset: 0 });
 const serverFilterItems = filters.map((option) => {
-  const nextFilters = { ...activeFilters, [option.key]: option.value };
+  const isTagFilter = option.key === "tag";
+  const normalizedOptionValue = normalizeFilterToken(option.value);
+  const selectedTagTokens = activeTagTokens;
+  const isSelectedTag = isTagFilter && selectedTagTokens.includes(normalizedOptionValue);
+  const canAddTag = isTagFilter ? selectedTagTokens.length < maxTagFilters : true;
+  const nextTagTokens = isTagFilter
+    ? (isSelectedTag
+        ? selectedTagTokens.filter((token) => token !== normalizedOptionValue)
+        : [...selectedTagTokens, normalizedOptionValue]
+      )
+    : [];
+  const nextFilters = { ...activeFilters };
+  if (isTagFilter) {
+    if (nextTagTokens.length === 0) {
+      delete nextFilters.tag;
+    } else {
+      nextFilters.tag = nextTagTokens.join(",");
+    }
+  } else {
+    nextFilters[option.key] = normalizeFilterToken(option.value);
+  }
+  const isDisabledTag = isTagFilter && !isSelectedTag && !canAddTag;
   return {
     value: `${option.key}:${option.value}`,
     label: option.label ?? option.value,
-    href: buildCollectionHref(pathname, query, { filters: nextFilters, page: 1, offset: 0 }),
-    active: activeFilters[option.key] === option.value,
+    href: isDisabledTag
+      ? undefined
+      : buildCollectionHref(pathname, query, { filters: nextFilters, page: 1, offset: 0 }),
+    active: isTagFilter
+      ? isSelectedTag
+      : normalize(activeFilters[option.key] ?? "") === normalize(option.value),
+    disabled: isDisabledTag,
     colorKey: option.value,
   };
 });
@@ -74,20 +108,20 @@ const sanitizedSizeOptions = Array.from(
     </slot>
     <slot />
     <slot name="pager">
-      <div class:list={["af-query-pager-row flex flex-col gap-3 md:flex-row md:items-center md:justify-between", pagerClass]}>
-        <Pager items={pagerItems} class="md:order-1 md:flex-1 md:justify-center" />
+      <div class:list={["af-query-pager-row grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-center", pagerClass]}>
+        <Pager items={pagerItems} class="md:col-start-2 md:justify-center" />
         {showPageSize && (
-          <form method="get" action={pathname} class:list={["af-query-size-form md:order-2 md:ml-auto", pageSizeClass]}>
+          <form method="get" action={pathname} data-astro-reload class:list={["af-query-size-form md:col-start-3 md:justify-self-end", pageSizeClass]}>
             <input type="hidden" name="page" value="1" />
             <input type="hidden" name="offset" value="0" />
             {Object.keys(activeFilters).length > 0 && (
               <input type="hidden" name="filters" value={JSON.stringify(activeFilters)} />
             )}
-            <label class="inline-flex items-center gap-2 text-xs uppercase tracking-[0.08em] text-light-text-subtle dark:text-dark-text-subtle">
+            <label class="af-page-size-label inline-flex items-center gap-2 text-xs uppercase tracking-[0.08em] text-light-text-subtle dark:text-dark-text-subtle">
               <span>Page size</span>
               <select
                 name="size"
-                class="rounded-full border border-light-border bg-light-surface px-3 py-1.5 text-xs text-light-text-body dark:border-dark-border dark:bg-dark-surface dark:text-dark-text-body"
+                class="select-none rounded-full border border-light-border bg-light-surface px-3 py-1.5 text-xs text-light-text-body dark:border-dark-border dark:bg-dark-surface dark:text-dark-text-body"
                 onchange="this.form?.submit()"
               >
                 {sanitizedSizeOptions.map((size) => (
@@ -137,3 +171,15 @@ const sanitizedSizeOptions = Array.from(
     </script>
   )
 }
+
+<style is:global>
+  .af-page-size-label {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  .af-page-size-label select,
+  .af-page-size-label option {
+    user-select: none;
+    -webkit-user-select: none;
+  }
+</style>

package/src/components/FilterPills.astro

@@ -10,6 +10,7 @@ interface Props {
         label?: string;
         href?: string;
         active?: boolean;
+        disabled?: boolean;
         colorKey?: string;
       }
   >;
@@ -42,6 +43,14 @@ const {
 
 const formatLabel = (value: string): string =>
   itemCase === "upper" ? value.toUpperCase() : value;
+const normalize = (value: string): string => value.trim().toLowerCase();
+const formPartsFromHref = (href: string): { action: string; fields: Array<{ name: string; value: string }> } => {
+  const url = new URL(href, "https://astroflare.local");
+  return {
+    action: url.pathname,
+    fields: Array.from(url.searchParams.entries()).map(([name, value]) => ({ name, value })),
+  };
+};
 
 const normalizedItems = items.map((item) =>
   typeof item === "string"
@@ -51,6 +60,7 @@ const normalizedItems = items.map((item) =>
         label: item.label ?? item.value,
         href: item.href,
         active: item.active,
+        disabled: item.disabled,
         colorKey: item.colorKey,
       },
 );
@@ -59,12 +69,22 @@ const normalizedItems = items.map((item) =>
 <div class:list={["af-filter-pills flex flex-wrap items-center gap-2", className]}>
   {includeAll && (
     allHref ? (
-      <a
-        href={allHref}
-        class:list={["af-filter-pill", "af-filter-pill-all", active === "all" && "is-active"]}
-      >
-        {formatLabel(allLabel)}
-      </a>
+      (() => {
+        const form = formPartsFromHref(allHref);
+        return (
+          <form method="get" action={form.action} data-astro-reload class="af-filter-pill-form">
+            {form.fields.map((field) => (
+              <input type="hidden" name={field.name} value={field.value} />
+            ))}
+            <button
+              type="submit"
+              class:list={["af-filter-pill", "af-filter-pill-all", active === "all" && "is-active"]}
+            >
+              {formatLabel(allLabel)}
+            </button>
+          </form>
+        );
+      })()
     ) : (
       <button
         type="button"
@@ -77,12 +97,36 @@ const normalizedItems = items.map((item) =>
   )}
   {normalizedItems.map((item) => {
     const palette = getTagPalette(item.colorKey ?? item.value, { overrides: colorOverrides });
-    const isActive = item.active ?? active === item.value;
+    const isActive = item.active ?? normalize(active) === normalize(item.value);
     const label = formatLabel(item.label);
     return (
-      item.href ? (
-        <a
-          href={item.href}
+      item.href && !item.disabled ? (
+        (() => {
+          const form = formPartsFromHref(item.href);
+          return (
+            <form method="get" action={form.action} data-astro-reload class="af-filter-pill-form">
+              {form.fields.map((field) => (
+                <input type="hidden" name={field.name} value={field.value} />
+              ))}
+              <button
+                type="submit"
+                class:list={["af-filter-pill", isActive && "is-active"]}
+                style={{
+                  "--af-pill-bg": palette.bg,
+                  "--af-pill-border": palette.border,
+                  "--af-pill-text": palette.text,
+                }}
+              >
+                {label}
+              </button>
+            </form>
+          );
+        })()
+      ) : item.disabled ? (
+        <button
+          type="button"
+          disabled
+          aria-disabled="true"
           class:list={["af-filter-pill", isActive && "is-active"]}
           style={{
             "--af-pill-bg": palette.bg,
@@ -91,7 +135,7 @@ const normalizedItems = items.map((item) =>
           }}
         >
           {label}
-        </a>
+        </button>
       ) : (
         <button
           type="button"
@@ -126,15 +170,34 @@ const normalizedItems = items.map((item) =>
     text-decoration: none;
     display: inline-flex;
     align-items: center;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  .af-filter-pill-form {
+    display: inline-flex;
+    margin: 0;
   }
 
   .af-filter-pill:hover {
     filter: brightness(1.04);
   }
+  .af-filter-pill:disabled,
+  .af-filter-pill[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.48;
+    filter: grayscale(0.3);
+  }
 
   .af-filter-pill.is-active {
     border-color: color-mix(in oklab, var(--af-pill-text, var(--color-secondary)) 80%, transparent);
     box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--af-pill-text, var(--color-secondary)) 36%, transparent);
+    outline: 2px solid color-mix(in oklab, var(--af-pill-text, var(--color-secondary)) 48%, transparent);
+    outline-offset: 1px;
+    font-weight: 600;
+    filter: saturate(1.14) brightness(1.06);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 0.15em;
   }
   .af-filter-pill.af-filter-pill-all {
     --af-pill-bg: transparent;

package/src/components/Pager.astro

@@ -15,6 +15,13 @@ interface Props {
 
 const { pageCount = 0, activePage = 1, class: className = "", items = [] } = Astro.props;
 const fallbackPages = Array.from({ length: Math.max(0, pageCount) }, (_, index) => index + 1);
+const formPartsFromHref = (href: string): { action: string; fields: Array<{ name: string; value: string }> } => {
+  const url = new URL(href, "https://astroflare.local");
+  return {
+    action: url.pathname,
+    fields: Array.from(url.searchParams.entries()).map(([name, value]) => ({ name, value })),
+  };
+};
 ---
 
 <div class:list={["af-pager flex items-center justify-center gap-2", className]} data-pagination>
@@ -23,13 +30,23 @@ const fallbackPages = Array.from({ length: Math.max(0, pageCount) }, (_, index)
         "ellipsis" in item ? (
           <span class="af-pager-ellipsis" aria-hidden="true">{item.label ?? "…"}</span>
         ) : item.href && !item.active && !item.disabled ? (
-          <a
-            href={item.href}
-            data-page={String(item.page)}
-            class:list={["af-pager-pill", item.active && "is-active"]}
-          >
-            {item.label ?? item.page}
-          </a>
+          (() => {
+            const form = formPartsFromHref(item.href);
+            return (
+              <form method="get" action={form.action} data-astro-reload class="af-pager-form">
+                {form.fields.map((field) => (
+                  <input type="hidden" name={field.name} value={field.value} />
+                ))}
+                <button
+                  type="submit"
+                  data-page={String(item.page)}
+                  class:list={["af-pager-pill", item.active && "is-active"]}
+                >
+                  {item.label ?? item.page}
+                </button>
+              </form>
+            );
+          })()
         ) : (
           <button
             type="button"
@@ -69,18 +86,33 @@ const fallbackPages = Array.from({ length: Math.max(0, pageCount) }, (_, index)
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+  .af-pager .af-pager-form {
+    display: inline-flex;
+    margin: 0;
   }
   .af-pager .af-pager-pill:disabled,
   .af-pager .af-pager-pill[aria-disabled="true"] {
     cursor: not-allowed;
-    opacity: 0.72;
+    opacity: 0.5;
     pointer-events: none;
+    border-color: color-mix(in oklab, var(--color-light-border) 65%, transparent);
+    color: color-mix(in oklab, var(--color-light-text-subtle) 50%, transparent);
+    background: color-mix(in oklab, var(--color-light-surface) 35%, transparent);
   }
   [data-theme="dark"] .af-pager .af-pager-pill {
     border-color: var(--color-dark-border);
     color: color-mix(in oklab, var(--color-dark-text-subtle) 78%, transparent);
     background: color-mix(in oklab, var(--color-dark-surface) 70%, transparent);
   }
+  [data-theme="dark"] .af-pager .af-pager-pill:disabled,
+  [data-theme="dark"] .af-pager .af-pager-pill[aria-disabled="true"] {
+    border-color: color-mix(in oklab, var(--color-dark-border) 65%, transparent);
+    color: color-mix(in oklab, var(--color-dark-text-subtle) 48%, transparent);
+    background: color-mix(in oklab, var(--color-dark-surface) 35%, transparent);
+  }
   .af-pager .af-pager-pill.is-active {
     border-color: var(--color-secondary);
     color: var(--color-secondary);