@yuneta/gobj-ui 3.0.0 → 4.0.0

package/src/shell_route_map.css

@@ -0,0 +1,225 @@
+/***********************************************************************
+ *          shell_route_map.css
+ *
+ *      Styling for the site-map (route-tree) viewer in shell_route_map.js.
+ *      A monospaced, indented tree; theme-aware via Bulma variables;
+ *      and @media print rules (scoped by body.routemap-printing) so the
+ *      Print button prints only the tree.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+.ROUTEMAP_BODY {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 0;
+}
+/*  In the resizable window, fill the window body so the tree grows/shrinks
+ *  with it (the WINDOW_BODY is is-flex-grow-1 with a definite height). */
+.yui-window-body .ROUTEMAP_BODY {
+    height: 100%;
+}
+.ROUTEMAP_SEARCH_ROW {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+.ROUTEMAP_SEARCH_CTRL {
+    max-width: 22rem;
+    flex: 1 1 auto;
+}
+.ROUTEMAP_COUNT {
+    display: inline-flex;
+    gap: 0.25rem;
+    white-space: nowrap;
+    flex: 0 0 auto;
+}
+.ROUTEMAP_COUNT_N {
+    font-weight: 600;
+}
+/*  Highlight a row that itself matches the filter. */
+.ROUTEMAP_MATCH {
+    background: var(--bulma-warning-light, #fff6d9) !important;
+}
+[data-theme="dark"] .ROUTEMAP_MATCH {
+    background: rgba(255, 221, 87, 0.20) !important;
+}
+.ROUTEMAP_MATCH .ROUTEMAP_NAME,
+.ROUTEMAP_MATCH .ROUTEMAP_ROUTE {
+    color: var(--bulma-text-strong, #363636);
+}
+[data-theme="dark"] .ROUTEMAP_MATCH .ROUTEMAP_NAME,
+[data-theme="dark"] .ROUTEMAP_MATCH .ROUTEMAP_ROUTE {
+    color: #1a1a1a;
+}
+.ROUTEMAP_TREE {
+    font-family: var(--bulma-family-monospace, monospace);
+    font-size: 0.85rem;
+    line-height: 1.5;
+    overflow: auto;
+    min-height: 6rem;
+    /*  Modal fallback: cap and scroll. In the window the rule below
+     *  makes it flex-fill instead. */
+    flex: 0 1 auto;
+    max-height: 68vh;
+    border: 1px solid var(--bulma-border-weak, #dbdbdb);
+    border-radius: 0.375rem;
+    padding: 0.75rem 1rem;
+    background: var(--bulma-scheme-main, #fff);
+}
+/*  In the window: grow to fill the remaining height (after the filter
+ *  and print row) and scroll internally. */
+.yui-window-body .ROUTEMAP_TREE {
+    flex: 1 1 auto;
+    max-height: none;
+}
+.ROUTEMAP_UL {
+    list-style: none;
+    margin: 0;
+    padding-left: 1.1rem;
+    border-left: 1px dotted var(--bulma-border, #b5b5b5);
+}
+.ROUTEMAP_ROOT {
+    padding-left: 0;
+    border-left: none;
+}
+.ROUTEMAP_LI {
+    margin: 0.05rem 0;
+}
+.ROUTEMAP_ROW {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.05rem 0.25rem;
+    border-radius: 0.25rem;
+}
+.ROUTEMAP_ICON {
+    font-size: 0.95rem;
+    color: var(--bulma-text-weak, #7a7a7a);
+}
+a.ROUTEMAP_LINK {
+    text-decoration: none;
+    color: inherit;
+}
+a.ROUTEMAP_LINK:hover {
+    background: var(--bulma-background, #f5f5f5);
+}
+a.ROUTEMAP_LINK .ROUTEMAP_NAME {
+    font-weight: 600;
+    color: var(--bulma-text, inherit);
+}
+.ROUTEMAP_NAME {
+    color: var(--bulma-text, inherit);
+}
+.ROUTEMAP_ROUTE {
+    background: transparent;
+    color: var(--bulma-link, #485fc7);
+    padding: 0;
+    font-size: 0.8rem;
+}
+/*  Implementing GClass pill (teal) — distinct from route (blue) and
+ *  event (grey). */
+.ROUTEMAP_GCLASS {
+    font-family: var(--bulma-family-monospace, monospace);
+    font-size: 0.7rem;
+    padding: 0.02rem 0.35rem;
+    border-radius: 0.25rem;
+    background: var(--bulma-link-light, #eff1fa);
+    color: var(--bulma-link-dark, #3850b7);
+    white-space: nowrap;
+}
+[data-theme="dark"] .ROUTEMAP_GCLASS {
+    background: rgba(120, 150, 255, 0.16);
+    color: #aab8ff;
+}
+
+/*  Action event badge — explicit colours (not Bulma's is-light tag) so it
+ *  stays legible in dark mode. */
+.ROUTEMAP_EVENT {
+    font-family: var(--bulma-family-monospace, monospace);
+    font-size: 0.72rem;
+    padding: 0.02rem 0.4rem;
+    border-radius: 0.25rem;
+    background: var(--bulma-background, #f0f0f0);
+    color: var(--bulma-text-strong, #363636);
+    border: 1px solid var(--bulma-border-weak, #dbdbdb);
+    white-space: nowrap;
+}
+[data-theme="dark"] .ROUTEMAP_EVENT {
+    background: rgba(255, 255, 255, 0.10);
+    color: #e6e6e6;
+    border-color: rgba(255, 255, 255, 0.20);
+}
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .ROUTEMAP_EVENT {
+        background: rgba(255, 255, 255, 0.10);
+        color: #e6e6e6;
+        border-color: rgba(255, 255, 255, 0.20);
+    }
+}
+/*  "You are here" — the row of the route the user is currently on. */
+.ROUTEMAP_CURRENT {
+    background: var(--bulma-link-light, #eff1fa) !important;
+    outline: 1px solid var(--bulma-link, #485fc7);
+}
+[data-theme="dark"] .ROUTEMAP_CURRENT {
+    background: rgba(120, 150, 255, 0.16) !important;
+    outline-color: rgba(120, 150, 255, 0.55);
+}
+.ROUTEMAP_HERE {
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    padding: 0.02rem 0.4rem;
+    border-radius: 0.25rem;
+    background: var(--bulma-link, #485fc7);
+    color: var(--bulma-link-invert, #fff);
+    white-space: nowrap;
+}
+.ROUTEMAP_STRUCT .ROUTEMAP_NAME {
+    color: var(--bulma-text-weak, #7a7a7a);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    font-size: 0.78rem;
+    font-weight: 700;
+}
+.ROUTEMAP_HINT {
+    color: var(--bulma-text-weak, #7a7a7a);
+}
+.ROUTEMAP_ACTIONS {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.75rem;
+}
+
+/*  Print only the tree. On print the button clones the tree into
+ *  `.routemap-print-area` (off-screen) and sets body.routemap-printing;
+ *  everything else is hidden regardless of where the window/modal lives. */
+.routemap-print-area {
+    display: none;
+}
+@media print {
+    body.routemap-printing > *:not(.routemap-print-area) {
+        display: none !important;
+    }
+    body.routemap-printing .routemap-print-area {
+        display: block !important;
+    }
+    .routemap-print-area .ROUTEMAP_TREE {
+        max-height: none;
+        border: none;
+        overflow: visible;
+        font-size: 10pt;
+    }
+    .routemap-print-area .ROUTEMAP_ROUTE,
+    .routemap-print-area .ROUTEMAP_NAME {
+        color: #000 !important;
+    }
+    .routemap-print-area .ROUTEMAP_EVENT {
+        background: transparent !important;
+        color: #000 !important;
+        border-color: #999 !important;
+    }
+}

package/src/shell_route_map.js

@@ -0,0 +1,363 @@
+/***********************************************************************
+ *          shell_route_map.js
+ *
+ *      "Site map" viewer for a C_YUI_SHELL app: renders the WHOLE
+ *      navigation surface — the toolbar (including the account menu),
+ *      the primary menu, its live dynamic tabs, and each view's
+ *      declared sub-routes (topics / info / schema / focus topics) —
+ *      as a printable, clickable tree, in DECLARATION order (see
+ *      ROUTING.md). Meant to double as the app's basic documentation.
+ *      Hosted in a resizable C_YUI_WINDOW (a modal is the fallback when
+ *      C_YUI_WINDOW is not registered).
+ *
+ *      Usage (e.g. from an "Account → Site map" menu action):
+ *          import {yui_shell_show_route_map} from
+ *              "@yuneta/gobj-ui/src/shell_route_map.js";
+ *          yui_shell_show_route_map(shell, {t});
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import "./shell_route_map.css";
+
+import {
+    createElement2,
+    refresh_language,
+    gobj_create_service,
+    gobj_find_service,
+    gobj_start,
+    gobj_send_event,
+    is_gobj,
+    gclass_find_by_name,
+    log_error,
+} from "@yuneta/gobj-js";
+
+import {yui_shell_show_modal, yui_shell_popup_layer} from "./shell_modals.js";
+import {yui_shell_nav_map} from "./c_yui_shell.js";
+import {attach_clear} from "./yui_inputs.js";
+
+import i18next from "i18next";
+
+const WIN_NAME = "shell-route-map-window";
+
+/*  Modal fallback currently open (the window flavour is a service and
+ *  is found by name; the modal is not, so it is tracked here to make
+ *  the second call a TOGGLE for both flavours). */
+let __open_modal__ = null;
+
+/*  Bring the "you are here" row into view once the map is mounted. */
+function scroll_to_current($body)
+{
+    let $cur = $body.querySelector(".ROUTEMAP_CURRENT");
+    if($cur && typeof $cur.scrollIntoView === "function") {
+        $cur.scrollIntoView({block: "center"});
+    }
+}
+
+
+/***************************************************************
+ *  Render one nav node as an <li> (with a nested <ul> for children),
+ *  preserving the given order. A node with a `route` is a live hash
+ *  link; a node with an `event` is an action (shown, not fired); a
+ *  structural/group node is plain text.
+ ***************************************************************/
+function render_node(node)
+{
+    let row = [];
+    if(node.icon && /^yi-[a-z0-9-]+$/.test(node.icon)) {
+        row.push(["span", {class: "icon ROUTEMAP_ICON"},
+            [["i", {class: node.icon}]]]);
+    }
+    row.push(["span", {class: "ROUTEMAP_NAME", i18n: node.label}, node.label]);
+    /*  Documentation columns: route + implementing gclass + action event. */
+    if(node.route) {
+        row.push(["code", {class: "ROUTEMAP_ROUTE"}, node.route]);
+    }
+    if(node.gclass) {
+        row.push(["span", {class: "ROUTEMAP_GCLASS",
+            title: "gclass", "data-i18n-title": "gclass"},
+            node.gclass]);
+    }
+    if(node.event) {
+        row.push(["span", {class: "ROUTEMAP_EVENT"}, node.event]);
+    }
+    /*  "You are here" — the node whose route best matches the current
+     *  one (marked by the model; at most one). */
+    if(node.current) {
+        row.push(["span", {class: "ROUTEMAP_HERE", i18n: "you are here"},
+            "you are here"]);
+    }
+
+    let row_class = node.current ? " ROUTEMAP_CURRENT" : "";
+    let $row;
+    if(node.route) {
+        $row = createElement2(
+            ["a", {class: "ROUTEMAP_LINK ROUTEMAP_ROW" + row_class,
+                   href: "#" + node.route,
+                   title: node.route}, row]);
+    } else {
+        $row = createElement2(
+            ["span", {class: "ROUTEMAP_ROW ROUTEMAP_STRUCT" + row_class}, row]);
+    }
+
+    let kids = (node.children && node.children.length)
+        ? [createElement2(["ul", {class: "ROUTEMAP_UL"},
+            node.children.map(render_node)])]
+        : [];
+    return createElement2(["li", {class: "ROUTEMAP_LI"}, [$row].concat(kids)]);
+}
+
+/***************************************************************
+ *  Filter a rendered <li>: visible when its own row matches `q`, when
+ *  an ancestor matched (show the whole subtree of a match), or when a
+ *  descendant matches (keep the ancestor path). Empty `q` shows all.
+ *  Matches against the visible row text (name + route + event), so it
+ *  honours the current translation. Returns whether the <li> is shown.
+ ***************************************************************/
+function filter_li($li, q, ancestor_match)
+{
+    let $row = $li.querySelector(":scope > .ROUTEMAP_ROW");
+    let text = $row ? ($row.textContent || "").toLowerCase() : "";
+    let self_match = q === "" || text.indexOf(q) >= 0;
+    let show_all = ancestor_match || self_match;
+
+    let any_child = false;
+    let $ul = $li.querySelector(":scope > ul");
+    if($ul) {
+        let kids = $ul.children;
+        for(let i = 0; i < kids.length; i++) {
+            if(filter_li(kids[i], q, show_all)) {
+                any_child = true;
+            }
+        }
+    }
+
+    let visible = show_all || any_child;
+    $li.style.display = visible ? "" : "none";
+    if($row) {
+        $row.classList.toggle("ROUTEMAP_MATCH", q !== "" && self_match);
+    }
+    return visible;
+}
+
+/***************************************************************
+ *  Build the site-map body (tree + hint + print), and wire the
+ *  print button and the link-jump behaviour.  Links navigate
+ *  natively; the shell's transient-overlay drain closes the host
+ *  on a resting-route change.  `on_jump()` closes the host for the
+ *  one click that navigates nowhere (the current route).
+ ***************************************************************/
+function build_body(shell, t, on_jump)
+{
+    let map = yui_shell_nav_map(shell);
+    let children = [
+        {label: "toolbar", icon: "", route: "", event: "",
+         kind: "group", children: map.toolbar}
+    ].concat(map.nav);
+    /*  Routes declared only in the route table (config.shell.routes)
+     *  that no menu/toolbar item points at — root "/", URL-only action
+     *  routes.  Rendered last, as their own group. */
+    if(Array.isArray(map.other) && map.other.length) {
+        children.push({label: "other routes", icon: "", route: "", event: "",
+            kind: "group", children: map.other});
+    }
+    let root = {
+        label:    map.brand.label || "app",
+        icon:     "",
+        route:    map.brand.route || "",
+        event:    "",
+        current:  !!map.brand.current,
+        children: children
+    };
+
+    let $tree = createElement2(
+        ["div", {class: "ROUTEMAP_TREE"}, [
+            createElement2(["ul", {class: "ROUTEMAP_UL ROUTEMAP_ROOT"},
+                [render_node(root)]])
+        ]]
+    );
+
+    /*  Search filter: matching nodes plus their ancestor path (and the
+     *  matched node's whole subtree) stay visible; the rest collapse. */
+    let $search = createElement2(
+        ["input", {class: "input is-small ROUTEMAP_SEARCH", type: "text",
+                   placeholder: t("filter", {defaultValue: "Filter…"}),
+                   "data-i18n-placeholder": "filter",
+                   "aria-label": t("filter", {defaultValue: "Filter"}),
+                   "data-i18n-aria-label": "filter"}]
+    );
+    let $search_ctrl = createElement2(
+        ["div", {class: "control ROUTEMAP_SEARCH_CTRL"}, [$search]]
+    );
+    attach_clear($search_ctrl, $search);
+
+    /*  Live match counter next to the filter. */
+    let $count_n = createElement2(["span", {class: "ROUTEMAP_COUNT_N"}, ""]);
+    let $count = createElement2(
+        ["span", {class: "ROUTEMAP_COUNT is-size-7 has-text-grey is-hidden"},
+            [$count_n, ["span", {i18n: "matches"}, "matches"]]]
+    );
+    let $search_row = createElement2(
+        ["div", {class: "ROUTEMAP_SEARCH_ROW mb-2"}, [$search_ctrl, $count]]
+    );
+
+    $search.addEventListener("input", function() {
+        let q = ($search.value || "").trim().toLowerCase();
+        let $root_li = $tree.querySelector(".ROUTEMAP_ROOT > li");
+        if($root_li) {
+            filter_li($root_li, q, false);
+        }
+        if(q === "") {
+            $count.classList.add("is-hidden");
+        } else {
+            $count_n.textContent = $tree.querySelectorAll(".ROUTEMAP_MATCH").length;
+            $count.classList.remove("is-hidden");
+        }
+    });
+
+    let $body = createElement2(
+        ["div", {class: "C_YUI_SHELL_ROUTEMAP ROUTEMAP_BODY"}, [
+            ["p", {class: "ROUTEMAP_HINT is-size-7 mb-2", i18n: "site map hint"},
+                t("site map hint", {defaultValue:
+                    "Every reachable position of the app is a URL. Click to jump."})],
+            $search_row,
+            $tree,
+            ["div", {class: "ROUTEMAP_ACTIONS"}, [
+                ["button", {class: "button is-small ROUTEMAP_PRINT",
+                            i18n: "print"}, t("print", {defaultValue: "Print"})]
+            ]]
+        ]]
+    );
+
+    /*  Print only the tree: clone it into an off-screen print area so
+     *  the @media print rules can hide everything else, regardless of
+     *  where the window/modal is mounted. */
+    let $print = $body.querySelector(".ROUTEMAP_PRINT");
+    if($print) {
+        $print.addEventListener("click", function() {
+            let $area = document.createElement("div");
+            $area.className = "routemap-print-area";
+            $area.appendChild($tree.cloneNode(true));
+            document.body.appendChild($area);
+            document.body.classList.add("routemap-printing");
+            try {
+                window.print();
+            } finally {
+                document.body.classList.remove("routemap-printing");
+                if($area.parentNode) {
+                    $area.parentNode.removeChild($area);
+                }
+            }
+        });
+    }
+
+    /*  A route link jumps there NATIVELY (browser push + hashchange —
+     *  no preventDefault): a resting-route change then closes this
+     *  window/modal through the shell's transient-overlay drain, which
+     *  is deterministic (the old close-then-deferred-navigate raced the
+     *  dismissal's history.back() and could land back where it
+     *  started).  A subpath or action-route jump keeps the map open —
+     *  it doubles as a navigation panel.  Clicking the route the user
+     *  is ALREADY on navigates nowhere: close the host instead.
+     *  Action nodes (no route) are documentation only and do not fire. */
+    $body.addEventListener("click", function(ev) {
+        let $link = ev.target && ev.target.closest &&
+            ev.target.closest(".ROUTEMAP_LINK");
+        if(!$link) {
+            return;
+        }
+        let href = $link.getAttribute("href");
+        if(href && typeof window !== "undefined" &&
+                window.location.hash === href &&
+                typeof on_jump === "function") {
+            ev.preventDefault();
+            on_jump();
+        }
+    });
+
+    refresh_language($body, t);
+    return $body;
+}
+
+
+/***************************************************************
+ *  Show the site map. Toggles: a second call closes the open one.
+ ***************************************************************/
+export function yui_shell_show_route_map(shell, opts)
+{
+    let t = (opts && opts.t) || i18next.t.bind(i18next);
+
+    /*  Toggle: an open site-map window/modal → close it. */
+    let existing = gobj_find_service(WIN_NAME, false);
+    if(existing && is_gobj(existing)) {
+        gobj_send_event(existing, "EV_CLOSE_WINDOW", {}, shell);
+        return null;
+    }
+    if(__open_modal__) {
+        let m = __open_modal__;
+        __open_modal__ = null;
+        if(typeof m.close === "function") {
+            m.close();
+        }
+        return null;
+    }
+
+    /*  Preferred: a resizable, maximisable floating window. */
+    if(gclass_find_by_name("C_YUI_WINDOW") !== null) {
+        let win_ref = {gobj: null};
+        let $body = build_body(shell, t, function() {
+            if(win_ref.gobj && is_gobj(win_ref.gobj)) {
+                gobj_send_event(win_ref.gobj, "EV_CLOSE_WINDOW", {}, shell);
+            }
+        });
+        let $parent = yui_shell_popup_layer(shell) ||
+            (typeof document !== "undefined" &&
+                document.getElementById("top-layer")) || null;
+        let win = gobj_create_service(WIN_NAME, "C_YUI_WINDOW", {
+            $parent:    $parent,
+            subscriber: null,
+            modal:      false,
+            showMax:    true,
+            showFooter: false,
+            resizable:  true,
+            center:     true,
+            auto_save_size_and_position: true,
+            width:      780,
+            height:     640,
+            logical_class: "ROUTEMAP_WINDOW",
+            title:      "site map",
+            icon:       "yi-bars",
+            body:       $body,
+            manager:    null
+        }, shell);
+        if(!win) {
+            log_error("C_YUI_SHELL: cannot create the site-map window");
+            return null;
+        }
+        win_ref.gobj = win;
+        gobj_start(win);
+        scroll_to_current($body);
+        return win;
+    }
+
+    /*  Fallback: a modal (no C_YUI_WINDOW registered). */
+    let modal_ref = {modal: null};
+    let $body = build_body(shell, t, function() {
+        if(modal_ref.modal && typeof modal_ref.modal.close === "function") {
+            modal_ref.modal.close();
+        }
+    });
+    modal_ref.modal = yui_shell_show_modal(shell, $body, {
+        dialog:        true,
+        logical_class: "ROUTEMAP_SHEET",
+        /*  The KEY, not t(key): the modal renders `title` with
+         *  data-i18n, so a pre-translated string would become the
+         *  "key" and never re-translate. */
+        title:         "site map",
+        t:             t,
+        on_close:      function() { __open_modal__ = null; }
+    });
+    __open_modal__ = modal_ref.modal;
+    scroll_to_current($body);
+    return modal_ref.modal;
+}

package/src/tabulator.css

@@ -99,6 +99,39 @@
     background-color: var(--bulma-background, #ebebeb) !important;
 }
 
+/* ====================================================================
+ *  Opt-out of the whole-row hover wash + pointer cursor. For tables that
+ *  select ONLY through the checkbox column (selectableRows:"highlight"),
+ *  the hover highlight reads as a selection. Add `yui-no-row-hover` on the
+ *  .tabulator element: unselected rows stay visually static on hover; a
+ *  checkbox-selected row keeps its `.tabulator-selected` colour (the
+ *  :not() guard leaves it alone). Colours mirror the striping rules so
+ *  hover === the row's own background in every theme.
+ * ==================================================================== */
+.tabulator.yui-no-row-hover .tabulator-row.tabulator-selectable:hover {
+    cursor: default !important;
+}
+.tabulator.yui-no-row-hover
+        .tabulator-row.tabulator-row-odd.tabulator-selectable:not(.tabulator-selected):hover {
+    background-color: var(--bulma-scheme-main, #fff) !important;
+    color: var(--bulma-body-color) !important;
+}
+.tabulator.yui-no-row-hover
+        .tabulator-row.tabulator-row-even.tabulator-selectable:not(.tabulator-selected):hover {
+    background-color: var(--bulma-scheme-main-ter, #f5f5f5) !important;
+    color: var(--bulma-body-color) !important;
+}
+[data-theme=dark] .tabulator.yui-no-row-hover
+        .tabulator-row.tabulator-row-odd.tabulator-selectable:not(.tabulator-selected):hover {
+    background-color: var(--bulma-body-background-color) !important;
+    color: var(--bulma-body-color) !important;
+}
+[data-theme=dark] .tabulator.yui-no-row-hover
+        .tabulator-row.tabulator-row-even.tabulator-selectable:not(.tabulator-selected):hover {
+    background-color: var(--bulma-background) !important;
+    color: var(--bulma-body-color) !important;
+}
+
 /*
  *  Tabulator dark theme
  *  Activated by html[data-theme=dark] (set by the app's theme switcher)
@@ -143,6 +176,30 @@
     color: var(--bulma-text) !important;
 }
 
+/*
+ *  The CELL EDITOR in dark theme.
+ *
+ *  Tabulator gives its editor input no colour of its own, so it inherits the
+ *  browser default: BLACK text on the dark cell — the value disappears the
+ *  moment you click into it, and comes back when the field loses focus. Same
+ *  for a header-filter input and for a <select>.
+ */
+[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing input,
+[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing select,
+[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing textarea,
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter input,
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter select {
+    background-color: var(--bulma-scheme-main, #16181d);
+    color: var(--bulma-body-color, #e6e6e6) !important;
+    caret-color: var(--bulma-body-color, #e6e6e6);
+    border-color: var(--bulma-border);
+}
+
+[data-theme=dark] .tabulator-row .tabulator-cell.tabulator-editing input::placeholder,
+[data-theme=dark] .tabulator .tabulator-header .tabulator-header-filter input::placeholder {
+    color: var(--bulma-text-weak, #8a8f98);
+}
+
 [data-theme=dark] .tabulator-row.tabulator-selected {
     background-color: var(--bulma-link) !important;
     color: var(--bulma-link-invert) !important;
@@ -209,6 +266,16 @@
     [data-theme=system] .tabulator-row.tabulator-selectable:hover {
         background-color: var(--bulma-background) !important;
     }
+    [data-theme=system] .tabulator.yui-no-row-hover
+            .tabulator-row.tabulator-row-odd.tabulator-selectable:not(.tabulator-selected):hover {
+        background-color: var(--bulma-body-background-color) !important;
+        color: var(--bulma-body-color) !important;
+    }
+    [data-theme=system] .tabulator.yui-no-row-hover
+            .tabulator-row.tabulator-row-even.tabulator-selectable:not(.tabulator-selected):hover {
+        background-color: var(--bulma-background) !important;
+        color: var(--bulma-body-color) !important;
+    }
     [data-theme=system] .tabulator-row.tabulator-selected {
         background-color: var(--bulma-link) !important;
         color: var(--bulma-link-invert) !important;