@jackuait/blok 0.6.0-beta.9 → 0.6.0

package/src/components/utils/color-mapping.ts

@@ -0,0 +1,241 @@
+import { COLOR_PRESETS } from '../shared/color-presets';
+
+/**
+ * Convert an HSL color (H in degrees, S and L as 0-100 percentages) to an RGB tuple.
+ */
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  const sNorm = s / 100;
+  const lNorm = l / 100;
+
+  if (sNorm === 0) {
+    const gray = Math.round(lNorm * 255);
+
+    return [gray, gray, gray];
+  }
+
+  const wrapHue = (t: number): number => {
+    if (t < 0) {
+      return t + 1;
+    }
+
+    if (t > 1) {
+      return t - 1;
+    }
+
+    return t;
+  };
+
+  const hueToChannel = (p: number, q: number, t: number): number => {
+    const wrapped = wrapHue(t);
+
+    if (wrapped < 1 / 6) {
+      return p + (q - p) * 6 * wrapped;
+    }
+
+    if (wrapped < 1 / 2) {
+      return q;
+    }
+
+    if (wrapped < 2 / 3) {
+      return p + (q - p) * (2 / 3 - wrapped) * 6;
+    }
+
+    return p;
+  };
+
+  const q = lNorm < 0.5 ? lNorm * (1 + sNorm) : lNorm + sNorm - lNorm * sNorm;
+  const p = 2 * lNorm - q;
+  const hNorm = h / 360;
+
+  return [
+    Math.round(hueToChannel(p, q, hNorm + 1 / 3) * 255),
+    Math.round(hueToChannel(p, q, hNorm) * 255),
+    Math.round(hueToChannel(p, q, hNorm - 1 / 3) * 255),
+  ];
+}
+
+/**
+ * Parse a CSS color string to an [R, G, B] tuple.
+ *
+ * Supported formats:
+ * - `#rgb`, `#rgba`, `#rrggbb`, `#rrggbbaa`
+ * - `rgb(r, g, b)`, `rgba(r, g, b, a)`
+ * - `hsl(h, s%, l%)`, `hsla(h, s%, l%, a)`
+ *
+ * Alpha values are ignored since only RGB is needed for distance calculation.
+ * Returns null if the string cannot be parsed.
+ */
+export function parseColor(cssColor: string): [number, number, number] | null {
+  /* 6-digit hex: #rrggbb */
+  const hex6 = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(cssColor);
+
+  if (hex6) {
+    return [parseInt(hex6[1], 16), parseInt(hex6[2], 16), parseInt(hex6[3], 16)];
+  }
+
+  /* 8-digit hex: #rrggbbaa (alpha ignored) */
+  const hex8 = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})[0-9a-f]{2}$/i.exec(cssColor);
+
+  if (hex8) {
+    return [parseInt(hex8[1], 16), parseInt(hex8[2], 16), parseInt(hex8[3], 16)];
+  }
+
+  /* 3-digit hex: #rgb */
+  const hex3 = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i.exec(cssColor);
+
+  if (hex3) {
+    return [
+      parseInt(hex3[1] + hex3[1], 16),
+      parseInt(hex3[2] + hex3[2], 16),
+      parseInt(hex3[3] + hex3[3], 16),
+    ];
+  }
+
+  /* 4-digit hex: #rgba (alpha ignored) */
+  const hex4 = /^#([0-9a-f])([0-9a-f])([0-9a-f])[0-9a-f]$/i.exec(cssColor);
+
+  if (hex4) {
+    return [
+      parseInt(hex4[1] + hex4[1], 16),
+      parseInt(hex4[2] + hex4[2], 16),
+      parseInt(hex4[3] + hex4[3], 16),
+    ];
+  }
+
+  /* rgb() and rgba() — alpha component is optional and ignored */
+  const rgba = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*[\d.]+\s*)?\)$/i.exec(cssColor);
+
+  if (rgba) {
+    return [Number(rgba[1]), Number(rgba[2]), Number(rgba[3])];
+  }
+
+  /* hsl() and hsla() — alpha component is optional and ignored */
+  const hsla = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*[\d.]+\s*)?\)$/i.exec(cssColor);
+
+  if (hsla) {
+    return hslToRgb(Number(hsla[1]), Number(hsla[2]), Number(hsla[3]));
+  }
+
+  return null;
+}
+
+/** Saturation threshold below which a color is considered achromatic (gray/black/white) */
+const ACHROMATIC_THRESHOLD = 0.10;
+
+/**
+ * Convert an RGB tuple (0-255 per channel) to HSL.
+ *
+ * @returns [H, S, L] where H is 0-360 degrees, S and L are 0-1
+ */
+function rgbToHsl(rgb: [number, number, number]): [number, number, number] {
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+
+  if (max === min) {
+    return [0, 0, l];
+  }
+
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+
+  const hueFromMax = (channel: number): number => {
+    if (channel === r) {
+      return ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    }
+
+    if (channel === g) {
+      return ((b - r) / d + 2) / 6;
+    }
+
+    return ((r - g) / d + 4) / 6;
+  };
+
+  return [hueFromMax(max) * 360, s, l];
+}
+
+/**
+ * Compute the perceptual distance between two colors using HSL with hue weighting.
+ *
+ * Achromatic colors (saturation below threshold) are compared by lightness only,
+ * and are penalized heavily against chromatic colors to prevent gray mapping to
+ * a saturated preset.
+ *
+ * Chromatic colors use weighted distance: hue (most important), saturation, lightness.
+ * Hue distance is circular (wraps at 360 degrees).
+ */
+function hslDistance(
+  hsl1: [number, number, number],
+  hsl2: [number, number, number]
+): number {
+  const HUE_WEIGHT = 8;
+  const SAT_WEIGHT = 1;
+  const LIGHT_WEIGHT = 1;
+
+  const isAchromatic1 = hsl1[1] < ACHROMATIC_THRESHOLD;
+  const isAchromatic2 = hsl2[1] < ACHROMATIC_THRESHOLD;
+
+  /* Both achromatic: compare lightness only */
+  if (isAchromatic1 && isAchromatic2) {
+    const lightDiff = Math.abs(hsl1[2] - hsl2[2]);
+
+    return lightDiff * lightDiff;
+  }
+
+  /* One achromatic, one chromatic: large penalty so grays never match saturated presets */
+  if (isAchromatic1 !== isAchromatic2) {
+    return 1000;
+  }
+
+  /* Both chromatic: weighted HSL distance */
+  const hueDiff = Math.abs(hsl1[0] - hsl2[0]);
+  const circularHue = Math.min(hueDiff, 360 - hueDiff) / 180; // normalized 0-1
+  const satDiff = Math.abs(hsl1[1] - hsl2[1]);
+  const lightDiff = Math.abs(hsl1[2] - hsl2[2]);
+
+  return (
+    HUE_WEIGHT * circularHue * circularHue +
+    SAT_WEIGHT * satDiff * satDiff +
+    LIGHT_WEIGHT * lightDiff * lightDiff
+  );
+}
+
+/**
+ * Map an arbitrary CSS color to the nearest Blok preset color.
+ *
+ * Uses HSL-weighted distance with hue priority for perceptually intuitive results.
+ *
+ * @param cssColor - CSS color string (hex or rgb)
+ * @param mode - 'text' for text color presets, 'bg' for background presets
+ * @returns the nearest preset hex color, or the input unchanged if unparseable
+ */
+export function mapToNearestPresetColor(cssColor: string, mode: 'text' | 'bg'): string {
+  const rgb = parseColor(cssColor);
+
+  if (rgb === null) {
+    return cssColor;
+  }
+
+  const hsl = rgbToHsl(rgb);
+
+  const best = COLOR_PRESETS.reduce<{ color: string; distance: number }>(
+    (acc, preset) => {
+      const presetRgb = parseColor(preset[mode]);
+
+      if (presetRgb === null) {
+        return acc;
+      }
+
+      const distance = hslDistance(hsl, rgbToHsl(presetRgb));
+
+      return distance < acc.distance ? { color: preset[mode], distance } : acc;
+    },
+    { color: cssColor, distance: Infinity }
+  );
+
+  return best.color;
+}

package/src/components/utils/notifier/draw.ts

@@ -4,19 +4,19 @@ import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions } f
 
 export const CSS = {
   wrapper: twJoin(
-    'fixed z-[2] bottom-5 left-5',
+    'fixed z-2 bottom-5 left-5',
     'font-[-apple-system,BlinkMacSystemFont,"Segoe_UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira_Sans","Droid_Sans","Helvetica_Neue",sans-serif]'
   ),
   notification: twJoin(
     'relative w-[230px] mt-[15px] py-[13px] px-4',
-    'bg-white shadow-[0_11px_17px_0_rgba(23,32,61,0.13)] rounded-[5px]',
-    'text-sm leading-[1.4em] break-words',
+    'bg-white shadow-notify rounded-[5px]',
+    'text-sm leading-[1.4em] wrap-break-word',
     'before:content-[""] before:absolute before:block before:top-0 before:left-0',
     'before:w-[3px] before:h-[calc(100%-6px)] before:m-[3px] before:rounded-[5px] before:bg-transparent'
   ),
   crossBtn: twJoin(
     'absolute top-[7px] right-[15px] w-2.5 h-2.5 p-[5px] opacity-55 cursor-pointer',
-    'before:content-[""] before:absolute before:left-[9px] before:top-[5px] before:h-3 before:w-0.5 before:bg-[#575d67] before:rotate-[-45deg]',
+    'before:content-[""] before:absolute before:left-[9px] before:top-[5px] before:h-3 before:w-0.5 before:bg-[#575d67] before:-rotate-45',
     'after:content-[""] after:absolute after:left-[9px] after:top-[5px] after:h-3 after:w-0.5 after:bg-[#575d67] after:rotate-45',
     'hover:opacity-100'
   ),
@@ -26,16 +26,16 @@ export const CSS = {
   cancelBtn: 'bg-[#f2f5f7] shadow-[0_2px_1px_0_rgba(16,19,29,0)] text-[#656b7c] hover:bg-[#e9ecee]',
   input: twJoin(
     'max-w-[130px] py-[5px] px-2.5 bg-[#f7f7f7] border-0 rounded-[3px]',
-    'text-[13px] text-[#656b7c] outline-none',
+    'text-[13px] text-[#656b7c] outline-hidden',
     'placeholder:text-[#656b7c] focus:placeholder:text-[rgba(101,107,124,0.3)]'
   ),
   successNotification: twJoin(
-    '!bg-[#fafffe]',
-    'before:!bg-[#41ffb1]'
+    'bg-[#fafffe]!',
+    'before:bg-[#41ffb1]!'
   ),
   errorNotification: twJoin(
-    '!bg-[#fffbfb]',
-    'before:!bg-[#fb5d5d]'
+    'bg-[#fffbfb]!',
+    'before:bg-[#fb5d5d]!'
   ),
 };
 

package/src/components/utils/placeholder.ts

@@ -19,10 +19,10 @@ export const PLACEHOLDER_CLASSES: string[] = [
   'empty:before:text-gray-text',
   'empty:before:cursor-text',
   'empty:before:content-[attr(data-placeholder)]',
-  '[&[data-blok-empty=true]]:before:pointer-events-none',
-  '[&[data-blok-empty=true]]:before:text-gray-text',
-  '[&[data-blok-empty=true]]:before:cursor-text',
-  '[&[data-blok-empty=true]]:before:content-[attr(data-placeholder)]',
+  'data-[blok-empty=true]:before:pointer-events-none',
+  'data-[blok-empty=true]:before:text-gray-text',
+  'data-[blok-empty=true]:before:cursor-text',
+  'data-[blok-empty=true]:before:content-[attr(data-placeholder)]',
 ];
 
 /**
@@ -34,10 +34,10 @@ export const PLACEHOLDER_ACTIVE_CLASSES: string[] = [
   'empty:before:text-gray-text',
   'empty:before:cursor-text',
   'empty:before:content-[attr(data-blok-placeholder-active)]',
-  '[&[data-empty=true]]:before:pointer-events-none',
-  '[&[data-empty=true]]:before:text-gray-text',
-  '[&[data-empty=true]]:before:cursor-text',
-  '[&[data-empty=true]]:before:content-[attr(data-blok-placeholder-active)]',
+  'data-[empty=true]:before:pointer-events-none',
+  'data-[empty=true]:before:text-gray-text',
+  'data-[empty=true]:before:cursor-text',
+  'data-[empty=true]:before:content-[attr(data-blok-placeholder-active)]',
 ];
 
 /**
@@ -56,6 +56,22 @@ export const PLACEHOLDER_FOCUS_ONLY_CLASSES: string[] = [
   '[&[data-empty=true]:focus]:before:content-[attr(data-blok-placeholder-active)]',
 ];
 
+/**
+ * Placeholder classes that show when the editor is empty (ancestor has data-blok-empty="true").
+ * Shows placeholder without requiring focus — used for initial empty-state hint.
+ * Uses data-blok-placeholder-active attribute for the placeholder text.
+ */
+export const PLACEHOLDER_EMPTY_EDITOR_CLASSES: string[] = [
+  'empty:in-data-[blok-empty=true]:before:pointer-events-none',
+  'empty:in-data-[blok-empty=true]:before:text-gray-text',
+  'empty:in-data-[blok-empty=true]:before:cursor-text',
+  'empty:in-data-[blok-empty=true]:before:content-[attr(data-blok-placeholder-active)]',
+  '[[data-blok-empty=true]_&[data-empty=true]]:before:pointer-events-none',
+  '[[data-blok-empty=true]_&[data-empty=true]]:before:text-gray-text',
+  '[[data-blok-empty=true]_&[data-empty=true]]:before:cursor-text',
+  '[[data-blok-empty=true]_&[data-empty=true]]:before:content-[attr(data-blok-placeholder-active)]',
+];
+
 /**
  * Check if an element's content is empty
  *

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

@@ -10,7 +10,7 @@ export const css = {
    * Note: noHover state is handled via [data-blok-popover-item-no-hover] which disables hover
    * Priority order: active < hover < focus (focus wins when navigating with keyboard)
    */
-  item: 'flex items-center select-none border-none bg-transparent rounded-md px-2 py-[var(--item-padding)] text-text-primary mb-px [&[data-blok-popover-item-active]]:bg-icon-active-bg [&[data-blok-popover-item-active]]:text-icon-active-text can-hover:hover:cursor-pointer can-hover:hover:bg-item-hover-bg [&[data-blok-force-hover]]:cursor-pointer [&[data-blok-force-hover]]:bg-item-hover-bg [&[data-blok-focused="true"]]:bg-item-focus-bg [&[data-blok-popover-item-no-hover]]:hover:bg-transparent [&[data-blok-popover-item-no-hover]]:cursor-default can-hover:[&[data-blok-popover-item-destructive]]:hover:text-item-destructive-text can-hover:[&[data-blok-popover-item-destructive]]:hover:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-force-hover]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-force-hover]]:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:bg-item-destructive-hover-bg',
+  item: 'flex items-center select-none border-none bg-transparent rounded-md px-2 py-(--item-padding) text-text-primary mb-px data-blok-popover-item-active:bg-icon-active-bg data-blok-popover-item-active:text-icon-active-text can-hover:hover:cursor-pointer can-hover:hover:bg-item-hover-bg data-blok-force-hover:cursor-pointer data-blok-force-hover:bg-item-hover-bg data-[blok-focused="true"]:bg-item-focus-bg data-blok-popover-item-no-hover:hover:bg-transparent data-blok-popover-item-no-hover:cursor-default can-hover:data-blok-popover-item-destructive:hover:text-item-destructive-text can-hover:data-blok-popover-item-destructive:hover:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-force-hover]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-force-hover]]:bg-item-destructive-hover-bg [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:text-item-destructive-text [&[data-blok-popover-item-destructive][data-blok-focused="true"]]:bg-item-destructive-hover-bg',
 
   /**
    * Item disabled state
@@ -37,7 +37,7 @@ export const cssInline = {
   /**
    * Item in inline context - more compact styling
    */
-  item: 'rounded p-1',
+  item: 'rounded-sm p-1',
 };
 
 /**

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

@@ -257,7 +257,9 @@ export class PopoverItemDefault extends PopoverItem {
     if (title !== undefined) {
       const titleEl = document.createElement('div');
 
-      titleEl.className = 'mr-auto truncate text-sm font-medium leading-5';
+      titleEl.className = params.secondaryLabel
+        ? 'grow truncate text-sm font-medium leading-5'
+        : 'mr-auto truncate text-sm font-medium leading-5';
       titleEl.setAttribute(DATA_ATTR.popoverItemTitle, '');
       titleEl.setAttribute('data-blok-testid', 'popover-item-title');
       titleEl.textContent = title;
@@ -270,7 +272,7 @@ export class PopoverItemDefault extends PopoverItem {
     if (params.secondaryLabel) {
       const secondaryEl = document.createElement('div');
 
-      secondaryEl.className = 'whitespace-nowrap pr-1.5 text-xs font-light tracking-[0.25px] text-text-secondary opacity-60';
+      secondaryEl.className = 'min-w-14 text-right whitespace-nowrap pl-3 pr-1.5 text-xs font-light tracking-[0.25px] text-text-secondary opacity-60';
       secondaryEl.setAttribute(DATA_ATTR.popoverItemSecondaryTitle, '');
       secondaryEl.setAttribute('data-blok-testid', 'popover-item-secondary-title');
       secondaryEl.textContent = params.secondaryLabel;
@@ -324,8 +326,8 @@ export class PopoverItemDefault extends PopoverItem {
 
     return twMerge(
       css.item,
-      // Asymmetric padding for vertical popovers (better visual balance)
-      !isInline && !isNestedInline && 'pl-2 pr-8',
+      // Asymmetric padding: pr-8 for visual balance, pr-2 when secondary label or chevron occupies right edge
+      !isInline && !isNestedInline && (this.params.secondaryLabel || (this.hasChildren && !this.isChevronHidden) ? 'pl-2 pr-2' : 'pl-2 pr-8'),
       isInline && cssInline.item,
       isNestedInline && cssNestedInline.item,
       this.params.isDisabled && css.itemDisabled
@@ -341,8 +343,8 @@ export class PopoverItemDefault extends PopoverItem {
       isInline && 'w-auto h-auto [&_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 bg-transparent !mr-0',
-      iconWithGap && isNestedInline && '!mr-2',
+      iconWithGap && isInline && 'shadow-none bg-transparent mr-0!',
+      iconWithGap && isNestedInline && 'mr-2!',
       isWobbling && 'animate-wobble'
     );
   }
@@ -382,10 +384,10 @@ export class PopoverItemDefault extends PopoverItem {
 
     if (isHidden) {
       this.nodes.root.setAttribute(DATA_ATTR.hidden, 'true');
-      this.nodes.root.classList.add('!hidden');
+      this.nodes.root.classList.add('hidden!');
     } else {
       this.nodes.root.removeAttribute(DATA_ATTR.hidden);
-      this.nodes.root.classList.remove('!hidden');
+      this.nodes.root.classList.remove('hidden!');
     }
   }
 
@@ -400,10 +402,10 @@ export class PopoverItemDefault extends PopoverItem {
 
     if (isFocused) {
       this.nodes.root.setAttribute(DATA_ATTR.focused, 'true');
-      this.nodes.root.classList.add('!bg-item-focus-bg');
+      this.nodes.root.classList.add('bg-item-focus-bg!');
     } else {
       this.nodes.root.removeAttribute(DATA_ATTR.focused);
-      this.nodes.root.classList.remove('!bg-item-focus-bg');
+      this.nodes.root.classList.remove('bg-item-focus-bg!');
     }
   }
 
@@ -486,7 +488,7 @@ export class PopoverItemDefault extends PopoverItem {
     }
 
     this.nodes.root.removeAttribute(DATA_ATTR.popoverItemConfirmation);
-    this.nodes.root.classList.remove('!bg-item-confirm-bg', '!text-white');
+    this.nodes.root.classList.remove('bg-item-confirm-bg!', 'text-white!');
 
     this.restoreOriginalIcon();
     this.restoreOriginalTitle();
@@ -502,7 +504,7 @@ export class PopoverItemDefault extends PopoverItem {
     }
 
     this.nodes.root.setAttribute(DATA_ATTR.popoverItemConfirmation, 'true');
-    this.nodes.root.classList.add('!bg-item-confirm-bg', '!text-white');
+    this.nodes.root.classList.add('bg-item-confirm-bg!', 'text-white!');
 
     this.updateIcon(params.icon);
     this.updateTitle(params);

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

@@ -2,7 +2,7 @@
  * CSS class names to be used in popover search input class
  */
 export const css = {
-  wrapper: 'bg-[#F8F8F8] border border-[rgba(226,226,229,0.20)] rounded p-0.5 grid grid-cols-[auto_auto_1fr] grid-rows-[auto]',
+  wrapper: 'bg-[#F8F8F8] border border-[rgba(226,226,229,0.20)] rounded-sm p-0.5 grid grid-cols-[auto_auto_1fr] grid-rows-[auto]',
   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-none font-medium font-inherit border-0 bg-transparent m-0 p-0 leading-[22px] min-w-[calc(100%-theme('spacing.6')-10px)] placeholder:text-gray-text placeholder:font-medium",
+  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 placeholder:font-medium",
 };

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

@@ -114,7 +114,10 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
 
     // Update DOM state
     this.nodes.popover.setAttribute(DATA_ATTR.popoverOpened, 'true');
-    this.nodes.popoverContainer.classList.add(...css.popoverContainerOpened.split(' '));
+    this.nodes.popoverContainer.className = twMerge(
+      this.nodes.popoverContainer.className,
+      css.popoverContainerOpened
+    );
 
     /**
      * Refresh active states for all items.
@@ -142,7 +145,7 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     this.nodes.popover.removeAttribute(DATA_ATTR.popoverOpened);
     this.nodes.popover.removeAttribute(DATA_ATTR.popoverOpenTop);
     this.nodes.popover.removeAttribute(DATA_ATTR.popoverOpenLeft);
-    this.nodes.popoverContainer.classList.remove(...css.popoverContainerOpened.split(' '));
+    this.nodes.popoverContainer.className = css.popoverContainer;
 
     this.itemsDefault.forEach(item => item.reset());
 
@@ -174,6 +177,12 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     // No-op in base class. PopoverDesktop overrides this.
   }
 
+  /**
+   * Names of items that have been explicitly hidden via toggleItemHiddenByName.
+   * These items must stay hidden even when filterItems would normally show them.
+   */
+  private readonly permanentlyHiddenNames = new Set<string>();
+
   /**
    * Toggles hidden state of all items matching the given name
    * @param name - name of the items to toggle
@@ -183,6 +192,21 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     this.items
       .filter(item => item.name === name)
       .forEach(item => item.toggleHidden(isHidden));
+
+    if (isHidden) {
+      this.permanentlyHiddenNames.add(name);
+    } else {
+      this.permanentlyHiddenNames.delete(name);
+    }
+  }
+
+  /**
+   * Returns true if the given item name was explicitly hidden via toggleItemHiddenByName.
+   * Used by subclasses to prevent filter logic from un-hiding restricted items.
+   * @param name - item name to check
+   */
+  protected isNamePermanentlyHidden(name: string): boolean {
+    return this.permanentlyHiddenNames.has(name);
   }
 
   /**
@@ -326,7 +350,7 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
    * This is useful for items that determine their active state dynamically (e.g., inline tools).
    * @param item - popover item to refresh
    */
-  private refreshItemActiveState(item: PopoverItem): void {
+  protected refreshItemActiveState(item: PopoverItem): void {
     if (!(item instanceof PopoverItemDefault)) {
       return;
     }

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

@@ -138,6 +138,18 @@ export class PopoverDesktop extends PopoverAbstract {
     return this.flipper.hasFocus();
   }
 
+  /**
+   * Toggles hidden state of all items matching the given name.
+   * Invalidates the cached size so the next access re-measures the popover.
+   * @param name - name of the items to toggle
+   * @param isHidden - true to hide, false to show
+   */
+  public override toggleItemHiddenByName(name: string, isHidden: boolean): void {
+    super.toggleItemHiddenByName(name, isHidden);
+
+    this._size = undefined;
+  }
+
   /**
    * Scroll position inside items container of the popover
    */
@@ -453,6 +465,17 @@ export class PopoverDesktop extends PopoverAbstract {
     // Apply nested popover positioning (moved from popover.css)
     this.applyNestedPopoverPositioning(nestedPopoverEl);
 
+    /**
+     * Refresh trigger item's active state after any click inside the nested popover.
+     * This handles the case where a child action (e.g. color swatch click) changes
+     * the trigger tool's active state but the parent popover is not aware of it.
+     */
+    this.listeners.on(nestedPopoverEl, 'click', () => {
+      if (this.nestedPopoverTriggerItem !== null) {
+        this.refreshItemActiveState(this.nestedPopoverTriggerItem);
+      }
+    });
+
     this.nestedPopover.show();
     this.flipper?.deactivate();
 
@@ -481,8 +504,8 @@ export class PopoverDesktop extends PopoverAbstract {
     // Apply position: absolute for nested container
     nestedContainer.style.position = 'absolute';
 
-    // Get parent width - use computed width if --width is 'auto'
-    const parentWidth = this.params.width === 'auto'
+    // Get parent width - use computed width if --width resolves to 'auto'
+    const parentWidth = this.params.width === undefined || this.params.width === 'auto'
       ? `${this.nodes.popoverContainer.offsetWidth}px`
       : 'var(--width)';
 
@@ -677,7 +700,7 @@ export class PopoverDesktop extends PopoverAbstract {
         const isDefaultItem = item instanceof PopoverItemDefault;
         const isSeparatorOrHtml = item instanceof PopoverItemSeparator || item instanceof PopoverItemHtml;
         const isHidden = isDefaultItem
-          ? !matchingItems.includes(item)
+          ? !matchingItems.includes(item) || (item.name !== undefined && this.isNamePermanentlyHidden(item.name))
           : isSeparatorOrHtml && (isNothingFound || !isEmptyQuery);
 
         item.toggleHidden(isHidden);

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

@@ -7,6 +7,7 @@ import type { PopoverItem } from './components/popover-item';
 import { PopoverItemDefault, PopoverItemType , css as popoverItemCls } from './components/popover-item';
 import { PopoverItemHtml } from './components/popover-item/popover-item-html/popover-item-html';
 import { PopoverDesktop } from './popover-desktop';
+import { PopoverRegistry } from './popover-registry';
 import { css, cssInline, CSSVariables, getNestedLevelAttrValue } from './popover.const';
 
 import type { PopoverParams } from '@/types/utils/popover/popover';
@@ -66,6 +67,9 @@ export class PopoverInline extends PopoverDesktop {
       this.nodes.popoverContainer.style.height = '';
     }
 
+    // Unregister from PopoverRegistry (from abstract)
+    PopoverRegistry.instance.unregister(this);
+
     // Emit closed event (from abstract)
     this.emit(PopoverEvent.Closed);
   };
@@ -307,7 +311,16 @@ export class PopoverInline extends PopoverDesktop {
 
     // Apply level-1 specific positioning styles
     if (nestedPopover.nestingLevel === 1 && nestedContainer instanceof HTMLElement) {
-      nestedContainer.className = twMerge(nestedContainer.className, 'left-0');
+      // Position near the trigger item, clamped to stay within the toolbar bounds
+      const itemEl = item.getElement();
+      const triggerLeft = itemEl ? itemEl.offsetLeft + this.offsetLeft : 0;
+      const nestedWidth = nestedPopover.size.width;
+      const toolbarWidth = this.nodes.popoverContainer.offsetWidth;
+      const maxLeft = Math.max(0, toolbarWidth - nestedWidth);
+      const left = Math.max(0, Math.min(triggerLeft, maxLeft));
+
+      nestedContainer.style.left = `${left}px`;
+
       // Set top position based on height
       const topOffset = isMobileScreen() ? 'calc(var(--height-mobile) + 3px)' : 'calc(var(--height) + 3px)';
       nestedContainer.style.top = topOffset;

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

@@ -90,19 +90,19 @@ export class PopoverMobile extends PopoverAbstract<PopoverMobileNodes> {
    */
   public show(): void {
     this.nodes.overlay.removeAttribute(DATA_ATTR.overlayHidden);
-    this.nodes.overlay.className = twMerge(css.popoverOverlay, 'fixed inset-0 block visible z-[3] opacity-50 transition-opacity duration-[120ms] ease-in will-change-[opacity]');
+    this.nodes.overlay.className = twMerge(css.popoverOverlay, 'fixed inset-0 block visible z-3 opacity-50 transition-opacity duration-120 ease-in will-change-[opacity]');
 
     super.show();
 
     // Apply mobile opened state classes AFTER super.show() to override base class styles
-    // For mobile, we use max-h-none instead of max-h-[var(--max-height)] since mobile popovers
+    // For mobile, we use max-h-none instead of max-h-(--max-height) since mobile popovers
     // should expand to fit their content
-    // Use z-[4] to ensure container is above the overlay (z-[3])
+    // Use z-4 to ensure container is above the overlay (z-[3])
     this.nodes.popoverContainer.className = twMerge(
       css.popoverContainer,
       css.popoverContainerMobile,
       css.popoverContainerOpened,
-      'max-h-none z-[4] animate-[panelShowingMobile_250ms_ease]'
+      'max-h-none z-4 animate-[panelShowingMobile_250ms_ease]'
     );
 
     this.scrollLocker.lock();

package/src/components/utils/popover/popover.const.ts

@@ -5,14 +5,14 @@
  */
 export const css = {
   // Popover container - base styles
-  popoverContainer: 'absolute flex flex-col overflow-hidden box-border opacity-0 pointer-events-none p-0 border-none z-[4] max-h-0 min-w-[var(--width)] w-[var(--width)] rounded-lg shadow-[0_3px_15px_-3px_theme(colors.popover-shadow)] left-[var(--popover-left)] top-[var(--popover-top)] bg-popover-bg',
+  popoverContainer: 'absolute flex flex-col overflow-hidden box-border opacity-0 pointer-events-none p-0 border-none z-4 max-h-0 min-w-(--width) w-(--width) rounded-lg shadow-[0_3px_15px_-3px_var(--color-popover-shadow)] left-(--popover-left) top-(--popover-top) bg-popover-bg',
 
   // Popover container - mobile styles (applied conditionally)
   // Reset left/top from base class since inset shorthand may not properly override them in twMerge
   popoverContainerMobile: 'fixed max-w-none rounded-[10px] min-w-[calc(100%-var(--offset)*2)] left-auto top-auto inset-[auto_var(--offset)_calc(var(--offset)+env(safe-area-inset-bottom))_var(--offset)]',
 
   // Popover container - opened state
-  popoverContainerOpened: 'opacity-100 pointer-events-auto p-1 max-h-[var(--max-height)] border border-popover-border animate-[panelShowing_100ms_ease]',
+  popoverContainerOpened: 'opacity-100 pointer-events-auto p-1 max-h-(--max-height) border border-popover-border animate-[panelShowing_100ms_ease]',
 
   // Popover overlay
   popoverOverlay: 'hidden bg-dark',