@jackuait/blok 0.7.3-beta.4 → 0.8.0

package/src/components/shared/color-picker.ts

@@ -1,7 +1,26 @@
 import type { I18n } from '../../../types/api';
 import { parseColor } from '../utils/color-mapping';
+import { onHover } from '../utils/tooltip';
 import { twMerge } from '../utils/tw';
-import { COLOR_PRESETS } from './color-presets';
+import { COLOR_PRESETS, COLOR_PRESETS_DARK } from './color-presets';
+
+/**
+ * Returns the appropriate preset array for the current theme.
+ * Checks the data-blok-theme attribute first (explicit override),
+ * then falls back to the prefers-color-scheme media query.
+ */
+function getActivePresets(): typeof COLOR_PRESETS {
+  const theme = document.documentElement.getAttribute('data-blok-theme');
+
+  if (theme === 'dark') return COLOR_PRESETS_DARK;
+  if (theme === 'light') return COLOR_PRESETS;
+
+  if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
+    return COLOR_PRESETS_DARK;
+  }
+
+  return COLOR_PRESETS;
+}
 
 /**
  * Compare two CSS color strings for equality by their parsed RGB tuples.
@@ -23,7 +42,7 @@ function colorsEqual(a: string, b: string): boolean {
 }
 
 /**
- * Describes one tab in the color picker (e.g. "Text" or "Background")
+ * Describes one section in the color picker (e.g. "Text" or "Background")
  */
 export interface ColorPickerMode {
   key: string;
@@ -37,7 +56,6 @@ export interface ColorPickerMode {
 export interface ColorPickerOptions {
   i18n: I18n;
   modes: [ColorPickerMode, ColorPickerMode];
-  defaultModeIndex?: number;
   testIdPrefix: string;
   onColorSelect: (color: string | null, modeKey: string) => void;
 }
@@ -49,163 +67,166 @@ export interface ColorPickerHandle {
   element: HTMLDivElement;
   /**
    * Set the currently active color for visual indication on the matching swatch.
-   * Pass null to clear any active indicator.
+   * Pass null to clear any active indicator for that section.
    * @param color - CSS color value or null to clear
-   * @param modeKey - The mode key (e.g. 'color', 'background-color') to match the correct preset field
+   * @param modeKey - The mode key (e.g. 'color', 'background-color') to match the correct section
    */
   setActiveColor: (color: string | null, modeKey: string) => void;
   /**
-   * Reset the picker state (tab index) back to defaultModeIndex.
-   * Call this when the picker is reopened to ensure consistent initial state.
+   * Reset the picker state back to defaults (clear all active colors).
    */
   reset: () => void;
 }
 
 /**
- * Base Tailwind classes shared by tab buttons
+ * Neutral background for text-mode swatches so they render as visible buttons.
+ * Uses a CSS variable so it adapts to dark mode.
  */
-const TAB_BASE_CLASSES = 'flex-1 py-1.5 text-xs text-center rounded-md cursor-pointer border-none outline-hidden transition-colors';
+const SWATCH_NEUTRAL_BG = 'var(--blok-swatch-neutral-bg)';
 
 /**
- * Neutral background for text-mode swatches so they render as visible buttons
- */
-const SWATCH_NEUTRAL_BG = '#f7f7f5';
-
-/**
- * Creates a color picker element with two tabs (e.g. Text / Background),
- * a 5-column swatch grid, and a "Default" reset button.
+ * Creates a color picker element with two always-visible sections (e.g. Text / Background),
+ * each containing a 5-column swatch grid with a "Default" reset swatch at position 0.
  *
  * Shared between the marker inline tool and the table cell color popover.
  */
 export function createColorPicker(options: ColorPickerOptions): ColorPickerHandle {
   const { i18n, modes, testIdPrefix, onColorSelect } = options;
-  const defaultModeIndex = options.defaultModeIndex ?? 0;
-  const state = { modeIndex: defaultModeIndex, activeColor: null as string | null };
+  const state = {
+    activeColors: Object.fromEntries(modes.map((m) => [m.key, null])) as Record<string, string | null>,
+  };
 
   const wrapper = document.createElement('div');
 
   wrapper.setAttribute('data-blok-testid', `${testIdPrefix}-picker`);
-  wrapper.className = 'flex flex-col gap-2 p-2';
+  wrapper.className = 'flex flex-col gap-3 p-2';
 
   /**
-   * Tab row
+   * One grid element per section, stored so we can re-render independently.
    */
-  const tabRow = document.createElement('div');
+  const sectionGrids: HTMLDivElement[] = [];
 
-  tabRow.className = 'flex gap-0.5 mb-0.5';
+  /**
+   * Build sections once; re-render only the grids on state changes.
+   */
+  modes.forEach((mode) => {
+    const section = document.createElement('div');
 
-  const tabButtons: HTMLButtonElement[] = [];
+    section.setAttribute('data-blok-testid', `${testIdPrefix}-section-${mode.key}`);
+    section.className = 'flex flex-col gap-1';
 
-  modes.forEach((mode, modeIndex) => {
-    const tab = document.createElement('button');
+    const title = document.createElement('div');
 
-    tab.setAttribute('data-blok-testid', `${testIdPrefix}-tab-${mode.key}`);
-    tab.textContent = i18n.t(mode.labelKey);
-    tab.addEventListener('click', () => {
-      state.modeIndex = modeIndex;
-      updateTabs();
-      renderSwatches();
-    });
-    tabButtons.push(tab);
-    tabRow.appendChild(tab);
-  });
+    title.className = 'text-xs font-medium text-text-primary/60 px-0.5';
+    title.textContent = i18n.t(mode.labelKey);
 
-  const updateTabs = (): void => {
-    for (const [index, button] of tabButtons.entries()) {
-      button.className = twMerge(
-        TAB_BASE_CLASSES,
-        index === state.modeIndex ? 'bg-item-hover-bg font-medium' : 'bg-transparent hover:bg-item-hover-bg/50'
-      );
-    }
-  };
+    const grid = document.createElement('div');
+
+    grid.className = 'grid gap-1';
+    grid.style.gridTemplateColumns = 'repeat(5, 2.25rem)';
+    sectionGrids.push(grid);
+
+    section.appendChild(title);
+    section.appendChild(grid);
+    wrapper.appendChild(section);
+  });
 
   /**
-   * Color grid
+   * Render the swatches for one section.
    */
-  const grid = document.createElement('div');
+  const renderSection = (modeIndex: number): void => {
+    const grid = sectionGrids[modeIndex];
+    const mode = modes[modeIndex];
+    const presets = getActivePresets();
 
-  grid.setAttribute('data-blok-testid', `${testIdPrefix}-grid`);
-  grid.className = 'grid grid-cols-5 gap-1.5';
-
-  const renderSwatches = (): void => {
     grid.innerHTML = '';
 
-    const currentMode = modes[state.modeIndex];
+    const activeColorForSection = state.activeColors[mode.key];
+
+    // Default swatch (first position) — clears the active color for this section
+    const defaultSwatch = document.createElement('button');
+    const isDefaultActive = activeColorForSection === null;
+
+    defaultSwatch.setAttribute('data-blok-testid', `${testIdPrefix}-swatch-${mode.key}-default`);
+    defaultSwatch.className = twMerge(
+      'w-9 h-9 rounded-md cursor-pointer border-none outline-hidden',
+      'flex items-center justify-center text-sm font-semibold',
+      'transition-[box-shadow,transform] ring-inset hover:ring-2 hover:ring-swatch-ring-hover active:scale-90',
+      isDefaultActive && 'ring-2 ring-swatch-ring-hover'
+    );
+    defaultSwatch.textContent = mode.presetField === 'text' ? 'A' : '';
+
+    if (mode.presetField === 'text') {
+      defaultSwatch.style.color = 'var(--blok-text-primary)';
+      defaultSwatch.style.backgroundColor = SWATCH_NEUTRAL_BG;
+    } else {
+      defaultSwatch.style.backgroundColor = SWATCH_NEUTRAL_BG;
+    }
+    defaultSwatch.addEventListener('click', () => {
+      onColorSelect(null, mode.key);
+    });
+    const defaultLabel = i18n.t('tools.colorPicker.defaultSwatchLabel')
+      .replace('{default}', i18n.t('tools.marker.default'))
+      .replace('{mode}', i18n.t(mode.labelKey).toLowerCase());
+
+    onHover(defaultSwatch, defaultLabel.charAt(0).toUpperCase() + defaultLabel.slice(1), { placement: 'top' });
+    grid.appendChild(defaultSwatch);
 
-    for (const preset of COLOR_PRESETS) {
+    for (const preset of presets) {
       const swatch = document.createElement('button');
-      const swatchColor = currentMode.presetField === 'text' ? preset.text : preset.bg;
-      const isActive = state.activeColor !== null && colorsEqual(swatchColor, state.activeColor);
+      const swatchColor = mode.presetField === 'text' ? preset.text : preset.bg;
+      const isActive = activeColorForSection !== null && colorsEqual(swatchColor, activeColorForSection);
 
-      swatch.setAttribute('data-blok-testid', `${testIdPrefix}-swatch-${preset.name}`);
+      swatch.setAttribute('data-blok-testid', `${testIdPrefix}-swatch-${mode.key}-${preset.name}`);
       swatch.className = twMerge(
-        'w-8 h-8 rounded-md cursor-pointer border-none outline-hidden',
+        'w-9 h-9 rounded-md cursor-pointer border-none outline-hidden',
         'flex items-center justify-center text-sm font-semibold',
-        'transition-shadow ring-inset hover:ring-2 hover:ring-black/10',
-        isActive && 'ring-2 ring-black/30'
+        'transition-[box-shadow,transform] ring-inset hover:ring-2 hover:ring-swatch-ring-hover active:scale-90',
+        isActive && 'ring-2 ring-swatch-ring-hover'
       );
-      swatch.textContent = 'A';
+      swatch.textContent = mode.presetField === 'text' ? 'A' : '';
 
-      if (currentMode.presetField === 'text') {
+      if (mode.presetField === 'text') {
         swatch.style.color = preset.text;
         swatch.style.backgroundColor = SWATCH_NEUTRAL_BG;
       } else {
-        swatch.style.color = '';
+        swatch.style.color = presets === COLOR_PRESETS_DARK ? preset.text : '#37352f';
         swatch.style.backgroundColor = preset.bg;
       }
 
       swatch.addEventListener('click', () => {
-        onColorSelect(swatchColor, currentMode.key);
+        onColorSelect(swatchColor, mode.key);
       });
+      const colorLabel = i18n.t('tools.colorPicker.colorSwatchLabel')
+        .replace('{color}', i18n.t('tools.colorPicker.color.' + preset.name))
+        .replace('{mode}', i18n.t(mode.labelKey).toLowerCase());
+
+      onHover(swatch, colorLabel.charAt(0).toUpperCase() + colorLabel.slice(1), { placement: 'top' });
       grid.appendChild(swatch);
     }
   };
 
-  /**
-   * Default button
-   */
-  const defaultBtn = document.createElement('button');
-
-  defaultBtn.setAttribute('data-blok-testid', `${testIdPrefix}-default-btn`);
-  defaultBtn.className = twMerge(
-    'w-full py-1.5 text-xs text-center rounded-md cursor-pointer',
-    'bg-transparent border-none outline-hidden hover:bg-item-hover-bg',
-    'mt-0.5 transition-colors'
-  );
-  defaultBtn.textContent = i18n.t('tools.marker.default');
-  defaultBtn.addEventListener('click', () => {
-    onColorSelect(null, modes[state.modeIndex].key);
-  });
-
-  /**
-   * Assemble
-   */
-  updateTabs();
-  renderSwatches();
+  const renderAll = (): void => {
+    modes.forEach((_, i) => renderSection(i));
+  };
 
-  wrapper.appendChild(tabRow);
-  wrapper.appendChild(grid);
-  wrapper.appendChild(defaultBtn);
+  renderAll();
 
   return {
     element: wrapper,
     setActiveColor: (color: string | null, modeKey: string) => {
-      state.activeColor = color;
-
       const matchingIndex = modes.findIndex((m) => m.key === modeKey);
 
       if (matchingIndex !== -1) {
-        state.modeIndex = matchingIndex;
-        updateTabs();
+        state.activeColors[modeKey] = color;
+        renderSection(matchingIndex);
       }
-
-      renderSwatches();
     },
     reset: () => {
-      state.modeIndex = defaultModeIndex;
-      state.activeColor = null;
-      updateTabs();
-      renderSwatches();
+      for (const mode of modes) {
+        state.activeColors[mode.key] = null;
+      }
+      renderAll();
     },
   };
 }

package/src/components/shared/color-presets.ts

@@ -8,7 +8,7 @@ export interface ColorPreset {
 }
 
 /**
- * Ten Notion-style color presets.
+ * Ten Notion-style color presets for light mode.
  * `text` is used for foreground (text-color mode), `bg` for background swatches.
  */
 export const COLOR_PRESETS: ColorPreset[] = [
@@ -17,9 +17,37 @@ export const COLOR_PRESETS: ColorPreset[] = [
   { name: 'orange', text: '#d9730d', bg: '#fbecdd' },
   { name: 'yellow', text: '#cb9b00', bg: '#fbf3db' },
   { name: 'green', text: '#448361', bg: '#edf3ec' },
-  { name: 'teal', text: '#2b9a8f', bg: '#e4f5f3' },
   { name: 'blue', text: '#337ea9', bg: '#e7f3f8' },
   { name: 'purple', text: '#9065b0', bg: '#f6f3f9' },
   { name: 'pink', text: '#c14c8a', bg: '#f9f0f5' },
   { name: 'red', text: '#d44c47', bg: '#fdebec' },
 ];
+
+/**
+ * Dark-mode adapted presets. Text colors are lightened for readability on dark
+ * swatch backgrounds; background colors are deep/muted to integrate with dark UI.
+ * All pairs achieve at least 3.8:1 WCAG contrast. Backgrounds are equalized at
+ * ~L19% HSL with increased saturation so each hue family is clearly identifiable.
+ */
+export const COLOR_PRESETS_DARK: ColorPreset[] = [
+  { name: 'gray',   text: '#9b9b9b', bg: '#2f2f2f' },
+  { name: 'brown',  text: '#c59177', bg: '#452a1c' },
+  { name: 'orange', text: '#dc8c47', bg: '#4d2f14' },
+  { name: 'yellow', text: '#d4ab49', bg: '#544012' },
+  { name: 'green',  text: '#5db184', bg: '#1e432f' },
+  { name: 'blue',   text: '#5c9fcc', bg: '#123a54' },
+  { name: 'purple', text: '#a67dca', bg: '#341d49' },
+  { name: 'pink',   text: '#d45e99', bg: '#4b1b33' },
+  { name: 'red',    text: '#dd5e5a', bg: '#4e1a18' },
+];
+
+/**
+ * Construct a CSS custom property reference for a named preset color.
+ *
+ * @param name - The color preset name (e.g. 'red', 'blue')
+ * @param mode - 'text' for foreground, 'bg' for background
+ * @returns CSS var reference, e.g. `var(--blok-color-red-text)`
+ */
+export function colorVarName(name: string, mode: 'text' | 'bg'): string {
+  return `var(--blok-color-${name}-${mode})`;
+}

package/src/components/ui/toolbox.ts

@@ -167,6 +167,13 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
    */
   private isInsideTableCell = false;
 
+  /**
+   * Whether the toolbox was opened in slash-search mode (via "/" key or existing slash paragraph).
+   * When false (opened via plus button), the input filter uses the full block text as the query
+   * instead of requiring a leading "/" and does not close on missing slash.
+   */
+  private openedWithSlash = true;
+
   /**
    * Toolbox constructor
    * @param options - available parameters
@@ -280,8 +287,10 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
 
   /**
    * Open Toolbox with Tools
+   * @param withSlash - When true (default), inline search requires "/" and closes on its removal.
+   *                    When false (plus button), the full block text is used as the filter query.
    */
-  public open(): void {
+  public open(withSlash = true): void {
     if (this.isEmpty) {
       return;
     }
@@ -318,8 +327,20 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
       const caretRect = SelectionUtils.rect;
 
       this.popover.updatePosition(caretRect);
+    } else if (!withSlash && this.popover instanceof PopoverDesktop) {
+      /**
+       * When opened without slash (via plus button), the trigger element (plus button)
+       * is at the top of the block. Position the popover below the block's bottom edge
+       * instead, so it doesn't overlap the block's placeholder text.
+       */
+      const currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex);
+
+      if (currentBlock) {
+        this.popover.updatePosition(currentBlock.holder.getBoundingClientRect());
+      }
     }
 
+    this.openedWithSlash = withSlash;
     this.opened = true;
     this.emit(ToolboxEvent.Opened);
     this.startListeningToBlockInput();
@@ -725,7 +746,12 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
 
   /**
    * Handles input events on the block to filter the toolbox.
-   * Extracts text after "/" and applies it as a filter query.
+   *
+   * In slash mode (default): extracts text after "/" and filters by it.
+   * Closes if "/" is removed.
+   *
+   * In no-slash mode (opened via plus button): uses full block text as the
+   * filter query and does not close on missing "/".
    */
   private handleBlockInput = (): void => {
     if (this.currentContentEditable === null) {
@@ -733,15 +759,18 @@ export class Toolbox extends EventsDispatcher<ToolboxEventMap> {
     }
 
     const text = this.currentContentEditable.textContent || '';
-    const slashIndex = text.lastIndexOf('/');
 
-    if (slashIndex === -1) {
-      this.close();
+    if (this.openedWithSlash) {
+      const slashIndex = text.lastIndexOf('/');
 
-      return;
+      if (slashIndex === -1) {
+        this.close();
+
+        return;
+      }
     }
 
-    const query = text.slice(slashIndex + 1);
+    const query = this.openedWithSlash ? text.slice(text.lastIndexOf('/') + 1) : text;
 
     if (this.currentContentEditable instanceof HTMLElement) {
       this.currentContentEditable.setAttribute(

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

@@ -1,4 +1,4 @@
-import { COLOR_PRESETS } from '../shared/color-presets';
+import { COLOR_PRESETS, COLOR_PRESETS_DARK } from '../shared/color-presets';
 
 /**
  * Convert an HSL color (H in degrees, S and L as 0-100 percentages) to an RGB tuple.
@@ -239,3 +239,45 @@ export function mapToNearestPresetColor(cssColor: string, mode: 'text' | 'bg'):
 
   return best.color;
 }
+
+/**
+ * Map an arbitrary CSS color to the name of the nearest Blok preset color.
+ *
+ * Searches both light and dark presets to correctly recover the semantic name
+ * from hex values that originated in either theme. First match wins on ties.
+ *
+ * @param cssColor - CSS color string (hex or rgb)
+ * @param mode - 'text' for text color presets, 'bg' for background presets
+ * @returns the nearest preset name (e.g. 'red'), or null if unparseable
+ */
+export function mapToNearestPresetName(cssColor: string, mode: 'text' | 'bg'): string | null {
+  const rgb = parseColor(cssColor);
+
+  if (rgb === null) {
+    return null;
+  }
+
+  const hsl = rgbToHsl(rgb);
+  const allPresets = [...COLOR_PRESETS, ...COLOR_PRESETS_DARK];
+
+  const best = allPresets.reduce<{ name: string; distance: number } | null>(
+    (acc, preset) => {
+      const presetRgb = parseColor(preset[mode]);
+
+      if (presetRgb === null) {
+        return acc;
+      }
+
+      const distance = hslDistance(hsl, rgbToHsl(presetRgb));
+
+      if (acc === null || distance < acc.distance) {
+        return { name: preset.name, distance };
+      }
+
+      return acc;
+    },
+    null
+  );
+
+  return best?.name ?? null;
+}

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

@@ -0,0 +1,37 @@
+import { colorVarName } from '../shared/color-presets';
+import { mapToNearestPresetName } from './color-mapping';
+
+const PROPS = ['color', 'background-color'] as const;
+type Prop = typeof PROPS[number];
+
+const PROP_MODE: Record<Prop, 'text' | 'bg'> = {
+  'color': 'text',
+  'background-color': 'bg',
+};
+
+/**
+ * Scan all <mark> elements inside container and replace raw hex color/background-color
+ * inline style values with their corresponding CSS custom property references.
+ *
+ * Safe to call multiple times — already-migrated var() values and 'transparent' are
+ * left unchanged.
+ *
+ * @param container - Root element to search within (e.g. the editor redactor node)
+ */
+export function migrateMarkColors(container: Element): void {
+  container.querySelectorAll<HTMLElement>('mark').forEach((el) => {
+    for (const prop of PROPS) {
+      const value = el.style.getPropertyValue(prop);
+
+      if (!value || value === 'transparent' || value.startsWith('var(')) {
+        continue;
+      }
+
+      const name = mapToNearestPresetName(value, PROP_MODE[prop]);
+
+      if (name !== null) {
+        el.style.setProperty(prop, colorVarName(name, PROP_MODE[prop]));
+      }
+    }
+  });
+}

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-lg px-2 py-1 text-text-primary mb-px outline-hidden transition-[color,background-color,border-color,opacity,max-height,padding,margin] duration-150 max-h-9 overflow-hidden 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-lg px-2 py-1 text-text-primary mb-px outline-hidden max-h-9 overflow-hidden 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
@@ -21,7 +21,7 @@ export const css = {
   /**
    * Icon container styles
    */
-  icon: 'flex items-center justify-center w-7 h-7 shrink-0 rounded-lg bg-popover-icon-bg transition-colors duration-150 [&_svg]:w-icon [&_svg]:h-icon',
+  icon: 'flex items-center justify-center w-7 h-7 shrink-0 rounded-lg bg-popover-icon-bg [&_svg]:w-icon [&_svg]:h-icon',
 
   /**
    * Focused state class for DomIterator/Flipper keyboard navigation.
@@ -37,7 +37,8 @@ export const cssInline = {
   /**
    * Item in inline context - more compact styling
    */
-  item: 'rounded p-1',
+  item: 'rounded-lg p-1',
+  itemIconOnly: 'aspect-square justify-center',
 };
 
 /**

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

@@ -305,7 +305,7 @@ export class PopoverItemDefault extends PopoverItem {
   private createIconElement(icon: string, iconWithGap: boolean, isInline: boolean, isNestedInline: boolean): HTMLElement {
     const iconEl = document.createElement('div');
 
-    iconEl.className = this.getIconClass(iconWithGap, isInline, isNestedInline, false);
+    iconEl.className = this.getIconClass(iconWithGap, isInline, isNestedInline);
     iconEl.setAttribute(DATA_ATTR.popoverItemIcon, '');
     iconEl.setAttribute('data-blok-testid', 'popover-item-icon');
     iconEl.innerHTML = icon;
@@ -328,6 +328,7 @@ export class PopoverItemDefault extends PopoverItem {
       css.item,
       !isInline && !isNestedInline && 'pl-2 pr-3',
       isInline && cssInline.item,
+      isInline && this.params.icon && cssInline.itemIconOnly,
       isNestedInline && cssNestedInline.item,
       this.params.isDisabled && css.itemDisabled
     );
@@ -336,15 +337,14 @@ export class PopoverItemDefault extends PopoverItem {
   /**
    * Gets the icon class based on context
    */
-  private getIconClass(iconWithGap: boolean, isInline: boolean, isNestedInline: boolean, isWobbling: boolean): string {
+  private getIconClass(iconWithGap: boolean, isInline: boolean, isNestedInline: boolean): string {
     return twMerge(
       css.icon,
       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!',
-      iconWithGap && isNestedInline && 'mr-2!',
-      isWobbling && 'animate-wobble'
+      iconWithGap && isNestedInline && 'mr-2!'
     );
   }
 
@@ -639,47 +639,13 @@ export class PopoverItemDefault extends PopoverItem {
         item.onActivate?.(item);
         this.disableConfirmationMode();
       } catch {
-        this.animateError();
+        // onActivate threw an error
       }
     } else {
       this.enableConfirmationMode(item.confirmation);
     }
   }
 
-  /**
-   * Animates item which symbolizes that error occurred while executing 'onActivate()' callback
-   */
-  private animateError(): void {
-    this.triggerWobble();
-  }
-
-  /**
-   * Triggers wobble animation on the icon
-   */
-  private triggerWobble(): void {
-    if (!this.nodes.icon) {
-      return;
-    }
-
-    const isInline = this.renderParams?.isInline ?? false;
-    const isNestedInline = this.renderParams?.isNestedInline ?? false;
-    const iconWithGap = this.renderParams?.iconWithGap ?? true;
-
-    // Add wobble class
-    this.nodes.icon.setAttribute(DATA_ATTR.popoverItemWobble, 'true');
-    this.nodes.icon.className = this.getIconClass(iconWithGap, isInline, isNestedInline, true);
-
-    // Remove wobble after animation ends
-    const handleAnimationEnd = (): void => {
-      if (this.nodes.icon) {
-        this.nodes.icon.removeAttribute(DATA_ATTR.popoverItemWobble);
-        this.nodes.icon.className = this.getIconClass(iconWithGap, isInline, isNestedInline, false);
-      }
-    };
-
-    this.nodes.icon.addEventListener('animationend', handleAnimationEnd, { once: true });
-  }
-
   /**
    * Gets reference to the icon element
    */

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

@@ -2,7 +2,7 @@
  * Tailwind CSS classes for popover separator component
  */
 export const css = {
-  container: 'py-1.5 px-2 transition-[opacity,max-height,padding] duration-150 max-h-5 overflow-hidden',
+  container: 'py-1.5 px-2 max-h-5 overflow-hidden',
   containerHidden: 'opacity-0 max-h-0! py-0!',
   line: 'h-px w-full bg-popover-border/60',
 };
@@ -12,7 +12,7 @@ export const css = {
  */
 export const cssInline = {
   // Inline context: horizontal separator
-  container: 'px-1 py-0',
+  container: 'px-1 py-0 max-h-none',
   line: 'h-full w-px',
   // Nested inline context: back to vertical separator
   nestedContainer: 'py-1 px-[3px]',