@jackuait/blok 0.7.1 → 0.7.2

package/dist/chunks/{tools-Chd7Auwx.mjs → tools-rsbC2UUN.mjs}

@@ -1,4 +1,4 @@
-import { $ as e, A as t, At as n, B as r, D as i, Dn as a, Dt as o, En as s, F as c, Ft as l, G as u, H as d, I as f, J as p, K as m, L as h, M as g, N as ee, P as te, Pt as ne, Q as re, R as ie, Tt as ae, U as oe, V as se, W as ce, X as le, Xt as ue, _t as de, a as fe, bn as pe, bt as me, c as he, ct as ge, d as _e, dt as ve, et as ye, f as be, ft as xe, g as Se, gt as Ce, h as we, ht as Te, i as Ee, it as De, j as Oe, jt as _, k as ke, l as Ae, lt as je, mt as Me, n as Ne, nt as Pe, o as Fe, p as Ie, pt as Le, q as Re, r as ze, rt as Be, s as Ve, t as He, tt as Ue, u as v, ut as We, v as Ge, wt as Ke, z as qe } from "./constants-DXYRzX7f.mjs";
+import { $ as e, A as t, At as n, B as r, D as i, Dn as a, Dt as o, En as s, F as c, Ft as l, G as u, H as d, I as f, J as p, K as m, L as h, M as g, N as ee, P as te, Pt as ne, Q as re, R as ie, Tt as ae, U as oe, V as se, W as ce, X as le, Xt as ue, _t as de, a as fe, bn as pe, bt as me, c as he, ct as ge, d as _e, dt as ve, et as ye, f as be, ft as xe, g as Se, gt as Ce, h as we, ht as Te, i as Ee, it as De, j as Oe, jt as _, k as ke, l as Ae, lt as je, mt as Me, n as Ne, nt as Pe, o as Fe, p as Ie, pt as Le, q as Re, r as ze, rt as Be, s as Ve, t as He, tt as Ue, u as v, ut as We, v as Ge, wt as Ke, z as qe } from "./constants-BkelccB1.mjs";
 import { t as y } from "./objectSpread2-CyPxu8-u.mjs";
 import { n as b } from "./tw-DmW6-pCY.mjs";
 //#region src/components/utils/html.ts
@@ -106,9 +106,7 @@ var Je = (e) => {
 	}
 	onPaste(e) {
 		let t = e.detail;
-		"data" in t && (this._data = { text: t.data.innerHTML }, queueMicrotask(() => {
-			this._element && (this._element.innerHTML = this._data.text || "");
-		}));
+		"data" in t && (this._data = { text: t.data.innerHTML }, this._element && (this._element.innerHTML = this._data.text || ""));
 	}
 	static get conversionConfig() {
 		return {
@@ -1956,7 +1954,7 @@ var vt = "outline-hidden py-[3px] mt-[2px] mb-px", yt = "outline-hidden pl-0.5 l
 			e.preventDefault(), this.handleShiftTabNavigation(t);
 			return;
 		}
-		e.key === "ArrowDown" && t.row === this.getRowCount() - 1 && (e.preventDefault(), this.exitTableForward());
+		e.key === "ArrowDown" && !e.defaultPrevented && t.row === this.getRowCount() - 1 && (e.preventDefault(), this.exitTableForward());
 	}
 	handleTabNavigation(e) {
 		let t = e.col + 1;
@@ -2090,12 +2088,15 @@ var vt = "outline-hidden py-[3px] mt-[2px] mb-px", yt = "outline-hidden pl-0.5 l
 		return n;
 	}
 	claimBlockForCell(e, t) {
-		let n = e.querySelector(`[${k}]`);
-		if (!n) return;
-		let r = this.api.blocks.getBlockIndex(t);
-		if (r === void 0) return;
-		let i = this.api.blocks.getBlockByIndex(r);
-		i && (i.holder.contains(n) || (n.appendChild(i.holder), this.api.blocks.setBlockParent(t, this.tableBlockId), this.stripPlaceholders(n)));
+		var n, r;
+		let i = e.querySelector(`[${k}]`);
+		if (!i) return;
+		let a = this.api.blocks.getBlockIndex(t);
+		if (a === void 0) return;
+		let o = this.api.blocks.getBlockByIndex(a);
+		if (!o || o.holder.contains(i)) return;
+		let s = this.api.blocks.getBlocksCount(), c = (n = (r = Array.from({ length: s - a - 1 }, (e, t) => this.api.blocks.getBlockByIndex(a + 1 + t)).find((e) => (e == null ? void 0 : e.holder.parentElement) === i)) == null ? void 0 : r.holder) == null ? null : n;
+		i.insertBefore(o.holder, c), this.api.blocks.setBlockParent(t, this.tableBlockId), this.stripPlaceholders(i);
 	}
 	findCellForNewBlock(e) {
 		return this.findCellForAdjacentBlock(e - 1) || this.findCellForAdjacentBlock(e + 1);
@@ -4489,10 +4490,28 @@ var er = (e) => ({ element: $n({
 		if (!s || !t.contains(s)) return;
 		let c = s.closest(`[${T}]`);
 		if (!c) return;
+		if (a.rows === 1 && a.cols === 1) {
+			e.preventDefault(), e.stopPropagation(), this.insertSingleCellPayloadInline(a.cells[0][0]);
+			return;
+		}
 		e.preventDefault(), e.stopPropagation();
 		let l = Array.from(t.querySelectorAll(`[${T}]`)).indexOf(c), u = Array.from(c.querySelectorAll(`[${E}]`)).indexOf(s);
 		this.pastePayloadIntoCells(t, a, l, u);
 	}
+	insertSingleCellPayloadInline(e) {
+		let t = e.blocks.map((e) => typeof e.data.text == "string" ? e.data.text : "").filter(Boolean).join("<br>");
+		if (!t) return;
+		let n = window.getSelection();
+		if (!n || n.rangeCount === 0) return;
+		let r = n.getRangeAt(0);
+		r.deleteContents();
+		let i = document.createDocumentFragment(), a = document.createElement("div");
+		a.innerHTML = t, Array.from(a.childNodes).forEach((e) => i.appendChild(e)), i.childNodes.length === 0 && i.appendChild(new Text());
+		let o = i.lastChild;
+		r.insertNode(i);
+		let s = document.createRange(), c = o.nodeType === Node.TEXT_NODE ? o : o.firstChild;
+		c !== null && c.textContent !== null && s.setStart(c, c.textContent.length), n.removeAllRanges(), n.addRange(s);
+	}
 	pastePayloadIntoCells(e, t, n, r) {
 		this.runTransactedStructuralOp(() => {
 			var i, a;
@@ -5767,7 +5786,7 @@ var Q = (e) => e.tagName === "MARK", Ji = (e) => q(e, Q), $, Yi = {
 		return { mark: (t) => {
 			let n = t.style, r = Array.from({ length: n.length }, (e, t) => n.item(t));
 			for (let t of r) e.ALLOWED_STYLE_PROPS.has(t) || n.removeProperty(t);
-			return n.length > 0 ? { style: !0 } : {};
+			return n.getPropertyValue("color") && !n.getPropertyValue("background-color") && n.setProperty("background-color", "transparent"), n.length > 0 ? { style: !0 } : {};
 		} };
 	}
 	constructor({ api: e }) {

package/dist/full.mjs

@@ -1,7 +1,7 @@
-import { En as e } from "./chunks/constants-DXYRzX7f.mjs";
-import { n as t, t as n } from "./chunks/blok-D-7DpjTs.mjs";
+import { En as e } from "./chunks/constants-BkelccB1.mjs";
+import { n as t, t as n } from "./chunks/blok-3RuPZd3G.mjs";
 import { t as r } from "./chunks/objectSpread2-CyPxu8-u.mjs";
-import { a as i, d as a, i as o, l as s, n as c, o as l, r as u, s as d, t as f, u as p } from "./chunks/tools-Chd7Auwx.mjs";
+import { a as i, d as a, i as o, l as s, n as c, o as l, r as u, s as d, t as f, u as p } from "./chunks/tools-rsbC2UUN.mjs";
 //#region src/full.ts
 var m = {
 	paragraph: {

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import "./chunks/constants-DXYRzX7f.mjs";
-import { i as e, t } from "./chunks/blok-D-7DpjTs.mjs";
+import "./chunks/constants-BkelccB1.mjs";
+import { i as e, t } from "./chunks/blok-3RuPZd3G.mjs";
 import { t as n } from "./chunks/objectSpread2-CyPxu8-u.mjs";
 import { forwardRef as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
 import { jsx as c } from "react/jsx-runtime";

package/dist/tools.mjs

@@ -1,3 +1,3 @@
-import { m as e } from "./chunks/constants-DXYRzX7f.mjs";
-import { a as t, c as n, d as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "./chunks/tools-Chd7Auwx.mjs";
+import { m as e } from "./chunks/constants-BkelccB1.mjs";
+import { a as t, c as n, d as r, i, l as a, n as o, o as s, r as c, s as l, t as u, u as d } from "./chunks/tools-rsbC2UUN.mjs";
 export { s as Bold, e as Convert, d as Header, t as Italic, i as Link, a as List, c as Marker, r as Paragraph, n as Table, l as Toggle, u as defaultBlockTools, o as defaultInlineTools };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Blok — headless, highly extensible rich text editor built for developers who need to implement a block-based editing experience (similar to Notion) without building it from scratch",
   "module": "dist/blok.mjs",
   "types": "./types/index.d.ts",

package/src/components/inline-tools/inline-tool-marker.ts

@@ -86,6 +86,17 @@ export class MarkerInlineTool implements InlineTool {
           }
         }
 
+        /**
+         * When text color is set without an explicit background-color,
+         * add transparent background to override the browser's default
+         * <mark> background (yellow/Mark system color). This handles
+         * pasted content where the browser may have dropped the
+         * transparent value during clipboard serialization.
+         */
+        if (style.getPropertyValue('color') && !style.getPropertyValue('background-color')) {
+          style.setProperty('background-color', 'transparent');
+        }
+
         return style.length > 0 ? { style: true } : {};
       },
     } as SanitizerConfig;

package/src/components/modules/blockEvents/composers/keyboardNavigation.ts

@@ -249,7 +249,7 @@ export class KeyboardNavigation extends BlockEventComposer {
 
       if (toggleWrapper?.getAttribute('data-blok-toggle-open') === 'true') {
         this.Blok.BlockManager.setBlockParent(newBlock, currentBlock.id);
-      } else if (currentBlock.parentId !== null) {
+      } else if (currentBlock.parentId !== null && newBlock.parentId !== currentBlock.parentId) {
         this.Blok.BlockManager.setBlockParent(newBlock, currentBlock.parentId);
       }
 
@@ -600,14 +600,6 @@ export class KeyboardNavigation extends BlockEventComposer {
     const isDownKey = keyCode === keyCodes.DOWN;
     const isRightKey = keyCode === keyCodes.RIGHT && !this.isRtl;
 
-    /**
-     * Skip ArrowDown handling for blocks inside table cells — the table's own
-     * grid-level handler manages row-based navigation and table exit.
-     */
-    if (isDownKey && this.isCurrentBlockInsideTableCell) {
-      return;
-    }
-
     const isNavigated = (() => {
       if (isDownKey) {
         /**

package/src/components/modules/caret.ts

@@ -681,10 +681,22 @@ export class Caret extends Module {
       return true;
     }
 
+    /**
+     * If both blocks share the same DOM container (e.g., same table cell),
+     * navigate directly to the next block instead of exiting the table.
+     */
+    if (nextBlock !== null && currentBlock.parentId !== null &&
+        currentBlock.holder.parentElement !== null &&
+        currentBlock.holder.parentElement === nextBlock.holder.parentElement) {
+      this.setToBlockAtXPosition(nextBlock, caretX, true);
+
+      return true;
+    }
+
     /**
      * If current block is inside a table cell (has parentId), check if we should
      * exit the table. This handles two cases:
-     * 1. nextBlock is still in the same table → skip all cell paragraphs
+     * 1. nextBlock is in a different cell of the same table → skip to block after table
      * 2. nextBlock is null (last block in flat list) → table is at the end
      */
     const shouldExitParent = currentBlock.parentId !== null && (

package/src/components/modules/paste/google-docs-preprocessor.ts

@@ -17,9 +17,13 @@ export function preprocessGoogleDocsHtml(html: string): string {
 
   wrapper.innerHTML = html;
 
-  unwrapGoogleDocsContent(wrapper);
-  convertGoogleDocsStyles(wrapper);
-  convertTableCellParagraphs(wrapper);
+  const isGoogleDocs = unwrapGoogleDocsContent(wrapper);
+
+  convertGoogleDocsStyles(wrapper, isGoogleDocs);
+
+  if (isGoogleDocs) {
+    convertTableCellParagraphs(wrapper);
+  }
 
   return wrapper.innerHTML;
 }
@@ -29,12 +33,14 @@ export function preprocessGoogleDocsHtml(html: string): string {
  * Google Docs wraps clipboard HTML in `<b id="docs-internal-guid-...">`.
  * Content may be split across multiple child `<div>` elements (e.g. one
  * per table), so all children are moved out of the wrapper.
+ *
+ * @returns true if Google Docs content was detected
  */
-function unwrapGoogleDocsContent(wrapper: HTMLElement): void {
+function unwrapGoogleDocsContent(wrapper: HTMLElement): boolean {
   const googleDocsWrapper = wrapper.querySelector<HTMLElement>('b[id^="docs-internal-guid-"]');
 
   if (!googleDocsWrapper) {
-    return;
+    return false;
   }
 
   const fragment = document.createDocumentFragment();
@@ -44,6 +50,8 @@ function unwrapGoogleDocsContent(wrapper: HTMLElement): void {
   }
 
   googleDocsWrapper.replaceWith(fragment);
+
+  return true;
 }
 
 /**
@@ -76,6 +84,82 @@ function isDefaultBlack(color: string): boolean {
   return normalized === 'rgb(0,0,0)' || normalized === '#000000';
 }
 
+/**
+ * Check whether a CSS background-color value is the default white page background.
+ * When the browser natively copies from a contenteditable, it adds computed styles
+ * including `background-color: rgb(255, 255, 255)` — the resolved page background.
+ * These should not be treated as intentional marker formatting.
+ */
+function isDefaultWhiteBackground(bgColor: string): boolean {
+  const normalized = bgColor.replace(/\s/g, '').toLowerCase();
+
+  return normalized === 'rgb(255,255,255)' || normalized === '#ffffff' || normalized === 'white';
+}
+
+/**
+ * Optionally wrap innerHTML in a `<mark>` with mapped color styles.
+ * Returns the original content unchanged when no color formatting is needed.
+ */
+function buildMarkWrapper(
+  innerHTML: string,
+  hasColor: boolean,
+  hasBgColor: boolean,
+  color: string | undefined,
+  bgColor: string | undefined
+): string {
+  if (!hasColor && !hasBgColor) {
+    return innerHTML;
+  }
+
+  const mappedColor = hasColor && color !== undefined ? mapToNearestPresetColor(color, 'text') : '';
+  const mappedBg = hasBgColor && bgColor !== undefined ? mapToNearestPresetColor(bgColor, 'bg') : '';
+
+  const colorStyles = [
+    hasColor ? `color: ${mappedColor}` : '',
+    resolveBackgroundStyle(hasBgColor, hasColor, mappedBg),
+  ].filter(Boolean).join('; ');
+
+  return colorStyles
+    ? `<mark style="${colorStyles};">${innerHTML}</mark>`
+    : innerHTML;
+}
+
+/**
+ * Convert a single style `<span>` to semantic HTML.
+ *
+ * For Google Docs content, all non-transparent backgrounds are treated as
+ * intentional formatting.  For browser-native clipboard content, default
+ * page values (black text, white background) are filtered out so computed
+ * styles on plain text don't produce spurious `<mark>` elements.
+ *
+ * @returns replacement HTML string, or `null` if the span should be left as-is
+ */
+function convertSpanToSemanticHtml(span: Element, isGoogleDocs: boolean): string | null {
+  const style = span.getAttribute('style') ?? '';
+  const isBold = /font-weight\s*:\s*(700|bold)/i.test(style);
+  const isItalic = /font-style\s*:\s*italic/i.test(style);
+
+  const colorMatch = /(?<![a-z-])color\s*:\s*([^;]+)/i.exec(style);
+  const bgMatch = /background-color\s*:\s*([^;]+)/i.exec(style);
+
+  const color = colorMatch?.[1]?.trim();
+  const bgColor = bgMatch?.[1]?.trim();
+
+  const hasColor = color !== undefined && !isDefaultBlack(color);
+  const hasBgColor = isGoogleDocs
+    ? bgColor !== undefined && bgColor !== 'transparent'
+    : bgColor !== undefined && bgColor !== 'transparent' && !isDefaultWhiteBackground(bgColor);
+
+  if (!isBold && !isItalic && !hasColor && !hasBgColor) {
+    return null;
+  }
+
+  const inner = buildMarkWrapper(span.innerHTML, hasColor, hasBgColor, color, bgColor);
+  const italic = isItalic ? `<i>${inner}</i>` : inner;
+
+  return isBold ? `<b>${italic}</b>` : italic;
+}
+
 /**
  * Convert Google Docs style-based `<span>` elements to semantic HTML tags.
  *
@@ -86,44 +170,18 @@ function isDefaultBlack(color: string): boolean {
  *
  * Color and bold/italic can combine: a bold red span becomes `<b><mark style="color: red;">text</mark></b>`.
  */
-function convertGoogleDocsStyles(wrapper: HTMLElement): void {
+function convertGoogleDocsStyles(wrapper: HTMLElement, isGoogleDocs: boolean): void {
   for (const span of Array.from(wrapper.querySelectorAll('span[style]'))) {
-    const style = span.getAttribute('style') ?? '';
-    const isBold = /font-weight\s*:\s*(700|bold)/i.test(style);
-    const isItalic = /font-style\s*:\s*italic/i.test(style);
+    const replacement = convertSpanToSemanticHtml(span, isGoogleDocs);
 
-    const colorMatch = /(?<![a-z-])color\s*:\s*([^;]+)/i.exec(style);
-    const bgMatch = /background-color\s*:\s*([^;]+)/i.exec(style);
-
-    const color = colorMatch?.[1]?.trim();
-    const bgColor = bgMatch?.[1]?.trim();
-
-    const hasColor = color !== undefined && !isDefaultBlack(color);
-    const hasBgColor = bgColor !== undefined && bgColor !== 'transparent';
-
-    if (!isBold && !isItalic && !hasColor && !hasBgColor) {
-      continue;
+    if (replacement !== null) {
+      span.replaceWith(document.createRange().createContextualFragment(replacement));
     }
-
-    const mappedColor = hasColor ? mapToNearestPresetColor(color, 'text') : '';
-    const mappedBg = hasBgColor ? mapToNearestPresetColor(bgColor, 'bg') : '';
-
-    const colorStyles = [
-      hasColor ? `color: ${mappedColor}` : '',
-      resolveBackgroundStyle(hasBgColor, hasColor, mappedBg),
-    ].filter(Boolean).join('; ');
-
-    const inner = colorStyles
-      ? `<mark style="${colorStyles};">${span.innerHTML}</mark>`
-      : span.innerHTML;
-
-    const italic = isItalic ? `<i>${inner}</i>` : inner;
-    const wrapped = isBold ? `<b>${italic}</b>` : italic;
-
-    span.replaceWith(document.createRange().createContextualFragment(wrapped));
   }
 
-  convertAnchorColorStyles(wrapper);
+  if (isGoogleDocs) {
+    convertAnchorColorStyles(wrapper);
+  }
 }
 
 /**

package/src/components/modules/toolbar/blockSettings.ts

@@ -188,7 +188,7 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
 
       const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
       const popoverParams: PopoverParams & { flipper?: Flipper } = {
-        searchable: false,
+        searchable: true,
         trigger: trigger || this.nodes.wrapper,
         items: await this.getTunesItems(block, commonTunes, toolTunes),
         scopeElement: this.Blok.API.methods.ui.nodes.redactor,

package/src/components/modules/toolbar/index.ts

@@ -428,6 +428,16 @@ export class Toolbar extends Module<ToolbarNodes> {
       targetBlock.setupDraggable(settingsToggler, this.Blok.DragManager);
     }
 
+    /**
+     * Update toolbox left alignment to the block's content element so the popover
+     * aligns with the actual visible content, not the toolbar's internal wrapper.
+     */
+    const blockContentElement = targetBlockHolder.querySelector<HTMLElement>(`[${DATA_ATTR.elementContent}]`);
+
+    if (blockContentElement) {
+      this.toolboxInstance.updateLeftAlignElement(blockContentElement);
+    }
+
     /**
      * Apply content offset for nested elements (e.g., nested list items)
      */
@@ -836,7 +846,6 @@ export class Toolbar extends Module<ToolbarNodes> {
       },
       i18n: this.Blok.I18n,
       triggerElement: this.nodes.plusButton,
-      leftAlignElement: this.nodes.content,
     });
 
     this.toolboxInstance.on(ToolboxEvent.Opened, () => {

package/src/components/modules/toolbar/inline/index.ts

@@ -81,6 +81,11 @@ export class InlineToolbar extends Module<InlineToolbarNodes> {
   private keyboardHandler: InlineKeyboardHandler;
   private lifecycleManager: InlineLifecycleManager;
 
+  /**
+   * SelectionUtils instance for fake background cleanup
+   */
+  private selection: SelectionUtils = new SelectionUtils();
+
   /**
    * Currently visible tools instances
    */
@@ -185,8 +190,22 @@ export class InlineToolbar extends Module<InlineToolbarNodes> {
     }
 
     this.openingPromise = this.open();
-    await this.openingPromise;
-    this.openingPromise = null;
+
+    try {
+      await this.openingPromise;
+    } catch {
+      this.opened = false;
+
+      if (this.popover) {
+        this.popover.hide?.();
+        this.popover.destroy?.();
+        this.popover = null;
+      }
+
+      return;
+    } finally {
+      this.openingPromise = null;
+    }
 
     this.Blok.Toolbar.hideBlockActions();
   }
@@ -203,6 +222,9 @@ export class InlineToolbar extends Module<InlineToolbarNodes> {
     this.opened = false;
     this.openingPromise = null;
 
+    // Clean up any orphaned fake background elements left by inline tools (Link, Marker, Convert)
+    this.selection.clearFakeBackground();
+
     // Hide and destroy popover
     if (this.popover) {
       this.popover.hide?.();

package/src/components/selection/cursor.ts

@@ -43,6 +43,13 @@ export class SelectionCursor {
     selection.removeAllRanges();
     selection.addRange(range);
 
+    // Focus contenteditable elements explicitly after setting the selection range.
+    // Placed after addRange() so the selection is preserved when focus transfers —
+    // calling focus() before addRange() can reset the caret during arrow navigation.
+    if ($.isContentEditable(element) && document.activeElement !== element) {
+      element.focus();
+    }
+
     return range.getBoundingClientRect();
   }
 

package/src/components/ui/toolbox.ts

@@ -205,6 +205,20 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     this.api.events.on(BlokMobileLayoutToggled, this.handleMobileLayoutToggle);
   }
 
+  /**
+   * Updates the element used for horizontal popover alignment.
+   * Called when the toolbar moves to a new block so the popover
+   * aligns with the block's content element rather than the toolbar's own wrapper.
+   * @param element - block content element to align against
+   */
+  public updateLeftAlignElement(element: HTMLElement | undefined): void {
+    this.leftAlignElement = element;
+
+    if (this.popover !== null && 'setLeftAlignElement' in this.popover) {
+      (this.popover as { setLeftAlignElement: (el: HTMLElement | undefined) => void }).setLeftAlignElement(element);
+    }
+  }
+
   /**
    * Returns root block settings element
    */

package/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.ts

@@ -339,7 +339,7 @@ export class PopoverItemDefault extends PopoverItem {
   private getIconClass(iconWithGap: boolean, isInline: boolean, isNestedInline: boolean, isWobbling: boolean): string {
     return twMerge(
       css.icon,
-      isInline && 'w-auto h-auto [&_svg]:w-icon [&_svg]:h-icon mobile:[&_svg]:w-icon-mobile mobile:[&_svg]:h-icon-mobile',
+      isInline && 'w-auto h-auto bg-transparent [&_svg]:w-icon [&_svg]:h-icon mobile:[&_svg]:w-icon-mobile mobile:[&_svg]:h-icon-mobile',
       isNestedInline && 'w-toolbox-btn h-toolbox-btn',
       iconWithGap && 'mr-3',
       iconWithGap && isInline && 'shadow-none mr-0!',

package/src/components/utils/popover/components/search-input/search-input.const.ts

@@ -5,4 +5,5 @@ export const css = {
   wrapper: 'bg-search-input-bg border border-search-input-border rounded-lg p-1 grid grid-cols-[auto_auto_1fr] grid-rows-[auto] transition-all duration-200 focus-within:bg-popover-bg focus-within:border-search-input-focus-border focus-within:shadow-[0_0_0_2px_rgba(35,131,226,0.08)]',
   icon: 'w-toolbox-btn h-toolbox-btn flex items-center justify-center mr-2 [&_svg]:w-icon [&_svg]:h-icon [&_svg]:text-gray-text',
   input: "text-sm outline-hidden font-medium font-inherit border-0 bg-transparent m-0 p-0 leading-[22px] min-w-[calc(100%-(--spacing(6))-10px)] placeholder:text-gray-text/60 placeholder:font-normal",
+  clearButton: 'flex items-center justify-center w-toolbox-btn h-toolbox-btn cursor-pointer border-0 bg-transparent rounded p-0 opacity-0 pointer-events-none transition-opacity duration-150 [&_svg]:w-3 [&_svg]:h-3 [&_svg]:text-gray-text can-hover:hover:[&_svg]:text-dark',
 };

package/src/components/utils/popover/components/search-input/search-input.ts

@@ -1,5 +1,5 @@
 import { Dom } from '../../../../dom';
-import { IconSearch } from '../../../../icons';
+import { IconCross, IconSearch } from '../../../../icons';
 import { EventsDispatcher } from '../../../events';
 import { Listeners } from '../../../listeners';
 
@@ -23,6 +23,11 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
    */
   private input: HTMLInputElement;
 
+  /**
+   * Clear button element
+   */
+  private clearButton: HTMLButtonElement;
+
   /**
    * The instance of the Listeners util
    */
@@ -73,8 +78,15 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
     this.input.setAttribute('data-blok-flipper-navigation-target', 'true');
     this.input.setAttribute('data-blok-testid', 'popover-search-input');
 
+    this.clearButton = Dom.make('button', css.clearButton, {
+      type: 'button',
+      innerHTML: IconCross,
+    }) as HTMLButtonElement;
+    this.clearButton.setAttribute('aria-label', 'Clear search');
+
     this.wrapper.appendChild(iconWrapper);
     this.wrapper.appendChild(this.input);
+    this.wrapper.appendChild(this.clearButton);
 
     this.overrideValueProperty();
 
@@ -83,6 +95,11 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
     eventsToHandle.forEach((eventName) => {
       this.listeners.on(this.input, eventName, this.handleValueChange);
     });
+
+    this.listeners.on(this.clearButton, 'click', () => {
+      this.clear();
+      this.input.focus();
+    });
   }
 
   /**
@@ -104,12 +121,14 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
    */
   public clear(): void {
     this.input.value = '';
+    this.updateClearButtonVisibility();
   }
 
   /**
    * Handles value changes for the input element
    */
   private handleValueChange = (): void => {
+    this.updateClearButtonVisibility();
     this.applySearch(this.input.value);
   };
 
@@ -159,6 +178,18 @@ export class SearchInput extends EventsDispatcher<SearchInputEventMap> {
     });
   }
 
+  /**
+   * Shows or hides the clear button based on whether the input has a value
+   */
+  private updateClearButtonVisibility(): void {
+    const visible = this.input.value.length > 0;
+
+    this.clearButton.classList.toggle('opacity-0', !visible);
+    this.clearButton.classList.toggle('pointer-events-none', !visible);
+    this.clearButton.classList.toggle('opacity-100', visible);
+    this.clearButton.classList.toggle('pointer-events-auto', visible);
+  }
+
   /**
    * Clears memory
    */

package/src/components/utils/popover/popover-desktop.ts

@@ -67,6 +67,14 @@ export class PopoverDesktop extends PopoverAbstract {
    */
   private leftAlignElement: HTMLElement | undefined;
 
+  /**
+   * Updates the element whose left edge is used for horizontal positioning.
+   * @param element - new element to align against, or undefined to fall back to trigger
+   */
+  public setLeftAlignElement(element: HTMLElement | undefined): void {
+    this.leftAlignElement = element;
+  }
+
   /**
    * Popover size cache
    */
@@ -405,7 +413,7 @@ export class PopoverDesktop extends PopoverAbstract {
    * Destroys nested popover unless the mouse moved into it.
    * @param event - mouseleave event
    */
-  private handleMouseLeave(event: Event): void {
+  protected handleMouseLeave(event: Event): void {
     const mouseEvent = event as MouseEvent;
     const relatedTarget = mouseEvent.relatedTarget;
 

package/src/components/utils/popover/popover-inline.ts

@@ -240,6 +240,14 @@ export class PopoverInline extends PopoverDesktop {
     return;
   }
 
+  /**
+   * Disable mouse-leave event handling.
+   * Inline toolbar uses click-to-toggle for nested popovers, not hover.
+   */
+  protected override handleMouseLeave(): void {
+    return;
+  }
+
   /**
    * Sets CSS variable with position of item near which nested popover should be displayed.
    * Is used to position nested popover right below clicked item