wunderbaum 0.12.0 → 0.13.0

package/src/wb_ext_filter.ts

@@ -1,6 +1,6 @@
 /*!
  * Wunderbaum - ext-filter
- * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 
@@ -13,6 +13,7 @@ import {
   onEvent,
 } from "./util";
 import {
+  FilterConnectType,
   FilterNodesOptions,
   FilterOptionsType,
   NodeFilterCallback,
@@ -29,7 +30,11 @@ const RE_START_MARKER = new RegExp(escapeRegex(START_MARKER), "g");
 const RE_END_MARTKER = new RegExp(escapeRegex(END_MARKER), "g");
 
 export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
-  public queryInput?: HTMLInputElement;
+  public queryInput: HTMLInputElement | null = null;
+  public prevButton: HTMLElement | HTMLAnchorElement | null = null;
+  public nextButton: HTMLElement | HTMLAnchorElement | null = null;
+  public modeButton: HTMLButtonElement | null = null;
+  public matchInfoElem: HTMLElement | null = null;
   public lastFilterArgs: IArguments | null = null;
 
   constructor(tree: Wunderbaum) {
@@ -37,7 +42,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
       autoApply: true, // Re-apply last filter if lazy data is loaded
       autoExpand: false, // Expand all branches that contain matches while filtered
       matchBranch: false, // Whether to implicitly match all children of matched nodes
-      connectInput: null, // Element or selector of an input control for filter query strings
+      connect: null, // Element or selector of an input control for filter query strings
       fuzzy: false, // Match single characters in order, e.g. 'fb' will match 'FooBar'
       hideExpanders: false, // Hide expanders if all child nodes are hidden by filter
       highlight: true, // Highlight matches by wrapping inside <mark> tags
@@ -49,35 +54,118 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
 
   init() {
     super.init();
-    const connectInput = this.getPluginOption("connectInput");
-    if (connectInput) {
-      this.queryInput = elemFromSelector(connectInput) as HTMLInputElement;
-      assert(
-        this.queryInput,
-        `Invalid 'filter.connectInput' option: ${connectInput}.`
-      );
-      onEvent(
-        this.queryInput,
-        "input",
-        debounce((e) => {
-          // this.tree.log("query", e);
-          this.filterNodes(this.queryInput!.value.trim(), {});
-        }, 700)
-      );
+    const connect: FilterConnectType = this.getPluginOption("connect");
+    if (connect) {
+      this._connectControls();
     }
   }
 
   setPluginOption(name: string, value: any): void {
-    // alert("filter opt=" + name + ", " + value)
     super.setPluginOption(name, value);
     switch (name) {
       case "mode":
-        this.tree.filterMode = value === "hide" ? "hide" : "dim";
+        this.tree.filterMode =
+          value === "hide" ? "hide" : value === "mark" ? "mark" : "dim";
         this.tree.updateFilter();
         break;
     }
   }
 
+  _updatedConnectedControls() {
+    const filterActive = this.tree.filterMode !== null;
+    const activeNode = this.tree.getActiveNode();
+    const matchCount = filterActive ? this.countMatches() : 0;
+    const strings = this.treeOpts.strings!;
+    let matchIdx: string | number = "?";
+
+    if (this.matchInfoElem) {
+      if (filterActive) {
+        let info;
+        if (matchCount === 0) {
+          info = strings.noMatch;
+        } else if (activeNode && activeNode.match! >= 1) {
+          matchIdx = activeNode.match ?? "?";
+          info = strings.matchIndex;
+        } else {
+          info = strings.queryResult;
+        }
+        info = info
+          .replace("${count}", this.tree.count().toLocaleString())
+          .replace("${match}", "" + matchIdx)
+          .replace("${matches}", matchCount.toLocaleString());
+        this.matchInfoElem.textContent = info;
+      } else {
+        this.matchInfoElem.textContent = "";
+      }
+    }
+
+    if (this.nextButton instanceof HTMLButtonElement) {
+      this.nextButton.disabled = !matchCount;
+    }
+    if (this.prevButton instanceof HTMLButtonElement) {
+      this.prevButton.disabled = !matchCount;
+    }
+    if (this.modeButton) {
+      this.modeButton.disabled = !filterActive;
+      this.modeButton.classList.toggle(
+        "wb-filter-hide",
+        this.tree.filterMode === "hide"
+      );
+    }
+  }
+  _connectControls() {
+    const tree = this.tree;
+    const connect: FilterConnectType = this.getPluginOption("connect");
+    if (!connect) {
+      return;
+    }
+    this.queryInput = elemFromSelector(connect.inputElem);
+    if (!this.queryInput) {
+      throw new Error(`Invalid 'filter.connect' option: ${connect.inputElem}.`);
+    }
+    this.prevButton = elemFromSelector(connect.prevButton!);
+    this.nextButton = elemFromSelector(connect.nextButton!);
+    this.modeButton = elemFromSelector(connect.modeButton!);
+    this.matchInfoElem = elemFromSelector(connect.matchInfoElem!);
+    if (this.prevButton) {
+      onEvent(this.prevButton, "click", () => {
+        tree.findRelatedNode(
+          tree.getActiveNode() || tree.getFirstChild()!,
+          "prevMatch"
+        );
+        this._updatedConnectedControls();
+      });
+    }
+    if (this.nextButton) {
+      onEvent(this.nextButton, "click", () => {
+        tree.findRelatedNode(
+          tree.getActiveNode() || tree.getFirstChild()!,
+          "nextMatch"
+        );
+        this._updatedConnectedControls();
+      });
+    }
+    if (this.modeButton) {
+      onEvent(this.modeButton, "click", (e) => {
+        if (!this.tree.filterMode) {
+          return;
+        }
+        this.setPluginOption(
+          "mode",
+          tree.filterMode === "dim" ? "hide" : "dim"
+        );
+      });
+    }
+    onEvent(
+      this.queryInput,
+      "input",
+      debounce((e) => {
+        this.filterNodes(this.queryInput!.value.trim(), {});
+      }, 700)
+    );
+    this._updatedConnectedControls();
+  }
+
   _applyFilterNoUpdate(
     filter: string | RegExp | NodeFilterCallback,
     _opts: FilterNodesOptions
@@ -98,7 +186,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
     const treeOpts = tree.options;
     const prevAutoCollapse = treeOpts.autoCollapse;
     // Use default options from `tree.options.filter`, but allow to override them
-    const opts = extend({}, treeOpts.filter, _opts);
+    const opts: FilterOptionsType = extend({}, treeOpts.filter, _opts);
     const hideMode = opts.mode === "hide";
     const matchBranch = !!opts.matchBranch;
     const leavesOnly = !!opts.leavesOnly && !matchBranch;
@@ -176,12 +264,12 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
       };
     }
 
-    tree.filterMode = opts.mode;
-    // eslint-disable-next-line prefer-rest-params, prefer-spread
+    tree.filterMode = opts.mode ?? "dim";
+    // eslint-disable-next-line prefer-rest-params
     this.lastFilterArgs = arguments;
 
     tree.element.classList.toggle("wb-ext-filter-hide", !!hideMode);
-    tree.element.classList.toggle("wb-ext-filter-dim", !hideMode);
+    tree.element.classList.toggle("wb-ext-filter-dim", opts.mode === "dim");
     tree.element.classList.toggle(
       "wb-ext-filter-hide-expanders",
       !!opts.hideExpanders
@@ -193,10 +281,6 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
       delete node.titleWithHighlight;
       node.subMatchCount = 0;
     });
-    // statusNode = tree.root.findDirectChild(KEY_NODATA);
-    // if (statusNode) {
-    //   statusNode.remove();
-    // }
     tree.setStatus(NodeStatusType.ok);
 
     // Adjust node.hide, .match, and .subMatchCount properties
@@ -210,7 +294,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
 
       if (res === "skip") {
         node.visit(function (c) {
-          c.match = false;
+          c.match = undefined;
         }, true);
         return "skip";
       }
@@ -223,7 +307,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
 
       if (res) {
         count++;
-        node.match = true;
+        node.match = count;
         node.visitParents((p) => {
           if (p !== node) {
             p.subMatchCount! += 1;
@@ -252,6 +336,8 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
     tree.logDebug(
       `Filter '${filter}' found ${count} nodes in ${Date.now() - start} ms.`
     );
+    this._updatedConnectedControls();
+
     return count;
   }
 
@@ -309,6 +395,7 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
     } else {
       tree.logWarn("updateFilter(): no filter active.");
     }
+    this._updatedConnectedControls();
   }
 
   /**
@@ -316,30 +403,17 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
    */
   clearFilter() {
     const tree = this.tree;
-    // statusNode = tree.root.findDirectChild(KEY_NODATA),
-    // escapeTitles = tree.options.escapeTitles;
     tree.enableUpdate(false);
 
-    // if (statusNode) {
-    //   statusNode.remove();
-    // }
     tree.setStatus(NodeStatusType.ok);
     // we also counted root node's subMatchCount
     delete tree.root.match;
     delete tree.root.subMatchCount;
 
     tree.visit((node) => {
-      // if (node.match && node._rowElem) {
-      //   let titleElem = node._rowElem.querySelector("span.wb-title")!;
-      //   node._callEvent("enhanceTitle", { titleElem: titleElem });
-      // }
       delete node.match;
       delete node.subMatchCount;
       delete node.titleWithHighlight;
-      // if (node.subMatchBadge) {
-      //   node.subMatchBadge.remove();
-      //   delete node.subMatchBadge;
-      // }
       if (node._filterAutoExpanded && node.expanded) {
         node.setExpanded(false, {
           noAnimation: true,
@@ -355,7 +429,8 @@ export class FilterExtension extends WunderbaumExtension<FilterOptionsType> {
       "wb-ext-filter-dim",
       "wb-ext-filter-hide"
     );
-    // tree._callHook("treeStructureChanged", this, "clearFilter");
+    this._updatedConnectedControls();
+
     tree.enableUpdate(true);
   }
 }

package/src/wb_ext_grid.ts

@@ -1,6 +1,6 @@
 /*!
  * Wunderbaum - ext-grid
- * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 import { Wunderbaum } from "./wunderbaum";

package/src/wb_ext_keynav.ts

@@ -1,6 +1,6 @@
 /*!
  * Wunderbaum - ext-keynav
- * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 

package/src/wb_ext_logger.ts

@@ -1,6 +1,6 @@
 /*!
  * Wunderbaum - ext-logger
- * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 

package/src/wb_extension_base.ts

@@ -1,10 +1,11 @@
 /*!
  * Wunderbaum - wb_extension_base
- * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 
 import * as util from "./util";
+import { WunderbaumOptions } from "./wb_options";
 import { Wunderbaum } from "./wunderbaum";
 
 export type ExtensionsDict = { [key: string]: WunderbaumExtension<any> };
@@ -13,7 +14,7 @@ export abstract class WunderbaumExtension<TOptions> {
   public enabled = true;
   readonly id: string;
   readonly tree: Wunderbaum;
-  readonly treeOpts: any;
+  readonly treeOpts: WunderbaumOptions;
   readonly extensionOpts: any;
 
   constructor(tree: Wunderbaum, id: string, defaults: TOptions) {
@@ -23,7 +24,7 @@ export abstract class WunderbaumExtension<TOptions> {
 
     const opts = tree.options as any;
 
-    if (this.treeOpts[id] === undefined) {
+    if ((<any>this.treeOpts)[id] === undefined) {
       opts[id] = this.extensionOpts = util.extend({}, defaults);
     } else {
       // TODO: do we break existing object instance references here?

package/src/wb_node.ts

@@ -1,6 +1,6 @@
 /*!
  * Wunderbaum - wunderbaum_node
- * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 
@@ -21,6 +21,7 @@ import {
   MakeVisibleOptions,
   MatcherCallback,
   NavigateOptions,
+  NavigationType,
   NodeAnyCallback,
   NodeStatusType,
   NodeStringCallback,
@@ -46,7 +47,7 @@ import {
 import {
   decompressSourceData,
   ICON_WIDTH,
-  KEY_TO_ACTION_DICT,
+  KEY_TO_NAVIGATION_MAP,
   makeNodeTitleMatcher,
   nodeTitleSorter,
   RESERVED_TREE_SOURCE_KEYS,
@@ -171,7 +172,11 @@ export class WunderbaumNode {
   _partsel = false;
   _partload = false;
   // --- FILTER ---
-  public match?: boolean; // Added and removed by filter code
+  /**
+   * > 0 if matched (-1 to keep system nodes visible);
+   * Added and removed by filter code.
+   */
+  public match?: number;
   public subMatchCount?: number = 0;
   // public subMatchBadge?: HTMLElement;
   /** @internal */
@@ -656,7 +661,7 @@ export class WunderbaumNode {
    *
    * @see {@link Wunderbaum.findRelatedNode|tree.findRelatedNode()}
    */
-  findRelatedNode(where: string, includeHidden = false) {
+  findRelatedNode(where: NavigationType, includeHidden = false) {
     return this.tree.findRelatedNode(this, where, includeHidden);
   }
 
@@ -987,7 +992,7 @@ export class WunderbaumNode {
     return other && other.parent === this;
   }
 
-  /** (experimental) Return true if this node is partially loaded. */
+  /** Return true if this node is partially loaded. @experimental  */
   isPartload(): boolean {
     return !!this._partload;
   }
@@ -1509,12 +1514,12 @@ export class WunderbaumNode {
    *   e.g. `ArrowLeft` = 'left'.
    * @param options
    */
-  async navigate(where: string, options?: NavigateOptions) {
+  async navigate(where: NavigationType | string, options?: NavigateOptions) {
     // Allow to pass 'ArrowLeft' instead of 'left'
-    where = KEY_TO_ACTION_DICT[where] || where;
+    const navType = (KEY_TO_NAVIGATION_MAP[where] ?? where) as NavigationType;
 
     // Otherwise activate or focus the related node
-    const node = this.findRelatedNode(where);
+    const node = this.findRelatedNode(navType);
     if (!node) {
       this.logWarn(`Could not find related node '${where}'.`);
       return Promise.resolve(this);
@@ -1618,91 +1623,19 @@ export class WunderbaumNode {
   }
 
   protected _createIcon(
-    iconMap: any,
     parentElem: HTMLElement,
     replaceChild: HTMLElement | null,
     showLoading: boolean
   ): HTMLElement | null {
-    let iconSpan;
-    let icon = this.getOption("icon");
-    if (this._errorInfo) {
-      icon = iconMap.error;
-    } else if (this._isLoading && showLoading) {
-      // Status nodes, or nodes without expander (< minExpandLevel) should
-      // display the 'loading' status with the i.wb-icon span
-      icon = iconMap.loading;
-    }
-    if (icon === false) {
-      return null; // explicitly disabled: don't try default icons
-    }
-    if (typeof icon === "string") {
-      // Callback returned an icon definition
-      // icon = icon.trim()
-    } else if (this.statusNodeType) {
-      icon = (<any>iconMap)[this.statusNodeType];
-    } else if (this.expanded) {
-      icon = iconMap.folderOpen;
-    } else if (this.children) {
-      icon = iconMap.folder;
-    } else if (this.lazy) {
-      icon = iconMap.folderLazy;
-    } else {
-      icon = iconMap.doc;
-    }
-
-    // this.log("_createIcon: " + icon);
-    if (!icon) {
-      iconSpan = document.createElement("i");
-      iconSpan.className = "wb-icon";
-    } else if (icon.indexOf("<") >= 0) {
-      // HTML
-      iconSpan = util.elemFromHtml(icon);
-    } else if (TEST_IMG.test(icon)) {
-      // Image URL
-      iconSpan = util.elemFromHtml(
-        `<i class="wb-icon" style="background-image: url('${icon}');">`
-      );
-    } else {
-      // Class name
-      iconSpan = document.createElement("i");
-      iconSpan.className = "wb-icon " + icon;
-    }
-    if (replaceChild) {
-      parentElem.replaceChild(iconSpan, replaceChild);
-    } else {
-      parentElem.appendChild(iconSpan);
-    }
-
-    // Event handler `tree.iconBadge` can return a badge text or HTMLSpanElement
-
-    const cbRes = this._callEvent("iconBadge", { iconSpan: iconSpan });
-    let badge = null;
-    if (cbRes != null && cbRes !== false) {
-      let classes = "";
-      let tooltip = "";
-      if (util.isPlainObject(cbRes)) {
-        badge = "" + cbRes.badge;
-        classes = cbRes.badgeClass ? " " + cbRes.badgeClass : "";
-        tooltip = cbRes.badgeTooltip ? ` title="${cbRes.badgeTooltip}"` : "";
-      } else if (typeof cbRes === "number") {
-        badge = "" + cbRes;
+    const iconElem = this.tree._createNodeIcon(this, showLoading, true);
+    if (iconElem) {
+      if (replaceChild) {
+        parentElem.replaceChild(iconElem, replaceChild);
       } else {
-        badge = cbRes; // string or HTMLSpanElement
-      }
-      if (typeof badge === "string") {
-        badge = util.elemFromHtml(
-          `<span class="wb-badge${classes}"${tooltip}>${util.escapeHtml(
-            badge
-          )}</span>`
-        );
-      }
-      if (badge) {
-        iconSpan.append(<HTMLSpanElement>badge);
+        parentElem.appendChild(iconElem);
       }
     }
-
-    // this.log("_createIcon: ", iconSpan);
-    return iconSpan;
+    return iconElem;
   }
 
   /**
@@ -1773,12 +1706,7 @@ export class WunderbaumNode {
 
     // Render the icon (show a 'loading' icon if we do not have an expander that
     // we would prefer).
-    const iconSpan = this._createIcon(
-      tree.iconMap,
-      nodeElem,
-      null,
-      !expanderSpan
-    );
+    const iconSpan = this._createIcon(nodeElem, null, !expanderSpan);
     if (iconSpan) {
       ofsTitlePx += ICON_WIDTH;
     }
@@ -2029,7 +1957,7 @@ export class WunderbaumNode {
       // Update icon (if not opts.isNew, which would rebuild markup anyway)
       const iconSpan = nodeElem.querySelector("i.wb-icon") as HTMLElement;
       if (iconSpan) {
-        this._createIcon(tree.iconMap, nodeElem, iconSpan, !expanderSpan);
+        this._createIcon(nodeElem, iconSpan, !expanderSpan);
       }
     }
     // Adjust column width
@@ -2437,7 +2365,8 @@ export class WunderbaumNode {
       case undefined:
         changed = this.selected || !this._partsel;
         this.selected = false;
-        this._partsel = true;
+        // #110: end nodess cannot have a `_partsel` flag
+        this._partsel = this.hasChildren() ? true : false;
         break;
       default:
         util.error(`Invalid state: ${state}`);
@@ -2640,7 +2569,7 @@ export class WunderbaumNode {
       );
 
       statusNode = this.addNode(data, "prependChild");
-      statusNode.match = true;
+      statusNode.match = -1; // Mark as 'match' to avoid hiding
       tree.update(ChangeType.structure);
 
       return statusNode;
@@ -2663,7 +2592,7 @@ export class WunderbaumNode {
           _setStatusNode({
             statusNodeType: status,
             title:
-              tree.options.strings.loading +
+              tree.options.strings!.loading +
               (message ? " (" + message + ")" : ""),
             checkbox: false,
             colspan: true,
@@ -2676,7 +2605,7 @@ export class WunderbaumNode {
         _setStatusNode({
           statusNodeType: status,
           title:
-            tree.options.strings.loadError +
+            tree.options.strings!.loadError +
             (message ? " (" + message + ")" : ""),
           checkbox: false,
           colspan: true,
@@ -2689,7 +2618,7 @@ export class WunderbaumNode {
       case "noData":
         _setStatusNode({
           statusNodeType: status,
-          title: message || tree.options.strings.noData,
+          title: message || tree.options.strings!.noData,
           checkbox: false,
           colspan: true,
           tooltip: details,

package/src/wb_options.ts

@@ -1,6 +1,6 @@
 /*!
  * Wunderbaum - utils
- * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 
@@ -13,12 +13,14 @@ import {
   DynamicIconOption,
   EditOptionsType,
   FilterOptionsType,
+  IconMapType,
   // GridOptionsType,
   // KeynavOptionsType,
   // LoggerOptionsType,
   NavModeEnum,
   NodeTypeDefinitionMap,
   SelectModeType,
+  TranslationsType,
   WbActivateEventType,
   WbButtonClickEventType,
   WbCancelableEventResultType,
@@ -114,7 +116,7 @@ export interface WunderbaumOptions {
   /**
    * Translation map for some system messages.
    */
-  strings?: any; //[key: string] string;
+  strings?: TranslationsType;
   /**
    * 0:quiet, 1:errors, 2:warnings, 3:info, 4:verbose
    * Default: 3 (4 in local debug environment)
@@ -149,7 +151,7 @@ export interface WunderbaumOptions {
    * Note: the icon font must be loaded separately.
    * Default: "bootstrap"
    */
-  iconMap?: string | { [key: string]: string };
+  iconMap?: string | IconMapType;
   /**
    * Collapse siblings when a node is expanded.
    * Default: false
@@ -170,10 +172,10 @@ export interface WunderbaumOptions {
    */
   adjustHeight?: boolean;
   /**
-   * HTMLElement that receives the top nodes breadcrumb.
+   * HTMLElement or selector that receives the top nodes breadcrumb.
    * Default: undefined
    */
-  connectTopBreadcrumb?: HTMLElement;
+  connectTopBreadcrumb?: HTMLElement | string;
   /**
    * Default:  NavModeEnum.startRow
    */

package/src/wunderbaum.scss

@@ -1,6 +1,6 @@
 /*!
  * Wunderbaum style sheet (generated from wunderbaum.scss)
- * Copyright (c) 2021-2024, Martin Wendt. Released under the MIT license.
+ * Copyright (c) 2021-2025, Martin Wendt. Released under the MIT license.
  * @VERSION, @DATE (https://github.com/mar10/wunderbaum)
  */
 // @use "sass:meta";
@@ -69,8 +69,8 @@ $header-height: $row-outer-height;
 // $level-rainbow: rgba(255, 255, 64, 0.07), rgba(127, 255, 127, 0.07),
 //   rgba(255, 127, 255, 0.07), rgba(79, 236, 236, 0.07);
 // Slightly stronger*
-$level-rainbow: rgb(255, 255, 201), rgb(218, 255, 218), rgb(255, 217, 254),
-  rgb(204, 250, 250);
+$level-rainbow:
+  rgb(255, 255, 201), rgb(218, 255, 218), rgb(255, 217, 254), rgb(204, 250, 250);
 
 // ----------------------------------------------------------------------------
 // --- Define CSS variables with calculated default values
@@ -759,6 +759,10 @@ div.wunderbaum {
 }
 
 /* --- TOOL CLASSES --- */
+a.wb-breadcrumb {
+  cursor: pointer;
+  text-decoration: none;
+}
 
 .wb-helper-center {
   text-align: center;
@@ -797,7 +801,11 @@ div.wunderbaum {
 // .wb-helper-edit-text {
 //   // content-editable: true;
 // }
-
+button.wb-filter-hide {
+  font-weight: bolder;
+  // background-color: var(--wb-active-color);
+  // -webkit-appearance: auto; /* Removes default Safari styles */
+}
 /* RTL support */
 .wb-helper-start,
 .wb-helper-start > input {