@jackuait/blok 0.6.0 → 0.7.0-beta.2

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

@@ -2,22 +2,39 @@ import { twMerge, twJoin } from '../tw';
 
 import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions } from './types';
 
+/**
+ * SVG icons for notification styles.
+ * Each icon is 16x16, stroke-based for consistency.
+ */
+const ICONS = {
+  success: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.25"/><path d="M5.5 8.25l1.75 1.75 3.25-3.5"/></svg>`,
+  error: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.25"/><path d="M8 5.25v3"/><circle cx="8" cy="10.75" r="0.5" fill="currentColor" stroke="none"/></svg>`,
+  default: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6.25"/><path d="M8 7.25v3.25"/><circle cx="8" cy="5.25" r="0.5" fill="currentColor" stroke="none"/></svg>`,
+};
+
+const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 2l6 6M8 2l-6 6"/></svg>`;
+
 export const CSS = {
   wrapper: twJoin(
     '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-notify rounded-[5px]',
-    'text-sm leading-[1.4em] wrap-break-word',
+    'relative flex items-start gap-2.5 w-[230px] mt-[15px] py-[13px] px-4',
+    'bg-white shadow-notify rounded-[6px]',
+    'text-sm leading-[1.4em] wrap-break-word overflow-hidden',
     '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'
   ),
+  icon: 'shrink-0 mt-px',
+  iconSuccess: 'text-[#34c992]',
+  iconError: 'text-[#fb5d5d]',
+  iconDefault: 'text-[#9ca3af]',
+  messageWrapper: 'flex-1 min-w-0',
   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-45',
-    'after:content-[""] after:absolute after:left-[9px] after:top-[5px] after:h-3 after:w-0.5 after:bg-[#575d67] after:rotate-45',
+    'absolute top-[7px] right-[7px] flex items-center justify-center',
+    'w-6 h-6 rounded opacity-40 cursor-pointer',
+    'transition-opacity duration-150',
     'hover:opacity-100'
   ),
   btnsWrapper: 'flex flex-row flex-nowrap mt-[5px]',
@@ -37,6 +54,70 @@ export const CSS = {
     'bg-[#fffbfb]!',
     'before:bg-[#fb5d5d]!'
   ),
+  progressBar: twJoin(
+    'absolute bottom-0 left-0 h-[2px] rounded-b-[6px]',
+    'animate-notify-progress'
+  ),
+  progressDefault: 'bg-[#d1d5db]',
+  progressSuccess: 'bg-[#41ffb1]',
+  progressError: 'bg-[#fb5d5d]',
+};
+
+/**
+ * Creates an icon element for the notification.
+ */
+const createIcon = (style?: string): HTMLElement => {
+  const iconWrapper = document.createElement('span');
+  const resolvedStyle = style === 'success' || style === 'error' ? style : 'default';
+
+  iconWrapper.innerHTML = ICONS[resolvedStyle];
+  iconWrapper.setAttribute('data-blok-testid', 'notification-icon');
+  iconWrapper.setAttribute('data-blok-style', resolvedStyle);
+
+  const iconColorMap: Record<string, string> = {
+    success: CSS.iconSuccess,
+    error: CSS.iconError,
+    default: CSS.iconDefault,
+  };
+
+  const colorClass = iconColorMap[resolvedStyle] ?? CSS.iconDefault;
+
+  iconWrapper.className = twJoin(CSS.icon, colorClass);
+
+  return iconWrapper;
+};
+
+/**
+ * Creates a close (cross) button with an SVG icon.
+ */
+const createCloseButton = (): HTMLElement => {
+  const cross = document.createElement('div');
+
+  cross.className = CSS.crossBtn;
+  cross.setAttribute('data-blok-testid', 'notification-cross');
+  cross.innerHTML = CLOSE_ICON;
+
+  return cross;
+};
+
+/**
+ * Creates a progress bar element for auto-dismissing alerts.
+ */
+export const createProgressBar = (style?: string, time?: number): HTMLElement => {
+  const bar = document.createElement('div');
+
+  const progressColorMap: Record<string, string> = {
+    success: CSS.progressSuccess,
+    error: CSS.progressError,
+  };
+
+  const colorClass = progressColorMap[style ?? ''] ?? CSS.progressDefault;
+
+  bar.className = twJoin(CSS.progressBar, colorClass);
+  bar.setAttribute('data-blok-testid', 'notification-progress');
+  bar.style.animationDuration = `${time ?? 8000}ms`;
+
+  return bar;
 };
 
 /**
@@ -45,8 +126,6 @@ export const CSS = {
  */
 export const alert = (options: NotifierOptions): HTMLElement => {
   const notify = document.createElement('DIV');
-  const cross = document.createElement('DIV');
-  const message = options.message;
   const style = options.style;
 
   const getStyleClasses = (): string => {
@@ -69,12 +148,23 @@ export const alert = (options: NotifierOptions): HTMLElement => {
     notify.setAttribute('data-blok-testid', 'notification');
   }
 
-  notify.innerHTML = message;
+  // Icon
+  const icon = createIcon(style);
 
-  cross.className = CSS.crossBtn;
-  cross.setAttribute('data-blok-testid', 'notification-cross');
-  cross.addEventListener('click', () => notify.remove());
+  notify.appendChild(icon);
+
+  // Message wrapper (flex child that holds message + buttons)
+  const messageWrapper = document.createElement('div');
+
+  messageWrapper.className = CSS.messageWrapper;
+  messageWrapper.setAttribute('data-blok-testid', 'notification-message');
+  messageWrapper.innerHTML = options.message;
+  notify.appendChild(messageWrapper);
+
+  // Close button
+  const cross = createCloseButton();
 
+  cross.addEventListener('click', () => notify.remove());
   notify.appendChild(cross);
 
   return notify;
@@ -86,6 +176,7 @@ export const alert = (options: NotifierOptions): HTMLElement => {
  */
 export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
   const notify = alert(options);
+  const messageWrapper = notify.querySelector('[data-blok-testid="notification-message"]') as HTMLElement;
   const btnsWrapper = document.createElement('div');
   const okBtn = document.createElement('button');
   const cancelBtn = document.createElement('button');
@@ -123,7 +214,12 @@ export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
   btnsWrapper.appendChild(okBtn);
   btnsWrapper.appendChild(cancelBtn);
 
-  notify.appendChild(btnsWrapper);
+  // Append buttons to the message wrapper so they flow under the message text
+  if (messageWrapper) {
+    messageWrapper.appendChild(btnsWrapper);
+  } else {
+    notify.appendChild(btnsWrapper);
+  }
 
   return notify;
 };
@@ -134,6 +230,7 @@ export const confirm = (options: ConfirmNotifierOptions): HTMLElement => {
  */
 export const prompt = (options: PromptNotifierOptions): HTMLElement => {
   const notify = alert(options);
+  const messageWrapper = notify.querySelector('[data-blok-testid="notification-message"]') as HTMLElement;
   const btnsWrapper = document.createElement('div');
   const okBtn = document.createElement('button');
   const input = document.createElement('input');
@@ -176,7 +273,12 @@ export const prompt = (options: PromptNotifierOptions): HTMLElement => {
   btnsWrapper.appendChild(input);
   btnsWrapper.appendChild(okBtn);
 
-  notify.appendChild(btnsWrapper);
+  // Append to message wrapper for proper flex layout
+  if (messageWrapper) {
+    messageWrapper.appendChild(btnsWrapper);
+  } else {
+    notify.appendChild(btnsWrapper);
+  }
 
   return notify;
 };

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

@@ -1,8 +1,19 @@
-import { alert, confirm, getWrapper, prompt } from './draw';
+import { alert, confirm, createProgressBar, getWrapper, prompt } from './draw';
 import type { NotifierOptions, ConfirmNotifierOptions, PromptNotifierOptions } from './types';
 
 const DEFAULT_TIME = 8000;
 
+/**
+ * Applies the exit animation and removes the element after it finishes.
+ */
+const dismissWithAnimation = (element: HTMLElement): void => {
+  element.classList.add('animate-notify-slide-out');
+
+  element.addEventListener('animationend', () => {
+    element.remove();
+  }, { once: true });
+};
+
 /**
  * Prepare wrapper for notifications
  * @returns {HTMLElement}
@@ -48,8 +59,24 @@ export const show = (options: NotifierOptions | ConfirmNotifierOptions | PromptN
     // type is 'alert' or undefined
     const alertElement = alert(options);
 
+    // Add progress bar for auto-dismissing alerts
+    const progressBar = createProgressBar(options.style, time);
+
+    alertElement.appendChild(progressBar);
+
+    // Wire up the close button to use animated dismissal
+    const crossBtn = alertElement.querySelector('[data-blok-testid="notification-cross"]');
+
+    if (crossBtn) {
+      // Replace the basic remove handler with animated dismissal
+      const newCross = crossBtn.cloneNode(true) as HTMLElement;
+
+      crossBtn.replaceWith(newCross);
+      newCross.addEventListener('click', () => dismissWithAnimation(alertElement));
+    }
+
     window.setTimeout(() => {
-      alertElement.remove();
+      dismissWithAnimation(alertElement);
     }, time);
 
     return alertElement;
@@ -57,11 +84,11 @@ export const show = (options: NotifierOptions | ConfirmNotifierOptions | PromptN
 
   if (wrapper && notify) {
     wrapper.appendChild(notify);
-    notify.className = `${notify.className} animate-notify-bounce-in`;
+    notify.className = `${notify.className} animate-notify-slide-in`;
     notify.setAttribute('data-blok-bounce-in', 'true');
   }
 };
 
 export const Notifier = {
   show,
-};
+};

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-(--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-lg px-2 py-(--item-padding) text-text-primary mb-0.5 transition-[color,background-color,border-color,opacity,max-height,padding,margin] duration-150 max-h-10 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-[26px] h-[26px] [&_svg]:w-icon [&_svg]:h-icon',
+  icon: 'flex items-center justify-center w-[26px] h-[26px] shrink-0 rounded-lg [&_svg]:w-icon [&_svg]:h-icon',
 
   /**
    * Focused state class for DomIterator/Flipper keyboard navigation.

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

@@ -258,8 +258,8 @@ export class PopoverItemDefault extends PopoverItem {
       const titleEl = document.createElement('div');
 
       titleEl.className = params.secondaryLabel
-        ? 'grow truncate text-sm font-medium leading-5'
-        : 'mr-auto truncate text-sm font-medium leading-5';
+        ? 'grow whitespace-nowrap text-sm font-medium leading-5'
+        : 'mr-auto whitespace-nowrap text-sm font-medium leading-5';
       titleEl.setAttribute(DATA_ATTR.popoverItemTitle, '');
       titleEl.setAttribute('data-blok-testid', 'popover-item-title');
       titleEl.textContent = title;
@@ -272,7 +272,7 @@ export class PopoverItemDefault extends PopoverItem {
     if (params.secondaryLabel) {
       const secondaryEl = document.createElement('div');
 
-      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.className = 'ml-auto shrink-0 flex items-center whitespace-nowrap pl-20 text-[11px] font-medium tracking-wide text-text-secondary/50';
       secondaryEl.setAttribute(DATA_ATTR.popoverItemSecondaryTitle, '');
       secondaryEl.setAttribute('data-blok-testid', 'popover-item-secondary-title');
       secondaryEl.textContent = params.secondaryLabel;
@@ -326,8 +326,7 @@ export class PopoverItemDefault extends PopoverItem {
 
     return twMerge(
       css.item,
-      // 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 && !isNestedInline && 'pl-2 pr-4',
       isInline && cssInline.item,
       isNestedInline && cssNestedInline.item,
       this.params.isDisabled && css.itemDisabled
@@ -343,6 +342,7 @@ 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 && 'bg-icon-bg',
       iconWithGap && isInline && 'shadow-none bg-transparent mr-0!',
       iconWithGap && isNestedInline && 'mr-2!',
       isWobbling && 'animate-wobble'
@@ -384,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('opacity-0', 'max-h-0!', 'py-0!', 'mb-0!');
     } else {
       this.nodes.root.removeAttribute(DATA_ATTR.hidden);
-      this.nodes.root.classList.remove('hidden!');
+      this.nodes.root.classList.remove('opacity-0', 'max-h-0!', 'py-0!', 'mb-0!');
     }
   }
 

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

@@ -2,8 +2,8 @@
  * Tailwind CSS classes for popover separator component
  */
 export const css = {
-  container: 'py-1 px-[3px]',
-  containerHidden: 'hidden',
+  container: 'py-1 px-[3px] transition-[opacity,max-height,padding] duration-150 max-h-4 overflow-hidden',
+  containerHidden: 'opacity-0 max-h-0! py-0!',
   line: 'h-px w-full bg-popover-border',
 };
 

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-sm p-0.5 grid grid-cols-[auto_auto_1fr] grid-rows-[auto]',
+  wrapper: 'bg-[#F8F8F8] border border-[rgba(226,226,229,0.20)] rounded-lg p-0.5 grid grid-cols-[auto_auto_1fr] grid-rows-[auto] transition-colors duration-150 focus-within:bg-white focus-within:border-[rgba(56,138,229,0.3)]',
   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 placeholder:font-medium",
 };

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

@@ -391,9 +391,11 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
   protected toggleNothingFoundMessage(isDisplayed: boolean): void {
     if (isDisplayed) {
       this.nodes.nothingFoundMessage.classList.remove('hidden');
+      this.nodes.nothingFoundMessage.classList.add('animate-[fade-in_150ms_ease_forwards]');
       this.nodes.nothingFoundMessage.setAttribute(DATA_ATTR.nothingFoundDisplayed, 'true');
     } else {
       this.nodes.nothingFoundMessage.classList.add('hidden');
+      this.nodes.nothingFoundMessage.classList.remove('animate-[fade-in_150ms_ease_forwards]');
       this.nodes.nothingFoundMessage.removeAttribute(DATA_ATTR.nothingFoundDisplayed);
     }
   }
@@ -449,11 +451,12 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
 
     // Set CSS variables
     popover.style.setProperty('--width', this.params.width ?? 'auto');
-    popover.style.setProperty('--item-padding', '3px');
+    popover.style.setProperty('--item-padding', '4px');
     popover.style.setProperty('--item-height', 'calc(1.25rem + 2 * var(--item-padding))');
     popover.style.setProperty('--popover-top', 'calc(100% + 0.5rem)');
     popover.style.setProperty('--popover-left', '0');
     popover.style.setProperty('--nested-popover-overlap', '0.25rem');
+    popover.style.setProperty('--max-height', '400px');
 
     // Create popover container
     const popoverContainer = document.createElement('div');
@@ -464,7 +467,7 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     // Create nothing found message
     const nothingFoundMessage = document.createElement('div');
     nothingFoundMessage.className = twMerge(
-      'cursor-default text-sm leading-5 font-medium whitespace-nowrap overflow-hidden text-ellipsis text-gray-text p-[3px]',
+      'cursor-default text-sm leading-5 font-medium whitespace-nowrap overflow-hidden text-ellipsis text-gray-text px-3 py-3 text-center',
       'hidden'
     );
     nothingFoundMessage.setAttribute('data-blok-testid', 'popover-nothing-found');

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

@@ -60,6 +60,12 @@ export class PopoverDesktop extends PopoverAbstract {
    */
   private trigger: HTMLElement | undefined;
 
+  /**
+   * Optional element whose left edge is used for horizontal positioning
+   * instead of the trigger's left edge.
+   */
+  private leftAlignElement: HTMLElement | undefined;
+
   /**
    * Popover size cache
    */
@@ -78,6 +84,10 @@ export class PopoverDesktop extends PopoverAbstract {
       this.trigger = params.trigger;
     }
 
+    if (params.leftAlignElement) {
+      this.leftAlignElement = params.leftAlignElement;
+    }
+
     if (params.nestingLevel !== undefined) {
       this.nestingLevel = params.nestingLevel;
     }
@@ -191,7 +201,13 @@ export class PopoverDesktop extends PopoverAbstract {
       this.nodes.popover.style.setProperty(CSSVariables.PopoverLeft, '0px');
     }
 
-    this.nodes.popover.style.setProperty(CSSVariables.PopoverHeight, this.size.height + 'px');
+    const measuredSize = this.size;
+
+    this.nodes.popover.style.setProperty(CSSVariables.PopoverHeight, measuredSize.height + 'px');
+
+    if (this.params.width === undefined || this.params.width === 'auto') {
+      this.nodes.popover.style.setProperty('--width', measuredSize.width + 'px');
+    }
 
     if (!this.trigger && !this.shouldOpenBottom) {
       this.setOpenTop(true);
@@ -270,7 +286,7 @@ export class PopoverDesktop extends PopoverAbstract {
       (rect.top - offset - popoverRect.height > window.scrollY);
     const top = shouldFlipTop ? rect.top - offset - popoverRect.height + window.scrollY : initialTop;
 
-    const initialLeft = rect.left + window.scrollX;
+    const initialLeft = (this.leftAlignElement?.getBoundingClientRect().left ?? rect.left) + window.scrollX;
     const shouldFlipLeft = initialLeft + popoverRect.width > windowWidth + window.scrollX;
     const left = shouldFlipLeft ? Math.max(0, rect.right - popoverRect.width + window.scrollX) : initialLeft;
 
@@ -695,6 +711,18 @@ export class PopoverDesktop extends PopoverAbstract {
     // Cast data.items to PopoverItemDefault[] since we know that's what filterItems passes
     const matchingItems = data.items as unknown as PopoverItemDefault[];
 
+    /**
+     * When nothing is found, disable transitions so items hide instantly.
+     * The "Nothing found" message fade-in provides the visual transition;
+     * animating the last items' collapse simultaneously causes a jarring
+     * height bounce in the popover container.
+     */
+    if (isNothingFound) {
+      this.items.forEach(item => {
+        item.getElement()?.style.setProperty('transition-duration', '0s');
+      });
+    }
+
     this.items
       .forEach((item) => {
         const isDefaultItem = item instanceof PopoverItemDefault;
@@ -705,6 +733,15 @@ export class PopoverDesktop extends PopoverAbstract {
 
         item.toggleHidden(isHidden);
       });
+
+    if (isNothingFound) {
+      // Force reflow so the instant hide takes effect, then restore transitions
+      this.nodes.popoverContainer.offsetHeight;
+      this.items.forEach(item => {
+        item.getElement()?.style.removeProperty('transition-duration');
+      });
+    }
+
     this.toggleNothingFoundMessage(isNothingFound);
 
     /** List of elements available for keyboard navigation considering search query applied */

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

@@ -5,19 +5,19 @@
  */
 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-(--width) w-(--width) rounded-lg shadow-[0_3px_15px_-3px_var(--color-popover-shadow)] left-(--popover-left) top-(--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-xl shadow-[0_4px_20px_-4px_var(--color-popover-shadow),0_0_0_0.5px_rgba(0,0,0,0.06)] 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-(--max-height) border border-popover-border animate-[panelShowing_100ms_ease]',
+  popoverContainerOpened: 'opacity-100 pointer-events-auto p-1.5 max-h-(--max-height) border border-popover-border animate-[panelShowing_100ms_ease]',
 
   // Popover overlay
   popoverOverlay: 'hidden bg-dark',
 
-  items: 'overflow-y-auto overscroll-contain',
+  items: 'overflow-y-auto overscroll-contain [scrollbar-gutter:stable] pr-1',
 };
 
 /**

package/src/full.ts

@@ -18,6 +18,7 @@
 import { BoldInlineTool as Bold } from './components/inline-tools/inline-tool-bold';
 import { ItalicInlineTool as Italic } from './components/inline-tools/inline-tool-italic';
 import { LinkInlineTool as Link } from './components/inline-tools/inline-tool-link';
+import { MarkerInlineTool as Marker } from './components/inline-tools/inline-tool-marker';
 import { Header } from './tools/header';
 import { ListItem as List } from './tools/list';
 import { Paragraph } from './tools/paragraph';
@@ -29,9 +30,11 @@ export {
   Paragraph,
   Header,
   List,
+  Toggle,
   Bold,
   Italic,
   Link,
+  Marker,
   defaultBlockTools,
   defaultInlineTools,
 } from './tools';
@@ -66,4 +69,5 @@ export const allTools = {
   bold: { class: Bold },
   italic: { class: Italic },
   link: { class: Link },
+  marker: { class: Marker },
 } as const;

package/src/stories/Placeholder.stories.ts

@@ -171,10 +171,15 @@ export const TypeAndClearPlaceholder: Story = {
 
       if (contentEditable) {
         await userEvent.click(contentEditable);
-        await userEvent.type(contentEditable, 'Hello world');
+        await userEvent.keyboard('Hello world');
       }
 
-      expect(contentEditable?.textContent).toContain('Hello world');
+      await waitFor(
+        () => {
+          expect(contentEditable?.textContent).toContain('Hello world');
+        },
+        TIMEOUT_ACTION
+      );
     });
 
     await step('Clear content to restore placeholder', async () => {

package/src/stories/helpers.ts

@@ -8,6 +8,7 @@ import { BoldInlineTool } from '../components/inline-tools/inline-tool-bold';
 import { ConvertInlineTool } from '../components/inline-tools/inline-tool-convert';
 import { ItalicInlineTool } from '../components/inline-tools/inline-tool-italic';
 import { LinkInlineTool } from '../components/inline-tools/inline-tool-link';
+import { MarkerInlineTool } from '../components/inline-tools/inline-tool-marker';
 import { Header } from '../tools/header';
 import { ListItem } from '../tools/list';
 import { Paragraph } from '../tools/paragraph';
@@ -35,6 +36,7 @@ export const defaultTools: { [toolName: string]: ToolConstructable | ToolSetting
   bold: BoldInlineTool,
   italic: ItalicInlineTool,
   link: LinkInlineTool,
+  marker: MarkerInlineTool,
   convertTo: ConvertInlineTool,
 };