@yuneta/gobj-ui 7.23.49 → 7.23.51

package/README.md

@@ -1780,6 +1780,51 @@ this facility: it is `formatter: "rowSelection"` with no `titleFormatter` and
 `selectableRows: 1`, and the header checkbox, the count and the bar all mean
 nothing there.
 
+### Clearing a header filter — `yui_table_filter_clear.js`
+
+A column filter is set by typing and undone by deleting what you typed, letter
+by letter, and nothing in the header says it can be dropped at all. With
+several columns filtered, getting back to the whole table is an exercise in
+remembering which ones you touched. One call, on a table that is already built:
+
+```js
+import {yui_table_filter_clear} from "@yuneta/gobj-ui/src/yui_table_filter_clear.js";
+
+table.on("tableBuilt", () => {
+    yui_table_filter_clear(table);
+});
+```
+
+The app must define the i18n key **`"clear"`**. Three decisions are baked in:
+
+- **The ✕ is visible whenever the filter has content, focus or not** — the
+  opposite of the ✕ in a form (`yui_inputs.js`), which shows only on the field
+  being edited so a form full of filled fields does not light up an ✕ on every
+  one. Here the filter is already set, the focus is elsewhere, and the whole
+  point is to see it and drop it; hidden behind focus it would take two clicks.
+- **It clears through `setHeaderFilterValue()`**, not by synthesising a
+  keystroke on the input — what a header filter listens to depends on that
+  column's filter editor.
+- **It decorates the header by walking it**, because a table's columns are
+  often built from data (a treedb schema) and the header rebuilds itself when
+  they change. The walk is idempotent and gated by a single `querySelector`, so
+  repeating it on every render costs nothing.
+
+### Searching a row that is not flat — `yui_row_search.js`
+
+`row_matches(row, term)` is what the treedb topic table's search box uses, and
+it exists because **a treedb row is not flat**: with `list_dict` an fkey
+arrives as a list of objects — `[{id, topic_name, hook_name}]` — and
+`String(val)` of that is `"[object Object]"`. A search written the obvious way
+therefore never finds the place a node is linked to, while the cell plainly
+renders that id: what you see and what is searched are not the same thing.
+
+It walks into lists and objects, and reads only the **`id`** of an fkey:
+`topic_name` and `hook_name` are the same two words on every row, so matching
+them turns any such term into a wildcard over the whole topic. Keys starting
+with `_` are never searched, at any level — scaffolding (`_operation`) and
+metadata (`__md_treedb__`).
+
 ## Conventions
 
 ### i18n: a string must be able to CHANGE language, not just be translated once

package/dist/gobj-ui.cjs.js

@@ -22864,6 +22864,33 @@ function delete_impact(desc, records) {
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$5 = "C_YUI_TREEDB_TOPIC_WITH_FORM";
+var PAGE_SIZE_STORE_PREFIX = "yui_treedb_page_size:";
+/************************************************************
+*  The size the reader left, or null when there is none.
+*  `true` is Tabulator's "All" and it round-trips as the boolean:
+*  JSON.parse gives it back as one, and a string "true" would be
+*  read by Tabulator as a size of NaN.
+************************************************************/
+function load_page_size(gobj) {
+	try {
+		let raw = window.localStorage.getItem(PAGE_SIZE_STORE_PREFIX + (0, _yuneta_gobj_js.gobj_name)(gobj));
+		if (raw === null) return null;
+		let size = JSON.parse(raw);
+		if (size === true) return true;
+		if (typeof size === "number" && size > 0) return size;
+		return null;
+	} catch (e) {
+		return null;
+	}
+}
+/************************************************************
+*
+************************************************************/
+function save_page_size(gobj, size) {
+	try {
+		window.localStorage.setItem(PAGE_SIZE_STORE_PREFIX + (0, _yuneta_gobj_js.gobj_name)(gobj), JSON.stringify(size));
+	} catch (e) {}
+}
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -22920,6 +22947,7 @@ var PRIVATE_DATA$5 = {
 	_pending_pages: null,
 	_page_seq: 0,
 	_page_total: null,
+	_page_size: null,
 	$container: null,
 	treedb_name: "",
 	topic_name: "",
@@ -23806,6 +23834,9 @@ function create_tabulator(gobj) {
 			}
 		});
 	}
+	let remembered_size = load_page_size(gobj);
+	if (remembered_size !== null && tabulator_settings.pagination) tabulator_settings.paginationSize = remembered_size;
+	gobj.priv._page_size = tabulator_settings.paginationSize;
 	Object.assign(tabulator_settings, {
 		index: pkey,
 		columns,
@@ -23841,12 +23872,26 @@ function create_tabulator(gobj) {
 				single_page = max === false || max <= 1;
 			} else {
 				let size = tabulator.getPageSize();
-				single_page = !size || n <= size;
+				single_page = size === true || !size || n <= size;
 			}
 		} catch (e) {
 			single_page = true;
 		}
+		let total_rows;
+		if (paged) total_rows = total;
+		else try {
+			total_rows = tabulator.getDataCount();
+		} catch (e) {
+			total_rows = n;
+		}
+		let min_size = 0;
+		let sizes = tabulator.options ? tabulator.options.paginationSizeSelector : null;
+		if (Array.isArray(sizes)) sizes.forEach(function(size) {
+			if (typeof size === "number" && (!min_size || size < min_size)) min_size = size;
+		});
+		let no_paginator = single_page && (!min_size || typeof total_rows !== "number" || total_rows <= min_size);
 		tabulator.element.classList.toggle("yui-single-page", single_page);
+		tabulator.element.classList.toggle("yui-no-paginator", no_paginator);
 	}
 	tabulator._ready = false;
 	tabulator.on("tableBuilt", function() {
@@ -23860,6 +23905,9 @@ function create_tabulator(gobj) {
 	});
 	tabulator.on("dataProcessed", update_rowcount);
 	tabulator.on("dataChanged", update_rowcount);
+	tabulator.on("pageSizeChanged", function(size) {
+		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_PAGE_SIZE_CHANGED", { size }, gobj);
+	});
 	tabulator.on("cellEdited", function(cell) {
 		let pkey = ((0, _yuneta_gobj_js.gobj_read_attr)(gobj, "desc") || {}).pkey || "id";
 		let data = cell.getRow().getData();
@@ -25311,6 +25359,21 @@ function ac_open_columns(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The reader picked another page size: remember it, so coming back to
+*  this topic opens where they left it instead of at 200.
+************************************************************/
+function ac_page_size_changed(gobj, event, kw, src) {
+	let size = kw ? kw.size : void 0;
+	if (size !== true && !(typeof size === "number" && size > 0)) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: bad page size: ${size}`);
+		return -1;
+	}
+	if (size === gobj.priv._page_size) return 0;
+	gobj.priv._page_size = size;
+	save_page_size(gobj, size);
+	return 0;
+}
+/************************************************************
 *  Show / hide one column.
 ************************************************************/
 function ac_toggle_column(gobj, event, kw, src) {
@@ -25515,6 +25578,11 @@ function create_gclass$5(gclass_name) {
 			ac_open_columns,
 			null
 		],
+		[
+			"EV_PAGE_SIZE_CHANGED",
+			ac_page_size_changed,
+			null
+		],
 		[
 			"EV_TOGGLE_COLUMN",
 			ac_toggle_column,
@@ -25565,6 +25633,7 @@ function create_gclass$5(gclass_name) {
 		["EV_REQUEST_PAGE", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_SEARCH", 0],
 		["EV_OPEN_COLUMNS", 0],
+		["EV_PAGE_SIZE_CHANGED", 0],
 		["EV_TOGGLE_COLUMN", 0],
 		["EV_EXPORT_TABLE", 0],
 		["EV_CREATE_RECORD", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT],

package/dist/gobj-ui.es.js

@@ -22859,6 +22859,33 @@ function delete_impact(desc, records) {
 *              Constants
 ***************************************************************/
 var GCLASS_NAME$5 = "C_YUI_TREEDB_TOPIC_WITH_FORM";
+var PAGE_SIZE_STORE_PREFIX = "yui_treedb_page_size:";
+/************************************************************
+*  The size the reader left, or null when there is none.
+*  `true` is Tabulator's "All" and it round-trips as the boolean:
+*  JSON.parse gives it back as one, and a string "true" would be
+*  read by Tabulator as a size of NaN.
+************************************************************/
+function load_page_size(gobj) {
+	try {
+		let raw = window.localStorage.getItem(PAGE_SIZE_STORE_PREFIX + gobj_name(gobj));
+		if (raw === null) return null;
+		let size = JSON.parse(raw);
+		if (size === true) return true;
+		if (typeof size === "number" && size > 0) return size;
+		return null;
+	} catch (e) {
+		return null;
+	}
+}
+/************************************************************
+*
+************************************************************/
+function save_page_size(gobj, size) {
+	try {
+		window.localStorage.setItem(PAGE_SIZE_STORE_PREFIX + gobj_name(gobj), JSON.stringify(size));
+	} catch (e) {}
+}
 /***************************************************************
 *              Data
 ***************************************************************/
@@ -22915,6 +22942,7 @@ var PRIVATE_DATA$5 = {
 	_pending_pages: null,
 	_page_seq: 0,
 	_page_total: null,
+	_page_size: null,
 	$container: null,
 	treedb_name: "",
 	topic_name: "",
@@ -23801,6 +23829,9 @@ function create_tabulator(gobj) {
 			}
 		});
 	}
+	let remembered_size = load_page_size(gobj);
+	if (remembered_size !== null && tabulator_settings.pagination) tabulator_settings.paginationSize = remembered_size;
+	gobj.priv._page_size = tabulator_settings.paginationSize;
 	Object.assign(tabulator_settings, {
 		index: pkey,
 		columns,
@@ -23836,12 +23867,26 @@ function create_tabulator(gobj) {
 				single_page = max === false || max <= 1;
 			} else {
 				let size = tabulator.getPageSize();
-				single_page = !size || n <= size;
+				single_page = size === true || !size || n <= size;
 			}
 		} catch (e) {
 			single_page = true;
 		}
+		let total_rows;
+		if (paged) total_rows = total;
+		else try {
+			total_rows = tabulator.getDataCount();
+		} catch (e) {
+			total_rows = n;
+		}
+		let min_size = 0;
+		let sizes = tabulator.options ? tabulator.options.paginationSizeSelector : null;
+		if (Array.isArray(sizes)) sizes.forEach(function(size) {
+			if (typeof size === "number" && (!min_size || size < min_size)) min_size = size;
+		});
+		let no_paginator = single_page && (!min_size || typeof total_rows !== "number" || total_rows <= min_size);
 		tabulator.element.classList.toggle("yui-single-page", single_page);
+		tabulator.element.classList.toggle("yui-no-paginator", no_paginator);
 	}
 	tabulator._ready = false;
 	tabulator.on("tableBuilt", function() {
@@ -23855,6 +23900,9 @@ function create_tabulator(gobj) {
 	});
 	tabulator.on("dataProcessed", update_rowcount);
 	tabulator.on("dataChanged", update_rowcount);
+	tabulator.on("pageSizeChanged", function(size) {
+		gobj_send_event(gobj, "EV_PAGE_SIZE_CHANGED", { size }, gobj);
+	});
 	tabulator.on("cellEdited", function(cell) {
 		let pkey = (gobj_read_attr(gobj, "desc") || {}).pkey || "id";
 		let data = cell.getRow().getData();
@@ -25306,6 +25354,21 @@ function ac_open_columns(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  The reader picked another page size: remember it, so coming back to
+*  this topic opens where they left it instead of at 200.
+************************************************************/
+function ac_page_size_changed(gobj, event, kw, src) {
+	let size = kw ? kw.size : void 0;
+	if (size !== true && !(typeof size === "number" && size > 0)) {
+		log_error(`${gobj_short_name(gobj)}: bad page size: ${size}`);
+		return -1;
+	}
+	if (size === gobj.priv._page_size) return 0;
+	gobj.priv._page_size = size;
+	save_page_size(gobj, size);
+	return 0;
+}
+/************************************************************
 *  Show / hide one column.
 ************************************************************/
 function ac_toggle_column(gobj, event, kw, src) {
@@ -25510,6 +25573,11 @@ function create_gclass$5(gclass_name) {
 			ac_open_columns,
 			null
 		],
+		[
+			"EV_PAGE_SIZE_CHANGED",
+			ac_page_size_changed,
+			null
+		],
 		[
 			"EV_TOGGLE_COLUMN",
 			ac_toggle_column,
@@ -25560,6 +25628,7 @@ function create_gclass$5(gclass_name) {
 		["EV_REQUEST_PAGE", event_flag_t.EVF_OUTPUT_EVENT],
 		["EV_SEARCH", 0],
 		["EV_OPEN_COLUMNS", 0],
+		["EV_PAGE_SIZE_CHANGED", 0],
 		["EV_TOGGLE_COLUMN", 0],
 		["EV_EXPORT_TABLE", 0],
 		["EV_CREATE_RECORD", event_flag_t.EVF_OUTPUT_EVENT],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.49",
+  "version": "7.23.51",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_treedb_topic_with_form.css

@@ -23,10 +23,20 @@
     line-height: 1.5;
 }
 
-/*  All rows fit in one page: the page-size selector and the
- *  First/Prev/1/Next/Last strip are pure noise (worst on mobile) —
- *  update_rowcount() toggles the class on every data change.  */
-.tabulator.yui-single-page .tabulator-footer .tabulator-paginator {
+/*  All rows fit in one page: the First/Prev/1/Next/Last strip is pure
+ *  noise (worst on mobile) — update_rowcount() toggles the class on every
+ *  data change. The page-size SELECTOR stays: it is what made the table
+ *  one page in the first place ("All" on a topic of 300 rows), so hiding
+ *  it together with the buttons left the reader no way back to 50.  */
+.tabulator.yui-single-page .tabulator-footer .tabulator-paginator .tabulator-page,
+.tabulator.yui-single-page .tabulator-footer .tabulator-paginator .tabulator-pages {
+    display: none;
+}
+
+/*  No choice in the selector would change anything either — the topic is
+ *  smaller than the smallest page size it offers — so the whole strip,
+ *  label and select included, is noise.  */
+.tabulator.yui-no-paginator .tabulator-footer .tabulator-paginator {
     display: none;
 }
 

package/src/c_yui_treedb_topic_with_form.js

@@ -103,6 +103,67 @@ import { TabulatorFull as Tabulator } from "tabulator-tables";
  ***************************************************************/
 const GCLASS_NAME = "C_YUI_TREEDB_TOPIC_WITH_FORM";
 
+/*
+ *  Where the reader's page size is remembered.
+ *
+ *  In localStorage and not in a persistent attr: how many rows somebody
+ *  wants in front of them is a fact about THAT browser, not about the
+ *  yuno, and a library gclass cannot assume the host app wired the
+ *  persistence functions. Same reasoning as `C_YUI_GOBJ_TREE_JS` and
+ *  `C_YUI_JSON`.
+ *
+ *  Keyed by the gobj name, which the host builds as `<view>?<topic>`, so
+ *  the size is remembered PER TOPIC. That is the useful grain: a topic of
+ *  5891 devices and one of 22 do not want the same page.
+ */
+const PAGE_SIZE_STORE_PREFIX = "yui_treedb_page_size:";
+
+/************************************************************
+ *  The size the reader left, or null when there is none.
+ *  `true` is Tabulator's "All" and it round-trips as the boolean:
+ *  JSON.parse gives it back as one, and a string "true" would be
+ *  read by Tabulator as a size of NaN.
+ ************************************************************/
+function load_page_size(gobj)
+{
+    try {
+        let raw = window.localStorage.getItem(
+            PAGE_SIZE_STORE_PREFIX + gobj_name(gobj)
+        );
+        if(raw === null) {
+            return null;
+        }
+        let size = JSON.parse(raw);
+        if(size === true) {
+            return true;
+        }
+        if(typeof size === "number" && size > 0) {
+            return size;
+        }
+        return null;
+    } catch(e) {
+        /*  localStorage unavailable (private mode) or a value somebody
+         *  else wrote: the table opens at its default size, which is
+         *  the same thing that happened before it was remembered.  */
+        return null;
+    }
+}
+
+/************************************************************
+ *
+ ************************************************************/
+function save_page_size(gobj, size)
+{
+    try {
+        window.localStorage.setItem(
+            PAGE_SIZE_STORE_PREFIX + gobj_name(gobj),
+            JSON.stringify(size)
+        );
+    } catch(e) {
+        // localStorage unavailable (private mode) — non-fatal
+    }
+}
+
 /***************************************************************
  *              Data
  ***************************************************************/
@@ -168,6 +229,7 @@ let PRIVATE_DATA = {
     _pending_pages:     null,       // req_id -> {resolve, reject, timer}
     _page_seq:          0,          // correlation id of a page request
     _page_total:        null,       // rows the topic HAS, from the last page answer
+    _page_size:         null,       // rows per page in effect (remembered across visits)
     $container:         null,
     treedb_name:        "",
     topic_name:         "",
@@ -1366,6 +1428,22 @@ function create_tabulator(gobj)
         });
     }
 
+    /*  The size the reader picked last time, which outranks both defaults
+     *  above. Applied here, once the two paths have set theirs, so it is
+     *  written in ONE place -- and applied to `paginationSize` only: the
+     *  SELECTOR keeps offering the same sizes, and a remembered value that
+     *  is not one of them Tabulator adds to the list itself.  */
+    let remembered_size = load_page_size(gobj);
+    if(remembered_size !== null && tabulator_settings.pagination) {
+        tabulator_settings.paginationSize = remembered_size;
+    }
+    /*  What the table OPENS at, remembered or default. Tabulator announces
+     *  `pageSizeChanged` at build time too, with the size it starts at, and
+     *  saving that one would freeze today's default in the reader's browser
+     *  for ever: a later change of the default would never reach anybody who
+     *  had once opened the table. Only a real change is written.  */
+    gobj.priv._page_size = tabulator_settings.paginationSize;
+
     Object.assign(tabulator_settings, {
         index: pkey,
         columns: columns,
@@ -1462,14 +1540,50 @@ function create_tabulator(gobj)
                 single_page = (max === false) || max <= 1;
             } else {
                 /*  Derived from the count and the page size rather than read
-                 *  from getPageMax(), which is stale in the filter path. */
+                 *  from getPageMax(), which is stale in the filter path.
+                 *  `true` is Tabulator's "All" and it is the SIZE itself, so
+                 *  it has to be read as a word: compared as a number it is 1,
+                 *  and a table showing every one of its 300 rows in a single
+                 *  page answered that it needed 300 pages.  */
                 let size = tabulator.getPageSize();
-                single_page = !size || n <= size;
+                single_page = (size === true) || !size || n <= size;
             }
         } catch(e) {
             single_page = true;
         }
+        /*  The page-size selector lives INSIDE the paginator, so hiding the
+         *  whole strip when everything fits took away the very control that
+         *  got the reader there: pick "All" on a topic of 300 rows and the
+         *  table becomes one page, the paginator goes, and 50 is
+         *  unreachable. The selector is noise only when no choice in it
+         *  would change anything -- when the topic is smaller than the
+         *  smallest size it offers. Measure that on the WHOLE topic, never
+         *  on the filtered count, or typing a filter that leaves 3 rows
+         *  takes the selector away too.  */
+        let total_rows;
+        if(paged) {
+            total_rows = total;
+        } else {
+            try {
+                total_rows = tabulator.getDataCount();
+            } catch(e) {
+                total_rows = n;
+            }
+        }
+        let min_size = 0;
+        let sizes = tabulator.options? tabulator.options.paginationSizeSelector : null;
+        if(Array.isArray(sizes)) {
+            sizes.forEach(function(size) {
+                if(typeof size === "number" && (!min_size || size < min_size)) {
+                    min_size = size;
+                }
+            });
+        }
+        let no_paginator = single_page &&
+            (!min_size || typeof total_rows !== "number" || total_rows <= min_size);
+
         tabulator.element.classList.toggle("yui-single-page", single_page);
+        tabulator.element.classList.toggle("yui-no-paginator", no_paginator);
     }
 
     tabulator._ready = false;
@@ -1493,6 +1607,13 @@ function create_tabulator(gobj)
      *  box; a filter per column made it a claim you read on every keystroke. */
     tabulator.on("dataProcessed", update_rowcount);
     tabulator.on("dataChanged", update_rowcount);
+    /*  The reader changed the page size. The widget has already done the
+     *  work -- it re-pages itself -- so what crosses the machine is the
+     *  DECISION, which is the half worth remembering and the half that
+     *  shows up in the trace. */
+    tabulator.on("pageSizeChanged", function(size) {
+        gobj_send_event(gobj, "EV_PAGE_SIZE_CHANGED", {size: size}, gobj);
+    });
     /*  A cell edited in place. Announced as ONE FIELD of one record — not
      *  as the row — and that is the whole safety of it: the host writes it
      *  with a partial update and no `autolink`, so nothing but that field
@@ -3570,6 +3691,27 @@ function ac_open_columns(gobj, event, kw, src)
     return 0;
 }
 
+/************************************************************
+ *  The reader picked another page size: remember it, so coming back to
+ *  this topic opens where they left it instead of at 200.
+ ************************************************************/
+function ac_page_size_changed(gobj, event, kw, src)
+{
+    let size = kw? kw.size : undefined;
+    if(size !== true && !(typeof size === "number" && size > 0)) {
+        log_error(`${gobj_short_name(gobj)}: bad page size: ${size}`);
+        return -1;
+    }
+
+    if(size === gobj.priv._page_size) {
+        return 0;       /*  the build-time announcement, not a decision  */
+    }
+    gobj.priv._page_size = size;
+    save_page_size(gobj, size);
+
+    return 0;
+}
+
 /************************************************************
  *  Show / hide one column.
  ************************************************************/
@@ -3708,6 +3850,7 @@ function create_gclass(gclass_name)
             ["EV_PAGE_TIMEOUT",         ac_page_timeout,       null],
             ["EV_SEARCH",               ac_search,             null],
             ["EV_OPEN_COLUMNS",         ac_open_columns,       null],
+            ["EV_PAGE_SIZE_CHANGED",    ac_page_size_changed,  null],
             ["EV_TOGGLE_COLUMN",        ac_toggle_column,      null],
             ["EV_EXPORT_TABLE",         ac_export_table,       null],
             ["EV_SHOW",                 ac_show,               null],
@@ -3748,6 +3891,7 @@ function create_gclass(gclass_name)
         ["EV_REQUEST_PAGE",         event_flag_t.EVF_OUTPUT_EVENT],
         ["EV_SEARCH",               0],
         ["EV_OPEN_COLUMNS",         0],
+        ["EV_PAGE_SIZE_CHANGED",    0],
         ["EV_TOGGLE_COLUMN",        0],
         ["EV_EXPORT_TABLE",         0],
 

package/src/tabulator.css

@@ -304,6 +304,23 @@
     color: var(--bulma-link-invert);
 }
 
+/*  The paginator paints its OWN colour -- tabulator_bulma.css sets
+ *  `color: hsl(0, 0%, 21%)` on `.tabulator-paginator` itself -- so the
+ *  footer's colour never reaches the "Rows per page" label: near-black
+ *  text on the dark footer, legible only if you knew it was there. Say
+ *  it on the element that sets it, and on the native <select>, which
+ *  otherwise keeps the browser's light chrome.  */
+[data-theme=dark] .tabulator .tabulator-footer .tabulator-paginator,
+[data-theme=dark] .tabulator .tabulator-footer .tabulator-paginator label {
+    color: var(--bulma-text);
+}
+
+[data-theme=dark] .tabulator .tabulator-footer .tabulator-page-size {
+    background-color: var(--bulma-background);
+    color: var(--bulma-text);
+    border-color: var(--bulma-border);
+}
+
 [data-theme=dark] .tabulator-row .tabulator-cell.tabulator-frozen {
     background-color: var(--bulma-background) !important;
 }
@@ -386,5 +403,15 @@
         background-color: var(--bulma-link);
         color: var(--bulma-link-invert);
     }
+    /*  same paginator-paints-its-own-colour rule as [data-theme=dark]  */
+    [data-theme=system] .tabulator .tabulator-footer .tabulator-paginator,
+    [data-theme=system] .tabulator .tabulator-footer .tabulator-paginator label {
+        color: var(--bulma-text);
+    }
+    [data-theme=system] .tabulator .tabulator-footer .tabulator-page-size {
+        background-color: var(--bulma-background);
+        color: var(--bulma-text);
+        border-color: var(--bulma-border);
+    }
 }